Startup Launch Hero

<div class="max-w-7xl mx-auto px-6 py-12 flex flex-col items-center text-center">
        <div class="bg-indigo-50 text-indigo-600 px-4 py-1 rounded-full text-sm font-bold mb-6">COMING SUMMER 2024</div>
        <h1 class="text-5xl md:text-7xl font-bold text-slate-900 mb-6">The future of <span
                class="bg-indigo-600 text-white px-3 rotate-3 inline-block">automation</span> is here.</h1>
        <p class="max-w-2xl text-slate-500 text-lg mb-10">We've spent 2 years crafting the ultimate automation tool for
            agencies. Sign up for early access today.</p>
        <form class="flex w-full max-w-md gap-2">
            <input type="email" placeholder="email@company.com"
                class="flex-1 border border-slate-300 rounded-lg px-4 focus:ring-2 focus:ring-indigo-500 outline-none">
            <button type="submit" class="bg-slate-900 text-white px-6 py-3 rounded-lg font-bold">Notify Me</button>
        </form>
    </div>
    <script>
        document.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('mousedown', function () { this.classList.add('scale-95'); });
            btn.addEventListener('mouseup', function () { this.classList.remove('scale-95'); });
        });
    </script>