export function AuroraPillsHero() {
  // Translucent gradient "shapes" drift and rotate behind elegant display
  // type. No badge, no heavy navbar — the composition carries it.
  const shapes = [
    { from: "#6366f1", to: "#06b6d4", x: "6%", y: "16%", w: 340, r: -18, d: "0s" },
    { from: "#ec4899", to: "#f59e0b", x: "68%", y: "10%", w: 280, r: 24, d: "-3s" },
    { from: "#8b5cf6", to: "#ec4899", x: "60%", y: "56%", w: 380, r: -8, d: "-6s" },
    { from: "#06b6d4", to: "#10b981", x: "12%", y: "62%", w: 260, r: 14, d: "-2s" },
  ];

  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#070708] text-white antialiased grid place-items-center px-6">
      {/* Drifting translucent gradient shapes */}
      <div aria-hidden className="absolute inset-0">
        {shapes.map((s, i) => (
          <div
            key={i}
            className="absolute rounded-[44px] opacity-60 mix-blend-screen"
            style={{
              left: s.x,
              top: s.y,
              width: s.w,
              height: s.w * 0.42,
              background: `linear-gradient(135deg, ${s.from}, ${s.to})`,
              filter: "blur(38px)",
              ["--r" as string]: `${s.r}deg`,
              transform: `rotate(${s.r}deg)`,
              animation: `shape-drift 13s ${s.d} ease-in-out infinite`,
            }}
          />
        ))}
        <div className="absolute inset-0 bg-[radial-gradient(120%_90%_at_50%_50%,transparent_28%,rgba(7,7,8,0.9)_100%)]" />
      </div>

      {/* Slim top row — wordmark + single ghost action, no nav clutter */}
      <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-8 lg:px-12 py-6">
        <span className="text-[13px] font-medium tracking-[0.22em] uppercase text-white/80">
          Velynkit<span className="text-indigo-400">.</span>
        </span>
        <a
          href="#"
          className="rounded-full border border-white/15 px-4 py-1.5 text-[12.5px] text-white/70 hover:border-white/30 hover:text-white transition-colors"
        >
          Manifesto ↗
        </a>
      </div>

      <div className="relative z-10 max-w-3xl text-center">
        <div className="mb-9 inline-flex items-center gap-3 font-mono text-[11px] uppercase tracking-[0.32em] text-white/40">
          <span className="h-px w-8 bg-white/30" />
          Design Studio · 2026
          <span className="h-px w-8 bg-white/30" />
        </div>

        <h1 className="text-[clamp(46px,8vw,120px)] font-light leading-[0.92] tracking-[-0.045em]">
          <span className="block text-white/90">Elevate your</span>
          <span className="block bg-linear-to-r from-indigo-300 via-fuchsia-300 to-amber-200 bg-clip-text font-medium text-transparent">
            digital vision
          </span>
        </h1>

        <p className="mx-auto mt-8 max-w-md text-[15.5px] font-light leading-relaxed text-white/45">
          Crafting exceptional digital experiences through innovative design and
          quietly obsessive engineering.
        </p>

        <div className="mt-11 flex items-center justify-center gap-6">
          <a
            href="#"
            className="rounded-full bg-white px-6 py-3 text-[13px] font-medium text-black transition-transform hover:scale-[1.03]"
          >
            Begin a project
          </a>
          <a href="#" className="text-[13px] text-white/60 underline-offset-4 hover:text-white hover:underline">
            View work
          </a>
        </div>
      </div>

      <style>{`
        @keyframes shape-drift {
          0%, 100% { transform: translate3d(0,0,0) rotate(var(--r,0deg)); }
          50% { transform: translate3d(0,-28px,0) rotate(calc(var(--r,0deg) + 10deg)); }
        }
      `}</style>
    </div>
  );
}
Shape Landing Hero

Elevate yourdigital vision
