export function DiagonalBandsHero() {
  return (
    <div className="relative grid min-h-[680px] w-full grid-cols-1 overflow-hidden antialiased lg:grid-cols-[1.15fr_0.85fr]">
      {/* left — dark editorial panel with drifting aurora */}
      <div className="relative flex flex-col justify-between bg-[#0d0d12] px-8 py-10 text-white lg:px-14">
        <div
          aria-hidden
          className="absolute inset-0 opacity-70"
          style={{
            background:
              "radial-gradient(45% 50% at 18% 30%, rgba(99,102,241,0.45), transparent 60%), radial-gradient(40% 50% at 85% 75%, rgba(236,72,153,0.32), transparent 60%), radial-gradient(40% 50% at 60% 50%, rgba(34,211,238,0.22), transparent 60%)",
            filter: "blur(36px)",
            animation: "scb-aurora 15s ease-in-out infinite",
          }}
        />
        <div className="relative flex items-center justify-between">
          <span className="text-[14px] font-semibold tracking-tight">Velynkit Studio</span>
          <span className="font-mono text-[11px] uppercase tracking-[0.2em] text-white/45">Index 014</span>
        </div>

        <div className="relative">
          <p className="mb-5 font-mono text-[11px] uppercase tracking-[0.3em] text-white/45">Editorial-grade websites</p>
          <h1 className="text-[clamp(44px,6vw,92px)] font-semibold leading-[0.9] tracking-[-0.04em]">
            Websites that
            <br />
            <span
              className="bg-clip-text text-transparent italic font-light"
              style={{ fontFamily: "'Instrument Serif', Georgia, serif", backgroundImage: "linear-gradient(90deg,#a5b4fc,#f0abfc,#67e8f9,#a5b4fc)", backgroundSize: "200% 100%", animation: "scb-flow 6s linear infinite" }}
            >
              outlive
            </span>{" "}
            the
            <br />
            trend cycle.
          </h1>
        </div>

        <div className="relative flex items-center gap-4">
          <a href="#" className="rounded-full bg-white px-6 py-3 text-[13px] font-medium text-black transition-transform hover:-translate-y-0.5">See our work →</a>
          <a href="#" className="text-[13px] text-white/55 underline-offset-4 hover:text-white hover:underline">Brief us</a>
        </div>
      </div>

      {/* animated seam beam */}
      <div aria-hidden className="absolute top-0 bottom-0 left-[57.4%] hidden w-px lg:block" style={{ background: "linear-gradient(180deg, transparent, rgba(255,255,255,0.7), transparent)", animation: "scb-beam 5s ease-in-out infinite" }} />

      {/* right — light figure panel with liquid duotone */}
      <div className="relative flex flex-col justify-between bg-[#e9e6df] px-8 py-10 text-[#15140f] lg:px-12">
        <div className="relative flex-1 overflow-hidden rounded-2xl">
          <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" className="absolute inset-0 h-full w-full">
            <defs>
              <linearGradient id="scb-duo" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="#cdbb9a" />
                <stop offset="50%" stopColor="#9aa6c4" />
                <stop offset="100%" stopColor="#6c5b7b" />
              </linearGradient>
              <filter id="scb-liquid">
                <feTurbulence type="fractalNoise" baseFrequency="0.012 0.02" numOctaves="2" seed="7" result="n">
                  <animate attributeName="baseFrequency" dur="18s" values="0.012 0.02;0.02 0.012;0.012 0.02" repeatCount="indefinite" />
                </feTurbulence>
                <feDisplacementMap in="SourceGraphic" in2="n" scale="26" />
              </filter>
            </defs>
            <rect x="-20" y="-20" width="440" height="340" fill="url(#scb-duo)" filter="url(#scb-liquid)" />
          </svg>
          <div className="absolute left-5 top-5 font-mono text-[11px] uppercase tracking-[0.16em] text-white/70">Fig. A — Case 014</div>
        </div>

        <div className="mt-8 grid grid-cols-2 gap-4 text-[13px]">
          <div>
            <div className="font-mono text-[11px] uppercase tracking-[0.14em] text-black/45">Clients</div>
            <div className="mt-1 leading-snug text-black/70">SaaS · Studios · Founders</div>
          </div>
          <div>
            <div className="font-mono text-[11px] uppercase tracking-[0.14em] text-black/45">Since</div>
            <div className="mt-1 leading-snug text-black/70">2026 — Berlin</div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes scb-aurora { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(18px,-14px) scale(1.08); } }
        @keyframes scb-flow { to { background-position: 200% 0; } }
        @keyframes scb-beam { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
      `}</style>
    </div>
  );
}
Split Color Block Hero

Websites thatoutlive thetrend cycle.

Websites that
outlive the
trend cycle.
