export function CreativeWithCtaButtons() {
  return (
    <section className="pt-16 pb-7">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-12 border-b-2 border-gray-200 pb-14 lg:grid-cols-2">
          <div className="mx-auto flex w-full flex-col gap-8 lg:max-w-full xl:gap-14">
            <div className="flex flex-col gap-8">
              <h2 className="font-manrope text-4xl leading-snug font-bold text-gray-900 max-[470px]:text-center">
                Begin Your Project <br />
                Journey!
              </h2>
              <p className="text-base font-normal text-gray-500 max-[470px]:text-center">
                Take the First Step Towards Success!
              </p>
              <div className="flex items-center gap-5 max-[470px]:justify-center">
                <a
                  href="javascript:;"
                  className="rounded p-2 text-black transition-all duration-500 focus-within:bg-yellow-800 focus-within:text-white focus-within:outline-0 hover:bg-yellow-800 hover:text-white"
                >
                  {/* SVG removed */}
                </a>
                <a
                  href="javascript:;"
                  className="flex h-10 w-10 items-center justify-center rounded p-2 text-black transition-all duration-500 focus-within:bg-yellow-800 focus-within:text-white focus-within:outline-0 hover:bg-yellow-800 hover:text-white"
                >
                  {/* SVG removed */}
                </a>
                <a
                  href="javascript:;"
                  className="rounded p-2 text-black transition-all duration-500 focus-within:bg-yellow-800 focus-within:text-white focus-within:outline-0 hover:bg-yellow-800 hover:text-white"
                >
                  {/* SVG removed */}
                </a>
                <a
                  href="javascript:;"
                  className="group rounded p-2 text-black transition-all duration-500 focus-within:bg-yellow-800 focus-within:text-white focus-within:outline-0 hover:bg-yellow-800 hover:text-white"
                >
                  {/* SVG removed */}
                </a>
              </div>
            </div>
            <div className="flex flex-col gap-3 min-[470px]:flex-row min-[470px]:items-center">
              <button className="flex items-center gap-2 rounded-full bg-yellow-800 py-3 pr-5 pl-7 text-base font-semibold text-white shadow-sm shadow-transparent transition-all duration-500 hover:bg-yellow-900 hover:shadow-yellow-300 max-[470px]:justify-center">
                Start Project
                {/* SVG removed */}
              </button>
              <button className="flex items-center gap-2 rounded-full border-2 border-yellow-800 bg-white py-2.5 pr-5 pl-7 text-base font-semibold text-yellow-800 shadow-sm shadow-transparent transition-all duration-500 hover:bg-yellow-800 hover:text-white hover:shadow-yellow-300 max-[470px]:justify-center">
                Contact Us
                {/* SVG removed */}
              </button>
            </div>
          </div>
          <div className="mx-auto flex w-full flex-col justify-between gap-6 min-[470px]:flex-row sm:gap-20 md:gap-10 lg:max-w-full xl:gap-24">
            <div>
              <h6 className="mb-7 text-lg font-medium text-gray-900 max-[470px]:text-center">
                Pagedone
              </h6>
              <ul className="flex flex-col gap-6 max-[470px]:items-center max-[470px]:justify-center">
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-600 transition-all duration-300 focus-within:text-yellow-800 focus-within:outline-0 hover:text-yellow-800 max-lg:text-center"
                  >
                    Home
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-600 transition-all duration-300 focus-within:text-yellow-800 focus-within:outline-0 hover:text-yellow-800 max-lg:text-center"
                  >
                    About
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-600 transition-all duration-300 focus-within:text-yellow-800 focus-within:outline-0 hover:text-yellow-800 max-lg:text-center"
                  >
                    Pricing
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-600 transition-all duration-300 focus-within:text-yellow-800 focus-within:outline-0 hover:text-yellow-800 max-lg:text-center"
                  >
                    Pro Version
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h6 className="mb-7 text-lg font-medium text-gray-900 max-[470px]:text-center">
                Products
              </h6>
              <ul className="flex flex-col gap-6 max-[470px]:items-center max-[470px]:justify-center">
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-600 transition-all duration-300 focus-within:text-yellow-800 focus-within:outline-0 hover:text-yellow-800 max-lg:text-center"
                  >
                    Figma UI System
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-600 transition-all duration-300 focus-within:text-yellow-800 focus-within:outline-0 hover:text-yellow-800 max-lg:text-center"
                  >
                    Icons Assets
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-600 transition-all duration-300 focus-within:text-yellow-800 focus-within:outline-0 hover:text-yellow-800 max-lg:text-center"
                  >
                    Responsive Blocks
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-600 transition-all duration-300 focus-within:text-yellow-800 focus-within:outline-0 hover:text-yellow-800 max-lg:text-center"
                  >
                    Components Library
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h6 className="mb-7 text-lg font-medium text-gray-900 max-[470px]:text-center">
                Resources
              </h6>
              <ul className="flex flex-col gap-6 max-[470px]:items-center max-[470px]:justify-center">
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-600 transition-all duration-300 focus-within:text-yellow-800 focus-within:outline-0 hover:text-yellow-800 max-lg:text-center"
                  >
                    FAQs
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-600 transition-all duration-300 focus-within:text-yellow-800 focus-within:outline-0 hover:text-yellow-800 max-lg:text-center"
                  >
                    Quick Start
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-600 transition-all duration-300 focus-within:text-yellow-800 focus-within:outline-0 hover:text-yellow-800 max-lg:text-center"
                  >
                    Documentation
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-600 transition-all duration-300 focus-within:text-yellow-800 focus-within:outline-0 hover:text-yellow-800 max-lg:text-center"
                  >
                    User Guide
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div className="flex flex-col-reverse items-center justify-between gap-5 pt-7 first-letter:items-center sm:flex-row">
          <p className="text-sm font-normal text-gray-500">
            ©<a href="https://pagedone.io/">pagedone</a>2023, All rights
            reserved.
          </p>
          <ul className="flex items-center gap-9">
            <li>
              <a
                href="javascript:;"
                className="text-sm font-normal text-gray-500 transition-all duration-300 focus-within:text-yellow-800 focus-within:outline-0 hover:text-yellow-800"
              >
                Terms
              </a>
            </li>
            <li>
              <a
                href="javascript:;"
                className="text-sm font-normal text-gray-500 transition-all duration-300 focus-within:text-yellow-800 focus-within:outline-0 hover:text-yellow-800"
              >
                Privacy
              </a>
            </li>
            <li>
              <a
                href="javascript:;"
                className="text-sm font-normal text-gray-500 transition-all duration-300 focus-within:text-yellow-800 focus-within:outline-0 hover:text-yellow-800"
              >
                Cookies
              </a>
            </li>
          </ul>
        </div>
      </div>
    </section>
  )
}