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:T4911,import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip'; import { cn } from '@/lib/utils'; import { useEffect, useState } from 'react'; import { Activity, AlertTriangle, ArrowRight, BellRing, BookOpen, Building2, CheckCircle2, CloudCog, Code2, Cog, Computer, Database, Fingerprint, Gauge, Highlighter, Image, Layers, LineChart, Lock, Microscope, Network, Palette, RefreshCcw, Rocket, Search, Shield, Smartphone, Stars, Tablet, Upload, Users, Wand2, Zap, } from 'lucide-react'; interface IconFeature { id: string; name: string; icon: React.ReactNode; description: string; highlight?: string; info?: string[]; color: string; } export default function IconsWithTooltips() { const setMounted = useState(false)[1]; // Ensure tooltips work only on client side useEffect(() => { setMounted(true); }, []); const iconFeatures: IconFeature[] = [ { id: 'security', name: 'Enterprise Security', icon: , description: 'Military-grade protection for your most sensitive data', highlight: 'SOC 2 Type II and GDPR compliant', info: [ 'End-to-end encryption for all data', 'Advanced threat detection', 'Regular security audits and penetration testing', 'Role-based access controls', ], color: 'red', }, { id: 'performance', name: 'Lightning Fast', icon: , description: 'Blazing fast performance with optimized algorithms', highlight: '100ms average response time', info: [ 'Global edge network for minimal latency', 'Automatic caching mechanisms', 'Optimized database queries', 'Performance monitoring and alerts', ], color: 'amber', }, { id: 'responsive', name: 'Fully Responsive', icon: , description: 'Perfect user experiences across all devices', highlight: 'Mobile-first design approach', info: [ 'Adaptive layouts for any screen size', 'Touch-optimized interactions', 'Responsive images and media', 'Consistent performance on all devices', ], color: 'blue', }, { id: 'analytics', name: 'Advanced Analytics', icon: , description: 'Gain deep insights into your business performance', highlight: 'Real-time data visualization', info: [ 'Custom dashboard creation', 'Predictive analytics powered by AI', 'Goal tracking and conversion funnels', 'Exportable reports in multiple formats', ], color: 'violet', }, { id: 'payments', name: 'Secure Payments', icon: , description: 'Accept payments securely with our payment gateway', highlight: 'PCI DSS Level 1 compliance', info: [ 'Support for 50+ payment methods', 'Anti-fraud detection systems', 'Subscription billing management', 'Split payments and marketplace capabilities', ], color: 'green', }, { id: 'uploads', name: 'Fast File Uploads', icon: , description: 'Upload and process files with ease', highlight: 'Drag-and-drop interface', info: [ 'Multi-file upload support', 'Auto-compression for images', 'Progress tracking and resumable uploads', 'Virus scanning and file validation', ], color: 'cyan', }, { id: 'search', name: 'Intelligent Search', icon: , description: 'Find what you need with our powerful search engine', highlight: 'Natural language processing', info: [ 'Typo-tolerant search algorithm', 'Contextual result ranking', 'Faceted search with filters', 'Search analytics to improve results', ], color: 'purple', }, { id: 'scaling', name: 'Infinite Scaling', icon: , description: 'Scale seamlessly as your business grows', highlight: 'Horizontal and vertical scaling', info: [ 'Auto-scaling infrastructure', 'Load balancing across regions', 'Database sharding for high volume', 'Performance maintained at any scale', ], color: 'indigo', }, { id: 'notifications', name: 'Smart Alerts', icon: , description: 'Stay informed with intelligent notifications', highlight: 'Customizable alert preferences', info: [ 'Real-time notifications across devices', 'Priority-based alert system', 'Scheduled and digest notifications', 'In-app and email delivery options', ], color: 'pink', }, { id: 'collaboration', name: 'Team Collaboration', icon: , description: 'Work together seamlessly with your team', highlight: 'Real-time document editing', info: [ 'Comment and feedback tools', 'Task assignment and tracking', 'Version history and change logs', 'Team activity dashboard', ], color: 'blue', }, { id: 'monitoring', name: 'System Monitoring', icon: , description: "Keep track of your system's health and performance", highlight: '24/7 automated monitoring', info: [ 'Custom alert thresholds', 'Incident response automation', 'Historical performance data', 'Root cause analysis tools', ], color: 'emerald', }, { id: 'biometric', name: 'Biometric Auth', icon: , description: 'Secure access with advanced biometric authentication', highlight: 'Facial and fingerprint recognition', info: [ 'Multi-factor authentication options', 'Liveness detection to prevent spoofing', 'Secure biometric data storage', 'Fallback authentication methods', ], color: 'orange', }, { id: 'ai', name: 'AI-Powered', icon: , description: 'Leverage artificial intelligence throughout the platform', highlight: 'Machine learning models', info: [ 'Predictive text and suggestions', 'Content moderation and filtering', 'Automated data categorization', 'Personalized user experiences', ], color: 'fuchsia', }, { id: 'customization', name: 'Deep Customization', icon: , description: 'Tailor the platform to your specific needs', highlight: 'No-code customization tools', info: [ 'Custom fields and data models', 'Workflow and automation builder', 'White-label branding options', 'Custom CSS and styling support', ], color: 'slate', }, { id: 'integrations', name: 'Seamless Integration', icon: , description: 'Connect with your favorite tools and services', highlight: '200+ pre-built integrations', info: [ 'Open API and webhook support', 'OAuth and SSO capabilities', 'Data sync across platforms', 'Custom integration development', ], color: 'sky', }, { id: 'backup', name: 'Automated Backups', icon: , description: 'Never lose your data with automatic backups', highlight: 'Point-in-time recovery', info: [ 'Daily automated backups', 'Geo-redundant storage', 'Encrypted backup files', 'One-click restoration process', ], color: 'rose', }, { id: 'documentation', name: 'Comprehensive Docs', icon: , description: 'Detailed documentation for all features', highlight: 'Interactive code examples', info: [ 'Step-by-step tutorials', 'Searchable knowledge base', 'API reference documentation', 'Video walkthroughs and demos', ], color: 'yellow', }, { id: 'media', name: 'Rich Media Support', icon: , description: 'Handle images, videos, and other media with ease', highlight: 'Automatic optimization', info: [ 'Image cropping and resizing', 'Video transcoding and streaming', 'Media CDN for fast delivery', 'Audio processing and captioning', ], color: 'lime', }, { id: 'speed', name: 'Performance Metrics', icon: , description: "Monitor and optimize your site's performance", highlight: 'Core Web Vitals tracking', info: [ 'Page load speed analysis', 'Resource utilization monitoring', 'Performance improvement suggestions', 'Lighthouse score integration', ], color: 'red', }, { id: 'multiplatform', name: 'Cross-Platform', icon: , description: 'Use on any device or operating system', highlight: 'Native apps for all platforms', info: [ 'iOS and Android mobile apps', 'Desktop applications', 'Progressive web app support', 'Offline functionality', ], color: 'teal', }, { id: 'seo', name: 'SEO Optimization', icon: , description: 'Improve your search engine rankings', highlight: 'Automated SEO suggestions', info: [ 'Metadata and schema markup', 'Semantic HTML structure', 'Performance optimization for ranking', 'SEO audit and reporting tools', ], color: 'blue', }, { id: 'support', name: '24/7 Support', icon: , description: 'Get help when you need it from our expert team', highlight: '10 minute average response time', info: [ 'Chat, email, and phone support', 'Dedicated customer success manager', 'Priority support for enterprise plans', 'Comprehensive help center', ], color: 'green', }, { id: 'designtools', name: 'Design Tools', icon: , description: 'Create beautiful interfaces with our design tools', highlight: 'Built-in design system', info: [ 'Component library and templates', 'Visual design editor', 'Theme customization', 'Accessibility compliance tools', ], color: 'pink', }, { id: 'devtools', name: 'Developer Tools', icon: , description: 'Powerful tools for developers to extend functionality', highlight: 'Comprehensive API access', info: [ 'SDK for multiple languages', 'CLI for automation tasks', 'Webhook management', 'Custom plugin development', ], color: 'indigo', }, { id: 'cloud', name: 'Cloud Infrastructure', icon: , description: 'Reliable and secure cloud hosting for your applications', highlight: '99.99% uptime guarantee', info: [ 'Distributed infrastructure', 'Automatic failover systems', 'Regional data compliance', 'Scalable compute resources', ], color: 'cyan', }, { id: 'errors', name: 'Error Monitoring', icon: , description: 'Catch and fix errors before they impact users', highlight: 'Real-time error tracking', info: [ 'Detailed error context', 'Error grouping and prioritization', 'Performance impact analysis', 'Integration with issue trackers', ], color: 'amber', }, { id: 'enterprise', name: 'Enterprise Ready', icon: , description: 'Features designed for large organization needs', highlight: 'SSO and SCIM provisioning', info: [ 'Enterprise legal agreements', 'Compliance certifications', 'Custom SLAs and support plans', 'Dedicated environment options', ], color: 'slate', }, { id: 'network', name: 'Global Network', icon: , description: 'Worldwide infrastructure for optimal performance', highlight: '30+ data centers globally', info: [ 'Regional routing optimization', 'DDoS protection included', 'Anycast DNS infrastructure', 'Low-latency global connectivity', ], color: 'violet', }, { id: 'automation', name: 'Workflow Automation', icon: , description: 'Automate routine tasks and business processes', highlight: 'Visual workflow builder', info: [ 'Trigger-based automation', 'Conditional logic and branching', 'Scheduled tasks and batching', 'Integration with external services', ], color: 'purple', }, { id: 'certified', name: 'Certified Quality', icon: , description: 'Industry-recognized quality and reliability', highlight: 'ISO 27001 certified', info: [ 'Regular quality audits', 'Comprehensive test coverage', 'Release quality metrics', 'Strict quality standards', ], color: 'green', }, { id: 'compatibility', name: 'Browser Compatibility', icon: , description: 'Works flawlessly across all modern browsers', highlight: 'IE11+ and all modern browsers', info: [ 'Cross-browser testing', 'Degradation graceful handling', 'Performance optimization for each browser', 'Mobile browser support', ], color: 'blue', }, { id: 'aifeatures', name: 'AI Features', icon: , description: 'Cutting-edge AI capabilities throughout the platform', highlight: 'GPT-4 powered assistance', info: [ 'Natural language processing', 'Image recognition and analysis', 'Predictive analytics', 'Automated content generation', ], color: 'fuchsia', }, ]; return (

Features

Powerful Capabilities at Your Fingertips

Discover all the features that make our platform stand out from the competition

{iconFeatures.map((feature) => (

{feature.icon}

{feature.name}

{feature.description}

{feature.highlight && (

{feature.highlight}

)}

{feature.info && feature.info.length > 0 && (

{item}

)} ))}

); } 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 } 55:T83f,"use client" import * as React from "react" import { Tooltip as TooltipPrimitive } from "radix-ui" import { cn } from "@/lib/utils" function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps) { return ( ) } function Tooltip({ ...props }: React.ComponentProps) { return } function TooltipTrigger({ ...props }: React.ComponentProps) { return } function TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps) { return ( {children} ) } export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } 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-icons-with-tooltips.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/marketing-icon-sections-icons-with-tooltips","itemId":"@shadcn-ui-blocks/marketing-icon-sections-icons-with-tooltips"}],["$","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/icons-with-tooltips.tsx","content":"$52","type":"registry:component","target":"components/blocks/marketing/icon-sections/icons-with-tooltips.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"},{"path":"components/ui/tooltip.tsx","content":"$55","type":"registry:ui","target":"components/ui/tooltip.tsx"}]}]]}],"$L56"]}]

Icons With Tooltips

Installation

Files

components

Styles