4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T365a,import { useRef, useState, useEffect } from 'react'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { cn } from '@/lib/utils'; import { ArrowLeft, ArrowRight, BarChart2, CloudCog, Code2, Compass, CreditCard, Globe, HardDrive, MessageSquare, PanelLeft, PieChart, RotateCcw, ShieldCheck, Smartphone, Target, Users, Zap, } from 'lucide-react'; interface IconItem { id: string; icon: React.ReactNode; title: string; description: string; color: string; category: string; } export default function HorizontalScrollingIcons() { const scrollContainerRef = useRef(null); const [scrollPosition, setScrollPosition] = useState(0); const [maxScroll, setMaxScroll] = useState(0); const [activeCategory, setActiveCategory] = useState('all'); const [isDragging, setIsDragging] = useState(false); const [startX, setStartX] = useState(0); const [scrollLeft, setScrollLeft] = useState(0); const iconItems: IconItem[] = [ { id: 'security', icon: , title: 'Enterprise Security', description: 'Advanced protection with encryption, regular audits, and compliance controls.', color: 'bg-blue-100 border-blue-200 text-blue-700', category: 'security', }, { id: 'performance', icon: , title: 'Lightning Fast', description: 'Optimized for speed with sub-second response times and efficient processing.', color: 'bg-amber-100 border-amber-200 text-amber-700', category: 'performance', }, { id: 'responsive', icon: , title: 'Fully Responsive', description: 'Seamless experience across all devices, from mobile to desktop.', color: 'bg-green-100 border-green-200 text-green-700', category: 'design', }, { id: 'analytics', icon: , title: 'Advanced Analytics', description: 'Comprehensive data insights with visual reporting and trend analysis.', color: 'bg-purple-100 border-purple-200 text-purple-700', category: 'data', }, { id: 'payments', icon: , title: 'Secure Payments', description: 'PCI-compliant payment processing with multiple gateway options.', color: 'bg-indigo-100 border-indigo-200 text-indigo-700', category: 'finance', }, { id: 'global', icon: , title: 'Global Reach', description: 'Multilingual support with localized content and regional compliance.', color: 'bg-cyan-100 border-cyan-200 text-cyan-700', category: 'global', }, { id: 'integration', icon: , title: 'API Integration', description: 'Connect with your existing tools via our comprehensive API.', color: 'bg-rose-100 border-rose-200 text-rose-700', category: 'technical', }, { id: 'support', icon: , title: '24/7 Support', description: 'Round-the-clock assistance from our dedicated support team.', color: 'bg-orange-100 border-orange-200 text-orange-700', category: 'support', }, { id: 'cloud', icon: , title: 'Cloud Hosting', description: 'Reliable infrastructure with auto-scaling and high availability.', color: 'bg-slate-100 border-slate-200 text-slate-700', category: 'technical', }, { id: 'team', icon: , title: 'Team Collaboration', description: 'Tools for seamless teamwork, sharing, and project management.', color: 'bg-teal-100 border-teal-200 text-teal-700', category: 'collaboration', }, { id: 'backup', icon: , title: 'Automatic Backups', description: 'Scheduled data backups with point-in-time recovery options.', color: 'bg-pink-100 border-pink-200 text-pink-700', category: 'security', }, { id: 'dashboard', icon: , title: 'Custom Dashboard', description: 'Personalized workspace with configurable widgets and views.', color: 'bg-emerald-100 border-emerald-200 text-emerald-700', category: 'design', }, { id: 'reporting', icon: , title: 'Dynamic Reports', description: 'Generate custom reports with advanced filtering and export options.', color: 'bg-red-100 border-red-200 text-red-700', category: 'data', }, { id: 'tracking', icon: , title: 'Goal Tracking', description: 'Set, monitor, and achieve business objectives with progress metrics.', color: 'bg-violet-100 border-violet-200 text-violet-700', category: 'performance', }, { id: 'storage', icon: , title: 'Secure Storage', description: 'Encrypted data storage with flexible retention policies.', color: 'bg-gray-100 border-gray-200 text-gray-700', category: 'security', }, { id: 'navigation', icon: , title: 'Intuitive Navigation', description: 'User-friendly interface designed for efficiency and clarity.', color: 'bg-blue-100 border-blue-200 text-blue-700', category: 'design', }, ]; // Extract unique categories for filtering const categories = [ 'all', ...Array.from(new Set(iconItems.map((item) => item.category))), ]; // Filter icons based on active category const filteredIcons = activeCategory === 'all' ? iconItems : iconItems.filter((item) => item.category === activeCategory); // Update scroll position and max scroll width useEffect(() => { const updateScrollValues = () => { if (scrollContainerRef.current) { const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current; setScrollPosition(scrollLeft); setMaxScroll(scrollWidth - clientWidth); } }; updateScrollValues(); const container = scrollContainerRef.current; if (container) { container.addEventListener('scroll', updateScrollValues); window.addEventListener('resize', updateScrollValues); } return () => { if (container) { container.removeEventListener('scroll', updateScrollValues); window.removeEventListener('resize', updateScrollValues); } }; }, [activeCategory, filteredIcons]); // Handle scroll buttons const scroll = (direction: 'left' | 'right') => { if (scrollContainerRef.current) { const scrollAmount = 300; // Adjust scroll amount as needed const newPosition = direction === 'left' ? Math.max(0, scrollPosition - scrollAmount) : Math.min(maxScroll, scrollPosition + scrollAmount); scrollContainerRef.current.scrollTo({ left: newPosition, behavior: 'smooth', }); } }; // Mouse events for drag scrolling const handleMouseDown = (e: React.MouseEvent) => { setIsDragging(true); setStartX(e.pageX - (scrollContainerRef.current?.offsetLeft || 0)); setScrollLeft(scrollContainerRef.current?.scrollLeft || 0); }; const handleMouseMove = (e: React.MouseEvent) => { if (!isDragging) return; e.preventDefault(); if (scrollContainerRef.current) { const x = e.pageX - (scrollContainerRef.current.offsetLeft || 0); const walk = (x - startX) * 2; // Scroll speed multiplier scrollContainerRef.current.scrollLeft = scrollLeft - walk; } }; const handleMouseUpOrLeave = () => { setIsDragging(false); }; return (

Features

Packed with powerful features

Explore our comprehensive suite of features designed to enhance your productivity and streamline your workflow.

{/* Category Filter */}

{categories.map((category) => ( ))}

{/* Horizontal Scrolling Container with Navigation */}

{/* Left Scroll Button */} {/* Scrollable Items Container */}

{filteredIcons.map((item) => (

{item.icon}

{item.title}

{item.description}

))}

{/* Right Scroll Button */} {/* Scroll Indicators/Dots */}

{Array.from({ length: Math.ceil(maxScroll / 300) + 1 }).map( (_, index) => (

= index * 300 && scrollPosition < (index + 1) * 300 ? 'bg-primary w-4' : 'bg-muted-foreground/30' )} /> ) )}

{/* Feature Highlight */}

Why choose our platform?

All the tools you need in one place

Our comprehensive platform brings together all the essential features you need to succeed. From powerful analytics to seamless integrations, we've got you covered.

); } 53:T749,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const badgeVariants = cva( "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!", { variants: { variant: { default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80", destructive: "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", outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50", link: "text-primary underline-offset-4 hover:underline", }, }, defaultVariants: { variant: "default", }, } ) function Badge({ className, variant = "default", asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "span" return ( ) } export { Badge, badgeVariants } 54:Td06,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const buttonVariants = cva( "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", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/80", outline: "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", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground", ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50", destructive: "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", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "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", 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", 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", lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", icon: "size-9", "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3", "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md", "icon-lg": "size-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) function Button({ className, variant = "default", size = "default", asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "button" return ( ) } export { Button, buttonVariants } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","radix-ui",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://www.shadcn-ui-blocks.com/r/marketing-icon-sections-horizontal-scrolling-icons.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/marketing-icon-sections-horizontal-scrolling-icons","itemId":"@shadcn-ui-blocks/marketing-icon-sections-horizontal-scrolling-icons"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"components/blocks/marketing/icon-sections/horizontal-scrolling-icons.tsx","content":"$52","type":"registry:component","target":"components/blocks/marketing/icon-sections/horizontal-scrolling-icons.tsx"},{"path":"components/ui/badge.tsx","content":"$53","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/button.tsx","content":"$54","type":"registry:ui","target":"components/ui/button.tsx"}]}]]}],"$L55"]}]

Horizontal Scrolling Icons

Installation

Files

components

Styles