1"use client";
2
3import { Card, CardContent } from "@/components/ui/card";
4import { Zap, Shield, Users, Smartphone, Globe, BarChart } from "lucide-react";
5
6export function FeatureBlock1() {
7  const features = [
8    {
9      icon: Zap,
10      title: "Lightning Fast",
11      description:
12        "Optimized for speed with global CDN and edge computing for instant loading times.",
13    },
14    {
15      icon: Shield,
16      title: "Secure by Default",
17      description:
18        "Enterprise-grade security with SSL certificates, DDoS protection, and regular backups.",
19    },
20    {
21      icon: Users,
22      title: "Team Collaboration",
23      description:
24        "Work together seamlessly with real-time editing, commenting, and version control.",
25    },
26    {
27      icon: Smartphone,
28      title: "Mobile Optimized",
29      description:
30        "Responsive design that looks perfect on all devices, from mobile to desktop.",
31    },
32    {
33      icon: Globe,
34      title: "Global Reach",
35      description:
36        "Deploy to multiple regions worldwide with automatic scaling and load balancing.",
37    },
38    {
39      icon: BarChart,
40      title: "Analytics Built-in",
41      description:
42        "Track performance, user behavior, and conversion rates with detailed analytics.",
43    },
44  ];
45
46  return (
47    <section className="w-full py-20 md:py-32">
48      <div className="container mx-auto px-4 md:px-6">
49        <div className="text-center space-y-4 mb-16">
50          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
51            Everything You Need to Succeed
52          </h2>
53          <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
54            Powerful features designed to help you build, deploy, and scale your
55            applications with confidence.
56          </p>
57        </div>
58
59        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
60          {features.map((feature, index) => (
61            <Card
62              key={index}
63              className="border-2 hover:border-primary/20 transition-colors"
64            >
65              <CardContent className="p-6 space-y-4">
66                <div className="p-3 bg-primary/10 rounded-full w-fit">
67                  <feature.icon className="h-6 w-6 text-primary" />
68                </div>
69                <h3 className="text-xl font-semibold">{feature.title}</h3>
70                <p className="text-muted-foreground">{feature.description}</p>
71              </CardContent>
72            </Card>
73          ))}
74        </div>
75      </div>
76    </section>
77  );
78}