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: Purple Gradients Everywhere</title>
7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 box-sizing: border-box;
13 }
14
15 body {
16 font-family: 'Inter', sans-serif;
17 min-height: 100vh;
18 background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 50%, #1a0a2e 100%);
19 color: white;
20 padding: 40px;
21 }
22
23 .container {
24 max-width: 960px;
25 width: 100%;
26 margin: 0 auto;
27 background: linear-gradient(145deg, #2a1a4a 0%, #1a0a2e 100%);
28 border-radius: 32px;
29 padding: 48px;
30 display: flex;
31 flex-direction: column;
32 position: relative;
33 overflow: hidden;
34 }
35
36 /* Purple gradient orbs everywhere */
37 .orb {
38 position: absolute;
39 border-radius: 50%;
40 filter: blur(80px);
41 opacity: 0.6;
42 }
43 .orb-1 { width: 400px; height: 400px; background: linear-gradient(135deg, #8b5cf6, #a855f7); top: -100px; right: -100px; }
44 .orb-2 { width: 300px; height: 300px; background: linear-gradient(135deg, #7c3aed, #c084fc); bottom: -50px; left: -50px; }
45 .orb-3 { width: 200px; height: 200px; background: linear-gradient(135deg, #a855f7, #d946ef); top: 40%; left: 30%; }
46
47 .content {
48 position: relative;
49 z-index: 1;
50 flex: 1;
51 display: flex;
52 flex-direction: column;
53 }
54
55 /* Navigation */
56 nav {
57 display: flex;
58 justify-content: space-between;
59 align-items: center;
60 margin-bottom: 60px;
61 }
62
63 .logo {
64 font-size: 24px;
65 font-weight: 800;
66 background: linear-gradient(135deg, #a855f7, #ec4899);
67 -webkit-background-clip: text;
68 -webkit-text-fill-color: transparent;
69 }
70
71 .nav-links {
72 display: flex;
73 gap: 32px;
74 }
75
76 .nav-links a {
77 color: rgba(255,255,255,0.7);
78 text-decoration: none;
79 font-size: 14px;
80 }
81
82 .nav-cta {
83 background: linear-gradient(135deg, #8b5cf6, #a855f7) !important;
84 color: white !important;
85 padding: 10px 20px;
86 border-radius: 999px;
87 font-weight: 600;
88 }
89
90 /* Hero */
91 .hero {
92 flex: 1;
93 display: flex;
94 flex-direction: column;
95 justify-content: center;
96 text-align: center;
97 padding: 0 60px;
98 }
99
100 .badge {
101 display: inline-flex;
102 align-items: center;
103 gap: 8px;
104 background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.2));
105 border: 1px solid rgba(168, 85, 247, 0.4);
106 padding: 8px 16px;
107 border-radius: 999px;
108 font-size: 13px;
109 margin: 0 auto 24px;
110 color: #c4b5fd;
111 }
112
113 .badge::before {
114 content: '✨';
115 }
116
117 h1 {
118 font-size: 64px;
119 font-weight: 800;
120 line-height: 1.1;
121 margin-bottom: 24px;
122 background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 50%, #a855f7 100%);
123 -webkit-background-clip: text;
124 -webkit-text-fill-color: transparent;
125 }
126
127 .subtitle {
128 font-size: 20px;
129 color: rgba(255,255,255,0.6);
130 max-width: 500px;
131 margin: 0 auto 40px;
132 line-height: 1.6;
133 }
134
135 .cta-group {
136 display: flex;
137 gap: 16px;
138 justify-content: center;
139 }
140
141 .btn-primary {
142 background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c026d3 100%);
143 color: white;
144 padding: 16px 32px;
145 border-radius: 12px;
146 font-weight: 600;
147 font-size: 16px;
148 border: none;
149 cursor: pointer;
150 box-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
151 }
152
153 .btn-secondary {
154 background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.1));
155 border: 1px solid rgba(168, 85, 247, 0.5);
156 color: #c4b5fd;
157 padding: 16px 32px;
158 border-radius: 12px;
159 font-weight: 600;
160 font-size: 16px;
161 cursor: pointer;
162 }
163
164 /* Stats */
165 .stats {
166 display: flex;
167 justify-content: center;
168 gap: 60px;
169 margin-top: 60px;
170 padding-top: 40px;
171 border-top: 1px solid rgba(139, 92, 246, 0.3);
172 }
173
174 .stat {
175 text-align: center;
176 }
177
178 .stat-value {
179 font-size: 36px;
180 font-weight: 800;
181 background: linear-gradient(135deg, #a855f7, #ec4899);
182 -webkit-background-clip: text;
183 -webkit-text-fill-color: transparent;
184 }
185
186 .stat-label {
187 font-size: 14px;
188 color: rgba(255,255,255,0.5);
189 margin-top: 4px;
190 }
191
192
193 </style>
194</head>
195<body>
196 <div class="container">
197 <div class="orb orb-1"></div>
198 <div class="orb orb-2"></div>
199 <div class="orb orb-3"></div>
200
201 <div class="content">
202 <nav>
203 <div class="logo">Synthwave.ai</div>
204 <div class="nav-links">
205 <a href="#">Features</a>
206 <a href="#">Pricing</a>
207 <a href="#">About</a>
208 <a href="#" class="nav-cta">Get Started</a>
209 </div>
210 </nav>
211
212 <div class="hero">
213 <span class="badge">New: AI-Powered Everything</span>
214 <h1>Build the Future<br>With AI Magic</h1>
215 <p class="subtitle">Transform your workflow with our revolutionary AI platform. Purple gradients included.</p>
216 <div class="cta-group">
217 <button class="btn-primary">Start Free Trial</button>
218 <button class="btn-secondary">Watch Demo</button>
219 </div>
220
221 <div class="stats">
222 <div class="stat">
223 <div class="stat-value">10K+</div>
224 <div class="stat-label">Active Users</div>
225 </div>
226 <div class="stat">
227 <div class="stat-value">99.9%</div>
228 <div class="stat-label">Uptime</div>
229 </div>
230 <div class="stat">
231 <div class="stat-value">50M+</div>
232 <div class="stat-label">API Calls</div>
233 </div>
234 </div>
235 </div>
236 </div>
237
238 </div>
239<script src="/js/detect-antipatterns-browser.js"></script>
240</body>
241</html>