export function NoiseAuroraHero() {
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#efe9dd] text-[#1b1812] antialiased flex flex-col px-8 lg:px-14 py-10">
      {/* duotone warm wash */}
      <div
        aria-hidden
        className="absolute inset-0 opacity-80"
        style={{
          background:
            "radial-gradient(50% 60% at 80% 20%, rgba(234,179,8,0.30), transparent 60%), radial-gradient(50% 60% at 10% 90%, rgba(217,70,99,0.22), transparent 60%)",
        }}
      />
      {/* heavy film grain */}
      <div
        aria-hidden
        className="absolute inset-0 opacity-[0.18] mix-blend-multiply"
        style={{ backgroundImage: "radial-gradient(rgba(27,24,18,0.9) 0.6px, transparent 1px)", backgroundSize: "3px 3px" }}
      />
      <div
        aria-hidden
        className="absolute inset-0 opacity-[0.10] mix-blend-multiply"
        style={{ backgroundImage: "radial-gradient(rgba(27,24,18,0.7) 0.5px, transparent 1px)", backgroundSize: "5px 5px", backgroundPosition: "2px 1px" }}
      />

      {/* masthead */}
      <div className="relative z-10 flex items-center justify-between border-b border-black/20 pb-4 font-mono text-[11px] uppercase tracking-[0.18em] text-black/60">
        <span>Velynkit Press</span>
        <span>The Section Library</span>
        <span>No. 280</span>
      </div>

      {/* poster body */}
      <div className="relative z-10 flex flex-1 flex-col justify-center">
        <h1
          className="font-normal leading-[0.9] tracking-[-0.02em]"
          style={{ fontSize: "clamp(52px, 9vw, 132px)", fontFamily: "'Instrument Serif', Georgia, serif" }}
        >
          A landing page kit
          <br />
          with <span className="italic">actual taste.</span>
        </h1>
        <p className="mt-7 max-w-lg text-[16px] leading-relaxed text-black/65">
          280+ ready-to-ship sections — every category, every style. Copy,
          paste, ship by Friday. No subscriptions, no telemetry.
        </p>
        <div className="mt-8 flex items-center gap-4">
          <a href="#" className="rounded-full bg-[#1b1812] px-6 py-3 text-[13px] font-medium text-[#efe9dd] transition-transform hover:-translate-y-0.5">
            Browse the library →
          </a>
          <span className="font-mono text-[12px] uppercase tracking-[0.14em] text-black/55">$79 lifetime · MIT</span>
        </div>
      </div>

      {/* footer rule */}
      <div className="relative z-10 flex items-center justify-between border-t border-black/20 pt-4 font-mono text-[11px] uppercase tracking-[0.16em] text-black/50">
        <span>Editorial · Brutalist · Swiss · Soft-mono</span>
        <span>Est. 2026</span>
      </div>
    </div>
  );
}
Grain Poster Hero

A landing page kitwith actual taste.

A landing page kit
with actual taste.
