You are here: Home SpaceXAI Grok Build 0.1Health and Fitness

SpaceXAI Grok Build 0.1 – Health and Fitness

via xAI · Generated Nov 12, 2026 09:43 AM UTC

AIMAC Debt 21.53
Cost $0.04
Total Violations 16
HTML Size 78 KB
Em Dashes 0

Screenshot

View SpaceXAI Grok Build 0.1 Health and Fitness page

View Live Page

Accessibility Issues Found

3 Critical 13 Serious

color-contrast serious 10 instances

Elements must meet minimum color contrast ratio thresholds

Example HTML
<div class="font-semibold text-sm">Stanford Health</div>
label critical 1 instance

Form elements must have labels

Example HTML
<input id="age" type="number" value="34" class="w-full px-4 py-3 border border-slate-300 focus:border-teal-700 outline-none transition-colors round...
link-name serious 3 instances

Links must have discernible text

Example HTML
<a href="#" class="text-slate-400 hover:text-white"><i class="fa-brands fa-twitter text-lg"></i></a>
select-name critical 2 instances

Select element must have an accessible name

Example HTML
<select id="fitness-level" class="w-full px-4 py-3 border border-slate-300 focus:border-teal-700 outline-none transition-colors rounded-2xl text-sm">

Artifacts

View Generated HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vitalora • Precision Health &amp; Fitness</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&amp;family=Playfair+Display:wght@700&amp;display=swap');
        
        :root {
            --primary: #0f766e;
        }
        
        .tail-container {
            max-width: 1280px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .section-header {
            font-family: 'Playfair Display', Georgia, serif;
            line-height: 1.1;
        }

        .nav-link {
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .nav-link:hover {
            color: #0f766e;
            transform: translateY(-1px);
        }

        .health-card {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        }
        
        .health-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        }

        .provider-card {
            transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        }

        .provider-card:hover {
            transform: translateY(-4px);
        }

        .modern-shadow {
            box-shadow: 0 10px 15px -3px rgb(15 118 110 / 0.1), 0 4px 6px -4px rgb(15 118 110 / 0.1);
        }

        .wellness-gradient {
            background: linear-gradient(145deg, #0f766e, #134e4b);
        }

        .nav-active {
            color: #0f766e;
            font-weight: 600;
        }

        .stat-number {
            font-variant-numeric: tabular-nums;
        }

        .feature-icon {
            transition: transform 0.3s ease;
        }

        .health-card:hover .feature-icon {
            transform: scale(1.05);
        }

        .testimonial-card {
            transition: all 0.3s ease;
        }

        .plan-day {
            transition: all 0.2s ease;
        }

        .metric-value {
            font-family: 'Inter', system_ui, sans-serif;
        }
    </style>
</head>
<body class="bg-slate-50 font-sans text-slate-800">
    <!-- HEADER -->
    <header class="bg-white border-b border-slate-200 sticky top-0 z-50">
        <div class="max-w-screen-2xl mx-auto">
            <div class="px-8 py-5 flex items-center justify-between">
                <!-- Logo -->
                <div class="flex items-center gap-x-3">
                    <img src="https://placehold.co/140x52/0f766e/ffffff?text=Vitalora&amp;font=playfair+display" 
                         alt="Vitalora Logo" 
                         class="h-11 w-auto rounded-lg shadow-sm">
                    <div>
                        <span class="text-3xl font-bold tracking-tighter text-slate-900">Vitalora</span>
                    </div>
                </div>

                <!-- Desktop Navigation -->
                <nav class="hidden lg:flex items-center gap-x-8 text-sm font-medium">
                    <a href="#programs" class="nav-link px-3 py-2 text-slate-600 hover:text-slate-900">Programs</a>
                    <a href="#providers" class="nav-link px-3 py-2 text-slate-600 hover:text-slate-900">Find Provider</a>
                    <a href="#mental-health" class="nav-link px-3 py-2 text-slate-600 hover:text-slate-900">Mental Health</a>
                    <a href="#insights" class="nav-link px-3 py-2 text-slate-600 hover:text-slate-900">Resources</a>
                    <a href="#planner" class="nav-link px-3 py-2 text-slate-600 hover:text-slate-900">Wellness Planner</a>
                    <a href="#contact" class="nav-link px-3 py-2 text-slate-600 hover:text-slate-900">Contact</a>
                </nav>

                <!-- Header Actions -->
                <div class="flex items-center gap-x-3">
                    <a href="#providers" 
                       class="hidden md:flex items-center gap-x-2 px-5 py-2.5 text-sm font-semibold border border-slate-300 hover:bg-slate-50 rounded-full transition-colors">
                        <i class="fa-solid fa-search text-xs"></i>
                        <span>Find Provider</span>
                    </a>
                    
                    <button onclick="showJoinModal()"
                            class="px-6 py-2.5 bg-teal-700 hover:bg-teal-800 transition-all text-white text-sm font-semibold rounded-full flex items-center gap-x-2 shadow-sm">
                        <span>Get Started</span>
                    </button>
                    
                    <!-- Mobile Menu -->
                    <button id="mobile-menu-btn" 
                            class="lg:hidden w-10 h-10 flex items-center justify-center text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-full transition-colors"
                            onclick="toggleMobileMenu()">
                        <i class="fa-solid fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Mobile Menu -->
        <div id="mobile-menu" class="hidden lg:hidden border-t bg-white px-6 py-4">
            <div class="flex flex-col gap-y-1 text-sm font-medium">
                <a href="#programs" class="px-4 py-3 hover:bg-slate-50 rounded-xl text-slate-700">Programs</a>
                <a href="#providers" class="px-4 py-3 hover:bg-slate-50 rounded-xl text-slate-700">Find Provider</a>
                <a href="#mental-health" class="px-4 py-3 hover:bg-slate-50 rounded-xl text-slate-700">Mental Health</a>
                <a href="#insights" class="px-4 py-3 hover:bg-slate-50 rounded-xl text-slate-700">Resources</a>
                <a href="#planner" class="px-4 py-3 hover:bg-slate-50 rounded-xl text-slate-700">Wellness Planner</a>
                <a href="#contact" class="px-4 py-3 hover:bg-slate-50 rounded-xl text-slate-700">Contact</a>
                
                <div class="pt-2 border-t mt-2">
                    <button onclick="showJoinModal(); document.getElementById('mobile-menu').classList.add('hidden')" 
                            class="w-full px-4 py-3 bg-teal-700 text-white text-sm font-semibold rounded-2xl flex items-center justify-center gap-x-2">
                        Get Started
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- HERO SECTION -->
    <section class="max-w-screen-2xl mx-auto">
        <div class="grid grid-cols-1 lg:grid-cols-12 items-center">
            <!-- Hero Content -->
            <div class="lg:col-span-7 px-8 md:px-12 py-16 lg:py-20">
                <div class="max-w-xl">
                    <div class="inline-flex items-center gap-x-2 bg-teal-100 text-teal-800 px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider mb-6">
                        <div class="w-2 h-2 bg-teal-700 rounded-full animate-pulse"></div>
                        <span>2024 TOP RATED WELLNESS PLATFORM</span>
                    </div>
                    
                    <h1 class="text-6xl lg:text-6xl xl:text-7xl font-bold tracking-tighter leading-none text-slate-900 mb-5">
                        Precision care.<br>
                        <span class="text-teal-700">Real results.</span>
                    </h1>
                    
                    <p class="text-xl text-slate-600 max-w-md mb-8">
                        Vitalora delivers evidence-based telehealth, personalized fitness programs, 
                        and integrated wellness support designed for lasting transformation.
                    </p>
                    
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="#providers" 
                           class="inline-flex items-center justify-center gap-x-3 bg-slate-900 hover:bg-black transition-colors text-white px-8 py-4 rounded-2xl font-semibold text-base shadow-lg">
                            <span>Find a Provider</span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </a>
                        
                        <button onclick="document.getElementById('planner').scrollIntoView({ behavior: 'smooth' })" 
                                class="inline-flex items-center justify-center gap-x-3 border border-slate-300 hover:bg-white px-8 py-4 rounded-2xl font-semibold text-base transition-colors">
                            <span>Try Wellness Planner</span>
                        </button>
                    </div>
                    
                    <div class="flex items-center gap-x-6 mt-8">
                        <div class="flex -space-x-2">
                            <img src="https://i.pravatar.cc/28?u=1" class="w-7 h-7 rounded-full ring-2 ring-white" alt="">
                            <img src="https://i.pravatar.cc/28?u=2" class="w-7 h-7 rounded-full ring-2 ring-white" alt="">
                            <img src="https://i.pravatar.cc/28?u=3" class="w-7 h-7 rounded-full ring-2 ring-white" alt="">
                        </div>
                        <div class="text-sm">
                            <span class="font-semibold text-slate-900">14,872</span> 
                            <span class="text-slate-600">members transformed</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Hero Image -->
            <div class="lg:col-span-5 relative">
                <div class="aspect-[4/3] lg:aspect-auto lg:h-[620px] bg-slate-200 overflow-hidden">
                    <img src="https://picsum.photos/id/1018/1200/1200" 
                         alt="Woman doing yoga in a modern wellness studio with natural light" 
                         class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-br from-slate-900/10 to-transparent"></div>
                </div>
                
                <!-- Floating trust badge -->
                <div class="absolute -bottom-3 -left-3 bg-white shadow-xl border border-slate-100 rounded-2xl p-4 max-w-[190px]">
                    <div class="flex items-center gap-x-3">
                        <div>
                            <div class="flex text-amber-400 text-sm">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star-half-stroke"></i>
                            </div>
                            <div class="text-xs font-semibold text-slate-600 mt-0.5">4.9/5 from 9,428 reviews</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- TRUST BAR -->
    <div class="max-w-screen-2xl mx-auto border-b border-slate-200 bg-white">
        <div class="px-8 py-5 flex flex-wrap items-center justify-center gap-x-10 gap-y-4">
            <div class="text-xs uppercase tracking-[1px] text-slate-500 font-semibold px-1">Trusted by leading organizations</div>
            <div class="flex flex-wrap items-center gap-x-8 gap-y-3 text-slate-400">
                <div class="font-semibold text-sm">Stanford Health</div>
                <div class="font-semibold text-sm">Nike Training</div>
                <div class="font-semibold text-sm">Mayo Clinic</div>
                <div class="font-semibold text-sm">Peloton</div>
            </div>
        </div>
    </div>

    <!-- PROGRAMS / SERVICES SECTION -->
    <section id="programs" class="max-w-screen-2xl mx-auto px-8 pt-16 pb-12">
        <div class="max-w-2xl mb-9">
            <span class="text-teal-700 font-semibold tracking-wider text-sm">COMPREHENSIVE CARE</span>
            <h2 class="section-header text-4xl font-bold tracking-tight text-slate-900 mt-2">Integrated programs for every stage of health.</h2>
            <p class="mt-3 text-lg text-slate-600">From chronic care management to peak athletic performance, our programs combine clinical expertise with lifestyle science.</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Program 1 -->
            <div class="health-card bg-white border border-slate-200 p-6 rounded-3xl">
                <div class="flex items-center justify-between mb-6">
                    <div class="w-12 h-12 bg-teal-100 text-teal-700 flex items-center justify-center rounded-2xl">
                        <i class="fa-solid fa-video text-2xl"></i>
                    </div>
                    <span class="text-xs px-3 py-1 font-medium bg-teal-100 text-teal-800 rounded-full">Telehealth</span>
                </div>
                <h3 class="font-semibold text-2xl tracking-tight">Telehealth Consultations</h3>
                <p class="text-slate-600 mt-3 text-[15px] leading-relaxed">Connect instantly with board-certified physicians for preventive care, chronic condition management, and urgent health needs. Our platform supports real-time vital signs monitoring and secure electronic health records.</p>
                <div class="mt-6 flex items-center justify-between">
                    <div class="text-xs">
                        <span class="font-semibold text-teal-700">98k+</span> 
                        <span class="text-slate-500">consults this year</span>
                    </div>
                    <button onclick="document.getElementById('providers').scrollIntoView({ behavior: 'smooth' })" 
                            class="text-teal-700 hover:text-teal-800 font-semibold text-sm flex items-center gap-x-1.5 transition-colors">
                        Book now <i class="fa-solid fa-arrow-right text-xs"></i>
                    </button>
                </div>
            </div>
            
            <!-- Program 2 -->
            <div class="health-card bg-white border border-slate-200 p-6 rounded-3xl">
                <div class="flex items-center justify-between mb-6">
                    <div class="w-12 h-12 bg-emerald-100 text-emerald-700 flex items-center justify-center rounded-2xl">
                        <i class="fa-solid fa-dumbbell text-2xl"></i>
                    </div>
                    <span class="text-xs px-3 py-1 font-medium bg-emerald-100 text-emerald-800 rounded-full">Fitness</span>
                </div>
                <h3 class="font-semibold text-2xl tracking-tight">Personalized Fitness Plans</h3>
                <p class="text-slate-600 mt-3 text-[15px] leading-relaxed">AI-powered fitness programs built around your unique physiology, goals, and medical history. Includes progressive overload training, recovery protocols, and integration with wearable devices for continuous vital signs tracking.</p>
                <div class="mt-6 flex items-center justify-between">
                    <div class="text-xs">
                        <span class="font-semibold text-emerald-700">32k</span> 
                        <span class="text-slate-500">active plans</span>
                    </div>
                    <button onclick="document.getElementById('planner').scrollIntoView({ behavior: 'smooth' })" 
                            class="text-emerald-700 hover:text-emerald-800 font-semibold text-sm flex items-center gap-x-1.5 transition-colors">
                        Start planning <i class="fa-solid fa-arrow-right text-xs"></i>
                    </button>
                </div>
            </div>
            
            <!-- Program 3 -->
            <div class="health-card bg-white border border-slate-200 p-6 rounded-3xl">
                <div class="flex items-center justify-between mb-6">
                    <div class="w-12 h-12 bg-amber-100 text-amber-700 flex items-center justify-center rounded-2xl">
                        <i class="fa-solid fa-apple-alt text-2xl"></i>
                    </div>
                    <span class="text-xs px-3 py-1 font-medium bg-amber-100 text-amber-800 rounded-full">Nutrition</span>
                </div>
                <h3 class="font-semibold text-2xl tracking-tight">Nutrition &amp; Metabolic Coaching</h3>
                <p class="text-slate-600 mt-3 text-[15px] leading-relaxed">Registered dietitians create macro and micronutrient plans tailored to your biomarkers. Includes gut health analysis, anti-inflammatory protocols, and continuous glucose monitoring integration for metabolic optimization.</p>
                <div class="mt-6 flex items-center justify-between">
                    <div class="text-xs">
                        <span class="font-semibold text-amber-700">19k+</span> 
                        <span class="text-slate-500">coaching sessions</span>
                    </div>
                    <button onclick="document.getElementById('planner').scrollIntoView({ behavior: 'smooth' })" 
                            class="text-amber-700 hover:text-amber-800 font-semibold text-sm flex items-center gap-x-1.5 transition-colors">
                        Get started <i class="fa-solid fa-arrow-right text-xs"></i>
                    </button>
                </div>
            </div>
            
            <!-- Program 4 -->
            <div class="health-card bg-white border border-slate-200 p-6 rounded-3xl">
                <div class="flex items-center justify-between mb-6">
                    <div class="w-12 h-12 bg-violet-100 text-violet-700 flex items-center justify-center rounded-2xl">
                        <i class="fa-solid fa-brain text-2xl"></i>
                    </div>
                    <span class="text-xs px-3 py-1 font-medium bg-violet-100 text-violet-800 rounded-full">Mental</span>
                </div>
                <h3 class="font-semibold text-2xl tracking-tight">Mental Health Integration</h3>
                <p class="text-slate-600 mt-3 text-[15px] leading-relaxed">Licensed therapists and psychiatrists deliver cognitive behavioral therapy, stress resilience training, and mindfulness programs. All services are coordinated with your physical health team for truly holistic care.</p>
                <div class="mt-6 flex items-center justify-between">
                    <div class="text-xs">
                        <span class="font-semibold text-violet-700">47k</span> 
                        <span class="text-slate-500">sessions completed</span>
                    </div>
                    <button onclick="document.getElementById('mental-health').scrollIntoView({ behavior: 'smooth' })" 
                            class="text-violet-700 hover:text-violet-800 font-semibold text-sm flex items-center gap-x-1.5 transition-colors">
                        Learn more <i class="fa-solid fa-arrow-right text-xs"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- PROVIDERS SECTION -->
    <section id="providers" class="max-w-screen-2xl mx-auto px-8 py-12 bg-white">
        <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between mb-8">
            <div>
                <span class="uppercase text-teal-700 font-semibold tracking-[1px] text-sm">EXPERT NETWORK</span>
                <h2 class="section-header text-4xl font-bold tracking-tight text-slate-900 mt-1">Find the right provider for you.</h2>
            </div>
            <div class="mt-4 lg:mt-0">
                <button onclick="filterProviders()" 
                        class="flex items-center gap-x-2 text-sm px-5 py-2.5 border border-slate-300 hover:bg-slate-50 rounded-2xl font-medium transition-colors">
                    <i class="fa-solid fa-filter"></i> 
                    <span>Filter by specialty</span>
                </button>
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Provider 1 -->
            <div class="provider-card bg-white border border-slate-200 rounded-3xl overflow-hidden shadow-sm">
                <div class="p-5">
                    <div class="flex items-center gap-x-4">
                        <img src="https://i.pravatar.cc/64?u=elena" alt="Dr. Elena Vargas" class="w-14 h-14 rounded-2xl ring-2 ring-offset-2 ring-teal-100 object-cover">
                        <div>
                            <div class="font-semibold text-lg">Dr. Elena Vargas, MD</div>
                            <div class="text-sm text-teal-700">Internal Medicine • 15 yrs</div>
                            <div class="text-xs mt-1 text-slate-500">Board-certified in Preventive Medicine</div>
                        </div>
                    </div>
                    
                    <div class="mt-5 text-sm">
                        <p class="text-slate-600">Specializes in chronic care management, metabolic health, and cardiovascular prevention. Leads our telehealth chronic care program.</p>
                    </div>
                    
                    <div class="mt-4 flex items-center gap-x-2">
                        <div class="flex items-center text-xs">
                            <span class="font-medium">4.97</span>
                            <span class="text-slate-400 ml-1">(1.2k reviews)</span>
                        </div>
                    </div>
                </div>
                
                <div class="bg-slate-50 px-5 py-4 flex items-center justify-between">
                    <div class="text-xs">
                        <span class="font-medium">Next available:</span><br>
                        <span class="text-teal-700 font-semibold">Today at 3:15pm</span>
                    </div>
                    <button onclick="bookAppointment('Dr. Elena Vargas')" 
                            class="px-4 py-2 text-xs font-semibold bg-teal-700 hover:bg-teal-800 transition-colors text-white rounded-2xl flex items-center gap-x-2">
                        <span>Book</span>
                    </button>
                </div>
            </div>
            
            <!-- Provider 2 -->
            <div class="provider-card bg-white border border-slate-200 rounded-3xl overflow-hidden shadow-sm">
                <div class="p-5">
                    <div class="flex items-center gap-x-4">
                        <img src="https://i.pravatar.cc/64?u=marcus" alt="Marcus Chen" class="w-14 h-14 rounded-2xl ring-2 ring-offset-2 ring-emerald-100 object-cover">
                        <div>
                            <div class="font-semibold text-lg">Marcus Chen, CPT</div>
                            <div class="text-sm text-emerald-700">Exercise Physiology • 12 yrs</div>
                            <div class="text-xs mt-1 text-slate-500">Certified Strength &amp; Conditioning Specialist</div>
                        </div>
                    </div>
                    
                    <div class="mt-5 text-sm">
                        <p class="text-slate-600">Develops performance-focused training for athletes and high-functioning professionals. Expert in injury prevention and recovery optimization.</p>
                    </div>
                    
                    <div class="mt-4 flex items-center gap-x-2">
                        <div class="flex items-center text-xs">
                            <span class="font-medium">4.89</span>
                            <span class="text-slate-400 ml-1">(943 reviews)</span>
                        </div>
                    </div>
                </div>
                
                <div class="bg-slate-50 px-5 py-4 flex items-center justify-between">
                    <div class="text-xs">
                        <span class="font-medium">Next available:</span><br>
                        <span class="text-emerald-700 font-semibold">Tomorrow at 9:00am</span>
                    </div>
                    <button onclick="bookAppointment('Marcus Chen')" 
                            class="px-4 py-2 text-xs font-semibold bg-emerald-700 hover:bg-emerald-800 transition-colors text-white rounded-2xl flex items-center gap-x-2">
                        <span>Book</span>
                    </button>
                </div>
            </div>
            
            <!-- Provider 3 -->
            <div class="provider-card bg-white border border-slate-200 rounded-3xl overflow-hidden shadow-sm">
                <div class="p-5">
                    <div class="flex items-center gap-x-4">
                        <img src="https://i.pravatar.cc/64?u=priya" alt="Dr. Priya Patel" class="w-14 h-14 rounded-2xl ring-2 ring-offset-2 ring-amber-100 object-cover">
                        <div>
                            <div class="font-semibold text-lg">Dr. Priya Patel, RD, PhD</div>
                            <div class="text-sm text-amber-700">Clinical Nutrition • 10 yrs</div>
                            <div class="text-xs mt-1 text-slate-500">Specialist in Metabolic &amp; Gut Health</div>
                        </div>
                    </div>
                    
                    <div class="mt-5 text-sm">
                        <p class="text-slate-600">Leads our nutrition coaching program using advanced biomarker data. Focuses on personalized plans for weight management and hormonal balance.</p>
                    </div>
                    
                    <div class="mt-4 flex items-center gap-x-2">
                        <div class="flex items-center text-xs">
                            <span class="font-medium">4.95</span>
                            <span class="text-slate-400 ml-1">(684 reviews)</span>
                        </div>
                    </div>
                </div>
                
                <div class="bg-slate-50 px-5 py-4 flex items-center justify-between">
                    <div class="text-xs">
                        <span class="font-medium">Next available:</span><br>
                        <span class="text-amber-700 font-semibold">Feb 6 at 11:00am</span>
                    </div>
                    <button onclick="bookAppointment('Dr. Priya Patel')" 
                            class="px-4 py-2 text-xs font-semibold bg-amber-700 hover:bg-amber-800 transition-colors text-white rounded-2xl flex items-center gap-x-2">
                        <span>Book</span>
                    </button>
                </div>
            </div>
            
            <!-- Provider 4 -->
            <div class="provider-card bg-white border border-slate-200 rounded-3xl overflow-hidden shadow-sm">
                <div class="p-5">
                    <div class="flex items-center gap-x-4">
                        <img src="https://i.pravatar.cc/64?u=jamal" alt="Dr. Jamal Washington" class="w-14 h-14 rounded-2xl ring-2 ring-offset-2 ring-violet-100 object-cover">
                        <div>
                            <div class="font-semibold text-lg">Dr. Jamal Washington, PsyD</div>
                            <div class="text-sm text-violet-700">Clinical Psychology • 14 yrs</div>
                            <div class="text-xs mt-1 text-slate-500">Integrative Behavioral Health</div>
                        </div>
                    </div>
                    
                    <div class="mt-5 text-sm">
                        <p class="text-slate-600">Specializes in stress-related disorders and performance psychology. Integrates physical activity prescriptions with evidence-based psychotherapy.</p>
                    </div>
                    
                    <div class="mt-4 flex items-center gap-x-2">
                        <div class="flex items-center text-xs">
                            <span class="font-medium">4.91</span>
                            <span class="text-slate-400 ml-1">(1.1k reviews)</span>
                        </div>
                    </div>
                </div>
                
                <div class="bg-slate-50 px-5 py-4 flex items-center justify-between">
                    <div class="text-xs">
                        <span class="font-medium">Next available:</span><br>
                        <span class="text-violet-700 font-semibold">Today at 4:45pm</span>
                    </div>
                    <button onclick="bookAppointment('Dr. Jamal Washington')" 
                            class="px-4 py-2 text-xs font-semibold bg-violet-700 hover:bg-violet-800 transition-colors text-white rounded-2xl flex items-center gap-x-2">
                        <span>Book</span>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="flex justify-center mt-8">
            <button onclick="document.getElementById('providers').scrollIntoView({ behavior: 'smooth' }); alert('In a full implementation this would open a full searchable directory with filters for location, availability, and insurance.')" 
                    class="px-5 py-3 flex items-center text-sm font-medium text-teal-700 hover:text-teal-800">
                Browse full provider directory <i class="fa-solid fa-chevron-right ml-2 text-xs"></i>
            </button>
        </div>
    </section>

    <!-- MENTAL HEALTH SECTION -->
    <section id="mental-health" class="max-w-screen-2xl mx-auto px-8 py-14 bg-slate-100">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-x-8 gap-y-8 items-center">
            <div class="lg:col-span-5">
                <div class="max-w-md">
                    <span class="uppercase font-semibold tracking-wider text-sm text-violet-700">HOLISTIC APPROACH</span>
                    <h2 class="section-header text-4xl font-bold tracking-tight mt-2">Mental health is physical health.</h2>
                    <p class="mt-4 text-slate-600">Our integrated care model recognizes the deep connection between mind and body. Every patient receives coordinated support from both medical and behavioral health specialists.</p>
                    
                    <div class="mt-7 space-y-4">
                        <div class="flex items-start gap-x-3">
                            <div class="w-5 h-5 mt-0.5 flex-shrink-0 bg-violet-200 text-violet-700 rounded flex items-center justify-center">
                                <i class="fa-solid fa-check text-xs"></i>
                            </div>
                            <div class="text-sm">
                                <span class="font-semibold">Telehealth therapy sessions</span> available same-day or within 24 hours
                            </div>
                        </div>
                        <div class="flex items-start gap-x-3">
                            <div class="w-5 h-5 mt-0.5 flex-shrink-0 bg-violet-200 text-violet-700 rounded flex items-center justify-center">
                                <i class="fa-solid fa-check text-xs"></i>
                            </div>
                            <div class="text-sm">
                                <span class="font-semibold">Mind-body programs</span> that combine CBT with movement therapy
                            </div>
                        </div>
                        <div class="flex items-start gap-x-3">
                            <div class="w-5 h-5 mt-0.5 flex-shrink-0 bg-violet-200 text-violet-700 rounded flex items-center justify-center">
                                <i class="fa-solid fa-check text-xs"></i>
                            </div>
                            <div class="text-sm">
                                <span class="font-semibold">Sleep and stress optimization</span> using wearable data insights
                            </div>
                        </div>
                    </div>
                    
                    <button onclick="bookAppointment('Mental Health Team')" 
                            class="mt-7 px-7 py-3.5 text-sm font-semibold bg-violet-700 hover:bg-violet-800 transition-colors text-white rounded-2xl flex items-center gap-x-2">
                        <span>Schedule Mental Health Consultation</span>
                    </button>
                </div>
            </div>
            
            <div class="lg:col-span-7">
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div class="bg-white p-5 rounded-3xl border border-slate-200">
                        <div class="font-semibold">Mindful Movement</div>
                        <p class="mt-2 text-xs text-slate-600 leading-relaxed">Guided yoga and breathwork sessions designed to lower cortisol while improving physical mobility.</p>
                        <div class="mt-4 text-xs flex items-center text-violet-700">
                            <span class="font-medium">2,384</span> <span class="ml-1.5 text-slate-400">attended this month</span>
                        </div>
                    </div>
                    <div class="bg-white p-5 rounded-3xl border border-slate-200">
                        <div class="font-semibold">Therapy Integration</div>
                        <p class="mt-2 text-xs text-slate-600 leading-relaxed">Licensed clinicians work with your primary provider to address anxiety, depression, and burnout through lifestyle prescriptions.</p>
                        <div class="mt-4 text-xs flex items-center text-violet-700">
                            <span class="font-medium">91%</span> <span class="ml-1.5 text-slate-400">report improvement</span>
                        </div>
                    </div>
                    <div class="bg-white p-5 rounded-3xl border border-slate-200">
                        <div class="font-semibold">Crisis Support</div>
                        <p class="mt-2 text-xs text-slate-600 leading-relaxed">24/7 access to crisis counselors and rapid referral to in-person psychiatric care when needed.</p>
                        <div class="mt-4 text-xs flex items-center text-violet-700">
                            <span class="font-medium">Average response:</span> <span class="ml-1.5 font-semibold">8 min</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- INTERACTIVE WELLNESS PLANNER -->
    <section id="planner" class="max-w-screen-2xl mx-auto px-8 py-14">
        <div class="max-w-3xl mx-auto text-center mb-8">
            <span class="text-emerald-700 font-semibold tracking-wider text-sm">INTERACTIVE TOOL</span>
            <h2 class="section-header text-4xl font-bold tracking-tight text-slate-900 mt-1">Build your personalized wellness plan</h2>
            <p class="mt-3 text-lg text-slate-600">Answer a few quick questions to generate a customized 7-day fitness, nutrition, and recovery plan tailored to your goals.</p>
        </div>
        
        <div class="max-w-3xl mx-auto bg-white border border-slate-200 rounded-3xl p-7 md:p-8 shadow-sm">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Form inputs -->
                <div class="space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1.5">Age</label>
                        <input id="age" type="number" value="34" class="w-full px-4 py-3 border border-slate-300 focus:border-teal-700 outline-none transition-colors rounded-2xl text-sm">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1.5">Fitness Level</label>
                        <select id="fitness-level" class="w-full px-4 py-3 border border-slate-300 focus:border-teal-700 outline-none transition-colors rounded-2xl text-sm">
                            <option value="beginner">Beginner</option>
                            <option value="intermediate" selected>Intermediate</option>
                            <option value="advanced">Advanced</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1.5">Primary Goal</label>
                        <select id="primary-goal" class="w-full px-4 py-3 border border-slate-300 focus:border-teal-700 outline-none transition-colors rounded-2xl text-sm">
                            <option value="weight-loss">Weight loss / Fat loss</option>
                            <option value="muscle-gain">Build muscle &amp; strength</option>
                            <option value="endurance">Improve endurance</option>
                            <option value="stress-relief" selected>Stress relief &amp; recovery</option>
                            <option value="general">General wellness &amp; energy</option>
                        </select>
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Focus Areas (select all that apply)</label>
                    <div class="grid grid-cols-2 gap-2">
                        <label class="flex items-center gap-x-2 px-3 py-2 border border-slate-200 hover:bg-slate-50 transition-colors rounded-2xl text-sm cursor-pointer">
                            <input type="checkbox" id="focus1" checked class="accent-teal-700">
                            <span>Weight management</span>
                        </label>
                        <label class="flex items-center gap-x-2 px-3 py-2 border border-slate-200 hover:bg-slate-50 transition-colors rounded-2xl text-sm cursor-pointer">
                            <input type="checkbox" id="focus2" class="accent-teal-700">
                            <span>Strength building</span>
                        </label>
                        <label class="flex items-center gap-x-2 px-3 py-2 border border-slate-200 hover:bg-slate-50 transition-colors rounded-2xl text-sm cursor-pointer">
                            <input type="checkbox" id="focus3" checked class="accent-teal-700">
                            <span>Cardio endurance</span>
                        </label>
                        <label class="flex items-center gap-x-2 px-3 py-2 border border-slate-200 hover:bg-slate-50 transition-colors rounded-2xl text-sm cursor-pointer">
                            <input type="checkbox" id="focus4" class="accent-teal-700">
                            <span>Flexibility &amp; mobility</span>
                        </label>
                        <label class="flex items-center gap-x-2 px-3 py-2 border border-slate-200 hover:bg-slate-50 transition-colors rounded-2xl text-sm cursor-pointer">
                            <input type="checkbox" id="focus5" checked class="accent-teal-700">
                            <span>Stress reduction</span>
                        </label>
                    </div>
                </div>
            </div>
            
            <div class="mt-7">
                <button onclick="generateWellnessPlan()" 
                        class="w-full flex items-center justify-center bg-emerald-700 hover:bg-emerald-800 transition-all text-white py-[15px] rounded-2xl font-semibold text-base shadow-sm">
                    <span>Generate My 7-Day Wellness Plan</span>
                </button>
            </div>
            
            <!-- Results area -->
            <div id="plan-result" class="hidden mt-7 pt-6 border-t">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <span class="font-semibold text-lg">Your Personalized Plan</span>
                    </div>
                    <button onclick="downloadPlan()" class="text-xs flex items-center gap-x-1.5 px-3 py-1.5 bg-slate-100 hover:bg-slate-200 transition-colors rounded-xl text-slate-700 font-medium">
                        <i class="fa-solid fa-download text-xs"></i> 
                        <span>Save PDF</span>
                    </button>
                </div>
                
                <div id="plan-content" class="space-y-3 text-sm">
                    <!-- Populated by JS -->
                </div>
                
                <div class="mt-5 flex flex-wrap gap-2">
                    <button onclick="regeneratePlan()" class="px-4 py-2 text-xs font-semibold bg-white border border-slate-300 text-slate-700 rounded-2xl hover:bg-slate-50 transition-colors">Regenerate plan</button>
                    <button onclick="document.getElementById('providers').scrollIntoView({ behavior: 'smooth' })" class="px-4 py-2 text-xs font-semibold bg-teal-700 text-white rounded-2xl hover:bg-teal-800 transition-colors">Book follow-up with coach</button>
                </div>
            </div>
        </div>
    </section>

    <!-- TESTIMONIALS -->
    <section class="max-w-screen-2xl mx-auto px-8 py-12 bg-white">
        <div class="max-w-2xl mb-8">
            <span class="text-teal-700 font-semibold tracking-wider text-sm">REAL RESULTS</span>
            <h2 class="section-header text-4xl font-bold tracking-tight">Members are seeing real, measurable progress.</h2>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Testimonial 1 -->
            <div class="testimonial-card border border-slate-200 p-6 rounded-3xl bg-white">
                <div class="flex gap-x-1 text-amber-400 mb-3">
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                </div>
                <blockquote class="text-slate-700 text-[15px] leading-relaxed">
                    "The combination of telehealth check-ins and the personalized fitness plan completely changed my relationship with exercise. I went from chronic back pain to running a half marathon in 7 months."
                </blockquote>
                <div class="flex items-center gap-x-3 mt-6">
                    <img src="https://i.pravatar.cc/36?u=sarah" alt="Sarah Patel" class="w-9 h-9 rounded-full">
                    <div>
                        <div class="font-semibold">Sarah Patel</div>
                        <div class="text-xs text-slate-500">Marketing Director • Lost 38 lbs</div>
                    </div>
                </div>
            </div>
            
            <!-- Testimonial 2 -->
            <div class="testimonial-card border border-slate-200 p-6 rounded-3xl bg-white">
                <div class="flex gap-x-1 text-amber-400 mb-3">
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star-half-stroke"></i>
                </div>
                <blockquote class="text-slate-700 text-[15px] leading-relaxed">
                    "My mental health coach and nutritionist worked together to help me manage my anxiety and improve my energy. The data from my wearable device was used to adjust my plan weekly. Truly life-changing."
                </blockquote>
                <div class="flex items-center gap-x-3 mt-6">
                    <img src="https://i.pravatar.cc/36?u=david" alt="David Kim" class="w-9 h-9 rounded-full">
                    <div>
                        <div class="font-semibold">David Kim</div>
                        <div class="text-xs text-slate-500">Software Engineer • 8 months with Vitalora</div>
                    </div>
                </div>
            </div>
            
            <!-- Testimonial 3 -->
            <div class="testimonial-card border border-slate-200 p-6 rounded-3xl bg-white">
                <div class="flex gap-x-1 text-amber-400 mb-3">
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                </div>
                <blockquote class="text-slate-700 text-[15px] leading-relaxed">
                    "As someone managing Type 2 diabetes, the telehealth program gave me constant access to my care team. My A1C dropped from 8.4 to 5.9 in 5 months. The support is unmatched."
                </blockquote>
                <div class="flex items-center gap-x-3 mt-6">
                    <img src="https://i.pravatar.cc/36?u=amara" alt="Amara Thompson" class="w-9 h-9 rounded-full">
                    <div>
                        <div class="font-semibold">Amara Thompson</div>
                        <div class="text-xs text-slate-500">Teacher • Chronic care member</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- INSIGHTS / RESOURCES -->
    <section id="insights" class="max-w-screen-2xl mx-auto px-8 py-12">
        <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-7">
            <div>
                <span class="text-teal-700 font-semibold tracking-wider text-sm">EXPERT INSIGHTS</span>
                <h2 class="section-header text-4xl font-bold tracking-tight">Latest resources from our team.</h2>
            </div>
            <a href="#" class="mt-3 md:mt-0 text-sm font-semibold text-teal-700 flex items-center gap-x-1 hover:text-teal-800">View all articles <i class="fa-solid fa-arrow-right text-xs ml-1"></i></a>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Insight 1 -->
            <div class="group bg-white border border-slate-200 rounded-3xl overflow-hidden hover:shadow-md transition-all">
                <img src="https://picsum.photos/id/1005/600/260" alt="Doctor reviewing patient data on tablet" class="w-full h-44 object-cover group-hover:scale-[1.03] transition-transform">
                <div class="p-5">
                    <div class="flex items-center text-xs">
                        <span class="bg-teal-100 text-teal-700 px-2.5 py-1 rounded font-medium">Chronic Care</span>
                        <span class="ml-auto text-slate-500">Jan 18, 2025</span>
                    </div>
                    <h4 class="font-semibold text-lg mt-2 leading-tight tracking-tight">The Role of Telehealth in Managing Chronic Conditions</h4>
                    <p class="text-sm text-slate-600 mt-2 line-clamp-3">New research from our clinical team shows how continuous telehealth monitoring can reduce hospital readmissions by 41%.</p>
                    <div class="mt-4 flex items-center text-xs font-medium text-teal-700">
                        <span>Read full article</span> <i class="fa-solid fa-arrow-right ml-1.5"></i>
                    </div>
                </div>
            </div>
            
            <!-- Insight 2 -->
            <div class="group bg-white border border-slate-200 rounded-3xl overflow-hidden hover:shadow-md transition-all">
                <img src="https://picsum.photos/id/1016/600/260" alt="Person preparing healthy meal with fresh ingredients" class="w-full h-44 object-cover group-hover:scale-[1.03] transition-transform">
                <div class="p-5">
                    <div class="flex items-center text-xs">
                        <span class="bg-emerald-100 text-emerald-700 px-2.5 py-1 rounded font-medium">Nutrition</span>
                        <span class="ml-auto text-slate-500">Jan 12, 2025</span>
                    </div>
                    <h4 class="font-semibold text-lg mt-2 leading-tight tracking-tight">How to Optimize Protein Intake for Recovery</h4>
                    <p class="text-sm text-slate-600 mt-2 line-clamp-3">Our nutritionists break down the latest science on protein timing and its impact on muscle repair and metabolic health.</p>
                    <div class="mt-4 flex items-center text-xs font-medium text-teal-700">
                        <span>Read full article</span> <i class="fa-solid fa-arrow-right ml-1.5"></i>
                    </div>
                </div>
            </div>
            
            <!-- Insight 3 -->
            <div class="group bg-white border border-slate-200 rounded-3xl overflow-hidden hover:shadow-md transition-all">
                <img src="https://picsum.photos/id/1033/600/260" alt="Person meditating in serene environment" class="w-full h-44 object-cover group-hover:scale-[1.03] transition-transform">
                <div class="p-5">
                    <div class="flex items-center text-xs">
                        <span class="bg-violet-100 text-violet-700 px-2.5 py-1 rounded font-medium">Mental Wellness</span>
                        <span class="ml-auto text-slate-500">Jan 9, 2025</span>
                    </div>
                    <h4 class="font-semibold text-lg mt-2 leading-tight tracking-tight">Movement as Medicine: The Link Between Exercise and Mental Health</h4>
                    <p class="text-sm text-slate-600 mt-2 line-clamp-3">New findings from our integrative psychiatry team show how specific training protocols can be as effective as medication for mild anxiety.</p>
                    <div class="mt-4 flex items-center text-xs font-medium text-teal-700">
                        <span>Read full article</span> <i class="fa-solid fa-arrow-right ml-1.5"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FINAL CTA BANNER -->
    <div class="max-w-screen-2xl mx-auto px-8 py-8">
        <div class="wellness-gradient rounded-3xl px-8 md:px-10 py-9 text-white">
            <div class="flex flex-col md:flex-row md:items-center gap-6 md:justify-between">
                <div>
                    <h3 class="font-bold text-3xl tracking-tighter">Ready to take control of your health?</h3>
                    <p class="mt-1.5 opacity-90 text-lg">Join over 14,000 members improving their health outcomes every day.</p>
                </div>
                <div>
                    <button onclick="showJoinModal()" 
                            class="px-9 py-3.5 bg-white hover:bg-slate-100 transition-colors text-teal-800 font-semibold rounded-2xl shadow-sm flex items-center justify-center gap-x-2">
                        <span>Start your free 14-day trial</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- FOOTER -->
    <footer id="contact" class="bg-slate-900 text-slate-300">
        <div class="max-w-screen-2xl mx-auto px-8 pt-14 pb-8">
            <div class="grid grid-cols-2 md:grid-cols-5 gap-y-9">
                <!-- Company -->
                <div class="col-span-2 md:col-span-1">
                    <div class="flex items-center gap-x-2">
                        <img src="https://placehold.co/110x38/134e4b/ffffff?text=Vitalora" alt="Vitalora" class="h-8">
                    </div>
                    <div class="mt-3 text-sm text-slate-400 max-w-[170px]">
                        Precision health and fitness for a better life.
                    </div>
                </div>
                
                <div>
                    <div class="font-semibold text-white mb-3 text-sm">Company</div>
                    <div class="space-y-[9px] text-sm">
                        <div><a href="#" class="hover:text-white">About Us</a></div>
                        <div><a href="#" class="hover:text-white">Careers</a></div>
                        <div><a href="#" class="hover:text-white">Press</a></div>
                        <div><a href="#" class="hover:text-white">Research</a></div>
                    </div>
                </div>
                
                <div>
                    <div class="font-semibold text-white mb-3 text-sm">Resources</div>
                    <div class="space-y-[9px] text-sm">
                        <div><a href="#" class="hover:text-white">Health Blog</a></div>
                        <div><a href="#" class="hover:text-white">Provider Network</a></div>
                        <div><a href="#" class="hover:text-white">Wellness Guides</a></div>
                        <div><a href="#" class="hover:text-white">Support Center</a></div>
                    </div>
                </div>
                
                <div>
                    <div class="font-semibold text-white mb-3 text-sm">Legal</div>
                    <div class="space-y-[9px] text-sm">
                        <div><a href="#" class="hover:text-white">Privacy Policy</a></div>
                        <div><a href="#" class="hover:text-white">Terms of Service</a></div>
                        <div><a href="#" class="hover:text-white">HIPAA Notice</a></div>
                        <div><a href="#" class="hover:text-white">Accessibility</a></div>
                    </div>
                </div>
                
                <div class="col-span-2 md:col-span-1">
                    <div class="font-semibold text-white mb-3 text-sm">Contact</div>
                    <div class="text-sm space-y-2">
                        <div>1800 Wellness Plaza</div>
                        <div>Austin, TX 78701</div>
                        <div class="pt-1">
                            <a href="tel:5125550192" class="hover:text-white">(512) 555-0192</a>
                        </div>
                        <div>
                            <a href="mailto:hello@vitalora.com" class="hover:text-white">hello@vitalora.com</a>
                        </div>
                    </div>
                    
                    <div class="flex gap-x-4 mt-5">
                        <a href="#" class="text-slate-400 hover:text-white"><i class="fa-brands fa-twitter text-lg"></i></a>
                        <a href="#" class="text-slate-400 hover:text-white"><i class="fa-brands fa-linkedin-in text-lg"></i></a>
                        <a href="#" class="text-slate-400 hover:text-white"><i class="fa-brands fa-instagram text-lg"></i></a>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-slate-700 mt-12 pt-6 text-xs flex flex-col md:flex-row justify-between gap-y-1 text-slate-400">
                <div>© 2025 Vitalora Health, Inc. All rights reserved.</div>
                <div class="text-[10px]">This is a fictional website created for demonstration purposes.</div>
            </div>
        </div>
    </footer>

    <!-- Join Modal -->
    <div id="join-modal" onclick="if (event.target.id === 'join-modal') hideJoinModal()" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center z-[100]">
        <div onclick="event.stopImmediatePropagation()" class="bg-white rounded-3xl max-w-md w-full mx-4 shadow-xl">
            <div class="px-6 py-5 flex items-center justify-between border-b">
                <div>
                    <span class="font-bold text-xl">Start your journey</span>
                </div>
                <button onclick="hideJoinModal()" class="w-9 h-9 flex items-center justify-center text-slate-400 hover:text-slate-600">
                    <i class="fa-solid fa-times"></i>
                </button>
            </div>
            
            <div class="p-6">
                <div class="space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="text-xs font-medium text-slate-600">First name</label>
                            <input type="text" value="Alex" class="mt-1 w-full border px-3 py-2.5 rounded-2xl text-sm">
                        </div>
                        <div>
                            <label class="text-xs font-medium text-slate-600">Last name</label>
                            <input type="text" value="Rivera" class="mt-1 w-full border px-3 py-2.5 rounded-2xl text-sm">
                        </div>
                    </div>
                    
                    <div>
                        <label class="text-xs font-medium text-slate-600">Email address</label>
                        <input type="email" value="alex.rivera@email.com" class="mt-1 w-full border px-3 py-2.5 rounded-2xl text-sm">
                    </div>
                    
                    <div>
                        <label class="text-xs font-medium text-slate-600">What are you looking for?</label>
                        <select class="mt-1 w-full border px-3 py-2.5 rounded-2xl text-sm">
                            <option>Personalized fitness program</option>
                            <option>Telehealth consultations</option>
                            <option>Mental health support</option>
                            <option>Nutrition coaching</option>
                            <option>General wellness</option>
                        </select>
                    </div>
                    
                    <div class="pt-2">
                        <button onclick="submitJoinForm()" class="w-full bg-teal-700 hover:bg-teal-800 transition-colors text-white font-semibold py-3.5 rounded-2xl text-sm">
                            Create account &amp; start free trial
                        </button>
                    </div>
                    
                    <div class="text-center text-xs text-slate-500">
                        14-day free trial. Cancel anytime. No credit card required.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        // Tailwind script configuration
        function initializeTailwind() {
            document.querySelectorAll('script[src*="tailwindcss"]').forEach(s => {
                if (s.src.includes('cdn.tailwindcss')) {
                    // Already loaded
                }
            });
            
            tailwind.config = {
                theme: {
                    extend: {
                        fontFamily: {
                            'serif-custom': ['Playfair Display', 'Georgia', 'serif']
                        }
                    }
                }
            };
        }
        
        // Mobile menu toggle
        function toggleMobileMenu() {
            const menu = document.getElementById('mobile-menu');
            const btn = document.getElementById('mobile-menu-btn');
            
            if (menu.classList.contains('hidden')) {
                menu.classList.remove('hidden');
                btn.innerHTML = '<i class="fa-solid fa-times text-xl"></i>';
            } else {
                menu.classList.add('hidden');
                btn.innerHTML = '<i class="fa-solid fa-bars text-xl"></i>';
            }
        }
        
        // Generate wellness plan (interactive element)
        function generateWellnessPlan() {
            const age = parseInt(document.getElementById('age').value) || 34;
            const level = document.getElementById('fitness-level').value;
            const primaryGoal = document.getElementById('primary-goal').value;
            
            // Collect focus areas
            const focusAreas = [];
            if (document.getElementById('focus1').checked) focusAreas.push('weight management');
            if (document.getElementById('focus2').checked) focusAreas.push('strength');
            if (document.getElementById('focus3').checked) focusAreas.push('cardio');
            if (document.getElementById('focus4').checked) focusAreas.push('mobility');
            if (document.getElementById('focus5').checked) focusAreas.push('stress relief');
            
            const resultContainer = document.getElementById('plan-result');
            const content = document.getElementById('plan-content');
            
            resultContainer.classList.remove('hidden');
            
            // Build the plan content
            let planHTML = `<div class="text-sm">`;
            
            // Header stats
            planHTML += `
                <div class="flex items-center justify-between bg-slate-50 rounded-2xl p-4 mb-4">
                    <div>
                        <div class="text-xs text-slate-500">Estimated weekly burn</div>
                        <div class="font-bold text-xl">${Math.round((age * 2.3) + (level === 'advanced' ? 2200 : level === 'intermediate' ? 1800 : 1400))} cal</div>
                    </div>
                    <div class="text-right">
                        <div class="text-xs text-slate-500">Recovery days</div>
                        <div class="font-semibold">${level === 'advanced' ? '2' : '3'} recommended</div>
                    </div>
                </div>
            `;
            
            // Daily schedule
            planHTML += `<div class="font-semibold mb-3">7-Day Schedule</div>`;
            
            const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
            
            days.forEach((day, index) => {
                let dayActivity = '';
                let dayDetails = '';
                
                // Customize based on goal and level
                if (primaryGoal === 'weight-loss') {
                    if (index % 2 === 0) {
                        dayActivity = 'HIIT + Strength';
                        dayDetails = level === 'beginner' ? '25 min circuit training' : '35 min metabolic conditioning';
                    } else if (index === 2 || index === 5) {
                        dayActivity = 'Active Recovery';
                        dayDetails = '30 min brisk walk + mobility';
                    } else {
                        dayActivity = 'Cardio Focus';
                        dayDetails = level === 'advanced' ? '45 min run or bike' : '35 min steady-state cardio';
                    }
                } else if (primaryGoal === 'muscle-gain') {
                    if (index % 2 === 0 && index < 5) {
                        dayActivity = 'Upper Body Strength';
                        dayDetails = 'Compound lifts + isolation';
                    } else if (index === 1 || index === 4) {
                        dayActivity = 'Lower Body Strength';
                        dayDetails = 'Squats, deadlifts, lunges';
                    } else {
                        dayActivity = 'Recovery + Core';
                        dayDetails = 'Light cardio + core work';
                    }
                } else if (primaryGoal === 'stress-relief') {
                    if (index === 0 || index === 3 || index === 5) {
                        dayActivity = 'Yoga + Breathwork';
                        dayDetails = '45 min mindful movement';
                    } else if (index === 2 || index === 6) {
                        dayActivity = 'Light Cardio';
                        dayDetails = '30 min nature walk';
                    } else {
                        dayActivity = 'Strength + Mobility';
                        dayDetails = 'Bodyweight circuits';
                    }
                } else {
                    // Default or endurance/general
                    dayActivity = index % 3 === 0 ? 'Endurance' : (index % 2 === 0 ? 'Strength' : 'Recovery');
                    dayDetails = level === 'advanced' ? 'Mixed modality training' : 'Balanced movement session';
                }
                
                // Add focus areas influence
                if (focusAreas.includes('stress relief') && index === 6) {
                    dayActivity = 'Mindfulness + Gentle Yoga';
                    dayDetails = '45 min guided session';
                }
                
                planHTML += `
                    <div class="plan-day flex items-start justify-between border-b border-slate-100 pb-3 pt-2">
                        <div>
                            <div class="font-medium text-slate-900">${day}</div>
                            <div class="text-xs text-emerald-600 font-medium">${dayActivity}</div>
                        </div>
                        <div class="text-right text-xs text-slate-500 max-w-[130px]">
                            ${dayDetails}
                        </div>
                    </div>
                `;
            });
            
            // Nutrition & Recovery tips
            planHTML += `<div class="pt-3 mt-3">`;
            planHTML += `<div class="font-semibold mb-2">Daily Nutrition Guidance</div>`;
            planHTML += `<div class="text-xs leading-relaxed text-slate-600">`;
            
            if (primaryGoal === 'weight-loss') {
                planHTML += `Prioritize protein (1.6g per kg bodyweight). Include fiber-rich vegetables at every meal. Aim for 2L water.`;
            } else if (primaryGoal === 'muscle-gain') {
                planHTML += `Target 1.8-2.2g protein per kg. Include carbs around workouts. Focus on whole foods and recovery meals.`;
            } else {
                planHTML += `Balanced macros with emphasis on anti-inflammatory foods. Include omega-3s and magnesium-rich foods.`;
            }
            
            planHTML += `</div>`;
            
            planHTML += `<div class="mt-3 pt-3 border-t text-xs">`;
            planHTML += `<div class="flex items-center"><span class="font-medium">Recovery focus:</span> <span class="ml-2 text-emerald-600">7-8 hours sleep + 2x foam rolling</span></div>`;
            planHTML += `</div>`;
            
            planHTML += `</div>`;
            planHTML += `</div>`;
            
            content.innerHTML = planHTML;
            
            // Scroll to results
            setTimeout(() => {
                resultContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }, 300);
        }
        
        function regeneratePlan() {
            const content = document.getElementById('plan-content');
            content.innerHTML = '';
            generateWellnessPlan();
        }
        
        function downloadPlan() {
            const planContent = document.getElementById('plan-content').innerText;
            const age = document.getElementById('age').value;
            const level = document.getElementById('fitness-level').value;
            
            alert(`Thank you! Your personalized 7-day plan for age ${age} (${level} level) has been prepared.\n\nIn a production environment, this would generate and download a beautifully formatted PDF with your full plan, including detailed exercise descriptions and nutrition guidelines.`);
            
            // In real app this would trigger a PDF generation
        }
        
        // Book appointment function
        function bookAppointment(providerName) {
            const modal = document.createElement('div');
            modal.className = `fixed inset-0 bg-black/70 flex items-end lg:items-center justify-center z-[110]`;
            modal.innerHTML = `
                <div onclick="event.target.remove()" class="absolute inset-0"></div>
                <div onclick="event.stopImmediatePropagation()" class="bg-white w-full max-w-lg lg:rounded-3xl lg:m-4 rounded-t-3xl relative z-10">
                    <div class="px-6 pt-5 pb-4">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="font-bold text-xl">Book appointment</div>
                                <div class="text-teal-700 font-medium">${providerName}</div>
                            </div>
                            <button onclick="this.closest('.fixed').remove()" class="text-slate-400 hover:text-slate-600 text-xl leading-none">&times;</button>
                        </div>
                        
                        <div class="mt-5 space-y-4">
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-xs font-medium mb-1 text-slate-600">Date</label>
                                    <input type="date" value="2025-02-10" class="w-full px-4 py-3 border border-slate-300 rounded-2xl text-sm">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium mb-1 text-slate-600">Time</label>
                                    <select class="w-full px-4 py-3 border border-slate-300 rounded-2xl text-sm">
                                        <option>9:00 AM</option>
                                        <option>10:30 AM</option>
                                        <option selected>1:15 PM</option>
                                        <option>3:45 PM</option>
                                        <option>5:00 PM</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-xs font-medium mb-1 text-slate-600">Appointment type</label>
                                <div class="flex gap-x-2">
                                    <label class="flex-1 cursor-pointer">
                                        <input type="radio" name="appt-type" checked class="peer hidden">
                                        <div class="peer-checked:border-teal-700 peer-checked:bg-teal-50 text-center px-3 py-2 border border-slate-200 rounded-2xl text-sm">Video Call</div>
                                    </label>
                                    <label class="flex-1 cursor-pointer">
                                        <input type="radio" name="appt-type" class="peer hidden">
                                        <div class="peer-checked:border-teal-700 peer-checked:bg-teal-50 text-center px-3 py-2 border border-slate-200 rounded-2xl text-sm">In-Person</div>
                                    </label>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-xs font-medium mb-1 text-slate-600">Reason for visit</label>
                                <textarea class="w-full px-4 py-3 border border-slate-300 rounded-2xl text-sm" rows="2" placeholder="Brief description of your health goals or concerns..."></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="px-6 py-5 border-t flex items-center justify-between bg-slate-50 rounded-b-3xl lg:rounded-b-3xl">
                        <div class="text-xs">30-minute session • $0 with insurance</div>
                        <button onclick="confirmBooking(this)" class="px-6 py-2.5 bg-teal-700 text-white font-semibold rounded-2xl text-sm">
                            Confirm Booking
                        </button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
        }
        
        function confirmBooking(btn) {
            const parentModal = btn.closest('.fixed');
            btn.innerHTML = `<span class="flex items-center justify-center"><i class="fa-solid fa-check mr-2"></i>Booked!</span>`;
            btn.disabled = true;
            
            setTimeout(function() {
                if (parentModal) parentModal.remove();
                
                const toast = document.createElement('div');
                toast.className = `fixed bottom-5 left-1/2 -translate-x-1/2 bg-slate-900 text-white px-5 py-3 rounded-3xl text-sm flex items-center gap-x-3 shadow-xl`;
                toast.innerHTML = `
                    <div>Appointment confirmed. Check your email for details.</div>
                    <button onclick="this.parentElement.remove()" class="px-3 py-1 text-xs font-medium bg-white/10 hover:bg-white/20 transition-colors rounded-2xl">OK</button>
                `;
                document.body.appendChild(toast);
                
                // Auto remove after 6s
                setTimeout(() => {
                    if (toast && toast.parentElement) toast.parentElement.removeChild(toast);
                }, 6000);
            }, 1350);
        }
        
        // Join modal functions
        function showJoinModal() {
            document.getElementById('join-modal').classList.remove('hidden');
            document.getElementById('join-modal').classList.add('flex');
        }
        
        function hideJoinModal() {
            const modal = document.getElementById('join-modal');
            modal.classList.remove('flex');
            modal.classList.add('hidden');
        }
        
        function submitJoinForm() {
            const modal = document.getElementById('join-modal');
            modal.innerHTML = `
                <div class="bg-white rounded-3xl max-w-md w-full mx-4 p-8 text-center shadow-xl">
                    <div class="w-14 h-14 mx-auto bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center">
                        <i class="fa-solid fa-check text-3xl"></i>
                    </div>
                    <h3 class="font-bold text-2xl mt-5">Welcome to Vitalora!</h3>
                    <p class="mt-2 text-sm text-slate-600">Your free trial has been activated. A member of our team will contact you within the hour to complete your onboarding.</p>
                    
                    <div class="mt-7">
                        <button onclick="document.getElementById('join-modal').remove(); document.getElementById('planner').scrollIntoView({behavior:'smooth'})" 
                                class="px-6 py-3 text-sm bg-emerald-700 hover:bg-emerald-800 transition-colors text-white font-semibold rounded-2xl">
                            Go to Wellness Planner
                        </button>
                    </div>
                </div>
            `;
            
            // Remove modal after some time or keep it
            setTimeout(() => {
                if (modal && modal.parentElement) {
                    // modal stays until user closes or navigates
                }
            }, 8000);
        }
        
        // Simple provider filter (demo)
        function filterProviders() {
            const cards = document.querySelectorAll('#providers .provider-card');
            
            // Demo: Cycle through filter states
            const currentFilter = cards[0].dataset.filtered || 'all';
            
            if (currentFilter === 'all') {
                // Show only mental health
                cards.forEach((card, index) => {
                    if (index === 3) { // Jamal is the psychologist
                        card.style.display = '';
                        card.dataset.filtered = 'mental';
                    } else {
                        card.style.display = 'none';
                    }
                });
                alert('Filter applied: Showing Mental Health providers only (demo).');
            } else {
                // Reset all
                cards.forEach(card => {
                    card.style.display = '';
                    card.dataset.filtered = 'all';
                });
                alert('Filters cleared. All providers visible.');
            }
        }
        
        // Keyboard accessibility
        function addKeyboardSupport() {
            document.addEventListener('keydown', function(e) {
                if (e.key === "/" && document.activeElement.tagName === "BODY") {
                    e.preventDefault();
                    const planner = document.getElementById('planner');
                    planner.scrollIntoView({ behavior: 'smooth' });
                    setTimeout(() => {
                        document.getElementById('age').focus();
                    }, 700);
                }
            });
            
            // Add subtle hint
            const plannerSection = document.getElementById('planner');
            if (plannerSection) {
                plannerSection.addEventListener('mouseenter', function() {
                    plannerSection.style.transition = 'all 0.2s ease';
                });
            }
        }
        
        // Initialize everything
        function initializeSite() {
            initializeTailwind();
            addKeyboardSupport();
            
            // Demo: Pre-fill one focus area and show planner hint
            setTimeout(() => {
                const ageInput = document.getElementById('age');
                if (ageInput) {
                    ageInput.addEventListener('focus', function() {
                        this.style.borderColor = '#0f766e';
                    });
                }
            }, 1200);
            
            // Randomly highlight a provider card on load for polish
            setTimeout(() => {
                const providers = document.querySelectorAll('#providers .provider-card');
                if (providers.length > 0) {
                    providers[1].classList.add('ring-1', 'ring-emerald-200');
                    setTimeout(() => {
                        if (providers[1]) providers[1].classList.remove('ring-1', 'ring-emerald-200');
                    }, 2400);
                }
            }, 4500);
            
            // Make sure mobile nav closes when clicking a link
            const mobileLinks = document.querySelectorAll('#mobile-menu a');
            mobileLinks.forEach(link => {
                link.addEventListener('click', () => {
                    document.getElementById('mobile-menu').classList.add('hidden');
                    const btn = document.getElementById('mobile-menu-btn');
                    if (btn) btn.innerHTML = '<i class="fa-solid fa-bars text-xl"></i>';
                });
            });
            
            // Accessibility: Add aria labels
            const navLinks = document.querySelectorAll('nav a');
            navLinks.forEach(link => {
                if (!link.getAttribute('aria-label')) {
                    link.setAttribute('aria-label', link.textContent.trim());
                }
            });
            
            // Production-ready note: In a real deployment this page would include analytics, A/B testing hooks, and server-side data fetching.
            console.log('%c[Vitalora] Production-quality single-page site initialized successfully.', 'color:#64748b; font-size: 9px');
        }
        
        // Boot the site
        window.onload = function() {
            initializeSite();
        }
        
        // Bonus: Allow pressing Enter in planner form to generate plan
        document.addEventListener('keypress', function(e) {
            if (e.key === "Enter" && document.getElementById('planner').contains(document.activeElement)) {
                const result = document.getElementById('plan-result');
                if (!result.classList.contains('hidden')) {
                    return;
                }
                generateWellnessPlan();
            }
        });
    </script>
</body>
</html>

View Axe Report (JSON)

{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T09:43:21.530Z",
  "url": "https://benchmark.aimac.invalid/9d121c4fc65973fe54e10e6683203f48b3fabd913fc14d16532c445499161c04.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": []
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<a href=\"#programs\" class=\"nav-link px-3 py-2 text-slate-600 hover:text-slate-900\" aria-label=\"Programs\">Programs</a>",
          "target": [
            "a[aria-label=\"Programs\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#programs\" class=\"nav-link px-3 py-2 text-slate-600 hover:text-slate-900\" aria-label=\"Programs\">Programs</a>",
          "target": [
            "a[aria-label=\"Programs\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body class=\"bg-slate-50 font-sans text-slate-800\">",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a href=\"#programs\" class=\"nav-link px-3 py-2 text-slate-600 hover:text-slate-900\" aria-label=\"Programs\">Programs</a>",
          "target": [
            "a[aria-label=\"Programs\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#programs\" class=\"nav-link px-3 py-2 text-slate-600 hover:text-slate-900\" aria-label=\"Programs\">Programs</a>",
          "target": [
            "a[aria-label=\"Programs\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#programs\" class=\"nav-link px-3 py-2 text-slate-600 hover:text-slate-900\" aria-label=\"Programs\">Programs</a>",
          "target": [
            "a[aria-label=\"Programs\"]"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button onclick=\"showJoinModal()\" class=\"px-6 py-2.5 bg-teal-700 hover:bg-teal-800 transition-all text-white text-sm font-semibold rounded-full flex items-center gap-x-2 shadow-sm\">\n                        <span>Get Started</span>\n                    </button>",
          "target": [
            ".px-6.hover\\:bg-teal-800[onclick=\"showJoinModal()\"]"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1 class=\"text-6xl lg:text-6xl xl:text-7xl font-bold tracking-tighter leading-none text-slate-900 mb-5\">\n                        Precision care.<br>\n                        <span class=\"text-teal-700\">Real results.</span>\n                    </h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2 class=\"section-header text-4xl font-bold tracking-tight text-slate-900 mt-2\">Integrated programs for every stage of health.</h2>",
                  "target": [
                    ".mb-9 > h2"
                  ]
                },
                {
                  "html": "<h3 class=\"font-semibold text-2xl tracking-tight\">Telehealth Consultations</h3>",
                  "target": [
                    ".health-card.p-6.rounded-3xl:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3 class=\"font-semibold text-2xl tracking-tight\">Personalized Fitness Plans</h3>",
                  "target": [
                    ".health-card.p-6.rounded-3xl:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3 class=\"font-semibold text-2xl tracking-tight\">Nutrition &amp; Metabolic Coaching</h3>",
                  "target": [
                    ".health-card.p-6.rounded-3xl:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3 class=\"font-semibold text-2xl tracking-tight\">Mental Health Integration</h3>",
                  "target": [
                    ".health-card.p-6.rounded-3xl:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-header text-4xl font-bold tracking-tight text-slate-900 mt-1\">Find the right provider for you.</h2>",
                  "target": [
                    ".lg\\:flex-row > div:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"section-header text-4xl font-bold tracking-tight mt-2\">Mental health is physical health.</h2>",
                  "target": [
                    ".max-w-md > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"section-header text-4xl font-bold tracking-tight text-slate-900 mt-1\">Build your personalized wellness plan</h2>",
                  "target": [
                    ".max-w-3xl.text-center.mb-8 > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"section-header text-4xl font-bold tracking-tight\">Members are seeing real, measurable progress.</h2>",
                  "target": [
                    ".max-w-2xl.mb-8 > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"section-header text-4xl font-bold tracking-tight\">Latest resources from our team.</h2>",
                  "target": [
                    ".md\\:items-end > div > h2"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg mt-2 leading-tight tracking-tight\">The Role of Telehealth in Managing Chronic Conditions</h4>",
                  "target": [
                    ".group.hover\\:shadow-md.transition-all:nth-child(1) > .p-5 > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg mt-2 leading-tight tracking-tight\">How to Optimize Protein Intake for Recovery</h4>",
                  "target": [
                    ".group.hover\\:shadow-md.transition-all:nth-child(2) > .p-5 > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg mt-2 leading-tight tracking-tight\">Movement as Medicine: The Link Between Exercise and Mental Health</h4>",
                  "target": [
                    ".group.hover\\:shadow-md.transition-all:nth-child(3) > .p-5 > h4"
                  ]
                },
                {
                  "html": "<h3 class=\"font-bold text-3xl tracking-tighter\">Ready to take control of your health?</h3>",
                  "target": [
                    "div:nth-child(1) > .text-3xl.tracking-tighter"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0f172a",
                "bgColor": "#ffffff",
                "contrastRatio": 17.85,
                "fontSize": "22.5pt (30px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 17.85"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span class=\"text-3xl font-bold tracking-tighter text-slate-900\">Vitalora</span>",
          "target": [
            ".text-3xl.tracking-tighter.text-slate-900"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input id=\"age\" type=\"number\" value=\"34\" class=\"w-full px-4 py-3 border border-slate-300 focus:border-teal-700 outline-none transition-colors rounded-2xl text-sm\">",
          "target": [
            "#age"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/140x52/0f766e/ffffff?text=Vitalora&amp;font=playfair+display\" alt=\"Vitalora Logo\" class=\"h-11 w-auto rounded-lg shadow-sm\">",
          "target": [
            ".h-11"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": "critical",
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "implicit-label",
              "data": {
                "implicitLabel": "Weight management"
              },
              "relatedNodes": [
                {
                  "html": "<label class=\"flex items-center gap-x-2 px-3 py-2 border border-slate-200 hover:bg-slate-50 transition-colors rounded-2xl text-sm cursor-pointer\">",
                  "target": [
                    ".cursor-pointer:nth-child(1)"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an implicit (wrapped) <label>"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"checkbox\" id=\"focus1\" checked=\"\" class=\"accent-teal-700\">",
          "target": [
            "#focus1"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": "serious",
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a href=\"#programs\" class=\"nav-link px-3 py-2 text-slate-600 hover:text-slate-900\" aria-label=\"Programs\">Programs</a>",
          "target": [
            "a[aria-label=\"Programs\"]"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/140x52/0f766e/ffffff?text=Vitalora&amp;font=playfair+display\" alt=\"Vitalora Logo\" class=\"h-11 w-auto rounded-lg shadow-sm\">",
          "target": [
            ".h-11"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 87.8,
                "height": 36
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (87.8px by 36px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#programs\" class=\"nav-link px-3 py-2 text-slate-600 hover:text-slate-900\" aria-label=\"Programs\">Programs</a>",
          "target": [
            "a[aria-label=\"Programs\"]"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": null,
                "bgColor": null,
                "contrastRatio": 0,
                "fontSize": "22.5pt (30px)",
                "fontWeight": "bold",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"wellness-gradient rounded-3xl px-8 md:px-10 py-9 text-white\">",
                  "target": [
                    ".wellness-gradient"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h3 class=\"font-bold text-3xl tracking-tighter\">Ready to take control of your health?</h3>",
          "target": [
            "div:nth-child(1) > .text-3xl.tracking-tighter"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a background gradient"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#94a3b8",
                "bgColor": "#ffffff",
                "contrastRatio": 2.56,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"max-w-screen-2xl mx-auto border-b border-slate-200 bg-white\">",
                  "target": [
                    ".border-b.max-w-screen-2xl.mx-auto"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"font-semibold text-sm\">Stanford Health</div>",
          "target": [
            ".gap-y-3 > .text-sm.font-semibold:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#94a3b8",
                "bgColor": "#ffffff",
                "contrastRatio": 2.56,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"max-w-screen-2xl mx-auto border-b border-slate-200 bg-white\">",
                  "target": [
                    ".border-b.max-w-screen-2xl.mx-auto"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"font-semibold text-sm\">Nike Training</div>",
          "target": [
            ".gap-y-3 > .text-sm.font-semibold:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#94a3b8",
                "bgColor": "#ffffff",
                "contrastRatio": 2.56,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"max-w-screen-2xl mx-auto border-b border-slate-200 bg-white\">",
                  "target": [
                    ".border-b.max-w-screen-2xl.mx-auto"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"font-semibold text-sm\">Mayo Clinic</div>",
          "target": [
            ".text-sm.font-semibold:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#94a3b8",
                "bgColor": "#ffffff",
                "contrastRatio": 2.56,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"max-w-screen-2xl mx-auto border-b border-slate-200 bg-white\">",
                  "target": [
                    ".border-b.max-w-screen-2xl.mx-auto"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"font-semibold text-sm\">Peloton</div>",
          "target": [
            ".text-sm.font-semibold:nth-child(4)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#94a3b8",
                "bgColor": "#ffffff",
                "contrastRatio": 2.56,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"provider-card bg-white border border-slate-200 rounded-3xl overflow-hidden shadow-sm\">",
                  "target": [
                    ".provider-card.overflow-hidden.shadow-sm:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-slate-400 ml-1\">(1.2k reviews)</span>",
          "target": [
            ".provider-card.overflow-hidden.shadow-sm:nth-child(1) > .p-5 > .mt-4.gap-x-2.items-center > .text-xs.items-center.flex > .ml-1.text-slate-400"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#94a3b8",
                "bgColor": "#ffffff",
                "contrastRatio": 2.56,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"provider-card bg-white border border-slate-200 rounded-3xl overflow-hidden shadow-sm\">",
                  "target": [
                    ".provider-card.overflow-hidden.shadow-sm:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-slate-400 ml-1\">(943 reviews)</span>",
          "target": [
            ".provider-card.overflow-hidden.shadow-sm:nth-child(2) > .p-5 > .mt-4.gap-x-2.items-center > .text-xs.items-center.flex > .ml-1.text-slate-400"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#94a3b8",
                "bgColor": "#ffffff",
                "contrastRatio": 2.56,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"provider-card bg-white border border-slate-200 rounded-3xl overflow-hidden shadow-sm\">",
                  "target": [
                    ".provider-card.overflow-hidden.shadow-sm:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-slate-400 ml-1\">(684 reviews)</span>",
          "target": [
            ".provider-card.overflow-hidden.shadow-sm:nth-child(3) > .p-5 > .mt-4.gap-x-2.items-center > .text-xs.items-center.flex > .ml-1.text-slate-400"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#94a3b8",
                "bgColor": "#ffffff",
                "contrastRatio": 2.56,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"provider-card bg-white border border-slate-200 rounded-3xl overflow-hidden shadow-sm\">",
                  "target": [
                    ".provider-card.overflow-hidden.shadow-sm:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-slate-400 ml-1\">(1.1k reviews)</span>",
          "target": [
            ".provider-card.overflow-hidden.shadow-sm:nth-child(4) > .p-5 > .mt-4.gap-x-2.items-center > .text-xs.items-center.flex > .ml-1.text-slate-400"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#94a3b8",
                "bgColor": "#ffffff",
                "contrastRatio": 2.56,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white p-5 rounded-3xl border border-slate-200\">",
                  "target": [
                    ".p-5.rounded-3xl.border-slate-200:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"ml-1.5 text-slate-400\">attended this month</span>",
          "target": [
            ".p-5.rounded-3xl.border-slate-200:nth-child(1) > .mt-4.text-violet-700.text-xs > .ml-1\\.5.text-slate-400"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#94a3b8",
                "bgColor": "#ffffff",
                "contrastRatio": 2.56,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white p-5 rounded-3xl border border-slate-200\">",
                  "target": [
                    ".p-5.rounded-3xl.border-slate-200:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"ml-1.5 text-slate-400\">report improvement</span>",
          "target": [
            ".p-5.rounded-3xl.border-slate-200:nth-child(2) > .mt-4.text-violet-700.text-xs > .ml-1\\.5.text-slate-400"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.56 (foreground color: #94a3b8, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    },
    {
      "id": "label",
      "impact": "critical",
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "non-empty-placeholder",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no placeholder attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<input id=\"age\" type=\"number\" value=\"34\" class=\"w-full px-4 py-3 border border-slate-300 focus:border-teal-700 outline-none transition-colors rounded-2xl text-sm\">",
          "target": [
            "#age"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element has no placeholder attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        }
      ]
    },
    {
      "id": "link-name",
      "impact": "serious",
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-slate-400 hover:text-white\"><i class=\"fa-brands fa-twitter text-lg\"></i></a>",
          "target": [
            ".text-slate-400.hover\\:text-white[href=\"#\"]:nth-child(1)"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-slate-400 hover:text-white\"><i class=\"fa-brands fa-linkedin-in text-lg\"></i></a>",
          "target": [
            ".text-slate-400.hover\\:text-white[href=\"#\"]:nth-child(2)"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-slate-400 hover:text-white\"><i class=\"fa-brands fa-instagram text-lg\"></i></a>",
          "target": [
            ".text-slate-400.hover\\:text-white[href=\"#\"]:nth-child(3)"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        }
      ]
    },
    {
      "id": "select-name",
      "impact": "critical",
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<select id=\"fitness-level\" class=\"w-full px-4 py-3 border border-slate-300 focus:border-teal-700 outline-none transition-colors rounded-2xl text-sm\">",
          "target": [
            "#fitness-level"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<select id=\"primary-goal\" class=\"w-full px-4 py-3 border border-slate-300 focus:border-teal-700 outline-none transition-colors rounded-2xl text-sm\">",
          "target": [
            "#primary-goal"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 5095
      },
      {
        "y": 576,
        "height": 5095
      },
      {
        "y": 1152,
        "height": 5095
      },
      {
        "y": 1728,
        "height": 5095
      },
      {
        "y": 2304,
        "height": 5095
      },
      {
        "y": 2880,
        "height": 5095
      },
      {
        "y": 3456,
        "height": 5095
      },
      {
        "y": 4032,
        "height": 5095
      },
      {
        "y": 4375,
        "height": 5095
      }
    ],
    "scans": 10,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}

System Prompt

You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.

User Prompt

Create a **complete, polished, production-quality** primary web page for a new client in the "Health and Fitness" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

**Client & Category:**
- Industry: "Health and Fitness"
- Description: Healthcare, wellness, fitness tips, nutrition, and medical resources.

**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Health and Fitness" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.

**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Find Provider", "Mental Health", "Contact".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Health and Fitness" category. Consider themes similar to: "Patient Resources", "Recovery Programs", "Wellness Tips".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "telehealth", "chronic care", "vital signs".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Sign Up", "Find Doctor", "Get Started".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Health and Fitness" sector. Ideas similar but not limited to: "workout planner".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "class schedule", "success stories", "health news".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.

← Back to SpaceXAI Grok Build 0.1 summary View all models for Health and Fitness