1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Anti-Pattern: Massive Icons in Cards</title>
7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
8 <script src="https://unpkg.com/lucide@latest"></script>
9 <style>
10 * {
11 margin: 0;
12 padding: 0;
13 box-sizing: border-box;
14 }
15
16 body {
17 font-family: 'Inter', sans-serif;
18 min-height: 100vh;
19 background: #f8fafc;
20 padding: 40px;
21 }
22
23 .container {
24 max-width: 960px;
25 width: 100%;
26 margin: 0 auto;
27 background: #ffffff;
28 border-radius: 24px;
29 padding: 48px;
30 display: flex;
31 flex-direction: column;
32 position: relative;
33 box-shadow: 0 4px 24px rgba(0,0,0,0.08);
34 }
35
36 /* Header */
37 .header {
38 text-align: center;
39 margin-bottom: 40px;
40 }
41
42 .header h1 {
43 font-size: 32px;
44 font-weight: 700;
45 color: #0f172a;
46 margin-bottom: 12px;
47 }
48
49 .header p {
50 font-size: 16px;
51 color: #64748b;
52 }
53
54 /* Features grid */
55 .features {
56 display: grid;
57 grid-template-columns: repeat(3, 1fr);
58 gap: 24px;
59 flex: 1;
60 }
61
62 /* THE PROBLEM: Cards with massive left-aligned icons */
63 .feature-card {
64 background: #f8fafc;
65 border-radius: 16px;
66 padding: 28px;
67 display: flex;
68 flex-direction: column;
69 align-items: flex-start;
70 }
71
72 /* Oversized icon container */
73 .feature-icon {
74 width: 80px;
75 height: 80px;
76 background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
77 border-radius: 20px;
78 display: flex;
79 align-items: center;
80 justify-content: center;
81 margin-bottom: 20px;
82 }
83
84 .feature-icon svg {
85 width: 40px;
86 height: 40px;
87 stroke: #3b82f6;
88 stroke-width: 1.5;
89 }
90
91 /* Different colored backgrounds */
92 .feature-card:nth-child(2) .feature-icon {
93 background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
94 }
95 .feature-card:nth-child(2) .feature-icon svg { stroke: #a855f7; }
96
97 .feature-card:nth-child(3) .feature-icon {
98 background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
99 }
100 .feature-card:nth-child(3) .feature-icon svg { stroke: #22c55e; }
101
102 .feature-card:nth-child(4) .feature-icon {
103 background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
104 }
105 .feature-card:nth-child(4) .feature-icon svg { stroke: #f97316; }
106
107 .feature-card:nth-child(5) .feature-icon {
108 background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
109 }
110 .feature-card:nth-child(5) .feature-icon svg { stroke: #ec4899; }
111
112 .feature-card:nth-child(6) .feature-icon {
113 background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
114 }
115 .feature-card:nth-child(6) .feature-icon svg { stroke: #06b6d4; }
116
117 .feature-card h3 {
118 font-size: 18px;
119 font-weight: 700;
120 color: #0f172a;
121 margin-bottom: 8px;
122 text-align: left;
123 }
124
125 .feature-card p {
126 font-size: 14px;
127 color: #64748b;
128 line-height: 1.6;
129 text-align: left;
130 }
131
132
133 </style>
134</head>
135<body>
136 <div class="container">
137 <div class="header">
138 <h1>Why Choose Us</h1>
139 <p>Everything you need to build amazing products</p>
140 </div>
141
142 <div class="features">
143 <div class="feature-card">
144 <div class="feature-icon">
145 <i data-lucide="zap"></i>
146 </div>
147 <h3>Lightning Fast</h3>
148 <p>Built for speed and performance from the ground up.</p>
149 </div>
150
151 <div class="feature-card">
152 <div class="feature-icon">
153 <i data-lucide="shield"></i>
154 </div>
155 <h3>Secure</h3>
156 <p>Enterprise-grade security for your peace of mind.</p>
157 </div>
158
159 <div class="feature-card">
160 <div class="feature-icon">
161 <i data-lucide="refresh-cw"></i>
162 </div>
163 <h3>Automated</h3>
164 <p>Automate repetitive tasks and save time.</p>
165 </div>
166
167 <div class="feature-card">
168 <div class="feature-icon">
169 <i data-lucide="layers"></i>
170 </div>
171 <h3>Scalable</h3>
172 <p>Grows with your business needs seamlessly.</p>
173 </div>
174
175 <div class="feature-card">
176 <div class="feature-icon">
177 <i data-lucide="heart"></i>
178 </div>
179 <h3>User Friendly</h3>
180 <p>Intuitive interface that anyone can use.</p>
181 </div>
182
183 <div class="feature-card">
184 <div class="feature-icon">
185 <i data-lucide="bar-chart-3"></i>
186 </div>
187 <h3>Analytics</h3>
188 <p>Powerful insights to drive decisions.</p>
189 </div>
190 </div>
191
192 </div>
193
194 <script>
195 lucide.createIcons();
196 </script>
197<script src="/js/detect-antipatterns-browser.js"></script>
198</body>
199</html>