-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
463 lines (415 loc) · 27.6 KB
/
Copy pathindex.html
File metadata and controls
463 lines (415 loc) · 27.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bondfyr — Discover and Host Real‑World Social Events</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="images/bondfyr-logo-transparent.png">
<meta name="description" content="Host or find house parties, DnD campaigns, watch parties, DJ sessions, and more. Request‑to‑join, host‑approved access, Dodo‑powered listing fees, and direct guest‑to‑host payments.">
<meta name="keywords" content="parties, afterparty, events, DnD, watch party, DJ session, meetups, social, host events, nightlife">
<meta name="apple-itunes-app" content="app-id=6748154650">
</head>
<body>
<!-- Header Section -->
<header>
<div class="container navbar">
<div class="logo">
<img src="images/bondfyr-logo-transparent.png" alt="Bondfyr Logo">
<h1>Bondfyr</h1>
</div>
<nav class="nav-links">
<a href="#features">Features</a>
<a href="#how-it-works">How It Works</a>
<a href="#safety">Safety</a>
<a href="#faq">FAQ</a>
<a href="#contact">Contact</a>
</nav>
<div class="mobile-menu-icon">
<i class="fas fa-bars"></i>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="hero-content">
<div class="hero-text">
<h1 class="hero-headline">Connect. Host. Bond.</h1>
<h2 class="hero-subheadline">Discover and host real‑world social events—house parties, DnD campaigns, watch parties, DJ sessions, meetups, and more.</h2>
<p class="hero-description">Private, request‑to‑join events. Hosts approve guests. Guests pay hosts directly.</p>
<div class="hero-buttons">
<a href="https://apps.apple.com/in/app/bondfyr/id6748154650" class="btn-primary" target="_blank" rel="noopener noreferrer"><i class="fab fa-apple" style="margin-right:8px;"></i>Download on iOS</a>
</div>
<p class="launch-note">Now available on the App Store • <a href="https://apps.apple.com/in/app/bondfyr/id6748154650" target="_blank" rel="noopener noreferrer" style="color:#FF6B35; text-decoration:underline;">Install Bondfyr</a></p>
</div>
<div class="hero-image">
<div class="hero-animation">
<svg width="100%" height="100%" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<!-- Background gradient -->
<defs>
<radialGradient id="about-gradient" cx="50%" cy="100%" r="100%" fx="50%" fy="100%">
<stop offset="0%" stop-color="#FF1A47" stop-opacity="0.3" />
<stop offset="70%" stop-color="#121212" stop-opacity="0.8" />
</radialGradient>
<filter id="about-glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="10" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<linearGradient id="speaker-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#333" />
<stop offset="100%" stop-color="#111" />
</linearGradient>
</defs>
<!-- Dark gradient background -->
<rect x="0" y="0" width="600" height="400" fill="url(#about-gradient)" />
<!-- Massive left speaker -->
<g class="left-speaker" transform="translate(80, 200)">
<rect x="-50" y="-100" width="100" height="200" rx="5" fill="url(#speaker-gradient)" stroke="#444" stroke-width="2" />
<!-- Speaker cones -->
<circle cx="0" cy="-60" r="30" fill="#222" stroke="#333" stroke-width="2" class="speaker-cone" />
<circle cx="0" cy="20" r="40" fill="#222" stroke="#333" stroke-width="2" class="speaker-cone" />
<!-- Speaker dust cap -->
<circle cx="0" cy="-60" r="10" fill="#111" />
<circle cx="0" cy="20" r="15" fill="#111" />
<!-- Speaker bass port -->
<rect x="-20" y="70" width="40" height="15" rx="7" fill="#111" />
</g>
<!-- Massive right speaker -->
<g class="right-speaker" transform="translate(520, 200)">
<rect x="-50" y="-100" width="100" height="200" rx="5" fill="url(#speaker-gradient)" stroke="#444" stroke-width="2" />
<!-- Speaker cones -->
<circle cx="0" cy="-60" r="30" fill="#222" stroke="#333" stroke-width="2" class="speaker-cone" />
<circle cx="0" cy="20" r="40" fill="#222" stroke="#333" stroke-width="2" class="speaker-cone" />
<!-- Speaker dust cap -->
<circle cx="0" cy="-60" r="10" fill="#111" />
<circle cx="0" cy="20" r="15" fill="#111" />
<!-- Speaker bass port -->
<rect x="-20" y="70" width="40" height="15" rx="7" fill="#111" />
</g>
<!-- DJ Booth -->
<g class="dj-booth" transform="translate(300, 240)">
<!-- Main console -->
<rect x="-120" y="-40" width="240" height="70" rx="5" fill="#222" stroke="#444" stroke-width="2" />
<!-- CDJ decks -->
<rect x="-90" y="-35" width="70" height="40" rx="3" fill="#111" stroke="#333" stroke-width="1" />
<rect x="20" y="-35" width="70" height="40" rx="3" fill="#111" stroke="#333" stroke-width="1" />
<!-- Mixer in the middle -->
<rect x="-25" y="-30" width="50" height="60" rx="3" fill="#181818" stroke="#333" stroke-width="1" />
<!-- Turntable platters -->
<circle cx="-55" cy="-15" r="25" fill="#333" stroke="#555" stroke-width="1" class="turntable" />
<circle cx="55" cy="-15" r="25" fill="#333" stroke="#555" stroke-width="1" class="turntable" />
<!-- Control knobs and buttons -->
<circle cx="-55" cy="-15" r="10" fill="#111" />
<circle cx="55" cy="-15" r="10" fill="#111" />
<!-- Mixer controls -->
<rect x="-15" y="-20" width="5" height="20" fill="#ddd" rx="2" class="fader" />
<rect x="-5" y="-25" width="5" height="20" fill="#ddd" rx="2" class="fader" />
<rect x="5" y="-18" width="5" height="20" fill="#ddd" rx="2" class="fader" />
<rect x="15" y="-22" width="5" height="20" fill="#ddd" rx="2" class="fader" />
<!-- Control lights -->
<circle cx="-80" cy="-25" r="4" fill="#FF1A47" class="dj-light" />
<circle cx="-70" cy="-25" r="4" fill="#3F51B5" class="dj-light" />
<circle cx="-60" cy="-25" r="4" fill="#4CAF50" class="dj-light" />
<circle cx="60" cy="-25" r="4" fill="#FF9800" class="dj-light" />
<circle cx="70" cy="-25" r="4" fill="#9C27B0" class="dj-light" />
<circle cx="80" cy="-25" r="4" fill="#F44336" class="dj-light" />
</g>
<!-- DJ Figure -->
<g class="dj-figure" transform="translate(300, 150)">
<!-- Head with headphones -->
<circle cx="0" cy="0" r="20" fill="#444" />
<path d="M-25 -5 Q-30 -20, -20 -20 L-5 -20 Q0 -25, 5 -20 L20 -20 Q30 -20, 25 -5" fill="#FF1A47" class="headphones" />
<!-- Upper body -->
<rect x="-15" y="20" width="30" height="40" rx="5" fill="#333" />
<!-- Arms -->
<g class="dj-arms">
<path d="M-15,30 C-40,20 -50,40 -45,60" stroke="#333" stroke-width="8" fill="transparent" class="dj-arm" />
<path d="M15,30 C40,20 50,40 45,60" stroke="#333" stroke-width="8" fill="transparent" class="dj-arm" />
</g>
<!-- Hands on equipment -->
<circle cx="-45" cy="60" r="6" fill="#444" class="dj-hand" />
<circle cx="45" cy="60" r="6" fill="#444" class="dj-hand" />
</g>
<!-- Sound waves emanating from speakers -->
<g class="sound-waves">
<path d="M80,140 Q100,160 80,180 Q60,200 80,220 Q100,240 80,260" stroke="#FF1A47" stroke-width="2" fill="none" opacity="0.5" class="left-wave" />
<path d="M80,150 Q110,180 80,210 Q50,240 80,270" stroke="#FF1A47" stroke-width="2" fill="none" opacity="0.3" class="left-wave" />
<path d="M520,140 Q500,160 520,180 Q540,200 520,220 Q500,240 520,260" stroke="#FF1A47" stroke-width="2" fill="none" opacity="0.5" class="right-wave" />
<path d="M520,150 Q490,180 520,210 Q550,240 520,270" stroke="#FF1A47" stroke-width="2" fill="none" opacity="0.3" class="right-wave" />
</g>
<!-- Music notes -->
<g class="music-notes">
<path d="M150,100 Q170,80 180,100" stroke="#fff" fill="transparent" stroke-width="2" class="note" />
<circle cx="180" cy="100" r="5" fill="#fff" class="note" />
<path d="M450,100 Q430,80 420,100" stroke="#fff" fill="transparent" stroke-width="2" class="note" />
<circle cx="420" cy="100" r="5" fill="#fff" class="note" />
</g>
</svg>
</div>
</div>
</div>
</section>
<!-- Core Use Cases -->
<section class="features" id="features">
<div class="container">
<h2 class="section-title">Core Use Cases</h2>
<p class="section-subtitle">Examples — Bondfyr is social infrastructure for IRL meetups. Endless possibilities.</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-home"></i></div>
<h4>House Parties</h4>
<p>Curate the vibe, approve requests, and host safely.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-dice-d20"></i></div>
<h4>DnD Campaigns</h4>
<p>Dungeon Masters can monetize time and world‑building.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-tv"></i></div>
<h4>Watch Parties</h4>
<p>Stream sports or Love Island at home—skip expensive bars.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-music"></i></div>
<h4>DJ Sessions</h4>
<p>Test new tracks, build community, earn for your sets.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-university"></i></div>
<h4>Campus/Community Meetups</h4>
<p>Study groups, club nights, and socials.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-bolt"></i></div>
<h4>Pop‑up Experiences</h4>
<p>Tastings, open mics, creative jams—make it yours.</p>
</div>
</div>
</div>
</section>
<!-- Host Monetization -->
<section class="business-info" id="monetization">
<div class="container">
<h2 class="section-title">Monetize your time and space</h2>
<div class="business-details">
<div class="business-card"><h3>Set your price and guest limit</h3></div>
<div class="business-card"><h3>Approve/deny guest requests with intro messages</h3></div>
<div class="business-card"><h3>Guests pay you directly (Cash App, Venmo, PayPal, etc.)</h3><p>Bondfyr doesn’t take a cut on guest→host payments</p></div>
<div class="business-card"><h3>Pay a small listing fee to publish events</h3><p>Processed securely via Dodo Payments</p></div>
<div class="business-card"><h3>Real‑time guest list and updates</h3><p>Run a smooth event end‑to‑end</p></div>
</div>
</div>
</section>
<!-- Payment & Security (small) -->
<section class="payment-security" id="payment-security">
<div class="container">
<h2 class="section-title">Secure listing fees with Dodo Payments</h2>
<ul class="security-list">
<li><i class="fas fa-check-circle"></i> PCI‑DSS compliant processing</li>
<li><i class="fas fa-check-circle"></i> Encrypted transactions and fraud controls</li>
<li><i class="fas fa-check-circle"></i> We process host listing fees to publish events; guest→host ticket payments happen off‑platform between users</li>
</ul>
</div>
</section>
<!-- How It Works -->
<section class="how-it-works" id="how-it-works">
<div class="container">
<h2 class="section-title">How Bondfyr works</h2>
<div class="steps-grid">
<div class="step-card"><div class="step-icon">1</div><h4>Create your event</h4><p>Title, vibe, price, capacity, location radius</p></div>
<div class="step-card"><div class="step-icon">2</div><h4>Requests roll in</h4><p>Guests apply with a short intro</p></div>
<div class="step-card"><div class="step-icon">3</div><h4>Approve the right crowd</h4><p>Keep your event safe and on vibe</p></div>
<div class="step-card"><div class="step-icon">4</div><h4>Payments</h4><p>Hosts pay a small listing fee via Dodo Payments. Approved guests then pay hosts directly off‑platform.</p></div>
<div class="step-card"><div class="step-icon">5</div><h4>Host & connect</h4><p>Chat, manage guests, and make memories</p></div>
</div>
</div>
</section>
<!-- Safety & Trust -->
<section class="trust-safety" id="safety">
<div class="container">
<h2 class="section-title">Safety, by design</h2>
<div class="safety-grid">
<div class="safety-card"><i class="fas fa-user-check"></i><h4>Request‑to‑join approval</h4><p>Hosts control who attends</p></div>
<div class="safety-card"><i class="fas fa-id-card"></i><h4>Profiles with community signals</h4><p>Context to pick the right guests</p></div>
<div class="safety-card"><i class="fas fa-bullhorn"></i><h4>Event‑level updates</h4><p>Coordinate plans without sharing personal info</p></div>
<div class="safety-card"><i class="fas fa-user-secret"></i><h4>Location privacy</h4><p>Radius‑based discovery</p></div>
<div class="safety-card"><i class="fas fa-shield-alt"></i><h4>Guidelines & reporting</h4><p>Community‑first safety</p></div>
</div>
</div>
</section>
<!-- Features (condensed) -->
<section class="app-features" id="tools">
<div class="container">
<h2 class="section-title">Tools that help you host</h2>
<div class="app-features-grid">
<div class="app-feature"><i class="fas fa-bolt"></i><h4>Fast event creation</h4><p>Publish in minutes</p></div>
<div class="app-feature"><i class="fas fa-users-cog"></i><h4>Smart guest management</h4><p>Approve with intros</p></div>
<div class="app-feature"><i class="fas fa-bullhorn"></i><h4>Event updates</h4><p>Keep everyone aligned</p></div>
</div>
</div>
</section>
<!-- Join Waitlist -->
<section class="contact" id="waitlist">
<div class="container">
<h2 class="section-title">Be first to new drops and features</h2>
<p class="download-description">Join the waitlist for priority access, city rollouts, and creator tools.</p>
<form id="waitlist-form" class="waitlist-form" aria-label="Join waitlist form">
<input type="text" name="company" class="hp" autocomplete="off" tabindex="-1" aria-hidden="true">
<div class="form-row">
<input type="text" id="wl-name" placeholder="Name (optional)" aria-label="Your name">
<input type="email" id="wl-email" placeholder="you@email.com" aria-label="Your email" required>
</div>
<button type="submit" id="wl-submit" class="btn-primary">Join Waitlist</button>
<p id="wl-success" class="success" style="display:none;">You’re on the list. We’ll email you when Bondfyr launches in your city.</p>
<p id="wl-error" class="error" style="display:none;">Please try again in a moment.</p>
</form>
</div>
</section>
<!-- FAQ -->
<section class="legal-pages" id="faq">
<div class="container">
<h2 class="section-title">FAQ</h2>
<div class="legal-section"><h4>Do you take a cut from ticket sales?</h4><p>No. Guests pay hosts directly; Bondfyr doesn’t handle those transactions.</p></div>
<div class="legal-section"><h4>What payments do you process?</h4><p>We securely process host listing fees via Dodo Payments to publish events.</p></div>
<div class="legal-section"><h4>Is it only for house parties?</h4><p>No—use Bondfyr for DnD nights, watch parties, DJ sessions, study groups, and more.</p></div>
<div class="legal-section"><h4>How do you keep events safe?</h4><p>Hosts approve requests with intros, plus guidelines, chat tools, and reporting.</p></div>
</div>
</section>
<!-- Legal Pages Section -->
<section class="legal-pages" id="legal">
<div class="container">
<h2 class="section-title">📜 Legal Information</h2>
<div class="legal-tabs">
<button class="legal-tab-button active" data-tab="privacy">Privacy Policy</button>
<button class="legal-tab-button" data-tab="terms">Terms of Service</button>
</div>
<div class="legal-tab-content active" id="privacy">
<h3>BONDFYR PRIVACY POLICY</h3>
<p><strong>Last Updated: April 6, 2025</strong></p>
<div class="legal-section">
<h4>Information We Collect</h4>
<p>We collect information that you provide directly to us when you create an account or use our features. This includes your name, email address, location data, and profile information. We also collect usage data to improve our services.</p>
</div>
<div class="legal-section">
<h4>How We Use Your Information</h4>
<p>We use your information solely to provide and improve our services, connect you with local events, ensure user safety, and communicate important updates. We do not sell, rent, or trade your personal information.</p>
</div>
<div class="legal-section">
<h4>Information Sharing</h4>
<p>We only share your information when necessary to provide our services (such as showing your profile to event hosts) or as required by law. We never sell your data to third parties for marketing purposes.</p>
</div>
<div class="legal-section">
<h4>Data Security</h4>
<p>We implement industry-standard security measures to protect your personal information. Your data is stored securely and access is limited to authorized personnel only.</p>
</div>
<div class="legal-section">
<h4>Payment Information</h4>
<p>Payment processing is handled by our secure third-party payment processor (Dodo Payments). We do not store your credit card information on our servers. All payment data is encrypted and processed according to PCI-DSS standards.</p>
</div>
</div>
<div class="legal-tab-content" id="terms">
<h3>BONDFYR TERMS OF SERVICE</h3>
<p><strong>Last Updated: April 6, 2025</strong></p>
<div class="legal-section">
<h4>Payment Terms</h4>
<ul>
<li><strong>Host Earnings:</strong> Hosts receive 80% of ticket sales for their events</li>
<li><strong>Platform Fee:</strong> Bondfyr retains 20% to cover payment processing, security, and platform maintenance</li>
<li><strong>Payment Processing:</strong> All payments are processed securely through our third-party payment processor</li>
<li><strong>Refunds:</strong> Refunds are issued for cancelled events according to our refund policy</li>
<li><strong>Payout Schedule:</strong> Host earnings are processed within 24-48 hours after event completion</li>
</ul>
</div>
<div class="legal-section">
<h4>Legal Responsibility</h4>
<p>Event hosts are legally responsible for their parties, including guest safety, property damage, noise complaints, and compliance with local laws and regulations.</p>
</div>
<div class="legal-section">
<h4>Code of Conduct</h4>
<p>Users must behave respectfully when using our platform and attending events. Harassment, discrimination, or illegal activities are strictly prohibited.</p>
</div>
<div class="legal-section">
<h4>Limitation of Liability</h4>
<p>Bondfyr's liability is limited to the maximum extent permitted by law. We are not responsible for incidents that occur at events hosted through our platform.</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact" id="contact">
<div class="container">
<h2 class="section-title">📞 Get in Touch</h2>
<div class="contact-grid">
<div class="contact-card">
<i class="fas fa-briefcase"></i>
<h4>Business Inquiries</h4>
<a href="mailto:karjunvarma2001@gmail.com">karjunvarma2001@gmail.com</a>
</div>
<div class="contact-card">
<i class="fas fa-headset"></i>
<h4>Support</h4>
<a href="mailto:karjunvarma2001@gmail.com">karjunvarma2001@gmail.com</a>
</div>
<div class="contact-card">
<i class="fas fa-newspaper"></i>
<h4>Press</h4>
<a href="mailto:karjunvarma2001@gmail.com">karjunvarma2001@gmail.com</a>
</div>
<div class="contact-card">
<i class="fas fa-handshake"></i>
<h4>Partnerships</h4>
<a href="mailto:karjunvarma2001@gmail.com">karjunvarma2001@gmail.com</a>
</div>
<div class="contact-card">
<i class="fas fa-shield-alt"></i>
<h4>Privacy</h4>
<a href="mailto:karjunvarma2001@gmail.com">karjunvarma2001@gmail.com</a>
</div>
<div class="contact-card">
<i class="fas fa-gavel"></i>
<h4>Legal</h4>
<a href="mailto:karjunvarma2001@gmail.com">karjunvarma2001@gmail.com</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<div class="footer-logo">
<img src="images/bondfyr-logo-transparent.png" alt="Bondfyr Logo">
<h3>Bondfyr</h3>
</div>
<p>Connect. Host. Bond. Real‑world social events.</p>
</div>
<div class="footer-section">
<h4>Links</h4>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#how-it-works">How It Works</a></li>
<li><a href="#safety">Safety</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#legal">Privacy Policy</a></li>
<li><a href="#legal">Terms of Service</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Contact</h4>
<p>Email: karjunvarma2001@gmail.com</p>
<p>Business verification platform</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Bondfyr Inc.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>