| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> |
| 5 | <title>Halo v2 · Launch</title> |
| 6 | <link rel="stylesheet" href="../../../assets/fonts.css"> |
| 7 | <link rel="stylesheet" href="../../../assets/base.css"> |
| 8 | <link rel="stylesheet" href="../../../assets/animations/animations.css"> |
| 9 | <link rel="stylesheet" href="style.css"> |
| 10 | </head> |
| 11 | <body class="tpl-product-launch"> |
| 12 | <div class="deck"> |
| 13 | |
| 14 | <!-- 1. Cover / hero --> |
| 15 | <section class="slide dark" data-title="Cover"> |
| 16 | <div class="hero-shot"></div> |
| 17 | <div style="position:absolute;top:56px;left:112px" class="brand">◎ Halo</div> |
| 18 | <p class="kicker">Launch · April 2026</p> |
| 19 | <h1 class="h1 anim-fade-up" data-anim="fade-up">Meet Halo v2.<br>Your ears,<br><span style="background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent">rewritten.</span></h1> |
| 20 | <p class="lede mt-m" style="max-width:42ch">Studio-grade spatial audio in the lightest open-ear earbuds ever made.</p> |
| 21 | <div class="deck-footer"><span>halo.audio</span><span class="slide-number" data-current="1" data-total="8"></span></div> |
| 22 | </section> |
| 23 | |
| 24 | <!-- 2. Introducing --> |
| 25 | <section class="slide center tc" data-title="Introducing"> |
| 26 | <div> |
| 27 | <p class="kicker">Introducing</p> |
| 28 | <h1 class="h1" style="font-size:140px">Halo v2</h1> |
| 29 | <p class="lede" style="margin:24px auto;max-width:56ch">Four years of research. Three generations of silicon. One product you'll forget you're wearing.</p> |
| 30 | </div> |
| 31 | </section> |
| 32 | |
| 33 | <!-- 3. Feature 1 --> |
| 34 | <section class="slide" data-title="Sound"> |
| 35 | <p class="kicker">01 · The sound</p> |
| 36 | <h2 class="h2">Hear the room<br>around the music.</h2> |
| 37 | <div class="grid g3 mt-l"> |
| 38 | <div class="feature-card"><div class="icon">♪</div><h4>Open-ear spatial</h4><p class="dim">16mm titanium drivers angled into the ear canal. You hear the song and the world at once.</p></div> |
| 39 | <div class="feature-card"><div class="icon">◈</div><h4>Lossless 24-bit</h4><p class="dim">aptX Lossless and Hi-Res LDAC over Bluetooth 5.4. No dongles, no compromises.</p></div> |
| 40 | <div class="feature-card"><div class="icon">◐</div><h4>Adaptive EQ</h4><p class="dim">Tunes itself to the shape of your ear every 120 seconds.</p></div> |
| 41 | </div> |
| 42 | </section> |
| 43 | |
| 44 | <!-- 4. Feature 2 --> |
| 45 | <section class="slide dark" data-title="Fit"> |
| 46 | <p class="kicker">02 · The fit</p> |
| 47 | <h2 class="h2">4.9 grams.<br>All-day forgettable.</h2> |
| 48 | <div class="grid g3 mt-l"> |
| 49 | <div class="card"><h4>Liquid-silicone hook</h4><p>Wraps behind the ear like a glasses arm. Never falls out on a run.</p></div> |
| 50 | <div class="card"><h4>IP57 sweat + rain</h4><p>Take them in the ocean. Rinse them under the tap. We dare you.</p></div> |
| 51 | <div class="card"><h4>14h + 42h case</h4><p>A full workweek of commutes on one charge of the case.</p></div> |
| 52 | </div> |
| 53 | </section> |
| 54 | |
| 55 | <!-- 5. Feature 3 --> |
| 56 | <section class="slide" data-title="Intelligence"> |
| 57 | <p class="kicker">03 · The intelligence</p> |
| 58 | <h2 class="h2">An AI that listens<br>so you don't have to.</h2> |
| 59 | <div class="grid g2 mt-l"> |
| 60 | <div class="feature-card"><div class="icon">✦</div><h4>Live translate</h4><p class="dim">Real-time translation in 41 languages. Whispered directly into your ear, with a 380ms lag.</p></div> |
| 61 | <div class="feature-card"><div class="icon">✧</div><h4>Meeting recap</h4><p class="dim">Double-tap to record. Walk away with a summary, action items, and a searchable transcript.</p></div> |
| 62 | </div> |
| 63 | </section> |
| 64 | |
| 65 | <!-- 6. How it works --> |
| 66 | <section class="slide" data-title="How it works"> |
| 67 | <p class="kicker">How it works</p> |
| 68 | <h2 class="h2">Three taps. You're in.</h2> |
| 69 | <div class="stack mt-l" style="max-width:900px"> |
| 70 | <div class="step"><div class="n">1</div><div><h4>Open the case near your phone</h4><p class="dim">iOS and Android pair automatically over Bluetooth LE. No app downloads required.</p></div></div> |
| 71 | <div class="step"><div class="n">2</div><div><h4>Pick your profile</h4><p class="dim">Commute, Focus, Workout, Cinema. Each is a complete audio + transparency recipe.</p></div></div> |
| 72 | <div class="step"><div class="n">3</div><div><h4>Just listen</h4><p class="dim">Halo adapts to your ear shape, your environment, and your hearing profile — continuously.</p></div></div> |
| 73 | </div> |
| 74 | </section> |
| 75 | |
| 76 | <!-- 7. Pricing --> |
| 77 | <section class="slide" data-title="Pricing"> |
| 78 | <p class="kicker">Pricing</p> |
| 79 | <h2 class="h2">Pick your Halo.</h2> |
| 80 | <div class="grid g3 mt-l" style="align-items:start"> |
| 81 | <div class="price-card"> |
| 82 | <h4>Halo Lite</h4> |
| 83 | <div class="amount">$179</div> |
| 84 | <p class="dim">Open-ear audio, IP57, 12h battery.</p> |
| 85 | <ul><li>AAC + SBC</li><li>Single-tap controls</li><li>USB-C charging</li></ul> |
| 86 | </div> |
| 87 | <div class="price-card pro"> |
| 88 | <h4>Halo v2 · Pro</h4> |
| 89 | <div class="amount">$279</div> |
| 90 | <p class="dim">Everything, in its best form.</p> |
| 91 | <ul><li>Hi-Res Lossless</li><li>Live translate · 41 lang</li><li>Wireless + MagSafe charging</li><li>Adaptive EQ</li></ul> |
| 92 | </div> |
| 93 | <div class="price-card"> |
| 94 | <h4>Halo Studio</h4> |
| 95 | <div class="amount">$399</div> |
| 96 | <p class="dim">For creators and field recorders.</p> |
| 97 | <ul><li>32-bit binaural capture</li><li>XLR dongle included</li><li>Lifetime firmware</li></ul> |
| 98 | </div> |
| 99 | </div> |
| 100 | </section> |
| 101 | |
| 102 | <!-- 8. Testimonial + CTA combined? Task says 8 slides w/ testimonial + CTA as separate. Keep 8: testimonial on 7, but we've used 7 already. Re-plan: cover(1) intro(2) f1(3) f2(4) f3(5) how(6) pricing(7) testimonial+CTA(8) --> |
| 103 | <section class="slide dark" data-title="Ship"> |
| 104 | <p class="kicker">One more thing</p> |
| 105 | <div class="row" style="gap:80px;align-items:center"> |
| 106 | <div style="flex:1"> |
| 107 | <p class="testimonial">"I forgot I was wearing them. Then I remembered, and I didn't want to take them off."</p> |
| 108 | <p class="dim mt-m">— Marques Lin, The Verge · early review</p> |
| 109 | </div> |
| 110 | <div style="flex:0 0 auto;text-align:center"> |
| 111 | <p class="dim mb-m">Ships May 14 · from</p> |
| 112 | <div style="font-size:96px;font-weight:900;letter-spacing:-.04em">$279</div> |
| 113 | <a class="cta-btn mt-l" href="#">Pre-order Halo v2 →</a> |
| 114 | <p class="dim mt-m" style="font-size:13px">Free shipping · 45-day return · 2-year warranty</p> |
| 115 | </div> |
| 116 | </div> |
| 117 | </section> |
| 118 | |
| 119 | </div> |
| 120 | <script src="../../../assets/runtime.js"></script> |
| 121 | </body></html> |
| 122 |