Hugging Face's logo

Spaces:
Joel-08
/
ayo-s-progress
Running

App Files Community
Joel-08 commited on
Commit
b67c581
·
verified ·
1 Parent(s): 8d34b6e

help me create the frontend for an advertisement website namely Ayo station - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +660 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ayo S Progress
3
- emoji: 📉
4
- colorFrom: indigo
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ayo-s-progress
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,660 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Ayo Station - Premium Advertising Platform</title>
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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4F46E5',
15
+ secondary: '#10B981',
16
+ dark: '#1F2937',
17
+ light: '#F9FAFB',
18
+ },
19
+ fontFamily: {
20
+ sans: ['Inter', 'sans-serif'],
21
+ },
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
28
+
29
+ body {
30
+ font-family: 'Inter', sans-serif;
31
+ }
32
+
33
+ .hero-gradient {
34
+ background: linear-gradient(135deg, #4F46E5 0%, #10B981 100%);
35
+ }
36
+
37
+ .card-hover:hover {
38
+ transform: translateY(-5px);
39
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
40
+ }
41
+
42
+ .stat-card {
43
+ transition: all 0.3s ease;
44
+ }
45
+
46
+ .stat-card:hover {
47
+ transform: scale(1.05);
48
+ }
49
+
50
+ .testimonial-card {
51
+ transition: all 0.3s ease;
52
+ }
53
+
54
+ .testimonial-card:hover {
55
+ transform: translateY(-8px);
56
+ }
57
+
58
+ .pricing-card:hover {
59
+ transform: scale(1.03);
60
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
61
+ }
62
+ </style>
63
+ </head>
64
+ <body class="bg-gray-50">
65
+ <!-- Navigation -->
66
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
67
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
68
+ <div class="flex justify-between h-16">
69
+ <div class="flex items-center">
70
+ <div class="flex-shrink-0 flex items-center">
71
+ <i class="fas fa-bullhorn text-primary text-2xl mr-2"></i>
72
+ <span class="text-xl font-bold text-dark">Ayo Station</span>
73
+ </div>
74
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
75
+ <a href="#" class="text-primary border-b-2 border-primary px-3 py-2 text-sm font-medium">Home</a>
76
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Features</a>
77
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Pricing</a>
78
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Advertisers</a>
79
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Publishers</a>
80
+ </div>
81
+ </div>
82
+ <div class="hidden md:flex items-center space-x-4">
83
+ <a href="#" class="text-gray-500 hover:text-primary px-3 py-2 text-sm font-medium">Login</a>
84
+ <a href="#" class="bg-primary hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">Get Started</a>
85
+ </div>
86
+ <div class="-mr-2 flex items-center md:hidden">
87
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
88
+ <span class="sr-only">Open main menu</span>
89
+ <i class="fas fa-bars"></i>
90
+ </button>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Mobile menu -->
96
+ <div class="hidden md:hidden" id="mobile-menu">
97
+ <div class="pt-2 pb-3 space-y-1">
98
+ <a href="#" class="bg-primary text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
99
+ <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-700 block px-3 py-2 rounded-md text-base font-medium">Features</a>
100
+ <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-700 block px-3 py-2 rounded-md text-base font-medium">Pricing</a>
101
+ <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-700 block px-3 py-2 rounded-md text-base font-medium">Advertisers</a>
102
+ <a href="#" class="text-gray-500 hover:bg-gray-50 hover:text-gray-700 block px-3 py-2 rounded-md text-base font-medium">Publishers</a>
103
+ <div class="border-t border-gray-200 pt-4 pb-3">
104
+ <div class="space-y-1">
105
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">Login</a>
106
+ <a href="#" class="block w-full px-3 py-2 rounded-md text-center text-base font-medium text-white bg-primary hover:bg-indigo-700">Get Started</a>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </nav>
112
+
113
+ <!-- Hero Section -->
114
+ <section class="hero-gradient text-white">
115
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
116
+ <div class="md:flex md:items-center md:justify-between">
117
+ <div class="md:w-1/2 mb-10 md:mb-0">
118
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Amplify Your Brand with <span class="underline decoration-secondary">Ayo Station</span></h1>
119
+ <p class="text-xl mb-8 opacity-90">The most powerful advertising platform that connects brands with their ideal audiences across multiple channels.</p>
120
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
121
+ <a href="#" class="bg-white text-primary hover:bg-gray-100 px-6 py-3 rounded-md font-medium text-center">Start Advertising</a>
122
+ <a href="#" class="border-2 border-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-md font-medium text-center">Learn More</a>
123
+ </div>
124
+ </div>
125
+ <div class="md:w-1/2 relative">
126
+ <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-xl">
127
+ <div class="flex items-center mb-4">
128
+ <div class="bg-white text-primary p-2 rounded-full mr-3">
129
+ <i class="fas fa-chart-line text-xl"></i>
130
+ </div>
131
+ <h3 class="text-xl font-semibold">Real-time Analytics</h3>
132
+ </div>
133
+ <p class="mb-6 opacity-90">Track your campaign performance with our comprehensive dashboard that updates in real-time.</p>
134
+
135
+ <div class="flex items-center mb-4">
136
+ <div class="bg-white text-primary p-2 rounded-full mr-3">
137
+ <i class="fas fa-bullseye text-xl"></i>
138
+ </div>
139
+ <h3 class="text-xl font-semibold">Precision Targeting</h3>
140
+ </div>
141
+ <p class="mb-6 opacity-90">Reach your exact audience with our advanced demographic and behavioral targeting options.</p>
142
+
143
+ <div class="flex items-center">
144
+ <div class="bg-white text-primary p-2 rounded-full mr-3">
145
+ <i class="fas fa-robot text-xl"></i>
146
+ </div>
147
+ <h3 class="text-xl font-semibold">AI Optimization</h3>
148
+ </div>
149
+ <p class="opacity-90">Our algorithms automatically optimize your campaigns for maximum performance.</p>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </section>
155
+
156
+ <!-- Stats Section -->
157
+ <section class="bg-white py-16">
158
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
159
+ <div class="text-center mb-16">
160
+ <h2 class="text-3xl font-bold text-dark mb-4">Trusted by Leading Brands</h2>
161
+ <p class="text-gray-500 max-w-2xl mx-auto">We've helped thousands of businesses increase their reach and grow their revenue through targeted advertising.</p>
162
+ </div>
163
+
164
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
165
+ <div class="stat-card bg-light rounded-xl p-6 text-center shadow-sm hover:shadow-md">
166
+ <div class="text-primary text-4xl font-bold mb-2">10K+</div>
167
+ <div class="text-gray-600">Active Advertisers</div>
168
+ </div>
169
+ <div class="stat-card bg-light rounded-xl p-6 text-center shadow-sm hover:shadow-md">
170
+ <div class="text-primary text-4xl font-bold mb-2">500M+</div>
171
+ <div class="text-gray-600">Daily Impressions</div>
172
+ </div>
173
+ <div class="stat-card bg-light rounded-xl p-6 text-center shadow-sm hover:shadow-md">
174
+ <div class="text-primary text-4xl font-bold mb-2">92%</div>
175
+ <div class="text-gray-600">Customer Satisfaction</div>
176
+ </div>
177
+ <div class="stat-card bg-light rounded-xl p-6 text-center shadow-sm hover:shadow-md">
178
+ <div class="text-primary text-4xl font-bold mb-2">5X</div>
179
+ <div class="text-gray-600">Average ROI</div>
180
+ </div>
181
+ </div>
182
+
183
+ <div class="mt-16 grid grid-cols-2 md:grid-cols-5 gap-8 items-center">
184
+ <img src="https://via.placeholder.com/150x60?text=Brand+1" alt="Brand Logo" class="opacity-60 hover:opacity-100 transition-opacity">
185
+ <img src="https://via.placeholder.com/150x60?text=Brand+2" alt="Brand Logo" class="opacity-60 hover:opacity-100 transition-opacity">
186
+ <img src="https://via.placeholder.com/150x60?text=Brand+3" alt="Brand Logo" class="opacity-60 hover:opacity-100 transition-opacity">
187
+ <img src="https://via.placeholder.com/150x60?text=Brand+4" alt="Brand Logo" class="opacity-60 hover:opacity-100 transition-opacity">
188
+ <img src="https://via.placeholder.com/150x60?text=Brand+5" alt="Brand Logo" class="opacity-60 hover:opacity-100 transition-opacity">
189
+ </div>
190
+ </div>
191
+ </section>
192
+
193
+ <!-- Features Section -->
194
+ <section class="bg-gray-50 py-16">
195
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
196
+ <div class="text-center mb-16">
197
+ <h2 class="text-3xl font-bold text-dark mb-4">Powerful Advertising Features</h2>
198
+ <p class="text-gray-500 max-w-2xl mx-auto">Everything you need to create, manage, and optimize high-performing ad campaigns.</p>
199
+ </div>
200
+
201
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
202
+ <div class="card-hover bg-white rounded-xl p-8 shadow-sm transition-all duration-300">
203
+ <div class="bg-primary bg-opacity-10 text-primary p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
204
+ <i class="fas fa-crosshairs text-xl"></i>
205
+ </div>
206
+ <h3 class="text-xl font-semibold mb-3">Advanced Targeting</h3>
207
+ <p class="text-gray-600 mb-4">Reach your ideal customers with precision targeting based on demographics, interests, behaviors, and more.</p>
208
+ <a href="#" class="text-primary font-medium flex items-center">
209
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
210
+ </a>
211
+ </div>
212
+
213
+ <div class="card-hover bg-white rounded-xl p-8 shadow-sm transition-all duration-300">
214
+ <div class="bg-primary bg-opacity-10 text-primary p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
215
+ <i class="fas fa-chart-pie text-xl"></i>
216
+ </div>
217
+ <h3 class="text-xl font-semibold mb-3">Real-time Analytics</h3>
218
+ <p class="text-gray-600 mb-4">Get instant insights into your campaign performance with our comprehensive dashboard and reporting tools.</p>
219
+ <a href="#" class="text-primary font-medium flex items-center">
220
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
221
+ </a>
222
+ </div>
223
+
224
+ <div class="card-hover bg-white rounded-xl p-8 shadow-sm transition-all duration-300">
225
+ <div class="bg-primary bg-opacity-10 text-primary p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
226
+ <i class="fas fa-adjust text-xl"></i>
227
+ </div>
228
+ <h3 class="text-xl font-semibold mb-3">Multi-Channel Ads</h3>
229
+ <p class="text-gray-600 mb-4">Run campaigns across display, video, social, native, and search from a single platform.</p>
230
+ <a href="#" class="text-primary font-medium flex items-center">
231
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
232
+ </a>
233
+ </div>
234
+
235
+ <div class="card-hover bg-white rounded-xl p-8 shadow-sm transition-all duration-300">
236
+ <div class="bg-primary bg-opacity-10 text-primary p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
237
+ <i class="fas fa-robot text-xl"></i>
238
+ </div>
239
+ <h3 class="text-xl font-semibold mb-3">AI Optimization</h3>
240
+ <p class="text-gray-600 mb-4">Our machine learning algorithms automatically optimize your bids and placements for maximum ROI.</p>
241
+ <a href="#" class="text-primary font-medium flex items-center">
242
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
243
+ </a>
244
+ </div>
245
+
246
+ <div class="card-hover bg-white rounded-xl p-8 shadow-sm transition-all duration-300">
247
+ <div class="bg-primary bg-opacity-10 text-primary p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
248
+ <i class="fas fa-shield-alt text-xl"></i>
249
+ </div>
250
+ <h3 class="text-xl font-semibold mb-3">Fraud Protection</h3>
251
+ <p class="text-gray-600 mb-4">Advanced fraud detection ensures your budget is spent on real human traffic, not bots.</p>
252
+ <a href="#" class="text-primary font-medium flex items-center">
253
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
254
+ </a>
255
+ </div>
256
+
257
+ <div class="card-hover bg-white rounded-xl p-8 shadow-sm transition-all duration-300">
258
+ <div class="bg-primary bg-opacity-10 text-primary p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
259
+ <i class="fas fa-paint-brush text-xl"></i>
260
+ </div>
261
+ <h3 class="text-xl font-semibold mb-3">Creative Tools</h3>
262
+ <p class="text-gray-600 mb-4">Easily create stunning ads with our built-in design tools and templates.</p>
263
+ <a href="#" class="text-primary font-medium flex items-center">
264
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
265
+ </a>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </section>
270
+
271
+ <!-- How It Works Section -->
272
+ <section class="bg-white py-16">
273
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
274
+ <div class="text-center mb-16">
275
+ <h2 class="text-3xl font-bold text-dark mb-4">How Ayo Station Works</h2>
276
+ <p class="text-gray-500 max-w-2xl mx-auto">Get your ads running in minutes with our simple 4-step process.</p>
277
+ </div>
278
+
279
+ <div class="relative">
280
+ <div class="hidden md:block absolute top-0 left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-primary to-secondary"></div>
281
+
282
+ <div class="space-y-12 md:space-y-0">
283
+ <!-- Step 1 -->
284
+ <div class="md:flex md:items-center md:justify-between">
285
+ <div class="md:w-5/12 mb-8 md:mb-0">
286
+ <div class="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold mb-4 mx-auto md:mx-0">1</div>
287
+ <h3 class="text-xl font-semibold mb-3 text-center md:text-left">Create Your Campaign</h3>
288
+ <p class="text-gray-600 text-center md:text-left">Set your budget, targeting, and goals. Our intuitive interface makes campaign setup a breeze.</p>
289
+ </div>
290
+ <div class="md:w-6/12">
291
+ <img src="https://via.placeholder.com/600x400?text=Create+Campaign" alt="Create Campaign" class="rounded-xl shadow-md w-full">
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Step 2 -->
296
+ <div class="md:flex md:items-center md:justify-between md:flex-row-reverse">
297
+ <div class="md:w-5/12 mb-8 md:mb-0">
298
+ <div class="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold mb-4 mx-auto md:mx-0">2</div>
299
+ <h3 class="text-xl font-semibold mb-3 text-center md:text-left">Design Your Ads</h3>
300
+ <p class="text-gray-600 text-center md:text-left">Use our templates or upload your own creatives. We support all ad formats and sizes.</p>
301
+ </div>
302
+ <div class="md:w-6/12">
303
+ <img src="https://via.placeholder.com/600x400?text=Design+Ads" alt="Design Ads" class="rounded-xl shadow-md w-full">
304
+ </div>
305
+ </div>
306
+
307
+ <!-- Step 3 -->
308
+ <div class="md:flex md:items-center md:justify-between">
309
+ <div class="md:w-5/12 mb-8 md:mb-0">
310
+ <div class="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold mb-4 mx-auto md:mx-0">3</div>
311
+ <h3 class="text-xl font-semibold mb-3 text-center md:text-left">Launch & Optimize</h3>
312
+ <p class="text-gray-600 text-center md:text-left">Go live instantly. Our AI continuously optimizes your campaign for the best results.</p>
313
+ </div>
314
+ <div class="md:w-6/12">
315
+ <img src="https://via.placeholder.com/600x400?text=Launch+Campaign" alt="Launch Campaign" class="rounded-xl shadow-md w-full">
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Step 4 -->
320
+ <div class="md:flex md:items-center md:justify-between md:flex-row-reverse">
321
+ <div class="md:w-5/12 mb-8 md:mb-0">
322
+ <div class="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold mb-4 mx-auto md:mx-0">4</div>
323
+ <h3 class="text-xl font-semibold mb-3 text-center md:text-left">Track & Scale</h3>
324
+ <p class="text-gray-600 text-center md:text-left">Monitor performance in real-time and scale what's working to maximize your ROI.</p>
325
+ </div>
326
+ <div class="md:w-6/12">
327
+ <img src="https://via.placeholder.com/600x400?text=Track+Results" alt="Track Results" class="rounded-xl shadow-md w-full">
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </section>
334
+
335
+ <!-- Testimonials Section -->
336
+ <section class="bg-gray-50 py-16">
337
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
338
+ <div class="text-center mb-16">
339
+ <h2 class="text-3xl font-bold text-dark mb-4">What Our Clients Say</h2>
340
+ <p class="text-gray-500 max-w-2xl mx-auto">Don't just take our word for it. Here's what advertisers and publishers say about Ayo Station.</p>
341
+ </div>
342
+
343
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
344
+ <div class="testimonial-card bg-white rounded-xl p-8 shadow-sm transition-all duration-300">
345
+ <div class="flex items-center mb-4">
346
+ <img src="https://via.placeholder.com/60x60?text=User+1" alt="User" class="rounded-full w-12 h-12 mr-4">
347
+ <div>
348
+ <h4 class="font-semibold">Sarah Johnson</h4>
349
+ <p class="text-gray-500 text-sm">Marketing Director, TechCorp</p>
350
+ </div>
351
+ </div>
352
+ <p class="text-gray-600 mb-4">"Ayo Station has transformed our digital advertising strategy. We've seen a 300% increase in conversions while reducing our CPA by 40%."</p>
353
+ <div class="flex text-yellow-400">
354
+ <i class="fas fa-star"></i>
355
+ <i class="fas fa-star"></i>
356
+ <i class="fas fa-star"></i>
357
+ <i class="fas fa-star"></i>
358
+ <i class="fas fa-star"></i>
359
+ </div>
360
+ </div>
361
+
362
+ <div class="testimonial-card bg-white rounded-xl p-8 shadow-sm transition-all duration-300">
363
+ <div class="flex items-center mb-4">
364
+ <img src="https://via.placeholder.com/60x60?text=User+2" alt="User" class="rounded-full w-12 h-12 mr-4">
365
+ <div>
366
+ <h4 class="font-semibold">Michael Chen</h4>
367
+ <p class="text-gray-500 text-sm">CEO, EcomStore</p>
368
+ </div>
369
+ </div>
370
+ <p class="text-gray-600 mb-4">"The targeting capabilities are unmatched. We're reaching exactly the right customers at the perfect moment in their buyer journey."</p>
371
+ <div class="flex text-yellow-400">
372
+ <i class="fas fa-star"></i>
373
+ <i class="fas fa-star"></i>
374
+ <i class="fas fa-star"></i>
375
+ <i class="fas fa-star"></i>
376
+ <i class="fas fa-star"></i>
377
+ </div>
378
+ </div>
379
+
380
+ <div class="testimonial-card bg-white rounded-xl p-8 shadow-sm transition-all duration-300">
381
+ <div class="flex items-center mb-4">
382
+ <img src="https://via.placeholder.com/60x60?text=User+3" alt="User" class="rounded-full w-12 h-12 mr-4">
383
+ <div>
384
+ <h4 class="font-semibold">David Rodriguez</h4>
385
+ <p class="text-gray-500 text-sm">Publisher, NewsHub</p>
386
+ </div>
387
+ </div>
388
+ <p class="text-gray-600 mb-4">"As a publisher, Ayo Station has helped me maximize my ad revenue while maintaining a great user experience for my audience."</p>
389
+ <div class="flex text-yellow-400">
390
+ <i class="fas fa-star"></i>
391
+ <i class="fas fa-star"></i>
392
+ <i class="fas fa-star"></i>
393
+ <i class="fas fa-star"></i>
394
+ <i class="fas fa-star-half-alt"></i>
395
+ </div>
396
+ </div>
397
+ </div>
398
+
399
+ <div class="mt-12 text-center">
400
+ <a href="#" class="inline-flex items-center text-primary font-medium">
401
+ See more success stories <i class="fas fa-arrow-right ml-2"></i>
402
+ </a>
403
+ </div>
404
+ </div>
405
+ </section>
406
+
407
+ <!-- Pricing Section -->
408
+ <section class="bg-white py-16">
409
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
410
+ <div class="text-center mb-16">
411
+ <h2 class="text-3xl font-bold text-dark mb-4">Simple, Transparent Pricing</h2>
412
+ <p class="text-gray-500 max-w-2xl mx-auto">Choose the plan that fits your advertising needs. No hidden fees, no surprises.</p>
413
+ </div>
414
+
415
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
416
+ <div class="pricing-card bg-white border border-gray-200 rounded-xl p-8 shadow-sm transition-all duration-300">
417
+ <h3 class="text-xl font-semibold mb-4">Starter</h3>
418
+ <div class="text-4xl font-bold mb-4">$99<span class="text-lg text-gray-500">/month</span></div>
419
+ <p class="text-gray-600 mb-6">Perfect for small businesses and first-time advertisers.</p>
420
+ <ul class="space-y-3 mb-8">
421
+ <li class="flex items-center">
422
+ <i class="fas fa-check text-green-500 mr-2"></i>
423
+ <span>Up to 10,000 impressions</span>
424
+ </li>
425
+ <li class="flex items-center">
426
+ <i class="fas fa-check text-green-500 mr-2"></i>
427
+ <span>Basic targeting options</span>
428
+ </li>
429
+ <li class="flex items-center">
430
+ <i class="fas fa-check text-green-500 mr-2"></i>
431
+ <span>Email support</span>
432
+ </li>
433
+ <li class="flex items-center text-gray-400">
434
+ <i class="fas fa-times mr-2"></i>
435
+ <span>No AI optimization</span>
436
+ </li>
437
+ <li class="flex items-center text-gray-400">
438
+ <i class="fas fa-times mr-2"></i>
439
+ <span>No premium placements</span>
440
+ </li>
441
+ </ul>
442
+ <a href="#" class="block w-full bg-gray-100 hover:bg-gray-200 text-dark text-center py-3 rounded-md font-medium">Get Started</a>
443
+ </div>
444
+
445
+ <div class="pricing-card bg-white border-2 border-primary rounded-xl p-8 shadow-lg transition-all duration-300 relative">
446
+ <div class="absolute top-0 right-0 bg-primary text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">MOST POPULAR</div>
447
+ <h3 class="text-xl font-semibold mb-4">Professional</h3>
448
+ <div class="text-4xl font-bold mb-4">$499<span class="text-lg text-gray-500">/month</span></div>
449
+ <p class="text-gray-600 mb-6">Ideal for growing businesses with consistent ad spend.</p>
450
+ <ul class="space-y-3 mb-8">
451
+ <li class="flex items-center">
452
+ <i class="fas fa-check text-green-500 mr-2"></i>
453
+ <span>Up to 100,000 impressions</span>
454
+ </li>
455
+ <li class="flex items-center">
456
+ <i class="fas fa-check text-green-500 mr-2"></i>
457
+ <span>Advanced targeting options</span>
458
+ </li>
459
+ <li class="flex items-center">
460
+ <i class="fas fa-check text-green-500 mr-2"></i>
461
+ <span>Priority email & chat support</span>
462
+ </li>
463
+ <li class="flex items-center">
464
+ <i class="fas fa-check text-green-500 mr-2"></i>
465
+ <span>AI optimization</span>
466
+ </li>
467
+ <li class="flex items-center text-gray-400">
468
+ <i class="fas fa-times mr-2"></i>
469
+ <span>Limited premium placements</span>
470
+ </li>
471
+ </ul>
472
+ <a href="#" class="block w-full bg-primary hover:bg-indigo-700 text-white text-center py-3 rounded-md font-medium">Get Started</a>
473
+ </div>
474
+
475
+ <div class="pricing-card bg-white border border-gray-200 rounded-xl p-8 shadow-sm transition-all duration-300">
476
+ <h3 class="text-xl font-semibold mb-4">Enterprise</h3>
477
+ <div class="text-4xl font-bold mb-4">Custom</div>
478
+ <p class="text-gray-600 mb-6">For large businesses with high-volume advertising needs.</p>
479
+ <ul class="space-y-3 mb-8">
480
+ <li class="flex items-center">
481
+ <i class="fas fa-check text-green-500 mr-2"></i>
482
+ <span>Unlimited impressions</span>
483
+ </li>
484
+ <li class="flex items-center">
485
+ <i class="fas fa-check text-green-500 mr-2"></i>
486
+ <span>Premium targeting options</span>
487
+ </li>
488
+ <li class="flex items-center">
489
+ <i class="fas fa-check text-green-500 mr-2"></i>
490
+ <span>24/7 dedicated support</span>
491
+ </li>
492
+ <li class="flex items-center">
493
+ <i class="fas fa-check text-green-500 mr-2"></i>
494
+ <span>Advanced AI optimization</span>
495
+ </li>
496
+ <li class="flex items-center">
497
+ <i class="fas fa-check text-green-500 mr-2"></i>
498
+ <span>Premium placements</span>
499
+ </li>
500
+ </ul>
501
+ <a href="#" class="block w-full bg-gray-100 hover:bg-gray-200 text-dark text-center py-3 rounded-md font-medium">Contact Sales</a>
502
+ </div>
503
+ </div>
504
+
505
+ <div class="mt-12 bg-gray-50 rounded-xl p-8 max-w-4xl mx-auto">
506
+ <h3 class="text-xl font-semibold mb-4 text-center">Need help choosing the right plan?</h3>
507
+ <p class="text-gray-600 text-center mb-6">Our advertising experts can help you select the perfect solution for your business.</p>
508
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
509
+ <a href="#" class="bg-primary hover:bg-indigo-700 text-white px-6 py-3 rounded-md font-medium text-center">
510
+ <i class="fas fa-phone-alt mr-2"></i> Schedule a Call
511
+ </a>
512
+ <a href="#" class="border border-primary text-primary hover:bg-primary hover:text-white px-6 py-3 rounded-md font-medium text-center">
513
+ <i class="fas fa-envelope mr-2"></i> Email Us
514
+ </a>
515
+ </div>
516
+ </div>
517
+ </div>
518
+ </section>
519
+
520
+ <!-- CTA Section -->
521
+ <section class="bg-primary text-white py-16">
522
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
523
+ <div class="md:flex md:items-center md:justify-between">
524
+ <div class="md:w-2/3 mb-8 md:mb-0">
525
+ <h2 class="text-3xl font-bold mb-4">Ready to Boost Your Advertising?</h2>
526
+ <p class="text-lg opacity-90">Join thousands of businesses growing with Ayo Station. Get started in minutes.</p>
527
+ </div>
528
+ <div class="md:w-1/3">
529
+ <a href="#" class="block bg-white text-primary hover:bg-gray-100 px-6 py-4 rounded-md font-bold text-center text-lg">
530
+ Start Your Free Trial <i class="fas fa-arrow-right ml-2"></i>
531
+ </a>
532
+ </div>
533
+ </div>
534
+ </div>
535
+ </section>
536
+
537
+ <!-- Footer -->
538
+ <footer class="bg-dark text-white pt-16 pb-8">
539
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
540
+ <div class="grid grid-cols-1 md:grid-cols-5 gap-12 mb-12">
541
+ <div class="md:col-span-2">
542
+ <div class="flex items-center mb-4">
543
+ <i class="fas fa-bullhorn text-primary text-2xl mr-2"></i>
544
+ <span class="text-xl font-bold">Ayo Station</span>
545
+ </div>
546
+ <p class="text-gray-400 mb-6">The most powerful advertising platform that connects brands with their ideal audiences across multiple channels.</p>
547
+ <div class="flex space-x-4">
548
+ <a href="#" class="text-gray-400 hover:text-white">
549
+ <i class="fab fa-facebook-f"></i>
550
+ </a>
551
+ <a href="#" class="text-gray-400 hover:text-white">
552
+ <i class="fab fa-twitter"></i>
553
+ </a>
554
+ <a href="#" class="text-gray-400 hover:text-white">
555
+ <i class="fab fa-linkedin-in"></i>
556
+ </a>
557
+ <a href="#" class="text-gray-400 hover:text-white">
558
+ <i class="fab fa-instagram"></i>
559
+ </a>
560
+ </div>
561
+ </div>
562
+
563
+ <div>
564
+ <h4 class="text-lg font-semibold mb-4">Company</h4>
565
+ <ul class="space-y-3">
566
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
567
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
568
+ <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
569
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
570
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
571
+ </ul>
572
+ </div>
573
+
574
+ <div>
575
+ <h4 class="text-lg font-semibold mb-4">Products</h4>
576
+ <ul class="space-y-3">
577
+ <li><a href="#" class="text-gray-400 hover:text-white">Display Ads</a></li>
578
+ <li><a href="#" class="text-gray-400 hover:text-white">Video Ads</a></li>
579
+ <li><a href="#" class="text-gray-400 hover:text-white">Native Ads</a></li>
580
+ <li><a href="#" class="text-gray-400 hover:text-white">Social Ads</a></li>
581
+ <li><a href="#" class="text-gray-400 hover:text-white">Programmatic</a></li>
582
+ </ul>
583
+ </div>
584
+
585
+ <div>
586
+ <h4 class="text-lg font-semibold mb-4">Resources</h4>
587
+ <ul class="space-y-3">
588
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
589
+ <li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>
590
+ <li><a href="#" class="text-gray-400 hover:text-white">Webinars</a></li>
591
+ <li><a href="#" class="text-gray-400 hover:text-white">Case Studies</a></li>
592
+ <li><a href="#" class="text-gray-400 hover:text-white">API Docs</a></li>
593
+ </ul>
594
+ </div>
595
+ </div>
596
+
597
+ <div class="border-t border-gray-800 pt-8">
598
+ <div class="md:flex md:items-center md:justify-between">
599
+ <div class="text-gray-400 text-sm mb-4 md:mb-0">
600
+ &copy; 2023 Ayo Station. All rights reserved.
601
+ </div>
602
+ <div class="flex space-x-6">
603
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
604
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
605
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Policy</a>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </div>
610
+ </footer>
611
+
612
+ <script>
613
+ // Mobile menu toggle
614
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
615
+ const menu = document.getElementById('mobile-menu');
616
+ if (menu.classList.contains('hidden')) {
617
+ menu.classList.remove('hidden');
618
+ } else {
619
+ menu.classList.add('hidden');
620
+ }
621
+ });
622
+
623
+ // Smooth scrolling for anchor links
624
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
625
+ anchor.addEventListener('click', function (e) {
626
+ e.preventDefault();
627
+
628
+ const targetId = this.getAttribute('href');
629
+ if (targetId === '#') return;
630
+
631
+ const targetElement = document.querySelector(targetId);
632
+ if (targetElement) {
633
+ targetElement.scrollIntoView({
634
+ behavior: 'smooth'
635
+ });
636
+ }
637
+ });
638
+ });
639
+
640
+ // Animation on scroll
641
+ const observerOptions = {
642
+ threshold: 0.1
643
+ };
644
+
645
+ const observer = new IntersectionObserver((entries) => {
646
+ entries.forEach(entry => {
647
+ if (entry.isIntersecting) {
648
+ entry.target.classList.add('animate-fadeIn');
649
+ observer.unobserve(entry.target);
650
+ }
651
+ });
652
+ }, observerOptions);
653
+
654
+ document.querySelectorAll('.stat-card, .card-hover, .testimonial-card, .pricing-card').forEach(card => {
655
+ card.classList.add('opacity-0', 'transition-opacity', 'duration-500');
656
+ observer.observe(card);
657
+ });
658
+ </script>
659
+ <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=Joel-08/ayo-s-progress" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
660
+ </html>