{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ecommerce-ecommerce-cross-sells-feature-icons","type":"registry:block","title":"Feature Icons","files":[{"path":"components/blocks/ecommerce/ecommerce-cross-sells/feature-icons.tsx","content":"import { Zap, Shield, Headphones } from 'lucide-react';\nimport { Card, CardContent } from '@/components/ui/card';\n\nexport default function CrossSellFeatureIcons() {\n  const products = [\n    {\n      id: 1,\n      title: 'Wireless Charging Pad',\n      image: '/placeholder.svg?height=200&width=200',\n      feature: {\n        icon: Zap,\n        label: 'Fast 15W Charging',\n      },\n      price: '$29.99',\n    },\n    {\n      id: 2,\n      title: 'Phone Case Pro',\n      image: '/placeholder.svg?height=200&width=200',\n      feature: {\n        icon: Shield,\n        label: 'Military Grade Protection',\n      },\n      price: '$24.99',\n    },\n    {\n      id: 3,\n      title: 'Bluetooth Earbuds',\n      image: '/placeholder.svg?height=200&width=200',\n      feature: {\n        icon: Headphones,\n        label: 'Active Noise Cancelling',\n      },\n      price: '$79.99',\n    },\n  ];\n\n  return (\n    <div className=\"px-4 py-8 md:py-12\">\n      <div className=\"mx-auto max-w-6xl\">\n        <div className=\"mb-8 text-center\">\n          <h2 className=\"mb-2 text-2xl font-bold tracking-tight\">\n            Complete Your Setup\n          </h2>\n          <p className=\"text-muted-foreground\">\n            Perfect accessories to enhance your experience\n          </p>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3\">\n          {products.map((product) => {\n            const IconComponent = product.feature.icon;\n            return (\n              <Card\n                key={product.id}\n                className=\"group cursor-pointer gap-0 transition-all duration-200 hover:shadow-lg\"\n              >\n                <CardContent>\n                  <div className=\"bg-muted mb-4 aspect-square overflow-hidden rounded-lg\">\n                    <img\n                      src={product.image || '/placeholder.svg'}\n                      alt={product.title}\n                      width={200}\n                      height={200}\n                      className=\"h-full w-full object-cover transition-transform duration-200 group-hover:scale-105\"\n                    />\n                  </div>\n\n                  <div className=\"space-y-3\">\n                    <h3 className=\"text-lg leading-tight font-semibold\">\n                      {product.title}\n                    </h3>\n\n                    <div className=\"text-muted-foreground flex items-center gap-2 text-sm\">\n                      <IconComponent className=\"text-primary h-4 w-4\" />\n                      <span>{product.feature.label}</span>\n                    </div>\n\n                    <div className=\"flex items-center justify-between pt-2\">\n                      <span className=\"text-xl font-bold\">{product.price}</span>\n                      <button className=\"bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2 text-sm font-medium transition-colors\">\n                        Add to Cart\n                      </button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/ecommerce/ecommerce-cross-sells/feature-icons.tsx"},{"path":"components/ui/card.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n","type":"registry:ui","target":"components/ui/card.tsx"}],"description":"Recommended products laid out with an icon, short benefit, and price for each item. Highlights why shoppers should add a related pick to the cart.","dependencies":["lucide-react"]}