Hugging Face's logo

Spaces:
chimpuuuu
/
dfg
Running

App Files Community
chimpuuuu commited on
Commit
b68c2bb
·
verified ·
1 Parent(s): 41e595b

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +372 -238
  2. prompts.txt +2 -1
index.html CHANGED
@@ -7,8 +7,29 @@
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  .hero-gradient {
11
  background: linear-gradient(135deg, #4338CA 0%, #7C3AED 25%, #DB2777 50%, #EA580C 75%, #F59E0B 100%);
 
 
12
  }
13
  .feature-gradient {
14
  background: linear-gradient(135deg, #3B82F6 0%, #6366F1 50%, #EC4899 100%);
@@ -21,24 +42,18 @@
21
  }
22
  .cta-gradient {
23
  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #F59E0B 100%);
24
- }
25
- .cta-pulse {
26
- animation: pulse 2s infinite;
27
- }
28
- @keyframes pulse {
29
- 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
30
- 70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
31
- 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
32
  }
33
  .card-hover {
34
- transition: all 0.3s ease;
35
  }
36
  .card-hover:hover {
37
- transform: translateY(-5px);
38
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
39
  }
40
  .glow-text {
41
- text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
42
  }
43
  .gradient-text {
44
  background-clip: text;
@@ -46,28 +61,73 @@
46
  color: transparent;
47
  background-image: linear-gradient(90deg, #3B82F6, #EC4899);
48
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  </style>
50
  </head>
51
- <body class="font-sans antialiased text-gray-800 bg-gray-50">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  <!-- Animated Header -->
53
- <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-md shadow-sm">
54
- <div class="container mx-auto px-6 py-4">
55
  <div class="flex items-center justify-between">
56
  <div class="flex items-center">
57
- <div class="w-10 h-10 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center text-white font-bold text-xl">CR</div>
58
  <span class="ml-3 text-xl font-bold text-gray-800">Conversion<span class="gradient-text">Rocket</span></span>
59
  </div>
60
  <nav class="hidden md:flex space-x-8">
61
- <a href="#features" class="text-gray-600 hover:text-indigo-600 font-medium transition-colors">Features</a>
62
- <a href="#results" class="text-gray-600 hover:text-indigo-600 font-medium transition-colors">Results</a>
63
- <a href="#pricing" class="text-gray-600 hover:text-indigo-600 font-medium transition-colors">Pricing</a>
64
- <a href="#testimonials" class="text-gray-600 hover:text-indigo-600 font-medium transition-colors">Testimonials</a>
65
  </nav>
66
  <div class="hidden md:block">
67
- <a href="#cta" class="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white px-6 py-2 rounded-full font-medium transition-all duration-300 shadow-lg hover:shadow-xl">Get Started</a>
68
  </div>
69
  <div class="md:hidden">
70
- <button class="text-gray-600 focus:outline-none">
71
  <i class="fas fa-bars text-2xl"></i>
72
  </button>
73
  </div>
@@ -77,38 +137,39 @@
77
 
78
  <!-- Hero Section with Vibrant Gradient -->
79
  <section class="hero-gradient text-white py-20 md:py-32 relative overflow-hidden">
80
- <div class="absolute inset-0 opacity-20">
81
- <div class="absolute top-0 left-0 w-full h-full bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-50"></div>
82
- </div>
83
  <div class="container mx-auto px-6 flex flex-col md:flex-row items-center relative z-10">
84
  <div class="md:w-1/2 mb-12 md:mb-0">
85
- <span class="inline-block bg-white/20 px-4 py-1 rounded-full text-sm font-medium mb-4">PROVEN TO INCREASE CONVERSIONS</span>
86
- <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6 glow-text">From <span class="line-through">6%</span> to <span class="text-yellow-300">15%</span> Conversion Rate</h1>
87
- <p class="text-xl text-white/90 mb-8 max-w-lg">Our data-driven CRO strategies have helped 500+ businesses <span class="font-bold">double their conversions</span> in just 30 days. Let's achieve the same for you!</p>
88
  <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
89
- <a href="#cta" class="bg-white text-indigo-600 hover:bg-gray-100 px-8 py-4 rounded-full font-bold text-lg text-center cta-pulse shadow-xl">Start Free Trial</a>
90
- <a href="#demo" class="border-2 border-white/50 hover:border-white text-white hover:bg-white/10 px-8 py-4 rounded-full font-bold text-lg text-center transition duration-300 flex items-center justify-center">
 
 
 
91
  <i class="fas fa-play-circle mr-2"></i> Watch Demo
92
  </a>
93
  </div>
94
  <div class="mt-8 flex flex-wrap items-center gap-4">
95
  <div class="flex -space-x-3">
96
- <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Happy customer">
97
- <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Happy customer">
98
- <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Happy customer">
99
  </div>
100
  <p class="text-white/90">
101
  <span class="font-bold">500+</span> businesses boosted conversions
102
- <i class="fas fa-star text-yellow-400 ml-2"></i>
103
- <i class="fas fa-star text-yellow-400"></i>
104
- <i class="fas fa-star text-yellow-400"></i>
105
- <i class="fas fa-star text-yellow-400"></i>
106
- <i class="fas fa-star text-yellow-400"></i>
107
  </p>
108
  </div>
109
  </div>
110
- <div class="md:w-1/2">
111
- <div class="relative bg-white rounded-2xl shadow-2xl overflow-hidden transform rotate-1 card-hover">
112
  <div class="absolute top-0 left-0 bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-4 py-1 text-xs font-bold rounded-br">LIVE RESULTS</div>
113
  <div class="p-1">
114
  <img src="https://via.placeholder.com/600x400/4F46E5/FFFFFF?text=Before+6%25" alt="Before CRO" class="w-full h-auto border-b-2 border-gray-200">
@@ -121,155 +182,203 @@
121
  </div>
122
  <div class="flex justify-between items-center">
123
  <span class="text-2xl font-bold text-gray-700">6%</span>
124
- <div class="w-32 h-2 bg-gradient-to-r from-gray-300 via-indigo-400 to-purple-500 rounded-full mx-4"></div>
 
 
125
  <span class="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">15%</span>
126
  </div>
127
  <div class="mt-4 text-center">
128
- <span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-bold">
129
  <i class="fas fa-arrow-up mr-1"></i> 150% Increase
130
  </span>
131
  </div>
132
  </div>
133
  </div>
 
134
  </div>
135
  </div>
136
  </section>
137
 
138
  <!-- Trust Indicators with Animated Logos -->
139
- <section class="bg-white py-12">
140
- <div class="container mx-auto px-6">
141
- <p class="text-center text-gray-500 mb-8 text-sm font-medium tracking-widest">TRUSTED BY INNOVATIVE COMPANIES</p>
 
 
 
142
  <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
143
- <img src="https://via.placeholder.com/120x40/3B82F6/FFFFFF?text=TECH+" class="h-8 opacity-70 hover:opacity-100 transition duration-300 hover:scale-110" alt="Company logo">
144
- <img src="https://via.placeholder.com/120x40/EC4899/FFFFFF?text=STARTUP" class="h-8 opacity-70 hover:opacity-100 transition duration-300 hover:scale-110" alt="Company logo">
145
- <img src="https://via.placeholder.com/120x40/10B981/FFFFFF?text=ECOMM" class="h-8 opacity-70 hover:opacity-100 transition duration-300 hover:scale-110" alt="Company logo">
146
- <img src="https://via.placeholder.com/120x40/F59E0B/FFFFFF?text=SAAS" class="h-8 opacity-70 hover:opacity-100 transition duration-300 hover:scale-110" alt="Company logo">
147
- <img src="https://via.placeholder.com/120x40/8B5CF6/FFFFFF?text=DIGITAL" class="h-8 opacity-70 hover:opacity-100 transition duration-300 hover:scale-110" alt="Company logo">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
148
  </div>
149
  </div>
150
  </section>
151
 
152
  <!-- Features Section with Gradient Cards -->
153
- <section id="features" class="py-20 bg-gradient-to-b from-white to-gray-50">
154
- <div class="container mx-auto px-6">
 
 
 
155
  <div class="text-center mb-16 max-w-3xl mx-auto">
156
- <span class="inline-block bg-indigo-100 text-indigo-800 px-4 py-1 rounded-full text-sm font-medium mb-4">OUR PROCESS</span>
157
  <h2 class="text-3xl md:text-4xl font-bold mb-4">The <span class="gradient-text">Proven Framework</span> That <span class="gradient-text">Boosts Conversions</span></h2>
158
- <p class="text-xl text-gray-600">We've distilled 20+ years of CRO expertise into a simple 4-step process that delivers <span class="font-bold text-indigo-600">consistent, measurable results</span></p>
159
  </div>
160
 
161
  <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
162
- <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 card-hover border border-gray-100">
163
- <div class="w-14 h-14 bg-gradient-to-r from-blue-100 to-indigo-100 rounded-xl flex items-center justify-center mb-6">
164
- <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center text-white">
 
165
  <i class="fas fa-search text-lg"></i>
166
  </div>
167
  </div>
168
- <h3 class="text-xl font-bold mb-3">1. Deep Analysis</h3>
169
- <p class="text-gray-600">Comprehensive audits of your website, user behavior, and funnel to identify all conversion leaks with heatmaps and session recordings.</p>
 
170
  </div>
171
 
172
- <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 card-hover border border-gray-100">
173
- <div class="w-14 h-14 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl flex items-center justify-center mb-6">
174
- <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg flex items-center justify-center text-white">
 
175
  <i class="fas fa-lightbulb text-lg"></i>
176
  </div>
177
  </div>
178
- <h3 class="text-xl font-bold mb-3">2. Hypothesis Creation</h3>
179
- <p class="text-gray-600">Data-driven test hypotheses with clear success metrics tailored to your specific conversion bottlenecks.</p>
 
180
  </div>
181
 
182
- <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 card-hover border border-gray-100">
183
- <div class="w-14 h-14 bg-gradient-to-r from-green-100 to-teal-100 rounded-xl flex items-center justify-center mb-6">
184
- <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-teal-600 rounded-lg flex items-center justify-center text-white">
 
185
  <i class="fas fa-flask text-lg"></i>
186
  </div>
187
  </div>
188
- <h3 class="text-xl font-bold mb-3">3. Rapid Testing</h3>
189
- <p class="text-gray-600">A/B, multivariate, and split tests with statistical significance to validate improvements before full implementation.</p>
 
190
  </div>
191
 
192
- <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 card-hover border border-gray-100">
193
- <div class="w-14 h-14 bg-gradient-to-r from-yellow-100 to-orange-100 rounded-xl flex items-center justify-center mb-6">
194
- <div class="w-10 h-10 bg-gradient-to-r from-yellow-500 to-orange-600 rounded-lg flex items-center justify-center text-white">
 
195
  <i class="fas fa-chart-line text-lg"></i>
196
  </div>
197
  </div>
198
- <h3 class="text-xl font-bold mb-3">4. Scale & Optimize</h3>
199
- <p class="text-gray-600">Winning variations implemented site-wide while continuously optimizing for even better results.</p>
 
200
  </div>
201
  </div>
202
  </div>
203
  </section>
204
 
205
  <!-- Results Section with Animated Stats -->
206
- <section id="results" class="py-20 bg-gradient-to-b from-gray-50 to-white">
207
- <div class="container mx-auto px-6">
 
 
 
 
 
208
  <div class="text-center mb-16 max-w-3xl mx-auto">
209
- <span class="inline-block bg-green-100 text-green-800 px-4 py-1 rounded-full text-sm font-medium mb-4">PROVEN RESULTS</span>
210
  <h2 class="text-3xl md:text-4xl font-bold mb-4">Real <span class="gradient-text">Measurable Impact</span> For Our Clients</h2>
211
  <p class="text-xl text-gray-600">Don't take our word for it - see the <span class="font-bold text-green-600">quantifiable results</span> we've delivered for businesses like yours</p>
212
  </div>
213
 
214
  <div class="grid md:grid-cols-3 gap-6 mb-16">
215
- <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover border border-gray-100">
216
- <div class="text-5xl font-bold mb-4 gradient-text">127%</div>
217
  <p class="text-gray-600 mb-6">Average conversion increase across all clients</p>
218
- <div class="h-1 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full w-3/4 mx-auto"></div>
 
 
 
219
  </div>
220
 
221
- <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover border border-gray-100">
222
- <div class="text-5xl font-bold mb-4 gradient-text">2.4x</div>
223
  <p class="text-gray-600 mb-6">Average ROI on CRO investment</p>
224
- <div class="h-1 bg-gradient-to-r from-green-400 to-blue-500 rounded-full w-3/4 mx-auto"></div>
 
 
 
225
  </div>
226
 
227
- <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover border border-gray-100">
228
- <div class="text-5xl font-bold mb-4 gradient-text">30</div>
229
  <p class="text-gray-600 mb-6">Days to see significant improvements</p>
230
- <div class="h-1 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full w-3/4 mx-auto"></div>
 
 
 
231
  </div>
232
  </div>
233
 
234
- <div class="bg-white rounded-xl shadow-xl overflow-hidden card-hover">
235
  <div class="md:flex">
236
- <div class="md:w-1/2 p-12">
237
- <span class="inline-block bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs font-medium mb-4">CASE STUDY</span>
238
  <h3 class="text-2xl font-bold mb-4">Ecommerce Brand: <span class="gradient-text">125% Conversion Boost</span></h3>
239
  <p class="text-gray-600 mb-6">An online fashion retailer was struggling with a 2.8% conversion rate and high cart abandonment. After implementing our CRO framework:</p>
240
  <ul class="space-y-3 mb-8">
241
  <li class="flex items-start">
242
- <div class="w-5 h-5 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center text-white mr-3 mt-1">
243
  <i class="fas fa-check text-xs"></i>
244
  </div>
245
  <span class="flex-1"><span class="font-bold">Conversion rate increased to 6.3% (+125%)</span> through optimized product pages and checkout flow</span>
246
  </li>
247
  <li class="flex items-start">
248
- <div class="w-5 h-5 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center text-white mr-3 mt-1">
249
  <i class="fas fa-check text-xs"></i>
250
  </div>
251
  <span class="flex-1"><span class="font-bold">Average order value grew by 18%</span> with strategic upsell placements</span>
252
  </li>
253
  <li class="flex items-start">
254
- <div class="w-5 h-5 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center text-white mr-3 mt-1">
255
  <i class="fas fa-check text-xs"></i>
256
  </div>
257
  <span class="flex-1"><span class="font-bold">Cart abandonment reduced by 42%</span> through exit-intent offers and simplified checkout</span>
258
  </li>
259
  </ul>
260
- <a href="#" class="inline-flex items-center text-indigo-600 font-medium hover:text-indigo-800 group">
261
  Read full case study
262
  <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
263
  </a>
 
264
  </div>
265
- <div class="md:w-1/2 bg-gradient-to-br from-blue-50 to-indigo-50 flex items-center justify-center p-8">
266
- <div class="relative w-full max-w-md">
267
  <img src="https://via.placeholder.com/500x350/F3F4F6/3B82F6?text=Before+2.8%" alt="Before CRO" class="rounded-lg shadow-lg w-full relative z-10 border-2 border-white">
268
  <img src="https://via.placeholder.com/500x350/E5E7EB/7C3AED?text=After+6.3%" alt="After CRO" class="rounded-lg shadow-lg w-full absolute -bottom-4 -right-4 z-0 border-2 border-white">
269
- <div class="absolute -bottom-2 -right-2 bg-white px-4 py-2 rounded-full shadow-md z-20">
270
  <span class="text-green-600 font-bold">+125%</span>
271
  </div>
272
  </div>
 
273
  </div>
274
  </div>
275
  </div>
@@ -277,18 +386,19 @@
277
  </section>
278
 
279
  <!-- Testimonials with Gradient Background -->
280
- <section id="testimonials" class="py-20 testimonial-gradient text-white">
281
- <div class="container mx-auto px-6">
 
282
  <div class="text-center mb-16 max-w-3xl mx-auto">
283
- <span class="inline-block bg-white/20 px-4 py-1 rounded-full text-sm font-medium mb-4">CLIENT LOVE</span>
284
  <h2 class="text-3xl md:text-4xl font-bold mb-4 glow-text">What Our <span class="text-yellow-300">Clients Say</span></h2>
285
  <p class="text-xl text-white/90">Hear from businesses that transformed their results with our CRO expertise</p>
286
  </div>
287
 
288
  <div class="grid md:grid-cols-3 gap-8">
289
- <div class="bg-white/10 backdrop-blur-sm p-8 rounded-xl border border-white/20 hover:border-white/40 transition-all duration-300 card-hover">
290
  <div class="flex items-center mb-6">
291
- <img src="https://randomuser.me/api/portraits/women/43.jpg" class="w-12 h-12 rounded-full mr-4 border-2 border-white">
292
  <div>
293
  <h4 class="font-bold">Sarah Johnson</h4>
294
  <p class="text-white/70 text-sm">Marketing Director, FashionCo</p>
@@ -296,17 +406,18 @@
296
  </div>
297
  <p class="mb-6">"Working with ConversionRocket was a game-changer. They took our conversion rate from industry average to best-in-class in just 8 weeks. The data-driven approach gave us confidence in every change."</p>
298
  <div class="flex text-yellow-400">
299
- <i class="fas fa-star"></i>
300
- <i class="fas fa-star"></i>
301
- <i class="fas fa-star"></i>
302
- <i class="fas fa-star"></i>
303
- <i class="fas fa-star"></i>
304
  </div>
 
305
  </div>
306
 
307
- <div class="bg-white/10 backdrop-blur-sm p-8 rounded-xl border border-white/20 hover:border-white/40 transition-all duration-300 card-hover">
308
  <div class="flex items-center mb-6">
309
- <img src="https://randomuser.me/api/portraits/men/65.jpg" class="w-12 h-12 rounded-full mr-4 border-2 border-white">
310
  <div>
311
  <h4 class="font-bold">Michael Chen</h4>
312
  <p class="text-white/70 text-sm">CEO, TechStart</p>
@@ -314,17 +425,18 @@
314
  </div>
315
  <p class="mb-6">"The team identified conversion leaks we never would have found. Their testing methodology is rigorous and their recommendations are backed by solid data. Our revenue increased by 140% with the same traffic."</p>
316
  <div class="flex text-yellow-400">
317
- <i class="fas fa-star"></i>
318
- <i class="fas fa-star"></i>
319
- <i class="fas fa-star"></i>
320
- <i class="fas fa-star"></i>
321
- <i class="fas fa-star"></i>
322
  </div>
 
323
  </div>
324
 
325
- <div class="bg-white/10 backdrop-blur-sm p-8 rounded-xl border border-white/20 hover:border-white/40 transition-all duration-300 card-hover">
326
  <div class="flex items-center mb-6">
327
- <img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-12 h-12 rounded-full mr-4 border-2 border-white">
328
  <div>
329
  <h4 class="font-bold">Emily Rodriguez</h4>
330
  <p class="text-white/70 text-sm">Ecommerce Manager, HomeGoods</p>
@@ -332,150 +444,160 @@
332
  </div>
333
  <p class="mb-6">"From the initial audit to ongoing optimization, every step was transparent and impactful. We saw a 92% increase in mobile conversions alone. Their expertise paid for itself many times over."</p>
334
  <div class="flex text-yellow-400">
335
- <i class="fas fa-star"></i>
336
- <i class="fas fa-star"></i>
337
- <i class="fas fa-star"></i>
338
- <i class="fas fa-star"></i>
339
- <i class="fas fa-star"></i>
340
  </div>
 
341
  </div>
342
  </div>
343
  </div>
344
  </section>
345
 
346
  <!-- Pricing with Vibrant Gradient -->
347
- <section id="pricing" class="py-20 bg-white">
348
- <div class="container mx-auto px-6">
 
 
 
 
 
349
  <div class="text-center mb-16 max-w-3xl mx-auto">
350
- <span class="inline-block bg-yellow-100 text-yellow-800 px-4 py-1 rounded-full text-sm font-medium mb-4">PRICING</span>
351
  <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, <span class="gradient-text">Transparent Pricing</span></h2>
352
  <p class="text-xl text-gray-600">Choose the plan that fits your business needs and budget</p>
353
  </div>
354
 
355
  <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
356
- <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-200 hover:border-indigo-300 transition-all duration-300 card-hover">
357
  <h3 class="text-xl font-bold mb-4">Starter</h3>
358
  <p class="text-gray-600 mb-6">Perfect for small businesses getting started with CRO</p>
359
  <div class="text-4xl font-bold mb-6">$1,997<span class="text-lg text-gray-500 font-normal">/mo</span></div>
360
  <ul class="space-y-3 mb-8">
361
  <li class="flex items-start">
362
- <div class="w-5 h-5 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full flex items-center justify-center text-white mr-3 mt-1">
363
  <i class="fas fa-check text-xs"></i>
364
  </div>
365
  <span>Comprehensive conversion audit</span>
366
  </li>
367
  <li class="flex items-start">
368
- <div class="w-5 h-5 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full flex items-center justify-center text-white mr-3 mt-1">
369
  <i class="fas fa-check text-xs"></i>
370
  </div>
371
  <span>5 high-impact tests per month</span>
372
  </li>
373
  <li class="flex items-start">
374
- <div class="w-5 h-5 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full flex items-center justify-center text-white mr-3 mt-1">
375
  <i class="fas fa-check text-xs"></i>
376
  </div>
377
  <span>Weekly optimization reports</span>
378
  </li>
379
  <li class="flex items-start">
380
- <div class="w-5 h-5 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full flex items-center justify-center text-white mr-3 mt-1">
381
  <i class="fas fa-check text-xs"></i>
382
  </div>
383
  <span>Email support</span>
384
  </li>
385
  </ul>
386
- <a href="#cta" class="block text-center bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-3 px-6 rounded-lg transition duration-300">Get Started</a>
 
387
  </div>
388
 
389
- <div class="bg-white p-8 rounded-xl shadow-2xl border-2 border-indigo-500 relative card-hover transform scale-[1.02]">
390
- <div class="absolute top-0 right-0 bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-4 py-1 text-xs font-bold rounded-bl rounded-tr">MOST POPULAR</div>
391
  <h3 class="text-xl font-bold mb-4">Growth</h3>
392
  <p class="text-gray-600 mb-6">Ideal for scaling businesses serious about conversions</p>
393
  <div class="text-4xl font-bold mb-6">$3,997<span class="text-lg text-gray-500 font-normal">/mo</span></div>
394
  <ul class="space-y-3 mb-8">
395
  <li class="flex items-start">
396
- <div class="w-5 h-5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white mr-3 mt-1">
397
  <i class="fas fa-check text-xs"></i>
398
  </div>
399
  <span>Everything in Starter plus:</span>
400
  </li>
401
  <li class="flex items-start">
402
- <div class="w-5 h-5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white mr-3 mt-1">
403
  <i class="fas fa-check text-xs"></i>
404
  </div>
405
  <span>15 high-impact tests per month</span>
406
  </li>
407
  <li class="flex items-start">
408
- <div class="w-5 h-5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white mr-3 mt-1">
409
  <i class="fas fa-check text-xs"></i>
410
  </div>
411
  <span>Heatmap & session recordings</span>
412
  </li>
413
  <li class="flex items-start">
414
- <div class="w-5 h-5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white mr-3 mt-1">
415
  <i class="fas fa-check text-xs"></i>
416
  </div>
417
  <span>Priority support</span>
418
  </li>
419
  <li class="flex items-start">
420
- <div class="w-5 h-5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white mr-3 mt-1">
421
  <i class="fas fa-check text-xs"></i>
422
  </div>
423
  <span>Quarterly strategy sessions</span>
424
  </li>
425
  </ul>
426
- <a href="#cta" class="block text-center bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300 shadow-lg hover:shadow-xl">Get Started</a>
 
427
  </div>
428
 
429
- <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-200 hover:border-purple-300 transition-all duration-300 card-hover">
430
  <h3 class="text-xl font-bold mb-4">Enterprise</h3>
431
  <p class="text-gray-600 mb-6">For large businesses needing custom solutions</p>
432
- <div class="text-4xl font-bold mb-6 gradient-text">Custom</div>
433
  <ul class="space-y-3 mb-8">
434
  <li class="flex items-start">
435
- <div class="w-5 h-5 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full flex items-center justify-center text-white mr-3 mt-1">
436
  <i class="fas fa-check text-xs"></i>
437
  </div>
438
  <span>Everything in Growth plus:</span>
439
  </li>
440
  <li class="flex items-start">
441
- <div class="w-5 h-5 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full flex items-center justify-center text-white mr-3 mt-1">
442
  <i class="fas fa-check text-xs"></i>
443
  </div>
444
  <span>Unlimited tests & optimizations</span>
445
  </li>
446
  <li class="flex items-start">
447
- <div class="w-5 h-5 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full flex items-center justify-center text-white mr-3 mt-1">
448
  <i class="fas fa-check text-xs"></i>
449
  </div>
450
  <span>Dedicated CRO specialist</span>
451
  </li>
452
  <li class="flex items-start">
453
- <div class="w-5 h-5 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full flex items-center justify-center text-white mr-3 mt-1">
454
  <i class="fas fa-check text-xs"></i>
455
  </div>
456
  <span>Advanced personalization</span>
457
  </li>
458
  <li class="flex items-start">
459
- <div class="w-5 h-5 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full flex items-center justify-center text-white mr-3 mt-1">
460
  <i class="fas fa-check text-xs"></i>
461
  </div>
462
  <span>24/7 VIP support</span>
463
  </li>
464
  </ul>
465
- <a href="#cta" class="block text-center bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-3 px-6 rounded-lg transition duration-300">Contact Sales</a>
 
466
  </div>
467
  </div>
468
 
469
- <div class="mt-12 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl shadow-lg p-8 max-w-4xl mx-auto border border-indigo-100">
470
- <div class="text-center mb-6">
 
471
  <h3 class="text-2xl font-bold mb-2 gradient-text">Not sure which plan is right for you?</h3>
472
  <p class="text-gray-600">Schedule a free 30-minute consultation with our CRO expert</p>
473
  </div>
474
- <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-4">
475
- <a href="#" class="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-medium py-3 px-8 rounded-lg transition duration-300 flex items-center shadow-lg hover:shadow-xl">
476
  <i class="far fa-calendar-alt mr-2"></i> Book a Call
477
  </a>
478
- <a href="tel:+18005551234" class="border border-gray-300 bg-white hover:bg-gray-50 text-gray-800 font-medium py-3 px-8 rounded-lg transition duration-300 flex items-center">
479
  <i class="fas fa-phone-alt mr-2"></i> Call Us Now
480
  </a>
481
  </div>
@@ -484,42 +606,71 @@
484
  </section>
485
 
486
  <!-- CTA Section with Vibrant Gradient -->
487
- <section id="cta" class="py-20 cta-gradient text-white">
488
- <div class="container mx-auto px-6">
 
489
  <div class="max-w-4xl mx-auto text-center">
490
  <h2 class="text-3xl md:text-4xl font-bold mb-6 glow-text">Ready to <span class="text-yellow-300">Transform</span> Your Conversion Rate?</h2>
491
  <p class="text-xl text-white/90 mb-8">Join hundreds of businesses increasing their revenue with our proven CRO framework. Start with a <span class="font-bold">risk-free 14-day trial</span>.</p>
492
 
493
- <div class="bg-white rounded-xl shadow-2xl p-8 max-w-2xl mx-auto">
494
  <h3 class="text-2xl font-bold text-gray-800 mb-4">Start Your Free Trial Today</h3>
495
  <form class="space-y-4">
496
  <div class="grid md:grid-cols-2 gap-4">
497
- <input type="text" placeholder="First Name" class="px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-800">
498
- <input type="text" placeholder="Last Name" class="px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-800">
 
 
 
 
 
 
 
 
 
 
499
  </div>
500
- <input type="email" placeholder="Email Address" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-800">
501
- <input type="tel" placeholder="Phone Number" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-800">
502
- <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-800">
503
- <option>Select Plan</option>
504
- <option>Starter - $1,997/mo</option>
505
- <option>Growth - $3,997/mo</option>
506
- <option>Enterprise - Custom</option>
507
- </select>
508
- <button type="submit" class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-bold py-4 px-6 rounded-lg transition duration-300 shadow-lg hover:shadow-xl">Start Free Trial</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
509
  </form>
510
  <p class="text-sm text-gray-500 mt-4">No credit card required. Cancel anytime.</p>
511
  </div>
512
 
513
  <div class="mt-8 flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-8">
514
- <div class="flex items-center">
515
  <i class="fas fa-shield-alt text-white/70 text-xl mr-3"></i>
516
  <span>100% secure and confidential</span>
517
  </div>
518
- <div class="flex items-center">
519
  <i class="fas fa-lock text-white/70 text-xl mr-3"></i>
520
  <span>Your data is protected</span>
521
  </div>
522
- <div class="flex items-center">
523
  <i class="fas fa-handshake text-white/70 text-xl mr-3"></i>
524
  <span>No long-term contracts</span>
525
  </div>
@@ -529,60 +680,65 @@
529
  </section>
530
 
531
  <!-- FAQ -->
532
- <section class="py-20 bg-white">
533
- <div class="container mx-auto px-6 max-w-4xl">
 
 
 
 
 
534
  <div class="text-center mb-16">
535
  <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently Asked Questions</h2>
536
  <p class="text-xl text-gray-600">Everything you need to know about our CRO services</p>
537
  </div>
538
 
539
  <div class="space-y-4">
540
- <div class="border border-gray-200 rounded-xl overflow-hidden hover:border-indigo-300 transition duration-300">
541
- <button class="flex items-center justify-between w-full p-6 text-left focus:outline-none group">
542
  <span class="text-lg font-medium group-hover:text-indigo-600 transition-colors">How quickly will I see results?</span>
543
- <i class="fas fa-chevron-down text-indigo-600 transition-transform duration-300"></i>
544
  </button>
545
- <div class="px-6 pb-6 hidden">
546
  <p class="text-gray-600">Most clients see measurable improvements within 30 days, with significant gains typically appearing in the first 90 days. The exact timeline depends on your current conversion rate, website traffic, and how quickly we can implement and validate tests.</p>
547
  </div>
548
  </div>
549
 
550
- <div class="border border-gray-200 rounded-xl overflow-hidden hover:border-indigo-300 transition duration-300">
551
- <button class="flex items-center justify-between w-full p-6 text-left focus:outline-none group">
552
  <span class="text-lg font-medium group-hover:text-indigo-600 transition-colors">What's your testing methodology?</span>
553
- <i class="fas fa-chevron-down text-indigo-600 transition-transform duration-300"></i>
554
  </button>
555
- <div class="px-6 pb-6 hidden">
556
  <p class="text-gray-600">We follow a rigorous, data-driven approach: 1) Comprehensive analysis to identify leaks, 2) Hypothesis creation based on behavioral data, 3) Rapid testing with statistical significance, 4) Implementation of winning variations. All tests are designed to provide clear, actionable insights.</p>
557
  </div>
558
  </div>
559
 
560
- <div class="border border-gray-200 rounded-xl overflow-hidden hover:border-indigo-300 transition duration-300">
561
- <button class="flex items-center justify-between w-full p-6 text-left focus:outline-none group">
562
  <span class="text-lg font-medium group-hover:text-indigo-600 transition-colors">Do you work with businesses in my industry?</span>
563
- <i class="fas fa-chevron-down text-indigo-600 transition-transform duration-300"></i>
564
  </button>
565
- <div class="px-6 pb-6 hidden">
566
  <p class="text-gray-600">Our CRO framework applies universally across industries. We've successfully worked with ecommerce, SaaS, financial services, healthcare, education, and more. The principles of conversion optimization remain consistent, though the specific tactics may vary by industry.</p>
567
  </div>
568
  </div>
569
 
570
- <div class="border border-gray-200 rounded-xl overflow-hidden hover:border-indigo-300 transition duration-300">
571
- <button class="flex items-center justify-between w-full p-6 text-left focus:outline-none group">
572
  <span class="text-lg font-medium group-hover:text-indigo-600 transition-colors">How do you measure success?</span>
573
- <i class="fas fa-chevron-down text-indigo-600 transition-transform duration-300"></i>
574
  </button>
575
- <div class="px-6 pb-6 hidden">
576
  <p class="text-gray-600">We track multiple KPIs including conversion rate, average order value, revenue per visitor, and customer lifetime value. Our primary metric is the improvement in your bottom-line revenue. All results are measured with statistical significance to ensure they're real and repeatable.</p>
577
  </div>
578
  </div>
579
 
580
- <div class="border border-gray-200 rounded-xl overflow-hidden hover:border-indigo-300 transition duration-300">
581
- <button class="flex items-center justify-between w-full p-6 text-left focus:outline-none group">
582
  <span class="text-lg font-medium group-hover:text-indigo-600 transition-colors">What if I'm not satisfied with the results?</span>
583
- <i class="fas fa-chevron-down text-indigo-600 transition-transform duration-300"></i>
584
  </button>
585
- <div class="px-6 pb-6 hidden">
586
  <p class="text-gray-600">We're confident in our ability to improve your conversions. That's why we offer a 30-day money-back guarantee if we can't identify at least 3 high-impact optimization opportunities during our initial audit phase. Client satisfaction is our top priority.</p>
587
  </div>
588
  </div>
@@ -598,26 +754,30 @@
598
  </section>
599
 
600
  <!-- Footer with Gradient Accent -->
601
- <footer class="bg-gray-900 text-gray-400 py-16">
602
- <div class="container mx-auto px-6">
 
 
 
 
603
  <div class="grid md:grid-cols-5 gap-12">
604
  <div class="md:col-span-2">
605
  <div class="flex items-center mb-6">
606
- <div class="w-10 h-10 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center text-white font-bold text-xl">CR</div>
607
  <span class="ml-3 text-xl font-bold text-white">Conversion<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">Rocket</span></span>
608
  </div>
609
  <p class="mb-6">Helping businesses increase conversions and revenue through data-driven optimization since 2003.</p>
610
  <div class="flex space-x-4">
611
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-white transition duration-300 hover:-translate-y-1">
612
  <i class="fab fa-facebook-f"></i>
613
  </a>
614
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-white transition duration-300 hover:-translate-y-1">
615
  <i class="fab fa-twitter"></i>
616
  </a>
617
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-white transition duration-300 hover:-translate-y-1">
618
  <i class="fab fa-linkedin-in"></i>
619
  </a>
620
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-white transition duration-300 hover:-translate-y-1">
621
  <i class="fab fa-instagram"></i>
622
  </a>
623
  </div>
@@ -626,33 +786,33 @@
626
  <div>
627
  <h4 class="text-white font-bold text-lg mb-6">Company</h4>
628
  <ul class="space-y-3">
629
- <li><a href="#" class="hover:text-white transition duration-300">About Us</a></li>
630
- <li><a href="#" class="hover:text-white transition duration-300">Careers</a></li>
631
- <li><a href="#" class="hover:text-white transition duration-300">Case Studies</a></li>
632
- <li><a href="#" class="hover:text-white transition duration-300">Blog</a></li>
633
- <li><a href="#" class="hover:text-white transition duration-300">Contact</a></li>
634
  </ul>
635
  </div>
636
 
637
  <div>
638
  <h4 class="text-white font-bold text-lg mb-6">Services</h4>
639
  <ul class="space-y-3">
640
- <li><a href="#" class="hover:text-white transition duration-300">CRO Audit</a></li>
641
- <li><a href="#" class="hover:text-white transition duration-300">A/B Testing</a></li>
642
- <li><a href="#" class="hover:text-white transition duration-300">UX Optimization</a></li>
643
- <li><a href="#" class="hover:text-white transition duration-300">Landing Pages</a></li>
644
- <li><a href="#" class="hover:text-white transition duration-300">Training</a></li>
645
  </ul>
646
  </div>
647
 
648
  <div>
649
  <h4 class="text-white font-bold text-lg mb-6">Resources</h4>
650
  <ul class="space-y-3">
651
- <li><a href="#" class="hover:text-white transition duration-300">Guides</a></li>
652
- <li><a href="#" class="hover:text-white transition duration-300">Webinars</a></li>
653
- <li><a href="#" class="hover:text-white transition duration-300">Tools</a></li>
654
- <li><a href="#" class="hover:text-white transition duration-300">Research</a></li>
655
- <li><a href="#" class="hover:text-white transition duration-300">Help Center</a></li>
656
  </ul>
657
  </div>
658
  </div>
@@ -670,31 +830,5 @@
670
 
671
  <script>
672
  // FAQ toggle functionality
673
- document.querySelectorAll('.border-gray-200 button').forEach(button => {
674
- button.addEventListener('click', () => {
675
- const content = button.nextElementSibling;
676
- const icon = button.querySelector('i');
677
-
678
- content.classList.toggle('hidden');
679
- icon.classList.toggle('rotate-180');
680
- });
681
- });
682
-
683
- // Simple animation for stats when they come into view
684
- const observer = new IntersectionObserver((entries) => {
685
- entries.forEach(entry => {
686
- if (entry.isIntersecting) {
687
- entry.target.classList.add('animate-pulse');
688
- setTimeout(() => {
689
- entry.target.classList.remove('animate-pulse');
690
- }, 1000);
691
- }
692
- });
693
- }, { threshold: 0.1 });
694
-
695
- document.querySelectorAll('.gradient-text').forEach(el => {
696
- observer.observe(el);
697
- });
698
- </script>
699
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=chimpuuuu/dfg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
700
  </html>
 
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @keyframes float {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-20px); }
13
+ }
14
+ @keyframes gradientFlow {
15
+ 0% { background-position: 0% 50%; }
16
+ 50% { background-position: 100% 50%; }
17
+ 100% { background-position: 0% 50%; }
18
+ }
19
+ @keyframes pulseGlow {
20
+ 0% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.7); }
21
+ 70% { box-shadow: 0 0 0 15px rgba(236, 72, 153, 0); }
22
+ 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
23
+ }
24
+ @keyframes rotate {
25
+ from { transform: rotate(0deg); }
26
+ to { transform: rotate(360deg); }
27
+ }
28
+
29
  .hero-gradient {
30
  background: linear-gradient(135deg, #4338CA 0%, #7C3AED 25%, #DB2777 50%, #EA580C 75%, #F59E0B 100%);
31
+ background-size: 400% 400%;
32
+ animation: gradientFlow 15s ease infinite;
33
  }
34
  .feature-gradient {
35
  background: linear-gradient(135deg, #3B82F6 0%, #6366F1 50%, #EC4899 100%);
 
42
  }
43
  .cta-gradient {
44
  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #F59E0B 100%);
45
+ background-size: 400% 400%;
46
+ animation: gradientFlow 15s ease infinite;
 
 
 
 
 
 
47
  }
48
  .card-hover {
49
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
50
  }
51
  .card-hover:hover {
52
+ transform: translateY(-10px) scale(1.02);
53
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
54
  }
55
  .glow-text {
56
+ text-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
57
  }
58
  .gradient-text {
59
  background-clip: text;
 
61
  color: transparent;
62
  background-image: linear-gradient(90deg, #3B82F6, #EC4899);
63
  }
64
+ .floating {
65
+ animation: float 6s ease-in-out infinite;
66
+ }
67
+ .pulse-glow {
68
+ animation: pulseGlow 2s infinite;
69
+ }
70
+ .rotating {
71
+ animation: rotate 20s linear infinite;
72
+ }
73
+ .noise-bg {
74
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
75
+ }
76
+ .blob {
77
+ border-radius: 50%;
78
+ filter: blur(40px);
79
+ opacity: 0.7;
80
+ position: absolute;
81
+ z-index: 0;
82
+ }
83
+ .glass-morphism {
84
+ background: rgba(255, 255, 255, 0.15);
85
+ backdrop-filter: blur(10px);
86
+ -webkit-backdrop-filter: blur(10px);
87
+ border: 1px solid rgba(255, 255, 255, 0.18);
88
+ }
89
+ .parallax-bg {
90
+ background-attachment: fixed;
91
+ background-position: center;
92
+ background-repeat: no-repeat;
93
+ background-size: cover;
94
+ }
95
  </style>
96
  </head>
97
+ <body class="font-sans antialiased text-gray-800 bg-gray-50 overflow-x-hidden">
98
+ <!-- Animated Blob Background Elements -->
99
+ <div class="fixed inset-0 overflow-hidden pointer-events-none">
100
+ <div class="blob w-80 h-80 bg-purple-500 top-20 left-10 rotating" style="animation-delay: 0s;"></div>
101
+ <div class="blob w-96 h-96 bg-pink-500 bottom-20 right-10 rotating" style="animation-delay: 2s;"></div>
102
+ <div class="blob w-64 h-64 bg-blue-500 top-1/2 left-1/3 rotating" style="animation-delay: 4s;"></div>
103
+ </div>
104
+
105
+ <!-- Glowing Particles -->
106
+ <div class="fixed inset-0 pointer-events-none">
107
+ <div class="absolute top-1/4 left-1/4 w-3 h-3 rounded-full bg-white glow" style="box-shadow: 0 0 15px 5px white;"></div>
108
+ <div class="absolute top-1/3 right-1/4 w-2 h-2 rounded-full bg-blue-300 glow" style="box-shadow: 0 0 10px 2px #3B82F6;"></div>
109
+ <div class="absolute bottom-1/4 left-1/2 w-4 h-4 rounded-full bg-purple-300 glow" style="box-shadow: 0 0 20px 5px #8B5CF6;"></div>
110
+ </div>
111
+
112
  <!-- Animated Header -->
113
+ <header class="sticky top-0 z-50 glass-morphism shadow-sm">
114
+ <div class="container mx-auto px-6 py-3">
115
  <div class="flex items-center justify-between">
116
  <div class="flex items-center">
117
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center text-white font-bold text-xl shadow-lg pulse-glow">CR</div>
118
  <span class="ml-3 text-xl font-bold text-gray-800">Conversion<span class="gradient-text">Rocket</span></span>
119
  </div>
120
  <nav class="hidden md:flex space-x-8">
121
+ <a href="#features" class="text-gray-600 hover:text-indigo-600 font-medium transition-colors hover:scale-105">Features</a>
122
+ <a href="#results" class="text-gray-600 hover:text-indigo-600 font-medium transition-colors hover:scale-105">Results</a>
123
+ <a href="#pricing" class="text-gray-600 hover:text-indigo-600 font-medium transition-colors hover:scale-105">Pricing</a>
124
+ <a href="#testimonials" class="text-gray-600 hover:text-indigo-600 font-medium transition-colors hover:scale-105">Testimonials</a>
125
  </nav>
126
  <div class="hidden md:block">
127
+ <a href="#cta" class="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white px-6 py-2 rounded-full font-medium transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105 transform hover:skew-x-3">Get Started</a>
128
  </div>
129
  <div class="md:hidden">
130
+ <button class="text-gray-600 focus:outline-none hover:scale-110 transition-transform">
131
  <i class="fas fa-bars text-2xl"></i>
132
  </button>
133
  </div>
 
137
 
138
  <!-- Hero Section with Vibrant Gradient -->
139
  <section class="hero-gradient text-white py-20 md:py-32 relative overflow-hidden">
140
+ <div class="absolute inset-0 noise-bg opacity-20"></div>
 
 
141
  <div class="container mx-auto px-6 flex flex-col md:flex-row items-center relative z-10">
142
  <div class="md:w-1/2 mb-12 md:mb-0">
143
+ <span class="inline-block bg-white/20 px-4 py-1 rounded-full text-sm font-medium mb-4 hover:scale-105 transition-transform cursor-default">🚀 PROVEN TO INCREASE CONVERSIONS</span>
144
+ <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6 glow-text">From <span class="line-through">6%</span> to <span class="text-yellow-300 animate-pulse">15%</span> Conversion Rate</h1>
145
+ <p class="text-xl text-white/90 mb-8 max-w-lg">Our data-driven CRO strategies have helped 500+ businesses <span class="font-bold bg-white/20 px-2 rounded">double their conversions</span> in just 30 days. Let's achieve the same for you!</p>
146
  <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
147
+ <a href="#cta" class="bg-white text-indigo-600 hover:bg-gray-100 px-8 py-4 rounded-full font-bold text-lg text-center shadow-xl hover:scale-105 transition-transform flex items-center justify-center">
148
+ <span class="mr-2">Start Free Trial</span>
149
+ <i class="fas fa-rocket"></i>
150
+ </a>
151
+ <a href="#demo" class="border-2 border-white/50 hover:border-white text-white hover:bg-white/10 px-8 py-4 rounded-full font-bold text-lg text-center transition duration-300 flex items-center justify-center hover:scale-105">
152
  <i class="fas fa-play-circle mr-2"></i> Watch Demo
153
  </a>
154
  </div>
155
  <div class="mt-8 flex flex-wrap items-center gap-4">
156
  <div class="flex -space-x-3">
157
+ <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white hover:scale-125 transition-transform cursor-pointer" alt="Happy customer" title="Sarah K.">
158
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white hover:scale-125 transition-transform cursor-pointer" alt="Happy customer" title="Michael T.">
159
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white hover:scale-125 transition-transform cursor-pointer" alt="Happy customer" title="Emily R.">
160
  </div>
161
  <p class="text-white/90">
162
  <span class="font-bold">500+</span> businesses boosted conversions
163
+ <i class="fas fa-star text-yellow-400 ml-2 animate-bounce" style="animation-delay: 0.1s;"></i>
164
+ <i class="fas fa-star text-yellow-400 animate-bounce" style="animation-delay: 0.2s;"></i>
165
+ <i class="fas fa-star text-yellow-400 animate-bounce" style="animation-delay: 0.3s;"></i>
166
+ <i class="fas fa-star text-yellow-400 animate-bounce" style="animation-delay: 0.4s;"></i>
167
+ <i class="fas fa-star text-yellow-400 animate-bounce" style="animation-delay: 0.5s;"></i>
168
  </p>
169
  </div>
170
  </div>
171
+ <div class="md:w-1/2 relative floating">
172
+ <div class="relative bg-white rounded-2xl shadow-2xl overflow-hidden transform rotate-1 card-hover z-10">
173
  <div class="absolute top-0 left-0 bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-4 py-1 text-xs font-bold rounded-br">LIVE RESULTS</div>
174
  <div class="p-1">
175
  <img src="https://via.placeholder.com/600x400/4F46E5/FFFFFF?text=Before+6%25" alt="Before CRO" class="w-full h-auto border-b-2 border-gray-200">
 
182
  </div>
183
  <div class="flex justify-between items-center">
184
  <span class="text-2xl font-bold text-gray-700">6%</span>
185
+ <div class="w-32 h-2 bg-gradient-to-r from-gray-300 via-indigo-400 to-purple-500 rounded-full mx-4 relative">
186
+ <div class="absolute inset-0 bg-gradient-to-r from-gray-300 via-indigo-400 to-purple-500 rounded-full animate-grow" style="animation: grow 1.5s ease-out forwards; transform-origin: left;"></div>
187
+ </div>
188
  <span class="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">15%</span>
189
  </div>
190
  <div class="mt-4 text-center">
191
+ <span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-bold animate-pulse">
192
  <i class="fas fa-arrow-up mr-1"></i> 150% Increase
193
  </span>
194
  </div>
195
  </div>
196
  </div>
197
+ <div class="absolute -bottom-4 -right-4 w-32 h-32 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full opacity-20 blur-xl z-0"></div>
198
  </div>
199
  </div>
200
  </section>
201
 
202
  <!-- Trust Indicators with Animated Logos -->
203
+ <section class="bg-white py-16 relative overflow-hidden">
204
+ <div class="absolute inset-0 flex items-center justify-center opacity-5">
205
+ <div class="w-64 h-64 rounded-full bg-gradient-to-r from-indigo-200 to-purple-200 blur-3xl"></div>
206
+ </div>
207
+ <div class="container mx-auto px-6 relative z-10">
208
+ <p class="text-center text-gray-500 mb-8 text-sm font-medium tracking-widest animate-bounce">TRUSTED BY INNOVATIVE COMPANIES</p>
209
  <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
210
+ <div class="relative group">
211
+ <img src="https://via.placeholder.com/120x40/3B82F6/FFFFFF?text=TECH+" class="h-8 opacity-70 group-hover:opacity-100 transition duration-500 hover:scale-110" alt="Company logo">
212
+ <div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-500"></div>
213
+ </div>
214
+ <div class="relative group">
215
+ <img src="https://via.placeholder.com/120x40/EC4899/FFFFFF?text=STARTUP" class="h-8 opacity-70 group-hover:opacity-100 transition duration-500 hover:scale-110" alt="Company logo">
216
+ <div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-pink-400 to-rose-500 rounded-full scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-500"></div>
217
+ </div>
218
+ <div class="relative group">
219
+ <img src="https://via.placeholder.com/120x40/10B981/FFFFFF?text=ECOMM" class="h-8 opacity-70 group-hover:opacity-100 transition duration-500 hover:scale-110" alt="Company logo">
220
+ <div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-green-400 to-teal-500 rounded-full scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-500"></div>
221
+ </div>
222
+ <div class="relative group">
223
+ <img src="https://via.placeholder.com/120x40/F59E0B/FFFFFF?text=SAAS" class="h-8 opacity-70 group-hover:opacity-100 transition duration-500 hover:scale-110" alt="Company logo">
224
+ <div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-amber-400 to-orange-500 rounded-full scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-500"></div>
225
+ </div>
226
+ <div class="relative group">
227
+ <img src="https://via.placeholder.com/120x40/8B5CF6/FFFFFF?text=DIGITAL" class="h-8 opacity-70 group-hover:opacity-100 transition duration-500 hover:scale-110" alt="Company logo">
228
+ <div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-purple-400 to-violet-500 rounded-full scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-500"></div>
229
+ </div>
230
  </div>
231
  </div>
232
  </section>
233
 
234
  <!-- Features Section with Gradient Cards -->
235
+ <section id="features" class="py-20 bg-gradient-to-b from-white to-gray-50 relative overflow-hidden">
236
+ <div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-gradient-to-r from-blue-100 to-indigo-100 blur-3xl opacity-50"></div>
237
+ <div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-gradient-to-r from-pink-100 to-purple-100 blur-3xl opacity-50"></div>
238
+
239
+ <div class="container mx-auto px-6 relative z-10">
240
  <div class="text-center mb-16 max-w-3xl mx-auto">
241
+ <span class="inline-block bg-indigo-100 text-indigo-800 px-4 py-1 rounded-full text-sm font-medium mb-4 hover:rotate-1 transition-transform">✨ OUR PROCESS</span>
242
  <h2 class="text-3xl md:text-4xl font-bold mb-4">The <span class="gradient-text">Proven Framework</span> That <span class="gradient-text">Boosts Conversions</span></h2>
243
+ <p class="text-xl text-gray-600">We've distilled 20+ years of CRO expertise into a simple 4-step process that delivers <span class="font-bold text-indigo-600 underline decoration-wavy">consistent, measurable results</span></p>
244
  </div>
245
 
246
  <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
247
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 card-hover border border-gray-100 relative overflow-hidden group">
248
+ <div class="absolute -top-10 -right-10 w-20 h-20 bg-gradient-to-r from-blue-100 to-indigo-100 rounded-full opacity-20 group-hover:opacity-40 transition duration-500"></div>
249
+ <div class="w-14 h-14 bg-gradient-to-r from-blue-100 to-indigo-100 rounded-xl flex items-center justify-center mb-6 relative z-10">
250
+ <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center text-white shadow-lg group-hover:rotate-12 transition-transform">
251
  <i class="fas fa-search text-lg"></i>
252
  </div>
253
  </div>
254
+ <h3 class="text-xl font-bold mb-3 relative z-10">1. Deep Analysis</h3>
255
+ <p class="text-gray-600 relative z-10">Comprehensive audits of your website, user behavior, and funnel to identify all conversion leaks with heatmaps and session recordings.</p>
256
+ <div class="absolute -bottom-5 -left-5 w-16 h-16 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-full opacity-0 group-hover:opacity-100 transition duration-500"></div>
257
  </div>
258
 
259
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 card-hover border border-gray-100 relative overflow-hidden group">
260
+ <div class="absolute -top-10 -right-10 w-20 h-20 bg-gradient-to-r from-purple-100 to-pink-100 rounded-full opacity-20 group-hover:opacity-40 transition duration-500"></div>
261
+ <div class="w-14 h-14 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl flex items-center justify-center mb-6 relative z-10">
262
+ <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg flex items-center justify-center text-white shadow-lg group-hover:rotate-12 transition-transform">
263
  <i class="fas fa-lightbulb text-lg"></i>
264
  </div>
265
  </div>
266
+ <h3 class="text-xl font-bold mb-3 relative z-10">2. Hypothesis Creation</h3>
267
+ <p class="text-gray-600 relative z-10">Data-driven test hypotheses with clear success metrics tailored to your specific conversion bottlenecks.</p>
268
+ <div class="absolute -bottom-5 -left-5 w-16 h-16 bg-gradient-to-r from-purple-50 to-pink-50 rounded-full opacity-0 group-hover:opacity-100 transition duration-500"></div>
269
  </div>
270
 
271
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 card-hover border border-gray-100 relative overflow-hidden group">
272
+ <div class="absolute -top-10 -right-10 w-20 h-20 bg-gradient-to-r from-green-100 to-teal-100 rounded-full opacity-20 group-hover:opacity-40 transition duration-500"></div>
273
+ <div class="w-14 h-14 bg-gradient-to-r from-green-100 to-teal-100 rounded-xl flex items-center justify-center mb-6 relative z-10">
274
+ <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-teal-600 rounded-lg flex items-center justify-center text-white shadow-lg group-hover:rotate-12 transition-transform">
275
  <i class="fas fa-flask text-lg"></i>
276
  </div>
277
  </div>
278
+ <h3 class="text-xl font-bold mb-3 relative z-10">3. Rapid Testing</h3>
279
+ <p class="text-gray-600 relative z-10">A/B, multivariate, and split tests with statistical significance to validate improvements before full implementation.</p>
280
+ <div class="absolute -bottom-5 -left-5 w-16 h-16 bg-gradient-to-r from-green-50 to-teal-50 rounded-full opacity-0 group-hover:opacity-100 transition duration-500"></div>
281
  </div>
282
 
283
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 card-hover border border-gray-100 relative overflow-hidden group">
284
+ <div class="absolute -top-10 -right-10 w-20 h-20 bg-gradient-to-r from-yellow-100 to-orange-100 rounded-full opacity-20 group-hover:opacity-40 transition duration-500"></div>
285
+ <div class="w-14 h-14 bg-gradient-to-r from-yellow-100 to-orange-100 rounded-xl flex items-center justify-center mb-6 relative z-10">
286
+ <div class="w-10 h-10 bg-gradient-to-r from-yellow-500 to-orange-600 rounded-lg flex items-center justify-center text-white shadow-lg group-hover:rotate-12 transition-transform">
287
  <i class="fas fa-chart-line text-lg"></i>
288
  </div>
289
  </div>
290
+ <h3 class="text-xl font-bold mb-3 relative z-10">4. Scale & Optimize</h3>
291
+ <p class="text-gray-600 relative z-10">Winning variations implemented site-wide while continuously optimizing for even better results.</p>
292
+ <div class="absolute -bottom-5 -left-5 w-16 h-16 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-full opacity-0 group-hover:opacity-100 transition duration-500"></div>
293
  </div>
294
  </div>
295
  </div>
296
  </section>
297
 
298
  <!-- Results Section with Animated Stats -->
299
+ <section id="results" class="py-20 bg-gradient-to-b from-gray-50 to-white relative overflow-hidden">
300
+ <div class="absolute top-0 left-0 w-full h-full opacity-5">
301
+ <div class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-gradient-to-r from-blue-200 to-indigo-200 blur-3xl"></div>
302
+ <div class="absolute bottom-1/4 right-1/4 w-32 h-32 rounded-full bg-gradient-to-r from-purple-200 to-pink-200 blur-3xl"></div>
303
+ </div>
304
+
305
+ <div class="container mx-auto px-6 relative z-10">
306
  <div class="text-center mb-16 max-w-3xl mx-auto">
307
+ <span class="inline-block bg-green-100 text-green-800 px-4 py-1 rounded-full text-sm font-medium mb-4 hover:rotate-1 transition-transform">📈 PROVEN RESULTS</span>
308
  <h2 class="text-3xl md:text-4xl font-bold mb-4">Real <span class="gradient-text">Measurable Impact</span> For Our Clients</h2>
309
  <p class="text-xl text-gray-600">Don't take our word for it - see the <span class="font-bold text-green-600">quantifiable results</span> we've delivered for businesses like yours</p>
310
  </div>
311
 
312
  <div class="grid md:grid-cols-3 gap-6 mb-16">
313
+ <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover border border-gray-100 relative overflow-hidden group">
314
+ <div class="text-5xl font-bold mb-4 gradient-text group-hover:scale-110 transition-transform">127%</div>
315
  <p class="text-gray-600 mb-6">Average conversion increase across all clients</p>
316
+ <div class="h-1 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full w-3/4 mx-auto relative overflow-hidden">
317
+ <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full animate-grow" style="animation: grow 1s ease-out forwards; transform-origin: left;"></div>
318
+ </div>
319
+ <div class="absolute -bottom-10 -right-10 w-20 h-20 bg-gradient-to-r from-blue-100 to-indigo-100 rounded-full opacity-20 group-hover:opacity-40 transition duration-500"></div>
320
  </div>
321
 
322
+ <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover border border-gray-100 relative overflow-hidden group">
323
+ <div class="text-5xl font-bold mb-4 gradient-text group-hover:scale-110 transition-transform">2.4x</div>
324
  <p class="text-gray-600 mb-6">Average ROI on CRO investment</p>
325
+ <div class="h-1 bg-gradient-to-r from-green-400 to-blue-500 rounded-full w-3/4 mx-auto relative overflow-hidden">
326
+ <div class="absolute inset-0 bg-gradient-to-r from-green-400 to-blue-500 rounded-full animate-grow" style="animation: grow 1.2s ease-out forwards; transform-origin: left;"></div>
327
+ </div>
328
+ <div class="absolute -bottom-10 -right-10 w-20 h-20 bg-gradient-to-r from-green-100 to-teal-100 rounded-full opacity-20 group-hover:opacity-40 transition duration-500"></div>
329
  </div>
330
 
331
+ <div class="bg-white p-8 rounded-xl shadow-md text-center card-hover border border-gray-100 relative overflow-hidden group">
332
+ <div class="text-5xl font-bold mb-4 gradient-text group-hover:scale-110 transition-transform">30</div>
333
  <p class="text-gray-600 mb-6">Days to see significant improvements</p>
334
+ <div class="h-1 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full w-3/4 mx-auto relative overflow-hidden">
335
+ <div class="absolute inset-0 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full animate-grow" style="animation: grow 1.4s ease-out forwards; transform-origin: left;"></div>
336
+ </div>
337
+ <div class="absolute -bottom-10 -right-10 w-20 h-20 bg-gradient-to-r from-purple-100 to-pink-100 rounded-full opacity-20 group-hover:opacity-40 transition duration-500"></div>
338
  </div>
339
  </div>
340
 
341
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden card-hover group">
342
  <div class="md:flex">
343
+ <div class="md:w-1/2 p-12 relative">
344
+ <span class="inline-block bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs font-medium mb-4 group-hover:scale-105 transition-transform">📊 CASE STUDY</span>
345
  <h3 class="text-2xl font-bold mb-4">Ecommerce Brand: <span class="gradient-text">125% Conversion Boost</span></h3>
346
  <p class="text-gray-600 mb-6">An online fashion retailer was struggling with a 2.8% conversion rate and high cart abandonment. After implementing our CRO framework:</p>
347
  <ul class="space-y-3 mb-8">
348
  <li class="flex items-start">
349
+ <div class="w-5 h-5 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
350
  <i class="fas fa-check text-xs"></i>
351
  </div>
352
  <span class="flex-1"><span class="font-bold">Conversion rate increased to 6.3% (+125%)</span> through optimized product pages and checkout flow</span>
353
  </li>
354
  <li class="flex items-start">
355
+ <div class="w-5 h-5 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
356
  <i class="fas fa-check text-xs"></i>
357
  </div>
358
  <span class="flex-1"><span class="font-bold">Average order value grew by 18%</span> with strategic upsell placements</span>
359
  </li>
360
  <li class="flex items-start">
361
+ <div class="w-5 h-5 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
362
  <i class="fas fa-check text-xs"></i>
363
  </div>
364
  <span class="flex-1"><span class="font-bold">Cart abandonment reduced by 42%</span> through exit-intent offers and simplified checkout</span>
365
  </li>
366
  </ul>
367
+ <a href="#" class="inline-flex items-center text-indigo-600 font-medium hover:text-indigo-800 group-hover:underline">
368
  Read full case study
369
  <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
370
  </a>
371
+ <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-full opacity-20 group-hover:opacity-40 transition duration-500"></div>
372
  </div>
373
+ <div class="md:w-1/2 bg-gradient-to-br from-blue-50 to-indigo-50 flex items-center justify-center p-8 relative overflow-hidden">
374
+ <div class="relative w-full max-w-md floating" style="animation-duration: 8s;">
375
  <img src="https://via.placeholder.com/500x350/F3F4F6/3B82F6?text=Before+2.8%" alt="Before CRO" class="rounded-lg shadow-lg w-full relative z-10 border-2 border-white">
376
  <img src="https://via.placeholder.com/500x350/E5E7EB/7C3AED?text=After+6.3%" alt="After CRO" class="rounded-lg shadow-lg w-full absolute -bottom-4 -right-4 z-0 border-2 border-white">
377
+ <div class="absolute -bottom-2 -right-2 bg-white px-4 py-2 rounded-full shadow-md z-20 animate-pulse">
378
  <span class="text-green-600 font-bold">+125%</span>
379
  </div>
380
  </div>
381
+ <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-gradient-to-r from-blue-200 to-indigo-200 rounded-full blur-3xl opacity-30"></div>
382
  </div>
383
  </div>
384
  </div>
 
386
  </section>
387
 
388
  <!-- Testimonials with Gradient Background -->
389
+ <section id="testimonials" class="py-20 testimonial-gradient text-white relative overflow-hidden">
390
+ <div class="absolute inset-0 noise-bg opacity-10"></div>
391
+ <div class="container mx-auto px-6 relative z-10">
392
  <div class="text-center mb-16 max-w-3xl mx-auto">
393
+ <span class="inline-block bg-white/20 px-4 py-1 rounded-full text-sm font-medium mb-4 hover:rotate-1 transition-transform">💖 CLIENT LOVE</span>
394
  <h2 class="text-3xl md:text-4xl font-bold mb-4 glow-text">What Our <span class="text-yellow-300">Clients Say</span></h2>
395
  <p class="text-xl text-white/90">Hear from businesses that transformed their results with our CRO expertise</p>
396
  </div>
397
 
398
  <div class="grid md:grid-cols-3 gap-8">
399
+ <div class="glass-morphism p-8 rounded-xl hover:border-white/40 transition-all duration-300 card-hover group">
400
  <div class="flex items-center mb-6">
401
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" class="w-12 h-12 rounded-full mr-4 border-2 border-white group-hover:scale-110 transition-transform">
402
  <div>
403
  <h4 class="font-bold">Sarah Johnson</h4>
404
  <p class="text-white/70 text-sm">Marketing Director, FashionCo</p>
 
406
  </div>
407
  <p class="mb-6">"Working with ConversionRocket was a game-changer. They took our conversion rate from industry average to best-in-class in just 8 weeks. The data-driven approach gave us confidence in every change."</p>
408
  <div class="flex text-yellow-400">
409
+ <i class="fas fa-star animate-bounce" style="animation-delay: 0.1s;"></i>
410
+ <i class="fas fa-star animate-bounce" style="animation-delay: 0.2s;"></i>
411
+ <i class="fas fa-star animate-bounce" style="animation-delay: 0.3s;"></i>
412
+ <i class="fas fa-star animate-bounce" style="animation-delay: 0.4s;"></i>
413
+ <i class="fas fa-star animate-bounce" style="animation-delay: 0.5s;"></i>
414
  </div>
415
+ <div class="absolute -bottom-10 -right-10 w-20 h-20 bg-gradient-to-r from-blue-200 to-teal-200 rounded-full opacity-20 group-hover:opacity-40 transition duration-500"></div>
416
  </div>
417
 
418
+ <div class="glass-morphism p-8 rounded-xl hover:border-white/40 transition-all duration-300 card-hover group">
419
  <div class="flex items-center mb-6">
420
+ <img src="https://randomuser.me/api/portraits/men/65.jpg" class="w-12 h-12 rounded-full mr-4 border-2 border-white group-hover:scale-110 transition-transform">
421
  <div>
422
  <h4 class="font-bold">Michael Chen</h4>
423
  <p class="text-white/70 text-sm">CEO, TechStart</p>
 
425
  </div>
426
  <p class="mb-6">"The team identified conversion leaks we never would have found. Their testing methodology is rigorous and their recommendations are backed by solid data. Our revenue increased by 140% with the same traffic."</p>
427
  <div class="flex text-yellow-400">
428
+ <i class="fas fa-star animate-bounce" style="animation-delay: 0.1s;"></i>
429
+ <i class="fas fa-star animate-bounce" style="animation-delay: 0.2s;"></i>
430
+ <i class="fas fa-star animate-bounce" style="animation-delay: 0.3s;"></i>
431
+ <i class="fas fa-star animate-bounce" style="animation-delay: 0.4s;"></i>
432
+ <i class="fas fa-star animate-bounce" style="animation-delay: 0.5s;"></i>
433
  </div>
434
+ <div class="absolute -bottom-10 -right-10 w-20 h-20 bg-gradient-to-r from-indigo-200 to-purple-200 rounded-full opacity-20 group-hover:opacity-40 transition duration-500"></div>
435
  </div>
436
 
437
+ <div class="glass-morphism p-8 rounded-xl hover:border-white/40 transition-all duration-300 card-hover group">
438
  <div class="flex items-center mb-6">
439
+ <img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-12 h-12 rounded-full mr-4 border-2 border-white group-hover:scale-110 transition-transform">
440
  <div>
441
  <h4 class="font-bold">Emily Rodriguez</h4>
442
  <p class="text-white/70 text-sm">Ecommerce Manager, HomeGoods</p>
 
444
  </div>
445
  <p class="mb-6">"From the initial audit to ongoing optimization, every step was transparent and impactful. We saw a 92% increase in mobile conversions alone. Their expertise paid for itself many times over."</p>
446
  <div class="flex text-yellow-400">
447
+ <i class="fas fa-star animate-bounce" style="animation-delay: 0.1s;"></i>
448
+ <i class="fas fa-star animate-bounce" style="animation-delay: 0.2s;"></i>
449
+ <i class="fas fa-star animate-bounce" style="animation-delay: 0.3s;"></i>
450
+ <i class="fas fa-star animate-bounce" style="animation-delay: 0.4s;"></i>
451
+ <i class="fas fa-star animate-bounce" style="animation-delay: 0.5s;"></i>
452
  </div>
453
+ <div class="absolute -bottom-10 -right-10 w-20 h-20 bg-gradient-to-r from-teal-200 to-green-200 rounded-full opacity-20 group-hover:opacity-40 transition duration-500"></div>
454
  </div>
455
  </div>
456
  </div>
457
  </section>
458
 
459
  <!-- Pricing with Vibrant Gradient -->
460
+ <section id="pricing" class="py-20 bg-white relative overflow-hidden">
461
+ <div class="absolute top-0 left-0 w-full h-full opacity-5">
462
+ <div class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-gradient-to-r from-yellow-200 to-orange-200 blur-3xl"></div>
463
+ <div class="absolute bottom-1/4 right-1/4 w-32 h-32 rounded-full bg-gradient-to-r from-pink-200 to-purple-200 blur-3xl"></div>
464
+ </div>
465
+
466
+ <div class="container mx-auto px-6 relative z-10">
467
  <div class="text-center mb-16 max-w-3xl mx-auto">
468
+ <span class="inline-block bg-yellow-100 text-yellow-800 px-4 py-1 rounded-full text-sm font-medium mb-4 hover:rotate-1 transition-transform">💰 PRICING</span>
469
  <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, <span class="gradient-text">Transparent Pricing</span></h2>
470
  <p class="text-xl text-gray-600">Choose the plan that fits your business needs and budget</p>
471
  </div>
472
 
473
  <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
474
+ <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-200 hover:border-indigo-300 transition-all duration-300 card-hover group">
475
  <h3 class="text-xl font-bold mb-4">Starter</h3>
476
  <p class="text-gray-600 mb-6">Perfect for small businesses getting started with CRO</p>
477
  <div class="text-4xl font-bold mb-6">$1,997<span class="text-lg text-gray-500 font-normal">/mo</span></div>
478
  <ul class="space-y-3 mb-8">
479
  <li class="flex items-start">
480
+ <div class="w-5 h-5 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
481
  <i class="fas fa-check text-xs"></i>
482
  </div>
483
  <span>Comprehensive conversion audit</span>
484
  </li>
485
  <li class="flex items-start">
486
+ <div class="w-5 h-5 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
487
  <i class="fas fa-check text-xs"></i>
488
  </div>
489
  <span>5 high-impact tests per month</span>
490
  </li>
491
  <li class="flex items-start">
492
+ <div class="w-5 h-5 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
493
  <i class="fas fa-check text-xs"></i>
494
  </div>
495
  <span>Weekly optimization reports</span>
496
  </li>
497
  <li class="flex items-start">
498
+ <div class="w-5 h-5 bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
499
  <i class="fas fa-check text-xs"></i>
500
  </div>
501
  <span>Email support</span>
502
  </li>
503
  </ul>
504
+ <a href="#cta" class="block text-center bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-3 px-6 rounded-lg transition duration-300 group-hover:scale-105">Get Started</a>
505
+ <div class="absolute -bottom-10 -right-10 w-20 h-20 bg-gradient-to-r from-blue-100 to-indigo-100 rounded-full opacity-20 group-hover:opacity-40 transition duration-500"></div>
506
  </div>
507
 
508
+ <div class="bg-white p-8 rounded-xl shadow-2xl border-2 border-indigo-500 relative card-hover transform scale-[1.02] group">
509
+ <div class="absolute top-0 right-0 bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-4 py-1 text-xs font-bold rounded-bl rounded-tr">🔥 MOST POPULAR</div>
510
  <h3 class="text-xl font-bold mb-4">Growth</h3>
511
  <p class="text-gray-600 mb-6">Ideal for scaling businesses serious about conversions</p>
512
  <div class="text-4xl font-bold mb-6">$3,997<span class="text-lg text-gray-500 font-normal">/mo</span></div>
513
  <ul class="space-y-3 mb-8">
514
  <li class="flex items-start">
515
+ <div class="w-5 h-5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
516
  <i class="fas fa-check text-xs"></i>
517
  </div>
518
  <span>Everything in Starter plus:</span>
519
  </li>
520
  <li class="flex items-start">
521
+ <div class="w-5 h-5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
522
  <i class="fas fa-check text-xs"></i>
523
  </div>
524
  <span>15 high-impact tests per month</span>
525
  </li>
526
  <li class="flex items-start">
527
+ <div class="w-5 h-5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
528
  <i class="fas fa-check text-xs"></i>
529
  </div>
530
  <span>Heatmap & session recordings</span>
531
  </li>
532
  <li class="flex items-start">
533
+ <div class="w-5 h-5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
534
  <i class="fas fa-check text-xs"></i>
535
  </div>
536
  <span>Priority support</span>
537
  </li>
538
  <li class="flex items-start">
539
+ <div class="w-5 h-5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
540
  <i class="fas fa-check text-xs"></i>
541
  </div>
542
  <span>Quarterly strategy sessions</span>
543
  </li>
544
  </ul>
545
+ <a href="#cta" class="block text-center bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300 shadow-lg hover:shadow-xl group-hover:scale-105">Get Started</a>
546
+ <div class="absolute -bottom-10 -right-10 w-20 h-20 bg-gradient-to-r from-purple-100 to-indigo-100 rounded-full opacity-20 group-hover:opacity-40 transition duration-500"></div>
547
  </div>
548
 
549
+ <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-200 hover:border-purple-300 transition-all duration-300 card-hover group">
550
  <h3 class="text-xl font-bold mb-4">Enterprise</h3>
551
  <p class="text-gray-600 mb-6">For large businesses needing custom solutions</p>
552
+ <div class="text-4xl font-bold mb-6 gradient-text group-hover:scale-110 transition-transform">Custom</div>
553
  <ul class="space-y-3 mb-8">
554
  <li class="flex items-start">
555
+ <div class="w-5 h-5 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
556
  <i class="fas fa-check text-xs"></i>
557
  </div>
558
  <span>Everything in Growth plus:</span>
559
  </li>
560
  <li class="flex items-start">
561
+ <div class="w-5 h-5 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
562
  <i class="fas fa-check text-xs"></i>
563
  </div>
564
  <span>Unlimited tests & optimizations</span>
565
  </li>
566
  <li class="flex items-start">
567
+ <div class="w-5 h-5 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
568
  <i class="fas fa-check text-xs"></i>
569
  </div>
570
  <span>Dedicated CRO specialist</span>
571
  </li>
572
  <li class="flex items-start">
573
+ <div class="w-5 h-5 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
574
  <i class="fas fa-check text-xs"></i>
575
  </div>
576
  <span>Advanced personalization</span>
577
  </li>
578
  <li class="flex items-start">
579
+ <div class="w-5 h-5 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full flex items-center justify-center text-white mr-3 mt-1 group-hover:rotate-12 transition-transform">
580
  <i class="fas fa-check text-xs"></i>
581
  </div>
582
  <span>24/7 VIP support</span>
583
  </li>
584
  </ul>
585
+ <a href="#cta" class="block text-center bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-3 px-6 rounded-lg transition duration-300 group-hover:scale-105">Contact Sales</a>
586
+ <div class="absolute -bottom-10 -right-10 w-20 h-20 bg-gradient-to-r from-pink-100 to-purple-100 rounded-full opacity-20 group-hover:opacity-40 transition duration-500"></div>
587
  </div>
588
  </div>
589
 
590
+ <div class="mt-12 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl shadow-lg p-8 max-w-4xl mx-auto border border-indigo-100 relative overflow-hidden card-hover group">
591
+ <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-full blur-3xl opacity-30"></div>
592
+ <div class="text-center mb-6 relative z-10">
593
  <h3 class="text-2xl font-bold mb-2 gradient-text">Not sure which plan is right for you?</h3>
594
  <p class="text-gray-600">Schedule a free 30-minute consultation with our CRO expert</p>
595
  </div>
596
+ <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-4 relative z-10">
597
+ <a href="#" class="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-medium py-3 px-8 rounded-lg transition duration-300 flex items-center shadow-lg hover:shadow-xl group-hover:scale-105">
598
  <i class="far fa-calendar-alt mr-2"></i> Book a Call
599
  </a>
600
+ <a href="tel:+18005551234" class="border border-gray-300 bg-white hover:bg-gray-50 text-gray-800 font-medium py-3 px-8 rounded-lg transition duration-300 flex items-center group-hover:scale-105">
601
  <i class="fas fa-phone-alt mr-2"></i> Call Us Now
602
  </a>
603
  </div>
 
606
  </section>
607
 
608
  <!-- CTA Section with Vibrant Gradient -->
609
+ <section id="cta" class="py-20 cta-gradient text-white relative overflow-hidden">
610
+ <div class="absolute inset-0 noise-bg opacity-10"></div>
611
+ <div class="container mx-auto px-6 relative z-10">
612
  <div class="max-w-4xl mx-auto text-center">
613
  <h2 class="text-3xl md:text-4xl font-bold mb-6 glow-text">Ready to <span class="text-yellow-300">Transform</span> Your Conversion Rate?</h2>
614
  <p class="text-xl text-white/90 mb-8">Join hundreds of businesses increasing their revenue with our proven CRO framework. Start with a <span class="font-bold">risk-free 14-day trial</span>.</p>
615
 
616
+ <div class="bg-white rounded-xl shadow-2xl p-8 max-w-2xl mx-auto card-hover">
617
  <h3 class="text-2xl font-bold text-gray-800 mb-4">Start Your Free Trial Today</h3>
618
  <form class="space-y-4">
619
  <div class="grid md:grid-cols-2 gap-4">
620
+ <div class="relative">
621
+ <input type="text" placeholder="First Name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-800">
622
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
623
+ <i class="fas fa-user text-gray-400"></i>
624
+ </div>
625
+ </div>
626
+ <div class="relative">
627
+ <input type="text" placeholder="Last Name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-800">
628
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
629
+ <i class="fas fa-user text-gray-400"></i>
630
+ </div>
631
+ </div>
632
  </div>
633
+ <div class="relative">
634
+ <input type="email" placeholder="Email Address" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-800">
635
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
636
+ <i class="fas fa-envelope text-gray-400"></i>
637
+ </div>
638
+ </div>
639
+ <div class="relative">
640
+ <input type="tel" placeholder="Phone Number" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-800">
641
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
642
+ <i class="fas fa-phone text-gray-400"></i>
643
+ </div>
644
+ </div>
645
+ <div class="relative">
646
+ <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-800 appearance-none">
647
+ <option>Select Plan</option>
648
+ <option>Starter - $1,997/mo</option>
649
+ <option>Growth - $3,997/mo</option>
650
+ <option>Enterprise - Custom</option>
651
+ </select>
652
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
653
+ <i class="fas fa-chevron-down text-gray-400"></i>
654
+ </div>
655
+ </div>
656
+ <button type="submit" class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-bold py-4 px-6 rounded-lg transition duration-300 shadow-lg hover:shadow-xl flex items-center justify-center">
657
+ <span class="mr-2">Start Free Trial</span>
658
+ <i class="fas fa-paper-plane"></i>
659
+ </button>
660
  </form>
661
  <p class="text-sm text-gray-500 mt-4">No credit card required. Cancel anytime.</p>
662
  </div>
663
 
664
  <div class="mt-8 flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-8">
665
+ <div class="flex items-center bg-white/10 px-4 py-2 rounded-full">
666
  <i class="fas fa-shield-alt text-white/70 text-xl mr-3"></i>
667
  <span>100% secure and confidential</span>
668
  </div>
669
+ <div class="flex items-center bg-white/10 px-4 py-2 rounded-full">
670
  <i class="fas fa-lock text-white/70 text-xl mr-3"></i>
671
  <span>Your data is protected</span>
672
  </div>
673
+ <div class="flex items-center bg-white/10 px-4 py-2 rounded-full">
674
  <i class="fas fa-handshake text-white/70 text-xl mr-3"></i>
675
  <span>No long-term contracts</span>
676
  </div>
 
680
  </section>
681
 
682
  <!-- FAQ -->
683
+ <section class="py-20 bg-white relative overflow-hidden">
684
+ <div class="absolute top-0 left-0 w-full h-full opacity-5">
685
+ <div class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-gradient-to-r from-blue-200 to-indigo-200 blur-3xl"></div>
686
+ <div class="absolute bottom-1/4 right-1/4 w-32 h-32 rounded-full bg-gradient-to-r from-purple-200 to-pink-200 blur-3xl"></div>
687
+ </div>
688
+
689
+ <div class="container mx-auto px-6 max-w-4xl relative z-10">
690
  <div class="text-center mb-16">
691
  <h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently Asked Questions</h2>
692
  <p class="text-xl text-gray-600">Everything you need to know about our CRO services</p>
693
  </div>
694
 
695
  <div class="space-y-4">
696
+ <div class="border border-gray-200 rounded-xl overflow-hidden hover:border-indigo-300 transition duration-300 group">
697
+ <button class="flex items-center justify-between w-full p-6 text-left focus:outline-none group-hover:bg-gray-50 transition-colors">
698
  <span class="text-lg font-medium group-hover:text-indigo-600 transition-colors">How quickly will I see results?</span>
699
+ <i class="fas fa-chevron-down text-indigo-600 transition-transform duration-300 transform group-[.active]:rotate-180"></i>
700
  </button>
701
+ <div class="px-6 pb-6 hidden group-[.active]:block">
702
  <p class="text-gray-600">Most clients see measurable improvements within 30 days, with significant gains typically appearing in the first 90 days. The exact timeline depends on your current conversion rate, website traffic, and how quickly we can implement and validate tests.</p>
703
  </div>
704
  </div>
705
 
706
+ <div class="border border-gray-200 rounded-xl overflow-hidden hover:border-indigo-300 transition duration-300 group">
707
+ <button class="flex items-center justify-between w-full p-6 text-left focus:outline-none group-hover:bg-gray-50 transition-colors">
708
  <span class="text-lg font-medium group-hover:text-indigo-600 transition-colors">What's your testing methodology?</span>
709
+ <i class="fas fa-chevron-down text-indigo-600 transition-transform duration-300 transform group-[.active]:rotate-180"></i>
710
  </button>
711
+ <div class="px-6 pb-6 hidden group-[.active]:block">
712
  <p class="text-gray-600">We follow a rigorous, data-driven approach: 1) Comprehensive analysis to identify leaks, 2) Hypothesis creation based on behavioral data, 3) Rapid testing with statistical significance, 4) Implementation of winning variations. All tests are designed to provide clear, actionable insights.</p>
713
  </div>
714
  </div>
715
 
716
+ <div class="border border-gray-200 rounded-xl overflow-hidden hover:border-indigo-300 transition duration-300 group">
717
+ <button class="flex items-center justify-between w-full p-6 text-left focus:outline-none group-hover:bg-gray-50 transition-colors">
718
  <span class="text-lg font-medium group-hover:text-indigo-600 transition-colors">Do you work with businesses in my industry?</span>
719
+ <i class="fas fa-chevron-down text-indigo-600 transition-transform duration-300 transform group-[.active]:rotate-180"></i>
720
  </button>
721
+ <div class="px-6 pb-6 hidden group-[.active]:block">
722
  <p class="text-gray-600">Our CRO framework applies universally across industries. We've successfully worked with ecommerce, SaaS, financial services, healthcare, education, and more. The principles of conversion optimization remain consistent, though the specific tactics may vary by industry.</p>
723
  </div>
724
  </div>
725
 
726
+ <div class="border border-gray-200 rounded-xl overflow-hidden hover:border-indigo-300 transition duration-300 group">
727
+ <button class="flex items-center justify-between w-full p-6 text-left focus:outline-none group-hover:bg-gray-50 transition-colors">
728
  <span class="text-lg font-medium group-hover:text-indigo-600 transition-colors">How do you measure success?</span>
729
+ <i class="fas fa-chevron-down text-indigo-600 transition-transform duration-300 transform group-[.active]:rotate-180"></i>
730
  </button>
731
+ <div class="px-6 pb-6 hidden group-[.active]:block">
732
  <p class="text-gray-600">We track multiple KPIs including conversion rate, average order value, revenue per visitor, and customer lifetime value. Our primary metric is the improvement in your bottom-line revenue. All results are measured with statistical significance to ensure they're real and repeatable.</p>
733
  </div>
734
  </div>
735
 
736
+ <div class="border border-gray-200 rounded-xl overflow-hidden hover:border-indigo-300 transition duration-300 group">
737
+ <button class="flex items-center justify-between w-full p-6 text-left focus:outline-none group-hover:bg-gray-50 transition-colors">
738
  <span class="text-lg font-medium group-hover:text-indigo-600 transition-colors">What if I'm not satisfied with the results?</span>
739
+ <i class="fas fa-chevron-down text-indigo-600 transition-transform duration-300 transform group-[.active]:rotate-180"></i>
740
  </button>
741
+ <div class="px-6 pb-6 hidden group-[.active]:block">
742
  <p class="text-gray-600">We're confident in our ability to improve your conversions. That's why we offer a 30-day money-back guarantee if we can't identify at least 3 high-impact optimization opportunities during our initial audit phase. Client satisfaction is our top priority.</p>
743
  </div>
744
  </div>
 
754
  </section>
755
 
756
  <!-- Footer with Gradient Accent -->
757
+ <footer class="bg-gray-900 text-gray-400 py-16 relative overflow-hidden">
758
+ <div class="absolute inset-0">
759
+ <div class="absolute top-0 left-0 w-full h-full bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10"></div>
760
+ </div>
761
+
762
+ <div class="container mx-auto px-6 relative z-10">
763
  <div class="grid md:grid-cols-5 gap-12">
764
  <div class="md:col-span-2">
765
  <div class="flex items-center mb-6">
766
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center text-white font-bold text-xl shadow-lg">CR</div>
767
  <span class="ml-3 text-xl font-bold text-white">Conversion<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">Rocket</span></span>
768
  </div>
769
  <p class="mb-6">Helping businesses increase conversions and revenue through data-driven optimization since 2003.</p>
770
  <div class="flex space-x-4">
771
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-white transition duration-300 hover:-translate-y-1 hover:text-indigo-400">
772
  <i class="fab fa-facebook-f"></i>
773
  </a>
774
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-white transition duration-300 hover:-translate-y-1 hover:text-blue-400">
775
  <i class="fab fa-twitter"></i>
776
  </a>
777
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-white transition duration-300 hover:-translate-y-1 hover:text-blue-500">
778
  <i class="fab fa-linkedin-in"></i>
779
  </a>
780
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center text-white transition duration-300 hover:-translate-y-1 hover:text-pink-500">
781
  <i class="fab fa-instagram"></i>
782
  </a>
783
  </div>
 
786
  <div>
787
  <h4 class="text-white font-bold text-lg mb-6">Company</h4>
788
  <ul class="space-y-3">
789
+ <li><a href="#" class="hover:text-white transition duration-300 hover:pl-2">About Us</a></li>
790
+ <li><a href="#" class="hover:text-white transition duration-300 hover:pl-2">Careers</a></li>
791
+ <li><a href="#" class="hover:text-white transition duration-300 hover:pl-2">Case Studies</a></li>
792
+ <li><a href="#" class="hover:text-white transition duration-300 hover:pl-2">Blog</a></li>
793
+ <li><a href="#" class="hover:text-white transition duration-300 hover:pl-2">Contact</a></li>
794
  </ul>
795
  </div>
796
 
797
  <div>
798
  <h4 class="text-white font-bold text-lg mb-6">Services</h4>
799
  <ul class="space-y-3">
800
+ <li><a href="#" class="hover:text-white transition duration-300 hover:pl-2">CRO Audit</a></li>
801
+ <li><a href="#" class="hover:text-white transition duration-300 hover:pl-2">A/B Testing</a></li>
802
+ <li><a href="#" class="hover:text-white transition duration-300 hover:pl-2">UX Optimization</a></li>
803
+ <li><a href="#" class="hover:text-white transition duration-300 hover:pl-2">Landing Pages</a></li>
804
+ <li><a href="#" class="hover:text-white transition duration-300 hover:pl-2">Training</a></li>
805
  </ul>
806
  </div>
807
 
808
  <div>
809
  <h4 class="text-white font-bold text-lg mb-6">Resources</h4>
810
  <ul class="space-y-3">
811
+ <li><a href="#" class="hover:text-white transition duration-300 hover:pl-2">Guides</a></li>
812
+ <li><a href="#" class="hover:text-white transition duration-300 hover:pl-2">Webinars</a></li>
813
+ <li><a href="#" class="hover:text-white transition duration-300 hover:pl-2">Tools</a></li>
814
+ <li><a href="#" class="hover:text-white transition duration-300 hover:pl-2">Research</a></li>
815
+ <li><a href="#" class="hover:text-white transition duration-300 hover:pl-2">Help Center</a></li>
816
  </ul>
817
  </div>
818
  </div>
 
830
 
831
  <script>
832
  // FAQ toggle functionality
833
+ document.querySelectorAll('.border-gray-200
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
834
  </html>
prompts.txt CHANGED
@@ -2,4 +2,5 @@ create a cart web design with a 3 products in the with details in cart for a web
2
  add promotion banner to the page and add corousals by describing the website
3
  compress the given code
4
  Hey, you are an experienced CRO expert. You are somebody who has more than 20 years of experience as a conversion rate optimization expert. I want you to go through the entire landing page that I have given you with a critiquing lens. Analyze every section. of the current landing page that I have attached. Critique it and give me recommendations on how I can improve this landing page. Currently, this landing page converts at 6%. I want to be able to take. theconversion rate of this landing page to15%. And I want you as a CRO expert, while you creating . it, I alsowant you to be able to. give me suggestions on what. arethe copy level changes that I can make and also what are the visual changes that I can make on the landing page to be able to improve this conversion rate from 6% to 15%. As an output, I want you to give me a new landing page copy that. Icould go ahead and use, which incorporates all of the suggestions that you would. begiving me. Please go ahead and do this.
5
- use vibrant mixed required gradient colors and make more attractive
 
 
2
  add promotion banner to the page and add corousals by describing the website
3
  compress the given code
4
  Hey, you are an experienced CRO expert. You are somebody who has more than 20 years of experience as a conversion rate optimization expert. I want you to go through the entire landing page that I have given you with a critiquing lens. Analyze every section. of the current landing page that I have attached. Critique it and give me recommendations on how I can improve this landing page. Currently, this landing page converts at 6%. I want to be able to take. theconversion rate of this landing page to15%. And I want you as a CRO expert, while you creating . it, I alsowant you to be able to. give me suggestions on what. arethe copy level changes that I can make and also what are the visual changes that I can make on the landing page to be able to improve this conversion rate from 6% to 15%. As an output, I want you to give me a new landing page copy that. Icould go ahead and use, which incorporates all of the suggestions that you would. begiving me. Please go ahead and do this.
5
+ use vibrant mixed required gradient colors and make more attractive
6
+ make more creative and attractive