import { cn } from "@/lib/classes";
import Link from "next/link";

export function RuinedHero() {
  return (
    <>
      <div className="absolute top-0 inset-x-0 z-100">
        <div className="max-w-xl w-full mx-auto pt-4 px-5">
          <Navbar />
        </div>
      </div>
      <div
        className={cn(
          "min-h-dvh relative bg-white w-full",
          "dark:bg-[#0a0a0a] flex flex-col items-center justify-center"
        )}
      >
        {/* Grid Background Pattern with Radial Mask */}
        <div
          className="absolute inset-0 opacity-40 [--s:60px] [--n:2] [--t:2px] [--g:10px] [--c:#ebebeb_25%,#0000_0] dark:[--c:#1e1e1e_25%,#0000_0] z-0"
          style={{
            background: `conic-gradient(at var(--g) var(--t),var(--c))
     calc((var(--s)/var(--n) - var(--g) + var(--t))/2) 0/
     calc(var(--s)/var(--n)) var(--s),
    conic-gradient(from 180deg at var(--t) var(--g),var(--c))
     0 calc((var(--s)/var(--n) - var(--g) + var(--t))/2)/
     var(--s) calc(var(--s)/var(--n))`,
            mask: "radial-gradient(circle at center, black 0%, black 20%, transparent 50%)",
            WebkitMask:
              "radial-gradient(circle at center, black 0%, black 20%, transparent 50%)",
          }}
        />

        <div className="max-w-4xl w-full flex flex-col items-center justify-center pt-24 md:pt-28 pb-24 md:pb-32 relative z-2 flex-1">
          <div className="w-fit border border-[#e7e7e7] dark:border-[#1b1b1b] bg-gradient-to-b from-[#f0f0f0] to-[#e2e2e2] dark:from-[#0e0e0e] dark:to-[#1c1c1c] p-2 px-5 rounded-full flex items-center gap-3 shadow-[0px_0px_10px_0px_rgba(0,0,0,0.1)] dark:shadow-[0px_0px_10px_0px_rgba(255,255,255,0.1)]">
            <div className="size-2.5 rounded-full bg-black dark:bg-white"></div>
            <p className="text-sm font-medium">
              <span className="text-black/90 dark:text-white/90">
                Available for New Projects
              </span>
            </p>
          </div>

          <div className="mt-6 flex flex-col gap-2 items-center w-full">
            <h1 className="max-w-[24ch] uppercase text-2xl md:text-3xl lg:text-5xl font-semibold text-center">
              FOR STARTUPS THAT PLAY TO WIN, NOT TO FIT IN
            </h1>

            <p className="text-center text-[#838383] max-w-[30ch] text-base md:text-lg">
              Startups deserve better than average
            </p>

            <div className="flex items-center gap-4 mt-4">
              <button className="inline-flex w-fit relative items-center justify-center whitespace-nowrap shrink-0 cursor-pointer bg-[#1a1b1e] text-white shadow-[inset_0px_1px_1px_0px_#565857,inset_0px_-0.5px_1px_0px_#0b0b0d] outline-[0.5px] outline-[#2d2d2d] h-9 px-5 py-2 rounded-lg text-sm font-medium">
                View work
              </button>
              <button className="inline-flex w-fit relative items-center justify-center whitespace-nowrap shrink-0 cursor-pointer bg-transparent text-black dark:text-white h-9 px-5 py-2 rounded-lg text-sm font-medium border-[2px] border-black dark:border-white">
                Book a call
              </button>
            </div>
          </div>
          <StepsProgress />
        </div>
        <div className="mt-auto flex mb-8 z-2 relative">
          <div className="flex flex-col items-center gap-2 shrink-0 border-r border-[#e6e6e6] dark:border-[#222222] px-4">
            <h3 className="text-2xl md:text-5xl font-semibold bg-gradient-to-b from-[#252525] to-[#727272] dark:from-white dark:to-white/60 text-transparent bg-clip-text">
              20 +
            </h3>
            <p className="text-[9px] sm:text-sm md:text-[15px]">
              Completed Projects
            </p>
          </div>
          <div className="flex flex-col items-center gap-2 shrink-0 border-r border-[#e6e6e6] dark:border-[#222222] px-4">
            <h3 className="text-2xl md:text-5xl font-semibold bg-gradient-to-b from-[#252525] to-[#727272] dark:from-white dark:to-white/60 text-transparent bg-clip-text">
              $50K +
            </h3>
            <p className="text-[9px] sm:text-sm md:text-[15px]">
              Generated for our clients
            </p>
          </div>
          <div className="flex flex-col items-center gap-2 shrink-0 px-4">
            <h3 className="text-2xl md:text-5xl font-semibold bg-gradient-to-b from-[#252525] to-[#727272] dark:from-white dark:to-white/60 text-transparent bg-clip-text">
              10M +
            </h3>
            <p className="text-[9px] sm:text-sm md:text-[15px]">User clicks</p>
          </div>
        </div>
      </div>
    </>
  );
}

const navLinks = [
  {
    label: "Achievements",
    href: "#",
  },
  {
    label: "Our Work",
    href: "#",
  },
  {
    label: "FAQ",
    href: "#",
  },
  {
    label: "Pricing",
    href: "#",
  },
  {
    label: "Contact",
    href: "#",
  },
];

function Navbar() {
  return (
    <nav
      className={cn(
        "relative w-full overflow-hidden border p-2.5 px-7 rounded-[14px] before:absolute before:inset-0 before:z-0 after:absolute after:inset-0 after:z-1 after:opacity-[0.01*60] shadow-xl",
        // light mode
        "border-[#d9d9d9] bg-[#fdfdfd]",
        // for dark mode
        "dark:border-[#252525] dark:before:[background:linear-gradient(180deg,#111111,#0a0a0a)] dark:after:filter-[url(#noise)] dark:after:[mix-blend-mode:soft-light] dark:bg-[#0a0a0a]"
      )}
    >
      <svg width="0" height="0" aria-hidden="true">
        <filter
          id="noise"
          x="0"
          y="0"
          width="1"
          height="1"
          colorInterpolationFilters="sRGB"
        >
          <feTurbulence
            type="fractalNoise"
            baseFrequency=".713"
            numOctaves="4"
          ></feTurbulence>
          <feColorMatrix type="saturate" values="0"></feColorMatrix>
        </filter>
      </svg>

      <div className="flex items-center justify-between gap-2 relative z-2">
        <Logo />
        <ul className="flex items-center gap-2 justify-between flex-1 ml-5 max-lg:hidden">
          {navLinks.map((link) => (
            <li key={link.label}>
              <Link
                href={link.href}
                className="text-sm font-medium text-black/90 hover:text-black dark:text-white/90 dark:hover:text-white [transition:color_0.15s_ease-out]"
              >
                {link.label}
              </Link>
            </li>
          ))}
        </ul>

        <button className="min-lg:hidden flex flex-col gap-1 justify-between items-center cursor-pointer">
          <span className="h-[2px] w-5 rounded-full bg-black/90 dark:bg-white/90" />
          <span className="h-[2px] w-5 rounded-full bg-black/90 dark:bg-white/90 translate-x-[4px]" />
          <span className="h-[2px] w-5 rounded-full bg-black/90 dark:bg-white/90" />
        </button>
      </div>
    </nav>
  );
}

function Logo() {
  return (
    <svg
      id="logo-36"
      viewBox="0 0 40 40"
      xmlns="http://www.w3.org/2000/svg"
      className="size-6 fill-black dark:fill-white"
    >
      <path d="M18.9523 11.0726C18.5586 7.69873 18.1429 4.13644 18.1429 0H21.8571C21.8571 4.08998 21.4434 7.64774 21.0502 11.0254C20.7299 13.778 20.4235 16.411 20.3666 19.115C22.2316 17.1697 23.863 15.107 25.572 12.9463C27.6791 10.2823 29.9043 7.46945 32.829 4.54464L35.4554 7.17104C32.5633 10.0631 29.7547 12.2861 27.0884 14.3966L27.0859 14.3985C24.9141 16.1178 22.8365 17.7624 20.885 19.6334C23.579 19.5765 26.1911 19.2717 28.9272 18.9524C32.3011 18.5586 35.8636 18.1429 40 18.1429V21.8571C35.9102 21.8571 32.3524 21.4432 28.9749 21.0502L28.9724 21.05C26.2204 20.7298 23.5882 20.4236 20.885 20.3666C22.829 22.2302 24.8906 23.8609 27.0499 25.5687L27.0533 25.5716C29.7174 27.6789 32.5304 29.9039 35.4554 32.829L32.829 35.4554C29.9369 32.5634 27.714 29.755 25.6038 27.0889L25.5988 27.082L25.5946 27.0765C23.8775 24.9081 22.2349 22.8338 20.3666 20.885C20.4235 23.589 20.7299 26.222 21.0502 28.9746C21.4434 32.3523 21.8571 35.91 21.8571 40H18.1429C18.1429 35.8636 18.5586 32.3013 18.9523 28.9274L18.9531 28.9219C19.272 26.1877 19.5765 23.5772 19.6334 20.885C17.7651 22.8338 16.1225 24.9081 14.4054 27.0765L14.4012 27.082L14.3962 27.0889C12.286 29.755 10.0631 32.5634 7.17104 35.4554L4.54464 32.829C7.46959 29.9039 10.2826 27.6789 12.9467 25.5716L12.9501 25.5687C15.1094 23.8609 17.171 22.2302 19.115 20.3666C16.411 20.4237 13.7779 20.73 11.0251 21.0502C7.6476 21.4432 4.08984 21.8571 0 21.8571V18.1429C4.13644 18.1429 7.69894 18.5586 11.0728 18.9524C13.8089 19.2717 16.421 19.5765 19.115 19.6334C17.1627 17.7617 15.0843 16.1166 12.9116 14.3966C10.2453 12.2861 7.43666 10.0631 4.54464 7.17104L7.17104 4.54464C10.0957 7.46945 12.3209 10.2823 14.428 12.9463C16.137 15.1069 17.7684 17.1696 19.6334 19.1148C19.5765 16.4227 19.272 13.8123 18.9531 11.0781L18.9523 11.0726Z" />
    </svg>
  );
}

function StepsProgress() {
  const steps = [
    "Discovery",
    "Strategy & Concept",
    "Design & Build",
    "Launch & Delivery",
  ];
  const currentIndex = 0;

  return (
    <div className="mt-16 flex flex-col items-center gap-4 max-w-xs md:max-w-3xl w-full">
      <div className="flex flex-col md:flex-row [--steps-gap:80px] md:[--steps-gap:150px] gap-(--steps-gap)">
        {steps.map((step, index) => (
          <div
            key={step}
            className={cn(
              "group relative flex gap-4 after:absolute after:rounded-full",
              // for small devices,
              "max-md:after:h-[calc(var(--steps-gap)-7px)] max-md:after:w-[2px] max-md:last:after:h-0 max-md:after:top-full max-md:after:left-1/2 max-md:after:-translate-x-1/2 max-md:after:translate-y-[2px]",
              index === currentIndex
                ? "max-md:after:bg-gradient-to-b max-md:after:from-[#d4d4d4] max-md:after:to-[#2a2a2a] "
                : "max-md:after:bg-[#272729]",
              // for large devices
              "after:w-[calc(var(--steps-gap)-6px)] after:h-[2px] last:after:w-0 after:left-[calc(100%+3px)] after:top-1/2 after:-translate-y-1/2",
              index === currentIndex
                ? "after:bg-gradient-to-r after:from-[#2b2b2d] after:to-[#d8d8d8] dark:after:from-[#d4d4d4] dark:after:to-[#2a2a2a] "
                : "after:bg-[#dadada] dark:after:bg-[#272729]"
            )}
          >
            <div
              className={cn(
                "relative z-1 size-4 rounded-full shrink-0 flex items-center justify-center",
                currentIndex === index && "bg-[#28282a] dark:bg-white"
              )}
            >
              <span
                className={cn(
                  "inline-block size-2 rounded-full",
                  currentIndex === index
                    ? "bg-white dark:bg-black"
                    : "bg-[#d8d9d4] dark:bg-[#272729]"
                )}
              />
            </div>

            <div
              className={cn(
                "absolute w-fit whitespace-nowrap flex items-center justify-center shrink-0 bg-[#1a1b1e] text-white/90 shadow-[inset_0px_1px_1px_0px_#565857,inset_0px_-0.5px_1px_0px_#0b0b0d] outline-[0.5px] outline-[#2d2d2d] px-5 py-1.5 rounded-lg text-xs font-medium",
                // for small devices
                "max-md:group-odd:-translate-x-[125%] max-md:-top-2/3 max-md:group-even:translate-x-1/4",
                // for large devices
                "top-[40px] -translate-x-1/2 left-1/2"
              )}
            >
              {step}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
Ruined Hero

Installation

Installation

FOR STARTUPS THAT PLAY TO WIN, NOT TO FIT IN

20 +

$50K +

10M +
