-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
376 lines (356 loc) · 26.2 KB
/
index.html
File metadata and controls
376 lines (356 loc) · 26.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sponsor Decoding Data Science | Hackathon 2025</title>
<meta name="description" content="Partner with the MENA region's largest AI & Data Science Community. Sponsorship packages for upcoming GenAI Hackathons.">
<!-- Favicon -->
<link rel="icon" type="image/jpeg" href="https://raw.githubusercontent.com/Decoding-Data-Science/airesidency/main/dds_logo.jpg">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Custom Config -->
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
dds: {
blue: '#0F172A',
accent: '#3B82F6',
gold: '#F59E0B',
silver: '#94A3B8',
bronze: '#B45309'
}
}
}
}
}
</script>
<style>
.hero-bg {
background-color: #0F172A;
background-image: radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
}
.glass-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.gallery-img {
transition: transform 0.3s ease;
}
.gallery-img:hover {
transform: scale(1.05);
}
</style>
</head>
<body class="bg-slate-50 text-slate-800 font-sans antialiased">
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-white/90 backdrop-blur-md border-b border-slate-200 shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<div class="flex-shrink-0 flex items-center gap-3">
<img class="h-12 w-auto rounded-full" src="https://raw.githubusercontent.com/Decoding-Data-Science/airesidency/main/dds_logo.jpg" alt="DDS Logo">
<span class="font-bold text-xl tracking-tight text-slate-900">Decoding Data Science</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#about" class="text-slate-600 hover:text-dds-accent transition">About</a>
<a href="#history" class="text-slate-600 hover:text-dds-accent transition">History</a>
<a href="#gallery" class="text-slate-600 hover:text-dds-accent transition">Gallery</a>
<a href="#packages" class="text-slate-600 hover:text-dds-accent transition">Packages</a>
<a href="mailto:connect@decodingdatascience.com?subject=Custom%20Hackathon%20Package" class="px-5 py-2 rounded-full bg-blue-600 text-white hover:bg-blue-700 transition shadow-lg text-sm font-semibold">Customized Package</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-btn" class="text-slate-600 hover:text-slate-900 focus:outline-none">
<i class="fa-solid fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-slate-100">
<a href="#about" class="block py-3 px-4 text-slate-700 hover:bg-slate-50">About</a>
<a href="#history" class="block py-3 px-4 text-slate-700 hover:bg-slate-50">History</a>
<a href="#packages" class="block py-3 px-4 text-slate-700 hover:bg-slate-50">Packages</a>
<a href="mailto:connect@decodingdatascience.com" class="block py-3 px-4 text-dds-accent font-semibold">Customized Package</a>
</div>
</nav>
<!-- Hero Section -->
<header class="hero-bg relative pt-32 pb-20 lg:pt-48 lg:pb-32 text-white overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 border border-white/20 mb-8 backdrop-blur-sm">
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
<span class="text-sm font-medium text-slate-200">2025: Quarterly AI Challenges & Enterprise Partnering</span>
</div>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 leading-tight">
Empower Your AI Ecosystem <br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">Collaborate with Experts</span>
</h1>
<p class="mt-4 max-w-3xl mx-auto text-xl text-slate-300 leading-relaxed">
Join our 180,000+ member community. We host <strong>Quarterly General Hackathons</strong> for broad innovation and offer <strong>Full-Service Organization & Marketing</strong> for your bespoke company challenges.
</p>
<div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
<a href="#packages" class="px-8 py-4 rounded-lg bg-blue-600 hover:bg-blue-500 text-white font-bold text-lg transition shadow-blue-500/25 shadow-xl">
View Standard Packages
</a>
<a href="mailto:connect@decodingdatascience.com?subject=Customized%20Hackathon%20Inquiry" class="px-8 py-4 rounded-lg bg-white/10 hover:bg-white/20 border border-white/20 text-white font-semibold text-lg transition backdrop-blur-sm">
Custom Organization Request
</a>
</div>
</div>
<div class="absolute top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none opacity-30">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/30 rounded-full blur-3xl"></div>
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/30 rounded-full blur-3xl"></div>
</div>
</header>
<!-- Services Overview -->
<section id="about" class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl font-bold text-slate-900 mb-6 italic uppercase tracking-tight">The Roadmap: Quarterly Innovation</h2>
<p class="text-slate-600 text-lg mb-4">
We plan a general community hackathon and challenge <strong>every quarter</strong>. These are open platforms for companies to collaborate, test their APIs, and discover emerging talent.
</p>
<p class="text-slate-600 text-lg mb-6">
Looking for something more exclusive? We also help enterprise partners <strong>organize, manage, and market</strong> their own private or public branded hackathons from start to finish.
</p>
<div class="flex gap-4">
<div class="flex-1 p-4 bg-slate-50 rounded-xl border-l-4 border-blue-500">
<span class="block font-bold text-slate-900">4+ Annual Challenges</span>
<span class="text-sm text-slate-500">Regular community growth</span>
</div>
<div class="flex-1 p-4 bg-slate-50 rounded-xl border-l-4 border-emerald-500">
<span class="block font-bold text-slate-900">End-to-End Marketing</span>
<span class="text-sm text-slate-500">Full lifecycle management</span>
</div>
</div>
</div>
<div class="relative group">
<img src="https://raw.githubusercontent.com/Decoding-Data-Science/airesidency/main/pic1.jpg" alt="Hackathon Preview" class="rounded-2xl shadow-2xl gallery-img" onerror="this.src='https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&q=80&w=800'">
<div class="absolute -bottom-6 -right-6 bg-blue-600 text-white p-6 rounded-2xl hidden lg:block shadow-xl">
<p class="font-bold text-2xl leading-none">180K+</p>
<p class="text-sm opacity-80 uppercase tracking-widest mt-1">Followers</p>
</div>
</div>
</div>
</div>
</section>
<!-- Past Hackathons Track Record -->
<section id="history" class="py-20 bg-slate-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-blue-600 font-bold tracking-wide uppercase text-sm">Case Study</span>
<h2 class="text-3xl font-bold text-slate-900 mt-2 italic">Rev Up Your Workflow: AI Agent Hackathon</h2>
<p class="mt-4 text-slate-600 max-w-2xl mx-auto">Collaboration with Airia and Williams Racing at Yas Creative Hub, Abu Dhabi.</p>
</div>
<!-- Featured Airia Event -->
<div class="bg-white rounded-3xl shadow-xl overflow-hidden border border-slate-200 mb-16">
<div class="grid grid-cols-1 lg:grid-cols-2">
<div class="p-8 lg:p-12">
<div class="flex items-center gap-2 mb-6">
<span class="px-3 py-1 bg-blue-100 text-blue-700 text-xs font-bold rounded-full">AIRIA COLLABORATION</span>
<span class="px-3 py-1 bg-slate-100 text-slate-700 text-xs font-bold rounded-full">ABU DHABI</span>
</div>
<h3 class="text-3xl font-black text-slate-900 mb-6 italic">Innovation in the Fast Lane</h3>
<p class="text-slate-600 mb-6 leading-relaxed">
A high-speed exploration building autonomous AI agents. Featuring a fireside chat with <strong>James Vowles</strong> (Team Principal, Williams Racing) and <strong>Alex Albon</strong>.
</p>
<ul class="space-y-4 mb-8">
<li class="flex items-center gap-3 text-slate-700 font-medium italic"><i class="fa-solid fa-flag-checkered text-blue-600"></i> Built championship-level agents in 2 hours</li>
<li class="flex items-center gap-3 text-slate-700 font-medium italic"><i class="fa-solid fa-trophy text-blue-600"></i> 7,000 AED Prize Pool + Token Credits</li>
</ul>
<div class="flex flex-wrap gap-4">
<div class="text-center bg-slate-50 p-3 rounded-lg flex-1"><p class="text-xs text-slate-500 uppercase font-bold">1st Place</p><p class="font-bold text-slate-900">4,000 AED</p></div>
<div class="text-center bg-slate-50 p-3 rounded-lg flex-1"><p class="text-xs text-slate-500 uppercase font-bold">2nd Place</p><p class="font-bold text-slate-900">2,000 AED</p></div>
<div class="text-center bg-slate-50 p-3 rounded-lg flex-1"><p class="text-xs text-slate-500 uppercase font-bold">3rd Place</p><p class="font-bold text-slate-900">1,000 AED</p></div>
</div>
</div>
<div class="bg-slate-900 relative min-h-[400px]">
<img src="https://raw.githubusercontent.com/Decoding-Data-Science/airesidency/main/pic2.jpg" alt="Airia Hackathon" class="w-full h-full object-cover opacity-80" onerror="this.src='https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&q=80&w=800'">
<div class="absolute inset-0 flex items-center justify-center">
<div class="text-center p-6 glass-card rounded-2xl max-w-xs">
<p class="text-slate-900 font-bold mb-2">"High speed exploration in the fast lane"</p>
<div class="flex justify-center gap-2">
<i class="fa-solid fa-star text-yellow-400"></i><i class="fa-solid fa-star text-yellow-400"></i><i class="fa-solid fa-star text-yellow-400"></i><i class="fa-solid fa-star text-yellow-400"></i><i class="fa-solid fa-star text-yellow-400"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Other Past Challenges Grid -->
<div class="text-center mb-10">
<h3 class="text-2xl font-bold text-slate-900 italic uppercase">More Success Stories</h3>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- AAICO -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition border border-slate-100">
<div class="h-40 bg-slate-900 flex items-center justify-center p-6 text-center">
<h4 class="text-xl font-bold text-white uppercase italic">AAICO Voice Analysis</h4>
</div>
<div class="p-6">
<div class="text-xs font-bold text-blue-600 uppercase mb-2">Voice AI • Python</div>
<p class="text-slate-600 text-sm mb-4">Detection of specific commands in real-time audio streams. Focus on latency and accuracy.</p>
<div class="flex items-center text-sm font-bold text-slate-900">
<i class="fa-solid fa-trophy mr-2 text-yellow-500"></i> $5,450 Prize Pool
</div>
</div>
</div>
<!-- Facial Emotion -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition border border-slate-100">
<div class="h-40 bg-indigo-900 flex items-center justify-center p-6 text-center">
<h4 class="text-xl font-bold text-white uppercase italic">Facial Emotion Detection</h4>
</div>
<div class="p-6">
<div class="text-xs font-bold text-blue-600 uppercase mb-2">Computer Vision</div>
<p class="text-slate-600 text-sm mb-4">Sentiment analysis models for 5-10s video clips, solving customer insight challenges.</p>
<div class="flex items-center text-sm font-bold text-slate-900">
<i class="fa-solid fa-code-branch mr-2 text-indigo-400"></i> Open Source Models
</div>
</div>
</div>
<!-- GenAI -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition border border-slate-100">
<div class="h-40 bg-emerald-900 flex items-center justify-center p-6 text-center">
<h4 class="text-xl font-bold text-white uppercase italic">GenAI & LLM Challenges</h4>
</div>
<div class="p-6">
<div class="text-xs font-bold text-blue-600 uppercase mb-2">Agentic AI • RAG</div>
<p class="text-slate-600 text-sm mb-4">Continuous innovation in LangChain pipelines and autonomous agents for community growth.</p>
<div class="flex items-center text-sm font-bold text-slate-900">
<i class="fa-solid fa-users mr-2 text-emerald-500"></i> 100+ Submissions
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Photo Gallery Section -->
<section id="gallery" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-slate-900 italic uppercase">Hackathon Gallery</h2>
<p class="mt-4 text-slate-600">Visual moments from our previous challenges.</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="h-64 rounded-xl overflow-hidden bg-slate-200">
<img src="https://raw.githubusercontent.com/Decoding-Data-Science/airesidency/main/pic1.jpg" alt="Hackathon 1" class="w-full h-full object-cover gallery-img" onerror="this.src='https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=400'">
</div>
<div class="h-64 rounded-xl overflow-hidden bg-slate-200">
<img src="https://raw.githubusercontent.com/Decoding-Data-Science/airesidency/main/pic2.jpg" alt="Hackathon 2" class="w-full h-full object-cover gallery-img" onerror="this.src='https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&q=80&w=400'">
</div>
<div class="h-64 rounded-xl overflow-hidden bg-slate-200">
<img src="https://raw.githubusercontent.com/Decoding-Data-Science/airesidency/main/pic3.jpg" alt="Hackathon 3" class="w-full h-full object-cover gallery-img" onerror="this.src='https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80&w=400'">
</div>
<div class="h-64 rounded-xl overflow-hidden bg-slate-200">
<img src="https://raw.githubusercontent.com/Decoding-Data-Science/airesidency/main/pic4.jpg" alt="Hackathon 4" class="w-full h-full object-cover gallery-img" onerror="this.src='https://images.unsplash.com/photo-1515187029135-18ee286d815b?auto=format&fit=crop&q=80&w=400'">
</div>
</div>
</div>
</section>
<!-- Sponsorship Packages -->
<section id="packages" class="py-20 bg-slate-50 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-slate-900 italic uppercase">Sponsorship Tiers</h2>
<p class="mt-4 text-slate-600">Standard community packages or contact us for bespoke enterprise solutions.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch">
<!-- Bronze -->
<div class="bg-white border border-slate-200 rounded-2xl p-8 hover:border-orange-500/50 transition relative flex flex-col">
<h3 class="text-2xl font-bold text-slate-900">Bronze</h3>
<div class="text-4xl font-bold mt-4 mb-2 text-dds-bronze">$2,500</div>
<p class="text-sm text-slate-500 mb-6">Visibility Package</p>
<ul class="space-y-4 mb-8 flex-grow">
<li class="flex items-start text-sm text-slate-600"><i class="fa-solid fa-check text-green-500 mt-1 mr-3"></i> Logo on Website & Banners</li>
<li class="flex items-start text-sm text-slate-600"><i class="fa-solid fa-check text-green-500 mt-1 mr-3"></i> Social Media Shoutout</li>
<li class="flex items-start text-sm text-slate-600"><i class="fa-solid fa-check text-green-500 mt-1 mr-3"></i> Newsletter Footer Mention</li>
</ul>
<a href="mailto:connect@decodingdatascience.com?subject=Bronze%20Package%20Interest" class="block w-full py-3 px-4 bg-slate-100 text-slate-700 font-bold text-center rounded-lg hover:bg-slate-200 transition italic">Select Bronze</a>
</div>
<!-- Gold (Featured) -->
<div class="bg-white border-2 border-yellow-400 rounded-2xl p-8 shadow-2xl relative transform md:-translate-y-4 flex flex-col">
<div class="absolute top-0 right-0 bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">MOST POPULAR</div>
<h3 class="text-2xl font-bold text-slate-900">Gold</h3>
<div class="text-5xl font-bold mt-4 mb-2 text-dds-gold">$7,000</div>
<p class="text-sm text-slate-500 mb-6">Full Ecosystem Access</p>
<ul class="space-y-4 mb-8 flex-grow">
<li class="flex items-start text-sm text-slate-800 font-semibold"><i class="fa-solid fa-check text-yellow-500 mt-1 mr-3"></i> Keynote Speaking Slot (15 mins)</li>
<li class="flex items-start text-sm text-slate-800 font-semibold"><i class="fa-solid fa-check text-yellow-500 mt-1 mr-3"></i> Judge Panel Seat</li>
<li class="flex items-start text-sm text-slate-600"><i class="fa-solid fa-check text-yellow-500 mt-1 mr-3"></i> Full Talent Database Access</li>
<li class="flex items-start text-sm text-slate-600"><i class="fa-solid fa-check text-yellow-500 mt-1 mr-3"></i> Custom Challenge Statement</li>
</ul>
<a href="mailto:connect@decodingdatascience.com?subject=Gold%20Package%20Interest" class="block w-full py-4 px-4 bg-yellow-400 text-yellow-900 font-bold text-center rounded-lg hover:bg-yellow-300 transition shadow-lg italic text-sm">Become a Gold Sponsor</a>
</div>
<!-- Enterprise (Custom) -->
<div class="bg-blue-600 border border-blue-500 rounded-2xl p-8 text-white relative flex flex-col shadow-xl">
<h3 class="text-2xl font-bold">Enterprise</h3>
<div class="text-3xl font-bold mt-4 mb-2 uppercase tracking-tighter">Bespoke Organization</div>
<p class="text-sm text-blue-100 mb-6 font-medium">Fully Managed Hackathons</p>
<ul class="space-y-4 mb-8 flex-grow">
<li class="flex items-start text-sm text-white font-medium italic"><i class="fa-solid fa-gear text-white mt-1 mr-3"></i> Custom Org Management</li>
<li class="flex items-start text-sm text-white font-medium italic"><i class="fa-solid fa-bullhorn text-white mt-1 mr-3"></i> Focused Marketing Campaign</li>
<li class="flex items-start text-sm text-white font-medium italic"><i class="fa-solid fa-location-dot text-white mt-1 mr-3"></i> Venue & Logistics Support</li>
</ul>
<a href="mailto:connect@decodingdatascience.com?subject=Custom%20Enterprise%20Hackathon%20Package" class="block w-full py-3 px-4 bg-white text-blue-700 font-bold text-center rounded-lg hover:bg-blue-50 transition italic shadow-md">Request Quote</a>
</div>
</div>
</div>
</section>
<!-- Footer / Contact -->
<footer id="contact" class="bg-slate-900 text-white pt-20 pb-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
<div>
<div class="flex items-center gap-3 mb-6">
<img class="h-10 w-auto rounded-full bg-white p-0.5" src="https://raw.githubusercontent.com/Decoding-Data-Science/airesidency/main/dds_logo.jpg" alt="DDS Logo">
<span class="text-2xl font-bold tracking-tighter uppercase italic">Decoding Data Science</span>
</div>
<p class="text-slate-400 text-lg mb-8 max-w-md italic">
MENA's Largest AI Community. Partnering with elite enterprises to drive real-world AI impact every quarter.
</p>
<div class="flex space-x-6">
<a href="https://www.linkedin.com/company/decodingdatascience" target="_blank" class="text-slate-400 hover:text-white transition text-2xl"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://www.youtube.com/@decodingdatascience" target="_blank" class="text-slate-400 hover:text-red-500 transition text-2xl"><i class="fa-brands fa-youtube"></i></a>
<a href="https://twitter.com/decodingdatascience" target="_blank" class="text-slate-400 hover:text-blue-400 transition text-2xl"><i class="fa-brands fa-twitter"></i></a>
</div>
</div>
<div class="bg-slate-800 p-8 rounded-2xl border border-slate-700">
<h3 class="text-xl font-bold mb-6 italic uppercase tracking-widest">Connect with Us</h3>
<ul class="space-y-4 mb-8">
<li class="flex items-center text-slate-300">
<i class="fa-solid fa-envelope w-8 text-blue-400"></i>
<a href="mailto:connect@decodingdatascience.com" class="hover:text-white transition">connect@decodingdatascience.com</a>
</li>
<li class="flex items-center text-slate-300">
<i class="fa-solid fa-location-dot w-8 text-blue-400"></i>
<span>Dubai Internet City, UAE</span>
</li>
</ul>
<a href="mailto:connect@decodingdatascience.com?subject=Sponsorship%20Inquiry" class="block w-full py-4 bg-blue-600 hover:bg-blue-500 text-white font-bold text-center rounded-lg transition italic uppercase tracking-tighter">
Inquire for Customized Package
</a>
</div>
</div>
<div class="border-t border-slate-800 pt-8 text-center text-slate-500 text-sm italic">
© 2025 Decoding Data Science. All rights reserved.
</div>
</div>
</footer>
<script>
const btn = document.getElementById('mobile-menu-btn');
const menu = document.getElementById('mobile-menu');
btn.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
</script>
</body>
</html>