{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ecommerce-highlight-card-shadcnui",
  "type": "registry:component",
  "title": "Ecommerce Highlight Card",
  "description": "Product spotlight card with blurred border, bundle selector, and fulfillment details",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/cards/shadcnui/ecommerce-highlight-card.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { Check, ShieldCheck, Sparkles, Star, Truck } from \"lucide-react\";\nimport { useState } from \"react\";\n\ntype Plan = {\n  id: string;\n  title: string;\n  price: string;\n  description: string;\n  promise: string;\n};\n\nconst plans: Plan[] = [\n  {\n    id: \"essential\",\n    title: \"Essential\",\n    price: \"$48.00\",\n    description:\n      \"Everyday comfort with signature cushioning and durable materials.\",\n    promise: \"Ships in 2 business days • 30-day returns\",\n  },\n  {\n    id: \"plus\",\n    title: \"Plus\",\n    price: \"$68.00\",\n    description:\n      \"Upgraded foam footbed, recycled laces, and breathable knit upper.\",\n    promise: \"Ships next business day • 45-day returns\",\n  },\n  {\n    id: \"premium\",\n    title: \"Premium\",\n    price: \"$92.00\",\n    description:\n      \"Adaptive arch support and antimicrobial lining for long days on your feet.\",\n    promise: \"Priority fulfillment • 60-day returns\",\n  },\n];\n\nconst highlights = [\n  {\n    icon: Sparkles,\n    label: \"Best Seller\",\n  },\n  {\n    icon: ShieldCheck,\n    label: \"2-year warranty\",\n  },\n];\n\nexport function EcommerceHighlightCard() {\n  const [activePlan, setActivePlan] = useState<Plan>(plans[1]);\n  const shouldReduceMotion = useReducedMotion();\n\n  return (\n    <div className=\"w-full\">\n      <motion.div\n        initial={shouldReduceMotion ? false : { opacity: 0, y: 24 }}\n        animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}\n        transition={\n          shouldReduceMotion ? undefined : { duration: 0.45, ease: \"easeOut\" }\n        }\n        className=\"relative z-10\"\n      >\n        <Card className=\"group relative overflow-hidden rounded-[28px] border border-border/40 bg-background text-foreground\">\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\"\n          />\n\n          <CardHeader className=\"relative space-y-4 pb-0\">\n            <Badge className=\"w-fit rounded-full bg-primary/15 px-3 py-1 text-[0.65rem] font-medium uppercase tracking-[0.25em] text-primary transition-colors hover:bg-primary hover:text-primary-foreground\">\n              Nimbus Collection\n            </Badge>\n            <div className=\"space-y-2\">\n              <CardTitle className=\"text-2xl font-semibold tracking-tight\">\n                Nimbus Pace Runner\n              </CardTitle>\n              <CardDescription className=\"text-sm text-muted-foreground\">\n                Lightweight performance kicks engineered for all-day comfort and\n                momentum.\n              </CardDescription>\n            </div>\n            <div className=\"flex items-center gap-3 text-sm\">\n              <div className=\"flex items-center gap-1 text-primary\">\n                {[0, 1, 2, 3, 4].map((star) => (\n                  <Star\n                    key={star}\n                    className=\"h-4 w-4 fill-current\"\n                    aria-hidden=\"true\"\n                  />\n                ))}\n              </div>\n              <span className=\"text-muted-foreground\">4.9 • 1,240 reviews</span>\n            </div>\n          </CardHeader>\n\n          <CardContent className=\"relative space-y-6 pt-6\">\n            <div className=\"flex flex-wrap gap-2\">\n              {highlights.map(({ icon: Icon, label }) => (\n                <span\n                  key={label}\n                  className=\"inline-flex items-center gap-2 rounded-full border border-border/70 bg-muted/60 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur\"\n                >\n                  <Icon\n                    className=\"h-3.5 w-3.5 text-primary\"\n                    aria-hidden=\"true\"\n                  />\n                  {label}\n                </span>\n              ))}\n            </div>\n\n            <div className=\"grid gap-2\">\n              <span className=\"text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground\">\n                Choose your bundle\n              </span>\n              <div className=\"flex flex-wrap gap-2\">\n                {plans.map((plan) => {\n                  const isActive = plan.id === activePlan.id;\n                  return (\n                    <Button\n                      key={plan.id}\n                      type=\"button\"\n                      variant=\"outline\"\n                      onClick={() => setActivePlan(plan)}\n                      aria-pressed={isActive}\n                      className={`rounded-full border-border/60 px-4 py-2 text-sm font-medium transition-all ${\n                        isActive\n                          ? \"border-primary/40 bg-primary text-primary-foreground shadow-lg\"\n                          : \"bg-background/80 text-foreground hover:border-primary/30 hover:bg-muted\"\n                      }`}\n                    >\n                      {plan.title}\n                    </Button>\n                  );\n                })}\n              </div>\n            </div>\n\n            <AnimatePresence mode=\"wait\">\n              <motion.div\n                key={activePlan.id}\n                initial={shouldReduceMotion ? false : { opacity: 0, y: 12 }}\n                animate={\n                  shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }\n                }\n                exit={\n                  shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: -10 }\n                }\n                transition={\n                  shouldReduceMotion\n                    ? undefined\n                    : {\n                        duration: 0.32,\n                        ease: \"easeOut\",\n                        opacity: { duration: 0.25 },\n                      }\n                }\n                className=\"space-y-3 rounded-2xl border border-border/60 bg-card/60 p-4 shadow-sm backdrop-blur\"\n              >\n                <div className=\"flex items-center justify-between\">\n                  <div>\n                    <p className=\"text-sm font-medium text-muted-foreground\">\n                      {activePlan.title}\n                    </p>\n                    <p className=\"text-base font-semibold text-foreground\">\n                      {activePlan.price}\n                    </p>\n                  </div>\n                  <span className=\"inline-flex items-center gap-1 rounded-full bg-primary/15 px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-primary\">\n                    <Check className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n                    Selected\n                  </span>\n                </div>\n                <p className=\"text-sm leading-relaxed text-muted-foreground\">\n                  {activePlan.description}\n                </p>\n                <p className=\"text-xs font-medium text-foreground\">\n                  {activePlan.promise}\n                </p>\n              </motion.div>\n            </AnimatePresence>\n\n            <Separator className=\"bg-border/60\" />\n\n            <div className=\"flex flex-col gap-3 rounded-2xl border border-border/60 bg-muted/50 p-4 text-sm text-muted-foreground backdrop-blur-sm\">\n              <div className=\"flex items-center gap-2\">\n                <Truck className=\"h-4 w-4 text-primary\" aria-hidden=\"true\" />\n                <span>Free express shipping on orders over $100</span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <ShieldCheck\n                  className=\"h-4 w-4 text-primary\"\n                  aria-hidden=\"true\"\n                />\n                <span>Extended warranty included with every bundle</span>\n              </div>\n            </div>\n          </CardContent>\n\n          <CardFooter className=\"relative flex flex-col gap-4 border-t border-border/50 bg-muted/40 px-8 py-6 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"text-sm\">\n              <p className=\"font-medium text-foreground\">\n                Arrives before Friday\n              </p>\n              <p className=\"text-xs text-muted-foreground\">\n                Checkout before 2PM local time\n              </p>\n            </div>\n            <Button size=\"lg\" className=\"w-full rounded-full sm:w-auto\">\n              Add to bag • {activePlan.price}\n            </Button>\n          </CardFooter>\n        </Card>\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/ecommerce-highlight-card-shadcnui.tsx"
    }
  ]
}