{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"features-01","type":"registry:component","title":"Features 01","description":"A comprehensive features section with grid layout showcasing platform capabilities. Features 8 feature cards with icons, titles, descriptions, and call-to-action buttons in a responsive grid. Includes header with badge, title, description, and bottom action buttons. Perfect for SaaS platforms, technology companies, and service providers highlighting key product features and capabilities.","dependencies":["lucide-react"],"registryDependencies":["badge","button","card"],"files":[{"path":"src/registry/blocks/marketing/landing-pages/features/features-01.tsx","content":"\"use client\";\n\nimport {\n  ArrowRight,\n  BarChart3,\n  Cloud,\n  Code2,\n  Compass,\n  Database,\n  Lock,\n  Settings,\n  Zap,\n} from \"lucide-react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Button } from \"@/registry/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/ui/card\";\n\nexport interface Features01Props {\n  className?: string;\n}\n\nexport function Features01({ className }: Features01Props = {}) {\n  const features = [\n    {\n      icon: Cloud,\n      title: \"Cloud Infrastructure\",\n      description:\n        \"Deploy your applications on our global cloud network with 99.9% uptime and automatic scaling.\",\n    },\n    {\n      icon: Lock,\n      title: \"Enterprise Security\",\n      description:\n        \"Bank-level security with end-to-end encryption, two-factor authentication, and SOC 2 compliance.\",\n    },\n    {\n      icon: Zap,\n      title: \"Lightning Performance\",\n      description:\n        \"Optimized for speed with edge caching, image optimization, and global CDN distribution.\",\n    },\n    {\n      icon: Code2,\n      title: \"Developer Experience\",\n      description:\n        \"Comprehensive API documentation, SDKs for major languages, and interactive playground.\",\n    },\n    {\n      icon: BarChart3,\n      title: \"Advanced Analytics\",\n      description:\n        \"Real-time insights with customizable dashboards, event tracking, and conversion funnels.\",\n    },\n    {\n      icon: Database,\n      title: \"Scalable Storage\",\n      description:\n        \"Store and retrieve any amount of data with our distributed database and object storage.\",\n    },\n    {\n      icon: Settings,\n      title: \"Powerful Integrations\",\n      description:\n        \"Connect with your favorite tools through our extensive library of pre-built integrations.\",\n    },\n    {\n      icon: Compass,\n      title: \"AI-Powered Tools\",\n      description:\n        \"Leverage machine learning for content recommendations, user segmentation, and automation.\",\n    },\n  ];\n\n  return (\n    <section className={cn(\"py-24 bg-muted/30\", className)}>\n      <div className=\"container px-4 mx-auto\">\n        <div className=\"text-center mb-16\">\n          <Badge variant=\"outline\" className=\"mb-4\">\n            Powerful Features\n          </Badge>\n          <h2 className=\"text-3xl md:text-4xl font-bold mb-4\">\n            Everything you need to build modern apps\n          </h2>\n          <p className=\"text-xl text-muted-foreground max-w-3xl mx-auto\">\n            Our platform provides all the tools and infrastructure you need to\n            build, deploy, and scale your applications.\n          </p>\n        </div>\n\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n          {features.map((feature, index) => (\n            <Card\n              key={index}\n              className=\"border-border bg-background hover:shadow-md transition-all duration-300\"\n            >\n              <CardHeader>\n                <div className=\"p-2 w-12 h-12 rounded-lg bg-primary/10 mb-4 flex items-center justify-center\">\n                  <feature.icon className=\"h-6 w-6 text-primary\" />\n                </div>\n                <CardTitle>{feature.title}</CardTitle>\n              </CardHeader>\n              <CardContent>\n                <CardDescription className=\"text-muted-foreground\">\n                  {feature.description}\n                </CardDescription>\n              </CardContent>\n              <CardFooter>\n                <Button variant=\"ghost\" size=\"sm\" className=\"group\">\n                  Learn more\n                  <ArrowRight className=\"ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform\" />\n                </Button>\n              </CardFooter>\n            </Card>\n          ))}\n        </div>\n\n        <div className=\"text-center mt-16\">\n          <Button size=\"lg\" className=\"mr-4\">\n            Get Started\n          </Button>\n          <Button variant=\"outline\" size=\"lg\">\n            View Documentation\n          </Button>\n        </div>\n      </div>\n    </section>\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"}]}