export function HolographicHero() {
  const facets = [
    { pts: "60,8 104,33 104,58 60,33", fill: "url(#lr-metal)" },
    { pts: "60,33 104,58 60,83 16,58", fill: "url(#lr-metal2)" },
    { pts: "16,33 60,8 60,33 16,58", fill: "url(#lr-metal2)" },
    { pts: "60,58 104,83 60,112 16,83", fill: "url(#lr-metal)" },
  ];

  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-white text-[#0b0b0e] antialiased flex flex-col items-center justify-center px-6">
      {/* breathing concentric rings */}
      <div
        aria-hidden
        className="absolute left-1/2 top-1/2 h-[900px] w-[900px] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-[0.5]"
        style={{
          background: "repeating-radial-gradient(circle, transparent 0 58px, rgba(15,23,42,0.05) 58px 59px)",
          maskImage: "radial-gradient(circle, black 30%, transparent 68%)",
          WebkitMaskImage: "radial-gradient(circle, black 30%, transparent 68%)",
          animation: "lr-breathe 8s ease-in-out infinite",
        }}
      />

      <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-[14px] font-semibold tracking-tight">Velynkit Blocks</span>
        <a href="#" className="text-[12.5px] text-black/55 hover:text-black transition-colors">Components ↗</a>
      </div>

      <div className="relative z-10 max-w-xl text-center">
        <h1 className="text-[clamp(30px,4vw,46px)] font-semibold leading-tight tracking-[-0.025em]">
          Blocks built with{" "}
          <span className="bg-linear-to-r from-indigo-500 to-violet-500 bg-clip-text text-transparent">Shadcn &amp; Tailwind</span>
        </h1>
        <p className="mx-auto mt-4 max-w-md text-[15px] leading-relaxed text-black/55">
          Finely crafted components built with React, Tailwind and Shadcn UI.
          Copy, paste and ship them straight into your project.
        </p>
        <div className="mt-7 flex items-center justify-center gap-3">
          <a href="#" className="rounded-full bg-[#0b0b0e] px-5 py-2.5 text-[13px] font-medium text-white transition-transform hover:-translate-y-0.5">Discover Features →</a>
          <a href="#" className="rounded-full border border-black/15 px-5 py-2.5 text-[13px] font-medium text-black/70 hover:bg-black/[0.03] transition-colors">Browse all</a>
        </div>
        <p className="mt-5 text-[11.5px] uppercase tracking-[0.18em] text-black/40">Trusted by 20,000+ businesses worldwide</p>
      </div>

      {/* metallic logo panel with a sweeping highlight */}
      <div className="relative z-10 mt-10 grid h-44 w-full max-w-2xl place-items-center overflow-hidden rounded-2xl border border-black/[0.07] bg-[#f4f4f5]">
        <div aria-hidden className="absolute inset-0" style={{ background: "linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.85) 50%, transparent 70%)", backgroundSize: "240% 100%", animation: "lr-sweep 4.5s ease-in-out infinite" }} />
        <svg viewBox="0 0 120 120" className="relative h-24 w-24">
          <defs>
            <linearGradient id="lr-metal" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#0b0b0e" />
              <stop offset="50%" stopColor="#52525b" />
              <stop offset="100%" stopColor="#18181b" />
              <animateTransform attributeName="gradientTransform" type="translate" from="-0.5 0" to="0.5 0" dur="4.5s" repeatCount="indefinite" additive="sum" />
            </linearGradient>
            <linearGradient id="lr-metal2" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#3f3f46" />
              <stop offset="50%" stopColor="#a1a1aa" />
              <stop offset="100%" stopColor="#3f3f46" />
            </linearGradient>
          </defs>
          {facets.map((f, i) => (
            <polygon key={i} points={f.pts} fill={f.fill} style={{ transformOrigin: "60px 60px", animation: `lr-facet 5s ease-in-out ${i * 0.25}s infinite` }} />
          ))}
        </svg>
      </div>

      <style>{`
        @keyframes lr-breathe { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.5; } 50% { transform: translate(-50%,-50%) scale(1.04); opacity: 0.7; } }
        @keyframes lr-sweep { 0% { background-position: 130% 0; } 60%,100% { background-position: -130% 0; } }
        @keyframes lr-facet { 0%,100% { opacity: 1; transform: translateY(0) scale(1); } 50% { opacity: 0.78; transform: translateY(-2px) scale(1.03); } }
      `}</style>
    </div>
  );
}
Logo Reveal Hero

Blocks built with Shadcn & Tailwind
