export function AuroraMeshHero() {
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#ecebe7] text-[#101010] antialiased flex flex-col px-8 lg:px-14 py-10">
      {/* rotating precision mark in the negative space */}
      <svg aria-hidden viewBox="0 0 200 200" className="absolute right-[6%] top-1/2 hidden h-[420px] w-[420px] -translate-y-1/2 opacity-[0.5] lg:block">
        <g fill="none" stroke="#101010" strokeWidth="0.5" style={{ transformOrigin: "100px 100px", animation: "sw-rot 40s linear infinite" }}>
          {[90, 66, 42, 18].map((s) => (
            <rect key={s} x={100 - s} y={100 - s} width={s * 2} height={s * 2} />
          ))}
          <line x1="0" y1="100" x2="200" y2="100" />
          <line x1="100" y1="0" x2="100" y2="200" />
        </g>
        <circle cx="100" cy="100" r="4" fill="#d6452f">
          <animate attributeName="r" values="3;6;3" dur="3s" repeatCount="indefinite" />
        </circle>
      </svg>

      {/* masthead with a drawing rule */}
      <div className="relative flex items-center justify-between pb-4 font-mono text-[11px] uppercase tracking-[0.18em] text-black/60">
        <span className="text-[#d6452f]">Velynkit®</span>
        <span>Design System — Vol. 12</span>
        <span>MMXXVI</span>
        <span aria-hidden className="absolute bottom-0 left-0 h-px w-full origin-left bg-black/20" style={{ animation: "sw-draw 2.4s cubic-bezier(0.22,1,0.36,1) infinite" }} />
      </div>

      <div className="grid flex-1 grid-cols-12 gap-x-6 gap-y-8 pt-12">
        <div className="col-span-12 lg:col-span-1 font-mono text-[12px] text-black/40">01</div>

        <div className="col-span-12 lg:col-span-7">
          <h1 className="text-[clamp(40px,5.8vw,86px)] font-semibold leading-[0.95] tracking-[-0.035em]">
            Systematic
            <br />
            design for the
            <br />
            <span className="inline-flex items-center gap-3">
              modern web
              <span className="inline-block h-[0.62em] w-[0.62em] translate-y-[0.04em] bg-[#d6452f]" style={{ animation: "sw-square 6s ease-in-out infinite" }} />
            </span>
          </h1>
        </div>

        <div className="col-span-12 lg:col-span-4 lg:col-start-9 flex flex-col justify-end">
          <p className="max-w-xs text-[15px] leading-relaxed text-black/65">
            A disciplined library of components, tokens and motion — built on a
            strict grid so every screen stays in proportion.
          </p>
          <div className="mt-7 flex items-center gap-4">
            <a href="#" className="bg-[#101010] px-5 py-2.5 text-[13px] font-medium text-white transition-colors hover:bg-black">Get the system</a>
            <a href="#" className="font-mono text-[12px] uppercase tracking-[0.14em] text-black/55 underline-offset-4 hover:text-black hover:underline">Specimen ↗</a>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-2 border-t border-black/15 pt-4 md:grid-cols-4">
        {[["02", "Components"], ["03", "Tokens"], ["04", "Motion"], ["05", "Documentation"]].map(([n, label], i) => (
          <div key={n} className="flex items-baseline gap-2 border-l border-black/10 pl-3 first:border-l-0 first:pl-0">
            <span className="font-mono text-[11px] text-[#d6452f]" style={{ animation: `sw-blink 4s ease-in-out ${i * 0.4}s infinite` }}>{n}</span>
            <span className="text-[13px] text-black/70">{label}</span>
          </div>
        ))}
      </div>

      <style>{`
        @keyframes sw-rot { to { transform: rotate(360deg); } }
        @keyframes sw-draw { 0% { transform: scaleX(0); } 60%,100% { transform: scaleX(1); } }
        @keyframes sw-square { 0%,100% { transform: translateY(0.04em) rotate(0deg); } 50% { transform: translateY(0.04em) rotate(90deg); } }
        @keyframes sw-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
      `}</style>
    </div>
  );
}
Swiss System Hero

Systematicdesign for themodern web

Systematic
design for the
modern web
