Hero 6

"use client"

import { useEffect, useState } from "react"

// shadcn
import { Button } from "@/components/ui/button"

// third-party
import { AnimatePresence, motion } from "framer-motion"

const navLinks = [
  { name: "Home", href: "#" },
  { name: "Feature", href: "#" },
  { name: "Pricing", href: "#" },
  { name: "About", href: "#" },
  { name: "Contact", href: "#" },
]

//  ------------------------------ | HERO 6 | ------------------------------  //

export default function Hero6() {
  const [isOpen, setIsOpen] = useState(false)

  useEffect(() => {
    const handleResize = () => {
      setIsOpen(false)
    }
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])
  return (
    <div className="relative min-h-screen overflow-hidden bg-slate-900 pt-6 sm:pt-12">
      <div className="absolute inset-0 z-10 bg-linear-to-t from-slate-900/50 to-sky-500 opacity-60"></div>
      <div
        aria-hidden="true"
        className="absolute inset-x-0 -top-40 z-10 transform-gpu overflow-hidden blur-3xl sm:-top-50"
      >
        <div
          style={{
            clipPath:
              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
          }}
          className="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-indigo-500 from-10% via-sky-500 via-30% to-purple-500 to-90% opacity-30 sm:left-[calc(50%-30rem)] sm:w-288.75"
        />
      </div>
      <div
        aria-hidden="true"
        className="absolute inset-x-0 top-[calc(100%-13rem)] z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-40rem)]"
      >
        <div
          style={{
            clipPath:
              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
          }}
          className="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-indigo-500 from-10% via-blue-500 via-30% to-emerald-500 to-90% opacity-30 sm:left-[calc(50%+36rem)] sm:w-288.75"
        />
      </div>
      <div className="relative z-30 container mx-auto px-6 lg:px-8">
        <div className="flex flex-col items-center gap-10">
          <div className="relative rounded-full bg-slate-900/50 p-3 pl-6 shadow-[0_0_40px_-8px_#4680ff38] backdrop-blur-md max-md:w-full">
            <div className="flex flex-row items-center justify-between gap-10">
              <div className="flex flex-row items-center gap-3">
                <svg
                  className="size-8 text-lime-500"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                >
                  <path
                    d="M16 16.752c-.29 0-.56-.17-.69-.45L12 8.852l-3.31 7.46a.75.75 0 0 1-.99.38c-.38-.17-.55-.61-.38-.99l4-9c.24-.54 1.13-.54 1.37 0l4 9c.17.38 0 .82-.38.99-.1.04-.21.06-.31.06Z"
                    fill="currentColor"
                  ></path>
                  <path
                    d="M12 12.75H8c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h4c.41 0 .75.34.75.75s-.34.75-.75.75Z"
                    fill="currentColor"
                  ></path>
                  <path
                    d="M15 22.75H9c-5.43 0-7.75-2.32-7.75-7.75V9c0-5.43 2.32-7.75 7.75-7.75h6c5.43 0 7.75 2.32 7.75 7.75v6c0 5.43-2.32 7.75-7.75 7.75Zm-6-20C4.39 2.75 2.75 4.39 2.75 9v6c0 4.61 1.64 6.25 6.25 6.25h6c4.61 0 6.25-1.64 6.25-6.25V9c0-4.61-1.64-6.25-6.25-6.25H9Z"
                    fill="currentColor"
                  ></path>
                </svg>
                <span className="text-lg font-medium sm:text-xl">
                  <span className="text-lime-500">Zoro</span>
                  <span className="text-slate-100">App</span>
                </span>
              </div>
              <AnimatePresence>
                {isOpen && (
                  <motion.div
                    initial={{ opacity: 0, y: -20 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -20 }}
                    transition={{ duration: 0.2, ease: "easeOut" }}
                    className="absolute top-full left-0 z-40 w-full"
                  >
                    <div className="mt-2 flex flex-col gap-2 rounded-2xl bg-card p-4 shadow-[0_0_40px_-8px_#4680ff38] backdrop-blur-md">
                      {navLinks.map((item) => (
                        <a
                          key={item.name}
                          className="rounded-lg px-3 py-1.5 text-slate-600 hover:bg-lime-500/10 hover:text-lime-500 dark:text-slate-300"
                          href={item.href}
                        >
                          {item.name}
                        </a>
                      ))}
                      <Button className="rounded-full border-0 border-b-2 border-b-slate-900 bg-slate-800 lg:flex">
                        Buy Now
                      </Button>
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
              <div className="hidden flex-row gap-2 text-slate-100 md:flex">
                {navLinks.map((item) => (
                  <a
                    key={item.name}
                    className="hover:bg-text-500/10 rounded-full px-3 py-1.5 hover:text-lime-500"
                    href={item.href}
                  >
                    {item.name}
                  </a>
                ))}
              </div>
              <Button className="hidden rounded-full border-0 border-b-2 border-b-slate-900 bg-slate-800 hover:translate-y-1 hover:opacity-90 md:flex">
                Buy Now
              </Button>
              <div className="flex md:hidden">
                <Button
                  size="icon-lg"
                  className="bg-limw-500 rounded-full shadow-[0_8px_10px_-2px_#8f8f8f6b]"
                  onClick={() => setIsOpen(!isOpen)}
                >
                  {isOpen ? (
                    <svg
                      className="size-5"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10ZM9.17 14.83l5.66-5.66M14.83 14.83 9.17 9.17"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      ></path>
                    </svg>
                  ) : (
                    <svg
                      className="size-5"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="none"
                    >
                      <path
                        d="M3 7h18M3 12h18M3 17h18"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                      ></path>
                    </svg>
                  )}
                </Button>
              </div>
            </div>
          </div>
          <div className="grid w-full grid-cols-12 gap-8">
            <div className="col-span-12 flex flex-col items-center text-center md:col-span-8 md:col-start-3">
              <div className="flex flex-col items-center gap-2 text-center sm:gap-5">
                <div className="flex items-center gap-4">
                  <div className="h-0.5 w-20 rounded-full bg-linear-to-r from-transparent to-lime-500 sm:w-25"></div>
                  <span className="text-md font-semibold text-lime-500 sm:text-lg">
                    Download Our App
                  </span>
                  <div className="h-0.5 w-20 rounded-full bg-linear-to-r from-lime-500 to-transparent sm:w-25"></div>
                </div>
                <div className="flex flex-col items-center gap-1 sm:gap-2">
                  <h1 className="text-lg font-medium text-slate-100 sm:text-4xl">
                    Download Our App Today Free
                  </h1>
                  <h2 className="text-lg font-medium text-slate-100 sm:text-4xl">
                    iPhone <span>&amp;</span> Android
                  </h2>
                </div>

                <p className="max-w-100 text-slate-300">
                  Download the app for a faster, smoother experience and enjoy
                  exclusive features anytime, anywhere.
                </p>
              </div>
              <div className="mt-5 mb-8 flex flex-wrap justify-start gap-4">
                <a
                  href="#"
                  className="hover:shadow-2xl"
                  aria-label="Download on the App Store"
                >
                  <div className="flex w-42 items-center justify-center gap-1.5 rounded-lg border border-white/50 bg-slate-950 px-4 py-2 text-white">
                    <div className="-ml-2 shrink-0">
                      <svg
                        className="size-8"
                        fill="#fff"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path d="M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.09997 22C7.78997 22.05 6.79997 20.68 5.95997 19.47C4.24997 17 2.93997 12.45 4.69997 9.39C5.56997 7.87 7.12997 6.91 8.81997 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z" />
                      </svg>
                    </div>
                    <div className="grow">
                      <div className="flex flex-col items-start gap-0.5">
                        <span className="text-xs">Download on the</span>
                        <span className="text-md">App Store</span>
                      </div>
                    </div>
                  </div>
                </a>
                <a
                  href="#"
                  className="hover:shadow-2xl"
                  aria-label="Get it on Google Play"
                >
                  <div className="flex w-42 items-center justify-center gap-1.5 rounded-lg border border-white/50 bg-slate-950 px-4 py-2 text-white">
                    <div className="-ml-2 shrink-0">
                      <svg
                        className="size-8"
                        viewBox="0 0 32 32"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <mask
                          id="mask0_87_8320"
                          style={{ maskType: "alpha" }}
                          maskUnits="userSpaceOnUse"
                          x="7"
                          y="3"
                          width="24"
                          height="26"
                        >
                          <path
                            d="M30.0484 14.4004C31.3172 15.0986 31.3172 16.9014 30.0484 17.5996L9.75627 28.7659C8.52052 29.4459 7 28.5634 7 27.1663L7 4.83374C7 3.43657 8.52052 2.55415 9.75627 3.23415L30.0484 14.4004Z"
                            fill="#C4C4C4"
                          />
                        </mask>
                        <g mask="url(#mask0_87_8320)">
                          <path
                            d="M7.63473 28.5466L20.2923 15.8179L7.84319 3.29883C7.34653 3.61721 7 4.1669 7 4.8339V27.1664C7 27.7355 7.25223 28.2191 7.63473 28.5466Z"
                            fill="url(#paint0_linear_87_8320)"
                          />
                          <path
                            d="M30.048 14.4003C31.3169 15.0985 31.3169 16.9012 30.048 17.5994L24.9287 20.4165L20.292 15.8175L24.6923 11.4531L30.048 14.4003Z"
                            fill="url(#paint1_linear_87_8320)"
                          />
                          <path
                            d="M24.9292 20.4168L20.2924 15.8179L7.63477 28.5466C8.19139 29.0232 9.02389 29.1691 9.75635 28.766L24.9292 20.4168Z"
                            fill="url(#paint2_linear_87_8320)"
                          />
                          <path
                            d="M7.84277 3.29865L20.2919 15.8177L24.6922 11.4533L9.75583 3.23415C9.11003 2.87878 8.38646 2.95013 7.84277 3.29865Z"
                            fill="url(#paint3_linear_87_8320)"
                          />
                        </g>
                        <defs>
                          <linearGradient
                            id="paint0_linear_87_8320"
                            x1="15.6769"
                            y1="10.874"
                            x2="7.07106"
                            y2="19.5506"
                            gradientUnits="userSpaceOnUse"
                          >
                            <stop stopColor="#00C3FF" />
                            <stop offset="1" stopColor="#1BE2FA" />
                          </linearGradient>
                          <linearGradient
                            id="paint1_linear_87_8320"
                            x1="20.292"
                            y1="15.8176"
                            x2="31.7381"
                            y2="15.8176"
                            gradientUnits="userSpaceOnUse"
                          >
                            <stop stopColor="#FFCE00" />
                            <stop offset="1" stopColor="#FFEA00" />
                          </linearGradient>
                          <linearGradient
                            id="paint2_linear_87_8320"
                            x1="7.36932"
                            y1="30.1004"
                            x2="22.595"
                            y2="17.8937"
                            gradientUnits="userSpaceOnUse"
                          >
                            <stop stopColor="#DE2453" />
                            <stop offset="1" stopColor="#FE3944" />
                          </linearGradient>
                          <linearGradient
                            id="paint3_linear_87_8320"
                            x1="8.10725"
                            y1="1.90137"
                            x2="22.5971"
                            y2="13.7365"
                            gradientUnits="userSpaceOnUse"
                          >
                            <stop stopColor="#11D574" />
                            <stop offset="1" stopColor="#01F176" />
                          </linearGradient>
                        </defs>
                      </svg>
                    </div>
                    <div className="grow">
                      <div className="flex flex-col items-start gap-0.5">
                        <span className="text-xs uppercase">Get it on</span>
                        <span className="text-md">Google Play</span>
                      </div>
                    </div>
                  </div>
                </a>
              </div>
            </div>
            <div className="relative col-span-12 flex items-center justify-center">
              <div className="absolute inset-x-0 px-6 text-center lg:px-8">
                <span className="mask-t-from-5% mask-t-to-95% mask-exclude mask-match text-[18cqw] leading-none font-medium text-white">
                  ZoroApp
                </span>
              </div>
              <div className="relative mx-auto w-160 max-w-full">
                <img
                  src="https://cdn.uiable.com/block/img-cta-app.png"
                  alt="App Interface Preview"
                  className="h-auto w-full object-contain drop-shadow-2xl"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}