122 lines
6.4 KiB
HTML
122 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Halo v2 · Launch</title>
|
|
<link rel="stylesheet" href="../../../assets/fonts.css">
|
|
<link rel="stylesheet" href="../../../assets/base.css">
|
|
<link rel="stylesheet" href="../../../assets/animations/animations.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body class="tpl-product-launch">
|
|
<div class="deck">
|
|
|
|
<!-- 1. Cover / hero -->
|
|
<section class="slide dark" data-title="Cover">
|
|
<div class="hero-shot"></div>
|
|
<div style="position:absolute;top:56px;left:112px" class="brand">◎ Halo</div>
|
|
<p class="kicker">Launch · April 2026</p>
|
|
<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>
|
|
<p class="lede mt-m" style="max-width:42ch">Studio-grade spatial audio in the lightest open-ear earbuds ever made.</p>
|
|
<div class="deck-footer"><span>halo.audio</span><span class="slide-number" data-current="1" data-total="8"></span></div>
|
|
</section>
|
|
|
|
<!-- 2. Introducing -->
|
|
<section class="slide center tc" data-title="Introducing">
|
|
<div>
|
|
<p class="kicker">Introducing</p>
|
|
<h1 class="h1" style="font-size:140px">Halo v2</h1>
|
|
<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>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. Feature 1 -->
|
|
<section class="slide" data-title="Sound">
|
|
<p class="kicker">01 · The sound</p>
|
|
<h2 class="h2">Hear the room<br>around the music.</h2>
|
|
<div class="grid g3 mt-l">
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. Feature 2 -->
|
|
<section class="slide dark" data-title="Fit">
|
|
<p class="kicker">02 · The fit</p>
|
|
<h2 class="h2">4.9 grams.<br>All-day forgettable.</h2>
|
|
<div class="grid g3 mt-l">
|
|
<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>
|
|
<div class="card"><h4>IP57 sweat + rain</h4><p>Take them in the ocean. Rinse them under the tap. We dare you.</p></div>
|
|
<div class="card"><h4>14h + 42h case</h4><p>A full workweek of commutes on one charge of the case.</p></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5. Feature 3 -->
|
|
<section class="slide" data-title="Intelligence">
|
|
<p class="kicker">03 · The intelligence</p>
|
|
<h2 class="h2">An AI that listens<br>so you don't have to.</h2>
|
|
<div class="grid g2 mt-l">
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6. How it works -->
|
|
<section class="slide" data-title="How it works">
|
|
<p class="kicker">How it works</p>
|
|
<h2 class="h2">Three taps. You're in.</h2>
|
|
<div class="stack mt-l" style="max-width:900px">
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 7. Pricing -->
|
|
<section class="slide" data-title="Pricing">
|
|
<p class="kicker">Pricing</p>
|
|
<h2 class="h2">Pick your Halo.</h2>
|
|
<div class="grid g3 mt-l" style="align-items:start">
|
|
<div class="price-card">
|
|
<h4>Halo Lite</h4>
|
|
<div class="amount">$179</div>
|
|
<p class="dim">Open-ear audio, IP57, 12h battery.</p>
|
|
<ul><li>AAC + SBC</li><li>Single-tap controls</li><li>USB-C charging</li></ul>
|
|
</div>
|
|
<div class="price-card pro">
|
|
<h4>Halo v2 · Pro</h4>
|
|
<div class="amount">$279</div>
|
|
<p class="dim">Everything, in its best form.</p>
|
|
<ul><li>Hi-Res Lossless</li><li>Live translate · 41 lang</li><li>Wireless + MagSafe charging</li><li>Adaptive EQ</li></ul>
|
|
</div>
|
|
<div class="price-card">
|
|
<h4>Halo Studio</h4>
|
|
<div class="amount">$399</div>
|
|
<p class="dim">For creators and field recorders.</p>
|
|
<ul><li>32-bit binaural capture</li><li>XLR dongle included</li><li>Lifetime firmware</li></ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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) -->
|
|
<section class="slide dark" data-title="Ship">
|
|
<p class="kicker">One more thing</p>
|
|
<div class="row" style="gap:80px;align-items:center">
|
|
<div style="flex:1">
|
|
<p class="testimonial">"I forgot I was wearing them. Then I remembered, and I didn't want to take them off."</p>
|
|
<p class="dim mt-m">— Marques Lin, The Verge · early review</p>
|
|
</div>
|
|
<div style="flex:0 0 auto;text-align:center">
|
|
<p class="dim mb-m">Ships May 14 · from</p>
|
|
<div style="font-size:96px;font-weight:900;letter-spacing:-.04em">$279</div>
|
|
<a class="cta-btn mt-l" href="#">Pre-order Halo v2 →</a>
|
|
<p class="dim mt-m" style="font-size:13px">Free shipping · 45-day return · 2-year warranty</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
<script src="../../../assets/runtime.js"></script>
|
|
</body></html>
|