Hugging Face's logo

Spaces:
saurav384
/
Meta_SAAS_Upgrade
Sleeping

App Files Community
saurav384 commited on
Commit
fcd0210
·
verified ·
1 Parent(s): 8a9df55

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +685 -0
index.html ADDED
@@ -0,0 +1,685 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>AI-Powered Meta Ads Intelligence & Optimization Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
11
+
12
+ * {
13
+ font-family: 'Inter', sans-serif;
14
+ }
15
+
16
+ .gradient-bg {
17
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
+ }
19
+
20
+ .glass-effect {
21
+ background: rgba(255, 255, 255, 0.1);
22
+ backdrop-filter: blur(20px);
23
+ border: 1px solid rgba(255, 255, 255, 0.2);
24
+ }
25
+
26
+ .pulse-glow {
27
+ box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
28
+ }
29
+
30
+ .animate-float {
31
+ animation: float 6s ease-in-out infinite;
32
+ }
33
+
34
+ @keyframes float {
35
+ 0%, 100% { transform: translateY(0px); }
36
+ 50% { transform: translateY(-10px); }
37
+ }
38
+
39
+ .gradient-text {
40
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
41
+ -webkit-background-clip: text;
42
+ -webkit-text-fill-color: transparent;
43
+ background-clip: text;
44
+ }
45
+
46
+ .card-hover {
47
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
48
+ }
49
+
50
+ .card-hover:hover {
51
+ transform: translateY(-8px);
52
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
53
+ }
54
+
55
+ .metric-card {
56
+ background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 min-h-screen overflow-x-hidden">
61
+ <!-- Navigation -->
62
+ <nav class="fixed w-full z-50 glass-effect backdrop-blur-xl border-b border-white/10">
63
+ <div class="max-w-7xl mx-auto px-6 py-4">
64
+ <div class="flex items-center justify-between">
65
+ <div class="flex items-center space-x-3">
66
+ <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
67
+ <span class="text-white font-bold text-xl">AI</span>
68
+ </div>
69
+ <span class="text-2xl font-bold gradient-text">MetaAds AI</span>
70
+ </div>
71
+ <div class="hidden md:flex items-center space-x-8">
72
+ <a href="#modules" class="text-white/80 hover:text-white transition-all duration-300 font-medium" onclick="openModule('modules')">Modules</a>
73
+ <a href="#predictor" class="text-white/80 hover:text-white transition-all duration-300 font-medium" onclick="openModule('predictor')">Predictor</a>
74
+ <a href="#competitors" class="text-white/80 hover:text-white transition-all duration-300 font-medium" onclick="openModule('competitors')">Competitors</a>
75
+ <a href="#fatigue" class="text-white/80 hover:text-white transition-all duration-300 font-medium" onclick="openModule('fatigue')">Fatigue</a>
76
+ <a href="#optimizer" class="text-white/80 hover:text-white transition-all duration-300 font-medium" onclick="openModule('optimizer')">Optimizer</a>
77
+ </div>
78
+ <button class="md:hidden text-white">
79
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
80
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
81
+ </svg>
82
+ </button>
83
+ </div>
84
+ </div>
85
+ </nav>
86
+
87
+ <!-- Hero Section -->
88
+ <section class="pt-32 pb-24 relative overflow-hidden">
89
+ <div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-pink-500/20 animate-pulse"></div>
90
+ <div class="max-w-7xl mx-auto px-6 text-center relative z-10">
91
+ <h1 class="text-5xl md:text-7xl font-bold text-white mb-8 leading-tight">
92
+ AI-Powered Meta Ads
93
+ <span class="block gradient-text text-6xl md:text-8xl">Intelligence Platform</span>
94
+ </h1>
95
+ <p class="text-xl md:text-2xl text-white/80 max-w-3xl mx-auto mb-12 leading-relaxed">
96
+ Predict performance, spy on competitors, detect ad fatigue, and optimize copy with
97
+ <span class="gradient-text font-semibold">enterprise-grade AI</span>
98
+ </p>
99
+ <div class="flex flex-col sm:flex-row gap-4 justify-center items-center max-w-2xl mx-auto">
100
+ <button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-12 py-4 rounded-2xl font-semibold text-lg card-hover shadow-2xl hover:shadow-purple-500/25 hover:scale-105 transition-all duration-300">
101
+ Start Free Trial
102
+ </button>
103
+ <button class="border-2 border-white/30 text-white px-12 py-4 rounded-2xl font-semibold text-lg backdrop-blur-sm card-hover hover:border-white/50 transition-all duration-300">
104
+ Watch Demo
105
+ </button>
106
+ </div>
107
+ </div>
108
+ <div class="absolute -bottom-40 right-0 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl animate-float"></div>
109
+ <div class="absolute -top-40 left-20 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl animate-pulse" style="animation-delay: -3s;"></div>
110
+ </section>
111
+
112
+ <!-- Features Overview -->
113
+ <section id="modules" class="py-32 relative">
114
+ <div class="max-w-7xl mx-auto px-6">
115
+ <div class="text-center mb-24">
116
+ <h2 class="text-4xl md:text-6xl font-bold text-white mb-6">4 Powerful AI Modules</h2>
117
+ <p class="text-xl text-white/80 max-w-2xl mx-auto">All integrated into one seamless platform</p>
118
+ </div>
119
+
120
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
121
+ <!-- Module A -->
122
+ <div class="group card-hover glass-effect rounded-3xl p-10 h-64 flex flex-col justify-between cursor-pointer" onclick="openModule('predictor')">
123
+ <div class="w-20 h-20 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
124
+ <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
125
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
126
+ </svg>
127
+ </div>
128
+ <div>
129
+ <h3 class="text-2xl font-bold text-white mb-2">Ad Performance Predictor</h3>
130
+ <p class="text-white/70 text-lg">AI scores your ads before launch</p>
131
+ </div>
132
+ <div class="text-right">
133
+ <span class="text-3xl font-bold gradient-text">A</span>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Module B -->
138
+ <div class="group card-hover glass-effect rounded-3xl p-10 h-64 flex flex-col justify-between cursor-pointer" onclick="openModule('competitors')">
139
+ <div class="w-20 h-20 bg-gradient-to-r from-green-500 to-green-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
140
+ <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
141
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M4.661 4.182l-1.504-.87M10.649 5.23l-.828 3.65"></path>
142
+ </svg>
143
+ </div>
144
+ <div>
145
+ <h3 class="text-2xl font-bold text-white mb-2">Competitor Intelligence</h3>
146
+ <p class="text-white/70 text-lg">Spy on winning ad strategies</p>
147
+ </div>
148
+ <div class="text-right">
149
+ <span class="text-3xl font-bold gradient-text">B</span>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Module C -->
154
+ <div class="group card-hover glass-effect rounded-3xl p-10 h-64 flex flex-col justify-between cursor-pointer" onclick="openModule('fatigue')">
155
+ <div class="w-20 h-20 bg-gradient-to-r from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
156
+ <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
157
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
158
+ </svg>
159
+ </div>
160
+ <div>
161
+ <h3 class="text-2xl font-bold text-white mb-2">Ad Fatigue Detector</h3>
162
+ <p class="text-white/70 text-lg">Prevent performance drops</p>
163
+ </div>
164
+ <div class="text-right">
165
+ <span class="text-3xl font-bold gradient-text">C</span>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Module D -->
170
+ <div class="group card-hover glass-effect rounded-3xl p-10 h-64 flex flex-col justify-between cursor-pointer" onclick="openModule('optimizer')">
171
+ <div class="w-20 h-20 bg-gradient-to-r from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
172
+ <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
173
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.5h3m1.5-3l-3-3 3-3 3 3-3 3z"></path>
174
+ </svg>
175
+ </div>
176
+ <div>
177
+ <h3 class="text-2xl font-bold text-white mb-2">AI Copy Optimizer</h3>
178
+ <p class="text-white/70 text-lg">Generate high-converting copy</p>
179
+ </div>
180
+ <div class="text-right">
181
+ <span class="text-3xl font-bold gradient-text">D</span>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </section>
187
+
188
+ <!-- Module A: Ad Performance Predictor -->
189
+ <section id="predictor" class="py-32 hidden relative">
190
+ <div class="max-w-6xl mx-auto px-6">
191
+ <div class="grid lg:grid-cols-2 gap-12 items-center mb-16">
192
+ <div>
193
+ <h2 class="text-5xl font-bold text-white mb-6 gradient-text">Ad Performance Predictor</h2>
194
+ <p class="text-xl text-white/80 mb-8">Get instant AI-powered performance predictions before launching your ads</p>
195
+ <div class="space-y-4 mb-12">
196
+ <div class="flex items-center space-x-4 text-white/70">
197
+ <div class="w-2 h-2 bg-green-400 rounded-full"></div>
198
+ <span>Performance Score (0-100)</span>
199
+ </div>
200
+ <div class="flex items-center space-x-4 text-white/70">
201
+ <div class="w-2 h-2 bg-yellow-400 rounded-full"></div>
202
+ <span>Risk Level Assessment</span>
203
+ </div>
204
+ <div class="flex items-center space-x-4 text-white/70">
205
+ <div class="w-2 h-2 bg-blue-400 rounded-full"></div>
206
+ <span>Optimization Recommendations</span>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ <div class="metric-card rounded-3xl p-10 shadow-2xl">
211
+ <div id="prediction-results" class="space-y-6 hidden">
212
+ <div class="grid grid-cols-3 gap-6">
213
+ <div class="text-center p-6 rounded-2xl bg-gradient-to-br from-green-400/10 to-green-500/10 border border-green-400/30">
214
+ <div class="text-4xl font-bold text-green-400 mb-2" id="perf-score">92</div>
215
+ <div class="text-sm font-semibold text-green-300 uppercase tracking-wide">Performance Score</div>
216
+ </div>
217
+ <div class="text-center p-6 rounded-2xl bg-gradient-to-br from-blue-400/10 to-blue-500/10 border border-blue-400/30">
218
+ <div class="text-4xl font-bold text-blue-400 mb-2" id="risk-level">LOW</div>
219
+ <div class="text-sm font-semibold text-blue-300 uppercase tracking-wide">Risk Level</div>
220
+ </div>
221
+ <div class="text-center p-6 rounded-2xl bg-gradient-to-br from-purple-400/10 to-purple-500/10 border border-purple-400/30">
222
+ <div class="text-3xl font-bold text-purple-400 mb-2" id="confidence">94%</div>
223
+ <div class="text-sm font-semibold text-purple-300 uppercase tracking-wide">Confidence</div>
224
+ </div>
225
+ </div>
226
+ <canvas id="perfChart" height="200"></canvas>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Input Form -->
232
+ <div class="metric-card rounded-3xl p-12 max-w-2xl mx-auto">
233
+ <h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">Analyze Your Ad</h3>
234
+ <form id="predictor-form" class="space-y-6">
235
+ <div>
236
+ <label class="block text-lg font-semibold text-gray-900 mb-3">Ad Copy</label>
237
+ <textarea id="ad-copy" rows="4" class="w-full p-6 rounded-2xl border-2 border-gray-200/50 focus:border-blue-400 focus:ring-4 focus:ring-blue-400/20 resize-vertical text-lg font-medium" placeholder="Enter your ad primary text...">Get 50% OFF your first order! Limited time offer. Fast shipping worldwide. Join 10K+ happy customers today!</textarea>
238
+ </div>
239
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
240
+ <div>
241
+ <label class="block text-lg font-semibold text-gray-900 mb-2">CTA</label>
242
+ <select id="cta" class="w-full p-4 rounded-xl border-2 border-gray-200/50 focus:border-blue-400 focus:ring-4 focus:ring-blue-400/20 text-lg">
243
+ <option>Shop Now</option>
244
+ <option>Learn More</option>
245
+ <option>Get Offer</option>
246
+ <option>Sign Up</option>
247
+ <option>Buy Now</option>
248
+ </select>
249
+ </div>
250
+ <div>
251
+ <label class="block text-lg font-semibold text-gray-900 mb-2">Industry</label>
252
+ <select id="industry" class="w-full p-4 rounded-xl border-2 border-gray-200/50 focus:border-blue-400 focus:ring-4 focus:ring-blue-400/20 text-lg">
253
+ <option>E-commerce</option>
254
+ <option>SaaS</option>
255
+ <option>Finance</option>
256
+ <option>Health</option>
257
+ <option>Education</option>
258
+ </select>
259
+ </div>
260
+ <div>
261
+ <label class="block text-lg font-semibold text-gray-900 mb-2">Country</label>
262
+ <select id="country" class="w-full p-4 rounded-xl border-2 border-gray-200/50 focus:border-blue-400 focus:ring-4 focus:ring-blue-400/20 text-lg">
263
+ <option>USA</option>
264
+ <option>UK</option>
265
+ <option>Canada</option>
266
+ <option>Australia</option>
267
+ <option>Germany</option>
268
+ </select>
269
+ </div>
270
+ <div class="flex items-end">
271
+ <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 px-6 rounded-2xl font-bold text-lg shadow-xl hover:shadow-purple-500/25 hover:scale-105 transition-all duration-300">
272
+ Predict Performance
273
+ </button>
274
+ </div>
275
+ </div>
276
+ </form>
277
+ </div>
278
+ </div>
279
+ </section>
280
+
281
+ <!-- Module B: Competitor Intelligence -->
282
+ <section id="competitors" class="py-32 hidden bg-white/5 backdrop-blur-sm">
283
+ <div class="max-w-6xl mx-auto px-6">
284
+ <div class="text-center mb-24">
285
+ <h2 class="text-5xl font-bold text-white mb-6 gradient-text">Competitor Ad Intelligence</h2>
286
+ <p class="text-xl text-white/80 max-w-3xl mx-auto">Real-time insights into competitor strategies across 100M+ ads</p>
287
+ </div>
288
+
289
+ <div class="grid lg:grid-cols-2 gap-12">
290
+ <!-- Keywords & CTA -->
291
+ <div class="space-y-8">
292
+ <div class="metric-card rounded-3xl p-8">
293
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Top Keywords by Niche</h3>
294
+ <div id="top-keywords" class="grid grid-cols-2 md:grid-cols-3 gap-4">
295
+ <!-- Dynamic keywords will be populated by JS -->
296
+ </div>
297
+ </div>
298
+ <div class="metric-card rounded-3xl p-8">
299
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">CTA Frequency</h3>
300
+ <canvas id="ctaChart" height="300"></canvas>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- Creative Formats & Trends -->
305
+ <div class="space-y-8">
306
+ <div class="metric-card rounded-3xl p-8">
307
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Creative Formats Used</h3>
308
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
309
+ <div class="text-center p-6 rounded-2xl hover:bg-blue-50/50 cursor-pointer transition-colors">
310
+ <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl mx-auto mb-4 flex items-center justify-center">
311
+ <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
312
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
313
+ </svg>
314
+ </div>
315
+ <div class="font-bold text-xl text-gray-900 mb-1">Video</div>
316
+ <div class="text-sm text-gray-600">67%</div>
317
+ </div>
318
+ <div class="text-center p-6 rounded-2xl hover:bg-green-50/50 cursor-pointer transition-colors">
319
+ <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl mx-auto mb-4 flex items-center justify-center">
320
+ <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
321
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
322
+ </svg>
323
+ </div>
324
+ <div class="font-bold text-xl text-gray-900 mb-1">Image</div>
325
+ <div class="text-sm text-gray-600">24%</div>
326
+ </div>
327
+ <div class="text-center p-6 rounded-2xl hover:bg-purple-50/50 cursor-pointer transition-colors">
328
+ <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl mx-auto mb-4 flex items-center justify-center">
329
+ <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
330
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
331
+ </svg>
332
+ </div>
333
+ <div class="font-bold text-xl text-gray-900 mb-1">Carousel</div>
334
+ <div class="text-sm text-gray-600">9%</div>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ <div class="metric-card rounded-3xl p-8">
339
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Trending Themes</h3>
340
+ <div class="space-y-3">
341
+ <div class="flex justify-between items-center p-4 bg-gradient-to-r from-orange-400/10 to-orange-500/10 rounded-xl border border-orange-400/30">
342
+ <span class="font-semibold text-gray-900">Limited Time Offers</span>
343
+ <span class="px-3 py-1 bg-orange-400 text-white text-xs font-bold rounded-full">↑ 43%</span>
344
+ </div>
345
+ <div class="flex justify-between items-center p-4 bg-gradient-to-r from-green-400/10 to-green-500/10 rounded-xl border border-green-400/30">
346
+ <span class="font-semibold text-gray-900">Social Proof</span>
347
+ <span class="px-3 py-1 bg-green-400 text-white text-xs font-bold rounded-full">↑ 28%</span>
348
+ </div>
349
+ <div class="flex justify-between items-center p-4 bg-gradient-to-r from-blue-400/10 to-blue-500/10 rounded-xl border border-blue-400/30">
350
+ <span class="font-semibold text-gray-900">Urgency Triggers</span>
351
+ <span class="px-3 py-1 bg-blue-400 text-white text-xs font-bold rounded-full">↑ 19%</span>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </section>
359
+
360
+ <!-- Module C: Ad Fatigue Detector -->
361
+ <section id="fatigue" class="py-32 hidden">
362
+ <div class="max-w-6xl mx-auto px-6">
363
+ <div class="text-center mb-24">
364
+ <h2 class="text-5xl font-bold text-white mb-6 gradient-text">Ad Fatigue Detector</h2>
365
+ <p class="text-xl text-white/80 max-w-3xl mx-auto">AI monitors your campaigns 24/7 for fatigue signals</p>
366
+ </div>
367
+
368
+ <div class="grid lg:grid-cols-2 gap-12">
369
+ <div class="metric-card rounded-3xl p-12">
370
+ <h3 class="text-3xl font-bold text-gray-900 mb-8">Fatigue Score</h3>
371
+ <canvas id="fatigueChart" height="400"></canvas>
372
+ <div class="mt-8 pt-8 border-t border-gray-200/50">
373
+ <div class="flex justify-between text-sm text-gray-600 mb-4">
374
+ <span>0</span>
375
+ <span>50</span>
376
+ <span>100</span>
377
+ </div>
378
+ <div class="w-full bg-gray-200 rounded-full h-3">
379
+ <div class="bg-gradient-to-r from-orange-400 to-red-500 h-3 rounded-full" style="width: 78%"></div>
380
+ </div>
381
+ <p class="text-sm text-gray-600 mt-2">Your campaigns are showing <span class="font-semibold text-orange-600">moderate fatigue risk</span></p>
382
+ </div>
383
+ </div>
384
+
385
+ <div class="space-y-6">
386
+ <div class="metric-card rounded-3xl p-8">
387
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Repetition Alerts</h3>
388
+ <div class="space-y-4">
389
+ <div class="flex items-center justify-between p-4 bg-red-50/50 border border-red-200/50 rounded-2xl">
390
+ <div>
391
+ <div class="font-bold text-lg text-red-600">High Repetition</div>
392
+ <div class="text-sm text-red-500">Ad ID: 12345AB</div>
393
+ </div>
394
+ <div class="text-2xl font-bold text-red-500">14 days</div>
395
+ </div>
396
+ <div class="flex items-center justify-between p-4 bg-yellow-50/50 border border-yellow-200/50 rounded-2xl">
397
+ <div>
398
+ <div class="font-bold text-lg text-yellow-600">Medium Repetition</div>
399
+ <div class="text-sm text-yellow-500">Ad ID: 67890CD</div>
400
+ </div>
401
+ <div class="text-2xl font-bold text-yellow-500">9 days</div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="metric-card rounded-3xl p-8">
407
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Creative Refresh Suggestions</h3>
408
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
409
+ <div class="p-6 border-2 border-dashed border-gray-300/50 rounded-2xl text-center hover:border-blue-400 transition-colors cursor-pointer">
410
+ <div class="w-16 h-16 bg-blue-100 rounded-2xl mx-auto mb-4 flex items-center justify-center">
411
+ <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
412
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
413
+ </svg>
414
+ </div>
415
+ <div class="font-semibold text-gray-900 mb-1">New Video Creative</div>
416
+ <div class="text-sm text-gray-600">Generate video variant</div>
417
+ </div>
418
+ <div class="p-6 border-2 border-dashed border-gray-300/50 rounded-2xl text-center hover:border-green-400 transition-colors cursor-pointer">
419
+ <div class="w-16 h-16 bg-green-100 rounded-2xl mx-auto mb-4 flex items-center justify-center">
420
+ <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
421
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.5h3m1.5-3l-3-3 3-3 3 3-3 3z"></path>
422
+ </svg>
423
+ </div>
424
+ <div class="font-semibold text-gray-900 mb-1">Copy Refresh</div>
425
+ <div class="text-sm text-gray-600">AI-optimized text</div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </section>
433
+
434
+ <!-- Module D: AI Ad Copy Optimizer -->
435
+ <section id="optimizer" class="py-32 hidden bg-white/5 backdrop-blur-sm">
436
+ <div class="max-w-6xl mx-auto px-6">
437
+ <div class="text-center mb-24">
438
+ <h2 class="text-5xl font-bold text-white mb-6 gradient-text">AI Ad Copy Optimizer</h2>
439
+ <p class="text-xl text-white/80 max-w-3xl mx-auto">Transform your copy with industry-leading AI optimization</p>
440
+ </div>
441
+
442
+ <div class="metric-card rounded-3xl p-12 max-w-4xl mx-auto">
443
+ <div class="grid lg:grid-cols-2 gap-12 items-start">
444
+ <div>
445
+ <h3 class="text-3xl font-bold text-gray-900 mb-8">Original Copy</h3>
446
+ <div class="bg-gray-50/50 p-8 rounded-2xl border-2 border-gray-200/50 min-h-[300px]">
447
+ <textarea id="original-copy" rows="12" class="w-full bg-transparent border-none outline-none text-lg font-medium text-gray-900 resize-none">Get 50% OFF your first order! Limited time offer. Fast shipping worldwide. Join 10K+ happy customers today! Don't miss out on this incredible deal.</textarea>
448
+ </div>
449
+ <button onclick="optimizeCopy()" class="mt-6 w-full bg-gradient-to-r from-purple-500 to-pink-600 text-white py-4 px-8 rounded-2xl font-bold text-lg shadow-xl hover:shadow-purple-500/25 hover:scale-105 transition-all duration-300">
450
+ ✨ Optimize with AI
451
+ </button>
452
+ </div>
453
+ <div>
454
+ <h3 class="text-3xl font-bold text-gray-900 mb-8">AI Optimized Copy <span class="text-sm font-normal text-green-600">(+47% predicted performance)</span></h3>
455
+ <div id="optimized-copy" class="bg-gradient-to-br from-emerald-50 to-green-50/50 p-8 rounded-2xl border-2 border-emerald-200/50 min-h-[300px] hidden">
456
+ <div class="space-y-6">
457
+ <div>
458
+ <div class="font-bold text-2xl text-emerald-800 mb-2 leading-tight">🎉 50% OFF Your First Order - Limited Spots!</div>
459
+ <div class="text-sm text-emerald-700 bg-emerald-200/50 px-4 py-2 rounded-xl inline-block">Primary Text</div>
460
+ </div>
461
+ <div>
462
+ <div class="font-bold text-xl text-gray-900 mb-2">⚡ Join 10K+ Happy Customers Today</div>
463
+ <div class="text-sm text-emerald-700 bg-emerald-200/50 px-4 py-2 rounded-xl inline-block">Headline</div>
464
+ </div>
465
+ <div>
466
+ <div class="font-bold text-xl text-blue-600 mb-2">🛒 Shop Now - Free Shipping Worldwide!</div>
467
+ <div class="text-sm text-emerald-700 bg-emerald-200/50 px-4 py-2 rounded-xl inline-block">CTA</div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ <div id="optimization-stats" class="mt-6 grid grid-cols-3 gap-4 hidden">
472
+ <div class="text-center p-4 bg-white/50 rounded-xl">
473
+ <div class="text-2xl font-bold text-emerald-600 mb-1">92</div>
474
+ <div class="text-xs text-gray-600 uppercase tracking-wide">Score</div>
475
+ </div>
476
+ <div class="text-center p-4 bg-white/50 rounded-xl">
477
+ <div class="text-2xl font-bold text-blue-600 mb-1">✓</div>
478
+ <div class="text-xs text-gray-600 uppercase tracking-wide">Tone Match</div>
479
+ </div>
480
+ <div class="text-center p-4 bg-white/50 rounded-xl">
481
+ <div class="text-2xl font-bold text-purple-600 mb-1">3.2x</div>
482
+ <div class="text-xs text-gray-600 uppercase tracking-wide">Engagement</div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </section>
490
+
491
+ <!-- Footer -->
492
+ <footer class="py-16 mt-32 border-t border-white/10">
493
+ <div class="max-w-7xl mx-auto px-6 text-center">
494
+ <div class="flex items-center justify-center space-x-3 mb-8">
495
+ <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
496
+ <span class="text-white font-bold text-lg">AI</span>
497
+ </div>
498
+ <span class="text-2xl font-bold gradient-text">MetaAds AI</span>
499
+ </div>
500
+ <p class="text-white/60 text-lg mb-8 max-w-2xl mx-auto">
501
+ The most advanced AI-powered Meta Ads intelligence and optimization platform
502
+ </p>
503
+ <div class="flex flex-wrap justify-center gap-6 text-white/70 text-sm">
504
+ <a href="#" class="hover:text-white transition-colors">Privacy</a>
505
+ <a href="#" class="hover:text-white transition-colors">Terms</a>
506
+ <a href="#" class="hover:text-white transition-colors">Security</a>
507
+ <a href="#" class="hover:text-white transition-colors">Support</a>
508
+ </div>
509
+ <p class="text-white/40 text-xs mt-8">&copy; 2024 MetaAds AI. All rights reserved.</p>
510
+ </div>
511
+ </footer>
512
+
513
+ <script>
514
+ // Smooth scrolling and module navigation
515
+ function openModule(moduleId) {
516
+ document.querySelectorAll('section[id]').forEach(section => {
517
+ section.classList.add('hidden');
518
+ });
519
+ document.getElementById(moduleId).classList.remove('hidden');
520
+ document.querySelector('.gradient-bg')?.scrollIntoView({ behavior: 'smooth' });
521
+ }
522
+
523
+ // Predictor Form Handler
524
+ document.getElementById('predictor-form').addEventListener('submit', function(e) {
525
+ e.preventDefault();
526
+ const results = document.getElementById('prediction-results');
527
+ results.classList.remove('hidden');
528
+ results.scrollIntoView({ behavior: 'smooth' });
529
+
530
+ // Animate score
531
+ const scoreEl = document.getElementById('perf-score');
532
+ const riskEl = document.getElementById('risk-level');
533
+ scoreEl.textContent = '0';
534
+ riskEl.textContent = 'CALCULATING...';
535
+
536
+ setTimeout(() => {
537
+ let score = 0;
538
+ const interval = setInterval(() => {
539
+ score += Math.random() * 5;
540
+ if (score > 92) {
541
+ score = 92;
542
+ clearInterval(interval);
543
+ }
544
+ scoreEl.textContent = Math.floor(score);
545
+ }, 50);
546
+
547
+ setTimeout(() => {
548
+ riskEl.textContent = 'LOW';
549
+ }, 1500);
550
+ }, 500);
551
+
552
+ // Update chart
553
+ updatePerfChart();
554
+ });
555
+
556
+ function updatePerfChart() {
557
+ const ctx = document.getElementById('perfChart').getContext('2d');
558
+ new Chart(ctx, {
559
+ type: 'doughnut',
560
+ data: {
561
+ labels: ['CTR', 'Conversion', 'Engagement'],
562
+ datasets: [{
563
+ data: [92, 87, 95],
564
+ backgroundColor: ['#10b981', '#3b82f6', '#8b5cf6'],
565
+ borderWidth: 0,
566
+ cutout: '70%'
567
+ }]
568
+ },
569
+ options: {
570
+ responsive: true,
571
+ plugins: {
572
+ legend: { display: false }
573
+ }
574
+ }
575
+ });
576
+ }
577
+
578
+ // Competitor Intelligence Charts
579
+ document.addEventListener('DOMContentLoaded', function() {
580
+ // CTA Chart
581
+ const ctaCtx = document.getElementById('ctaChart').getContext('2d');
582
+ new Chart(ctaCtx, {
583
+ type: 'bar',
584
+ data: {
585
+ labels: ['Shop Now', 'Learn More', 'Get Offer', 'Sign Up', 'Buy Now'],
586
+ datasets: [{
587
+ label: 'Usage %',
588
+ data: [45, 28, 15, 8, 4],
589
+ backgroundColor: 'rgba(34, 197, 94, 0.8)',
590
+ borderRadius: 8
591
+ }]
592
+ },
593
+ options: {
594
+ responsive: true,
595
+ scales: {
596
+ y: { beginAtZero: true, max: 50 }
597
+ },
598
+ plugins: { legend: { display: false } }
599
+ }
600
+ });
601
+
602
+ // Fatigue Chart
603
+ const fatigueCtx = document.getElementById('fatigueChart').getContext('2d');
604
+ new Chart(fatigueCtx, {
605
+ type: 'line',
606
+ data: {
607
+ labels: ['Day 1', 'Day 3', 'Day 7', 'Day 10', 'Day 14', 'Day 18'],
608
+ datasets: [{
609
+ label: 'Fatigue Score',
610
+ data: [12, 25, 45, 62, 78, 82],
611
+ borderColor: '#f59e0b',
612
+ backgroundColor: 'rgba(245, 158, 11, 0.1)',
613
+ tension: 0.4,
614
+ fill: true
615
+ }]
616
+ },
617
+ options: {
618
+ responsive: true,
619
+ scales: {
620
+ y: { beginAtZero: true, max: 100 }
621
+ },
622
+ plugins: { legend: { display: false } }
623
+ }
624
+ });
625
+
626
+ // Top Keywords
627
+ const keywords = [
628
+ 'discount', 'free shipping', 'limited time', '50% off', 'best seller',
629
+ 'new arrival', 'shop now', 'limited stock', 'holiday sale', 'buy now'
630
+ ];
631
+ const keywordsContainer = document.getElementById('top-keywords');
632
+ keywords.slice(0, 9).forEach((keyword, index) => {
633
+ const div = document.createElement('div');
634
+ div.className = 'p-3 bg-gradient-to-r from-blue-500/10 to-blue-600/10 rounded-xl border border-blue-400/30';
635
+ div.innerHTML = `
636
+ <div class="font-bold text-white text-lg">#${keyword}</div>
637
+ <div class="text-blue-200 text-sm">${Math.floor(Math.random() * 5000) + 1000} ads</div>
638
+ `;
639
+ keywordsContainer.appendChild(div);
640
+ });
641
+ });
642
+
643
+ // Copy Optimizer
644
+ function optimizeCopy() {
645
+ const optimized = document.getElementById('optimized-copy');
646
+ const stats = document.getElementById('optimization-stats');
647
+ optimized.classList.remove('hidden');
648
+ stats.classList.remove('hidden');
649
+ optimized.scrollIntoView({ behavior: 'smooth' });
650
+ }
651
+
652
+ // Mobile menu toggle (simplified)
653
+ document.querySelector('.md\\:hidden').addEventListener('click', function() {
654
+ // Mobile menu functionality
655
+ });
656
+
657
+ // Parallax effect on scroll
658
+ window.addEventListener('scroll', () => {
659
+ const scrolled = window.pageYOffset;
660
+ const parallax = document.querySelectorAll('.animate-float');
661
+ parallax.forEach(el => {
662
+ const speed = 0.5;
663
+ el.style.transform = `translateY(${scrolled * speed}px)`;
664
+ });
665
+ });
666
+
667
+ // Intersection Observer for animations
668
+ const observer = new IntersectionObserver((entries) => {
669
+ entries.forEach(entry => {
670
+ if (entry.isIntersecting) {
671
+ entry.target.style.opacity = '1';
672
+ entry.target.style.transform = 'translateY(0)';
673
+ }
674
+ });
675
+ });
676
+
677
+ document.querySelectorAll('.card-hover').forEach(el => {
678
+ el.style.opacity = '0';
679
+ el.style.transform = 'translateY(20px)';
680
+ el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
681
+ observer.observe(el);
682
+ });
683
+ </script>
684
+ </body>
685
+ </html>