-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
625 lines (586 loc) · 48.1 KB
/
Copy pathindex.html
File metadata and controls
625 lines (586 loc) · 48.1 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
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
<!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>Partybook — Software for Play Centers & Salons</title>
<link rel="icon" type="image/svg+xml" href="logo.svg">
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
sans: ['Inter', 'system-ui', 'sans-serif'],
}
}
}
}
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.classList.add('dark');
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
.card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
::selection { background: #7c3aed; color: #fff; }
</style>
</head>
<body class="bg-neutral-50 dark:bg-[#0a0a0a] text-gray-900 dark:text-gray-300 antialiased transition-colors duration-200"
x-data="{ dark: document.documentElement.classList.contains('dark') }">
<!-- Nav -->
<nav class="fixed top-0 w-full bg-white/90 dark:bg-[#0a0a0a]/90 backdrop-blur-md border-b border-neutral-200 dark:border-neutral-800 z-50">
<div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
<a href="index.html" class="flex items-center gap-3">
<svg class="w-9 h-9" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-label="Partybook">
<defs>
<linearGradient id="pb-grad-nav" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#a855f7"/>
<stop offset="100%" stop-color="#ec4899"/>
</linearGradient>
</defs>
<rect width="36" height="36" rx="9" fill="url(#pb-grad-nav)"/>
<path d="M8 12 L17 13.5 L17 26 L8 24.5 Z M28 12 L19 13.5 L19 26 L28 24.5 Z" fill="#ffffff" fill-opacity="0.96"/>
<circle cx="29" cy="8" r="1.6" fill="#fde047"/>
<circle cx="7" cy="9" r="1.2" fill="#22d3ee"/>
<circle cx="30" cy="29" r="1.2" fill="#34d399"/>
</svg>
<div>
<span class="font-bold text-gray-900 dark:text-white text-lg">Partybook</span>
<span class="hidden sm:inline text-neutral-400 dark:text-neutral-600 text-sm ml-2">Play Centers & Salons</span>
</div>
</a>
<div class="hidden md:flex items-center gap-6 text-sm">
<a href="#features" class="text-neutral-500 hover:text-gray-900 dark:hover:text-white transition">Features</a>
<a href="#proof" class="text-neutral-500 hover:text-gray-900 dark:hover:text-white transition">Live Proof</a>
<a href="#problems" class="text-neutral-500 hover:text-gray-900 dark:hover:text-white transition">Why Switch</a>
<a href="#pricing" class="text-neutral-500 hover:text-gray-900 dark:hover:text-white transition">Pricing</a>
<a href="dashboard.html" class="bg-purple-600 text-white font-semibold px-4 py-2 rounded-lg hover:bg-purple-700 transition">See Dashboard</a>
<button @click="dark = !dark; document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', dark ? 'dark' : 'light')"
class="p-1.5 rounded-md border border-neutral-200 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition" title="Toggle theme">
<svg x-show="!dark" class="w-4 h-4 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
<svg x-show="dark" class="w-4 h-4 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
</button>
</div>
</div>
</nav>
<!-- Hero -->
<section class="pt-32 pb-20 px-6">
<div class="max-w-6xl mx-auto">
<div class="max-w-3xl">
<div class="inline-flex items-center gap-2 bg-purple-50 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400 text-xs font-semibold px-3 py-1.5 rounded-full mb-6 border border-purple-200 dark:border-purple-500/20">
<span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
Live at zanysplayworld.com + book.zanycuts.com
</div>
<h1 class="text-4xl md:text-6xl lg:text-7xl font-black text-gray-900 dark:text-white leading-[1.05] tracking-tight">
Software that runs<br>
<span class="text-purple-600 dark:text-purple-400">your whole business.</span>
</h1>
<p class="mt-8 text-lg md:text-xl text-neutral-500 dark:text-gray-400 max-w-2xl leading-relaxed">
Built for play centers and salons. Bookings, payments, waivers, memberships, gift cards, POS — one system instead of five. Already running at <a href="https://zanysplayworld.com" target="_blank" class="text-purple-600 dark:text-purple-400 hover:underline font-semibold">Zany's Play World</a> and <a href="https://book.zanycuts.com" target="_blank" class="text-purple-600 dark:text-purple-400 hover:underline font-semibold">Zany Cuts</a>.
</p>
<div class="mt-10 flex flex-col sm:flex-row gap-4">
<a href="dashboard.html" class="bg-purple-600 text-white font-bold px-8 py-3.5 rounded-xl hover:bg-purple-700 transition text-center shadow-lg shadow-purple-200 dark:shadow-none">
See the Dashboard
</a>
<a href="https://zanysplayworld.com" target="_blank" class="border border-neutral-200 dark:border-neutral-700 text-gray-700 dark:text-gray-300 font-semibold px-8 py-3.5 rounded-xl hover:border-neutral-400 dark:hover:border-neutral-500 transition text-center">
See It Live at Zany's
</a>
</div>
</div>
<!-- Quick stats -->
<div class="mt-20 grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-5 border border-neutral-200 dark:border-neutral-800">
<div class="text-2xl font-black text-gray-900 dark:text-white">20+</div>
<div class="text-sm text-neutral-500 mt-1">Integrated features</div>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-5 border border-neutral-200 dark:border-neutral-800">
<div class="text-2xl font-black text-gray-900 dark:text-white">3</div>
<div class="text-sm text-neutral-500 mt-1">Payment methods (card, terminal, cash)</div>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-5 border border-neutral-200 dark:border-neutral-800">
<div class="text-2xl font-black text-green-600 dark:text-green-500">Live</div>
<div class="text-sm text-neutral-500 mt-1">In production today</div>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-5 border border-neutral-200 dark:border-neutral-800">
<div class="text-2xl font-black text-gray-900 dark:text-white">0</div>
<div class="text-sm text-neutral-500 mt-1">Paper waivers needed</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-24 px-6 bg-white dark:bg-[#111] border-y border-neutral-200 dark:border-neutral-800">
<div class="max-w-6xl mx-auto">
<!-- Vertical tabs -->
<div class="flex gap-3 mb-12" x-data="{ tab: 'play' }">
<button @click="tab = 'play'" class="px-5 py-2.5 rounded-xl text-sm font-semibold transition" :class="tab === 'play' ? 'bg-purple-600 text-white shadow-lg shadow-purple-200 dark:shadow-none' : 'bg-white dark:bg-[#1a1a1a] text-neutral-500 border border-neutral-200 dark:border-neutral-800 hover:text-gray-900 dark:hover:text-white'">
Play Centers
</button>
<button @click="tab = 'salon'" class="px-5 py-2.5 rounded-xl text-sm font-semibold transition" :class="tab === 'salon' ? 'bg-purple-600 text-white shadow-lg shadow-purple-200 dark:shadow-none' : 'bg-white dark:bg-[#1a1a1a] text-neutral-500 border border-neutral-200 dark:border-neutral-800 hover:text-gray-900 dark:hover:text-white'">
Salons & Barbershops
</button>
</div>
<!-- Play center features -->
<div x-show="tab === 'play'">
<div class="max-w-2xl mb-16">
<div class="inline-flex items-center gap-2 bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400 text-xs font-semibold px-3 py-1.5 rounded-full mb-4 border border-green-200 dark:border-green-500/20">
<span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span> Live at zanysplayworld.com
</div>
<h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white">Everything your play center needs. Already built.</h2>
<p class="mt-4 text-neutral-500 dark:text-gray-500 text-lg">Every feature below is live in production at Zany's Play World in Newnan, GA. This isn't a roadmap. It's done.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">Online Booking</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm leading-relaxed">Parents book open play and parties online 24/7. Age-based pricing, package selection, real-time availability. No phone tag.</p>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="w-10 h-10 bg-pink-100 dark:bg-pink-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-pink-600 dark:text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0A1.75 1.75 0 013 15.546M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">Birthday Parties</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm leading-relaxed">Weekday and weekend party packages with deposits, add-on kids, private party upgrades, and automated pizza ordering for the party room.</p>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="w-10 h-10 bg-amber-100 dark:bg-amber-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">Digital Waivers</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm leading-relaxed">Parents sign on their phone. Signature capture, phone verification, stored for return visits. Look up any waiver by phone number. Kill the clipboard.</p>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="w-10 h-10 bg-green-100 dark:bg-green-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">Payments + POS</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm leading-relaxed">Stripe for online. Stripe Terminal for in-person card payments. Cash drawer tracking. Three ways to pay, one place to reconcile.</p>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">Memberships</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm leading-relaxed">Monthly unlimited play subscriptions. Stripe billing, member check-in at the front desk, add-child, self-serve cancellation. Recurring revenue on autopilot.</p>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="w-10 h-10 bg-rose-100 dark:bg-rose-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-rose-600 dark:text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"/></svg>
</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">Gift Cards</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm leading-relaxed">Digital gift cards bought online, delivered by email, redeemed at the register or on the terminal. Sell them from the admin panel too. Pure profit.</p>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="w-10 h-10 bg-cyan-100 dark:bg-cyan-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-cyan-600 dark:text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">Events + Camps</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm leading-relaxed">Summer camps, spring break, Easter egg hunts, glow parties. Each event gets its own registration page, payment, and capacity tracking.</p>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="w-10 h-10 bg-indigo-100 dark:bg-indigo-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">Admin Dashboard</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm leading-relaxed">Front desk view, bookings, schedule, customer database, gift card management, subscriptions, revenue reports, coupons, QR codes, waitlist.</p>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="w-10 h-10 bg-orange-100 dark:bg-orange-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">Email + SMS</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm leading-relaxed">Booking confirmations, party reminders, receipts. Automated via Resend and Twilio. Parents stay informed without you lifting a finger.</p>
</div>
</div>
</div><!-- end play tab -->
<!-- Salon features -->
<div x-show="tab === 'salon'">
<div class="max-w-2xl mb-16">
<div class="inline-flex items-center gap-2 bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 text-xs font-semibold px-3 py-1.5 rounded-full mb-4 border border-amber-200 dark:border-amber-500/20">
<span class="w-1.5 h-1.5 bg-amber-500 rounded-full animate-pulse"></span> Building now at book.zanycuts.com
</div>
<h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white">Salon software that doesn't cost $300/mo per stylist.</h2>
<p class="mt-4 text-neutral-500 dark:text-gray-500 text-lg">Mangomint charges $175/mo for one provider. We give you the whole platform for a flat rate. Same features, better deal.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">Online Booking</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm leading-relaxed">Clients book their stylist and service online. Real-time availability, automatic confirmations, no double-bookings.</p>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">Stylist Schedules</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm leading-relaxed">Each stylist has their own availability, services, and pricing. Clients pick who they want and when.</p>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="w-10 h-10 bg-green-100 dark:bg-green-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">Payments + POS</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm leading-relaxed">Stripe checkout, in-person terminal, tips, cash. Revenue tracking per stylist. No third-party payment app needed.</p>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="w-10 h-10 bg-rose-100 dark:bg-rose-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-rose-600 dark:text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">Memberships</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm leading-relaxed">Monthly membership plans for regulars. Automatic Stripe billing, member perks, retention built in.</p>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="w-10 h-10 bg-amber-100 dark:bg-amber-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"/></svg>
</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">Gift Cards</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm leading-relaxed">Digital gift cards for haircuts, color, any service. Bought online, emailed instantly, redeemed at checkout.</p>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="w-10 h-10 bg-indigo-100 dark:bg-indigo-500/10 rounded-xl flex items-center justify-center mb-4">
<svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">Client History + CRM</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm leading-relaxed">Full client profiles with visit history, preferences, notes, spending. Know every client before they sit in the chair.</p>
</div>
</div>
<!-- Mangomint comparison -->
<div class="mt-12 bg-neutral-50 dark:bg-[#0a0a0a] rounded-2xl p-8 border border-neutral-200 dark:border-neutral-800">
<h3 class="font-bold text-gray-900 dark:text-white text-xl mb-6">Why not Mangomint?</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<div class="text-sm font-semibold text-neutral-400 uppercase tracking-wider mb-3">Mangomint</div>
<div class="space-y-2 text-sm text-neutral-500">
<div>$175/mo for 1 provider</div>
<div>$350/mo for 2-3 providers</div>
<div>$500+/mo for a full salon</div>
<div>Generic platform, same as everyone else</div>
<div>Their features, their timeline, their rules</div>
</div>
</div>
<div>
<div class="text-sm font-semibold text-purple-600 dark:text-purple-400 uppercase tracking-wider mb-3">Partybook</div>
<div class="space-y-2 text-sm text-gray-700 dark:text-gray-300">
<div class="font-semibold">Flat rate. Unlimited providers.</div>
<div>Custom-built for your salon specifically</div>
<div>You own the relationship, we build what you need</div>
<div>Same payment processing, better price</div>
<div>Need a feature? We build it. Fast.</div>
</div>
</div>
</div>
</div>
</div><!-- end salon tab -->
</div>
</section>
<!-- Live proof -->
<section id="proof" class="py-24 px-6">
<div class="max-w-6xl mx-auto">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="inline-flex items-center gap-2 bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400 text-xs font-semibold px-3 py-1.5 rounded-full mb-6 border border-green-200 dark:border-green-500/20">
<span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
Live in production
</div>
<h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white mb-6">
Don't take our word for it.<br>Go look at it.
</h2>
<p class="text-neutral-500 dark:text-gray-500 text-lg leading-relaxed mb-8">
Zany's Play World in Newnan, GA runs their entire operation on this platform. Real parents booking parties, signing waivers, buying gift cards, and checking in with memberships. Every day.
</p>
<div class="space-y-3 mb-8">
<div class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<span class="text-gray-700 dark:text-gray-300">Open play booking with age-based pricing ($5 / $12 / $16)</span>
</div>
<div class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<span class="text-gray-700 dark:text-gray-300">Birthday parties ($200 weekday / $250 weekend)</span>
</div>
<div class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<span class="text-gray-700 dark:text-gray-300">$49/mo unlimited memberships with Stripe billing</span>
</div>
<div class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<span class="text-gray-700 dark:text-gray-300">Digital waivers with phone verification</span>
</div>
<div class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<span class="text-gray-700 dark:text-gray-300">Stripe Terminal POS + cash drawer at the front desk</span>
</div>
<div class="flex items-center gap-3 text-sm">
<svg class="w-5 h-5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<span class="text-gray-700 dark:text-gray-300">Summer camps, spring break, Easter events with registration</span>
</div>
</div>
<a href="https://zanysplayworld.com" target="_blank" class="inline-flex items-center gap-2 bg-gray-900 dark:bg-purple-600 text-white font-bold px-6 py-3 rounded-xl hover:bg-gray-800 dark:hover:bg-purple-500 transition">
Visit zanysplayworld.com
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
</a>
</div>
<!-- Terminal (always dark) -->
<div class="bg-gray-950 rounded-xl overflow-hidden shadow-xl">
<div class="flex items-center gap-2 px-4 py-3 border-b border-gray-800">
<div class="w-3 h-3 rounded-full bg-red-500/80"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
<div class="w-3 h-3 rounded-full bg-green-500/80"></div>
<span class="ml-3 text-xs text-gray-500 font-mono">zanysplayworld.com</span>
</div>
<div class="p-6 font-mono text-sm space-y-2">
<div><span class="text-green-400">STATUS</span> <span class="text-gray-600">......</span> <span class="text-green-400 font-bold">LIVE</span></div>
<div><span class="text-green-400">BUSINESS</span> <span class="text-gray-600">....</span> <span class="text-white">Zany's Play World</span></div>
<div><span class="text-green-400">LOCATION</span> <span class="text-gray-600">....</span> <span class="text-white">Newnan, GA</span></div>
<div><span class="text-green-400">TYPE</span> <span class="text-gray-600">........</span> <span class="text-white">Indoor Play Center</span></div>
<div><span class="text-green-400">FEATURES</span> <span class="text-gray-600">....</span> <span class="text-white">20+ modules</span></div>
<div><span class="text-green-400">PAYMENTS</span> <span class="text-gray-600">....</span> <span class="text-white">Stripe + Terminal + Cash</span></div>
<div><span class="text-green-400">STACK</span> <span class="text-gray-600">.......</span> <span class="text-white">Next.js / Prisma / Supabase</span></div>
<div><span class="text-green-400">COMMS</span> <span class="text-gray-600">.......</span> <span class="text-white">Resend + Twilio</span></div>
<div class="pt-2 text-green-400/50">$ <span class="blink">_</span></div>
</div>
</div>
</div>
</div>
</section>
<!-- Problems we solve -->
<section id="problems" class="py-24 px-6 bg-white dark:bg-[#111] border-y border-neutral-200 dark:border-neutral-800">
<div class="max-w-6xl mx-auto">
<div class="max-w-2xl mb-16">
<h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white">Sound familiar?</h2>
<p class="mt-4 text-neutral-500 dark:text-gray-500 text-lg">Every play center we've talked to has the same problems. We built one system that fixes all of them.</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="flex gap-4 p-6 bg-red-50 dark:bg-red-500/5 rounded-xl border border-red-100 dark:border-red-500/10">
<div class="text-red-400 dark:text-red-500 text-xl font-black shrink-0 mt-0.5">×</div>
<div>
<h3 class="font-bold text-gray-900 dark:text-white mb-1">Paper waivers in a binder</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm">Can't find them, can't search them, they pile up, and they're a liability nightmare.</p>
</div>
</div>
<div class="flex gap-4 p-6 bg-green-50 dark:bg-green-500/5 rounded-xl border border-green-100 dark:border-green-500/10">
<div class="text-green-500 text-xl font-black shrink-0 mt-0.5">✓</div>
<div>
<h3 class="font-bold text-gray-900 dark:text-white mb-1">Digital waivers, searchable by phone</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm">Parents sign on their phone. Stored forever. Look up any waiver in 2 seconds.</p>
</div>
</div>
<div class="flex gap-4 p-6 bg-red-50 dark:bg-red-500/5 rounded-xl border border-red-100 dark:border-red-500/10">
<div class="text-red-400 dark:text-red-500 text-xl font-black shrink-0 mt-0.5">×</div>
<div>
<h3 class="font-bold text-gray-900 dark:text-white mb-1">Party bookings over the phone</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm">Playing phone tag with parents, losing bookings, double-booking rooms, manual payment tracking.</p>
</div>
</div>
<div class="flex gap-4 p-6 bg-green-50 dark:bg-green-500/5 rounded-xl border border-green-100 dark:border-green-500/10">
<div class="text-green-500 text-xl font-black shrink-0 mt-0.5">✓</div>
<div>
<h3 class="font-bold text-gray-900 dark:text-white mb-1">Self-serve online booking with deposits</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm">Parents book and pay online. You get notified. Room is blocked. Deposit is collected. Done.</p>
</div>
</div>
<div class="flex gap-4 p-6 bg-red-50 dark:bg-red-500/5 rounded-xl border border-red-100 dark:border-red-500/10">
<div class="text-red-400 dark:text-red-500 text-xl font-black shrink-0 mt-0.5">×</div>
<div>
<h3 class="font-bold text-gray-900 dark:text-white mb-1">No recurring revenue</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm">Every dollar depends on walk-ins. Slow Tuesday? Empty. You're starting from zero every day.</p>
</div>
</div>
<div class="flex gap-4 p-6 bg-green-50 dark:bg-green-500/5 rounded-xl border border-green-100 dark:border-green-500/10">
<div class="text-green-500 text-xl font-black shrink-0 mt-0.5">✓</div>
<div>
<h3 class="font-bold text-gray-900 dark:text-white mb-1">Memberships that bill automatically</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm">$49/mo unlimited play. Money comes in whether it's busy or not. Members check in at the desk with one tap.</p>
</div>
</div>
<div class="flex gap-4 p-6 bg-red-50 dark:bg-red-500/5 rounded-xl border border-red-100 dark:border-red-500/10">
<div class="text-red-400 dark:text-red-500 text-xl font-black shrink-0 mt-0.5">×</div>
<div>
<h3 class="font-bold text-gray-900 dark:text-white mb-1">5 different tools that don't talk to each other</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm">Square for payments, Google Forms for waivers, Facebook for events, a notebook for parties, Excel for... everything else.</p>
</div>
</div>
<div class="flex gap-4 p-6 bg-green-50 dark:bg-green-500/5 rounded-xl border border-green-100 dark:border-green-500/10">
<div class="text-green-500 text-xl font-black shrink-0 mt-0.5">✓</div>
<div>
<h3 class="font-bold text-gray-900 dark:text-white mb-1">One system for everything</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm">Bookings, payments, waivers, memberships, gift cards, events, customers, reports. One login. One dashboard.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="py-24 px-6">
<div class="max-w-6xl mx-auto">
<div class="max-w-2xl mb-16">
<h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white">Simple pricing. No surprises.</h2>
<p class="mt-4 text-neutral-500 dark:text-gray-500 text-lg">One platform, everything included. You're probably paying more than this for the 5 tools you're duct-taping together right now.</p>
</div>
<div class="grid md:grid-cols-2 gap-6 max-w-4xl">
<div class="bg-white dark:bg-[#1a1a1a] rounded-2xl p-8 border border-neutral-200 dark:border-neutral-800 card-hover">
<div class="text-sm font-semibold text-neutral-500 uppercase tracking-wider mb-4">Standard</div>
<div class="text-4xl font-black text-gray-900 dark:text-white">$399<span class="text-lg font-normal text-neutral-400">/mo</span></div>
<p class="mt-3 text-sm text-neutral-500">Everything you need to run your play center.</p>
<div class="mt-8 space-y-3">
<div class="flex items-center gap-3 text-sm text-gray-700 dark:text-gray-300">
<svg class="w-4 h-4 text-purple-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Online booking (open play + parties)
</div>
<div class="flex items-center gap-3 text-sm text-gray-700 dark:text-gray-300">
<svg class="w-4 h-4 text-purple-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Stripe payments + POS terminal
</div>
<div class="flex items-center gap-3 text-sm text-gray-700 dark:text-gray-300">
<svg class="w-4 h-4 text-purple-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Digital waivers
</div>
<div class="flex items-center gap-3 text-sm text-gray-700 dark:text-gray-300">
<svg class="w-4 h-4 text-purple-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Memberships + subscriptions
</div>
<div class="flex items-center gap-3 text-sm text-gray-700 dark:text-gray-300">
<svg class="w-4 h-4 text-purple-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Gift cards
</div>
<div class="flex items-center gap-3 text-sm text-gray-700 dark:text-gray-300">
<svg class="w-4 h-4 text-purple-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Admin dashboard + reports
</div>
<div class="flex items-center gap-3 text-sm text-gray-700 dark:text-gray-300">
<svg class="w-4 h-4 text-purple-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Email + SMS notifications
</div>
<div class="flex items-center gap-3 text-sm text-gray-700 dark:text-gray-300">
<svg class="w-4 h-4 text-purple-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Coupons + QR codes
</div>
</div>
</div>
<div class="bg-purple-600 rounded-2xl p-8 text-white shadow-xl shadow-purple-200 dark:shadow-none relative card-hover">
<div class="absolute -top-3 left-6 bg-amber-400 text-gray-900 text-xs font-bold px-3 py-1 rounded-full">Recommended</div>
<div class="text-sm font-semibold text-purple-200 uppercase tracking-wider mb-4">Growth</div>
<div class="text-4xl font-black">$599<span class="text-lg font-normal text-purple-300">/mo</span></div>
<p class="mt-3 text-sm text-purple-200">Everything in Standard, plus seasonal events and custom features.</p>
<div class="mt-8 space-y-3">
<div class="flex items-center gap-3 text-sm">
<svg class="w-4 h-4 text-purple-200 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Everything in Standard
</div>
<div class="flex items-center gap-3 text-sm">
<svg class="w-4 h-4 text-purple-200 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Event + camp registration pages
</div>
<div class="flex items-center gap-3 text-sm">
<svg class="w-4 h-4 text-purple-200 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Waitlist management
</div>
<div class="flex items-center gap-3 text-sm">
<svg class="w-4 h-4 text-purple-200 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Custom branding
</div>
<div class="flex items-center gap-3 text-sm">
<svg class="w-4 h-4 text-purple-200 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Custom feature requests
</div>
<div class="flex items-center gap-3 text-sm">
<svg class="w-4 h-4 text-purple-200 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Priority support
</div>
<div class="flex items-center gap-3 text-sm">
<svg class="w-4 h-4 text-purple-200 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Facebook integration
</div>
</div>
</div>
</div>
</div>
</section>
<!-- How we work -->
<section class="py-24 px-6">
<div class="max-w-6xl mx-auto">
<div class="max-w-2xl mb-16">
<h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white">We build fast. Really fast.</h2>
<p class="mt-4 text-neutral-500 dark:text-gray-500 text-lg">We're a dev shop that specializes in play center and salon software. We use AI-assisted development to ship production features in days, not months. Need something custom? We can probably build it this week.</p>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800">
<div class="text-3xl font-black text-purple-600 dark:text-purple-400 mb-3">1.</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">You tell us what you need</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm">Walk us through your business. What's working, what's broken, what you wish you had. We've heard it all from play centers and salons.</p>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800">
<div class="text-3xl font-black text-purple-600 dark:text-purple-400 mb-3">2.</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">We configure + customize</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm">We start from our proven platform and tailor it to your business. Your branding, your pricing, your workflows. Custom features built on demand.</p>
</div>
<div class="bg-white dark:bg-[#1a1a1a] rounded-xl p-6 border border-neutral-200 dark:border-neutral-800">
<div class="text-3xl font-black text-purple-600 dark:text-purple-400 mb-3">3.</div>
<h3 class="font-bold text-gray-900 dark:text-white text-lg mb-2">You're live in weeks</h3>
<p class="text-neutral-500 dark:text-gray-500 text-sm">Not months. Not "Phase 1." A full working system your staff can use and your customers can book on. We keep improving it from there.</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 px-6 bg-white dark:bg-[#111] border-t border-neutral-200 dark:border-neutral-800">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white">
Your business deserves<br>better than a spreadsheet.
</h2>
<p class="mt-6 text-neutral-500 dark:text-gray-500 text-lg max-w-xl mx-auto">
We're based in Newnan, GA. We build software for play centers and salons. Zany's Play World and Zany Cuts both run on our platform. Yours can too.
</p>
<div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
<a href="dashboard.html" class="bg-purple-600 text-white font-bold px-8 py-3.5 rounded-xl hover:bg-purple-700 transition shadow-lg shadow-purple-200 dark:shadow-none">
Explore the Dashboard
</a>
<a href="https://zanysplayworld.com" target="_blank" class="border border-neutral-200 dark:border-neutral-700 text-gray-700 dark:text-gray-300 font-semibold px-8 py-3.5 rounded-xl hover:border-neutral-400 dark:hover:border-neutral-500 transition">
See It Live at Zany's
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-neutral-200 dark:border-neutral-800 py-8 px-6">
<div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
<div class="flex items-center gap-2">
<svg class="w-7 h-7" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-label="Partybook">
<defs>
<linearGradient id="pb-grad-footer" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#a855f7"/>
<stop offset="100%" stop-color="#ec4899"/>
</linearGradient>
</defs>
<rect width="36" height="36" rx="9" fill="url(#pb-grad-footer)"/>
<path d="M8 12 L17 13.5 L17 26 L8 24.5 Z M28 12 L19 13.5 L19 26 L28 24.5 Z" fill="#ffffff" fill-opacity="0.96"/>
<circle cx="29" cy="8" r="1.6" fill="#fde047"/>
<circle cx="7" cy="9" r="1.2" fill="#22d3ee"/>
<circle cx="30" cy="29" r="1.2" fill="#34d399"/>
</svg>
<span class="font-bold text-gray-900 dark:text-white">Partybook</span>
<span class="text-neutral-400 dark:text-neutral-600 text-sm ml-1">Newnan, GA</span>
</div>
<div class="flex gap-6 text-sm text-neutral-500">
<a href="#features" class="hover:text-gray-900 dark:hover:text-white transition">Features</a>
<a href="#proof" class="hover:text-gray-900 dark:hover:text-white transition">Live Proof</a>
<a href="#pricing" class="hover:text-gray-900 dark:hover:text-white transition">Pricing</a>
<a href="https://zanysplayworld.com" target="_blank" class="hover:text-gray-900 dark:hover:text-white transition">Zany's Play World</a>
<a href="dashboard.html" class="hover:text-gray-900 dark:hover:text-white transition">Dashboard</a>
</div>
<div class="text-sm text-neutral-400">© 2026 Partybook</div>
</div>
</footer>
</body>
</html>