{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"carousels-01","type":"registry:component","title":"Carousels 01","description":"An auto-scrolling tag carousel component with colorful category tags, icons, and smooth transitions. Features embla carousel with autoplay functionality, gradient fade effects on edges, responsive design, and customizable tag colors. Each tag includes an icon, text, link navigation, and hover effects with color transitions. Perfect for category navigation, product showcases, feature highlights, and content discovery sections requiring engaging visual presentation with smooth animations.","dependencies":["lucide-react","embla-carousel-autoplay"],"registryDependencies":["carousel"],"files":[{"path":"src/registry/blocks/marketing/landing-pages/carousels/carousels-01.tsx","content":"\"use client\";\n\nimport Autoplay from \"embla-carousel-autoplay\";\nimport {\n  ArrowUpRight,\n  BarChart3,\n  BookOpen,\n  Camera,\n  CreditCard,\n  FileText,\n  Gamepad2,\n  Heart,\n  MapPin,\n  MessageCircle,\n  Music,\n  Palette,\n  PenTool,\n  Rocket,\n  Shield,\n  Sparkles,\n  Star,\n  Users,\n  Zap,\n} from \"lucide-react\";\nimport Link from \"next/link\";\nimport { cn } from \"@/registry/lib/utils\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n} from \"@/registry/ui/carousel\";\n\nexport interface CarouselTag {\n  id: number;\n  icon: React.ComponentType<{ className?: string }>;\n  text: string;\n  href: string;\n  bgColor: string;\n  hoverColor: string;\n}\n\nexport interface Carousels01Props {\n  className?: string;\n}\n\nconst content = {\n  tags: [\n    {\n      id: 1,\n      icon: Camera,\n      text: \"Media\",\n      href: \"/media\",\n      bgColor: \"bg-amber-100/80 text-amber-800\",\n      hoverColor: \"hover:bg-amber-200/90\",\n    },\n    {\n      id: 2,\n      icon: CreditCard,\n      text: \"Finance\",\n      href: \"/finance\",\n      bgColor: \"bg-cyan-100/80 text-cyan-800\",\n      hoverColor: \"hover:bg-cyan-200/90\",\n    },\n    {\n      id: 3,\n      icon: PenTool,\n      text: \"Writing\",\n      href: \"/writing\",\n      bgColor: \"bg-red-100/80 text-red-800\",\n      hoverColor: \"hover:bg-red-200/90\",\n    },\n    {\n      id: 4,\n      icon: Rocket,\n      text: \"Productivity\",\n      href: \"/productivity\",\n      bgColor: \"bg-blue-100/80 text-blue-800\",\n      hoverColor: \"hover:bg-blue-200/90\",\n    },\n    {\n      id: 5,\n      icon: Sparkles,\n      text: \"Cure Boredom\",\n      href: \"/entertainment\",\n      bgColor: \"bg-purple-100/80 text-purple-800\",\n      hoverColor: \"hover:bg-purple-200/90\",\n    },\n    {\n      id: 6,\n      icon: BookOpen,\n      text: \"Education\",\n      href: \"/education\",\n      bgColor: \"bg-green-100/80 text-green-800\",\n      hoverColor: \"hover:bg-green-200/90\",\n    },\n    {\n      id: 7,\n      icon: Heart,\n      text: \"Health\",\n      href: \"/health\",\n      bgColor: \"bg-pink-100/80 text-pink-800\",\n      hoverColor: \"hover:bg-pink-200/90\",\n    },\n    {\n      id: 8,\n      icon: Music,\n      text: \"Entertainment\",\n      href: \"/music\",\n      bgColor: \"bg-indigo-100/80 text-indigo-800\",\n      hoverColor: \"hover:bg-indigo-200/90\",\n    },\n    {\n      id: 9,\n      icon: Users,\n      text: \"Social\",\n      href: \"/social\",\n      bgColor: \"bg-orange-100/80 text-orange-800\",\n      hoverColor: \"hover:bg-orange-200/90\",\n    },\n    {\n      id: 10,\n      icon: Shield,\n      text: \"Security\",\n      href: \"/security\",\n      bgColor: \"bg-slate-100/80 text-slate-800\",\n      hoverColor: \"hover:bg-slate-200/90\",\n    },\n    {\n      id: 11,\n      icon: Gamepad2,\n      text: \"Gaming\",\n      href: \"/gaming\",\n      bgColor: \"bg-emerald-100/80 text-emerald-800\",\n      hoverColor: \"hover:bg-emerald-200/90\",\n    },\n    {\n      id: 12,\n      icon: BarChart3,\n      text: \"Analytics\",\n      href: \"/analytics\",\n      bgColor: \"bg-violet-100/80 text-violet-800\",\n      hoverColor: \"hover:bg-violet-200/90\",\n    },\n    {\n      id: 13,\n      icon: MapPin,\n      text: \"Travel\",\n      href: \"/travel\",\n      bgColor: \"bg-teal-100/80 text-teal-800\",\n      hoverColor: \"hover:bg-teal-200/90\",\n    },\n    {\n      id: 14,\n      icon: FileText,\n      text: \"Documents\",\n      href: \"/documents\",\n      bgColor: \"bg-rose-100/80 text-rose-800\",\n      hoverColor: \"hover:bg-rose-200/90\",\n    },\n    {\n      id: 15,\n      icon: MessageCircle,\n      text: \"Communication\",\n      href: \"/communication\",\n      bgColor: \"bg-sky-100/80 text-sky-800\",\n      hoverColor: \"hover:bg-sky-200/90\",\n    },\n    {\n      id: 16,\n      icon: Palette,\n      text: \"Design\",\n      href: \"/design\",\n      bgColor: \"bg-fuchsia-100/80 text-fuchsia-800\",\n      hoverColor: \"hover:bg-fuchsia-200/90\",\n    },\n    {\n      id: 17,\n      icon: Zap,\n      text: \"Automation\",\n      href: \"/automation\",\n      bgColor: \"bg-yellow-100/80 text-yellow-800\",\n      hoverColor: \"hover:bg-yellow-200/90\",\n    },\n    {\n      id: 18,\n      icon: Star,\n      text: \"Premium\",\n      href: \"/premium\",\n      bgColor: \"bg-amber-100/80 text-amber-900\",\n      hoverColor: \"hover:bg-amber-200/90\",\n    },\n  ] as CarouselTag[],\n};\n\nexport function Carousels01({ className }: Carousels01Props) {\n  return (\n    <div className={cn(\"relative w-full max-w-6xl mx-auto py-8\", className)}>\n      <div className=\"relative\">\n        {/* Left gradient overlay */}\n        <div className=\"absolute left-0 top-0 z-10 h-full w-32 bg-gradient-to-r from-background to-transparent pointer-events-none\" />\n\n        {/* Right gradient overlay */}\n        <div className=\"absolute right-0 top-0 z-10 h-full w-32 bg-gradient-to-l from-background to-transparent pointer-events-none\" />\n\n        <Carousel\n          className=\"w-full\"\n          plugins={[\n            Autoplay({\n              delay: 2000,\n            }),\n          ]}\n          opts={{\n            align: \"start\",\n            loop: true,\n            dragFree: true,\n          }}\n        >\n          <CarouselContent className=\"-ml-2 md:-ml-4\">\n            {content.tags.map((tag) => (\n              <CarouselItem key={tag.id} className=\"pl-2 md:pl-4 basis-auto\">\n                <Link href={tag.href} className=\"block\">\n                  <div\n                    className={`flex items-center gap-3 px-4 py-2 rounded-full transition-all duration-200 ${tag.bgColor} ${tag.hoverColor} group cursor-pointer`}\n                  >\n                    <tag.icon className=\"h-5 w-5 flex-shrink-0\" />\n                    <span className=\"text-sm font-medium whitespace-nowrap\">\n                      {tag.text}\n                    </span>\n                    <ArrowUpRight className=\"h-4 w-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" />\n                  </div>\n                </Link>\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n        </Carousel>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}