{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-spotlight",
  "title": "Features — Spotlight",
  "description": "A features section: shimmering eyebrow, heading, a scroll-revealed grid of spotlight cards and a logo marquee.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@mewo/text-shimmer",
    "@mewo/scroll-reveal",
    "@mewo/spotlight-card",
    "@mewo/marquee"
  ],
  "files": [
    {
      "path": "registry/mewo/blocks/features-spotlight.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Feather, Sparkles, Zap } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Marquee } from \"@/registry/mewo/ui/marquee\"\nimport { ScrollReveal } from \"@/registry/mewo/ui/scroll-reveal\"\nimport { SpotlightCard } from \"@/registry/mewo/ui/spotlight-card\"\nimport { TextShimmer } from \"@/registry/mewo/ui/text-shimmer\"\n\nexport interface Feature {\n  icon?: React.ReactNode\n  title: string\n  description: string\n}\n\nexport interface FeaturesSpotlightProps extends React.ComponentProps<\"section\"> {\n  eyebrow?: string\n  title?: string\n  features?: Feature[]\n  logos?: React.ReactNode[]\n}\n\nconst DEFAULT_FEATURES: Feature[] = [\n  { icon: <Zap className=\"size-5\" />, title: \"Fast by default\", description: \"GPU-friendly transforms and opacity only. Nothing that triggers layout.\" },\n  { icon: <Feather className=\"size-5\" />, title: \"Light footprint\", description: \"Each component pulls in only the library it needs — some need none.\" },\n  { icon: <Sparkles className=\"size-5\" />, title: \"Motion built in\", description: \"Enter, hover and scroll animations that respect reduced-motion settings.\" },\n]\n\nconst DEFAULT_LOGOS = [\"Acme\", \"Globex\", \"Initech\", \"Umbrella\", \"Hooli\", \"Stark\"].map((name) => (\n  <span key={name} className=\"text-xl font-semibold text-muted-foreground/60\">\n    {name}\n  </span>\n))\n\nexport function FeaturesSpotlight({\n  eyebrow = \"Why mewo\",\n  title = \"Everything you need to ship motion\",\n  features = DEFAULT_FEATURES,\n  logos = DEFAULT_LOGOS,\n  className,\n  ...props\n}: FeaturesSpotlightProps) {\n  return (\n    <section data-slot=\"features-spotlight\" className={cn(\"px-6 py-24\", className)} {...props}>\n      <div className=\"mx-auto max-w-5xl\">\n        <ScrollReveal className=\"text-center\">\n          <TextShimmer className=\"text-sm font-medium uppercase tracking-wider\">{eyebrow}</TextShimmer>\n          <h2 className=\"mt-3 text-balance text-3xl font-bold tracking-tight sm:text-4xl\">{title}</h2>\n        </ScrollReveal>\n        <ScrollReveal delay={0.15} className=\"mt-12 grid gap-4 sm:grid-cols-3\">\n          {features.map((feature) => (\n            <SpotlightCard key={feature.title}>\n              {feature.icon ? (\n                <div className=\"mb-4 inline-flex size-9 items-center justify-center rounded-lg border bg-muted\">{feature.icon}</div>\n              ) : null}\n              <h3 className=\"font-semibold\">{feature.title}</h3>\n              <p className=\"mt-2 text-sm text-muted-foreground\">{feature.description}</p>\n            </SpotlightCard>\n          ))}\n        </ScrollReveal>\n        <Marquee speed={40} className=\"mt-16 [mask-image:linear-gradient(to_right,transparent,black_15%,black_85%,transparent)]\">\n          {logos}\n        </Marquee>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "sections",
    "features"
  ],
  "type": "registry:block"
}