Mpura commited on
Commit
f4cde92
·
verified ·
1 Parent(s): d5853c2

I want to make money with websites - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +862 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Webprof
3
- emoji: 👁
4
- colorFrom: red
5
- colorTo: yellow
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: webprof
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
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,862 @@
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>Website Monetization Guide | Earn Money Online</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
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ }
13
+ .monetization-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .feature-icon {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .feature-card:hover .feature-icon {
21
+ transform: scale(1.1);
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="font-sans antialiased text-gray-800">
26
+ <!-- Navigation -->
27
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
28
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
29
+ <div class="flex justify-between h-16">
30
+ <div class="flex items-center">
31
+ <div class="flex-shrink-0 flex items-center">
32
+ <i class="fas fa-coins text-yellow-500 text-2xl mr-2"></i>
33
+ <span class="text-xl font-bold text-gray-900">WebProfit</span>
34
+ </div>
35
+ </div>
36
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
37
+ <a href="#strategies" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Strategies</a>
38
+ <a href="#features" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Features</a>
39
+ <a href="#testimonials" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Success Stories</a>
40
+ <a href="#pricing" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Courses</a>
41
+ <a href="#contact" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Contact</a>
42
+ </div>
43
+ <div class="flex items-center md:hidden">
44
+ <button id="mobile-menu-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">
45
+ <i class="fas fa-bars"></i>
46
+ </button>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ <!-- Mobile menu -->
51
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200">
52
+ <div class="px-2 pt-2 pb-3 space-y-1">
53
+ <a href="#strategies" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Strategies</a>
54
+ <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Features</a>
55
+ <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Success Stories</a>
56
+ <a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Courses</a>
57
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Contact</a>
58
+ </div>
59
+ </div>
60
+ </nav>
61
+
62
+ <!-- Hero Section -->
63
+ <div class="gradient-bg text-white">
64
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
65
+ <div class="text-center">
66
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
67
+ Turn Your Website Into a Money Machine
68
+ </h1>
69
+ <p class="mt-6 max-w-lg mx-auto text-xl">
70
+ Discover proven strategies to monetize your website and start earning passive income today.
71
+ </p>
72
+ <div class="mt-10">
73
+ <a href="#strategies" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-gray-100">
74
+ Explore Strategies
75
+ <i class="fas fa-arrow-down ml-2"></i>
76
+ </a>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Monetization Strategies -->
83
+ <div id="strategies" class="py-16 bg-gray-50">
84
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
85
+ <div class="text-center">
86
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
87
+ Website Monetization Strategies
88
+ </h2>
89
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
90
+ Choose the right approach for your website and audience
91
+ </p>
92
+ </div>
93
+
94
+ <div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
95
+ <!-- Strategy 1 -->
96
+ <div class="monetization-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
97
+ <div class="p-6">
98
+ <div class="flex items-center">
99
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
100
+ <i class="fas fa-ad text-white text-xl"></i>
101
+ </div>
102
+ <div class="ml-4">
103
+ <h3 class="text-lg font-medium text-gray-900">Advertising</h3>
104
+ </div>
105
+ </div>
106
+ <div class="mt-4">
107
+ <p class="text-gray-500">
108
+ Display ads (Google AdSense, Mediavine), native ads, sponsored content, and direct ad sales.
109
+ </p>
110
+ <div class="mt-4">
111
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800">
112
+ Best for: High-traffic sites
113
+ </span>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- Strategy 2 -->
120
+ <div class="monetization-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
121
+ <div class="p-6">
122
+ <div class="flex items-center">
123
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
124
+ <i class="fas fa-shopping-cart text-white text-xl"></i>
125
+ </div>
126
+ <div class="ml-4">
127
+ <h3 class="text-lg font-medium text-gray-900">Affiliate Marketing</h3>
128
+ </div>
129
+ </div>
130
+ <div class="mt-4">
131
+ <p class="text-gray-500">
132
+ Earn commissions by promoting products from Amazon, ShareASale, CJ Affiliate, and others.
133
+ </p>
134
+ <div class="mt-4">
135
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
136
+ Best for: Niche sites
137
+ </span>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Strategy 3 -->
144
+ <div class="monetization-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
145
+ <div class="p-6">
146
+ <div class="flex items-center">
147
+ <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
148
+ <i class="fas fa-gem text-white text-xl"></i>
149
+ </div>
150
+ <div class="ml-4">
151
+ <h3 class="text-lg font-medium text-gray-900">Digital Products</h3>
152
+ </div>
153
+ </div>
154
+ <div class="mt-4">
155
+ <p class="text-gray-500">
156
+ Sell ebooks, courses, templates, software, or memberships with high profit margins.
157
+ </p>
158
+ <div class="mt-4">
159
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
160
+ Best for: Expert creators
161
+ </span>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Strategy 4 -->
168
+ <div class="monetization-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
169
+ <div class="p-6">
170
+ <div class="flex items-center">
171
+ <div class="flex-shrink-0 bg-red-500 rounded-md p-3">
172
+ <i class="fas fa-users text-white text-xl"></i>
173
+ </div>
174
+ <div class="ml-4">
175
+ <h3 class="text-lg font-medium text-gray-900">Membership Sites</h3>
176
+ </div>
177
+ </div>
178
+ <div class="mt-4">
179
+ <p class="text-gray-500">
180
+ Recurring revenue by offering premium content, community access, or exclusive features.
181
+ </p>
182
+ <div class="mt-4">
183
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
184
+ Best for: Loyal audiences
185
+ </span>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Strategy 5 -->
192
+ <div class="monetization-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
193
+ <div class="p-6">
194
+ <div class="flex items-center">
195
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
196
+ <i class="fas fa-handshake text-white text-xl"></i>
197
+ </div>
198
+ <div class="ml-4">
199
+ <h3 class="text-lg font-medium text-gray-900">Freemium Services</h3>
200
+ </div>
201
+ </div>
202
+ <div class="mt-4">
203
+ <p class="text-gray-500">
204
+ Offer free basic services with premium upgrades for advanced features.
205
+ </p>
206
+ <div class="mt-4">
207
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
208
+ Best for: SaaS products
209
+ </span>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Strategy 6 -->
216
+ <div class="monetization-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
217
+ <div class="p-6">
218
+ <div class="flex items-center">
219
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
220
+ <i class="fas fa-chart-line text-white text-xl"></i>
221
+ </div>
222
+ <div class="ml-4">
223
+ <h3 class="text-lg font-medium text-gray-900">Consulting Services</h3>
224
+ </div>
225
+ </div>
226
+ <div class="mt-4">
227
+ <p class="text-gray-500">
228
+ Leverage your expertise to offer paid consulting, coaching, or implementation services.
229
+ </p>
230
+ <div class="mt-4">
231
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
232
+ Best for: Professionals
233
+ </span>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Features Section -->
243
+ <div id="features" class="py-16 bg-white">
244
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
245
+ <div class="lg:text-center">
246
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
247
+ Our Monetization Framework
248
+ </h2>
249
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
250
+ A proven system to maximize your website earnings
251
+ </p>
252
+ </div>
253
+
254
+ <div class="mt-20">
255
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
256
+ <!-- Feature 1 -->
257
+ <div class="feature-card relative">
258
+ <div class="flex items-center">
259
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3 feature-icon">
260
+ <i class="fas fa-search-dollar text-white text-xl"></i>
261
+ </div>
262
+ <div class="ml-4">
263
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Niche Profitability Analysis</h3>
264
+ <p class="mt-2 text-gray-500">
265
+ We help you identify the most lucrative niches with the right balance of competition and monetization potential.
266
+ </p>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- Feature 2 -->
272
+ <div class="feature-card relative">
273
+ <div class="flex items-center">
274
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3 feature-icon">
275
+ <i class="fas fa-tachometer-alt text-white text-xl"></i>
276
+ </div>
277
+ <div class="ml-4">
278
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Traffic Growth Strategies</h3>
279
+ <p class="mt-2 text-gray-500">
280
+ Proven SEO, content marketing, and social media tactics to drive targeted visitors to your site.
281
+ </p>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <!-- Feature 3 -->
287
+ <div class="feature-card relative">
288
+ <div class="flex items-center">
289
+ <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3 feature-icon">
290
+ <i class="fas fa-money-bill-wave text-white text-xl"></i>
291
+ </div>
292
+ <div class="ml-4">
293
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Revenue Optimization</h3>
294
+ <p class="mt-2 text-gray-500">
295
+ Advanced techniques to increase conversion rates and maximize earnings from each visitor.
296
+ </p>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Feature 4 -->
302
+ <div class="feature-card relative">
303
+ <div class="flex items-center">
304
+ <div class="flex-shrink-0 bg-red-500 rounded-md p-3 feature-icon">
305
+ <i class="fas fa-chart-pie text-white text-xl"></i>
306
+ </div>
307
+ <div class="ml-4">
308
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Diversified Income Streams</h3>
309
+ <p class="mt-2 text-gray-500">
310
+ Build multiple revenue sources to protect against algorithm changes and market shifts.
311
+ </p>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Feature 5 -->
317
+ <div class="feature-card relative">
318
+ <div class="flex items-center">
319
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3 feature-icon">
320
+ <i class="fas fa-tools text-white text-xl"></i>
321
+ </div>
322
+ <div class="ml-4">
323
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Technical Setup</h3>
324
+ <p class="mt-2 text-gray-500">
325
+ Step-by-step guidance on implementing monetization tools without slowing your site.
326
+ </p>
327
+ </div>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- Feature 6 -->
332
+ <div class="feature-card relative">
333
+ <div class="flex items-center">
334
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3 feature-icon">
335
+ <i class="fas fa-analytics text-white text-xl"></i>
336
+ </div>
337
+ <div class="ml-4">
338
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Performance Tracking</h3>
339
+ <p class="mt-2 text-gray-500">
340
+ Key metrics to monitor and optimization strategies based on real data.
341
+ </p>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <!-- Success Stories -->
351
+ <div id="testimonials" class="gradient-bg py-16 text-white">
352
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
353
+ <div class="text-center">
354
+ <h2 class="text-3xl font-extrabold sm:text-4xl">
355
+ Real Success Stories
356
+ </h2>
357
+ <p class="mt-4 max-w-2xl text-xl mx-auto">
358
+ See how others transformed their websites into income streams
359
+ </p>
360
+ </div>
361
+
362
+ <div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
363
+ <!-- Testimonial 1 -->
364
+ <div class="bg-white bg-opacity-10 rounded-lg p-6 backdrop-filter backdrop-blur-sm">
365
+ <div class="flex items-center">
366
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J.">
367
+ <div class="ml-4">
368
+ <h3 class="text-lg font-medium">Sarah J.</h3>
369
+ <p class="text-indigo-200">Food Blogger</p>
370
+ </div>
371
+ </div>
372
+ <div class="mt-4">
373
+ <p class="text-gray-100">
374
+ "Using the affiliate strategies from WebProfit, I grew my food blog income from $200/month to over $5,000/month in just 9 months!"
375
+ </p>
376
+ </div>
377
+ <div class="mt-4 flex items-center">
378
+ <i class="fas fa-star text-yellow-300"></i>
379
+ <i class="fas fa-star text-yellow-300 ml-1"></i>
380
+ <i class="fas fa-star text-yellow-300 ml-1"></i>
381
+ <i class="fas fa-star text-yellow-300 ml-1"></i>
382
+ <i class="fas fa-star text-yellow-300 ml-1"></i>
383
+ </div>
384
+ </div>
385
+
386
+ <!-- Testimonial 2 -->
387
+ <div class="bg-white bg-opacity-10 rounded-lg p-6 backdrop-filter backdrop-blur-sm">
388
+ <div class="flex items-center">
389
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael T.">
390
+ <div class="ml-4">
391
+ <h3 class="text-lg font-medium">Michael T.</h3>
392
+ <p class="text-indigo-200">Tech Reviewer</p>
393
+ </div>
394
+ </div>
395
+ <div class="mt-4">
396
+ <p class="text-gray-100">
397
+ "The advertising optimization techniques doubled my RPM. Now earning $12,000/month from my tech review site with the same traffic!"
398
+ </p>
399
+ </div>
400
+ <div class="mt-4 flex items-center">
401
+ <i class="fas fa-star text-yellow-300"></i>
402
+ <i class="fas fa-star text-yellow-300 ml-1"></i>
403
+ <i class="fas fa-star text-yellow-300 ml-1"></i>
404
+ <i class="fas fa-star text-yellow-300 ml-1"></i>
405
+ <i class="fas fa-star text-yellow-300 ml-1"></i>
406
+ </div>
407
+ </div>
408
+
409
+ <!-- Testimonial 3 -->
410
+ <div class="bg-white bg-opacity-10 rounded-lg p-6 backdrop-filter backdrop-blur-sm">
411
+ <div class="flex items-center">
412
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Lisa M.">
413
+ <div class="ml-4">
414
+ <h3 class="text-lg font-medium">Lisa M.</h3>
415
+ <p class="text-indigo-200">Fitness Coach</p>
416
+ </div>
417
+ </div>
418
+ <div class="mt-4">
419
+ <p class="text-gray-100">
420
+ "Launched my online training program using WebProfit's framework. Made $27,000 in the first month with just 5,000 email subscribers!"
421
+ </p>
422
+ </div>
423
+ <div class="mt-4 flex items-center">
424
+ <i class="fas fa-star text-yellow-300"></i>
425
+ <i class="fas fa-star text-yellow-300 ml-1"></i>
426
+ <i class="fas fa-star text-yellow-300 ml-1"></i>
427
+ <i class="fas fa-star text-yellow-300 ml-1"></i>
428
+ <i class="fas fa-star-half-alt text-yellow-300 ml-1"></i>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <!-- Pricing/Courses -->
436
+ <div id="pricing" class="py-16 bg-gray-50">
437
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
438
+ <div class="text-center">
439
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
440
+ Monetization Courses
441
+ </h2>
442
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
443
+ Choose the learning path that fits your goals
444
+ </p>
445
+ </div>
446
+
447
+ <div class="mt-16 space-y-8 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
448
+ <!-- Basic Course -->
449
+ <div class="bg-white border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
450
+ <div class="p-6">
451
+ <h3 class="text-lg font-medium text-gray-900">Starter Pack</h3>
452
+ <p class="mt-4 text-sm text-gray-500">
453
+ Perfect for beginners looking to monetize their first website
454
+ </p>
455
+ <div class="mt-8">
456
+ <p class="text-4xl font-extrabold text-gray-900">$97</p>
457
+ <p class="mt-2 text-sm text-gray-500">One-time payment</p>
458
+ </div>
459
+ <a href="#" class="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-3 text-sm font-semibold text-white text-center hover:bg-gray-900">
460
+ Get Started
461
+ </a>
462
+ </div>
463
+ <div class="pt-6 pb-8 px-6">
464
+ <h4 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h4>
465
+ <ul class="mt-6 space-y-4">
466
+ <li class="flex">
467
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
468
+ <span class="ml-3 text-sm text-gray-500">Advertising Fundamentals</span>
469
+ </li>
470
+ <li class="flex">
471
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
472
+ <span class="ml-3 text-sm text-gray-500">Affiliate Marketing Basics</span>
473
+ </li>
474
+ <li class="flex">
475
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
476
+ <span class="ml-3 text-sm text-gray-500">5 Website Templates</span>
477
+ </li>
478
+ <li class="flex">
479
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
480
+ <span class="ml-3 text-sm text-gray-500">Email List Building</span>
481
+ </li>
482
+ <li class="flex">
483
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
484
+ <span class="ml-3 text-sm text-gray-500">Community Access</span>
485
+ </li>
486
+ </ul>
487
+ </div>
488
+ </div>
489
+
490
+ <!-- Pro Course -->
491
+ <div class="bg-white border-2 border-indigo-600 rounded-lg shadow-sm divide-y divide-gray-200 transform scale-105 z-10">
492
+ <div class="p-6">
493
+ <div class="flex justify-between">
494
+ <h3 class="text-lg font-medium text-gray-900">Pro Monetization</h3>
495
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
496
+ Most Popular
497
+ </span>
498
+ </div>
499
+ <p class="mt-4 text-sm text-gray-500">
500
+ Comprehensive training for serious website owners
501
+ </p>
502
+ <div class="mt-8">
503
+ <p class="text-4xl font-extrabold text-gray-900">$297</p>
504
+ <p class="mt-2 text-sm text-gray-500">One-time payment</p>
505
+ </div>
506
+ <a href="#" class="mt-8 block w-full bg-indigo-600 border border-indigo-600 rounded-md py-3 text-sm font-semibold text-white text-center hover:bg-indigo-700">
507
+ Get Started
508
+ </a>
509
+ </div>
510
+ <div class="pt-6 pb-8 px-6">
511
+ <h4 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h4>
512
+ <ul class="mt-6 space-y-4">
513
+ <li class="flex">
514
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
515
+ <span class="ml-3 text-sm text-gray-500">All Starter Pack features</span>
516
+ </li>
517
+ <li class="flex">
518
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
519
+ <span class="ml-3 text-sm text-gray-500">Advanced Ad Optimization</span>
520
+ </li>
521
+ <li class="flex">
522
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
523
+ <span class="ml-3 text-sm text-gray-500">High-Ticket Affiliate Strategies</span>
524
+ </li>
525
+ <li class="flex">
526
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
527
+ <span class="ml-3 text-sm text-gray-500">Digital Product Creation</span>
528
+ </li>
529
+ <li class="flex">
530
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
531
+ <span class="ml-3 text-sm text-gray-500">Membership Site Setup</span>
532
+ </li>
533
+ <li class="flex">
534
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
535
+ <span class="ml-3 text-sm text-gray-500">1-on-1 Coaching Call</span>
536
+ </li>
537
+ </ul>
538
+ </div>
539
+ </div>
540
+
541
+ <!-- Mastermind -->
542
+ <div class="bg-white border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
543
+ <div class="p-6">
544
+ <h3 class="text-lg font-medium text-gray-900">Mastermind</h3>
545
+ <p class="mt-4 text-sm text-gray-500">
546
+ For entrepreneurs building 6-figure online businesses
547
+ </p>
548
+ <div class="mt-8">
549
+ <p class="text-4xl font-extrabold text-gray-900">$997</p>
550
+ <p class="mt-2 text-sm text-gray-500">One-time payment</p>
551
+ </div>
552
+ <a href="#" class="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-3 text-sm font-semibold text-white text-center hover:bg-gray-900">
553
+ Get Started
554
+ </a>
555
+ </div>
556
+ <div class="pt-6 pb-8 px-6">
557
+ <h4 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h4>
558
+ <ul class="mt-6 space-y-4">
559
+ <li class="flex">
560
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
561
+ <span class="ml-3 text-sm text-gray-500">All Pro features</span>
562
+ </li>
563
+ <li class="flex">
564
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
565
+ <span class="ml-3 text-sm text-gray-500">Private Mastermind Group</span>
566
+ </li>
567
+ <li class="flex">
568
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
569
+ <span class="ml-3 text-sm text-gray-500">Monthly Strategy Calls</span>
570
+ </li>
571
+ <li class="flex">
572
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
573
+ <span class="ml-3 text-sm text-gray-500">Website Audit</span>
574
+ </li>
575
+ <li class="flex">
576
+ <i class="fas fa-check text-green-500 mt-0.5"></i>
577
+ <span class="ml-3 text-sm text-gray-500">Premium Tools Access</span>
578
+ </li>
579
+ </ul>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+
586
+ <!-- FAQ Section -->
587
+ <div class="bg-white py-16">
588
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
589
+ <div class="lg:text-center">
590
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
591
+ Frequently Asked Questions
592
+ </h2>
593
+ </div>
594
+
595
+ <div class="mt-12">
596
+ <dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-12">
597
+ <!-- FAQ 1 -->
598
+ <div>
599
+ <dt class="text-lg leading-6 font-medium text-gray-900">
600
+ How soon can I start making money?
601
+ </dt>
602
+ <dd class="mt-2 text-gray-500">
603
+ Most students see their first earnings within 30-60 days of implementing the strategies. However, significant income typically takes 3-6 months of consistent effort.
604
+ </dd>
605
+ </div>
606
+
607
+ <!-- FAQ 2 -->
608
+ <div>
609
+ <dt class="text-lg leading-6 font-medium text-gray-900">
610
+ Do I need technical skills?
611
+ </dt>
612
+ <dd class="mt-2 text-gray-500">
613
+ No technical skills are required. We provide step-by-step tutorials for all technical aspects, and many tools we recommend are beginner-friendly.
614
+ </dd>
615
+ </div>
616
+
617
+ <!-- FAQ 3 -->
618
+ <div>
619
+ <dt class="text-lg leading-6 font-medium text-gray-900">
620
+ How much traffic do I need?
621
+ </dt>
622
+ <dd class="mt-2 text-gray-500">
623
+ It depends on the monetization method. Some strategies work with as little as 1,000 monthly visitors, while others require 10,000+ for optimal results.
624
+ </dd>
625
+ </div>
626
+
627
+ <!-- FAQ 4 -->
628
+ <div>
629
+ <dt class="text-lg leading-6 font-medium text-gray-900">
630
+ Is there a money-back guarantee?
631
+ </dt>
632
+ <dd class="mt-2 text-gray-500">
633
+ Yes! We offer a 30-day money-back guarantee if you implement the strategies and don't see results.
634
+ </dd>
635
+ </div>
636
+
637
+ <!-- FAQ 5 -->
638
+ <div>
639
+ <dt class="text-lg leading-6 font-medium text-gray-900">
640
+ Can I use these strategies with an existing site?
641
+ </dt>
642
+ <dd class="mt-2 text-gray-500">
643
+ Absolutely! Our framework works for both new and established websites. We'll show you how to optimize what you already have.
644
+ </dd>
645
+ </div>
646
+
647
+ <!-- FAQ 6 -->
648
+ <div>
649
+ <dt class="text-lg leading-6 font-medium text-gray-900">
650
+ How much time does this require?
651
+ </dt>
652
+ <dd class="mt-2 text-gray-500">
653
+ Most students spend 5-10 hours per week implementing the strategies. The more time you invest, the faster you'll see results.
654
+ </dd>
655
+ </div>
656
+ </dl>
657
+ </div>
658
+ </div>
659
+ </div>
660
+
661
+ <!-- CTA Section -->
662
+ <div class="gradient-bg">
663
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
664
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
665
+ <span class="block">Ready to monetize your website?</span>
666
+ <span class="block text-indigo-200">Start earning today.</span>
667
+ </h2>
668
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
669
+ <div class="inline-flex rounded-md shadow">
670
+ <a href="#pricing" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
671
+ View Courses
672
+ </a>
673
+ </div>
674
+ <div class="ml-3 inline-flex rounded-md shadow">
675
+ <a href="#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70">
676
+ Contact Us
677
+ </a>
678
+ </div>
679
+ </div>
680
+ </div>
681
+ </div>
682
+
683
+ <!-- Contact Form -->
684
+ <div id="contact" class="bg-white py-16 px-4 sm:px-6 lg:px-8">
685
+ <div class="max-w-7xl mx-auto">
686
+ <div class="text-center">
687
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
688
+ Have Questions?
689
+ </h2>
690
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
691
+ We're here to help you succeed
692
+ </p>
693
+ </div>
694
+
695
+ <div class="mt-12">
696
+ <div class="bg-white shadow-xl rounded-lg overflow-hidden">
697
+ <div class="grid grid-cols-1 md:grid-cols-2">
698
+ <div class="p-8">
699
+ <h3 class="text-lg font-medium text-gray-900">Send us a message</h3>
700
+ <form class="mt-6 space-y-6">
701
+ <div>
702
+ <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
703
+ <div class="mt-1">
704
+ <input type="text" name="name" id="name" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
705
+ </div>
706
+ </div>
707
+ <div>
708
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
709
+ <div class="mt-1">
710
+ <input type="email" name="email" id="email" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
711
+ </div>
712
+ </div>
713
+ <div>
714
+ <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
715
+ <div class="mt-1">
716
+ <textarea id="message" name="message" rows="4" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"></textarea>
717
+ </div>
718
+ </div>
719
+ <div>
720
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
721
+ Send Message
722
+ </button>
723
+ </div>
724
+ </form>
725
+ </div>
726
+ <div class="bg-indigo-700 p-8 text-white">
727
+ <h3 class="text-lg font-medium">Contact Information</h3>
728
+ <div class="mt-6 space-y-4">
729
+ <div class="flex">
730
+ <i class="fas fa-map-marker-alt mt-1"></i>
731
+ <span class="ml-3">123 Web Street, Digital City, 10001</span>
732
+ </div>
733
+ <div class="flex">
734
+ <i class="fas fa-phone-alt mt-1"></i>
735
+ <span class="ml-3">+1 (555) 123-4567</span>
736
+ </div>
737
+ <div class="flex">
738
+ <i class="fas fa-envelope mt-1"></i>
739
+ <span class="ml-3">support@webprofit.com</span>
740
+ </div>
741
+ </div>
742
+ <div class="mt-8">
743
+ <h3 class="text-lg font-medium">Follow Us</h3>
744
+ <div class="flex space-x-6 mt-4">
745
+ <a href="#" class="text-indigo-200 hover:text-white">
746
+ <i class="fab fa-facebook-f text-xl"></i>
747
+ </a>
748
+ <a href="#" class="text-indigo-200 hover:text-white">
749
+ <i class="fab fa-twitter text-xl"></i>
750
+ </a>
751
+ <a href="#" class="text-indigo-200 hover:text-white">
752
+ <i class="fab fa-instagram text-xl"></i>
753
+ </a>
754
+ <a href="#" class="text-indigo-200 hover:text-white">
755
+ <i class="fab fa-linkedin-in text-xl"></i>
756
+ </a>
757
+ <a href="#" class="text-indigo-200 hover:text-white">
758
+ <i class="fab fa-youtube text-xl"></i>
759
+ </a>
760
+ </div>
761
+ </div>
762
+ </div>
763
+ </div>
764
+ </div>
765
+ </div>
766
+ </div>
767
+ </div>
768
+
769
+ <!-- Footer -->
770
+ <footer class="bg-gray-800">
771
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
772
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
773
+ <div>
774
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3>
775
+ <ul class="mt-4 space-y-4">
776
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Advertising</a></li>
777
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Affiliate Marketing</a></li>
778
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Digital Products</a></li>
779
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Memberships</a></li>
780
+ </ul>
781
+ </div>
782
+ <div>
783
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
784
+ <ul class="mt-4 space-y-4">
785
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
786
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li>
787
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Webinars</a></li>
788
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Tools</a></li>
789
+ </ul>
790
+ </div>
791
+ <div>
792
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
793
+ <ul class="mt-4 space-y-4">
794
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
795
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
796
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
797
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact</a></li>
798
+ </ul>
799
+ </div>
800
+ <div>
801
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
802
+ <ul class="mt-4 space-y-4">
803
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
804
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
805
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li>
806
+ </ul>
807
+ </div>
808
+ </div>
809
+ <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
810
+ <p class="text-base text-gray-400">
811
+ &copy; 2023 WebProfit. All rights reserved.
812
+ </p>
813
+ <div class="mt-4 md:mt-0">
814
+ <p class="text-base text-gray-400">
815
+ Making the web profitable for everyone.
816
+ </p>
817
+ </div>
818
+ </div>
819
+ </div>
820
+ </footer>
821
+
822
+ <script>
823
+ // Mobile menu toggle
824
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
825
+ const menu = document.getElementById('mobile-menu');
826
+ menu.classList.toggle('hidden');
827
+ });
828
+
829
+ // Smooth scrolling for anchor links
830
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
831
+ anchor.addEventListener('click', function (e) {
832
+ e.preventDefault();
833
+
834
+ const targetId = this.getAttribute('href');
835
+ const targetElement = document.querySelector(targetId);
836
+
837
+ if (targetElement) {
838
+ targetElement.scrollIntoView({
839
+ behavior: 'smooth'
840
+ });
841
+
842
+ // Close mobile menu if open
843
+ const mobileMenu = document.getElementById('mobile-menu');
844
+ if (!mobileMenu.classList.contains('hidden')) {
845
+ mobileMenu.classList.add('hidden');
846
+ }
847
+ }
848
+ });
849
+ });
850
+
851
+ // Form submission (example)
852
+ const contactForm = document.querySelector('form');
853
+ if (contactForm) {
854
+ contactForm.addEventListener('submit', function(e) {
855
+ e.preventDefault();
856
+ alert('Thank you for your message! We will get back to you soon.');
857
+ this.reset();
858
+ });
859
+ }
860
+ </script>
861
+ <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=Mpura/webprof" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
862
+ </html>