Component Details

1import { Zap, Smartphone, Wrench, TrendingUp } from "lucide-react";
2
3export function FeaturesSection() {
4  return (
5    <section className="py-20 md:py-28">
6      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
7        <div className="text-center mb-16">
8          <h2 className="text-3xl md:text-4xl font-bold mb-4">
9            Everything You Need to Build Fast
10          </h2>
11          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
12            Premium features without the premium price tag
13          </p>
14        </div>
15
16        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
17          <div className="text-center space-y-4 p-6 rounded-lg border border-gray-700 bg-card hover:shadow-lg transition-shadow">
18            <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary/10">
19              <Zap className="h-6 w-6 text-primary" />
20            </div>
21            <h3 className="text-xl font-semibold">Blazing Fast</h3>
22            <p className="text-muted-foreground">
23              Built on Next.js 16 with App Router for optimal performance and SEO
24            </p>
25          </div>
26
27          <div className="text-center space-y-4 p-6 rounded-lg border border-gray-700 bg-card hover:shadow-lg transition-shadow">
28            <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary/10">
29              <Smartphone className="h-6 w-6 text-primary" />
30            </div>
31            <h3 className="text-xl font-semibold">Fully Responsive</h3>
32            <p className="text-muted-foreground">
33              Looks perfect on every device, from mobile to desktop
34            </p>
35          </div>
36
37          <div className="text-center space-y-4 p-6 rounded-lg border border-gray-700 bg-card hover:shadow-lg transition-shadow">
38            <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary/10">
39              <Wrench className="h-6 w-6 text-primary" />
40            </div>
41            <h3 className="text-xl font-semibold">Easy to Customize</h3>
42            <p className="text-muted-foreground">
43              Clean, well-structured code with Tailwind CSS and UI components
44            </p>
45          </div>
46
47          <div className="text-center space-y-4 p-6 rounded-lg border border-gray-700 bg-card hover:shadow-lg transition-shadow">
48            <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary/10">
49              <TrendingUp className="h-6 w-6 text-primary" />
50            </div>
51            <h3 className="text-xl font-semibold">SEO Ready</h3>
52            <p className="text-muted-foreground">
53              Optimized for search engines with proper meta tags and structure
54            </p>
55          </div>
56        </div>
57      </div>
58    </section>
59  );
60}