Hugging Face's logo

Spaces:
panderso
/
cl
Running

App Files Community
panderso commited on
Commit
2dc24ba
·
verified ·
1 Parent(s): 9e0d88a

create me a strategic system to generate money through delegation for contactlists.com social media, techstact PR over seas hires - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +906 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cl
3
- emoji: 🏆
4
  colorFrom: blue
5
- colorTo: green
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: cl
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: purple
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,906 @@
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>ContactLists Monetization Strategy</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, #6e8efb 0%, #a777e3 100%);
12
+ }
13
+ .card-hover: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
+ .progress-bar {
18
+ height: 8px;
19
+ border-radius: 4px;
20
+ background-color: #e5e7eb;
21
+ }
22
+ .progress-fill {
23
+ height: 100%;
24
+ border-radius: 4px;
25
+ background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="font-sans bg-gray-50">
30
+ <!-- Header -->
31
+ <header class="gradient-bg text-white py-6">
32
+ <div class="container mx-auto px-4">
33
+ <div class="flex justify-between items-center">
34
+ <div class="flex items-center space-x-2">
35
+ <i class="fas fa-address-book text-3xl"></i>
36
+ <h1 class="text-2xl font-bold">ContactLists Monetization</h1>
37
+ </div>
38
+ <nav class="hidden md:block">
39
+ <ul class="flex space-x-8">
40
+ <li><a href="#strategy" class="hover:text-blue-200 transition">Strategy</a></li>
41
+ <li><a href="#delegation" class="hover:text-blue-200 transition">Delegation</a></li>
42
+ <li><a href="#metrics" class="hover:text-blue-200 transition">Metrics</a></li>
43
+ <li><a href="#team" class="hover:text-blue-200 transition">Team</a></li>
44
+ </ul>
45
+ </nav>
46
+ <button class="md:hidden text-2xl">
47
+ <i class="fas fa-bars"></i>
48
+ </button>
49
+ </div>
50
+ </div>
51
+ </header>
52
+
53
+ <!-- Hero Section -->
54
+ <section class="gradient-bg text-white py-20">
55
+ <div class="container mx-auto px-4 text-center">
56
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Strategic Monetization System</h1>
57
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Maximizing revenue through delegated social media management, optimized tech stack, and strategic overseas PR hires for ContactLists.com</p>
58
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
59
+ <button class="bg-white text-purple-700 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition transform hover:scale-105">
60
+ Get Started
61
+ </button>
62
+ <button class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-purple-700 transition transform hover:scale-105">
63
+ Learn More
64
+ </button>
65
+ </div>
66
+ </div>
67
+ </section>
68
+
69
+ <!-- Strategy Overview -->
70
+ <section id="strategy" class="py-16 bg-white">
71
+ <div class="container mx-auto px-4">
72
+ <h2 class="text-3xl font-bold text-center mb-12">3-Pillar Monetization Strategy</h2>
73
+
74
+ <div class="grid md:grid-cols-3 gap-8">
75
+ <!-- Pillar 1 -->
76
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md card-hover transition duration-300">
77
+ <div class="text-purple-600 mb-4">
78
+ <i class="fas fa-users fa-3x"></i>
79
+ </div>
80
+ <h3 class="text-xl font-bold mb-3">Social Media Delegation</h3>
81
+ <p class="text-gray-600 mb-4">Leverage overseas talent to create and manage high-performing social campaigns across platforms, reducing costs by 40-60% while maintaining quality.</p>
82
+ <ul class="space-y-2 text-gray-700">
83
+ <li class="flex items-start">
84
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
85
+ <span>Content creation & scheduling</span>
86
+ </li>
87
+ <li class="flex items-start">
88
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
89
+ <span>Community engagement</span>
90
+ </li>
91
+ <li class="flex items-start">
92
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
93
+ <span>Performance analytics</span>
94
+ </li>
95
+ </ul>
96
+ </div>
97
+
98
+ <!-- Pillar 2 -->
99
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md card-hover transition duration-300">
100
+ <div class="text-purple-600 mb-4">
101
+ <i class="fas fa-code fa-3x"></i>
102
+ </div>
103
+ <h3 class="text-xl font-bold mb-3">Tech Stack Optimization</h3>
104
+ <p class="text-gray-600 mb-4">Implement automation tools and AI-powered solutions to streamline operations and create new revenue streams through data monetization.</p>
105
+ <ul class="space-y-2 text-gray-700">
106
+ <li class="flex items-start">
107
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
108
+ <span>Marketing automation</span>
109
+ </li>
110
+ <li class="flex items-start">
111
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
112
+ <span>AI-driven analytics</span>
113
+ </li>
114
+ <li class="flex items-start">
115
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
116
+ <span>API monetization</span>
117
+ </li>
118
+ </ul>
119
+ </div>
120
+
121
+ <!-- Pillar 3 -->
122
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md card-hover transition duration-300">
123
+ <div class="text-purple-600 mb-4">
124
+ <i class="fas fa-globe fa-3x"></i>
125
+ </div>
126
+ <h3 class="text-xl font-bold mb-3">Overseas PR Hires</h3>
127
+ <p class="text-gray-600 mb-4">Build a distributed PR team in strategic locations to expand market reach and media coverage while optimizing labor costs.</p>
128
+ <ul class="space-y-2 text-gray-700">
129
+ <li class="flex items-start">
130
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
131
+ <span>Regional media outreach</span>
132
+ </li>
133
+ <li class="flex items-start">
134
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
135
+ <span>Multilingual content</span>
136
+ </li>
137
+ <li class="flex items-start">
138
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
139
+ <span>Localized campaigns</span>
140
+ </li>
141
+ </ul>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </section>
146
+
147
+ <!-- Delegation Framework -->
148
+ <section id="delegation" class="py-16 bg-gray-50">
149
+ <div class="container mx-auto px-4">
150
+ <h2 class="text-3xl font-bold text-center mb-12">Social Media Delegation Framework</h2>
151
+
152
+ <div class="grid md:grid-cols-2 gap-8 mb-12">
153
+ <div class="bg-white p-8 rounded-xl shadow-md">
154
+ <h3 class="text-xl font-bold mb-4 text-purple-700">Delegation Process</h3>
155
+ <div class="space-y-6">
156
+ <div class="flex items-start">
157
+ <div class="bg-purple-100 text-purple-700 rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0">
158
+ <span class="font-bold">1</span>
159
+ </div>
160
+ <div>
161
+ <h4 class="font-semibold">Talent Acquisition</h4>
162
+ <p class="text-gray-600">Source specialized social media managers from cost-effective regions (Philippines, Eastern Europe, Latin America)</p>
163
+ </div>
164
+ </div>
165
+ <div class="flex items-start">
166
+ <div class="bg-purple-100 text-purple-700 rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0">
167
+ <span class="font-bold">2</span>
168
+ </div>
169
+ <div>
170
+ <h4 class="font-semibold">Standardization</h4>
171
+ <p class="text-gray-600">Create detailed brand guidelines, content calendars, and approval workflows</p>
172
+ </div>
173
+ </div>
174
+ <div class="flex items-start">
175
+ <div class="bg-purple-100 text-purple-700 rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0">
176
+ <span class="font-bold">3</span>
177
+ </div>
178
+ <div>
179
+ <h4 class="font-semibold">Tool Implementation</h4>
180
+ <p class="text-gray-600">Deploy collaboration tools (Slack, Trello) and social media management platforms (Hootsuite, Buffer)</p>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="bg-white p-8 rounded-xl shadow-md">
187
+ <h3 class="text-xl font-bold mb-4 text-purple-700">Monetization Channels</h3>
188
+ <div class="space-y-4">
189
+ <div class="p-4 bg-purple-50 rounded-lg">
190
+ <div class="flex justify-between mb-2">
191
+ <h4 class="font-semibold">Sponsored Content</h4>
192
+ <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded text-sm">High ROI</span>
193
+ </div>
194
+ <p class="text-gray-600">Partner with complementary B2B tech brands for sponsored posts and stories</p>
195
+ </div>
196
+ <div class="p-4 bg-purple-50 rounded-lg">
197
+ <div class="flex justify-between mb-2">
198
+ <h4 class="font-semibold">Affiliate Marketing</h4>
199
+ <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded text-sm">Recurring</span>
200
+ </div>
201
+ <p class="text-gray-600">Promote relevant SaaS tools with tracking links to earn commissions</p>
202
+ </div>
203
+ <div class="p-4 bg-purple-50 rounded-lg">
204
+ <div class="flex justify-between mb-2">
205
+ <h4 class="font-semibold">Lead Generation</h4>
206
+ <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded text-sm">Direct Sales</span>
207
+ </div>
208
+ <p class="text-gray-600">Drive signups for premium ContactLists services through targeted campaigns</p>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <div class="bg-white p-8 rounded-xl shadow-md">
215
+ <h3 class="text-xl font-bold mb-6 text-center text-purple-700">Platform-Specific Strategies</h3>
216
+ <div class="grid md:grid-cols-4 gap-6">
217
+ <div class="text-center p-4 hover:bg-purple-50 rounded-lg transition">
218
+ <div class="bg-blue-100 text-blue-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
219
+ <i class="fab fa-linkedin-in text-2xl"></i>
220
+ </div>
221
+ <h4 class="font-semibold mb-2">LinkedIn</h4>
222
+ <p class="text-sm text-gray-600">B2B lead gen, thought leadership, recruitment</p>
223
+ </div>
224
+ <div class="text-center p-4 hover:bg-purple-50 rounded-lg transition">
225
+ <div class="bg-pink-100 text-pink-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
226
+ <i class="fab fa-instagram text-2xl"></i>
227
+ </div>
228
+ <h4 class="font-semibold mb-2">Instagram</h4>
229
+ <p class="text-sm text-gray-600">Brand awareness, influencer collabs, stories</p>
230
+ </div>
231
+ <div class="text-center p-4 hover:bg-purple-50 rounded-lg transition">
232
+ <div class="bg-blue-100 text-blue-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
233
+ <i class="fab fa-twitter text-2xl"></i>
234
+ </div>
235
+ <h4 class="font-semibold mb-2">Twitter</h4>
236
+ <p class="text-sm text-gray-600">Real-time engagement, industry news, customer service</p>
237
+ </div>
238
+ <div class="text-center p-4 hover:bg-purple-50 rounded-lg transition">
239
+ <div class="bg-red-100 text-red-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
240
+ <i class="fab fa-youtube text-2xl"></i>
241
+ </div>
242
+ <h4 class="font-semibold mb-2">YouTube</h4>
243
+ <p class="text-sm text-gray-600">Tutorials, product demos, ad revenue</p>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </section>
249
+
250
+ <!-- Tech Stack Optimization -->
251
+ <section class="py-16 bg-white">
252
+ <div class="container mx-auto px-4">
253
+ <h2 class="text-3xl font-bold text-center mb-12">Tech Stack for Scalable Monetization</h2>
254
+
255
+ <div class="grid md:grid-cols-2 gap-8 mb-12">
256
+ <div>
257
+ <h3 class="text-xl font-bold mb-4 text-purple-700">Core Technologies</h3>
258
+ <div class="space-y-4">
259
+ <div class="flex items-start bg-gray-50 p-4 rounded-lg">
260
+ <div class="bg-purple-100 text-purple-700 p-2 rounded mr-4">
261
+ <i class="fas fa-robot"></i>
262
+ </div>
263
+ <div>
264
+ <h4 class="font-semibold">AI Content Tools</h4>
265
+ <p class="text-gray-600">Jasper.ai for copywriting, Synthesia for video creation, ChatGPT for ideation</p>
266
+ </div>
267
+ </div>
268
+ <div class="flex items-start bg-gray-50 p-4 rounded-lg">
269
+ <div class="bg-purple-100 text-purple-700 p-2 rounded mr-4">
270
+ <i class="fas fa-chart-line"></i>
271
+ </div>
272
+ <div>
273
+ <h4 class="font-semibold">Analytics Suite</h4>
274
+ <p class="text-gray-600">Google Analytics 4, Hotjar, Tableau for data visualization</p>
275
+ </div>
276
+ </div>
277
+ <div class="flex items-start bg-gray-50 p-4 rounded-lg">
278
+ <div class="bg-purple-100 text-purple-700 p-2 rounded mr-4">
279
+ <i class="fas fa-cogs"></i>
280
+ </div>
281
+ <div>
282
+ <h4 class="font-semibold">Automation</h4>
283
+ <p class="text-gray-600">Zapier for workflows, PhantomBuster for lead gen, Integromat for complex automations</p>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <div>
290
+ <h3 class="text-xl font-bold mb-4 text-purple-700">Monetization Tech</h3>
291
+ <div class="space-y-4">
292
+ <div class="flex items-start bg-gray-50 p-4 rounded-lg">
293
+ <div class="bg-purple-100 text-purple-700 p-2 rounded mr-4">
294
+ <i class="fas fa-link"></i>
295
+ </div>
296
+ <div>
297
+ <h4 class="font-semibold">Affiliate System</h4>
298
+ <p class="text-gray-600">Post Affiliate Pro with custom tracking and payout automation</p>
299
+ </div>
300
+ </div>
301
+ <div class="flex items-start bg-gray-50 p-4 rounded-lg">
302
+ <div class="bg-purple-100 text-purple-700 p-2 rounded mr-4">
303
+ <i class="fas fa-database"></i>
304
+ </div>
305
+ <div>
306
+ <h4 class="font-semibold">Data API</h4>
307
+ <p class="text-gray-600">Monetize contact data through tiered API access (free/paid/enterprise)</p>
308
+ </div>
309
+ </div>
310
+ <div class="flex items-start bg-gray-50 p-4 rounded-lg">
311
+ <div class="bg-purple-100 text-purple-700 p-2 rounded mr-4">
312
+ <i class="fas fa-ad"></i>
313
+ </div>
314
+ <div>
315
+ <h4 class="font-semibold">Ad Tech</h4>
316
+ <p class="text-gray-600">Google Ad Manager with header bidding for premium ad inventory</p>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+
323
+ <div class="bg-purple-50 p-8 rounded-xl">
324
+ <h3 class="text-xl font-bold mb-6 text-purple-700 text-center">Tech Stack Implementation Roadmap</h3>
325
+ <div class="relative">
326
+ <div class="hidden md:block absolute left-16 h-full w-1 bg-purple-200" style="top: 20px;"></div>
327
+ <div class="space-y-10">
328
+ <div class="relative flex flex-col md:flex-row">
329
+ <div class="flex-shrink-0 w-32 text-right pr-6 hidden md:block">
330
+ <div class="bg-purple-600 text-white rounded-full w-10 h-10 flex items-center justify-center absolute right-0" style="top: 5px;">
331
+ <span>Q1</span>
332
+ </div>
333
+ </div>
334
+ <div class="md:pl-16">
335
+ <h4 class="font-bold text-lg mb-2">Foundation Phase</h4>
336
+ <p class="text-gray-600">Implement core automation tools and analytics. Train overseas team on basic stack.</p>
337
+ </div>
338
+ </div>
339
+ <div class="relative flex flex-col md:flex-row">
340
+ <div class="flex-shrink-0 w-32 text-right pr-6 hidden md:block">
341
+ <div class="bg-purple-600 text-white rounded-full w-10 h-10 flex items-center justify-center absolute right-0" style="top: 5px;">
342
+ <span>Q2</span>
343
+ </div>
344
+ </div>
345
+ <div class="md:pl-16">
346
+ <h4 class="font-bold text-lg mb-2">Monetization Layer</h4>
347
+ <p class="text-gray-600">Add affiliate tracking, API monetization endpoints, and ad tech integration.</p>
348
+ </div>
349
+ </div>
350
+ <div class="relative flex flex-col md:flex-row">
351
+ <div class="flex-shrink-0 w-32 text-right pr-6 hidden md:block">
352
+ <div class="bg-purple-600 text-white rounded-full w-10 h-10 flex items-center justify-center absolute right-0" style="top: 5px;">
353
+ <span>Q3</span>
354
+ </div>
355
+ </div>
356
+ <div class="md:pl-16">
357
+ <h4 class="font-bold text-lg mb-2">Optimization Phase</h4>
358
+ <p class="text-gray-600">Implement AI tools for content creation and predictive analytics for campaign optimization.</p>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </section>
366
+
367
+ <!-- Overseas PR Hiring -->
368
+ <section class="py-16 bg-gray-50">
369
+ <div class="container mx-auto px-4">
370
+ <h2 class="text-3xl font-bold text-center mb-12">Strategic Overseas PR Hiring</h2>
371
+
372
+ <div class="grid md:grid-cols-2 gap-8 mb-12">
373
+ <div>
374
+ <h3 class="text-xl font-bold mb-4 text-purple-700">Target Locations</h3>
375
+ <div class="bg-white p-6 rounded-xl shadow-md">
376
+ <div class="flex items-center mb-4">
377
+ <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mr-4">
378
+ <i class="fas fa-flag text-red-500"></i>
379
+ </div>
380
+ <div>
381
+ <h4 class="font-semibold">Philippines</h4>
382
+ <p class="text-gray-600 text-sm">English proficiency, cultural alignment, cost-effective</p>
383
+ </div>
384
+ </div>
385
+ <div class="flex items-center mb-4">
386
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
387
+ <i class="fas fa-flag text-blue-500"></i>
388
+ </div>
389
+ <div>
390
+ <h4 class="font-semibold">Eastern Europe</h4>
391
+ <p class="text-gray-600 text-sm">High education, tech-savvy, multiple language skills</p>
392
+ </div>
393
+ </div>
394
+ <div class="flex items-center">
395
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
396
+ <i class="fas fa-flag text-green-500"></i>
397
+ </div>
398
+ <div>
399
+ <h4 class="font-semibold">Latin America</h4>
400
+ <p class="text-gray-600 text-sm">Timezone alignment, growing tech hubs, cultural creativity</p>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+
406
+ <div>
407
+ <h3 class="text-xl font-bold mb-4 text-purple-700">Hiring Strategy</h3>
408
+ <div class="space-y-4">
409
+ <div class="flex items-start bg-white p-4 rounded-lg shadow-md">
410
+ <div class="bg-purple-100 text-purple-700 p-2 rounded mr-4">
411
+ <i class="fas fa-search"></i>
412
+ </div>
413
+ <div>
414
+ <h4 class="font-semibold">Specialized Platforms</h4>
415
+ <p class="text-gray-600">Use platforms like Upwork, Toptal, and RemoteOK to find pre-vetted talent</p>
416
+ </div>
417
+ </div>
418
+ <div class="flex items-start bg-white p-4 rounded-lg shadow-md">
419
+ <div class="bg-purple-100 text-purple-700 p-2 rounded mr-4">
420
+ <i class="fas fa-layer-group"></i>
421
+ </div>
422
+ <div>
423
+ <h4 class="font-semibold">Tiered Structure</h4>
424
+ <p class="text-gray-600">Junior content creators ($8-15/hr), Mid-level managers ($15-25/hr), Senior strategists ($25-40/hr)</p>
425
+ </div>
426
+ </div>
427
+ <div class="flex items-start bg-white p-4 rounded-lg shadow-md">
428
+ <div class="bg-purple-100 text-purple-700 p-2 rounded mr-4">
429
+ <i class="fas fa-certificate"></i>
430
+ </div>
431
+ <div>
432
+ <h4 class="font-semibold">Certification Program</h4>
433
+ <p class="text-gray-600">Develop ContactLists-specific certification to ensure quality standards</p>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <div class="bg-white p-8 rounded-xl shadow-md">
441
+ <h3 class="text-xl font-bold mb-6 text-purple-700 text-center">PR Team Structure</h3>
442
+ <div class="grid md:grid-cols-4 gap-6">
443
+ <div class="text-center p-4 border border-purple-100 rounded-lg">
444
+ <div class="text-purple-600 mb-3">
445
+ <i class="fas fa-newspaper fa-2x"></i>
446
+ </div>
447
+ <h4 class="font-semibold mb-2">Media Relations</h4>
448
+ <p class="text-sm text-gray-600">2 specialists per region to secure press coverage</p>
449
+ </div>
450
+ <div class="text-center p-4 border border-purple-100 rounded-lg">
451
+ <div class="text-purple-600 mb-3">
452
+ <i class="fas fa-pen-fancy fa-2x"></i>
453
+ </div>
454
+ <h4 class="font-semibold mb-2">Content Creation</h4>
455
+ <p class="text-sm text-gray-600">3 writers + 1 editor per language market</p>
456
+ </div>
457
+ <div class="text-center p-4 border border-purple-100 rounded-lg">
458
+ <div class="text-purple-600 mb-3">
459
+ <i class="fas fa-chart-pie fa-2x"></i>
460
+ </div>
461
+ <h4 class="font-semibold mb-2">Analytics</h4>
462
+ <p class="text-sm text-gray-600">1 data specialist per 5 team members</p>
463
+ </div>
464
+ <div class="text-center p-4 border border-purple-100 rounded-lg">
465
+ <div class="text-purple-600 mb-3">
466
+ <i class="fas fa-handshake fa-2x"></i>
467
+ </div>
468
+ <h4 class="font-semibold mb-2">Partnerships</h4>
469
+ <p class="text-sm text-gray-600">2 business development managers</p>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </section>
475
+
476
+ <!-- Performance Metrics -->
477
+ <section id="metrics" class="py-16 bg-white">
478
+ <div class="container mx-auto px-4">
479
+ <h2 class="text-3xl font-bold text-center mb-12">Performance Metrics & KPIs</h2>
480
+
481
+ <div class="grid md:grid-cols-3 gap-8 mb-12">
482
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md">
483
+ <h3 class="text-xl font-bold mb-4 text-purple-700">Social Media Metrics</h3>
484
+ <div class="space-y-4">
485
+ <div>
486
+ <div class="flex justify-between mb-1">
487
+ <span class="font-medium">Engagement Rate</span>
488
+ <span class="font-bold text-purple-600">4.8%</span>
489
+ </div>
490
+ <div class="progress-bar">
491
+ <div class="progress-fill" style="width: 72%"></div>
492
+ </div>
493
+ </div>
494
+ <div>
495
+ <div class="flex justify-between mb-1">
496
+ <span class="font-medium">Follower Growth</span>
497
+ <span class="font-bold text-purple-600">+28% MoM</span>
498
+ </div>
499
+ <div class="progress-bar">
500
+ <div class="progress-fill" style="width: 85%"></div>
501
+ </div>
502
+ </div>
503
+ <div>
504
+ <div class="flex justify-between mb-1">
505
+ <span class="font-medium">Conversion Rate</span>
506
+ <span class="font-bold text-purple-600">3.2%</span>
507
+ </div>
508
+ <div class="progress-bar">
509
+ <div class="progress-fill" style="width: 64%"></div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </div>
514
+
515
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md">
516
+ <h3 class="text-xl font-bold mb-4 text-purple-700">Monetization Metrics</h3>
517
+ <div class="space-y-6">
518
+ <div>
519
+ <div class="text-sm font-medium mb-1">Affiliate Revenue</div>
520
+ <div class="text-2xl font-bold text-purple-600">$12,450</div>
521
+ <div class="text-sm text-gray-500">+18% from last month</div>
522
+ </div>
523
+ <div>
524
+ <div class="text-sm font-medium mb-1">Sponsored Content</div>
525
+ <div class="text-2xl font-bold text-purple-600">$8,200</div>
526
+ <div class="text-sm text-gray-500">5 active partnerships</div>
527
+ </div>
528
+ <div>
529
+ <div class="text-sm font-medium mb-1">API Subscriptions</div>
530
+ <div class="text-2xl font-bold text-purple-600">$5,750</div>
531
+ <div class="text-sm text-gray-500">32 paying customers</div>
532
+ </div>
533
+ </div>
534
+ </div>
535
+
536
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md">
537
+ <h3 class="text-xl font-bold mb-4 text-purple-700">Team Performance</h3>
538
+ <div class="space-y-4">
539
+ <div class="flex items-center justify-between">
540
+ <div>
541
+ <div class="font-medium">Content Output</div>
542
+ <div class="text-sm text-gray-500">Posts per team member</div>
543
+ </div>
544
+ <div class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full font-bold">
545
+ 24
546
+ </div>
547
+ </div>
548
+ <div class="flex items-center justify-between">
549
+ <div>
550
+ <div class="font-medium">Response Time</div>
551
+ <div class="text-sm text-gray-500">Avg. to inquiries</div>
552
+ </div>
553
+ <div class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full font-bold">
554
+ 2.1h
555
+ </div>
556
+ </div>
557
+ <div class="flex items-center justify-between">
558
+ <div>
559
+ <div class="font-medium">Cost Savings</div>
560
+ <div class="text-sm text-gray-500">vs. domestic hires</div>
561
+ </div>
562
+ <div class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full font-bold">
563
+ 58%
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </div>
568
+ </div>
569
+
570
+ <div class="bg-purple-50 p-8 rounded-xl">
571
+ <h3 class="text-xl font-bold mb-6 text-purple-700 text-center">Projected Revenue Growth</h3>
572
+ <div class="overflow-x-auto">
573
+ <table class="min-w-full bg-white rounded-lg overflow-hidden">
574
+ <thead class="bg-purple-600 text-white">
575
+ <tr>
576
+ <th class="py-3 px-4 text-left">Quarter</th>
577
+ <th class="py-3 px-4 text-right">Social Revenue</th>
578
+ <th class="py-3 px-4 text-right">Affiliate</th>
579
+ <th class="py-3 px-4 text-right">API</th>
580
+ <th class="py-3 px-4 text-right">Total</th>
581
+ <th class="py-3 px-4 text-right">Growth</th>
582
+ </tr>
583
+ </thead>
584
+ <tbody class="divide-y divide-gray-200">
585
+ <tr>
586
+ <td class="py-3 px-4">Q1 2024</td>
587
+ <td class="py-3 px-4 text-right">$15,000</td>
588
+ <td class="py-3 px-4 text-right">$8,000</td>
589
+ <td class="py-3 px-4 text-right">$3,000</td>
590
+ <td class="py-3 px-4 text-right font-bold">$26,000</td>
591
+ <td class="py-3 px-4 text-right text-green-500">+0%</td>
592
+ </tr>
593
+ <tr class="bg-gray-50">
594
+ <td class="py-3 px-4">Q2 2024</td>
595
+ <td class="py-3 px-4 text-right">$22,500</td>
596
+ <td class="py-3 px-4 text-right">$12,000</td>
597
+ <td class="py-3 px-4 text-right">$6,000</td>
598
+ <td class="py-3 px-4 text-right font-bold">$40,500</td>
599
+ <td class="py-3 px-4 text-right text-green-500">+56%</td>
600
+ </tr>
601
+ <tr>
602
+ <td class="py-3 px-4">Q3 2024</td>
603
+ <td class="py-3 px-4 text-right">$30,000</td>
604
+ <td class="py-3 px-4 text-right">$18,000</td>
605
+ <td class="py-3 px-4 text-right">$10,000</td>
606
+ <td class="py-3 px-4 text-right font-bold">$58,000</td>
607
+ <td class="py-3 px-4 text-right text-green-500">+43%</td>
608
+ </tr>
609
+ <tr class="bg-gray-50">
610
+ <td class="py-3 px-4">Q4 2024</td>
611
+ <td class="py-3 px-4 text-right">$45,000</td>
612
+ <td class="py-3 px-4 text-right">$25,000</td>
613
+ <td class="py-3 px-4 text-right">$15,000</td>
614
+ <td class="py-3 px-4 text-right font-bold">$85,000</td>
615
+ <td class="py-3 px-4 text-right text-green-500">+47%</td>
616
+ </tr>
617
+ </tbody>
618
+ </table>
619
+ </div>
620
+ </div>
621
+ </div>
622
+ </section>
623
+
624
+ <!-- Team Structure -->
625
+ <section id="team" class="py-16 bg-gray-50">
626
+ <div class="container mx-auto px-4">
627
+ <h2 class="text-3xl font-bold text-center mb-12">Delegated Team Structure</h2>
628
+
629
+ <div class="grid md:grid-cols-2 gap-8 mb-12">
630
+ <div>
631
+ <h3 class="text-xl font-bold mb-4 text-purple-700">Core Team Members</h3>
632
+ <div class="space-y-4">
633
+ <div class="bg-white p-4 rounded-lg shadow-md flex items-start">
634
+ <div class="bg-purple-100 text-purple-700 p-3 rounded-full mr-4">
635
+ <i class="fas fa-crown"></i>
636
+ </div>
637
+ <div>
638
+ <h4 class="font-bold">Strategy Director (Local)</h4>
639
+ <p class="text-gray-600 text-sm">Oversees all operations, sets KPIs, manages client relationships</p>
640
+ <div class="mt-2">
641
+ <span class="bg-purple-100 text-purple-700 text-xs px-2 py-1 rounded">Full-time</span>
642
+ <span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded ml-1">$75k-$100k</span>
643
+ </div>
644
+ </div>
645
+ </div>
646
+ <div class="bg-white p-4 rounded-lg shadow-md flex items-start">
647
+ <div class="bg-blue-100 text-blue-700 p-3 rounded-full mr-4">
648
+ <i class="fas fa-globe-americas"></i>
649
+ </div>
650
+ <div>
651
+ <h4 class="font-bold">Regional Team Leads (3)</h4>
652
+ <p class="text-gray-600 text-sm">Manage overseas teams in different time zones, quality control</p>
653
+ <div class="mt-2">
654
+ <span class="bg-blue-100 text-blue-700 text-xs px-2 py-1 rounded">Remote</span>
655
+ <span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded ml-1">$35k-$50k</span>
656
+ </div>
657
+ </div>
658
+ </div>
659
+ <div class="bg-white p-4 rounded-lg shadow-md flex items-start">
660
+ <div class="bg-green-100 text-green-700 p-3 rounded-full mr-4">
661
+ <i class="fas fa-users"></i>
662
+ </div>
663
+ <div>
664
+ <h4 class="font-bold">Specialized Contributors (12)</h4>
665
+ <p class="text-gray-600 text-sm">Content creators, analysts, PR specialists across regions</p>
666
+ <div class="mt-2">
667
+ <span class="bg-green-100 text-green-700 text-xs px-2 py-1 rounded">Contract</span>
668
+ <span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded ml-1">$15-$30/hr</span>
669
+ </div>
670
+ </div>
671
+ </div>
672
+ </div>
673
+ </div>
674
+
675
+ <div>
676
+ <h3 class="text-xl font-bold mb-4 text-purple-700">Cost Breakdown</h3>
677
+ <div class="bg-white p-6 rounded-xl shadow-md">
678
+ <div class="mb-6">
679
+ <h4 class="font-semibold mb-2">Monthly Team Costs</h4>
680
+ <div class="space-y-3">
681
+ <div class="flex justify-between">
682
+ <span>Strategy Director</span>
683
+ <span class="font-bold">$6,250</span>
684
+ </div>
685
+ <div class="flex justify-between">
686
+ <span>Regional Team Leads (3)</span>
687
+ <span class="font-bold">$10,500</span>
688
+ </div>
689
+ <div class="flex justify-between">
690
+ <span>Specialized Contributors</span>
691
+ <span class="font-bold">$14,400</span>
692
+ </div>
693
+ <div class="border-t border-gray-200 my-2"></div>
694
+ <div class="flex justify-between font-bold text-lg">
695
+ <span>Total</span>
696
+ <span>$31,150</span>
697
+ </div>
698
+ </div>
699
+ </div>
700
+ <div>
701
+ <h4 class="font-semibold mb-2">Savings vs. Domestic Team</h4>
702
+ <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
703
+ <div class="flex">
704
+ <div class="flex-shrink-0">
705
+ <i class="fas fa-info-circle text-yellow-400"></i>
706
+ </div>
707
+ <div class="ml-3">
708
+ <p class="text-sm text-yellow-700">
709
+ Estimated domestic team cost: <span class="font-bold">$74,000/month</span><br>
710
+ Savings: <span class="font-bold text-green-600">$42,850 (58%)</span>
711
+ </p>
712
+ </div>
713
+ </div>
714
+ </div>
715
+ </div>
716
+ </div>
717
+ </div>
718
+ </div>
719
+
720
+ <div class="bg-white p-8 rounded-xl shadow-md">
721
+ <h3 class="text-xl font-bold mb-6 text-purple-700 text-center">Implementation Timeline</h3>
722
+ <div class="relative">
723
+ <!-- Timeline -->
724
+ <div class="hidden sm:block absolute left-1/2 h-full w-1 bg-purple-200 transform -translate-x-1/2" style="top: 30px;"></div>
725
+
726
+ <!-- Timeline Items -->
727
+ <div class="space-y-12">
728
+ <!-- Month 1 -->
729
+ <div class="relative flex flex-col sm:flex-row items-center">
730
+ <div class="flex-shrink-0 w-24 h-24 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-lg sm:absolute left-1/2 transform -translate-x-1/2">
731
+ Month 1
732
+ </div>
733
+ <div class="sm:ml-auto sm:pl-16 sm:w-1/2 mt-4 sm:mt-0">
734
+ <div class="bg-gray-50 p-6 rounded-lg">
735
+ <h4 class="font-bold text-lg mb-2">Team Assembly</h4>
736
+ <ul class="list-disc pl-5 text-gray-600 space-y-1">
737
+ <li>Hire Strategy Director</li>
738
+ <li>Recruit first regional lead</li>
739
+ <li>Set up collaboration tools</li>
740
+ </ul>
741
+ </div>
742
+ </div>
743
+ </div>
744
+
745
+ <!-- Month 2 -->
746
+ <div class="relative flex flex-col sm:flex-row items-center">
747
+ <div class="flex-shrink-0 w-24 h-24 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-lg sm:absolute left-1/2 transform -translate-x-1/2">
748
+ Month 2
749
+ </div>
750
+ <div class="sm:mr-auto sm:pr-16 sm:w-1/2 mt-4 sm:mt-0">
751
+ <div class="bg-gray-50 p-6 rounded-lg">
752
+ <h4 class="font-bold text-lg mb-2">Initial Deployment</h4>
753
+ <ul class="list-disc pl-5 text-gray-600 space-y-1">
754
+ <li>Onboard first content creators</li>
755
+ <li>Launch basic social campaigns</li>
756
+ <li>Implement analytics</li>
757
+ </ul>
758
+ </div>
759
+ </div>
760
+ </div>
761
+
762
+ <!-- Month 3 -->
763
+ <div class="relative flex flex-col sm:flex-row items-center">
764
+ <div class="flex-shrink-0 w-24 h-24 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-lg sm:absolute left-1/2 transform -translate-x-1/2">
765
+ Month 3
766
+ </div>
767
+ <div class="sm:ml-auto sm:pl-16 sm:w-1/2 mt-4 sm:mt-0">
768
+ <div class="bg-gray-50 p-6 rounded-lg">
769
+ <h4 class="font-bold text-lg mb-2">Scale Up</h4>
770
+ <ul class="list-disc pl-5 text-gray-600 space-y-1">
771
+ <li>Add remaining regional teams</li>
772
+ <li>Implement monetization tech</li>
773
+ <li>Launch first sponsored content</li>
774
+ </ul>
775
+ </div>
776
+ </div>
777
+ </div>
778
+ </div>
779
+ </div>
780
+ </div>
781
+ </div>
782
+ </section>
783
+
784
+ <!-- CTA Section -->
785
+ <section class="gradient-bg text-white py-16">
786
+ <div class="container mx-auto px-4 text-center">
787
+ <h2 class="text-3xl font-bold mb-6">Ready to Transform Your Monetization Strategy?</h2>
788
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Implement this delegation system and start seeing results within the first 90 days.</p>
789
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
790
+ <button class="bg-white text-purple-700 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition transform hover:scale-105">
791
+ Download Full Strategy
792
+ </button>
793
+ <button class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-purple-700 transition transform hover:scale-105">
794
+ Schedule Consultation
795
+ </button>
796
+ </div>
797
+ </div>
798
+ </section>
799
+
800
+ <!-- Footer -->
801
+ <footer class="bg-gray-900 text-white py-12">
802
+ <div class="container mx-auto px-4">
803
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
804
+ <div>
805
+ <h3 class="text-xl font-bold mb-4">ContactLists Monetization</h3>
806
+ <p class="text-gray-400">Strategic delegation system to maximize revenue through social media, tech optimization, and global talent.</p>
807
+ </div>
808
+ <div>
809
+ <h4 class="font-bold mb-4">Quick Links</h4>
810
+ <ul class="space-y-2">
811
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Strategy Overview</a></li>
812
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Delegation Framework</a></li>
813
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tech Stack</a></li>
814
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Team Structure</a></li>
815
+ </ul>
816
+ </div>
817
+ <div>
818
+ <h4 class="font-bold mb-4">Resources</h4>
819
+ <ul class="space-y-2">
820
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Case Studies</a></li>
821
+ <li><a href="#" class="text-gray-400 hover:text-white transition">ROI Calculator</a></li>
822
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Hiring Guide</a></li>
823
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tech Partners</a></li>
824
+ </ul>
825
+ </div>
826
+ <div>
827
+ <h4 class="font-bold mb-4">Contact</h4>
828
+ <address class="not-italic text-gray-400">
829
+ <p class="mb-2">123 Business Ave, Suite 500</p>
830
+ <p class="mb-2">San Francisco, CA 94107</p>
831
+ <p class="mb-2">Email: info@contactlists.com</p>
832
+ <p>Phone: (555) 123-4567</p>
833
+ </address>
834
+ </div>
835
+ </div>
836
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
837
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 ContactLists Monetization System. All rights reserved.</p>
838
+ <div class="flex space-x-6">
839
+ <a href="#" class="text-gray-400 hover:text-white transition">
840
+ <i class="fab fa-facebook-f"></i>
841
+ </a>
842
+ <a href="#" class="text-gray-400 hover:text-white transition">
843
+ <i class="fab fa-twitter"></i>
844
+ </a>
845
+ <a href="#" class="text-gray-400 hover:text-white transition">
846
+ <i class="fab fa-linkedin-in"></i>
847
+ </a>
848
+ <a href="#" class="text-gray-400 hover:text-white transition">
849
+ <i class="fab fa-instagram"></i>
850
+ </a>
851
+ </div>
852
+ </div>
853
+ </div>
854
+ </footer>
855
+
856
+ <script>
857
+ // Simple script for mobile menu toggle
858
+ document.addEventListener('DOMContentLoaded', function() {
859
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
860
+ const navMenu = document.querySelector('nav');
861
+
862
+ mobileMenuButton.addEventListener('click', function() {
863
+ if (navMenu.classList.contains('hidden')) {
864
+ navMenu.classList.remove('hidden');
865
+ navMenu.classList.add('block', 'absolute', 'top-16', 'right-4', 'bg-white', 'shadow-lg', 'rounded-lg', 'p-4', 'z-50');
866
+ const ul = navMenu.querySelector('ul');
867
+ ul.classList.remove('flex', 'space-x-8');
868
+ ul.classList.add('space-y-4');
869
+ } else {
870
+ navMenu.classList.add('hidden');
871
+ navMenu.classList.remove('block', 'absolute', 'top-16', 'right-4', 'bg-white', 'shadow-lg', 'rounded-lg', 'p-4', 'z-50');
872
+ const ul = navMenu.querySelector('ul');
873
+ ul.classList.add('flex', 'space-x-8');
874
+ ul.classList.remove('space-y-4');
875
+ }
876
+ });
877
+
878
+ // Smooth scrolling for anchor links
879
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
880
+ anchor.addEventListener('click', function (e) {
881
+ e.preventDefault();
882
+
883
+ const targetId = this.getAttribute('href');
884
+ const targetElement = document.querySelector(targetId);
885
+
886
+ if (targetElement) {
887
+ window.scrollTo({
888
+ top: targetElement.offsetTop - 100,
889
+ behavior: 'smooth'
890
+ });
891
+
892
+ // Close mobile menu if open
893
+ if (!navMenu.classList.contains('hidden')) {
894
+ navMenu.classList.add('hidden');
895
+ navMenu.classList.remove('block', 'absolute', 'top-16', 'right-4', 'bg-white', 'shadow-lg', 'rounded-lg', 'p-4', 'z-50');
896
+ const ul = navMenu.querySelector('ul');
897
+ ul.classList.add('flex', 'space-x-8');
898
+ ul.classList.remove('space-y-4');
899
+ }
900
+ }
901
+ });
902
+ });
903
+ });
904
+ </script>
905
+ <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=panderso/cl" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
906
+ </html>