import {
  ImageProps,
  LinkProps,
  SocialItemProps,
  blurDataUrl,
} from '@/src/common-types';
import { Button } from '@/src/components/button';
import { Container } from '@/src/components/container';
import { CustomLink } from '@/src/components/custom-link';
import { TextInput } from '@/src/components/inputs/text-input';

import { cn } from '@/src/utils/shadcn';
import Image from 'next/image';
import {
  FaLinkedinIn,
  // FaMagnifyingGlass,
  FaQuoteRight,
  FaRegUser,
  FaTags,
  FaFacebookF,
  FaTwitter,
  FaInstagram,
} from 'react-icons/fa6';

interface AuthorProps {
  image: Omit<ImageProps, 'width' | 'height'>;
  name: string;
  about: string;
  socialLinks: SocialItemProps[];
}

const authorData: AuthorProps = {
  image: {
    src: '/assets/images/blog/author-1.png',
    alt: 'author image 1',
  },
  name: 'Naturials paul',
  about:
    'Aliquam eros justo, posuere lobort viverra lao ullamcorper posuere viverra .Aliquam eros justo, posuere lobortis non',
  socialLinks: [
    {
      icon: <FaFacebookF />,
      href: 'https://www.facebook.com/',
    },
    {
      icon: <FaTwitter />,
      href: 'https://twitter.com/',
    },
    {
      icon: <FaInstagram />,
      href: 'https://www.instagram.com/',
    },
  ],
};

const socialLinks: SocialItemProps[] = [
  {
    icon: <FaFacebookF />,
    href: 'https://www.facebook.com/',
  },
  {
    icon: <FaTwitter />,
    href: 'https://twitter.com/',
  },
  {
    icon: <FaInstagram />,
    href: 'https://www.instagram.com/',
  },
  {
    icon: <FaLinkedinIn />,
    href: 'https://www.linkedin.com/',
  },
];

function Author({ image, name, about, socialLinks }: AuthorProps) {
  return (
    <div className="space-y-5 rounded-5 bg-accent-100 p-8 text-center dark:bg-accent-700 lg:p-10">
      <Image
        src={image.src}
        alt={image.alt || name}
        width={127}
        height={127}
        placeholder="blur"
        blurDataURL={blurDataUrl}
        className="mx-auto rounded-full object-cover"
      />
      <h3 className="font-secondary text-lg font-bold leading-[1.25] text-accent-900 dark:text-white md:text-xl">
        {name}
      </h3>
      <p>{about}</p>
      {socialLinks && socialLinks.length > 0 && (
        <nav aria-label="social links">
          <ul className="inline-flex items-center divide-x  divide-accent-800/50 text-accent-900 dark:divide-accent-100/50  dark:text-white">
            {socialLinks.map((socialLink, index) => (
              <li key={index}>
                <CustomLink
                  href={socialLink.href}
                  openNewTab
                  className="block px-4 text-base/[1.75] transition-transform duration-350 hover:-translate-y-1 hover:text-primary"
                >
                  <span>{socialLink.icon}</span>
                </CustomLink>
              </li>
            ))}
          </ul>
        </nav>
      )}
    </div>
  );
}

function SearchBox() {
  return (
    <div className="space-y-5 rounded-5 bg-accent-100 p-8 dark:bg-accent-700 lg:p-10">
      <h3 className="font-secondary text-md font-bold leading-[1.25] text-accent-900 dark:text-white md:text-lg">
        Searach
      </h3>
      <div className="flex items-center gap-0">
        <TextInput
          placeholder="Your name"
          name="text"
          className="rounded-5 rounded-r-none border-none bg-white dark:bg-accent-900"
        />
        <Button
          type="submit"
          className="!h-[60px] !w-[60px] flex-none rounded-l-none !p-0"
        >
          <span className="relative z-1">
            
          </span>
        </Button>
      </div>
    </div>
  );
}

interface CategoryListProps {
  links: LinkProps[];
}

const categoryListData: CategoryListProps = {
  links: [
    {
      label: 'Genarel consturction',
      href: '',
    },
    {
      label: 'Business Advice',
      href: '',
    },
    {
      label: 'Stock market',
      href: '',
    },
    {
      label: 'Regular start',
      href: '',
    },
    {
      label: 'Regular start',
      href: '',
    },
  ],
};

function CategoryList({ links }: CategoryListProps) {
  return (
    <div className="space-y-5 rounded-5 bg-accent-100 p-8 dark:bg-accent-700 lg:p-10">
      <h3 className="font-secondary text-md font-bold leading-[1.25] text-accent-900 dark:text-white md:text-lg">
        Category
      </h3>
      {links && links.length > 0 && (
        <nav aria-label="footer links navigation">
          <ul className="grid gap-2.5 divide-y divide-accent-700/20 dark:divide-accent-200/20">
            {links.map((link, index) => (
              <li
                key={index}
                className="flex items-center gap-2.5 pt-2.5 first:pt-0"
              >
                <span className="grid h-3 w-3 place-items-center border border-primary">
                  <span className="block h-0.5 w-0.5 bg-primary"></span>
                </span>
                <CustomLink
                  href={link.href}
                  className="transition-colors duration-300 hover:text-primary"
                >
                  {link.label}
                </CustomLink>
              </li>
            ))}
          </ul>
        </nav>
      )}
    </div>
  );
}

interface TagwidgetProps {
  tags: string[];
}

const tagwidgetData: TagwidgetProps = {
  tags: ['All Project', 'Stand', 'Regularly', 'Startup', 'Productsline'],
};

function Tagswidget({ tags }: TagwidgetProps) {
  return (
    <div className="space-y-5 rounded-5 bg-accent-100 p-8 dark:bg-accent-700 lg:p-10">
      <h3 className="font-secondary text-md font-bold leading-[1.25] text-accent-900 dark:text-white md:text-lg">
        Tags
      </h3>
      {tags && tags.length > 0 && (
        <nav aria-label="tags">
          <ul className="flex flex-wrap gap-5">
            {tags.map((tag, index) => (
              <li
                key={index}
                className="inline-flex min-h-[2.5rem] cursor-pointer items-center rounded-5 border border-accent-900/20 px-2.5 py-0.5 text-accent-800 transition-colors duration-300 hover:border-transparent hover:bg-primary hover:text-white dark:border-none dark:bg-accent-900 dark:text-body  dark:hover:bg-primary dark:hover:text-white"
              >
                {tag}
              </li>
            ))}
          </ul>
        </nav>
      )}
    </div>
  );
}

const linkClasses = cn(
  'transition-colors duration-400 hover:text-primary ease-in-out inline'
);

const inputBoxClasses = cn(
  'focus:border-primary dark:focus:border-primary focus:border-opacity-100 dark:focus:border-opacity-100'
);

export function BlogDetilsSection() {
  return (
    <section className="section-padding-primary">
      <Container>
        {/* <div className="grid gap-30px lg:grid-cols-[1fr_410px]"> */}
        <div>
          <div>
            <div className="max-w-[95%] text-justify [&_p+P]:mt-4">
              <Image
                src="/assets/images/blog/blog-details-3.png"
                alt="blog single 3"
                width={850}
                height={538}
                placeholder="blur"
                blurDataURL={blurDataUrl}
                sizes="100vw"
                className="mx-auto max-w-[80%]"
              />

              {/* Meta  */}
              <ul
                aria-label="blog meta list"
                className="mb-4 mt-6 flex flex-wrap items-center gap-x-[1.125rem] gap-y-2 lg:mb-5 lg:mt-30px"
              >
                <li className="flex items-center gap-2.5">
                  <span className="flex-none text-sm text-primary">
                    <FaRegUser />
                  </span>
                  <span>
                    By{' '}
                    <CustomLink href="#" className={linkClasses}>
                      Rubaiyat Razin Raha
                    </CustomLink>
                  </span>
                </li>
                {/* <li className="flex items-center gap-2.5">
                  <span className="flex-none text-sm text-primary">
                    <FaRegFolderOpen />
                  </span>
                  <CustomLink href="#" className={linkClasses}>
                    Category
                  </CustomLink>
                </li>
                <li className="flex items-center gap-2.5">
                  <span className="flex-none text-sm text-primary">
                    <FaRegComments />
                  </span>
                  <span>
                    <CustomLink href="#" className={linkClasses}>
                      Comments (3)
                    </CustomLink>
                  </span>
                </li> */}
              </ul>

              <div className="my-4 h-px bg-body/30 lg:my-5"></div>

              <p>
                ServiceNow provides an automated, integrated platform for
                managing Service Level Agreements (SLAs) across incidents,
                requests, and changes. SLAs define the expected response and
                resolution times for services, helping organizations maintain
                high service standards and meet customer expectations.
                ServiceNow's SLA management ensures that incidents, requests,
                and changes are addressed within predefined timeframes, with
                automatic tracking and escalation. The platform uses SLA
                definitions and rules that are tied to each service request,
                incident, or change record, allowing it to monitor progress and
                trigger necessary actions. This process ensures that service
                teams can prioritize and act efficiently, ultimately improving
                service delivery and customer satisfaction. Below, we will
                discuss in-depth how ServiceNow tracks and manages SLAs for
                different service records—incidents, requests, and changes.
              </p>

              <p>
                <strong>1. Incident SLA Management:</strong>
                <br />
                Incident management in ServiceNow includes tracking SLAs to
                ensure incidents are resolved promptly according to their
                urgency and priority. When an incident is created, an SLA is
                automatically associated with it based on the incident's
                priority, which is determined by factors like business impact
                and urgency. ServiceNow allows IT teams to define SLA policies
                with specific response and resolution time requirements. These
                SLAs are configured at the system level and can vary depending
                on the service level agreement with the customer or business
                unit. As the incident progresses, the SLA clock begins, and the
                system automatically monitors the elapsed time against the
                defined response and resolution goals.
                <br />
                ServiceNow provides visual indicators, such as the SLA widget,
                to show real-time SLA progress, making it easier for IT staff to
                identify at-risk incidents. If the SLA breach is imminent,
                automatic escalations or notifications can be triggered to alert
                the support team. Additionally, the system tracks SLA
                performance over time, generating reports that help managers
                assess team efficiency and compliance with service commitments.
                By managing SLAs effectively, organizations ensure that
                incidents are handled swiftly, reducing downtime and improving
                end-user satisfaction.
              </p>

              <p>
                <strong>2. Request SLA Management:</strong>
                <br />
                ServiceNow also handles SLAs for service requests, which are
                typically less urgent than incidents but still require timely
                resolution. When a service request is logged, the system
                evaluates the request type and assigns an appropriate SLA based
                on predefined criteria, such as the service catalog item
                selected. Request SLAs typically have more flexible timelines
                compared to incident SLAs, as they pertain to tasks like
                provisioning new hardware or granting access to applications.
                <br />
                ServiceNow's SLA management for requests ensures that the teams
                delivering the requested service are held accountable for
                meeting service delivery deadlines. The platform automates SLA
                tracking from the moment a request is initiated, setting
                response and fulfillment time expectations. Additionally, the
                service request management process is closely tied to approval
                workflows and fulfillment tasks, all of which are governed by
                the SLA parameters. In case of delays, notifications can be
                automatically sent to requesters or service owners, prompting
                immediate action to prevent SLA breaches.
              </p>

              <p>
                <strong>3. Change SLA Management:</strong>
                <br />
                For changes, ServiceNow manages SLAs to ensure that
                modifications to the IT environment are carried out within
                acceptable timeframes while minimizing disruption to business
                operations. Change SLAs are typically used to track the progress
                of change requests, from the initial assessment phase through to
                implementation and post-change review. ServiceNow tracks SLAs
                for various stages of the change lifecycle, ensuring that each
                change is approved, tested, and implemented on time.
                <br />
                Change requests in ServiceNow can be configured with specific
                SLA metrics based on the type of change (e.g., standard,
                emergency, or major change). The SLA clock starts once the
                change request is submitted and continues throughout the change
                process. ServiceNow also supports advanced workflows for complex
                change management, allowing SLAs to be monitored at each stage
                of the process, ensuring deadlines are met for assessments,
                implementations, and closures. If any delays or issues occur
                during the change process, the system generates alerts and
                notifications, enabling the service teams to take corrective
                actions before an SLA breach happens.
              </p>

              <p>
                <strong>4. SLA Definitions and Configuration:</strong>
                <br />
                In ServiceNow, SLAs are configured using SLA definitions that
                can be customized based on the organization's needs. SLA
                definitions define the conditions under which SLAs are applied,
                such as the start and stop conditions, the expected time frames,
                and the actions that should be taken in case of SLA breaches.
                ServiceNow offers flexibility to define multiple SLA rules for
                different categories of incidents, requests, and changes,
                allowing tailored service level expectations for each service
                type.
                <br />
                Administrators can define SLAs by creating SLA definitions with
                specific criteria, such as response times, resolution times, and
                custom performance metrics. These definitions can also be set at
                a global level for universal applications, or at a more granular
                level for specific users or service types. ServiceNow also
                provides pre-built SLA definitions that can be quickly
                implemented, ensuring that organizations don’t have to start
                from scratch. These built-in SLA rules ensure that service teams
                can focus on resolving the issues without worrying about
                tracking SLA performance manually.
              </p>

              <p>
                <strong>5. SLA Reporting and Monitoring:</strong>
                <br />
                ServiceNow’s SLA tracking capabilities are not limited to
                setting response and resolution times but also include detailed
                monitoring and reporting. The system provides dashboards,
                reports, and real-time notifications that allow IT teams to keep
                track of all active SLAs. The visual indicators make it easy to
                see which SLAs are nearing breach, ensuring proactive management
                of the service lifecycle. Administrators can generate SLA
                performance reports to analyze trends over time, identify
                recurring issues, and optimize service delivery processes.
                <br />
                These SLA reports are essential for managers to monitor team
                performance, identify bottlenecks in the service delivery
                process, and ensure that SLAs are consistently being met. They
                also play an important role in audits and compliance tracking,
                allowing businesses to demonstrate their commitment to meeting
                service targets. Additionally, ServiceNow offers automated
                notifications that remind teams when SLAs are about to breach,
                which helps in taking corrective action before a breach occurs.
              </p>
              <br />
              <blockquote className="my-30px grid gap-5 rounded-5 bg-accent-100 py-10 text-center dark:bg-accent-700 lg:px-[70px]">
                <span className="mx-auto grid h-[50px] w-[50px] place-items-center rounded-full bg-white text-[1.25rem] text-primary dark:bg-accent-900">
                  <FaQuoteRight />
                </span>
                <p className="font-secondary text-md font-medium italic leading-[1.25] md:text-lg">
                  SLA is not just a metric; it’s a promise. In service delivery,
                  meeting and exceeding SLA expectations isn't just a goal, it's
                  a commitment to continuous improvement and customer
                  satisfaction.
                </p>
                <div className="mt-3 text-accent-700 dark:text-white">
                  <CustomLink href="http://mahmudalam.com/" target="_blank">
                    <h3 className="h3">Rubaiyat Razin Raha</h3>
                  </CustomLink>
                  <p>Author</p>
                </div>
              </blockquote>
              <br />
              <p>
                In summary, ServiceNow provides a robust framework for tracking
                and managing SLAs across incidents, requests, and changes. By
                leveraging automation, customizable rules, and real-time
                monitoring, ServiceNow ensures that service teams can maintain
                timely and efficient service delivery. SLA management in
                ServiceNow not only improves the responsiveness of support teams
                but also helps organizations meet customer expectations and
                regulatory requirements. Through detailed reporting, escalation
                procedures, and proactive notifications, businesses can avoid
                SLA breaches, optimize service performance, and ultimately
                provide superior service experiences to end-users.
              </p>

              <br />
              <br />
              <Image
                src="/assets/images/blog/blog-details-4.png"
                alt="blog single 4"
                width={850}
                height={352}
                placeholder="blur"
                blurDataURL={blurDataUrl}
                sizes="100vw"
                className="mx-auto mb-30px mt-[60px] block max-w-[80%] rounded-5"
              />
              <br />
              <br />

              <p>
                Service Level Agreements (SLAs) are critical components of
                service management in any organization, ensuring that both the
                service provider and the customer have clear expectations of
                service delivery. SLAs outline specific metrics such as response
                time, resolution time, and performance standards, which are
                crucial to maintaining high service quality and customer
                satisfaction. SLAs are categorized into different types based on
                the scope and the parties involved in the agreement. In this
                section, we will explore three key types of SLAs: Customer-Based
                SLA, Service-Based SLA, and Multi-Level SLA. Each of these SLA
                types is tailored to different business needs and service
                delivery structures. Understanding the differences and
                appropriate use cases for these SLA types can greatly enhance
                service management processes, helping organizations align their
                services with customer expectations more effectively.
              </p>

              <p>
                <strong>1. Customer-Based SLA:</strong>
                <br />
                A Customer-Based SLA is an agreement that is tailored
                specifically to a single customer or a customer group, covering
                all the services that the customer receives from the service
                provider. This type of SLA focuses on the overall customer
                relationship and ensures that specific expectations are met
                across all service categories. Customer-Based SLAs are most
                commonly used in businesses with personalized service offerings,
                where different customers may have different needs or
                requirements.
                <br />
                In a Customer-Based SLA, the agreement outlines all aspects of
                the services provided to the customer, including performance
                metrics, response times, resolution times, and more. The SLA is
                customized based on the individual needs and priorities of the
                customer, meaning it can vary significantly from one customer to
                another. For example, a high-priority customer may have stricter
                performance requirements than a standard client. These SLAs
                ensure that each customer receives the appropriate level of
                service, with clearly defined expectations and timelines.
                <br />
                The benefit of a Customer-Based SLA is that it allows service
                providers to address the unique needs of each customer, ensuring
                that the customer’s priorities are met and that there is no
                ambiguity regarding the agreed-upon service levels. By providing
                tailored solutions, businesses can strengthen customer
                relationships and foster long-term partnerships. However, this
                type of SLA can be resource-intensive to manage, as it requires
                custom configurations for each customer.
              </p>

              <p>
                <strong>2. Service-Based SLA:</strong>
                <br />
                A Service-Based SLA, on the other hand, is an agreement that
                applies to a particular service provided by the service provider
                to multiple customers. In this type of SLA, the same set of
                performance metrics and service level targets apply to all
                customers using that specific service. The main focus of a
                Service-Based SLA is to ensure consistent service quality across
                all customers who are using the same service.
                <br />
                For example, if a business offers a cloud storage service, a
                Service-Based SLA would define the service levels (e.g., uptime,
                response times, and resolution times) that apply to all
                customers using the cloud storage service. These metrics are
                standardized, ensuring that all customers have the same
                expectations for service delivery. This type of SLA is often
                used when the service being provided is uniform across different
                customers, such as in standardized IT services like email
                hosting, data backup, or network connectivity.
                <br />
                The advantage of a Service-Based SLA is that it simplifies the
                management process by providing a one-size-fits-all solution for
                services that are consistent in nature. Service-Based SLAs are
                easier to manage and monitor since they do not require
                customization for each customer. Additionally, they help
                maintain consistency in service delivery, ensuring that all
                customers receive the same level of service. However, they may
                not be suitable for businesses that offer highly customized or
                personalized services, as they do not account for unique
                customer needs.
              </p>

              <p>
                <strong>3. Multi-Level SLA:</strong>
                <br />
                A Multi-Level SLA is a more complex form of SLA that combines
                elements of both Customer-Based and Service-Based SLAs. It
                typically consists of multiple layers or levels that address
                different aspects of the service relationship. These layers may
                be based on the service being provided, the customer’s
                requirements, or even the service provider’s internal processes.
                <br />
                <br />A Multi-Level SLA usually includes three levels:
                <ul>
                  <li>
                    <strong>Corporate Level:</strong> This level defines the
                    general terms and conditions for the organization as a
                    whole, including overarching goals and performance
                    standards.
                  </li>
                  <li>
                    <strong>Customer Level:</strong> This level tailors the SLA
                    to specific customer groups, focusing on the needs and
                    expectations of different segments of customers.
                  </li>
                  <li>
                    <strong>Service Level:</strong> This level addresses the
                    specific details of individual services offered to
                    customers, ensuring that each service has a clearly defined
                    set of performance metrics and expectations.
                  </li>
                </ul>
                <br />
                The benefit of a Multi-Level SLA is that it allows service
                providers to maintain a flexible yet structured approach to
                managing service levels. This type of SLA is particularly useful
                in complex organizations that provide a wide range of services
                to different customers. It enables the service provider to
                address both general organizational goals and specific customer
                requirements in a single SLA framework.
                <br />
                Multi-Level SLAs help service teams to maintain consistency
                across all service levels while offering the flexibility to
                cater to varying customer needs. For example, a company may have
                a general corporate-level SLA for all its IT services but can
                then customize the service-level agreements for specific
                customers and services. This allows for a more granular approach
                to service management while ensuring that each level of service
                delivery is aligned with customer expectations.
              </p>

              <p>
                <br />
                <br />
                The three key types of SLAs—Customer-Based SLA, Service-Based
                SLA, and Multi-Level SLA—serve different purposes and are
                suitable for various organizational needs. Customer-Based SLAs
                provide a personalized approach to service delivery, allowing
                service providers to meet the unique needs of individual
                customers. Service-Based SLAs offer a standardized approach,
                ensuring consistency across multiple customers using the same
                service. Multi-Level SLAs combine elements of both approaches,
                providing flexibility and structure for organizations with
                complex service offerings. Understanding the differences between
                these types of SLAs helps organizations select the most
                appropriate SLA model for their business, ensuring that they can
                meet customer expectations, improve service quality, and drive
                customer satisfaction. By effectively managing SLAs, businesses
                can streamline their service delivery processes and enhance
                their reputation as reliable service providers.
              </p>

              <br />
              <div className="my-10 flex flex-wrap items-center justify-between gap-x-5 gap-y-2.5 rounded-5 bg-accent-100 px-30px py-6 dark:bg-accent-700">
                <div className="flex items-center gap-2.5">
                  <span className="text-primary">
                    <FaTags />
                  </span>
                  <div className="inline-flex flex-wrap gap-1">
                    <span>
                      <CustomLink href="#" className={linkClasses}>
                        Marketing
                      </CustomLink>
                      ,
                    </span>
                    <span>
                      <CustomLink href="#" className={linkClasses}>
                        branding
                      </CustomLink>
                      ,
                    </span>
                    <span>
                      <CustomLink href="#" className={linkClasses}>
                        corporate
                      </CustomLink>
                      ,
                    </span>
                    <span>
                      <CustomLink href="#" className={linkClasses}>
                        business
                      </CustomLink>
                    </span>
                  </div>
                </div>
                {socialLinks && socialLinks.length > 0 && (
                  <nav aria-label="social links">
                    <ul className="inline-flex items-center gap-4  text-primary">
                      {socialLinks.map((socialLink, index) => (
                        <li key={index}>
                          <CustomLink
                            className="block text-base/[1.75] transition-transform duration-350 hover:-translate-y-1"
                            href={socialLink.href}
                            openNewTab
                          >
                            <span>{socialLink.icon}</span>
                          </CustomLink>
                        </li>
                      ))}
                    </ul>
                  </nav>
                )}
              </div>

              <div className="flex flex-col items-start gap-x-6 gap-y-5 md:flex-row">
                <Image
                  src="/assets/images/blog/author-3.png"
                  alt="Stanio lainto"
                  width={85}
                  height={87}
                  placeholder="blur"
                  blurDataURL={blurDataUrl}
                  sizes="100vw"
                  className="flex-none rounded-10"
                />

                <div className="text-accent-700 dark:text-white">
                  <h4 className="font-secondary text-md font-bold leading-[1.5]">
                    Rubaiyat Razin Raha
                  </h4>

                  <p className="text-sm leading-[1.6]">3 days ago</p>
                  <p className="!mt-1.5 text-body">
                    I am a{' '}
                    <strong>Certified ServiceNow System Administrator</strong>{' '}
                    and Application Developer. I have a strong background in
                    managing and improving the ServiceNow platform.
                  </p>
                </div>
              </div>

              {/* <div className="mt-12">
                <h3 className="h2 text-accent-700 dark:text-white">
                  Leave a comment
                </h3>
                <p className="mt-2">You must have to log in for comment</p>
                <form className="mt-30px grid grid-cols-1 gap-x-30px gap-y-5 lg:grid-cols-2">
                  <div>
                    <TextInput
                      placeholder="Your Email"
                      name="email"
                      className={inputBoxClasses}
                      autoComplete="off"
                    />
                  </div>
                  <div>
                    <TextInput
                      placeholder="Your Phone"
                      name="phone"
                      className={inputBoxClasses}
                      autoComplete="off"
                    />
                  </div>
                  <div className="lg:col-span-2">
                    <TextInput
                      placeholder="Your Address"
                      name="address"
                      className={inputBoxClasses}
                      autoComplete="off"
                    />
                  </div>
                  <div className="lg:col-span-2">
                    <TextAreaInput
                      placeholder="Write Message..."
                      name="message"
                      autoComplete="off"
                      className={inputBoxClasses}
                    />
                  </div>
                  <div className="lg:col-span-2">
                    <Button type="submit" className="w-full">
                      <span className="relative z-1">SEND NOW</span>
                    </Button>
                  </div>
                </form>
              </div> */}
            </div>
          </div>
          {/* <div className="grid gap-30px self-baseline max-md:mx-auto max-md:max-w-[410px] lg:gap-10">
            <Author {...authorData} />
            {/* <SearchBox />
            <CategoryList {...categoryListData} />
            <Tagswidget {...tagwidgetData} />
          </div> */}
        </div>
      </Container>
    </section>
  );
}