{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"gradient-border-css-rotating-conic-animated-border","type":"registry:component","title":"Gradient Border CSS Rotating Conic Animated Border","description":"","dependencies":[],"files":[{"path":"components/we-inc/gradient-border-css-rotating-conic-animated-border.tsx","type":"registry:component","content":"// Animated gradient border: an oversized conic gradient spins behind a card inset by 2px, inside a rounded box that clips it.\nexport default function GradientBorderCssRotatingConicAnimatedBorder() {\n  return (\n    <section className=\"bg-[#1a1410] px-5 py-16\">\n      <style>{`\n        .gb3 { position: relative; overflow: hidden; border-radius: 22px; padding: 2px; isolation: isolate; }\n        .gb3::before {\n          content: \"\"; position: absolute; z-index: -1; left: 50%; top: 50%; width: 200%; aspect-ratio: 1;\n          translate: -50% -50%;\n          background: conic-gradient(from 0deg, transparent 0 55%, #fbbf24 70%, #fb7185 82%, transparent 92%);\n          animation: gb3-spin 4.5s linear infinite;\n        }\n        @keyframes gb3-spin { to { rotate: 360deg; } }\n        @media (prefers-reduced-motion: reduce) {\n          .gb3::before { animation: none; background: linear-gradient(135deg, #fbbf24, #fb7185); }\n        }\n      `}</style>\n      <div className=\"mx-auto max-w-sm\">\n        <div className=\"gb3 bg-amber-950/40\">\n          <div className=\"rounded-[20px] bg-[#211913] p-7\">\n            <p className=\"text-xs font-semibold uppercase tracking-[0.2em] text-amber-300\">Most booked</p>\n            <h2 className=\"mt-2 text-xl font-semibold text-amber-50\">Weekend roastery tour</h2>\n            <p className=\"mt-1 text-sm text-stone-300\">Cupping, a roast of your own and a bag to take home.</p>\n            <p className=\"mt-6 flex items-baseline gap-1 text-amber-50\"><span className=\"text-4xl font-semibold\">£48</span><span className=\"text-sm text-stone-300\">per person</span></p>\n            <a href=\"#\" className=\"mt-6 flex min-h-[46px] items-center justify-center rounded-xl bg-amber-400 text-sm font-semibold text-stone-950 hover:bg-amber-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-200 focus-visible:ring-offset-2 focus-visible:ring-offset-[#211913]\">\n              Choose a Saturday\n            </a>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n"}]}