function IsoLayer({ y, color, label, delay }: { y: number; color: string; label: string; delay: number }) {
  return (
    <div
      className="absolute left-1/2 top-1/2 h-28 w-56"
      style={{
        transform: `translate(-50%,-50%) translateY(${y}px) rotateX(58deg) rotateZ(-42deg)`,
        transformStyle: "preserve-3d",
      }}
    >
      <div
        className="grid h-full w-full place-items-center rounded-xl border text-[12px] font-medium"
        style={{
          background: color,
          borderColor: "rgba(0,0,0,0.06)",
          boxShadow: "0 30px 40px -24px rgba(15,23,42,0.45)",
          color: "rgba(15,23,42,0.55)",
          animation: `iso-lift 5s ease-in-out ${delay}s infinite`,
        }}
      >
        {label}
      </div>
    </div>
  );
}

export function FloatingCubesHero() {
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#f4f4f1] text-[#0c0d10] antialiased flex items-center px-10 lg:px-16">
      <div
        aria-hidden
        className="absolute inset-0 opacity-[0.5]"
        style={{
          backgroundImage: "linear-gradient(#e3e3df 1px, transparent 1px), linear-gradient(90deg,#e3e3df 1px, transparent 1px)",
          backgroundSize: "60px 60px",
          maskImage: "radial-gradient(circle at 72% 50%, black, transparent 70%)",
          WebkitMaskImage: "radial-gradient(circle at 72% 50%, black, transparent 70%)",
        }}
      />

      <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-10 lg:px-16 py-6">
        <span className="text-[14px] font-semibold tracking-tight">Velynkit Stack</span>
        <a href="#" className="rounded-full bg-[#0c0d10] px-4 py-1.5 text-[12.5px] font-medium text-white">Compose free</a>
      </div>

      <div className="relative z-10 grid w-full max-w-6xl grid-cols-1 items-center gap-12 lg:grid-cols-2">
        <div>
          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-black/10 bg-white px-3 py-1 text-[12px] text-black/55">
            <span aria-hidden>▦</span> The block-based SaaS builder
          </div>
          <h1 className="text-[clamp(40px,5.2vw,78px)] font-semibold leading-[0.96] tracking-[-0.035em]">
            Compose your stack
            <br />
            <span className="text-black/45">block by block.</span>
          </h1>
          <p className="mt-6 max-w-md text-[15.5px] leading-relaxed text-black/55">
            Plug auth, billing, email and storage together visually — then
            export the typed SDK and own the code.
          </p>
          <div className="mt-8 flex items-center gap-3">
            <a href="#" className="rounded-full bg-[#0c0d10] px-5 py-2.5 text-[13px] font-medium text-white transition-transform hover:-translate-y-0.5">Compose for free</a>
            <a href="#" className="text-[13px] text-black/55 underline-offset-4 hover:text-black hover:underline">Browse blocks ↗</a>
          </div>
        </div>

        {/* animated isometric stack with a data packet rising through it */}
        <div className="relative hidden h-80 lg:block" style={{ perspective: "1200px" }}>
          <IsoLayer y={56} color="#e6e6fb" label="Database" delay={0} />
          <IsoLayer y={18} color="#fde4f1" label="Auth" delay={0.4} />
          <IsoLayer y={-20} color="#def5f4" label="Billing" delay={0.8} />
          <IsoLayer y={-58} color="#ffffff" label="Your app" delay={1.2} />
          {/* rising packet */}
          <span
            className="absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 rounded-full"
            style={{
              background: "radial-gradient(circle, #818cf8, #6366f1)",
              boxShadow: "0 0 18px rgba(99,102,241,0.9)",
              animation: "iso-packet 3.4s ease-in-out infinite",
            }}
          />
        </div>
      </div>

      <style>{`
        @keyframes iso-lift { 0%,100% { transform: translateZ(0); } 50% { transform: translateZ(26px); } }
        @keyframes iso-packet {
          0% { transform: translate(-50%, 64px) scale(0.8); opacity: 0; }
          15% { opacity: 1; }
          85% { opacity: 1; }
          100% { transform: translate(-50%, -72px) scale(1.1); opacity: 0; }
        }
      `}</style>
    </div>
  );
}
Isometric Stack Hero

Compose your stackblock by block.

Compose your stack
block by block.
