Solara Health Analytics Hero Grid

<section class="min-h-screen bg-[#FFF5F0] flex items-center justify-center p-4 md:p-8 font-['Inter',sans-serif] text-[#431407] antialiased">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&amp;family=Inter:wght@300;400&amp;display=swap" rel="stylesheet">

<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 md:gap-6 max-w-[1200px] w-full min-h-[800px]">
        
        <!-- Card 1: Hero -->
        <div class="bg-white rounded-3xl p-6 md:p-10 flex flex-col relative overflow-hidden col-span-1 md:row-span-2 opacity-0 translate-y-4 transition-all duration-1000 ease-out shadow-sm" id="card1">
            <div class="flex items-center gap-1 mb-12">
                <span class="font-['Playfair_Display',serif] text-xl tracking-tight">Solara</span>
                <iconify-icon icon="solar:check-circle-linear" class="text-[#F97316] text-base" stroke-width="1.5"></iconify-icon>
            </div>

            <div class="flex items-center gap-2 mb-6 text-xs text-[#431407]/70">
                <iconify-icon icon="solar:star-linear" class="text-[#F97316] text-sm" stroke-width="1.5"></iconify-icon>
                <span>Thousands of Users</span>
            </div>

            <h1 class="font-['Playfair_Display',serif] text-4xl md:text-5xl tracking-tight font-normal leading-tight mb-8">
                Your Health Journey Just Got Effortless.
            </h1>

            <div class="w-full h-px bg-[#431407]/10 mb-6"></div>

            <p class="text-xs text-[#431407]/80 leading-relaxed mb-8 max-w-xs font-light">
                Skip the waiting room. Experience rapid, at-home biomarker analysis with insights delivered in days.
            </p>

            <div class="flex items-center gap-3 mb-8">
                <img src="https://i.pravatar.cc/100?img=44" alt="User" class="w-8 h-8 rounded-full object-cover">
                <div class="flex flex-col">
                    <span class="text-xs text-[#431407]/60 font-light">Incredibly smooth experience</span>
                    <span class="text-xs text-[#431407]/60 font-light">Highly Recommended</span>
                </div>
            </div>

            <div class="w-full h-px bg-[#431407]/10 mb-10 mt-auto"></div>

            <button class="bg-[#F97316] text-white text-xs font-normal py-3 px-6 rounded-full w-fit hover:bg-[#EA580C] transition-colors shadow-sm">
                Begin My Assessment
            </button>

            <div class="absolute -bottom-12 left-0 w-full flex justify-center pointer-events-none">
                <span class="font-['Playfair_Display',serif] text-9xl tracking-tight leading-none text-[#431407] opacity-5">Solara</span>
            </div>
        </div>

        <!-- Card 2: Bar Chart -->
        <div class="bg-[#FFEDD5] rounded-3xl p-6 md:p-10 flex flex-col relative col-span-1 md:col-span-2 md:row-span-1 opacity-0 translate-y-4 transition-all duration-1000 delay-150 ease-out shadow-sm" id="card2">
            <div class="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-8">
                <div>
                    <div class="flex items-center gap-2 mb-4 text-xs text-[#431407]/70">
                        <iconify-icon icon="solar:star-linear" class="text-[#F97316] text-sm" stroke-width="1.5"></iconify-icon>
                        <span>Top Rated • Verified Reviews</span>
                    </div>
                    <h2 class="font-['Playfair_Display',serif] text-6xl md:text-7xl tracking-tight font-normal mb-2">
                        41<span class="text-5xl">%</span>
                    </h2>
                    <p class="text-xs text-[#431407]/70 font-light">Boost in Daily Energy</p>
                </div>
                
                <div class="flex-1 w-full max-w-md relative pb-6">
                    <!-- Grid Lines -->
                    <div class="absolute inset-0 flex justify-between pointer-events-none">
                        <div class="w-px h-full bg-[#431407]/5"></div>
                        <div class="w-px h-full bg-[#431407]/5"></div>
                        <div class="w-px h-full bg-[#431407]/5"></div>
                        <div class="w-px h-full bg-[#431407]/5"></div>
                    </div>

                    <!-- Bars -->
                    <div class="relative z-10 flex flex-col gap-4 w-full mt-4">
                        <div>
                            <p class="text-xs mb-1 font-light">Basic Checkup</p>
                            <div class="h-6 w-[30%] rounded-r-full" style="background: repeating-linear-gradient(45deg, transparent, transparent 2px, #431407 2px, #431407 3px); opacity: 0.4;"></div>
                        </div>
                        
                        <div>
                            <p class="text-xs mb-1 font-light">Solara Essential</p>
                            <div class="h-6 w-[85%] bg-[#FB923C] rounded-r-full transition-all duration-1000 ease-out" style="width: 0%;" id="bar1"></div>
                        </div>

                        <div>
                            <p class="text-xs mb-1 font-light">Solara Comprehensive</p>
                            <div class="h-6 w-[65%] bg-[#E11D48] rounded-r-full transition-all duration-1000 delay-300 ease-out" style="width: 0%;" id="bar2"></div>
                        </div>
                    </div>

                    <!-- X Axis -->
                    <div class="absolute bottom-0 left-0 w-full flex justify-between text-xs text-[#431407]/50 pt-2 font-light">
                        <span>0</span>
                        <span>10</span>
                        <span>20</span>
                        <span>30</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card 3: Doctor & Squiggle -->
        <div class="bg-white rounded-3xl p-6 md:p-8 flex flex-col relative overflow-hidden col-span-1 md:col-span-1 md:row-span-1 opacity-0 translate-y-4 transition-all duration-1000 delay-300 ease-out shadow-sm" id="card3">
            <h2 class="font-['Playfair_Display',serif] text-2xl md:text-3xl tracking-tight font-normal leading-tight mb-6">
                Specialized Care, Focused Entirely On You
            </h2>

            <div class="flex items-start gap-4 mb-8">
                <img src="https://i.pravatar.cc/100?img=32" alt="Specialist" class="w-10 h-10 rounded-full object-cover">
                <p class="text-xs text-[#431407]/80 leading-relaxed font-light">
                    Receive custom regimens tailored to your body's specific demands.
                </p>
            </div>

            <!-- Animated Squiggle -->
            <svg viewBox="0 0 120 30" class="w-full h-12 mt-auto">
                <path id="squiggle" d="M0,15 Q20,-5 40,15 T80,15 T120,15" fill="none" stroke="#F97316" stroke-width="1.5" stroke-dasharray="200" stroke-dashoffset="200" style="transition: stroke-dashoffset 2s ease-in-out;"></path>
            </svg>
        </div>

        <!-- Card 4: Area Chart -->
        <div class="bg-[#FFE4E6] rounded-3xl p-6 md:p-8 flex flex-col relative overflow-hidden col-span-1 md:col-span-1 md:row-span-1 opacity-0 translate-y-4 transition-all duration-1000 delay-500 ease-out shadow-sm" id="card4">
            <div class="flex items-center gap-1 mb-6 z-20 relative">
                <span class="font-['Playfair_Display',serif] text-xl tracking-tight">Growth</span>
            </div>

            <!-- Area Chart -->
            <div class="absolute bottom-0 left-0 w-full h-[80%] flex flex-col justify-end">
                <!-- Grid Lines -->
                <div class="absolute inset-0 flex justify-between px-4 pointer-events-none z-0">
                    <div class="w-px h-full bg-[#431407]/5 relative"><span class="absolute top-4 -translate-x-1/2 text-xs text-[#431407]/40 font-light">Q1</span></div>
                    <div class="w-px h-full bg-[#431407]/5 relative"><span class="absolute top-4 -translate-x-1/2 text-xs text-[#431407]/40 font-light">Q2</span></div>
                    <div class="w-px h-full bg-[#431407]/5 relative"><span class="absolute top-4 -translate-x-1/2 text-xs text-[#431407]/40 font-light">Q3</span></div>
                    <div class="w-px h-full bg-[#431407]/5 relative"><span class="absolute top-4 -translate-x-1/2 text-xs text-[#431407]/40 font-light">Q4</span></div>
                </div>

                <!-- Mountains (SVG) -->
                <svg viewBox="0 0 300 150" class="w-full h-full absolute bottom-0 left-0 z-10 preserve-3d" preserveAspectRatio="none">
                    <!-- Rose -->
                    <path d="M0,150 L0,110 L40,110 L80,70 L150,150 Z" fill="#FDA4AF" opacity="0.9" style="transform: translateY(20px); opacity: 0; transition: all 1s ease-out 0.5s;" id="mountain1"></path>
                    <!-- Orange -->
                    <path d="M70,150 L150,20 L230,150 Z" fill="#FB923C" style="transform: translateY(20px); opacity: 0; transition: all 1s ease-out 0.7s;" id="mountain2"></path>
                    <!-- Deep Rose -->
                    <path d="M140,150 L200,50 L280,150 Z" fill="#E11D48" style="transform: translateY(20px); opacity: 0; transition: all 1s ease-out 0.9s;" id="mountain3"></path>
                </svg>

                <!-- Stats inside mountains -->
                <div class="absolute bottom-6 w-full flex justify-center gap-12 z-20 text-center pointer-events-none text-white">
                    <div class="flex flex-col opacity-0 transition-opacity duration-1000 delay-1000" id="stat1">
                        <span class="text-sm font-normal">18.2M</span>
                        <span class="text-xs font-light">Active</span>
                    </div>
                    <div class="flex flex-col opacity-0 transition-opacity duration-1000 delay-1000" id="stat2">
                        <span class="text-sm font-normal">5.4M</span>
                        <span class="text-xs font-light">New</span>
                    </div>
                </div>
            </div>
        </div>

    </div>

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script>
        window.addEventListener('DOMContentLoaded', () => {
            setTimeout(() => {
                // Fade in cards
                document.getElementById('card1').style.opacity = '1';
                document.getElementById('card1').style.transform = 'translateY(0)';
                document.getElementById('card2').style.opacity = '1';
                document.getElementById('card2').style.transform = 'translateY(0)';
                document.getElementById('card3').style.opacity = '1';
                document.getElementById('card3').style.transform = 'translateY(0)';
                document.getElementById('card4').style.opacity = '1';
                document.getElementById('card4').style.transform = 'translateY(0)';

                // Animate bars
                document.getElementById('bar1').style.width = '85%';
                document.getElementById('bar2').style.width = '65%';

                // Animate SVG line
                document.getElementById('squiggle').style.strokeDashoffset = '0';

                // Animate mountains
                document.getElementById('mountain1').style.opacity = '0.9';
                document.getElementById('mountain1').style.transform = 'translateY(0)';
                document.getElementById('mountain2').style.opacity = '1';
                document.getElementById('mountain2').style.transform = 'translateY(0)';
                document.getElementById('mountain3').style.opacity = '1';
                document.getElementById('mountain3').style.transform = 'translateY(0)';

                // Show stats
                document.getElementById('stat1').style.opacity = '1';
                document.getElementById('stat2').style.opacity = '1';
            }, 100);
        });
    </script>
</section>