Mobile App Hero

<div class="text-center max-w-3xl px-6 py-12">
        <h2 class="text-4xl md:text-5xl font-bold mb-6 text-slate-900">Your health, in one <span
                class="italic text-emerald-600 underline">simple app</span>.</h2>
        <p class="text-slate-500 mb-10 text-lg">Download the Hub Health app today and track your fitness goals with
            precision.</p>
        <div class="flex justify-center gap-4 mb-16">
            <div class="bg-black text-white px-6 py-3 rounded-lg flex items-center gap-3 cursor-pointer">
                <div class="w-6 h-6 bg-white rounded-full"></div>
                <div class="text-left">
                    <p class="text-[10px] leading-none">Download on</p>
                    <p class="text-lg font-bold leading-none">App Store</p>
                </div>
            </div>
            <div class="bg-black text-white px-6 py-3 rounded-lg flex items-center gap-3 cursor-pointer">
                <div class="w-6 h-6 bg-white rounded-sm"></div>
                <div class="text-left">
                    <p class="text-[10px] leading-none">Get it on</p>
                    <p class="text-lg font-bold leading-none">Google Play</p>
                </div>
            </div>
        </div>
        <div
            class="mx-auto w-[300px] h-[400px] bg-white rounded-t-[40px] border-8 border-slate-900 shadow-2xl relative overflow-hidden">
            <div class="w-24 h-6 bg-slate-900 mx-auto mt-2 rounded-full"></div>
            <div class="p-6 text-left">
                <div class="h-4 w-3/4 bg-slate-100 rounded-full mb-4"></div>
                <div class="grid grid-cols-2 gap-2">
                    <div class="h-20 bg-emerald-50 rounded-xl"></div>
                    <div class="h-20 bg-indigo-50 rounded-xl"></div>
                </div>
            </div>
        </div>
    </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>