{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-icon-sections-horizontal-scrolling-icons","type":"registry:block","title":"Horizontal Scrolling Icons","files":[{"path":"components/blocks/marketing/icon-sections/horizontal-scrolling-icons.tsx","content":"import { useRef, useState, useEffect } from 'react';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { cn } from '@/lib/utils';\n\nimport {\n  ArrowLeft,\n  ArrowRight,\n  BarChart2,\n  CloudCog,\n  Code2,\n  Compass,\n  CreditCard,\n  Globe,\n  HardDrive,\n  MessageSquare,\n  PanelLeft,\n  PieChart,\n  RotateCcw,\n  ShieldCheck,\n  Smartphone,\n  Target,\n  Users,\n  Zap,\n} from 'lucide-react';\n\ninterface IconItem {\n  id: string;\n  icon: React.ReactNode;\n  title: string;\n  description: string;\n  color: string;\n  category: string;\n}\n\nexport default function HorizontalScrollingIcons() {\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n  const [scrollPosition, setScrollPosition] = useState(0);\n  const [maxScroll, setMaxScroll] = useState(0);\n  const [activeCategory, setActiveCategory] = useState<string>('all');\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n  const [scrollLeft, setScrollLeft] = useState(0);\n\n  const iconItems: IconItem[] = [\n    {\n      id: 'security',\n      icon: <ShieldCheck className=\"h-6 w-6\" />,\n      title: 'Enterprise Security',\n      description:\n        'Advanced protection with encryption, regular audits, and compliance controls.',\n      color: 'bg-blue-100 border-blue-200 text-blue-700',\n      category: 'security',\n    },\n    {\n      id: 'performance',\n      icon: <Zap className=\"h-6 w-6\" />,\n      title: 'Lightning Fast',\n      description:\n        'Optimized for speed with sub-second response times and efficient processing.',\n      color: 'bg-amber-100 border-amber-200 text-amber-700',\n      category: 'performance',\n    },\n    {\n      id: 'responsive',\n      icon: <Smartphone className=\"h-6 w-6\" />,\n      title: 'Fully Responsive',\n      description:\n        'Seamless experience across all devices, from mobile to desktop.',\n      color: 'bg-green-100 border-green-200 text-green-700',\n      category: 'design',\n    },\n    {\n      id: 'analytics',\n      icon: <BarChart2 className=\"h-6 w-6\" />,\n      title: 'Advanced Analytics',\n      description:\n        'Comprehensive data insights with visual reporting and trend analysis.',\n      color: 'bg-purple-100 border-purple-200 text-purple-700',\n      category: 'data',\n    },\n    {\n      id: 'payments',\n      icon: <CreditCard className=\"h-6 w-6\" />,\n      title: 'Secure Payments',\n      description:\n        'PCI-compliant payment processing with multiple gateway options.',\n      color: 'bg-indigo-100 border-indigo-200 text-indigo-700',\n      category: 'finance',\n    },\n    {\n      id: 'global',\n      icon: <Globe className=\"h-6 w-6\" />,\n      title: 'Global Reach',\n      description:\n        'Multilingual support with localized content and regional compliance.',\n      color: 'bg-cyan-100 border-cyan-200 text-cyan-700',\n      category: 'global',\n    },\n    {\n      id: 'integration',\n      icon: <Code2 className=\"h-6 w-6\" />,\n      title: 'API Integration',\n      description:\n        'Connect with your existing tools via our comprehensive API.',\n      color: 'bg-rose-100 border-rose-200 text-rose-700',\n      category: 'technical',\n    },\n    {\n      id: 'support',\n      icon: <MessageSquare className=\"h-6 w-6\" />,\n      title: '24/7 Support',\n      description:\n        'Round-the-clock assistance from our dedicated support team.',\n      color: 'bg-orange-100 border-orange-200 text-orange-700',\n      category: 'support',\n    },\n    {\n      id: 'cloud',\n      icon: <CloudCog className=\"h-6 w-6\" />,\n      title: 'Cloud Hosting',\n      description:\n        'Reliable infrastructure with auto-scaling and high availability.',\n      color: 'bg-slate-100 border-slate-200 text-slate-700',\n      category: 'technical',\n    },\n    {\n      id: 'team',\n      icon: <Users className=\"h-6 w-6\" />,\n      title: 'Team Collaboration',\n      description:\n        'Tools for seamless teamwork, sharing, and project management.',\n      color: 'bg-teal-100 border-teal-200 text-teal-700',\n      category: 'collaboration',\n    },\n    {\n      id: 'backup',\n      icon: <RotateCcw className=\"h-6 w-6\" />,\n      title: 'Automatic Backups',\n      description:\n        'Scheduled data backups with point-in-time recovery options.',\n      color: 'bg-pink-100 border-pink-200 text-pink-700',\n      category: 'security',\n    },\n    {\n      id: 'dashboard',\n      icon: <PanelLeft className=\"h-6 w-6\" />,\n      title: 'Custom Dashboard',\n      description:\n        'Personalized workspace with configurable widgets and views.',\n      color: 'bg-emerald-100 border-emerald-200 text-emerald-700',\n      category: 'design',\n    },\n    {\n      id: 'reporting',\n      icon: <PieChart className=\"h-6 w-6\" />,\n      title: 'Dynamic Reports',\n      description:\n        'Generate custom reports with advanced filtering and export options.',\n      color: 'bg-red-100 border-red-200 text-red-700',\n      category: 'data',\n    },\n    {\n      id: 'tracking',\n      icon: <Target className=\"h-6 w-6\" />,\n      title: 'Goal Tracking',\n      description:\n        'Set, monitor, and achieve business objectives with progress metrics.',\n      color: 'bg-violet-100 border-violet-200 text-violet-700',\n      category: 'performance',\n    },\n    {\n      id: 'storage',\n      icon: <HardDrive className=\"h-6 w-6\" />,\n      title: 'Secure Storage',\n      description: 'Encrypted data storage with flexible retention policies.',\n      color: 'bg-gray-100 border-gray-200 text-gray-700',\n      category: 'security',\n    },\n    {\n      id: 'navigation',\n      icon: <Compass className=\"h-6 w-6\" />,\n      title: 'Intuitive Navigation',\n      description:\n        'User-friendly interface designed for efficiency and clarity.',\n      color: 'bg-blue-100 border-blue-200 text-blue-700',\n      category: 'design',\n    },\n  ];\n\n  // Extract unique categories for filtering\n  const categories = [\n    'all',\n    ...Array.from(new Set(iconItems.map((item) => item.category))),\n  ];\n\n  // Filter icons based on active category\n  const filteredIcons =\n    activeCategory === 'all'\n      ? iconItems\n      : iconItems.filter((item) => item.category === activeCategory);\n\n  // Update scroll position and max scroll width\n  useEffect(() => {\n    const updateScrollValues = () => {\n      if (scrollContainerRef.current) {\n        const { scrollLeft, scrollWidth, clientWidth } =\n          scrollContainerRef.current;\n        setScrollPosition(scrollLeft);\n        setMaxScroll(scrollWidth - clientWidth);\n      }\n    };\n\n    updateScrollValues();\n\n    const container = scrollContainerRef.current;\n    if (container) {\n      container.addEventListener('scroll', updateScrollValues);\n      window.addEventListener('resize', updateScrollValues);\n    }\n\n    return () => {\n      if (container) {\n        container.removeEventListener('scroll', updateScrollValues);\n        window.removeEventListener('resize', updateScrollValues);\n      }\n    };\n  }, [activeCategory, filteredIcons]);\n\n  // Handle scroll buttons\n  const scroll = (direction: 'left' | 'right') => {\n    if (scrollContainerRef.current) {\n      const scrollAmount = 300; // Adjust scroll amount as needed\n      const newPosition =\n        direction === 'left'\n          ? Math.max(0, scrollPosition - scrollAmount)\n          : Math.min(maxScroll, scrollPosition + scrollAmount);\n\n      scrollContainerRef.current.scrollTo({\n        left: newPosition,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  // Mouse events for drag scrolling\n  const handleMouseDown = (e: React.MouseEvent) => {\n    setIsDragging(true);\n    setStartX(e.pageX - (scrollContainerRef.current?.offsetLeft || 0));\n    setScrollLeft(scrollContainerRef.current?.scrollLeft || 0);\n  };\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (!isDragging) return;\n    e.preventDefault();\n\n    if (scrollContainerRef.current) {\n      const x = e.pageX - (scrollContainerRef.current.offsetLeft || 0);\n      const walk = (x - startX) * 2; // Scroll speed multiplier\n      scrollContainerRef.current.scrollLeft = scrollLeft - walk;\n    }\n  };\n\n  const handleMouseUpOrLeave = () => {\n    setIsDragging(false);\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-12 flex flex-col items-center justify-center space-y-4 text-center\">\n          <Badge className=\"px-3.5 py-1.5\">Features</Badge>\n          <h2 className=\"text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl\">\n            Packed with powerful features\n          </h2>\n          <p className=\"text-muted-foreground max-w-[700px] md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed\">\n            Explore our comprehensive suite of features designed to enhance your\n            productivity and streamline your workflow.\n          </p>\n        </div>\n\n        {/* Category Filter */}\n        <div className=\"mb-8 flex flex-wrap justify-center gap-2\">\n          {categories.map((category) => (\n            <Button\n              key={category}\n              variant={activeCategory === category ? 'default' : 'outline'}\n              size=\"sm\"\n              onClick={() => setActiveCategory(category)}\n              className=\"capitalize\"\n            >\n              {category}\n            </Button>\n          ))}\n        </div>\n\n        {/* Horizontal Scrolling Container with Navigation */}\n        <div className=\"relative mt-10 pb-4\">\n          {/* Left Scroll Button */}\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className={cn(\n              'bg-background absolute top-1/2 -left-3 z-10 -translate-y-1/2 transform rounded-full shadow-md',\n              scrollPosition <= 5 && 'cursor-not-allowed opacity-50'\n            )}\n            onClick={() => scroll('left')}\n            disabled={scrollPosition <= 5}\n          >\n            <ArrowLeft className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Scroll left</span>\n          </Button>\n\n          {/* Scrollable Items Container */}\n          <div\n            ref={scrollContainerRef}\n            className={cn(\n              'scrollbar-hide flex overflow-x-auto px-1 py-4',\n              isDragging ? 'cursor-grabbing' : 'cursor-grab'\n            )}\n            style={{ scrollbarWidth: 'none' }}\n            onMouseDown={handleMouseDown}\n            onMouseMove={handleMouseMove}\n            onMouseUp={handleMouseUpOrLeave}\n            onMouseLeave={handleMouseUpOrLeave}\n          >\n            <div className=\"flex gap-4 px-3\">\n              {filteredIcons.map((item) => (\n                <div\n                  key={item.id}\n                  className={cn(\n                    'w-[280px] flex-shrink-0 rounded-xl border p-6 shadow-sm transition-all duration-200 hover:shadow-md',\n                    item.color\n                  )}\n                >\n                  <div className=\"flex items-start space-x-4\">\n                    <div className=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg bg-white\">\n                      {item.icon}\n                    </div>\n                    <div>\n                      <h3 className=\"mb-1 text-lg font-semibold\">\n                        {item.title}\n                      </h3>\n                      <p className=\"text-muted-foreground dark:text-muted text-sm\">\n                        {item.description}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* Right Scroll Button */}\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className={cn(\n              'bg-background absolute top-1/2 -right-3 z-10 -translate-y-1/2 transform rounded-full shadow-md',\n              scrollPosition >= maxScroll - 5 && 'cursor-not-allowed opacity-50'\n            )}\n            onClick={() => scroll('right')}\n            disabled={scrollPosition >= maxScroll - 5}\n          >\n            <ArrowRight className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Scroll right</span>\n          </Button>\n\n          {/* Scroll Indicators/Dots */}\n          <div className=\"mt-6 flex justify-center space-x-1\">\n            {Array.from({ length: Math.ceil(maxScroll / 300) + 1 }).map(\n              (_, index) => (\n                <div\n                  key={index}\n                  className={cn(\n                    'h-2 w-2 rounded-full transition-all duration-300',\n                    scrollPosition >= index * 300 &&\n                      scrollPosition < (index + 1) * 300\n                      ? 'bg-primary w-4'\n                      : 'bg-muted-foreground/30'\n                  )}\n                />\n              )\n            )}\n          </div>\n        </div>\n\n        {/* Feature Highlight */}\n        <div className=\"mt-20\">\n          <div className=\"mx-auto max-w-3xl text-center\">\n            <div className=\"bg-primary/10 mb-4 inline-flex items-center justify-center rounded-full p-1 px-3\">\n              <span className=\"text-primary text-sm font-medium\">\n                Why choose our platform?\n              </span>\n            </div>\n            <h3 className=\"mb-4 text-2xl font-bold\">\n              All the tools you need in one place\n            </h3>\n            <p className=\"text-muted-foreground mb-8\">\n              Our comprehensive platform brings together all the essential\n              features you need to succeed. From powerful analytics to seamless\n              integrations, we&apos;ve got you covered.\n            </p>\n            <Button asChild className=\"group\">\n              <a href=\"#\">\n                Explore all features\n                <ArrowRight className=\"ml-2 h-4 w-4 transition-transform group-hover:translate-x-1\" />\n              </a>\n            </Button>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/icon-sections/horizontal-scrolling-icons.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 horizontal strip of icon cards users swipe or scroll through. Fits many features in limited height and reads naturally on mobile screens.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}