1import styled from "styled-components";
 2
 3const Grid = styled.div`
 4  display: grid;
 5  grid-template-columns: repeat(3, 1fr);
 6  gap: 32px;
 7  max-width: 1200px;
 8  margin: 0 auto;
 9  padding: 80px 24px;
10`;
11
12const Card = styled.div`
13  border-left: 4px solid #8b5cf6;
14  border-radius: 16px;
15  background: #1a1a2e;
16  padding: 32px;
17  box-shadow: 0 0 25px rgba(139, 92, 246, 0.2);
18  transition: width 0.3s ease;
19`;
20
21const CardIcon = styled.div`
22  font-size: 40px;
23  margin-bottom: 16px;
24  animation: bounce 2s infinite;
25`;
26
27const CardTitle = styled.h3`
28  font-size: 20px;
29  font-weight: 700;
30  color: #a855f7;
31  margin-bottom: 8px;
32`;
33
34const CardDescription = styled.p`
35  font-size: 15px;
36  color: #6b7280;
37  line-height: 1.6;
38`;
39
40const features = [
41  { icon: "⚡", title: "Blazing Fast", description: "Optimized for speed with edge-first architecture." },
42  { icon: "🔒", title: "Secure by Default", description: "Enterprise-grade security with zero configuration." },
43  { icon: "📦", title: "Modular Design", description: "Pick and choose only what you need. No bloat." },
44];
45
46export function FeatureGrid() {
47  return (
48    <Grid>
49      {features.map((feature) => (
50        <Card key={feature.title}>
51          <CardIcon>{feature.icon}</CardIcon>
52          <CardTitle>{feature.title}</CardTitle>
53          <CardDescription>{feature.description}</CardDescription>
54        </Card>
55      ))}
56    </Grid>
57  );
58}