{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ecommerce5",
  "title": "Featured Product Showcase",
  "description": "Full-featured product presentation with pricing, ratings, feature list, and add to cart. Split layout with configurable image position. Perfect for highlighting premium products and limited editions.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "registry/ecommerce5/ecommerce5.tsx",
      "content": "\"use client\";\n\nimport { ShoppingCart, Star } from \"lucide-react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport Link from \"next/link\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Ecommerce5Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\" | \"destructive\";\n  };\n  name?: string;\n  tagline?: string;\n  description?: string;\n  price?: number;\n  originalPrice?: number;\n  currency?: string;\n  image?: string;\n  rating?: number;\n  reviewCount?: number;\n  features?: string[];\n  ctaLabel?: string;\n  ctaHref?: string;\n  onAddToCart?: () => void;\n  imagePosition?: \"left\" | \"right\";\n  className?: string;\n}\n\nexport const ecommerce5Demo: Ecommerce5Props = {\n  badge: { label: \"Limited Edition\", variant: \"outline\" },\n  name: \"Artisan Coffee Table\",\n  tagline: \"Handcrafted with care\",\n  description:\n    \"A statement piece for your living room. Each table is individually crafted from sustainably sourced walnut, featuring organic curves and a hand-rubbed oil finish that highlights the natural grain.\",\n  price: 1299,\n  originalPrice: 1599,\n  currency: \"$\",\n  image:\n    \"https://images.unsplash.com/photo-1694679741124-cd87cf3f18aa?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mzl8fEFydGlzYW4lMjBDb2ZmZWUlMjBUYWJsZXxlbnwwfHwwfHx8MA%3D%3D\",\n  rating: 4.9,\n  reviewCount: 47,\n  features: [\n    \"Sustainably sourced American walnut\",\n    \"Hand-rubbed natural oil finish\",\n    \"Unique grain patterns on every piece\",\n    \"10-year craftsmanship warranty\",\n  ],\n  ctaLabel: \"Shop Now\",\n  ctaHref: \"https://beste.co\",\n  imagePosition: \"right\",\n};\n\nexport function Ecommerce5({\n  badge,\n  name,\n  tagline,\n  description,\n  price,\n  originalPrice,\n  currency = \"$\",\n  image,\n  rating,\n  reviewCount,\n  features = [],\n  ctaLabel = \"Add to Cart\",\n  ctaHref,\n  onAddToCart,\n  imagePosition = \"right\",\n  className,\n}: Ecommerce5Props) {\n  const discount = originalPrice\n    ? Math.round(((originalPrice - (price ?? 0)) / originalPrice) * 100)\n    : 0;\n\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-6xl px-4 md:px-6\">\n        <div\n          className={cn(\n            \"grid gap-8 items-start lg:grid-cols-2 lg:gap-12\",\n            imagePosition === \"left\" && \"lg:[&>*:first-child]:order-2\"\n          )}\n        >\n          {/* Content */}\n          <div>\n            {badge && (\n              <Badge className=\"mb-4\" variant={badge.variant ?? \"secondary\"}>\n                {badge.label}\n              </Badge>\n            )}\n\n            {tagline && (\n              <p className=\"text-sm font-medium uppercase tracking-wider text-muted-foreground\">\n                {tagline}\n              </p>\n            )}\n\n            {name && (\n              <h2 className=\"mt-2 text-3xl font-semibold md:text-4xl lg:text-5xl\">{name}</h2>\n            )}\n\n            {/* Rating */}\n            {rating && (\n              <div className=\"mt-4 flex items-center gap-2\">\n                <div className=\"flex\">\n                  {[...Array(5)].map((_, i) => (\n                    <Star\n                      key={i}\n                      className={cn(\n                        \"size-4\",\n                        i < Math.floor(rating)\n                          ? \"fill-yellow-400 text-yellow-400\"\n                          : \"text-muted-foreground/30\"\n                      )}\n                    />\n                  ))}\n                </div>\n                <span className=\"text-sm font-medium\">{rating}</span>\n                {reviewCount && (\n                  <span className=\"text-sm text-muted-foreground\">({reviewCount} reviews)</span>\n                )}\n              </div>\n            )}\n\n            {/* Price */}\n            <div className=\"mt-4 flex items-center gap-3\">\n              <span className=\"text-3xl font-bold\">\n                {currency}\n                {price}\n              </span>\n              {originalPrice && (\n                <>\n                  <span className=\"text-xl text-muted-foreground line-through\">\n                    {currency}\n                    {originalPrice}\n                  </span>\n                  <Badge variant=\"outline\">Save {discount}%</Badge>\n                </>\n              )}\n            </div>\n\n            {description && <p className=\"mt-6 text-lg text-foreground\">{description}</p>}\n\n            {/* Features */}\n            {features.length > 0 && (\n              <ul className=\"mt-6 space-y-2\">\n                {features.map((feature, index) => (\n                  <li key={index} className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"size-1.5 rounded-full bg-foreground\" />\n                    {feature}\n                  </li>\n                ))}\n              </ul>\n            )}\n\n            {/* CTA */}\n            <div className=\"mt-8 flex gap-3\">\n              <Button size=\"lg\" onClick={onAddToCart} asChild={!!ctaHref}>\n                {ctaHref ? (\n                  <Link href={ctaHref}>\n                    <ShoppingCart className=\"size-4\" />\n                    {ctaLabel}\n                  </Link>\n                ) : (\n                  <>\n                    <ShoppingCart className=\"size-4\" />\n                    {ctaLabel}\n                  </>\n                )}\n              </Button>\n            </div>\n          </div>\n\n          {/* Image */}\n          <div className=\"relative aspect-[3/3] overflow-hidden rounded-2xl bg-muted group/ecommerce5\">\n            {image && (\n              <img\n                src={image}\n                width={500}\n                height={500}\n                alt={name ?? \"Product Image\"}\n                className=\"size-full object-cover transition-transform duration-300 group-hover/ecommerce5:scale-105 w-full h-full\"\n              />\n            )}\n            {discount > 0 && (\n              <div className=\"absolute right-4 top-4 rounded-full bg-foreground px-3 py-1 text-sm font-semibold text-background\">\n                -{discount}%\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/ecommerce5.tsx"
    }
  ],
  "type": "registry:block"
}