PageSourceSearch

https://askdave.ai/

html askdave.ai collected 2026-10-05 11:50:16 UTC 75,131 bytes, 1,559 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en-AU">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Ask Dave AI — Your AI Mate Who Actually Gets You</title>
7    <meta name="description" content="Meet Dave. He's an AI assistant with personality. Pick your vibe — Eshay, Tradie, Surfer, Professional and more — and ask anything.">
8    <meta property="og:title" content="Ask Dave AI — Your AI Mate Who Actually Gets You">
9    <meta property="og:description" content="AI that speaks your language. Pick a Dave. Ask anything.">
10    <meta property="og:url" content="https://askdave.ai">
11    <meta property="og:type" content="website">
12    <meta property="og:image" content="https://askdave.ai/og-image.png">
13    <meta property="og:image:width" content="1200">
14    <meta property="og:image:height" content="630">
15    <meta name="twitter:card" content="summary_large_image">
16    <meta name="twitter:title" content="Ask Dave AI — Your AI Mate Who Actually Gets You">
17    <meta name="twitter:description" content="AI that speaks your language. Pick a Dave. Ask anything.">
18    <meta name="twitter:image" content="https://askdave.ai/og-image.png">
19    <meta name="twitter:image:alt" content="Ask Dave AI — AI with personality">
20    
20<script type="application/ld+json">
21    {
22      "@context": "https://schema.org",
23      "@type": "SoftwareApplication",
24      "name": "Ask Dave AI",
25      "url": "https://askdave.ai",
26      "description": "AI assistant with real personality. Pick your vibe — Eshay, Tradie, Surfer, Professional and more — and ask anything.",
27      "applicationCategory": "UtilitiesApplication",
28      "operatingSystem": "Web, Telegram, WhatsApp",
29      "offers": { "@type": "Offer", "price": "0", "priceCurrency": "AUD" },
30      "author": { "@type": "Organization", "name": "Ask Dave AI", "url": "https://askdave.ai" }
31    }
32    </script>
32
33    <link rel="preconnect" href="https://fonts.googleapis.com">
34    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
35    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
36    <style>
37        :root {
38            --bg-primary: #0a0a0a;
39            --bg-secondary: #111111;
40            --bg-card: #1a1a1a;
41            --bg-card-hover: #222222;
42            --text-primary: #ffffff;
43            --text-secondary: #a0a0a0;
44            --text-muted: #666666;
45            --accent: #6C63FF;
46            --accent-light: #8B83FF;
47            --accent-glow: rgba(108, 99, 255, 0.3);
48            --green: #22c55e;
49            --orange: #f59e0b;
50            --blue: #3b82f6;
51            --pink: #ec4899;
52            --border: #2a2a2a;
53            --radius: 16px;
54            --radius-sm: 10px;
55        }
56
57        * {
58            margin: 0;
59            padding: 0;
60            box-sizing: border-box;
61        }
62
63        body {
64            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
65            background: var(--bg-primary);
66            color: var(--text-primary);
67            line-height: 1.6;
68            overflow-x: hidden;
69        }
70
71        /* ===== NAVIGATION ===== */
72        nav {
73            position: fixed;
74            top: 0;
75            width: 100%;
76            z-index: 100;
77            padding: 16px 24px;
78            background: rgba(10, 10, 10, 0.8);
79            backdrop-filter: blur(20px);
80            border-bottom: 1px solid var(--border);
81        }
82
83        .nav-inner {
84            max-width: 1200px;
85            margin: 0 auto;
86            display: flex;
87            justify-content: space-between;
88            align-items: center;
89        }
90
91        .logo {
92            font-size: 1.5rem;
93            font-weight: 800;
94            color: var(--text-primary);
95            text-decoration: none;
96        }
97
98        .logo span {
99            color: var(--accent);
100        }
101
102        .nav-links {
103            display: flex;
104            gap: 32px;
105            align-items: center;
106            list-style: none;
107        }
108
109        .nav-links a {
110            color: var(--text-secondary);
111            text-decoration: none;
112            font-size: 0.95rem;
113            font-weight: 500;
114            transition: color 0.2s;
115        }
116
117        .nav-links a:hover {
118            color: var(--text-primary);
119        }
120
121        .btn {
122            display: inline-flex;
123            align-items: center;
124            gap: 8px;
125            padding: 12px 24px;
126            border-radius: var(--radius-sm);
127            font-weight: 600;
128            font-size: 1rem;
129            text-decoration: none;
130            transition: all 0.3s ease;
131            cursor: pointer;
132            border: none;
133        }
134
135        .btn-primary {
136            background: var(--accent);
137            color: white;
138            box-shadow: 0 0 20px var(--accent-glow);
139        }
140
141        .btn-primary:hover {
142            background: var(--accent-light);
143            box-shadow: 0 0 30px var(--accent-glow);
144            transform: translateY(-2px);
145        }
146
147        .btn-secondary {
148            background: transparent;
149            color: var(--text-primary);
150            border: 1px solid var(--border);
151        }
152
153        .btn-secondary:hover {
154            background: var(--bg-card);
155            border-color: var(--text-muted);
156        }
157
158        .btn-sm {
159            padding: 8px 18px;
160            font-size: 0.9rem;
161        }
162
163        /* ===== HERO ===== */
164        .hero {
165            min-height: 100vh;
166            display: flex;
167            flex-direction: column;
168            align-items: center;
169            justify-content: center;
170            text-align: center;
171            padding: 120px 24px 80px;
172            position: relative;
173        }
174
175        .hero::before {
176            content: '';
177            position: absolute;
178            top: -200px;
179            left: 50%;
180            transform: translateX(-50%);
181            width: 800px;
182            height: 800px;
183            background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
184            pointer-events: none;
185            z-index: 0;
186        }
187
188        .hero-content {
189            position: relative;
190            z-index: 1;
191            max-width: 800px;
192        }
193
194        .hero-badge {
195            display: inline-flex;
196            align-items: center;
197            gap: 8px;
198            background: var(--bg-card);
199            border: 1px solid var(--border);
200            border-radius: 100px;
201            padding: 8px 20px;
202            font-size: 0.85rem;
203            color: var(--text-secondary);
204            margin-bottom: 32px;
205        }
206
207        .hero-badge .dot {
208            width: 8px;
209            height: 8px;
210            background: var(--green);
211            border-radius: 50%;
212            animation: pulse 2s infinite;
213        }
214
215        @keyframes pulse {
216            0%, 100% { opacity: 1; }
217            50% { opacity: 0.4; }
218        }
219
220        h1 {
221            font-size: clamp(2.5rem, 6vw, 4.5rem);
222            font-weight: 900;
223            line-height: 1.1;
224            margin-bottom: 24px;
225            letter-spacing: -0.02em;
226        }
227
228        h1 .highlight {
229            background: linear-gradient(135deg, var(--accent), var(--pink));
230            -webkit-background-clip: text;
231            -webkit-text-fill-color: transparent;
232            background-clip: text;
233        }
234
235        .hero-subtitle {
236            font-size: clamp(1.1rem, 2.5vw, 1.35rem);
237            color: var(--text-secondary);
238            max-width: 600px;
239            margin: 0 auto 40px;
240            line-height: 1.7;
241        }
242
243        .hero-ctas {
244            display: flex;
245            gap: 16px;
246            justify-content: center;
247            flex-wrap: wrap;
248        }
249
250        /* ===== PERSONALITY CARDS ===== */
251        .section {
252            padding: 100px 24px;
253            max-width: 1200px;
254            margin: 0 auto;
255        }
256
257        .section-header {
258            text-align: center;
259            margin-bottom: 60px;
260        }
261
262        .section-label {
263            font-size: 0.85rem;
264            font-weight: 600;
265            color: var(--accent);
266            text-transform: uppercase;
267            letter-spacing: 0.1em;
268            margin-bottom: 12px;
269        }
270
271        h2 {
272            font-size: clamp(2rem, 4vw, 3rem);
273            font-weight: 800;
274            margin-bottom: 16px;
275            letter-spacing: -0.02em;
276        }
277
278        .section-subtitle {
279            font-size: 1.1rem;
280            color: var(--text-secondary);
281            max-width: 600px;
282            margin: 0 auto;
283        }
284
285        .personality-grid {
286            display: grid;
287            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
288            gap: 24px;
289        }
290
291        .personality-card {
292            background: var(--bg-card);
293            border: 1px solid var(--border);
294            border-radius: var(--radius);
295            padding: 32px;
296            transition: all 0.3s ease;
297            cursor: pointer;
298            position: relative;
299            overflow: hidden;
300        }
301
302        .personality-card:hover {
303            background: var(--bg-card-hover);
304            border-color: var(--accent);
305            transform: translateY(-4px);
306            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
307        }
308
309        .personality-card .emoji {
310            font-size: 3rem;
311            margin-bottom: 16px;
312            display: block;
313        }
314
315        .personality-card h3 {
316            font-size: 1.3rem;
317            font-weight: 700;
318            margin-bottom: 8px;
319        }
320
321        .personality-card .tagline {
322            color: var(--accent-light);
323            font-size: 0.9rem;
324            font-weight: 500;
325            margin-bottom: 12px;
326        }
327
328        .personality-card p {
329            color: var(--text-secondary);
330            font-size: 0.95rem;
331            line-height: 1.6;
332        }
333
334        .personality-card .sample-chat {
335            margin-top: 20px;
336            background: var(--bg-primary);
337            border-radius: var(--radius-sm);
338            padding: 16px;
339            font-size: 0.85rem;
340        }
341
342        .sample-chat .user-msg {
343            color: var(--text-muted);
344            margin-bottom: 8px;
345        }
346
347        .sample-chat .dave-msg {
348            color: var(--text-primary);
349        }
350
351        /* ===== HOW IT WORKS ===== */
352        .steps {
353            display: grid;
354            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
355            gap: 40px;
356        }
357
358        .step {
359            text-align: center;
360        }
361
362        .step-number {
363            display: inline-flex;
364            align-items: center;
365            justify-content: center;
366            width: 56px;
367            height: 56px;
368            border-radius: 50%;
369            background: var(--bg-card);
370            border: 2px solid var(--accent);
371            color: var(--accent);
372            font-size: 1.3rem;
373            font-weight: 800;
374            margin-bottom: 20px;
375        }
376
377        .step h3 {
378            font-size: 1.2rem;
379            font-weight: 700;
380            margin-bottom: 8px;
381        }
382
383        .step p {
384            color: var(--text-secondary);
385            font-size: 0.95rem;
386        }
387
388        /* ===== PRICING ===== */
389        .pricing-grid {
390            display: grid;
391            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
392            gap: 24px;
393        }
394
395        .pricing-card {
396            background: var(--bg-card);
397            border: 1px solid var(--border);
398            border-radius: var(--radius);
399            padding: 36px;
400            position: relative;
401            transition: all 0.3s ease;
402        }
403
404        .pricing-card.featured {
405            border-color: var(--accent);
406            box-shadow: 0 0 40px var(--accent-glow);
407        }
408
409        .pricing-card.featured::before {
410            content: 'MOST POPULAR';
411            position: absolute;
412            top: -12px;
413            left: 50%;
414            transform: translateX(-50%);
415            background: var(--accent);
416            color: white;
417            font-size: 0.7rem;
418            font-weight: 700;
419            letter-spacing: 0.1em;
420            padding: 4px 16px;
421            border-radius: 100px;
422        }
423
424        .pricing-card h3 {
425            font-size: 1.2rem;
426            font-weight: 700;
427            margin-bottom: 4px;
428        }
429
430        .pricing-card .price {
431            font-size: 2.5rem;
432            font-weight: 900;
433            margin: 16px 0;
434        }
435
436        .pricing-card .price span {
437            font-size: 1rem;
438            font-weight: 500;
439            color: var(--text-secondary);
440        }
441
442        .pricing-card .price-note {
443            color: var(--text-muted);
444            font-size: 0.85rem;
445            margin-bottom: 24px;
446        }
447
448        .pricing-card ul {
449            list-style: none;
450            margin-bottom: 32px;
451        }
452
453        .pricing-card li {
454            padding: 8px 0;
455            color: var(--text-secondary);
456            font-size: 0.95rem;
457            display: flex;
458            align-items: center;
459            gap: 10px;
460        }
461
462        .pricing-card li::before {
463            content: '✓';
464            color: var(--green);
465            font-weight: 700;
466        }
467
468        .pricing-card li.disabled {
469            color: var(--text-muted);
470        }
471
472        .pricing-card li.disabled::before {
473            content: '—';
474            color: var(--text-muted);
475        }
476
477        .pricing-card .btn {
478            width: 100%;
479            justify-content: center;
480        }
481
482        /* ===== COMMUNITY DAVES ===== */
483        .community-preview {
484            display: grid;
485            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
486            gap: 16px;
487            margin-top: 40px;
488        }
489
490        .mini-dave {
491            background: var(--bg-card);
492            border: 1px solid var(--border);
493            border-radius: var(--radius-sm);
494            padding: 20px;
495            text-align: center;
496            transition: all 0.2s ease;
497        }
498
499        .mini-dave:hover {
500            border-color: var(--accent);
501            transform: translateY(-2px);
502        }
503
504        .mini-dave .emoji {
505            font-size: 2rem;
506            display: block;
507            margin-bottom: 8px;
508        }
509
510        .mini-dave .name {
511            font-weight: 600;
512            font-size: 0.95rem;
513            margin-bottom: 4px;
514        }
515
516        .mini-dave .desc {
517            color: var(--text-muted);
518            font-size: 0.8rem;
519        }
520
521        /* ===== FAQ ===== */
522        .faq-list {
523            max-width: 700px;
524            margin: 0 auto;
525        }
526
527        .faq-item {
528            border-bottom: 1px solid var(--border);
529            padding: 24px 0;
530        }
531
532        .faq-question {
533            font-size: 1.1rem;
534            font-weight: 600;
535            cursor: pointer;
536            display: flex;
537            justify-content: space-between;
538            align-items: center;
539        }
540
541        .faq-question::after {
542            content: '+';
543            font-size: 1.5rem;
544            color: var(--text-muted);
545            transition: transform 0.3s;
546        }
547
548        .faq-item.open .faq-question::after {
549            transform: rotate(45deg);
550        }
551
552        .faq-answer {
553            color: var(--text-secondary);
554            font-size: 0.95rem;
555            line-height: 1.7;
556            max-height: 0;
557            overflow: hidden;
558            transition: max-height 0.3s ease, padding 0.3s ease;
559        }
560
561        .faq-item.open .faq-answer {
562            max-height: 300px;
563            padding-top: 16px;
564        }
565
566        /* ===== CTA ===== */
567        .cta-section {
568            text-align: center;
569            padding: 100px 24px;
570            position: relative;
571        }
572
573        .cta-section::before {
574            content: '';
575            position: absolute;
576            bottom: 0;
577            left: 50%;
578            transform: translateX(-50%);
579            width: 600px;
580            height: 600px;
581            background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
582            pointer-events: none;
583        }
584
585        .cta-section h2 {
586            position: relative;
587            z-index: 1;
588        }
589
590        .cta-section p {
591            position: relative;
592            z-index: 1;
593            color: var(--text-secondary);
594            font-size: 1.1rem;
595            margin-bottom: 32px;
596        }
597
598        .cta-section .hero-ctas {
599            position: relative;
600            z-index: 1;
601        }
602
603        /* ===== FOOTER ===== */
604        footer {
605            border-top: 1px solid var(--border);
606            padding: 40px 24px;
607            text-align: center;
608            color: var(--text-muted);
609            font-size: 0.85rem;
610        }
611
612        footer a {
613            color: var(--text-secondary);
614            text-decoration: none;
615        }
616
617        footer a:hover {
618            color: var(--text-primary);
619        }
620
621        /* ===== MOBILE ===== */
622        .mobile-menu-btn {
623            display: none;
624            background: none;
625            border: none;
626            color: var(--text-primary);
627            font-size: 1.5rem;
628            cursor: pointer;
629        }
630
631        @media (max-width: 768px) {
632            .nav-links {
633                display: none;
634            }
635
636            .mobile-menu-btn {
637                display: block;
638            }
639
640            .nav-links.open {
641                display: flex;
642                flex-direction: column;
643                position: absolute;
644                top: 100%;
645                left: 0;
646                right: 0;
647                background: var(--bg-primary);
648                border-bottom: 1px solid var(--border);
649                padding: 24px;
650                gap: 16px;
651            }
652
653            .hero {
654                padding: 100px 20px 60px;
655            }
656
657            .section {
658                padding: 60px 20px;
659            }
660
661            .pricing-grid {
662                grid-template-columns: 1fr;
663            }
664        }
665        /* Custom scrollbar */
666        ::-webkit-scrollbar{width:6px}
667        ::-webkit-scrollbar-track{background:transparent}
668        ::-webkit-scrollbar-thumb{background:#333;bo
668rder-radius:3px}
669        ::-webkit-scrollbar-thumb:hover{background:#555}
670        *{scrollbar-width:thin;scrollbar-color:#333 transparent}
671        </style>
672</head>
673<body>
674
675    <!-- Navigation -->
676    <nav>
677        <div class="nav-inner">
678            <a href="/" class="logo">ask<span>dave</span>.ai</a>
679            <button class="mobile-menu-btn" onclick="toggleMenu()">☰</button>
680            <ul class="nav-links" id="navLinks">
681                <li><a href="#personalities">Meet Dave</a></li>
682                <li><a href="#how-it-works">How It Works</a></li>
683                <li><a href="#pricing">Pricing</a></li>
684                <li><a href="#community">Community</a></li>
685                <li><a href="#faq">FAQ</a></li>
686                <li id="nav-auth-guest"><a href="/login.html" style="color:var(--text-secondary);text-decoration:none;font-size:0.95rem;font-weight:500">Log In</a></li>
687                <li id="nav-auth-guest2"><a href="/chat.html" class="btn btn-primary btn-sm">Try Dave Free</a></li>
688                <li id="nav-auth-user" style="display:none"><a href="/dashboard.html" style="color:var(--text-secondary);text-decoration:none;font-size:0.95rem;font-weight:500" id="nav-user-name">Dashboard</a></li>
689                <li id="nav-auth-user2" style="display:none"><a href="/chat.html" class="btn btn-primary btn-sm">Chat with Dave</a></li>
690            </ul>
691        </div>
692    </nav>
693
694    <!-- Hero -->
695    <section class="hero" id="home">
696        <div class="hero-content">
697            <div class="hero-badge">
698                <span class="dot"></span>
699                Dave is online
700            </div>
701            <h1>AI that actually<br><span class="highlight">speaks your language</span></h1>
702            <p class="hero-subtitle">
703                Meet Dave — an AI assistant with real personality. Pick your vibe, ask anything, 
704                get answers that don't sound like they were written by a robot.
705            </p>
706            <p style="font-size:.82rem;color:var(--text-muted);margin-top:-20px;margin-bottom:0;letter-spacing:.01em">
707                No account needed &nbsp;·&nbsp; 10 free messages a day &nbsp;·&nbsp; No credit card
708            </p>
709
710            <!-- INLINE CHAT -->
711            <div id="hero-chat" style="width:100%;max-width:700px;margin:0 auto">
712                <div id="hero-chat-messages" style="min-height:60px;max-height:400px;overflow-y:auto;margin-bottom:12px;display:flex;flex-direction:column;gap:10px"></div>
713                <div style="display:flex;gap:10px;background:#111;border:1px solid #2a2a2a;border-radius:16px;padding:4px 4px 4px 18px;align-items:center;transition:border-color .2s" id="hero-input-wrap">
714                    <input type="text" id="hero-input" placeholder="Ask Dave Anything..." autocomplete="off" style="flex:1;background:transparent;border:none;color:#fff;font-size:1rem;font-family:Inter,sans-serif;outline:none;padding:14px 0">
715                    <button onclick="heroSend()" id="hero-send-btn" style="background:#6C63FF;border:none;border-radius:12px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;flex-shrink:0;transition:all .2s">
716                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13"/><path d="M22 2L15 22L11 13L2 9L22 2Z"/></svg>
717                    </button>
718                </div>
719                <div style="display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px" id="hero-daves">
720                    <button onclick="heroPick('nice','😊','Dave')" class="hero-dave-btn" style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:100px;padding:8px 18px;color:#a0a0a0;cursor:pointer;font-family:Inter,sans-serif;font-size:.85rem;transition:all .2s;display:flex;align-items:center;gap:6px">😊 Dave</button>
721                    <button onclick="heroPick('eshay','🧢','Eshay Dave')" class="hero-dave-btn" style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:100px;padding:8px 18px;color:#a0a0a0;cursor:pointer;font-family:Inter,sans-serif;font-size:.85rem;transition:all .2s;
721display:flex;align-items:center;gap:6px">🧢 Eshay</button>
722                    <button onclick="heroPick('tradie','🦺','Tradie Dave')" class="hero-dave-btn" style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:100px;padding:8px 18px;color:#a0a0a0;cursor:pointer;font-family:Inter,sans-serif;font-size:.85rem;transition:all .2s;display:flex;align-items:center;gap:6px">🦺 Tradie</button>
723                    <button onclick="heroPick('surfer','🌊','Surfer Dave')" class="hero-dave-btn" style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:100px;padding:8px 18px;color:#a0a0a0;cursor:pointer;font-family:Inter,sans-serif;font-size:.85rem;transition:all .2s;display:flex;align-items:center;gap:6px">🌊 Surfer</button>
724                    <button onclick="heroPick('cricket','🏏','Cricket Dave')" class="hero-dave-btn" style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:100px;padding:8px 18px;color:#a0a0a0;cursor:pointer;font-family:Inter,sans-serif;font-size:.85rem;transition:all .2s;display:flex;align-items:center;gap:6px">🏏 Cricket</button>
725                    <button onclick="heroPick('southern','🤠','Southern Dave')" class="hero-dave-btn" style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:100px;padding:8px 18px;color:#a0a0a0;cursor:pointer;font-family:Inter,sans-serif;font-size:.85rem;transition:all .2s;display:flex;align-items:center;gap:6px">🤠 Southern</button>
726                    <button onclick="heroPick('siliconvalley','🚀','Silicon Valley Dave')" class="hero-dave-btn" style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:100px;padding:8px 18px;color:#a0a0a0;cursor:pointer;font-family:Inter,sans-serif;font-size:.85rem;transition:all .2s;display:flex;align-items:center;gap:6px">🚀 Silicon Valley</button>
727                    <button onclick="heroPick('posh','🌎','Posh Dave')" class="hero-dave-btn" style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:100px;padding:8px 18px;color:#a0a0a0;cursor:pointer;font-family:Inter,sans-serif;font-size:.85rem;transition:all .2s;display:flex;align-items:center;gap:6px">🌎 Posh</button>
728                    <button onclick="heroPick('footie','⚽','Footie Dave')" class="hero-dave-btn" style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:100px;padding:8px 18px;color:#a0a0a0;cursor:pointer;font-family:Inter,sans-serif;font-size:.85rem;transition:all .2s;display:flex;align-items:center;gap:6px">⚽ Footie</button>
729                    <button onclick="heroPick('desiuncle','😄','Desi Uncle Dave')" class="hero-dave-btn" style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:100px;padding:8px 18px;color:#a0a0a0;cursor:pointer;font-family:Inter,sans-serif;font-size:.85rem;transition:all .2s;display:flex;align-items:center;gap:6px">😄 Desi Uncle</button>
730                    <button onclick="heroPick('professional','👔','Professional Dave')" class="hero-dave-btn" style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:100px;padding:8px 18px;color:#a0a0a0;cursor:pointer;font-family:Inter,sans-serif;font-size:.85rem;transition:all .2s;display:flex;align-items:center;gap:6px">👔 Professional</button>
731                </div>
732                <div style="text-align:center;margin-top:8px" id="hero-msg-counter"><span style="color:#666;font-size:.75rem"></span></div>
733            </div>
734        </div>
735    </section>
736
737    <!-- Stats Strip -->
738    <div style="background:var(--bg-secondary);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:28px 24px;">
739        <div style="max-width:1100px;margin:0 auto;display:flex;justify-content:center;gap:56px;flex-wrap:wrap;text-align:center;align-items:center">
740            <div>
741                <div style="font-size:2rem;font-weight:900;color:var(--text-primary);line-height:1">11</div>
742                <div style="font-size:.78rem;color:var(--text-secondary);margin-top:5px;font-weight:500">Dave personalities</div>
743            </div>
744            <div style="width:1px;height:36px;background:var(--border);display:none" class="stat-divider"></div>
745            <div>
746                <div style="font-size:2rem;font-weight:900;color:var(--green);line-height:1">Free</div>
747                <div style="font-size:.78rem;color:var(--text-secondary);margin-top:5px;font-weight:500">No account needed to try</div>
748            </div>
749            <div>
750                <div style="font-size:2rem;font-weight:900;color:var(--text-primary);line-height:1">3</div>
751                <div style="font-size:.78rem;color:var(--text-secondary);margin-top:5px;font-weight:500">Platforms &nbsp;·&nbsp; Web &nbsp;·&nbsp; Telegram &nbsp;·&nbsp; WhatsApp</div>
752            </div>
753            <div>
754                <div style="font-size:1.8rem;line-height:1">🇦🇺</div>
755                <div style="font-size:.78rem;color:var(--text-secondary);margin-top:5px;font-weight:500">Built in Australia</div>
756            </div>
757        </div>
758    </div>
759
760    <!-- Personalities -->
761    <section class="section" id="personalities">
762        <div class="section-header">
763            <div class="section-label">Pick Your Vibe</div>
764            <h2>Every Dave. One mission.</h2>
765            <p class="section-subtitle">Same brain, different personality. Choose the Dave that fits you — or switch anytime.</p>
766        </div>
767
768        <div style="font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--accent);text-transform:uppercase;margin-bottom:20px">🇦🇺 Australia</div>
769        <div class="personality-grid" style="margin-bottom:48px">
770            <div class="personality-card">
771                <span class="emoji">😊</span>
772                <h3>Dave</h3>
773                <div class="tagline">"Happy to help!"</div>
774                <p>Warm, friendly, and endlessly patient. Like texting your smartest, kindest mate. The default Dave.</p>
775                <div class="sample-chat">
776                    <div class="user-msg">You: I'm stressed about tomorrow</div>
777                    <div class="dave-msg">Dave: Hey, that's completely normal — shows you care. Want to talk through it? We'll get you sorted 👍</div>
778                </div>
779            </div>
780            <div class="personality-card">
781                <span class="emoji">🧢</span>
782                <h3>Eshay Dave</h3>
783                <div class="tagline">"yeah nah it's easy as bro"</div>
784                <p>Talks like your mate from the western suburbs. Street-smart, surprisingly helpful, zero corporate energy.</p>
785                <div class="sample-chat">
786                    <div class="user-msg">You: What should I have for dinner?</div>
787                    <div class="dave-msg">Dave: bro just chuck some chicken in a pan with whatever sauce you got, rice in the microwave packet — done. masterchef who?? 🔥</div>
788                </div>
789            </div>
790            <div class="personality-card">
791                <span class="emoji">🦺</span>
792                <h3>Tradie Dave</h3>
793                <div class="tagline">"she'll be right, mate"</div>
794                <p>20 years on the tools. Straight-talking, practical, dry humour. Like getting advice from your site foreman.</p>
795                <div class="sample-chat">
796                    <div class="user-msg">You: How do I fix a leaky tap?</div>
797                    <div class="dave-msg">Dave: Nine times out of ten it's the washer. Turn the water off first — don't skip that. Bunnings, $2.</div>
798                </div>
799            </div>
800            <div class="personality-card">
801                <span class="emoji">🌊</span>
802                <h3>Surfer Dave</h3>
803                <div class="tagline">"just ride it out, dude"</div>
804                <p>The chillest person alive. Laid-back wisdom served with beach vibes and zero stress.</p>
805                <div class="sample-chat">
806                    <div class="user-msg">You: I'm overthinking everything</div>
807                    <div class="dave-msg">Dave: Hey dude, the wave always passes 🌊 Take a breath. Most of this won't matter in a week. What's on your mind?</div>
808                </div>
809            </div>
810            <div class="personality-card">
811                <span class="emoji">🏏</span>
812                <h3>Cricket Dave</h3>
813                <div class="tagline">"It's a game of moments, mate"</div>
814                <p>Lives and breathes cricket. Stats, tactics, eras, formats — the ultimate mate to debate the game with.</p>
815                <div class="sample-chat">
816                    <div class="user-msg">You: Is Bradman the greatest ever?</div>
817                    <div class="dave-msg">Dave: Statistically, it's not even close — 99.94, next best is around 60. In any era that number is extraordinary. Bradman stands alone. 🏏</div>
818                </div>
819            </div>
820        </div>
821
822        <!-- USA -->
823        <div style="font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--accent);text-transform:uppercase;margin-bottom:20px">🇺🇸 USA</div>
824        <div class="personality-grid" style="margin-bottom:48px">
825            <div class="personality-card">
826                <span class="emoji">🤠</span>
827                <h3>Southern Dave</h3>
828                <div class="tagline">"slow down and do it right"</div>
829                <p>BBQ wisdom, homesteading know-how, American football strategy. Southern hospitality meets real-world smarts.</p>
830                <div class="sample-chat">
831                    <div class="user-msg">You: How do I make good BBQ ribs?</div>
832                    <div class="dave-msg">Dave: Low and slow — that's the gospel. 225°F, hickory smoke, five to six hours. Wrap 'em at hour three with butter and brown sugar. 🤠</div>
833                </div>
834            </div>
835            <div class="personality-card">
836                <span class="emoji">🚀</span>
837                <h3>Silicon Valley Dave</h3>
838                <div class="tagline">"let's pressure-test the thesis"</div>
839                <p>Startup ecosystems, tech trends, founding and scaling. Speak fluent VC without the BS filter.</p>
840                <div class="sample-chat">
841                    <div class="user-msg">You: Should I quit my job to start a startup?</div>
842                    <div class="dave-msg">Dave: First, de-risk it. Get 10 paying customers before you quit. What's your unfair advantage and TAM? Let's pressure-test the thesis. 🚀</div>
843                </div>
844            </div>
845        </div>
846
847        <!-- UK -->
848        <div style="font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--accent);text-transform:uppercase;margin-bottom:20px">🇬🇧 UK</div>
849        <div class="personality-grid" style="margin-bottom:48px">
850            <div class="personality-card">
851                <span class="emoji">🌎</span>
852                <h3>Posh Dave</h3>
853                <div class="tagline">"One must have standards"</div>
854                <p>Oxford-educated, well-travelled, fine dining aficionado. International business, etiquette, and a very dry wit.</p>
855                <div class="sample-chat">
856                    <div class="user-msg">You: What wine goes with steak?</div>
857                    <div class="dave-msg">Dave: A structured Barolo would be magnificent — the tannins complement the protein marvellously. A Napa Cab if you prefer something more approachable. 🍷</div>
858                </div>
859            </div>
860            <div class="personality-card">
861                <span class="emoji">⚽</span>
862                <h3>Footie Dave</h3>
863                <div class="tagline">"Football is life, mate"</div>
864                <p>
864Tactics, transfers, player psychology — all leagues, all eras. The bloke at the pub who actually knows his stuff.</p>
865                <div class="sample-chat">
866                    <div class="user-msg">You: Best manager of all time?</div>
867                    <div class="dave-msg">Dave: Fergie, no contest — 13 Premier League titles, built two dynasties. But Guardiola's changing what's tactically possible. Trophies or transformation? ⚽</div>
868                </div>
869            </div>
870        </div>
871
872        <!-- India -->
873        <div style="font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--accent);text-transform:uppercase;margin-bottom:20px">🇮🇳 India</div>
874        <div class="personality-grid" style="margin-bottom:48px">
875            <div class="personality-card">
876                <span class="emoji">😄</span>
877                <h3>Desi Uncle Dave</h3>
878                <div class="tagline">"Arrey, let me tell you something"</div>
879                <p>Indian family wisdom, Ayurveda, home cooking, and life advice with a warm Hindi/Hinglish twist.</p>
880                <div class="sample-chat">
881                    <div class="user-msg">You: How do I make good chai?</div>
882                    <div class="dave-msg">Dave: Arrey, full-fat milk only, beta! Boil with crushed ginger and cardamom, add tea leaves, sugar last. Packet tea? No no no — loose leaf only! ☕</div>
883                </div>
884            </div>
885        </div>
886
887        <!-- Universal -->
888        <div style="font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--accent);text-transform:uppercase;margin-bottom:20px">🌐 Universal</div>
889        <div class="personality-grid">
890            <div class="personality-card">
891                <span class="emoji">👔</span>
892                <h3>Professional Dave</h3>
893                <div class="tagline">"Let me outline the approach"</div>
894                <p>Sharp, polished, and strategically minded. The colleague who always knows what to say in the meeting.</p>
895                <div class="sample-chat">
896                    <div class="user-msg">You: How do I ask my boss for a raise?</div>
897                    <div class="dave-msg">Dave: Prepare three concrete examples of value delivered. Frame it around market rate, not personal need. Then pick your moment.</div>
898                </div>
899            </div>
900        </div>
901    </section>
902
903    <!-- How It Works -->
904    <section class="section" id="how-it-works" style="background: var(--bg-secondary); margin: 0; max-width: 100%; padding-left: 24px; padding-right: 24px;">
905        <div style="max-width: 1200px; margin: 0 auto;">
906            <div class="section-header">
907                <div class="section-label">Simple as</div>
908                <h2>How it works</h2>
909            </div>
910
911            <div class="steps">
912                <div class="step">
913                    <div class="step-number">1</div>
914                    <h3>Pick your Dave</h3>
915                    <p>Choose from 8 unique personalities — from chill surfer to sharp professional. Switch anytime.</p>
916                </div>
917                <div class="step">
918                    <div class="step-number">2</div>
919                    <h3>Ask anything</h3>
920                    <p>Text Dave on WhatsApp or chat on the web. No app to download, no account needed to try.</p>
921                </div>
922                <div class="step">
923                    <div class="step-number">3</div>
924                    <h3>Get real answers</h3>
925                    <p>Dave remembers your conversations, adapts to you, and talks like an actual person — not a robot.</p>
926                </div>
927            </div>
928        </div>
929    </section>
930
931    <!-- Pricing -->
932    <section class="section" id="pricing">
933        <div class="section-header">
934            <div class="section-label">Pricing</div>
935            <h2>Pick your plan</h2>
936            <p class="section-subtitle">Start free. Upgrade when Dave proves he's worth it.</p>
937        </div>
938
939        <div class="pricing-grid" style="max-width:1100px;margin:0 auto;grid-template-columns:repeat(3,1fr)">
940            <div class="pricing-card">
941                <h3>Free</h3>
942                <div class="price">$0 <span>/ forever</span></div>
943                <div class="price-note">No credit card needed</div>
944                <ul>
945                    <li>10 messages per day</li>
946                    <li>4 Dave personalities</li>
947                    <li>Web + Telegram</li>
948                    <li class="disabled">All Dave personalities</li>
949                    <li class="disabled">Conversation memory</li>
950                    <li class="disabled">Custom Daves</li>
951                    <li class="disabled">WhatsApp access</li>
952                </ul>
953                <a href="/chat.html" class="btn btn-secondary">Start Chatting</a>
954                <p style="font-size:.78rem;color:var(--text-muted);margin-top:10px;text-align:center">No sign-up required</p>
955            </div>
956
957            <div class="pricing-card featured">
958                <h3>Personal</h3>
959                <div class="price">$4.99 <span>/ month</span></div>
960                <div class="price-note">AUD — billed monthly</div>
961                <ul>
962                    <li>Unlimited messages</li>
963                    <li>All Dave personalities</li>
964                    <li>Web + Telegram</li>
965                    <li>Dave remembers you</li>
966                    <li>1 custom Dave</li>
967                    <li class="disabled">Priority support</li>
968                </ul>
969                <a href="/login.html?plan=personal" class="btn btn-primary">Get Personal</a>
970                <p style="font-size:.78rem;color:var(--text-muted);margin-top:10px;text-align:center">7-day free trial &nbsp;·&nbsp; Cancel anytime</p>
971            </div>
972
973            <div class="pricing-card">
974                <h3>Pro</h3>
975                <div class="price">$14.99 <span>/ month</span></div>
976                <div class="price-note">AUD — billed monthly</div>
977                <ul>
978                    <li>Unlimited messages</li>
979                    <li>All Dave personalities</li>
980                    <li>Web + Telegram + WhatsApp</li>
981                    <li>Dave remembers you</li>
982                    <li>5 custom Daves</li>
983                    <li>
983Priority responses</li>
984                    <li class="disabled">Priority support</li>
985                </ul>
986                <a href="/login.html?plan=pro" class="btn btn-secondary">Get Pro</a>
987                <p style="font-size:.78rem;color:var(--text-muted);margin-top:10px;text-align:center">7-day free trial &nbsp;·&nbsp; Cancel anytime</p>
988            </div>
989
990        </div>
991
992        <div style="text-align: center; margin-top: 40px;">
993            <div style="margin-top:0;text-align:center">
994                <p style="color:var(--text-secondary);font-size:1rem;margin-bottom:16px">Need more? Business plan coming soon.</p>
995                <form id="waitlist-form" onsubmit="joinWaitlist(event)" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:440px;margin:0 auto">
996                    <input type="email" id="waitlist-email" placeholder="[email protected]" required
997                        style="flex:1;min-width:200px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:12px 16px;color:var(--text-primary);font-family:Inter,sans-serif;font-size:.95rem;outline:none">
998                    <button type="submit" id="waitlist-btn"
999                        style="background:var(--accent);color:white;border:none;border-radius:10px;padding:12px 20px;font-weight:600;font-size:.95rem;cursor:pointer;font-family:Inter,sans-serif;white-space:nowrap;transition:background .2s">Join waitlist</button>
1000                </form>
1001                <p id="waitlist-success" style="display:none;color:var(--green);font-weight:600;margin-top:12px">You're on the list 👍</p>
1002                <p id="waitlist-error" style="display:none;color:#ef4444;font-size:.85rem;margin-top:8px"></p>
1003            </div>
1004        </div>
1005    </section>
1006
1007    <!-- Urgency Banner -->
1008    <div style="background: linear-gradient(135deg, rgba(108, 99, 255, 0.2), rgba(236, 72, 153, 0.1)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 24px; text-align: center;">
1009        <span style="display: inline-block; background: var(--bg-card); border: 1px solid var(--border); border-radius: 100px; padding: 8px 20px; font-size: 0.9rem; color: var(--text-primary);">
1010            🔥 Early adopter pricing: Personal $4.99/mo &nbsp;·&nbsp; Pro $14.99/mo &nbsp;·&nbsp; Prices rise as we grow &nbsp;·&nbsp; <strong>Lock yours in today</strong>
1011        </span>
1012    </div>
1013
1014    <!-- Testimonials -->
1015    <section class="section" id="testimonials" style="background: var(--bg-secondary); margin: 0; max-width: 100%; padding-left: 24px; padding-right: 24px;">
1016        <div style="max-width: 1200px; margin: 0 auto;">
1017            <div class="section-header">
1018                <div class="section-label">What Dave can help with</div>
1019                <h2>One Dave for everything</h2>
1020            </div>
1021
1022            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 40px;">
1023                <div style="background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; text-align: center;">
1024                    <div style="font-size: 2.5rem; margin-bottom: 16px;">✍️</div>
1025                    <h3 style="font-size:1.1rem;font-weight:700;margin-bottom:8px">Research &amp; writing</h3>
1026                    <p style="color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7;">
1027                        Summarise topics, draft emails, write cover letters, explain complex stuff in plain English. Ask Dave anything.
1028                    </p>
1029                </div>
1030
1031                <div style="background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; text-align: center;">
1032                    <div style="font-size: 2.5rem; margin-bottom: 16px;">🔧</div>
1033                    <h3 style="font-size:1.1rem;font-weight:700;margin-bottom:8px">DIY &amp; practical advice</h3>
1034                    <p style="color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7;">
1035                        Fixing a tap, building a deck, buying a car, cooking dinner — get straight answers from a Dave who knows.
1036                    </p>
1037                </div>
1038
1039                <div style="background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; text-align: center;">
1040                    <div style="font-size: 2.5rem; margin-bottom: 16px;">💪</div>
1041                    <h3 style="font-size:1.1rem;font-weight:700;margin-bottom:8px">Fitness &amp; motivation</h3>
1042                    <p style="color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7;">
1043                        Training plans, nutrition, mindset, goal-setting. Dave keeps it real and keeps you moving.
1044                    </p>
1045                </div>
1046
1047                <div style="background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; text-align: center;">
1048                    <div style="font-size: 2.5rem; margin-bottom: 16px;">✈️</div>
1049                    <h3 style="font-size:1.1rem;font-weight:700;margin-bottom:8px">Travel planning</h3>
1050                    <p style="color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7;">
1051                        Where to go, where to eat, what to skip. Dave's been everywhere — and he'll be honest about all of it.
1052                    </p>
1053                </div>
1054            </div>
1055        </div>
1056    </section>
1057
1058    <!-- WhatsApp Feature -->
1059    <section class="section">
1060        <div style="max-width: 1200px; margin: 0 auto;">
1061            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;">
1062                <div>
1063                    <div class="section-label">Available on Pro</div>
1064                    <h2>Chat with Dave on WhatsApp — like texting a mate.</h2>
1065                    <p style="color: var(--text-secondary); font-size: 1.1rem; line-height: 1.7; margin-bottom: 32px; margin-top: 16px;">
1066                        No app to download. No login to remember. Just open WhatsApp, text Dave, and get instant replies — exactly like chatting with a friend who happens to be an AI genius.
1067                    </p>
1068                    <div style="display: flex; gap: 16px; flex-wrap: wrap;">
1069                        <a href="/login.html?plan=pro" class="btn btn-primary" style="font-size: 1rem; padding: 14px 32px;">Upgrade to Pro →</a>
1070                    </div>
1071                </div>
1072
1073                <div style="background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: left;">
1074                    <div style="font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.05em;">WhatsApp Chat</div>
1075                    
1076                    <div style="display: flex; gap: 10px; margin-bottom: 14px; justify-content: flex-end;">
1077                        <div style="background: var(--accent); color: white; padding: 8px 12px; border-radius: 14px 14px 4px 14px; max-width: 70%; font-size: 0.9rem; line-height: 1.5;">What should I cook tonight?</div>
1078                    </div>
1079
1080                    <div style="display: flex; gap: 10px; margin-bottom: 14px; align-items: flex-start;">
1081                        <div style="font-size: 1.2rem;">👨‍🍳</div>
1082                        <div style="background: var(--bg-secondary); border: 1px solid var(--border); padding: 8px 12px; border-radius: 14px; max-width: 70%; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary);">Easy — get some chicken, sear it hot, sauce of choice. Serve with rice. Trust me bro 🔥</div>
1083                    </div>
1084
1085                    <div style="display: flex; gap: 10px; margin-bottom: 14px; justify-content: flex-end;">
1086                        <div style="background: var(--accent); color: white; padding: 8px 12px; border-radius: 14px 14px 4px 14px; max-width: 70%; font-size: 0.9rem; line-height: 1.5;">
1086How long does it take?</div>
1087                    </div>
1088
1089                    <div style="display: flex; gap: 10px; align-items: flex-start;">
1090                        <div style="font-size: 1.2rem;">👨‍🍳</div>
1091                        <div style="background: var(--bg-secondary); border: 1px solid var(--border); padding: 8px 12px; border-radius: 14px; max-width: 70%; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary);">Whole thing? 15 mins max. Prep is where you save time.</div>
1092                    </div>
1093                </div>
1094            </div>
1095        </div>
1096    </section>
1097
1098    <!-- Community Daves -->
1099    <section class="section" id="community" style="background: var(--bg-secondary); margin: 0; max-width: 100%; padding-left: 24px; padding-right: 24px;">
1100        <div style="max-width: 1200px; margin: 0 auto;">
1101            <div class="section-header">
1102                <div class="section-label">Community</div>
1103                <h2>Create your own Dave</h2>
1104                <p class="section-subtitle">Build a custom Dave personality and share it with the world. The best ones get featured.</p>
1105            </div>
1106
1107
1108            <div class="community-preview">
1109                <div class="mini-dave">
1110                    <span class="emoji">👵</span>
1111                    <div class="name">Nonna Dave</div>
1112                    <div class="desc">Life advice + guilt trips</div>
1113                </div>
1114                <div class="mini-dave">
1115                    <span class="emoji">💼</span>
1116                    <div class="name">Hustle Dave</div>
1117                    <div class="desc">Side hustle & business ideas</div>
1118                </div>
1119                <div class="mini-dave">
1120                    <span class="emoji">📚</span>
1121                    <div class="name">Study Dave</div>
1122                    <div class="desc">Homework & exam prep</div>
1123                </div>
1124                <div class="mini-dave">
1125                    <span class="emoji">💕</span>
1126                    <div class="name">Relationship Dave</div>
1127                    <div class="desc">Dating & relationship advice</div>
1128                </div>
1129                <div class="mini-dave">
1130                    <span class="emoji">📊</span>
1131                    <div class="name">Accountant Dave</div>
1132                    <div class="desc">Tax tips & number crunching</div>
1133                </div>
1134                <div class="mini-dave">
1135                    <span class="emoji">🎮</span>
1136                    <div class="name">Gamer Dave</div>
1137                    <div class="desc">Strats, builds & banter</div>
1138                </div>
1139            </div>
1140
1141            <div style="text-align: center; margin-top: 40px;">
1142                <a href="/create-dave.html" class="btn btn-primary" style="font-size:1rem;padding:14px 32px">✨ Build Your Own Dave</a>
1143                <p style="color: var(--text-muted); font-size: 0.85rem; margin-top:12px">Free account required — takes 30 seconds</p>
1144            </div>
1145        </div>
1146    </section>
1147
1148    <!-- FAQ -->
1149    <section class="section" id="faq">
1150        <div class="section-header">
1151            <div class="section-label">FAQ</div>
1152            <h2>Got questions?</h2>
1153        </div>
1154
1155        <div class="faq-list">
1156            <div class="faq-item">
1157                <div class="faq-question" onclick="toggleFaq(this)">What is Ask Dave?</div>
1158                <div class="faq-answer">Ask Dave is an AI assistant with real personality. Unlike other AI chatbots that all sound the same, Dave lets you pick a personality that matches your vibe — from casual and funny to sharp and professional. Same powerful AI brain, different way of talking to you.</div>
1159            </div>
1160            <div class="faq-item">
1161                <div class="faq-question" onclick="toggleFaq(this)">Is it actually useful or just a gimmick?</div>
1162                <div class="faq-answer">Both! The personality makes it fun, but under the hood Dave uses the same top-tier AI models as ChatGPT and Claude. He can help with research, writing, advice, planning, coding, creative work — anything you'd ask a really smart friend. The personality just makes the experience way more enjoyable.</div>
1163            </div>
1164            <div class="faq-item">
1165                <div class="faq-question" onclick="toggleFaq(this)">How does WhatsApp access work?</div>
1166                <div class="faq-answer">On paid plans, you get a WhatsApp number to text Dave directly — just like messaging a friend. No app to download, no login to remember. Just open WhatsApp and start chatting. Dave responds in seconds.</div>
1167            </div>
1168            <div class="faq-item">
1169                <div class="faq-question" onclick="toggleFaq(this)">What does "Dave remembers you" mean?</div>
1170                <div class="faq-answer">On paid plans, Dave remembers your previous conversations, preferences, and context. So if you told Dave you're vegetarian last week, he won't suggest a steak recipe today. It's like having a friend who actually listens.</div>
1171            </div>
1172            <div class="faq-item">
1173                <div class="faq-question" onclick="toggleFaq(this)">Can I switch between Daves?</div>
1174                <div class="faq-answer">Absolutely. Just say "switch to Tradie Dave" or "be more professional" and Dave will change personality mid-conversation. You can also set a default Dave in your settings.</div>
1175            </div>
1176            <div class="faq-item">
1177                <div class="faq-question" onclick="toggleFaq(this)">What's a custom Dave?</div>
1178                <div class="faq-answer">A custom Dave is a personality you design yourself. You define the name, tone, personality traits, and expertise. Want a Dave that talks like a surfing instructor who's also great at maths? You can build that. Personal plan gets 1, Pro gets 5, Business gets unlimited.</div>
1179            </div>
1180            <div class="faq-item">
1181                <div class="faq-question" onclick="toggleFaq(this)">Is Dave really free?</div>
1182                <div class="faq-answer">Yes — no account, no credit card, no catch. You get 10 messages a day free, forever. If you want unlimited messages, all Dave personalities, and conversation memory, upgrade from $4.99/mo AUD.</
1182div>
1183            </div>
1184            <div class="faq-item">
1185                <div class="faq-question" onclick="toggleFaq(this)">How is Dave different from ChatGPT?</div>
1186                <div class="faq-answer">ChatGPT is a blank slate — helpful but generic. Dave has personality. You choose a mate who talks your language: Eshay, Tradie, Footie, Posh, whoever fits your vibe. Same powerful AI underneath, totally different experience. Dave is also on Telegram and WhatsApp — no extra app, no login, just chat.</div>
1187            </div>
1188            <div class="faq-item">
1189                <div class="faq-question" onclick="toggleFaq(this)">Is my data private?</div>
1190                <div class="faq-answer">Yes. Your conversations are encrypted and never shared with third parties. We don't use your chats to train AI models. You can delete your data anytime. We take privacy seriously — Dave's your mate, not a data broker.</div>
1191            </div>
1192        </div>
1193    </section>
1194
1195    <!-- Final CTA -->
1196    <section class="cta-section" id="try">
1197        <h2>Ready to meet Dave?</h2>
1198        <p>Start chatting for free. No credit card, no app download, no BS.</p>
1199        <div class="hero-ctas">
1200            <a href="/chat.html" class="btn btn-primary" id="tryDaveBtn">Start Chatting →</a>
1201            <a href="https://t.me/AskDaveAI_bot" class="btn btn-secondary">💬 Chat on Telegram</a>
1202        </div>
1203    </section>
1204
1205    <!-- Footer -->
1206    <footer>
1207        <p>
1208            © 2026 askdave.ai — Built in Australia 🇦🇺
1209            &nbsp;·&nbsp;
1210            <a href="/privacy.html">Privacy</a>
1211            &nbsp;·&nbsp;
1212            <a href="/terms.html">Terms</a>
1213            &nbsp;·&nbsp;
1214            <a href="mailto:[email protected]">Contact</a>
1215        </p>
1216    </footer>
1217
1218    
1218<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
1218
1219    
1219<script src="/js/auth.js"></script>
1219
1220    
1220<script>
1221        // Auth check for nav
1222        (async () => {
1223            try {
1224                const { isAuthenticated, user } = await initAuth();
1225                if (isAuthenticated && user) {
1226                    document.getElementById('nav-auth-guest').style.display = 'none';
1227                    document.getElementById('nav-auth-guest2').style.display = 'none';
1228                    document.getElementById('nav-auth-user').style.display = 'block';
1229                    document.getElementById('nav-auth-user2').style.display = 'block';
1230                    document.getElementById('nav-user-name').textContent = user.name || user.nickname || 'Dashboard';
1231                }
1232            } catch(e) {}
1233        })();
1234
1235        // Waitlist form
1236        async function joinWaitlist(e) {
1237            e.preventDefault();
1238            const email = document.getElementById('waitlist-email').value.trim();
1239            const btn = document.getElementById('waitlist-btn');
1240            const successEl = document.getElementById('waitlist-success');
1241            const errorEl = document.getElementById('waitlist-error');
1242            btn.disabled = true;
1243            btn.textContent = 'Joining...';
1244            errorEl.style.display = 'none';
1245            try {
1246                const res = await fetch('/api/waitlist.php', {
1247                    method: 'POST',
1248                    headers: {'Content-Type': 'application/json'},
1249                    body: JSON.stringify({action: 'signup', email: email})
1250                });
1251                const data = await res.json();
1252                if (res.ok || data.queued === false) {
1253                    document.getElementById('waitlist-form').style.display = 'none';
1254                    successEl.style.display = 'block';
1255                } else {
1256                    errorEl.textContent = data.error || 'Something went wrong. Try again.';
1257                    errorEl.style.display = 'block';
1258                    btn.disabled = false;
1259                    btn.textContent = 'Join waitlist';
1260                }
1261            } catch(err) {
1262                errorEl.textContent = 'Could not connect. Try again.';
1263                errorEl.style.display = 'block';
1264                btn.disabled = false;
1265                btn.textContent = 'Join waitlist';
1266            }
1267        }
1268
1269        // Menu & FAQ
1270        function toggleMenu() { document.getElementById('navLinks').classList.toggle('open'); }
1271        function toggleFaq(el) { el.parentElement.classList.toggle('open'); }
1272
1273        // Smooth scroll
1274        document.querySelectorAll('a[href^="#"]:not([href="#try"])').forEach(anchor => {
1275            anchor.addEventListener('click', function(e) {
1276                e.preventDefault();
1277                const target = document.querySelector(this.getAttribute('href'));
1278                if (target) target.scrollIntoView({ behavior:'smooth' });
1279                document.getElementById('navLinks').classList.remove('open');
1280            });
1281        });
1282
1283        // ===== HERO INLINE CHAT =====
1284        const HERO_API = 'https://askdave.ai/api/chat.php';
1285        let heroPersonality = 'nice';
1286        let heroHistory = [];
1287        let heroSending = false;
1288        let heroMsgCount = 0;
1289        let heroMaxMsg = 999;
1290        let heroPaid = false;
1291        const HERO_EMOJIS = {nice:'😊',eshay:'🧢',tradie:'🦺',professional:'👔',gym:'🏋️',surfer:'🌊',travel:'✈️',chef:'🧑‍🍳'};
1292
1293        // Check if paid via auth
1294        (async () => {
1295            try {
1296                const { isAuthenticated, user } = await initAuth();
1297                if (isAuthenticated && isPaidUser()) { heroPaid = true; heroMaxMsg = 999999; }
1298            } catch(e) {}
1299        })();
1300
1301        function heroPick(p, emoji, name) {
1302            heroPersonality = p;
1303            document.querySelectorAll('.hero-dave-btn').forEach(b => { b.style.borderColor = '#2a2a2a'; b.style.color = '#a0a0a0'; });
1304            event.target.closest('.hero-dave-btn').style.borderColor = '#6C63FF';
1305            event.target.closest('.hero-dave-btn').style.color = '#fff';
1306            heroCurrentDaveName = name;
1307            if (waitingForName) {
1308                const intro = p === 'eshay' ? `Oi what\'s ya name adlay 🧢` : `${emoji} ${name} here! Before we get started — what's your name?`;
1309                heroAddDave(intro);
1310                document.getElementById('hero-input').placeholder = p === 'eshay' ? 'Type ya n
1310ame cuz...' : 'Type your name...';
1311            } else {
1312                const greeting = p === 'eshay' ? `Oi what do ya want adlay 🧢` : `${emoji} ${name} here! Ask me anything.`;
1313                heroAddDave(greeting);
1314            }
1315        }
1316
1317        function goFullChat() {
1318            // Hide everything except the chat
1319            document.querySelectorAll('section:not(#home), nav, footer').forEach(el => el.style.display = 'none');
1320            const hero = document.getElementById('home');
1321            hero.style.minHeight = '100vh';
1322            hero.style.padding = '0';
1323            hero.style.justifyContent = 'flex-start';
1324            const content = document.querySelector('.hero-content');
1325            content.style.maxWidth = '800px';
1326            content.style.width = '100%';
1327            content.style.padding = '0';
1328            content.style.display = 'flex';
1329            content.style.flexDirection = 'column';
1330            content.style.height = '100vh';
1331            content.style.overflow = 'hidden';
1332            // Hide hero text
1333            document.querySelector('.hero-badge').style.display = 'none';
1334            document.querySelector('h1').style.display = 'none';
1335            document.querySelector('.hero-subtitle').style.display = 'none';
1336            // Expand chat area
1337            const chatBox = document.getElementById('hero-chat');
1338            chatBox.style.flex = '1';
1339            chatBox.style.display = 'flex';
1340            chatBox.style.flexDirection = 'column';
1341            chatBox.style.maxWidth = '100%';
1342            chatBox.style.padding = '16px 20px';
1343            chatBox.style.minHeight = '0';
1344            chatBox.style.overflow = 'hidden';
1345            // Pin the input area
1346            document.getElementById('hero-input-wrap').parentElement.style.flexShrink = '0';
1347            document.getElementById('hero-msg-counter').style.flexShrink = '0';
1348            const msgs = document.getElementById('hero-chat-messages');
1349            msgs.style.flex = '1';
1350            msgs.style.overflowY = 'auto';
1351            msgs.style.maxHeight = 'none';
1352            msgs.style.minHeight = '0';
1353            // Add a mini header
1354            if (!document.getElementById('mini-header')) {
1355                const hdr = document.createElement('div');
1356                hdr.id = 'mini-header';
1357                hdr.style.cssText = 'display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #2a2a2a;margin-bottom:12px;flex-shrink:0';
1358                hdr.innerHTML = '<a href="/" style="font-size:1.2rem;font-weight:800;color:#fff;text-decoration:none">ask<span style="color:#6C63FF">dave</span>.ai</a><div style="display:flex;gap:12px;align-items:center"><span id="mini-dave-name" style="color:#a0a0a0;font-size:.85rem"></span><a href="/dashboard.html" style="color:#a0a0a0;font-size:.85rem;text-decoration:none">Dashboard</a></div>';
1359                chatBox.insertBefore(hdr, chatBox.firstChild);
1360                document.getElementById('mini-dave-name').textContent = heroCurrentDaveName || 'Dave';
1361            }
1362            document.body.style.overflow = 'hidden';
1363        }
1364
1365        let heroCurrentDaveName = 'Dave';
1366        let waitingForName = false;
1367
1368        // After auth, check if we need to ask for name
1369        async function checkNameNeeded() {
1370            try {
1371                const { isAuthenticated, user } = await initAuth();
1372                if (isAuthenticated && user && user.needsName) {
1373                    waitingForName = true;
1374                }
1375            } catch(e) {}
1376        }
1377        checkNameNeeded();
1378
1379        function heroAddUser(text) {
1380            const msgs = document.getElementById('hero-chat-messages');
1381            const div = document.createElement('div');
1382            div.style.cssText = 'align-self:flex-end;background:#6C63FF;color:#fff;padding:10px 16px;border-radius:16px 16px 4px 16px;max-width:80%;font-size:.9rem;line-height:1.5';
1383            div.textContent = text;
1384            msgs.appendChild(div);
1385            setTimeout(() => { msgs.scrollTop = msgs.scrollHeight; }, 50);
1386        }
1387
1388        function heroAddDave(text) {
1389            const msgs = document.getElementById('hero-chat-messages');
1390            const div = document.createElement('div');
1391            const emoji = HERO_EMOJIS[heroPersonality] || '😊';
1392            let html = text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
1393                .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
1394                .replace(/\*(.+?)\*/g,'<em>$1</em>')
1395                .replace(/\n\n/g,'<br><br>').replace(/\n/g,'<br>');
1396            div.style.cssText = 'display:flex;gap:10px;align-items:flex-start;align-self:flex-start;max-width:90%';
1397            div.innerHTML = `<span style="font-size:1.2rem;flex-shrink:0;margin-top:2px">${emoji}</span><span style="color:#e0e0e0;font-size:.95rem;line-height:1.7;text-align:left">${html}</span>`;
1398            msgs.appendChild(div);
1399            setTimeout(() => { msgs.scrollTop = msgs.scrollHeight; }, 50);
1400        }
1401
1402        function heroAddDaveEmpty() {
1403            const msgs = document.getElementById('hero-chat-messages');
1404            const div = document.createElement('div');
1405            div.style.cssText = 'display:flex;gap:10px;align-items:flex-start';
1406            const emoji = HERO_EMOJIS[heroPersonality] || '😊';
1407            div.innerHTML = `<span style="font-size:1.4rem">${emoji}</span><div class="hero-msg-dave" style="background:#1a1a1a;border:1px solid #2a2a2a;border-radius:0 12px 12px 12px;padding:12px 16px;color:#fff;font-size:.95rem;line-height:1.6;max-width:85%"></div>`;
1408            msgs.appendChild(div);
1409            msgs.scrollTop = msgs.scrollHeight;
1410            return div;
1411        }
1412        function heroUpdateMsg(div, text) {
1413            const bubble = div.querySelector('.hero-msg-dave');
1414            if (bubble) bubble.innerHTML = text.replace(/\n/g,'<br>');
1415            const msgs = document.getElementById('hero-chat-messages');
1416            msgs.scrollTop = msgs.scrollHeight;
1417        }
1418
1419        function heroShowTyping() {
1420            const msgs = document.getElementById('hero-chat-messages');
1421            const div = document.createElement('div');
1422            div.id = 'hero-typing';
1423            const emoji = HERO_EMOJIS[heroPersonality] || '😊';
1424            div.style.cssText = 'display:flex;gap:10px;align-items:center';
1425            div.innerHTML = `<span style="font-size:1.2rem">${emoji}</span><span style="color:#666;font-size:.85rem">Dave is typing...</span>`;
1426            msgs.appendChild(div);
1427            msgs.scrollTop = msgs.scrollHeight;
1428        }
1429
1430        async function heroSend() {
1431            const input = document.getElementById('hero-input');
1432            const text = input.value.trim();
1433            if (!text || heroSending) return;
1434
1435            // If waiting for name, check if they asked a question instead
1436            if (waitingForName) {
1437                const questionWords = ['how','what','why','when','where','who','which','is','are','can','do','does','will','should','would','could','tell','explain','help','give'];
1438                const looksLikeQuestion = text.includes('?') || text.split(' ').length > 5 || questionWords.some(w => text.toLowerCase().startsWith(w + ' ') || text.toLowerCase().startsWith(w));
1439                
1440                if (!looksLikeQuestion) {
1441                    // It's a name — handle normally
1442                    waitingForName = false;
1443                    heroAddUser(text);
1444                    input.value = '';
1445                    try {
1446                        await fetch('https://askdave.ai/api/auth.php', {
1447                            method:'POST', headers:{'Content-Type':'application/json'}, credentials:'include',
1448                            body: JSON.stringify({action:'set_name', name:text})
1449                        });
1450                    } catch(e) {}
1451                    const emoji = HERO_EMOJIS[heroPersonality] || '😊';
1452                    const eshayGreets = [
1453                        `Oi sick one ${text} bra 🧢 Standard what do ya need cuz`,
1454                        `Swear to god ${text} is a unreal name lad 💀 What do ya want bra`,
1455                        `Standard ${text} aye 🧢 Oi what's the go cuz`
1456                    ];
1457                    const greet = heroPersonality === 'eshay'
1458                        ? eshayGreets[Math.floor(Math.random() * eshayGreets.length)]
1459                        : `Nice to meet you, ${text}! ${emoji} What can I help you with?`;
1460                    heroAddDave(greet);
1461                    document.getElementById('hero-input').placeholder = 'Ask Dave Anything...';
1462                    return;
1463                } else {
1464                    // They asked a question — skip name collection, answer it
1465                    waitingForName = false;
1466                    document.getElementById('hero-input').placeholder = 'Ask Dave Anything...';
1467                }
1468            }
1469
1470            heroAddUser(text);
1471            heroHistory.push({role:'user',content:text});
1472            input.value = '';
1473            heroSending = true;
1474            document.getElementById('hero-send-btn').disabled = true;
1475            document.getElementById('hero-daves').style.display = 'none';
1476            goFullChat();
1477            heroShowTyping();
1478            try {
1479                const res = await fetch(HERO_API, {
1480                    method:'POST', headers:{'Content-Type':'application/json'}, credentials:'include',
1481                    body: JSON.stringify({message:text, personality:heroPersonality, history:heroHistory.slice(-10)})
1482                });
1483                const el = document.getElementById('hero-typing'); if(el) el.remove();
1484                if (res.status === 403) {
1485                    const err = await res.json();
1486                    heroAddDave(err.error || "Upgrade to unlock this Dave — <a href='/#pricing' style='color:#6C63FF'>see plans</a>");
1487                    heroSending = false; document.getElementById('hero-send-btn').disabled = false;
1488                    return;
1489                }
1490                if (!res.ok) throw new Error('API error');
1491                // SSE streaming
1492                const msgDiv = heroAddDaveEmpty();
1493                let fullText = '', buffer = '', currentEvent = null;
1494                const reader = res.body.getReader();
1495                const decoder = new TextDecoder();
1496                while (true) {
1497                    const {done, value} = await reader.read();
1498                    if (done) break;
1499                    buffer += decoder.decode(value, {stream:true});
1500                    const lines = buffer.split('\n'); buffer = lines.pop();
1501                    for (const line of lines) {
1502                        const trimmed = line.trim();
1503                        if (trimmed.startsWith('event: ')) { currentEvent = trimmed.slice(7); continue; }
1504                        if (trimmed === '') { currentEvent = null; continue; }
1505                        if (!trimmed.startsWith('data: ')) continue;
1506                        const raw = trimmed.slice(6);
1507                        if (raw === '[DONE]') continue;
1508                        try {
1509                            const chunk = JSON.parse(raw);
1510                            if (currentEvent === 'meta') { if (chunk.isPaid) heroPaid = true; currentEvent = null; }
1511                            else if (currentEvent === 'error') { heroUpdateMsg(msgDiv, chunk.error || "Dave's having a moment."); currentEvent = null; }
1512                            else if (chunk.t) { fullText += chunk.t; heroUpdateMsg(msgDiv, fullText); }
1513                        } catch(e) {}
1514                    }
1515                }
1516                if (fullText) heroHistory.push({role:'assistant',content:fullText});
1517            } catch(e) {
1518                const el = document.getElementById('hero-typing'); if(el) el.remove();
1519                heroAddDave("Dave's having a moment — try again.");
1520            }
1521            heroSending = false; document.getElementById('hero-send-btn').disabled = false;
1522            input.focus();
1523        }
1524
1525        document.getElementById('hero-input').addEventListener('keydown', e => {
1526            if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); heroSend(); }
1527        });
1528
1529        // Focus style
1530        document.getElementById('hero-input').addEventListener('focus', () => { document.getElementById('hero-input-wrap').style.borderColor = '#6C63FF'; });
1531        document.getElementById('hero-input').addEventListener('blur', () => { document.getElementById('hero-input-wrap').style.borderColor = '#2a2a2a'; });
1532    </script>
1532
1533    <!-- Floating CTA -->
1534    <div id="float-cta" style="position:fixed;bottom:28px;right:28px;z-index:998;opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease;pointer-events:none">
1535        <a href="/chat.html" style="display:flex;align-items:center;gap:8px;background:var(--accent);color:white;padding:14px 22px;border-radius:100px;font-weight:700;font-size:.9rem;text-decoration:none;box-shadow:0 8px 32px rgba(108,99,255,.45);white-space:nowrap">
1536            💬 Try Dave Free
1537        </a>
1538    </div>
1539    
1539<script>
1540    (function() {
1541        var btn = document.getElementById('float-cta');
1542        var hero = document.querySelector('.hero');
1543        function onScroll() {
1544            var threshold = hero ? hero.offsetHeight : 600;
1545            if (window.scrollY > threshold) {
1546                btn.style.opacity = '1';
1547                btn.style.transform = 'translateY(0)';
1548                btn.style.pointerEvents = 'auto';
1549            } else {
1550                btn.style.opacity = '0';
1551                btn.style.transform = 'translateY(16px)';
1552                btn.style.pointerEvents = 'none';
1553            }
1554        }
1555        window.addEventListener('scroll', onScroll, {passive: true});
1556    })();
1557    </script>
1557
1558</body>
1559</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.