{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ecommerce-product-features-carousel-feature-showcase","type":"registry:block","title":"Carousel Feature Showcase","files":[{"path":"components/blocks/ecommerce/product-features/carousel-feature-showcase.tsx","content":"import { useState } from 'react';\n\nimport { ArrowLeft, ArrowRight, ChevronLeft, ChevronRight } from 'lucide-react';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { cn } from '@/lib/utils';\n\nexport default function CarouselFeatureShowcase() {\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  const features = [\n    {\n      id: 1,\n      title: 'Diamond-Cut Precision',\n      description:\n        'Each timepiece is meticulously crafted using state-of-the-art diamond-cutting techniques that create pristine edges and perfectly polished surfaces. Our 5-axis CNC machines achieve tolerances of just 0.01mm, ensuring every component fits together seamlessly.',\n      image:\n        'https://images.unsplash.com/photo-1623998021450-85c29c644e0d?q=80&w=1974&auto=format&fit=crop',\n      color: 'bg-slate-100 dark:bg-slate-800',\n      accent: 'text-slate-900 dark:text-slate-100',\n    },\n    {\n      id: 2,\n      title: 'Swiss Automatic Movement',\n      description:\n        'Powered by a Swiss-made automatic movement with 26 jewels, our watches offer exceptional accuracy and reliability. Each movement is meticulously assembled and regulated by master watchmakers, and features beautiful decoration including Geneva stripes and blue screws visible through the sapphire caseback.',\n      image:\n        'https://images.unsplash.com/photo-1523170335258-f5ed11844a49?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      color: 'bg-amber-100 dark:bg-amber-900',\n      accent: 'text-amber-900 dark:text-amber-100',\n    },\n    {\n      id: 3,\n      title: 'Sapphire Crystal',\n      description:\n        \"We use only the highest grade sapphire crystal with anti-reflective coating on both sides for optimal clarity. With a hardness of 9 on the Mohs scale, it's virtually scratch-proof and provides crystal clear visibility of the dial from any angle.\",\n      image:\n        'https://images.unsplash.com/photo-1587836374828-4dbafa94cf0e?q=80&w=1920&auto=format&fit=crop',\n      color: 'bg-blue-100 dark:bg-blue-900',\n      accent: 'text-blue-900 dark:text-blue-100',\n    },\n    {\n      id: 4,\n      title: 'Italian Leather Straps',\n      description:\n        'Our straps are hand-crafted from premium vegetable-tanned Italian leather, selected for its exceptional quality and comfort. Each strap is carefully stitched and finished, developing a beautiful patina over time that makes your timepiece truly unique.',\n      image:\n        'https://images.unsplash.com/photo-1614164185128-e4ec99c436d7?q=80&w=1974&auto=format&fit=crop',\n      color: 'bg-amber-50 dark:bg-amber-800',\n      accent: 'text-amber-900 dark:text-amber-50',\n    },\n    {\n      id: 5,\n      title: '200M Water Resistance',\n      description:\n        'Engineered for reliability in any environment, our timepieces feature triple-sealed crowns and specially designed gaskets that ensure water resistance to 200 meters. Every watch undergoes rigorous pressure testing to guarantee performance even in demanding conditions.',\n      image:\n        'https://images.unsplash.com/photo-1517463700628-5103184eac47?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      color: 'bg-sky-100 dark:bg-sky-900',\n      accent: 'text-sky-900 dark:text-sky-100',\n    },\n  ];\n\n  const nextSlide = () => {\n    setActiveIndex((current) =>\n      current === features.length - 1 ? 0 : current + 1\n    );\n  };\n\n  const prevSlide = () => {\n    setActiveIndex((current) =>\n      current === 0 ? features.length - 1 : current - 1\n    );\n  };\n\n  const goToSlide = (index: number) => {\n    setActiveIndex(index);\n  };\n\n  return (\n    <section className=\"bg-background w-full overflow-hidden py-12 md:py-24 lg:py-32\">\n      <div className=\"container mx-auto px-4 md:px-6 2xl:max-w-[1400px]\">\n        <div className=\"mb-8 flex flex-col items-center space-y-4 text-center md:mb-16\">\n          <Badge className=\"px-3.5 py-1.5\">Craftsmanship</Badge>\n          <h2 className=\"text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl\">\n            Exceptional watchmaking\n          </h2>\n          <p className=\"text-muted-foreground max-w-[700px] md:text-xl/relaxed\">\n            Every detail of our timepieces is engineered with precision and\n            crafted with passion.\n          </p>\n        </div>\n\n        <div className=\"relative mt-10\">\n          {/* Main carousel */}\n          <div className=\"relative overflow-hidden rounded-xl border dark:border-gray-700\">\n            <div\n              className=\"flex transition-transform duration-500 ease-out\"\n              style={{ transform: `translateX(-${activeIndex * 100}%)` }}\n            >\n              {features.map((feature) => (\n                <div key={feature.id} className=\"w-full flex-shrink-0\">\n                  <div\n                    className={cn('grid h-full md:grid-cols-2', feature.color)}\n                  >\n                    <div className=\"relative aspect-square md:aspect-auto\">\n                      <img\n                        src={feature.image}\n                        alt={feature.title}\n                        className=\"object-cover\"\n                        sizes=\"(max-width: 768px) 100vw, 50vw\"\n                      />\n                    </div>\n                    <div className=\"flex flex-col justify-center p-6 md:p-10\">\n                      <div className=\"space-y-4\">\n                        <h3\n                          className={cn(\n                            'text-2xl font-bold md:text-3xl',\n                            feature.accent\n                          )}\n                        >\n                          {feature.title}\n                        </h3>\n                        <p className=\"text-muted-foreground dark:text-gray-300\">\n                          {feature.description}\n                        </p>\n                        <div className=\"flex justify-start pt-4\">\n                          <Badge\n                            variant=\"outline\"\n                            className=\"text-xs dark:border-gray-600 dark:text-gray-300\"\n                          >\n                            Feature {feature.id} of {features.length}\n                          </Badge>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              ))}\n            </div>\n\n            {/* Navigation buttons */}\n            <button\n              onClick={prevSlide}\n              className=\"bg-background/80 hover:bg-background absolute top-1/2 left-4 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border shadow-sm backdrop-blur-sm dark:border-gray-700 dark:bg-gray-800/80 dark:hover:bg-gray-800\"\n              aria-label=\"Previous feature\"\n            >\n              <ChevronLeft className=\"h-5 w-5 dark:text-gray-300\" />\n            </button>\n            <button\n              onClick={nextSlide}\n              className=\"bg-background/80 hover:bg-background absolute top-1/2 right-4 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border shadow-sm backdrop-blur-sm dark:border-gray-700 dark:bg-gray-800/80 dark:hover:bg-gray-800\"\n              aria-label=\"Next feature\"\n            >\n              <ChevronRight className=\"h-5 w-5 dark:text-gray-300\" />\n            </button>\n          </div>\n\n          {/* Feature indicators */}\n          <div className=\"mt-6 flex justify-center gap-3\">\n            {features.map((_, index) => (\n              <button\n                key={index}\n                onClick={() => goToSlide(index)}\n                className={cn(\n                  'h-1.5 rounded-full transition-all duration-300',\n                  index === activeIndex\n                    ? 'bg-primary w-8'\n                    : 'bg-primary/30 dark:bg-primary/20 w-4'\n                )}\n                aria-label={`Go to feature ${index + 1}`}\n              />\n            ))}\n          </div>\n\n          {/* Feature thumbnails (visible on larger screens) */}\n          <div className=\"mt-6 hidden justify-center gap-4 md:flex\">\n            {features.map((feature, index) => (\n              <button\n                key={index}\n                onClick={() => goToSlide(index)}\n                className={cn(\n                  'relative h-16 w-16 overflow-hidden rounded-lg border transition-all dark:border-gray-700',\n                  index === activeIndex\n                    ? 'ring-primary ring-2 ring-offset-2 dark:ring-offset-gray-900'\n                    : 'opacity-70 hover:opacity-100'\n                )}\n                aria-label={`Go to feature ${index + 1}`}\n              >\n                <img\n                  src={feature.image}\n                  alt={feature.title}\n                  className=\"object-cover\"\n                  sizes=\"64px\"\n                />\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* CTA section */}\n        <div className=\"mt-16 flex flex-col items-center justify-center space-y-4\">\n          <p className=\"text-muted-foreground max-w-[600px] text-center dark:text-gray-300\">\n            Discover the perfect timepiece that combines exceptional\n            craftsmanship with timeless design.\n          </p>\n          <div className=\"flex flex-col gap-4 sm:flex-row\">\n            <Button asChild className=\"dark:hover:bg-primary/90\">\n              <a href=\"#\">\n                Explore Collection\n                <ArrowRight className=\"ml-2 h-4 w-4\" />\n              </a>\n            </Button>\n            <Button\n              variant=\"outline\"\n              asChild\n              className=\"dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800\"\n            >\n              <a href=\"#\">\n                <ArrowLeft className=\"mr-2 h-4 w-4\" />\n                Book a Consultation\n              </a>\n            </Button>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component","target":"components/blocks/ecommerce/product-features/carousel-feature-showcase.tsx"},{"path":"components/ui/badge.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"}],"description":"A swipeable carousel that steps through product features with image and copy per slide. Fits compact pages where space for many cards is tight.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}