1"use client";
2
3import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
4import { Button } from "@/components/ui/button";
5import { Badge } from "@/components/ui/badge";
6import { Code, Palette, Zap, Shield, Users, BarChart } from "lucide-react";
7
8export function FeatureBlock3() {
9  const features = [
10    {
11      icon: Code,
12      title: "Developer Tools",
13      description:
14        "Advanced code editor with syntax highlighting, auto-completion, and debugging tools.",
15      badge: "Popular",
16      badgeVariant: "default" as const,
17    },
18    {
19      icon: Palette,
20      title: "Design System",
21      description:
22        "Pre-built components and design tokens for consistent, beautiful user interfaces.",
23      badge: "New",
24      badgeVariant: "secondary" as const,
25    },
26    {
27      icon: Zap,
28      title: "Performance",
29      description:
30        "Optimized builds with code splitting, lazy loading, and automatic optimization.",
31      badge: "Fast",
32      badgeVariant: "outline" as const,
33    },
34    {
35      icon: Shield,
36      title: "Security",
37      description:
38        "Built-in security features including HTTPS, CSRF protection, and secure headers.",
39      badge: "Secure",
40      badgeVariant: "destructive" as const,
41    },
42    {
43      icon: Users,
44      title: "Collaboration",
45      description:
46        "Real-time collaboration tools for teams with role-based access control.",
47      badge: "Team",
48      badgeVariant: "secondary" as const,
49    },
50    {
51      icon: BarChart,
52      title: "Analytics",
53      description:
54        "Comprehensive analytics and monitoring with custom dashboards and alerts.",
55      badge: "Insights",
56      badgeVariant: "outline" as const,
57    },
58  ];
59
60  return (
61    <section className="w-full py-20 md:py-32">
62      <div className="container mx-auto px-4 md:px-6">
63        <div className="text-center space-y-4 mb-16">
64          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
65            Powerful Features for Modern Development
66          </h2>
67          <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
68            Everything you need to build, deploy, and scale your applications
69            with confidence and ease.
70          </p>
71        </div>
72
73        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
74          {features.map((feature, index) => (
75            <Card
76              key={index}
77              className="group hover:shadow-lg transition-all duration-300 border-2 hover:border-primary/20"
78            >
79              <CardHeader className="space-y-4">
80                <div className="flex items-center justify-between">
81                  <div className="p-3 bg-primary/10 rounded-full group-hover:bg-primary/20 transition-colors">
82                    <feature.icon className="h-6 w-6 text-primary" />
83                  </div>
84                  <Badge variant={feature.badgeVariant}>{feature.badge}</Badge>
85                </div>
86                <CardTitle className="text-xl">{feature.title}</CardTitle>
87              </CardHeader>
88              <CardContent className="space-y-4">
89                <p className="text-muted-foreground">{feature.description}</p>
90                <Button
91                  variant="ghost"
92                  size="sm"
93                  className="w-full group-hover:bg-primary/10"
94                >
95                  Learn More
96                </Button>
97              </CardContent>
98            </Card>
99          ))}
100        </div>
101
102        <div className="text-center mt-16">
103          <Button size="lg" className="gap-2">
104            Explore All Features
105          </Button>
106        </div>
107      </div>
108    </section>
109  );
110}