Create a voice-note product hero with Tailwind CSS. Use an editorial headline, trust note, and CTA beside a tactile recorder card with duration, animated waveform bars, record button, transcript preview, and privacy indicator. Add JavaScript that starts and pauses a simulated recording, advances the timer, animates waveform levels, updates the button state, and reveals a generated transcript after stopping.
Create a voice-note product hero with Tailwind CSS. Use an editorial headline, trust note, and CTA beside a tactile recorder card with duration, animated waveform bars, record button, transcript preview, and privacy indicator. Add JavaScript that starts and pauses a simulated recording, advances the timer, animates waveform levels, updates the button state, and reveals a generated transcript after stopping.
<section class="bg-neutral-950 px-6 py-20 text-white"><div class="mx-auto grid max-w-6xl items-center gap-14 lg:grid-cols-2"><div><span class="text-sm font-medium text-rose-300">Thoughts, before they disappear.</span><h1 class="mt-5 max-w-xl text-5xl font-semibold leading-none tracking-[-0.05em] sm:text-7xl">Speak now. Shape it later.</h1><p class="mt-6 max-w-lg text-lg leading-8 text-white/55">Capture clear voice notes that become organized, searchable writing on every device.</p><div class="mt-8 flex items-center gap-4"><a href="#" class="rounded-full bg-rose-300 px-5 py-3 text-sm font-semibold text-neutral-950">Record your first note</a><span class="text-xs text-white/40">Private by default · No card</span></div></div><div class="rounded-[2rem] bg-[#f5efe8] p-5 text-neutral-950 shadow-2xl shadow-rose-500/10"><div class="flex items-center justify-between"><div><p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Untitled note</p><p id="voiceTime" class="mt-1 font-mono text-2xl">00:00</p></div><span class="flex items-center gap-2 rounded-full bg-white px-3 py-1.5 text-xs text-neutral-500"><span class="h-2 w-2 rounded-full bg-green-500"></span>On-device encryption</span></div><div id="voiceWave" class="my-10 flex h-28 items-center justify-center gap-1.5"></div><div class="flex items-center justify-center gap-4"><button id="voiceRecord" class="flex h-16 w-16 items-center justify-center rounded-full bg-rose-500 shadow-lg shadow-rose-500/25" aria-label="Start recording"><span id="voiceGlyph" class="h-5 w-5 rounded-full bg-white"></span></button><button id="voiceStop" disabled class="rounded-full border border-neutral-300 px-4 py-2 text-xs font-medium disabled:opacity-30">Finish note</button></div><div id="voiceTranscript" class="mt-8 hidden rounded-2xl bg-white p-4"><div class="flex justify-between"><p class="text-xs font-semibold uppercase tracking-wider text-neutral-400">Transcript</p><span class="text-xs text-green-600">Ready</span></div><p class="mt-3 text-sm leading-6 text-neutral-700">The strongest part of the launch story is not speed. It is giving the whole team a calmer way to decide.</p></div></div></div></section>
Create a voice-note product hero with Tailwind CSS. Use an editorial headline, trust note, and CTA beside a tactile recorder card with duration, animated waveform bars, record button, transcript preview, and privacy indicator. Add JavaScript that starts and pauses a simulated recording, advances the timer, animates waveform levels, updates the button state, and reveals a generated transcript after stopping.