"use client";

import { useRef, useState } from "react";
import { motion, useScroll, useTransform } from "framer-motion";

function Logo() {
  return (
    <div className="flex items-center gap-2">
      <span className="grid h-6 w-6 place-items-center rounded-md bg-gradient-to-br from-violet-400 to-indigo-500 text-[13px] font-bold text-black">
        V
      </span>
      <span className="text-[15px] font-semibold tracking-tight text-white">Velynkit</span>
    </div>
  );
}

function Nav() {
  const [open, setOpen] = useState(false);
  const links = ["Components", "Templates", "Docs"];
  return (
    <header className="absolute inset-x-0 top-0 z-30 border-b border-white/[0.06] bg-black/40 backdrop-blur-md">
      <nav className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
        <Logo />

        <div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 items-center gap-8 md:flex">
          {links.map((l) => (
            <a key={l} href="#" className="text-[13.5px] text-white/55 transition-colors hover:text-white">
              {l}
            </a>
          ))}
        </div>

        <div className="hidden items-center gap-2 md:flex">
          <a href="#" className="rounded-lg px-3 py-2 text-[13.5px] text-white/70 transition-colors hover:bg-white/5 hover:text-white">
            Sign in
          </a>
          <a href="#" className="rounded-lg bg-white px-4 py-2 text-[13.5px] font-medium text-black transition-transform hover:scale-[1.03]">
            Sign up
          </a>
        </div>

        <button
          type="button"
          onClick={() => setOpen((v) => !v)}
          className="text-white md:hidden"
          aria-label="Toggle menu"
        >
          <span className="block h-0.5 w-6 bg-white" />
          <span className="mt-1.5 block h-0.5 w-6 bg-white" />
          <span className="mt-1.5 block h-0.5 w-6 bg-white" />
        </button>
      </nav>

      {open && (
        <div className="border-t border-white/10 px-6 py-4 md:hidden">
          {links.map((l) => (
            <a key={l} href="#" className="block py-2 text-[14px] text-white/60">
              {l}
            </a>
          ))}
        </div>
      )}
    </header>
  );
}

// Self-contained analytics mockup — no external image, so the whole hero is
// copy-paste portable.
function DashboardMock() {
  const bars = [38, 52, 44, 66, 58, 74, 63, 88, 71, 96, 82, 100];
  return (
    <div className="overflow-hidden rounded-xl border border-white/10 bg-[#0b0d13] shadow-[0_40px_120px_-30px_rgba(99,102,241,0.45)]">
      {/* window chrome */}
      <div className="flex items-center gap-2 border-b border-white/[0.06] bg-white/[0.02] px-4 py-3">
        <span className="h-3 w-3 rounded-full bg-[#ff5f57]" />
        <span className="h-3 w-3 rounded-full bg-[#febc2e]" />
        <span className="h-3 w-3 rounded-full bg-[#28c840]" />
        <span className="mx-auto inline-flex items-center gap-2 rounded-md bg-white/[0.05] px-3 py-1 text-[11px] text-white/40">
          app.velynkit.io/overview
        </span>
      </div>

      <div className="grid grid-cols-[180px_1fr]">
        {/* sidebar */}
        <aside className="hidden flex-col gap-2 border-r border-white/[0.06] p-4 sm:flex">
          {["Overview", "Analytics", "Revenue", "Customers", "Settings"].map((s, i) => (
            <div
              key={s}
              className={`flex items-center gap-2 rounded-lg px-3 py-2 text-[12.5px] ${
                i === 1 ? "bg-white/[0.07] text-white" : "text-white/40"
              }`}
            >
              <span className={`h-2 w-2 rounded-sm ${i === 1 ? "bg-violet-400" : "bg-white/20"}`} />
              {s}
            </div>
          ))}
        </aside>

        {/* main */}
        <div className="p-5">
          <div className="mb-5 flex items-center justify-between">
            <div>
              <div className="text-[13px] text-white/45">Total revenue</div>
              <div className="mt-1 text-[26px] font-semibold tracking-tight text-white">
                $128,420
              </div>
            </div>
            <span className="rounded-full bg-emerald-400/15 px-2.5 py-1 text-[11px] font-medium text-emerald-300">
              +18.2%
            </span>
          </div>

          {/* stat cards */}
          <div className="mb-5 grid grid-cols-3 gap-3">
            {[
              { k: "Visitors", v: "24.1k" },
              { k: "Signups", v: "3,902" },
              { k: "Active", v: "1,284" },
            ].map((c) => (
              <div key={c.k} className="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
                <div className="text-[11px] text-white/40">{c.k}</div>
                <div className="mt-1 text-[16px] font-medium text-white">{c.v}</div>
              </div>
            ))}
          </div>

          {/* area chart */}
          <div className="relative h-28 overflow-hidden rounded-lg border border-white/[0.06] bg-white/[0.02]">
            <svg viewBox="0 0 320 112" preserveAspectRatio="none" className="h-full w-full">
              <defs>
                <linearGradient id="vk-area" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stopColor="rgba(139,92,246,0.55)" />
                  <stop offset="100%" stopColor="rgba(139,92,246,0)" />
                </linearGradient>
              </defs>
              <path
                d="M0,86 C30,80 50,54 80,52 C110,50 130,70 160,60 C190,50 205,26 240,30 C275,34 295,16 320,12 L320,112 L0,112 Z"
                fill="url(#vk-area)"
              />
              <path
                d="M0,86 C30,80 50,54 80,52 C110,50 130,70 160,60 C190,50 205,26 240,30 C275,34 295,16 320,12"
                fill="none"
                stroke="#a78bfa"
                strokeWidth="2"
              />
            </svg>
          </div>

          {/* mini bar row */}
          <div className="mt-4 flex h-12 items-end gap-1.5">
            {bars.map((h, i) => (
              <div
                key={i}
                className="flex-1 rounded-t-sm bg-gradient-to-t from-indigo-500/30 to-violet-400/80"
                style={{ height: `${h}%` }}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export function ColorPrismHero() {
  const stageRef = useRef<HTMLDivElement>(null);

  // Scroll-linked 3D reveal: the dashboard lies back and rises as the section
  // scrolls through the viewport, then drifts up a touch on the way out.
  const { scrollYProgress } = useScroll({
    target: stageRef,
    offset: ["start end", "end start"],
  });
  const y = useTransform(scrollYProgress, [0, 0.45, 1], [130, 0, -90]);
  const rotateX = useTransform(scrollYProgress, [0, 0.45, 1], [26, 0, 0]);
  const scale = useTransform(scrollYProgress, [0, 0.45, 1], [0.92, 1, 1.03]);
  const opacity = useTransform(scrollYProgress, [0, 0.2], [0.35, 1]);
  const glow = useTransform(scrollYProgress, [0, 0.45, 1], [0.3, 0.75, 0.4]);

  return (
    <div className="relative min-h-[880px] w-full overflow-hidden bg-[#050507] text-white antialiased">
      {/* ambient grid + top glow */}
      <div
        aria-hidden
        className="absolute inset-0 opacity-[0.5]"
        style={{
          backgroundImage:
            "linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px)",
          backgroundSize: "44px 44px",
          maskImage: "radial-gradient(120% 60% at 50% 0%, black, transparent 75%)",
          WebkitMaskImage: "radial-gradient(120% 60% at 50% 0%, black, transparent 75%)",
        }}
      />
      <div
        aria-hidden
        className="absolute left-1/2 top-[-10%] h-[420px] w-[820px] -translate-x-1/2 rounded-full"
        style={{
          background:
            "radial-gradient(closest-side, rgba(129,140,248,0.28), rgba(129,140,248,0))",
          filter: "blur(20px)",
        }}
      />

      <Nav />

      <section className="relative z-10 mx-auto flex max-w-5xl flex-col items-center px-6 pt-32 text-center">
        <div className="mb-8 inline-flex items-center gap-2 rounded-full border border-white/12 bg-white/[0.04] px-4 py-1.5 text-[12.5px] text-white/65 backdrop-blur">
          <span className="h-1.5 w-1.5 rounded-full bg-violet-400" />
          v2.0 — now with copy-paste blocks
          <span aria-hidden className="text-white/40">→</span>
        </div>

        <h1
          className="max-w-3xl text-[clamp(38px,5.6vw,68px)] font-medium leading-[1.04] tracking-[-0.04em]"
          style={{
            background: "linear-gradient(180deg,#ffffff 30%,rgba(255,255,255,0.55))",
            WebkitBackgroundClip: "text",
            WebkitTextFillColor: "transparent",
            backgroundClip: "text",
          }}
        >
          Give your big idea the
          <br />
          interface it deserves
        </h1>

        <p className="mt-6 max-w-xl text-[15.5px] leading-relaxed text-white/55">
          A landing-page kit built on React, Tailwind and shadcn/ui — drop the
          blocks into your project and ship the same day.
        </p>

        <div className="mt-9 flex items-center gap-3">
          <a
            href="#"
            className="rounded-xl bg-gradient-to-b from-white to-white/70 px-7 py-3 text-[14px] font-medium text-black transition-transform hover:scale-[1.04] active:scale-95"
          >
            Get started
          </a>
          <a
            href="#"
            className="rounded-xl border border-white/12 px-6 py-3 text-[14px] text-white/70 transition-colors hover:bg-white/5"
          >
            Browse components
          </a>
        </div>

        {/* scroll-reveal dashboard */}
        <div ref={stageRef} className="mt-16 w-full" style={{ perspective: 1400 }}>
          <motion.div
            aria-hidden
            className="pointer-events-none absolute left-1/2 top-1/2 -z-10 h-[460px] w-[760px] max-w-[90vw] -translate-x-1/2 -translate-y-1/2 rounded-full"
            style={{
              opacity: glow,
              background:
                "radial-gradient(closest-side, rgba(139,92,246,0.45), rgba(99,102,241,0.12), transparent 72%)",
              filter: "blur(28px)",
            }}
          />
          <motion.div
            className="relative mx-auto max-w-4xl will-change-transform"
            style={{ y, rotateX, scale, opacity, transformOrigin: "center top" }}
          >
            <DashboardMock />
          </motion.div>
        </div>
      </section>
    </div>
  );
}
Scroll Reveal Hero

Give your big idea theinterface it deserves

Dependencies

Give your big idea the
interface it deserves
