-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcode.html
More file actions
478 lines (477 loc) · 24.5 KB
/
code.html
File metadata and controls
478 lines (477 loc) · 24.5 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
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
<!DOCTYPE html>
<html class="scroll-smooth" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>EventLoop | The Operating System for Temporary Transportation</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#0ea5e9", // High-tech blue
secondary: "#3b82f6",
"neon-green": "#39ff14", // For the specific demo requested
"background-light": "#f8fafc",
"background-dark": "#0f172a",
"surface-dark": "#1e293b",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.5rem",
},
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
vertical-align: middle;
}
.glass-panel {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.dark .glass-panel {
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.typing-cursor::after {
content: '|';
animation: blink 1s step-start infinite;
}
@keyframes blink {
50% { opacity: 0; }
}.chat-scroll::-webkit-scrollbar {
width: 6px;
}
.chat-scroll::-webkit-scrollbar-track {
background: transparent;
}
.chat-scroll::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 20px;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 transition-colors duration-300 overflow-x-hidden">
<nav class="fixed top-0 w-full z-50 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center space-x-2">
<span class="text-primary text-3xl material-symbols-outlined">all_inclusive</span>
<span class="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">EventLoop</span>
</div>
<div class="hidden md:flex space-x-8 items-center text-sm font-medium">
<a class="hover:text-primary transition-colors" href="#comparison">Why Us</a>
<a class="hover:text-primary transition-colors" href="#features">Features</a>
<a class="hover:text-primary transition-colors" href="#architecture">Architecture</a>
<a class="hover:text-primary transition-colors" href="#markets">Markets</a>
<a class="px-5 py-2 rounded-full bg-primary text-white hover:bg-sky-600 transition-all shadow-lg shadow-primary/25" href="#">Get Started</a>
</div>
</div>
</div>
</nav>
<header class="relative pt-32 pb-20 lg:pt-40 lg:pb-32 overflow-hidden">
<div class="absolute inset-0 -z-10">
<div class="absolute top-0 right-0 w-[800px] h-[800px] bg-primary/10 rounded-full blur-[120px] -mr-48 -mt-24"></div>
<div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-sky-400/10 rounded-full blur-[100px] -ml-24 -mb-24"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="text-left">
<div class="inline-flex items-center px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-semibold mb-6 border border-primary/20">
<span class="material-symbols-outlined text-sm mr-1">auto_awesome</span>
AI-Driven Logistics
</div>
<h1 class="text-5xl md:text-6xl font-extrabold tracking-tight text-slate-900 dark:text-white mb-6 leading-tight">
The Operating System for <br/>
<span class="text-primary">Temporary Transportation</span>
</h1>
<p class="text-lg md:text-xl text-slate-600 dark:text-slate-400 mb-10 leading-relaxed">
Generate and deploy a private, AI-optimized ride network in minutes just by speaking.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<button class="px-8 py-4 bg-primary text-white rounded-xl font-bold text-lg hover:bg-sky-600 transition-all shadow-xl shadow-primary/30 flex items-center justify-center">
Start Building
<span class="material-symbols-outlined ml-2">arrow_forward</span>
</button>
<button class="px-8 py-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl font-bold text-lg hover:border-primary transition-all flex items-center justify-center">
View Demo
</button>
</div>
</div>
<div class="relative mt-12 lg:mt-0">
<div class="absolute -inset-4 bg-gradient-to-r from-primary/20 to-purple-500/20 rounded-[2rem] blur-2xl -z-10"></div>
<div class="flex gap-4 items-stretch h-[500px]">
<div class="flex-1 bg-slate-900 rounded-2xl border border-slate-700 shadow-2xl overflow-hidden flex flex-col relative">
<div class="bg-slate-800 p-3 border-b border-slate-700 flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="ml-2 text-xs text-slate-400 font-mono">EventLoop AI Studio</span>
</div>
<div class="flex-1 p-4 font-mono text-sm space-y-4">
<div class="text-slate-400 text-xs uppercase tracking-wider mb-2">History</div>
<div class="flex gap-3">
<div class="w-6 h-6 rounded-full bg-primary flex-shrink-0 flex items-center justify-center text-[10px] text-white font-bold">U</div>
<div class="bg-slate-800 rounded-lg rounded-tl-none p-3 text-slate-300 text-xs">
I need a fleet for Coachella. 50 SUVs.
</div>
</div>
<div class="flex gap-3">
<div class="w-6 h-6 rounded-full bg-indigo-500 flex-shrink-0 flex items-center justify-center text-[10px] text-white font-bold">AI</div>
<div class="bg-primary/20 text-primary border border-primary/20 rounded-lg rounded-tl-none p-3 text-xs">
Fleet deployed. Configured for 50 vehicles.
</div>
</div>
<div class="flex gap-3 mt-6">
<div class="w-6 h-6 rounded-full bg-primary flex-shrink-0 flex items-center justify-center text-[10px] text-white font-bold">U</div>
<div class="bg-slate-800 border border-slate-600 rounded-lg rounded-tl-none p-3 text-white text-sm shadow-lg">
Make the app neon green, add pickup spots at the main stage and artist village. <span class="typing-cursor"></span>
</div>
</div>
</div>
<div class="p-4 border-t border-slate-700 bg-slate-800/50">
<div class="h-1 w-full bg-slate-700 rounded overflow-hidden">
<div class="h-full bg-primary w-2/3 animate-pulse"></div>
</div>
<div class="flex justify-between mt-2 text-[10px] text-slate-400">
<span>Processing changes...</span>
<span>65ms</span>
</div>
</div>
</div>
<div class="w-[260px] flex-shrink-0 bg-black rounded-[2rem] border-4 border-slate-800 shadow-2xl overflow-hidden relative flex flex-col">
<div class="h-12 bg-slate-900/90 backdrop-blur absolute top-0 w-full z-20 flex items-center justify-between px-4 border-b border-white/10">
<span class="text-white font-bold text-xs">FESTIVAL RIDES</span>
<span class="material-symbols-outlined text-white text-sm">menu</span>
</div>
<div class="flex-1 bg-slate-800 relative bg-[url('https://api.mapbox.com/styles/v1/mapbox/dark-v11/static/-116.2372,33.6803,15,0/400x800?access_token=pk.eyJ1IjoiY3JlYXRvcmZpbmQiLCJhIjoiY2p4bHN6ZzI4MGh0ZDN5cGJ2Z3Z6Z3Z6dyJ9.z4zZzZzZzZzZzZzZzZzZzw')] bg-cover bg-center">
<div class="absolute top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
<div class="bg-slate-900 text-[#39ff14] text-[10px] font-bold px-2 py-0.5 rounded border border-[#39ff14] mb-1">Main Stage</div>
<span class="material-symbols-outlined text-[#39ff14] text-3xl drop-shadow-[0_0_8px_rgba(57,255,20,0.8)]">location_on</span>
</div>
<div class="absolute bottom-1/2 right-4 transform translate-y-12 flex flex-col items-center">
<div class="bg-slate-900 text-white text-[10px] px-2 py-0.5 rounded mb-1 opacity-70">Artist Village</div>
<span class="material-symbols-outlined text-white text-2xl opacity-70">location_on</span>
</div>
<div class="absolute bottom-0 w-full bg-slate-900/95 backdrop-blur-md p-4 rounded-t-2xl border-t border-[#39ff14]/30">
<div class="flex items-center justify-between mb-3 text-white">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-[#39ff14]">electric_car</span>
<span class="text-xs font-mono">NEON FLEET</span>
</div>
<span class="text-xs text-slate-400">2 min away</span>
</div>
<button class="w-full py-3 bg-[#39ff14] hover:bg-[#32d912] text-black font-bold text-sm rounded-lg shadow-[0_0_15px_rgba(57,255,20,0.4)] transition-all uppercase tracking-wide">
Request VIP Ride
</button>
</div>
</div>
</div>
</div>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 bg-white dark:bg-slate-700 rounded-full p-2 shadow-xl border border-slate-200 dark:border-slate-600 hidden md:block">
<span class="material-symbols-outlined text-primary">arrow_forward</span>
</div>
</div>
</div>
<div class="mt-20 pt-10 border-t border-slate-200 dark:border-slate-800">
<p class="text-xs font-semibold uppercase tracking-widest text-slate-400 mb-6 text-center">Powering logistics for</p>
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-50 grayscale hover:grayscale-0 transition-all duration-500">
<span class="text-xl font-bold dark:text-white">COACHELLA</span>
<span class="text-xl font-bold dark:text-white">TED</span>
<span class="text-xl font-bold dark:text-white">SALESFORCE</span>
<span class="text-xl font-bold dark:text-white">SXSW</span>
<span class="text-xl font-bold dark:text-white">WEF</span>
</div>
</div>
</div>
</header>
<section class="py-24 bg-white dark:bg-slate-900" id="comparison">
<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 md:text-4xl font-bold mb-4">Why Public Apps Fail at Private Events</h2>
<p class="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
Comparing the chaos of public ride-share with the precision of EventLoop.
</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="relative overflow-hidden p-8 bg-red-50 dark:bg-red-900/10 rounded-3xl border border-red-100 dark:border-red-900/30">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-xl flex items-center justify-center text-red-600 dark:text-red-400">
<span class="material-symbols-outlined text-3xl">error</span>
</div>
<h3 class="text-2xl font-bold text-slate-900 dark:text-white">Public Ride-Share Failures</h3>
</div>
<div class="space-y-6">
<div class="flex gap-4">
<span class="material-symbols-outlined text-red-500 shrink-0">trending_up</span>
<div>
<h4 class="font-bold text-slate-900 dark:text-white text-sm">Surge Pricing Shocks</h4>
<p class="text-slate-600 dark:text-slate-400 text-sm mt-1">Guests pay 3-5x normal rates during egress, creating negative sentiment.</p>
</div>
</div>
<div class="flex gap-4">
<span class="material-symbols-outlined text-red-500 shrink-0">wrong_location</span>
<div>
<h4 class="font-bold text-slate-900 dark:text-white text-sm">Lost Drivers</h4>
<p class="text-slate-600 dark:text-slate-400 text-sm mt-1">Public drivers don't know your specific gate names or restricted zones.</p>
</div>
</div>
<div class="flex gap-4">
<span class="material-symbols-outlined text-red-500 shrink-0">no_accounts</span>
<div>
<h4 class="font-bold text-slate-900 dark:text-white text-sm">Zero Branding</h4>
<p class="text-slate-600 dark:text-slate-400 text-sm mt-1">The experience feels disjointed from your high-end event production.</p>
</div>
</div>
</div>
</div>
<div class="relative overflow-hidden p-8 bg-sky-50 dark:bg-sky-900/10 rounded-3xl border-2 border-primary/20 shadow-xl">
<div class="absolute top-0 right-0 px-4 py-1 bg-primary text-white text-xs font-bold rounded-bl-xl">RECOMMENDED</div>
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-primary text-white rounded-xl flex items-center justify-center shadow-lg shadow-primary/30">
<span class="material-symbols-outlined text-3xl">check_circle</span>
</div>
<h3 class="text-2xl font-bold text-slate-900 dark:text-white">The EventLoop Way</h3>
</div>
<div class="space-y-6">
<div class="flex gap-4">
<div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-green-600 dark:text-green-400 text-sm">payments</span>
</div>
<div>
<h4 class="font-bold text-slate-900 dark:text-white text-sm">Predictable Costs</h4>
<p class="text-slate-600 dark:text-slate-400 text-sm mt-1">Flat fees or subsidized rides. No surprises for your VIPs.</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-green-600 dark:text-green-400 text-sm">pin_drop</span>
</div>
<div>
<h4 class="font-bold text-slate-900 dark:text-white text-sm">Geofenced Precision</h4>
<p class="text-slate-600 dark:text-slate-400 text-sm mt-1">Custom map pins like "Main Stage VIP" guide drivers exactly where to go.</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-green-600 dark:text-green-400 text-sm">branding_watermark</span>
</div>
<div>
<h4 class="font-bold text-slate-900 dark:text-white text-sm">Full White-Label</h4>
<p class="text-slate-600 dark:text-slate-400 text-sm mt-1">Your logo, your colors, your app. A seamless extension of your brand.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-24 bg-slate-50 dark:bg-surface-dark/50" id="features">
<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 md:text-4xl font-bold mb-4">Enterprise-Grade Capabilities</h2>
<p class="text-slate-600 dark:text-slate-400">Everything you need to run a complex transportation network.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="group p-8 bg-white dark:bg-slate-800 rounded-3xl border border-slate-200 dark:border-slate-700 hover:shadow-2xl hover:-translate-y-1 transition-all duration-300">
<div class="w-14 h-14 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">chat_spark</span>
</div>
<h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Prompt-Driven Deployment</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-4">
"Add 5 shuttles to the North Lot." Speak your infrastructure into existence. Our AI translates intent into operational logic instantly.
</p>
<div class="h-1 w-12 bg-primary rounded-full"></div>
</div>
<div class="group p-8 bg-white dark:bg-slate-800 rounded-3xl border border-slate-200 dark:border-slate-700 hover:shadow-2xl hover:-translate-y-1 transition-all duration-300">
<div class="flex items-center justify-between mb-6">
<div class="w-14 h-14 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center text-purple-600 dark:text-purple-400 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">neurology</span>
</div>
<div class="flex items-center gap-1 bg-slate-100 dark:bg-slate-900 rounded-full px-2 py-1 border border-slate-200 dark:border-slate-700">
<span class="material-symbols-outlined text-sky-500 text-sm">rainy</span>
<span class="material-symbols-outlined text-slate-400 text-xs">arrow_forward</span>
<span class="material-symbols-outlined text-red-500 text-sm">priority_high</span>
</div>
</div>
<h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Dynamic Logic</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-4">
Set conditional rules. If it rains, the AI automatically reweights dispatch priority to covered pickup zones and prioritizes VIPs.
</p>
<div class="h-1 w-12 bg-purple-500 rounded-full"></div>
</div>
<div class="group p-8 bg-white dark:bg-slate-800 rounded-3xl border border-slate-200 dark:border-slate-700 hover:shadow-2xl hover:-translate-y-1 transition-all duration-300">
<div class="w-14 h-14 bg-green-100 dark:bg-green-900/30 rounded-2xl flex items-center justify-center text-green-600 dark:text-green-400 mb-6 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">qr_code_scanner</span>
</div>
<h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Frictionless QR Access</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-4">
Zero app store friction. Guests scan a QR code on their wristband or ticket and enter the ride network in less than 3 seconds.
</p>
<div class="h-1 w-12 bg-green-500 rounded-full"></div>
</div>
</div>
</div>
</section>
<section class="py-20 bg-slate-900 text-white relative overflow-hidden" id="architecture">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="flex flex-col md:flex-row items-center justify-between gap-12">
<div class="md:w-1/2">
<div class="inline-flex items-center px-3 py-1 rounded-full bg-teal-500/20 text-teal-300 text-xs font-semibold mb-6 border border-teal-500/30">
<span class="material-symbols-outlined text-sm mr-1">architecture</span>
Cost-Efficiency
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-6">Low-Cost Architecture</h2>
<p class="text-slate-300 mb-6 text-lg">
We bypass expensive mapping APIs (like Google Maps) that charge per tile.
</p>
<ul class="space-y-4">
<li class="flex items-start">
<span class="material-symbols-outlined text-teal-400 mr-3 mt-0.5">map</span>
<span class="text-slate-400"><strong>OpenStreetMap Integration:</strong> Full routing capabilities without the massive licensing fees.</span>
</li>
<li class="flex items-start">
<span class="material-symbols-outlined text-teal-400 mr-3 mt-0.5">price_check</span>
<span class="text-slate-400"><strong>No Surge Pricing:</strong> Our fixed-cost infrastructure means you never pay surge premiums, even at peak egress.</span>
</li>
</ul>
</div>
<div class="md:w-1/2 relative">
<div class="absolute inset-0 bg-teal-500/20 blur-3xl rounded-full"></div>
<div class="relative bg-slate-800/80 backdrop-blur-sm p-6 rounded-2xl border border-slate-700">
<div class="flex justify-between items-center mb-4 pb-4 border-b border-slate-700">
<span class="font-mono text-sm text-slate-400">API Cost Comparison</span>
<span class="text-xs text-teal-400 font-bold">-85% COST REDUCTION</span>
</div>
<div class="space-y-4">
<div>
<div class="flex justify-between text-xs mb-1">
<span>Standard Maps API</span>
<span>$$$$$</span>
</div>
<div class="h-2 bg-slate-700 rounded-full w-full">
<div class="h-full bg-slate-500 rounded-full w-full"></div>
</div>
</div>
<div>
<div class="flex justify-between text-xs mb-1">
<span class="text-white font-bold">EventLoop OSM</span>
<span class="text-teal-400 font-bold">$</span>
</div>
<div class="h-2 bg-slate-700 rounded-full w-full">
<div class="h-full bg-teal-500 rounded-full w-[15%]"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-20 bg-background-light dark:bg-background-dark relative overflow-hidden" id="markets">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4 text-slate-900 dark:text-white">Built for Complex Campuses</h2>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white dark:bg-surface-dark border border-slate-200 dark:border-slate-800 p-6 rounded-2xl flex items-center space-x-4 shadow-sm hover:shadow-md transition-shadow">
<div class="bg-blue-100 dark:bg-blue-900/50 rounded-full p-3 text-primary">
<span class="material-symbols-outlined">festival</span>
</div>
<div>
<h4 class="font-bold text-lg text-slate-900 dark:text-white">Music Festivals</h4>
<p class="text-slate-500 text-sm">Artist & VIP transport.</p>
</div>
</div>
<div class="bg-white dark:bg-surface-dark border border-slate-200 dark:border-slate-800 p-6 rounded-2xl flex items-center space-x-4 shadow-sm hover:shadow-md transition-shadow">
<div class="bg-indigo-100 dark:bg-indigo-900/50 rounded-full p-3 text-indigo-500">
<span class="material-symbols-outlined">school</span>
</div>
<div>
<h4 class="font-bold text-lg text-slate-900 dark:text-white">Universities</h4>
<p class="text-slate-500 text-sm">Safe late-night rides.</p>
</div>
</div>
<div class="bg-white dark:bg-surface-dark border border-slate-200 dark:border-slate-800 p-6 rounded-2xl flex items-center space-x-4 shadow-sm hover:shadow-md transition-shadow">
<div class="bg-teal-100 dark:bg-teal-900/50 rounded-full p-3 text-teal-500">
<span class="material-symbols-outlined">domain</span>
</div>
<div>
<h4 class="font-bold text-lg text-slate-900 dark:text-white">Corporate Campuses</h4>
<p class="text-slate-500 text-sm">Inter-building shuttles.</p>
</div>
</div>
</div>
</div>
</section>
<section class="py-24 bg-white dark:bg-slate-900 border-t border-slate-100 dark:border-slate-800">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-4xl md:text-5xl font-bold mb-8 text-slate-900 dark:text-white">Ready to modernize your event transport?</h2>
<a class="px-8 py-4 bg-primary text-white rounded-full font-bold text-lg hover:bg-sky-600 transition-all shadow-xl shadow-primary/30 inline-flex items-center justify-center" href="#">
Deploy Your Network
<span class="material-symbols-outlined ml-2">rocket_launch</span>
</a>
<p class="mt-6 text-slate-500">
Or contact sales at <a class="text-primary hover:underline" href="mailto:sales@eventloop.ai">sales@eventloop.ai</a>
</p>
</div>
</section>
<footer class="bg-slate-50 dark:bg-slate-950 border-t border-slate-200 dark:border-slate-800 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<span class="text-primary text-2xl material-symbols-outlined">all_inclusive</span>
<span class="text-xl font-bold tracking-tight text-slate-900 dark:text-white">EventLoop</span>
</div>
<p class="text-slate-500 text-sm">© 2024 EventLoop Inc. All rights reserved.</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-8 text-sm">
<div>
<h5 class="font-bold mb-4 text-slate-900 dark:text-white">Product</h5>
<ul class="space-y-2 text-slate-500">
<li><a class="hover:text-primary" href="#">Features</a></li>
<li><a class="hover:text-primary" href="#">Integrations</a></li>
<li><a class="hover:text-primary" href="#">Enterprise</a></li>
</ul>
</div>
<div>
<h5 class="font-bold mb-4 text-slate-900 dark:text-white">Resources</h5>
<ul class="space-y-2 text-slate-500">
<li><a class="hover:text-primary" href="#">Documentation</a></li>
<li><a class="hover:text-primary" href="#">API Reference</a></li>
<li><a class="hover:text-primary" href="#">Case Studies</a></li>
</ul>
</div>
<div>
<h5 class="font-bold mb-4 text-slate-900 dark:text-white">Company</h5>
<ul class="space-y-2 text-slate-500">
<li><a class="hover:text-primary" href="#">About Us</a></li>
<li><a class="hover:text-primary" href="#">Privacy</a></li>
<li><a class="hover:text-primary" href="#">Terms</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</body></html>