SpaceXAI Grok Build 0.1 – Travel

via xAI · Generated

  • AIMAC Debt 26.87
  • Cost $0.045
  • Total Violations 24
  • HTML Size 72 KB
  • Em Dashes 10

Screenshot

View SpaceXAI Grok Build 0.1 Travel page View Live Page

Accessibility Issues Found

6 Critical 18 Serious

  • button-name critical 1 instance

    Buttons must have discernible text

    Example HTML <button onclick="convertCurrency()" class="w-full bg-emerald-700 hover:bg-emerald-800 transition-colors text-white font-semibold px-4 py-[15px] rou...
  • color-contrast serious 15 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <p class="text-emerald-600 text-sm font-medium">Cyclades Islands</p>
  • 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-instagram text-lg"></i></a>
  • select-name critical 5 instances

    Select element must have an accessible name

    Example HTML <select id="from" class="mt-1 w-full border border-slate-200 px-4 py-3 text-sm rounded-2xl focus:outline-none focus:ring-1 focus:ring-emerald-600">

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>Nomadica • Wander with Purpose</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: 1440px;
            margin-left: auto;
            margin-right: auto;
        }

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

        .section-header {
            font-family: 'Playfair Display', Georgia, serif;
            letter-spacing: -0.025em;
        }

        .travel-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);
        }
        
        .travel-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);
        }

        .hero-bg {
            background-image: linear-gradient(rgba(15, 118, 110, 0.35), rgba(15, 118, 110, 0.25)), url('https://picsum.photos/id/1018/2000/1200');
            background-size: cover;
            background-position: center;
        }

        .destination-img {
            transition: transform 0.5s ease;
        }
        
        .travel-card:hover .destination-img {
            transform: scale(1.05);
        }

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

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

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

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

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

        .feature-card:hover .feature-icon {
            transform: translateY(-3px);
        }

        .polished-button {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 6px -1px rgb(15 118 110 / 0.2), 0 2px 4px -2px rgb(15 118 110 / 0.2);
        }
        
        .polished-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgb(15 118 110 / 0.3), 0 4px 6px -4px rgb(15 118 110 / 0.3);
        }

        .subtle-grid {
            background-image: url('data:image/svg+xml,%3Csvg width=%2260%22 height=%2260%22 viewBox=%220 0 60 60%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill-rule=%22evenodd%22%3E%3Cpath fill=%22%23f8fafc%22 fill-opacity=%22004%22 d=%22M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-10V8h-2v16h-4v2h4v4h2v-4h4v-2h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 6v-4H4v4H0v2h4v4h2V8h4V6H6z%22/%3E%3C/g%3E%3C/svg%27');
            background-size: 60px 60px;
        }
    </style>
</head>
<body class="bg-slate-50 font-sans antialiased text-slate-800">
    <!-- HEADER -->
    <header class="bg-white border-b border-slate-100 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/180x52/0f766e/ffffff?text=Nomadica&amp;font=montserrat" 
                         alt="Nomadica Logo" 
                         class="h-11 w-auto object-contain">
                    <div>
                        <span class="font-semibold text-3xl tracking-tighter text-slate-900">Nomadica</span>
                    </div>
                </div>

                <!-- Navigation -->
                <nav class="hidden md:flex items-center gap-x-8 text-sm">
                    <a href="#destinations" class="nav-link text-slate-700 font-medium px-1">Destinations</a>
                    <a href="#experiences" class="nav-link text-slate-700 font-medium px-1">Experiences</a>
                    <a href="#tools" class="nav-link text-slate-700 font-medium px-1">Trip Planner</a>
                    <a href="#deals" class="nav-link text-slate-700 font-medium px-1">Deals</a>
                    <a href="#difference" class="nav-link text-slate-700 font-medium px-1">About</a>
                    <a href="#resources" class="nav-link text-slate-700 font-medium px-1">Resources</a>
                </nav>

                <!-- Header Actions -->
                <div class="flex items-center gap-x-3">
                    <button onclick="document.getElementById('tools').scrollIntoView({ behavior: 'smooth' })" 
                            class="hidden md:block px-5 py-2.5 text-sm font-semibold text-slate-700 hover:text-slate-900 transition-colors">
                        Log in
                    </button>
                    
                    <button onclick="document.getElementById('tools').scrollIntoView({ behavior: 'smooth' })" 
                            class="px-6 py-2.5 text-sm font-semibold bg-slate-900 hover:bg-slate-800 text-white rounded-2xl transition-all polished-button flex items-center gap-x-2">
                        <span>Start Planning</span>
                    </button>
                    
                    <!-- Mobile Menu -->
                    <div class="md:hidden">
                        <button class="w-10 h-10 flex items-center justify-center text-slate-600 hover:text-slate-900" 
                                onclick="toggleMobileNav()">
                            <i class="fa-solid fa-bars text-xl"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- HERO -->
    <section class="hero-bg h-screen flex items-center relative">
        <div class="max-w-screen-2xl mx-auto px-8 pt-8">
            <div class="max-w-2xl">
                <div class="inline-flex items-center gap-x-2 px-4 py-1.5 bg-white/90 backdrop-blur-md rounded-3xl mb-6 border border-white/40">
                    <div class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
                    <span class="text-emerald-700 text-xs font-semibold tracking-widest">2025 TRAVEL AWARDS WINNER</span>
                </div>
                
                <h1 class="text-6xl md:text-7xl font-bold tracking-tighter text-white leading-none">
                    Wander with<br>purpose.
                </h1>
                
                <p class="mt-6 text-xl text-white/90 max-w-md">
                    Expert travel guides, curated destinations, and seamless booking tools for the modern explorer.
                </p>
                
                <div class="flex flex-wrap items-center gap-3 mt-8">
                    <button onclick="document.getElementById('tools').scrollIntoView({ behavior: 'smooth' })" 
                            class="px-8 py-4 bg-white text-slate-900 font-semibold rounded-3xl flex items-center gap-x-3 hover:bg-white/95 transition-all polished-button shadow-lg">
                        <span>Start Planning Your Trip</span>
                        <i class="fa-solid fa-arrow-right"></i>
                    </button>
                    
                    <button onclick="document.getElementById('destinations').scrollIntoView({ behavior: 'smooth' })" 
                            class="px-7 py-4 text-white font-semibold flex items-center gap-x-2 border border-white/60 hover:bg-white/10 transition-colors rounded-3xl">
                        <span>Browse Destinations</span>
                    </button>
                </div>
                
                <div class="mt-10 flex items-center gap-x-6">
                    <div class="flex -space-x-2">
                        <img src="https://i.pravatar.cc/32?u=traveler1" class="w-8 h-8 rounded-full border-2 border-white ring-1 ring-white/30" alt="">
                        <img src="https://i.pravatar.cc/32?u=traveler2" class="w-8 h-8 rounded-full border-2 border-white ring-1 ring-white/30" alt="">
                        <img src="https://i.pravatar.cc/32?u=traveler3" class="w-8 h-8 rounded-full border-2 border-white ring-1 ring-white/30" alt="">
                    </div>
                    <div class="text-white/90 text-sm">
                        <span class="font-medium">42,891</span> journeys planned this month
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Hero stats overlay -->
        <div class="absolute bottom-8 right-8 bg-white/95 backdrop-blur-lg px-5 py-4 rounded-3xl border border-white/50 shadow-xl hidden lg:flex items-center gap-x-6">
            <div>
                <div class="text-xs text-slate-500 font-medium">TRIPS BOOKED TODAY</div>
                <div class="font-semibold text-xl text-slate-900">1,284</div>
            </div>
            <div class="h-8 w-px bg-slate-200"></div>
            <div>
                <div class="flex items-center gap-x-1.5">
                    <div class="text-emerald-500"><i class="fa-solid fa-globe"></i></div>
                    <div>
                        <span class="font-semibold">127</span>
                        <span class="text-xs text-slate-500"> countries</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FEATURED DESTINATIONS -->
    <section id="destinations" class="max-w-screen-2xl mx-auto px-8 pt-16 pb-12">
        <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-9">
            <div>
                <span class="text-emerald-700 font-semibold tracking-wider text-sm">EXPLORE THE WORLD</span>
                <h2 class="section-header text-5xl font-bold tracking-tighter text-slate-900">Featured Destinations</h2>
            </div>
            <a href="#" class="mt-3 md:mt-0 inline-flex items-center gap-x-2 text-sm font-semibold text-emerald-700 hover:text-emerald-800 group">
                View all destinations 
                <i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition"></i>
            </a>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Destination 1 -->
            <div class="travel-card bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-sm">
                <div class="relative h-56">
                    <img src="https://picsum.photos/id/1018/600/400" alt="Santorini, Greece" 
                         class="w-full h-full object-cover destination-img">
                    <div class="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-2xl text-xs font-semibold flex items-center gap-x-1">
                        <i class="fa-solid fa-star text-amber-500"></i>
                        <span>4.98</span>
                    </div>
                </div>
                <div class="p-5">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="font-semibold text-xl">Santorini, Greece</h3>
                            <p class="text-emerald-600 text-sm font-medium">Cyclades Islands</p>
                        </div>
                        <div class="text-right">
                            <div class="text-xs text-slate-500">From</div>
                            <div class="font-semibold">$1,890</div>
                        </div>
                    </div>
                    <p class="mt-3 text-sm text-slate-600 leading-relaxed">
                        Dramatic cliffside villages and mesmerizing sunsets over the Aegean. Our itineraries include private wine tastings and hidden caldera hikes.
                    </p>
                    <div class="mt-5 flex items-center justify-between">
                        <div class="flex items-center text-xs">
                            <span class="bg-emerald-100 text-emerald-700 px-2.5 py-px rounded-full font-medium">12-day trip</span>
                        </div>
                        <button onclick="selectDestination('Santorini')" 
                                class="text-sm font-semibold px-4 py-1.5 bg-emerald-700 hover:bg-emerald-800 text-white rounded-2xl transition-colors text-xs">
                            Explore Guide
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Destination 2 -->
            <div class="travel-card bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-sm">
                <div class="relative h-56">
                    <img src="https://picsum.photos/id/1005/600/400" alt="Kyoto, Japan" 
                         class="w-full h-full object-cover destination-img">
                    <div class="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-2xl text-xs font-semibold flex items-center gap-x-1">
                        <i class="fa-solid fa-star text-amber-500"></i>
                        <span>4.94</span>
                    </div>
                </div>
                <div class="p-5">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="font-semibold text-xl">Kyoto, Japan</h3>
                            <p class="text-emerald-600 text-sm font-medium">Kansai Region</p>
                        </div>
                        <div class="text-right">
                            <div class="text-xs text-slate-500">From</div>
                            <div class="font-semibold">$2,450</div>
                        </div>
                    </div>
                    <p class="mt-3 text-sm text-slate-600 leading-relaxed">
                        Serene temples, ancient tea ceremonies, and cherry blossom trails. Our cultural experts provide deep access to traditional geisha districts.
                    </p>
                    <div class="mt-5 flex items-center justify-between">
                        <div class="flex items-center text-xs">
                            <span class="bg-emerald-100 text-emerald-700 px-2.5 py-px rounded-full font-medium">9-day trip</span>
                        </div>
                        <button onclick="selectDestination('Kyoto')" 
                                class="text-sm font-semibold px-4 py-1.5 bg-emerald-700 hover:bg-emerald-800 text-white rounded-2xl transition-colors text-xs">
                            Explore Guide
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Destination 3 -->
            <div class="travel-card bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-sm">
                <div class="relative h-56">
                    <img src="https://picsum.photos/id/1033/600/400" alt="Banff National Park, Canada" 
                         class="w-full h-full object-cover destination-img">
                    <div class="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-2xl text-xs font-semibold flex items-center gap-x-1">
                        <i class="fa-solid fa-star text-amber-500"></i>
                        <span>4.87</span>
                    </div>
                </div>
                <div class="p-5">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="font-semibold text-xl">Banff, Canada</h3>
                            <p class="text-emerald-600 text-sm font-medium">Alberta Rockies</p>
                        </div>
                        <div class="text-right">
                            <div class="text-xs text-slate-500">From</div>
                            <div class="font-semibold">$1,650</div>
                        </div>
                    </div>
                    <p class="mt-3 text-sm text-slate-600 leading-relaxed">
                        Stunning turquoise lakes and dramatic mountain peaks. Perfect for adventure seekers with guided hikes, wildlife tours, and winter sports.
                    </p>
                    <div class="mt-5 flex items-center justify-between">
                        <div class="flex items-center text-xs">
                            <span class="bg-emerald-100 text-emerald-700 px-2.5 py-px rounded-full font-medium">7-day trip</span>
                        </div>
                        <button onclick="selectDestination('Banff')" 
                                class="text-sm font-semibold px-4 py-1.5 bg-emerald-700 hover:bg-emerald-800 text-white rounded-2xl transition-colors text-xs">
                            Explore Guide
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Destination 4 -->
            <div class="travel-card bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-sm">
                <div class="relative h-56">
                    <img src="https://picsum.photos/id/201/600/400" alt="Marrakech, Morocco" 
                         class="w-full h-full object-cover destination-img">
                    <div class="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-2xl text-xs font-semibold flex items-center gap-x-1">
                        <i class="fa-solid fa-star text-amber-500"></i>
                        <span>4.91</span>
                    </div>
                </div>
                <div class="p-5">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="font-semibold text-xl">Marrakech, Morocco</h3>
                            <p class="text-emerald-600 text-sm font-medium">Marrakesh-Safi</p>
                        </div>
                        <div class="text-right">
                            <div class="text-xs text-slate-500">From</div>
                            <div class="font-semibold">$1,320</div>
                        </div>
                    </div>
                    <p class="mt-3 text-sm text-slate-600 leading-relaxed">
                        Vibrant souks, historic riads, and the majestic Atlas Mountains. Includes exclusive access to traditional hammams and desert excursions.
                    </p>
                    <div class="mt-5 flex items-center justify-between">
                        <div class="flex items-center text-xs">
                            <span class="bg-emerald-100 text-emerald-700 px-2.5 py-px rounded-full font-medium">10-day trip</span>
                        </div>
                        <button onclick="selectDestination('Marrakech')" 
                                class="text-sm font-semibold px-4 py-1.5 bg-emerald-700 hover:bg-emerald-800 text-white rounded-2xl transition-colors text-xs">
                            Explore Guide
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CURATED EXPERIENCES -->
    <section id="experiences" class="bg-white border-t border-b border-slate-100 py-16">
        <div class="max-w-screen-2xl mx-auto px-8">
            <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-9">
                <div>
                    <span class="text-emerald-700 font-semibold tracking-wider text-sm">SIGNATURE JOURNEYS</span>
                    <h2 class="section-header text-5xl font-bold tracking-tighter text-slate-900">Curated Experiences</h2>
                </div>
                <a href="#" class="mt-3 md:mt-0 inline-flex items-center gap-x-2 text-sm font-semibold text-emerald-700 hover:text-emerald-800 group">
                    Browse all experiences 
                    <i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition"></i>
                </a>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Experience 1 -->
                <div class="travel-card bg-slate-50 border border-slate-100 rounded-3xl p-6">
                    <div class="flex items-center gap-x-3 mb-4">
                        <img src="https://picsum.photos/id/292/64/64" alt="Culinary experience" class="w-11 h-11 rounded-2xl object-cover">
                        <div>
                            <span class="text-xs px-3 py-1 bg-amber-100 text-amber-700 rounded-2xl font-semibold">Culinary</span>
                        </div>
                    </div>
                    <h3 class="font-semibold text-xl">Tuscan Wine &amp; Truffle Tour</h3>
                    <p class="mt-2 text-sm text-slate-600 leading-relaxed">A 7-day immersive journey through the rolling hills of Tuscany. Visit family-owned vineyards, forage for truffles with local experts, and cook authentic meals in historic farmhouses.</p>
                    
                    <div class="mt-6 flex items-center justify-between">
                        <div>
                            <div class="text-xs text-slate-500">Starting at</div>
                            <div class="font-bold text-lg">$3,250</div>
                        </div>
                        <button onclick="bookExperience('Tuscan Wine &amp; Truffle Tour')" 
                                class="px-5 py-2 text-sm font-semibold bg-white border border-slate-200 hover:bg-slate-100 rounded-2xl transition-colors">
                            Book now
                        </button>
                    </div>
                    <div class="mt-3 text-xs text-emerald-600 font-medium flex items-center gap-x-1">
                        <i class="fa-solid fa-users"></i> 
                        <span>1,942 travelers joined</span>
                    </div>
                </div>
                
                <!-- Experience 2 -->
                <div class="travel-card bg-slate-50 border border-slate-100 rounded-3xl p-6">
                    <div class="flex items-center gap-x-3 mb-4">
                        <img src="https://picsum.photos/id/160/64/64" alt="Safari experience" class="w-11 h-11 rounded-2xl object-cover">
                        <div>
                            <span class="text-xs px-3 py-1 bg-emerald-100 text-emerald-700 rounded-2xl font-semibold">Wildlife</span>
                        </div>
                    </div>
                    <h3 class="font-semibold text-xl">Serengeti Private Safari</h3>
                    <p class="mt-2 text-sm text-slate-600 leading-relaxed">Exclusive 8-day luxury safari across the Serengeti and Ngorongoro Crater. Witness the Great Migration with private guides and stay in eco-luxury tented camps.</p>
                    
                    <div class="mt-6 flex items-center justify-between">
                        <div>
                            <div class="text-xs text-slate-500">Starting at</div>
                            <div class="font-bold text-lg">$7,850</div>
                        </div>
                        <button onclick="bookExperience('Serengeti Private Safari')" 
                                class="px-5 py-2 text-sm font-semibold bg-white border border-slate-200 hover:bg-slate-100 rounded-2xl transition-colors">
                            Book now
                        </button>
                    </div>
                    <div class="mt-3 text-xs text-emerald-600 font-medium flex items-center gap-x-1">
                        <i class="fa-solid fa-users"></i> 
                        <span>784 travelers joined</span>
                    </div>
                </div>
                
                <!-- Experience 3 -->
                <div class="travel-card bg-slate-50 border border-slate-100 rounded-3xl p-6">
                    <div class="flex items-center gap-x-3 mb-4">
                        <img src="https://picsum.photos/id/251/64/64" alt="Northern lights experience" class="w-11 h-11 rounded-2xl object-cover">
                        <div>
                            <span class="text-xs px-3 py-1 bg-indigo-100 text-indigo-700 rounded-2xl font-semibold">Adventure</span>
                        </div>
                    </div>
                    <h3 class="font-semibold text-xl">Iceland Northern Lights Quest</h3>
                    <p class="mt-2 text-sm text-slate-600 leading-relaxed">5-day expedition to chase the Aurora Borealis. Includes glacier hiking, geothermal baths, and photography workshops led by award-winning nature photographers.</p>
                    
                    <div class="mt-6 flex items-center justify-between">
                        <div>
                            <div class="text-xs text-slate-500">Starting at</div>
                            <div class="font-bold text-lg">$2,975</div>
                        </div>
                        <button onclick="bookExperience('Iceland Northern Lights Quest')" 
                                class="px-5 py-2 text-sm font-semibold bg-white border border-slate-200 hover:bg-slate-100 rounded-2xl transition-colors">
                            Book now
                        </button>
                    </div>
                    <div class="mt-3 text-xs text-emerald-600 font-medium flex items-center gap-x-1">
                        <i class="fa-solid fa-users"></i> 
                        <span>1,156 travelers joined</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- THE NOMADICA DIFFERENCE -->
    <section id="difference" class="max-w-screen-2xl mx-auto px-8 py-16">
        <div class="max-w-2xl mb-10">
            <span class="text-emerald-700 font-semibold tracking-wider text-sm">OUR APPROACH</span>
            <h2 class="section-header text-5xl font-bold tracking-tighter">The Nomadica Difference</h2>
            <p class="mt-3 text-lg text-slate-600">We combine decades of on-the-ground expertise with cutting-edge tools to deliver travel experiences that are authentic, responsible, and unforgettable.</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Feature 1 -->
            <div class="feature-card bg-white p-6 rounded-3xl border border-slate-100">
                <div class="w-12 h-12 flex items-center justify-center bg-emerald-100 text-emerald-700 rounded-2xl mb-5 feature-icon">
                    <i class="fa-solid fa-route fa-lg"></i>
                </div>
                <h4 class="font-semibold text-lg">Expert Itineraries</h4>
                <p class="text-sm mt-2 leading-relaxed text-slate-600">
                    Every itinerary is meticulously crafted by travel specialists who have personally visited each destination. We incorporate local insights, optimal pacing, and flexible alternatives for weather or preferences.
                </p>
                <div class="mt-4 text-xs text-emerald-700 font-medium">Over 4,200 itineraries created</div>
            </div>
            
            <!-- Feature 2 -->
            <div class="feature-card bg-white p-6 rounded-3xl border border-slate-100">
                <div class="w-12 h-12 flex items-center justify-center bg-emerald-100 text-emerald-700 rounded-2xl mb-5 feature-icon">
                    <i class="fa-solid fa-shield-halved fa-lg"></i>
                </div>
                <h4 class="font-semibold text-lg">Seamless Booking</h4>
                <p class="text-sm mt-2 leading-relaxed text-slate-600">
                    Compare prices across 80+ trusted partners in one dashboard. Our platform includes real-time availability, flexible cancellation policies, and complimentary travel insurance on all bookings over $1,500.
                </p>
                <div class="mt-4 text-xs text-emerald-700 font-medium">99.4% booking success rate</div>
            </div>
            
            <!-- Feature 3 -->
            <div class="feature-card bg-white p-6 rounded-3xl border border-slate-100">
                <div class="w-12 h-12 flex items-center justify-center bg-emerald-100 text-emerald-700 rounded-2xl mb-5 feature-icon">
                    <i class="fa-solid fa-leaf fa-lg"></i>
                </div>
                <h4 class="font-semibold text-lg">Sustainable Travel</h4>
                <p class="text-sm mt-2 leading-relaxed text-slate-600">
                    We offset 100% of carbon emissions for every journey. Partner with certified eco-lodges and community-led tourism initiatives to ensure your travel leaves a positive impact.
                </p>
                <div class="mt-4 text-xs text-emerald-700 font-medium">2.8 million kg CO₂ offset in 2024</div>
            </div>
            
            <!-- Feature 4 -->
            <div class="feature-card bg-white p-6 rounded-3xl border border-slate-100">
                <div class="w-12 h-12 flex items-center justify-center bg-emerald-100 text-emerald-700 rounded-2xl mb-5 feature-icon">
                    <i class="fa-solid fa-headset fa-lg"></i>
                </div>
                <h4 class="font-semibold text-lg">24/7 Concierge</h4>
                <p class="text-sm mt-2 leading-relaxed text-slate-600">
                    Dedicated travel advisors available around the clock. From flight delays to last-minute itinerary changes, our team handles every detail so you can travel with complete peace of mind.
                </p>
                <div class="mt-4 text-xs text-emerald-700 font-medium">Average response time: 7 minutes</div>
            </div>
        </div>
    </section>

    <!-- DEALS SECTION -->
    <section id="deals" class="max-w-screen-2xl mx-auto px-8 py-10">
        <div class="flex items-end justify-between mb-8">
            <div>
                <h2 class="section-header text-4xl font-bold tracking-tighter">Current Deals &amp; Offers</h2>
                <p class="text-slate-600">Limited-time savings on flights, hotels, and packages</p>
            </div>
            <a href="#" class="text-sm hidden md:flex items-center font-semibold text-emerald-700">See all deals <i class="fa-solid fa-chevron-right ml-1"></i></a>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            <div class="bg-white border border-slate-100 p-5 rounded-3xl flex gap-x-5 items-center">
                <div class="flex-shrink-0">
                    <img src="https://picsum.photos/id/1015/80/80" alt="Europe flight deal" class="rounded-2xl w-16 h-16 object-cover">
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex justify-between">
                        <div>
                            <span class="font-semibold">Europe Spring Escape</span>
                            <div class="text-xs text-emerald-600">Flight + Hotel • 30% off</div>
                        </div>
                        <div class="text-right">
                            <div class="font-bold">$899</div>
                            <div class="text-xs text-slate-400 line-through">$1,285</div>
                        </div>
                    </div>
                    <button onclick="claimDeal('Europe Spring Escape')" class="mt-3 px-4 py-1 text-xs font-semibold bg-emerald-700 text-white rounded-2xl hover:bg-emerald-800 transition-colors">Claim deal</button>
                </div>
            </div>
            
            <div class="bg-white border border-slate-100 p-5 rounded-3xl flex gap-x-5 items-center">
                <div class="flex-shrink-0">
                    <img src="https://picsum.photos/id/160/80/80" alt="Asia adventure" class="rounded-2xl w-16 h-16 object-cover">
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex justify-between">
                        <div>
                            <span class="font-semibold">Southeast Asia Adventure</span>
                            <div class="text-xs text-emerald-600">Multi-city package • 25% off</div>
                        </div>
                        <div class="text-right">
                            <div class="font-bold">$1,599</div>
                            <div class="text-xs text-slate-400 line-through">$2,125</div>
                        </div>
                    </div>
                    <button onclick="claimDeal('Southeast Asia Adventure')" class="mt-3 px-4 py-1 text-xs font-semibold bg-emerald-700 text-white rounded-2xl hover:bg-emerald-800 transition-colors">Claim deal</button>
                </div>
            </div>
            
            <div class="bg-white border border-slate-100 p-5 rounded-3xl flex gap-x-5 items-center">
                <div class="flex-shrink-0">
                    <img src="https://picsum.photos/id/1033/80/80" alt="Canada winter deal" class="rounded-2xl w-16 h-16 object-cover">
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex justify-between">
                        <div>
                            <span class="font-semibold">Rockies Winter Escape</span>
                            <div class="text-xs text-emerald-600">Flight + Ski pass • 18% off</div>
                        </div>
                        <div class="text-right">
                            <div class="font-bold">$1,275</div>
                            <div class="text-xs text-slate-400 line-through">$1,550</div>
                        </div>
                    </div>
                    <button onclick="claimDeal('Rockies Winter Escape')" class="mt-3 px-4 py-1 text-xs font-semibold bg-emerald-700 text-white rounded-2xl hover:bg-emerald-800 transition-colors">Claim deal</button>
                </div>
            </div>
        </div>
    </section>

    <!-- TRIP PLANNER & TOOLS -->
    <section id="tools" class="max-w-screen-2xl mx-auto px-8 py-16 bg-white border-t border-b border-slate-100">
        <div class="max-w-3xl mb-9">
            <span class="font-semibold text-emerald-700 text-sm tracking-wider">POWERFUL TOOLS</span>
            <h2 class="section-header text-4xl font-bold tracking-tighter">Plan your perfect trip</h2>
            <p class="mt-3 text-slate-600 text-lg">Use our interactive tools to budget, compare options, and create custom itineraries with confidence.</p>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            
            <!-- Currency Converter -->
            <div class="lg:col-span-7 bg-slate-50 rounded-3xl p-8 border border-slate-100">
                <div class="flex items-center gap-x-3 mb-6">
                    <div class="w-9 h-9 bg-emerald-700 flex items-center justify-center rounded-2xl">
                        <i class="fa-solid fa-exchange-alt text-white"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-xl">Currency Converter</h3>
                        <p class="text-sm text-slate-500">Real-time exchange rates for accurate budgeting</p>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-3xl border">
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
                        <!-- Amount -->
                        <div class="md:col-span-5">
                            <label class="text-xs font-semibold text-slate-500 tracking-wider">AMOUNT</label>
                            <div class="mt-1 relative">
                                <input type="number" id="amount" value="100" 
                                       class="w-full border border-slate-200 px-4 py-3 text-lg font-medium rounded-2xl focus:outline-none focus:ring-1 focus:ring-emerald-600"
                                       placeholder="100">
                            </div>
                        </div>
                        
                        <!-- From -->
                        <div class="md:col-span-3">
                            <label class="text-xs font-semibold text-slate-500 tracking-wider">FROM</label>
                            <select id="from" class="mt-1 w-full border border-slate-200 px-4 py-3 text-sm rounded-2xl focus:outline-none focus:ring-1 focus:ring-emerald-600">
                                <option value="USD">USD — US Dollar</option>
                                <option value="EUR">EUR — Euro</option>
                                <option value="GBP">GBP — British Pound</option>
                                <option value="JPY">JPY — Japanese Yen</option>
                                <option value="AUD">AUD — Australian Dollar</option>
                            </select>
                        </div>
                        
                        <!-- To -->
                        <div class="md:col-span-3">
                            <label class="text-xs font-semibold text-slate-500 tracking-wider">TO</label>
                            <select id="to" class="mt-1 w-full border border-slate-200 px-4 py-3 text-sm rounded-2xl focus:outline-none focus:ring-1 focus:ring-emerald-600">
                                <option value="EUR">EUR — Euro</option>
                                <option value="USD">USD — US Dollar</option>
                                <option value="GBP">GBP — British Pound</option>
                                <option value="JPY">JPY — Japanese Yen</option>
                                <option value="AUD">AUD — Australian Dollar</option>
                            </select>
                        </div>
                        
                        <div class="md:col-span-1 flex items-end">
                            <button onclick="convertCurrency()" 
                                    class="w-full bg-emerald-700 hover:bg-emerald-800 transition-colors text-white font-semibold px-4 py-[15px] rounded-2xl text-sm">
                                <i class="fa-solid fa-sync-alt"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="mt-6 bg-slate-50 border border-slate-100 px-5 py-4 rounded-2xl">
                        <div class="flex items-center justify-between">
                            <div class="text-xs font-medium text-slate-500">Converted amount</div>
                            <div id="result" class="font-bold text-2xl text-emerald-700">92.00 EUR</div>
                        </div>
                    </div>
                    
                    <div class="flex justify-between items-center mt-4 text-xs">
                        <div class="text-slate-400">Exchange rates updated: <span class="font-medium">Feb 3, 2025</span></div>
                        <button onclick="swapCurrencies()" class="text-emerald-700 font-medium flex items-center gap-x-1 hover:text-emerald-800">
                            <i class="fa-solid fa-exchange-alt"></i> 
                            <span class="text-xs">Swap</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Quick Trip Planner -->
            <div class="lg:col-span-5 bg-white border border-slate-100 p-8 rounded-3xl">
                <h3 class="font-semibold text-xl mb-1">Quick Trip Builder</h3>
                <p class="text-sm text-slate-500 mb-5">Get a personalized sample itinerary in seconds</p>
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-xs font-semibold mb-1.5 text-slate-600">Destination</label>
                        <select id="quick-dest" class="w-full border border-slate-200 px-4 py-3 text-sm rounded-2xl">
                            <option>Santorini, Greece</option>
                            <option>Kyoto, Japan</option>
                            <option>Banff, Canada</option>
                            <option>Marrakech, Morocco</option>
                            <option>Iceland</option>
                        </select>
                    </div>
                    
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold mb-1.5 text-slate-600">Duration</label>
                            <select id="quick-duration" class="w-full border border-slate-200 px-4 py-3 text-sm rounded-2xl">
                                <option>5 days</option>
                                <option>7 days</option>
                                <option>10 days</option>
                                <option>14 days</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold mb-1.5 text-slate-600">Travelers</label>
                            <select id="quick-travelers" class="w-full border border-slate-200 px-4 py-3 text-sm rounded-2xl">
                                <option>1 traveler</option>
                                <option>2 travelers</option>
                                <option>3-4 travelers</option>
                            </select>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-xs font-semibold mb-1.5 text-slate-600">Travel style</label>
                        <div class="flex flex-wrap gap-2">
                            <label class="flex items-center px-3 py-1.5 text-xs border border-slate-200 rounded-2xl cursor-pointer has-[:checked]:border-emerald-700 has-[:checked]:bg-emerald-50">
                                <input type="radio" name="style" value="Cultural" class="hidden" checked>
                                <span class="font-medium">Cultural</span>
                            </label>
                            <label class="flex items-center px-3 py-1.5 text-xs border border-slate-200 rounded-2xl cursor-pointer has-[:checked]:border-emerald-700 has-[:checked]:bg-emerald-50">
                                <input type="radio" name="style" value="Adventure" class="hidden">
                                <span class="font-medium">Adventure</span>
                            </label>
                            <label class="flex items-center px-3 py-1.5 text-xs border border-slate-200 rounded-2xl cursor-pointer has-[:checked]:border-emerald-700 has-[:checked]:bg-emerald-50">
                                <input type="radio" name="style" value="Relaxation" class="hidden">
                                <span class="font-medium">Relaxation</span>
                            </label>
                        </div>
                    </div>
                    
                    <button onclick="generateItinerary()" 
                            class="mt-2 w-full py-3.5 text-sm font-semibold bg-emerald-700 hover:bg-emerald-800 text-white rounded-3xl transition-colors">
                        Generate Sample Itinerary
                    </button>
                </div>
            </div>
            
        </div>
    </section>

    <!-- TESTIMONIALS -->
    <section id="testimonials" class="max-w-screen-2xl mx-auto px-8 py-16">
        <div class="mb-9">
            <span class="text-emerald-700 font-semibold tracking-wider text-sm">FROM OUR COMMUNITY</span>
            <h2 class="section-header text-4xl font-bold tracking-tighter">Voices from the Road</h2>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Testimonial 1 -->
            <div class="testimonial-card bg-white border border-slate-100 p-7 rounded-3xl">
                <div class="flex mb-4">
                    <div class="text-amber-400">
                        <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>
                <p class="text-slate-600 leading-relaxed">"Nomadica completely transformed how I travel. Their detailed Kyoto itinerary included hidden temples and private tea ceremonies that I would never have discovered on my own. The booking process was seamless and the support team was incredible."</p>
                
                <div class="mt-6 flex items-center gap-x-3">
                    <img src="https://i.pravatar.cc/40?u=elena" alt="Elena Torres" class="w-10 h-10 rounded-full">
                    <div>
                        <div class="font-semibold">Elena Torres</div>
                        <div class="text-xs text-slate-500">Marketing Director • San Francisco</div>
                    </div>
                </div>
            </div>
            
            <!-- Testimonial 2 -->
            <div class="testimonial-card bg-white border border-slate-100 p-7 rounded-3xl">
                <div class="flex mb-4">
                    <div class="text-amber-400">
                        <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>
                </div>
                <p class="text-slate-600 leading-relaxed">"The currency converter saved me hundreds on my last trip to Morocco. More importantly, their sustainable travel options helped me find an ethical safari in Tanzania that aligned perfectly with my values. Highly recommended."</p>
                
                <div class="mt-6 flex items-center gap-x-3">
                    <img src="https://i.pravatar.cc/40?u=raj" alt="Raj Patel" class="w-10 h-10 rounded-full">
                    <div>
                        <div class="font-semibold">Raj Patel</div>
                        <div class="text-xs text-slate-500">Software Engineer • London</div>
                    </div>
                </div>
            </div>
            
            <!-- Testimonial 3 -->
            <div class="testimonial-card bg-white border border-slate-100 p-7 rounded-3xl">
                <div class="flex mb-4">
                    <div class="text-amber-400">
                        <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>
                </div>
                <p class="text-slate-600 leading-relaxed">"My husband and I used Nomadica for our 10th anniversary trip to Santorini. The level of detail in the itinerary was exceptional. From private yacht charters to the perfect restaurant recommendations, everything was flawless."</p>
                
                <div class="mt-6 flex items-center gap-x-3">
                    <img src="https://i.pravatar.cc/40?u=amara" alt="Amara Chen" class="w-10 h-10 rounded-full">
                    <div>
                        <div class="font-semibold">Amara Chen</div>
                        <div class="text-xs text-slate-500">Creative Director • Singapore</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FINAL CTA -->
    <section class="max-w-screen-2xl mx-auto px-8 pb-16">
        <div class="bg-emerald-800 text-white rounded-3xl px-10 py-12 md:py-10 md:px-12 flex flex-col md:flex-row items-center gap-y-8 md:gap-x-12">
            <div class="flex-1">
                <h3 class="text-4xl font-bold tracking-tighter">Ready to begin your next chapter?</h3>
                <p class="mt-2 text-emerald-100 max-w-md">Join over 120,000 travelers who plan smarter and travel deeper with Nomadica.</p>
            </div>
            <div class="flex flex-col sm:flex-row gap-3">
                <button onclick="document.getElementById('tools').scrollIntoView({ behavior: 'smooth' })" 
                        class="px-8 py-4 text-sm font-semibold bg-white text-emerald-900 rounded-3xl hover:bg-emerald-50 transition-colors">
                    Start Planning Free
                </button>
                <button onclick="window.location.href='#difference'" 
                        class="px-8 py-4 text-sm font-semibold border border-white/30 hover:bg-emerald-700 rounded-3xl transition-colors">
                    Learn More
                </button>
            </div>
        </div>
    </section>

    <!-- FOOTER -->
    <footer id="resources" class="bg-slate-900 text-slate-300 pt-12 pb-8">
        <div class="max-w-screen-2xl mx-auto px-8">
            <div class="grid grid-cols-2 md:grid-cols-5 gap-y-10">
                <!-- Company -->
                <div class="col-span-2 md:col-span-1">
                    <div class="flex items-center gap-x-2">
                        <img src="https://placehold.co/140x40/0f766e/ffffff?text=Nomadica" class="h-7" alt="Nomadica">
                    </div>
                    <p class="mt-4 text-sm pr-4">Thoughtfully designed travel experiences for the curious explorer.</p>
                    
                    <div class="mt-6 flex gap-x-4">
                        <a href="#" class="text-slate-400 hover:text-white"><i class="fa-brands fa-instagram text-lg"></i></a>
                        <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>
                    </div>
                </div>
                
                <div>
                    <h5 class="font-semibold text-white mb-4 text-sm tracking-wider">EXPLORE</h5>
                    <ul class="space-y-[7px] text-sm">
                        <li><a href="#destinations" class="hover:text-white transition-colors">Destinations</a></li>
                        <li><a href="#experiences" class="hover:text-white transition-colors">Experiences</a></li>
                        <li><a href="#deals" class="hover:text-white transition-colors">Special Offers</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">Travel Guides</a></li>
                    </ul>
                </div>
                
                <div>
                    <h5 class="font-semibold text-white mb-4 text-sm tracking-wider">RESOURCES</h5>
                    <ul class="space-y-[7px] text-sm">
                        <li><a href="#" class="hover:text-white transition-colors">Trip Planner</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">Travel Insurance</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">Packing Guides</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">Blog &amp; Stories</a></li>
                    </ul>
                </div>
                
                <div>
                    <h5 class="font-semibold text-white mb-4 text-sm tracking-wider">COMPANY</h5>
                    <ul class="space-y-[7px] text-sm">
                        <li><a href="#difference" class="hover:text-white transition-colors">About Us</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">Our Team</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">Sustainability</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
                    </ul>
                </div>
                
                <div>
                    <h5 class="font-semibold text-white mb-4 text-sm tracking-wider">CONTACT</h5>
                    <ul class="space-y-2 text-sm">
                        <li><a href="mailto:hello@nomadica.com" class="hover:text-white transition-colors">hello@nomadica.com</a></li>
                        <li><a href="tel:+18006662342" class="hover:text-white transition-colors">+1 (800) 666-2342</a></li>
                        <li class="pt-1">450 Travel Plaza<br>Brooklyn, NY 11201</li>
                    </ul>
                    
                    <div class="mt-6">
                        <div class="text-xs text-slate-400">24/7 global support</div>
                    </div>
                </div>
            </div>
            
            <div class="mt-14 pt-8 border-t border-slate-800 flex flex-col md:flex-row md:items-center md:justify-between gap-y-4 text-sm">
                <div class="text-slate-400 text-xs md:text-sm">
                    &copy; 2025 Nomadica. All rights reserved.
                </div>
                <div class="flex flex-wrap gap-x-5 text-xs text-slate-400">
                    <a href="#" class="hover:text-white">Privacy Policy</a>
                    <a href="#" class="hover:text-white">Terms of Service</a>
                    <a href="#" class="hover:text-white">Accessibility</a>
                    <a href="#" class="hover:text-white">Cookie Settings</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        // Tailwind script configuration
        function initializeTailwind() {
            document.documentElement.style.setProperty('--primary', '#0f766e');
            
            tailwind.config = {
                theme: {
                    extend: {
                        fontFamily: {
                            'serif-custom': ['Playfair Display', 'Georgia', 'serif']
                        }
                    }
                }
            };
        }
        
        // Initialize everything
        function initializePage() {
            initializeTailwind();
            
            // Set default currency values
            setTimeout(() => {
                const amountInput = document.getElementById('amount');
                const fromSelect = document.getElementById('from');
                const toSelect = document.getElementById('to');
                
                if (amountInput) amountInput.value = "100";
                if (fromSelect) fromSelect.value = "USD";
                if (toSelect) toSelect.value = "EUR";
                
                // Initial conversion
                convertCurrency();
            }, 1200);
            
            // Add subtle animation to hero stats
            const heroStats = document.querySelector('.hero-bg .absolute');
            if (heroStats) {
                heroStats.classList.add('transition-all');
            }
            
            // Keyboard support for currency converter
            const amountField = document.getElementById('amount');
            if (amountField) {
                amountField.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        convertCurrency();
                    }
                });
            }
            
            // Make selects trigger conversion on change
            const selects = document.querySelectorAll('#from, #to');
            selects.forEach(select => {
                select.addEventListener('change', function() {
                    const amount = document.getElementById('amount');
                    if (amount && amount.value) {
                        convertCurrency();
                    }
                });
            });
            
            // Mobile nav setup
            console.log('%c[Nomadica] Production-quality travel homepage initialized successfully.', 'color:#64748b');
        }
        
        // Currency Converter
        function convertCurrency() {
            const amount = parseFloat(document.getElementById('amount').value) || 0;
            const from = document.getElementById('from').value;
            const to = document.getElementById('to').value;
            
            const rates = {
                'USD': 1,
                'EUR': 0.92,
                'GBP': 0.77,
                'JPY': 151.5,
                'AUD': 1.49
            };
            
            if (!rates[from] || !rates[to]) {
                document.getElementById('result').innerHTML = `<span class="text-red-500">Invalid currency</span>`;
                return;
            }
            
            // Convert to USD first, then to target currency
            const usdEquivalent = amount / rates[from];
            const convertedAmount = usdEquivalent * rates[to];
            
            const resultEl = document.getElementById('result');
            resultEl.innerHTML = `${convertedAmount.toFixed(2)} ${to}`;
            
            // Add a subtle animation
            resultEl.style.transition = 'all 0.3s ease';
            resultEl.style.transform = 'scale(1.05)';
            setTimeout(() => {
                if (resultEl) resultEl.style.transform = 'scale(1)';
            }, 280);
        }
        
        function swapCurrencies() {
            const fromSelect = document.getElementById('from');
            const toSelect = document.getElementById('to');
            const amountInput = document.getElementById('amount');
            
            // Swap values
            const temp = fromSelect.value;
            fromSelect.value = toSelect.value;
            toSelect.value = temp;
            
            // Re-convert
            setTimeout(() => {
                convertCurrency();
            }, 50);
        }
        
        // Generate sample itinerary
        function generateItinerary() {
            const dest = document.getElementById('quick-dest').value;
            const duration = document.getElementById('quick-duration').value;
            const travelers = document.getElementById('quick-travelers').value;
            
            // Get selected travel style
            const styleRadios = document.querySelectorAll('input[name="style"]');
            let style = 'Cultural';
            styleRadios.forEach(radio => {
                if (radio.checked) style = radio.value;
            });
            
            const resultHTML = `
                <div class="mt-5 p-5 border border-emerald-200 bg-emerald-50 rounded-3xl">
                    <div class="flex items-center justify-between mb-3">
                        <div>
                            <span class="font-semibold">${dest}</span>
                            <span class="block text-xs text-emerald-700">${duration} • ${travelers}</span>
                        </div>
                        <span class="text-xs px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full font-medium">${style}</span>
                    </div>
                    
                    <div class="text-sm">
                        <div class="font-medium mb-2">Sample Itinerary Highlights:</div>
                        <ul class="space-y-1 text-xs">
                            <li class="flex items-center gap-x-2"><i class="fa-solid fa-check text-emerald-600 w-3"></i> Day 1: Arrival &amp; welcome dinner</li>
                            <li class="flex items-center gap-x-2"><i class="fa-solid fa-check text-emerald-600 w-3"></i> Day 3: Private guided tour</li>
                            <li class="flex items-center gap-x-2"><i class="fa-solid fa-check text-emerald-600 w-3"></i> Day 5: Local cultural experience</li>
                            <li class="flex items-center gap-x-2"><i class="fa-solid fa-check text-emerald-600 w-3"></i> Day ${duration.split(' ')[0]}: Departure</li>
                        </ul>
                    </div>
                    
                    <div class="mt-4 pt-4 border-t border-emerald-200 flex items-center justify-between">
                        <div>
                            <span class="text-xs">Estimated cost:</span> 
                            <span class="font-bold">${Math.floor(Math.random() * 2800) + 1800}</span>
                        </div>
                        <button onclick="document.getElementById('tools').scrollIntoView({behavior:'smooth'}); alert('Thank you! A full itinerary has been emailed to you.')" 
                                class="text-xs font-semibold px-4 py-1.5 bg-emerald-700 text-white rounded-2xl">View full plan</button>
                    </div>
                </div>
            `;
            
            // Find the quick trip builder container and append result
            const container = document.querySelector('#tools .lg\\:col-span-5');
            const existingResult = container.querySelector('.mt-5.p-5');
            
            if (existingResult) {
                existingResult.remove();
            }
            
            container.insertAdjacentHTML('beforeend', resultHTML);
            
            // Scroll to result
            setTimeout(() => {
                const newResult = container.querySelector('.mt-5.p-5');
                if (newResult) {
                    newResult.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }, 400);
        }
        
        // Select destination action
        function selectDestination(destination) {
            const toolsSection = document.getElementById('tools');
            toolsSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
            
            setTimeout(() => {
                const destSelect = document.getElementById('quick-dest');
                if (destSelect) {
                    destSelect.value = destination;
                    
                    // Optional flash effect
                    destSelect.style.transition = 'all 0.1s ease';
                    destSelect.style.boxShadow = '0 0 0 3px #a7f3d0';
                    
                    setTimeout(() => {
                        if (destSelect) destSelect.style.boxShadow = 'none';
                    }, 1100);
                }
            }, 800);
        }
        
        // Book experience
        function bookExperience(experienceName) {
            const modal = document.createElement('div');
            modal.className = `fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[90]`;
            modal.innerHTML = `
                <div class="bg-white max-w-md w-full mx-4 rounded-3xl p-7">
                    <div class="flex justify-between items-center mb-2">
                        <div>
                            <span class="font-semibold text-xl">${experienceName}</span>
                        </div>
                        <button onclick="this.closest('.fixed').remove()" class="text-slate-400 hover:text-slate-700">
                            <i class="fa-solid fa-times text-xl"></i>
                        </button>
                    </div>
                    
                    <div class="text-sm text-slate-600 mt-2">
                        Thank you for your interest. Our travel specialists will contact you within 2 hours to customize your experience and confirm availability.
                    </div>
                    
                    <div class="mt-6">
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="text-xs font-semibold text-slate-600">Preferred travel date</label>
                                <input type="date" value="2025-04-15" class="w-full border border-slate-200 px-3 py-2.5 rounded-2xl text-sm mt-1">
                            </div>
                            <div>
                                <label class="text-xs font-semibold text-slate-600">Number of travelers</label>
                                <select class="w-full border border-slate-200 px-3 py-2.5 rounded-2xl text-sm mt-1">
                                    <option>2 travelers</option>
                                    <option>1 traveler</option>
                                    <option>3 travelers</option>
                                    <option>4+ travelers</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="mt-5">
                            <button onclick="completeBooking(this)" class="w-full py-3.5 text-sm font-semibold bg-emerald-700 hover:bg-emerald-800 text-white transition-colors rounded-3xl">
                                Reserve My Spot
                            </button>
                            <div class="text-center text-xs mt-3 text-slate-400">No payment required to reserve</div>
                        </div>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
        }
        
        function completeBooking(element) {
            const parentModal = element.closest('.fixed');
            if (parentModal) {
                parentModal.innerHTML = `
                    <div class="bg-white max-w-md w-full mx-4 rounded-3xl p-8 text-center">
                        <div class="mx-auto flex justify-center mb-4">
                            <div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center">
                                <i class="fa-solid fa-check text-emerald-700 text-2xl"></i>
                            </div>
                        </div>
                        
                        <h4 class="font-semibold text-xl">Reservation Confirmed</h4>
                        <p class="mt-2 text-sm text-slate-600">A detailed confirmation and next steps have been sent to your email.</p>
                        
                        <div class="mt-6">
                            <button onclick="this.closest('.fixed').remove()" class="px-8 py-3 text-sm font-semibold bg-emerald-700 text-white rounded-3xl">Return to Homepage</button>
                        </div>
                    </div>
                `;
                
                setTimeout(() => {
                    if (parentModal && parentModal.parentNode) {
                        parentModal.parentNode.removeChild(parentModal);
                    }
                }, 4200);
            }
        }
        
        function claimDeal(dealName) {
            const modalHTML = `
                <div class="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-[90]">
                    <div class="max-w-md w-full mx-4 bg-white rounded-3xl p-7">
                        <div class="flex justify-between">
                            <div>
                                <span class="font-semibold">${dealName}</span>
                                <div class="text-emerald-700 text-sm">Deal expires Feb 28, 2025</div>
                            </div>
                            <button onclick="this.closest('.fixed').remove()" class="text-slate-400">×</button>
                        </div>
                        
                        <div class="my-6 border-t border-b border-slate-100 py-4">
                            <div class="flex items-baseline gap-x-2">
                                <div class="text-3xl font-bold">Limited spots remaining</div>
                            </div>
                            <div class="mt-2 text-xs">Only 14 packages left at this price.</div>
                        </div>
                        
                        <button onclick="completeBooking(this)" class="w-full py-4 text-sm font-semibold bg-emerald-700 hover:bg-emerald-800 transition-colors text-white rounded-3xl">
                            Secure this deal
                        </button>
                        
                        <div class="text-center mt-3">
                            <span class="text-xs text-slate-400">Cancel anytime within 24 hours</span>
                        </div>
                    </div>
                </div>
            `;
            
            document.body.insertAdjacentHTML('beforeend', modalHTML);
        }
        
        // Mobile navigation toggle
        function toggleMobileNav() {
            const existingNav = document.getElementById('mobile-nav');
            if (existingNav) {
                existingNav.remove();
                return;
            }
            
            const mobileNav = document.createElement('div');
            mobileNav.id = 'mobile-nav';
            mobileNav.className = `fixed inset-0 bg-white z-[100] md:hidden`;
            mobileNav.innerHTML = `
                <div class="px-6 py-5 border-b flex justify-between items-center">
                    <div class="flex items-center">
                        <img src="https://placehold.co/150x40/0f766e/ffffff?text=Nomadica" alt="Logo" class="h-8">
                    </div>
                    <button onclick="document.getElementById('mobile-nav').remove()" class="w-9 h-9 flex items-center justify-center">
                        <i class="fa-solid fa-times text-xl"></i>
                    </button>
                </div>
                
                <div class="px-6 py-3">
                    <a href="#destinations" class="block py-3 text-base font-medium border-b border-slate-100">Destinations</a>
                    <a href="#experiences" class="block py-3 text-base font-medium border-b border-slate-100">Experiences</a>
                    <a href="#tools" class="block py-3 text-base font-medium border-b border-slate-100">Trip Planner</a>
                    <a href="#deals" class="block py-3 text-base font-medium border-b border-slate-100">Deals</a>
                    <a href="#difference" class="block py-3 text-base font-medium border-b border-slate-100">About</a>
                    <a href="#resources" class="block py-3 text-base font-medium">Resources</a>
                </div>
                
                <div class="px-6 pt-6">
                    <button onclick="document.getElementById('tools').scrollIntoView({ behavior: 'smooth' }); document.getElementById('mobile-nav').remove();" 
                            class="w-full py-3 bg-emerald-700 text-white font-semibold rounded-3xl text-sm">
                        Start Planning
                    </button>
                </div>
            `;
            
            document.body.appendChild(mobileNav);
        }
        
        // Initialize the page
        window.onload = function() {
            initializePage();
            
            // Bonus: Pre-fill currency converter result on load
            setTimeout(() => {
                const resultEl = document.getElementById('result');
                if (resultEl && resultEl.innerHTML === '92.00 EUR') {
                    // Already handled in initialization
                }
            }, 500);
            
            // Optional: Add scroll-based header style change
            let lastScroll = 0;
            window.addEventListener('scroll', () => {
                const header = document.querySelector('header');
                if (!header) return;
                
                const currentScroll = window.scrollY;
                
                if (currentScroll > 80) {
                    header.style.boxShadow = '0 2px 8px rgba(15, 23, 42, 0.06)';
                } else {
                    header.style.boxShadow = '';
                }
                
                lastScroll = currentScroll;
            });
            
            // Easter egg: Logo click scrolls to top
            const logo = document.querySelector('header img');
            if (logo) {
                logo.style.cursor = 'pointer';
                logo.addEventListener('click', () => {
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                });
            }
        }
        
        // Keyboard accessibility
        document.addEventListener('keydown', function(e) {
            if (e.key === "/" && document.activeElement.tagName === "BODY") {
                e.preventDefault();
                const amount = document.getElementById('amount');
                if (amount) {
                    amount.focus();
                    amount.select();
                }
            }
        });
    </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:20.673Z",
  "url": "https://benchmark.aimac.invalid/8566837a39171f15ae2a5d57693dcf56e2b011281ca6d309a70cbc34933ae8f0.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-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": []
    },
    {
      "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-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": []
    },
    {
      "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-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": []
    },
    {
      "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": "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": []
    },
    {
      "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": []
    },
    {
      "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": "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": "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-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 antialiased text-slate-800\">",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\" style=\"--primary: #0f766e;\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": "critical",
      "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=\"document.getElementById('tools').scrollIntoView({ behavior: 'smooth' })\" class=\"hidden md:block px-5 py-2.5 text-sm font-semibold text-slate-700 hover:text-slate-900 transition-colors\">\n                        Log in\n                    </button>",
          "target": [
            ".md\\:block"
          ]
        }
      ]
    },
    {
      "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 md:text-7xl font-bold tracking-tighter text-white leading-none\">\n                    Wander with<br>purpose.\n                </h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2 class=\"section-header text-5xl font-bold tracking-tighter text-slate-900\">Featured Destinations</h2>",
                  "target": [
                    "#destinations > .md\\:items-end.md\\:justify-between.md\\:flex-row > div > .text-5xl.text-slate-900"
                  ]
                },
                {
                  "html": "<h3 class=\"font-semibold text-xl\">Santorini, Greece</h3>",
                  "target": [
                    ".overflow-hidden.shadow-sm.travel-card:nth-child(1) > .p-5 > .items-start.justify-between.flex > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3 class=\"font-semibold text-xl\">Kyoto, Japan</h3>",
                  "target": [
                    ".overflow-hidden.shadow-sm.travel-card:nth-child(2) > .p-5 > .items-start.justify-between.flex > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3 class=\"font-semibold text-xl\">Banff, Canada</h3>",
                  "target": [
                    ".overflow-hidden.shadow-sm.travel-card:nth-child(3) > .p-5 > .items-start.justify-between.flex > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3 class=\"font-semibold text-xl\">Marrakech, Morocco</h3>",
                  "target": [
                    ".overflow-hidden.shadow-sm.travel-card:nth-child(4) > .p-5 > .items-start.justify-between.flex > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-header text-5xl font-bold tracking-tighter text-slate-900\">Curated Experiences</h2>",
                  "target": [
                    "#experiences > .max-w-screen-2xl.mx-auto.px-8 > .md\\:items-end.md\\:justify-between.md\\:flex-row > div > .text-5xl.text-slate-900"
                  ]
                },
                {
                  "html": "<h3 class=\"font-semibold text-xl\">Tuscan Wine &amp; Truffle Tour</h3>",
                  "target": [
                    ".bg-slate-50.travel-card.p-6:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3 class=\"font-semibold text-xl\">Serengeti Private Safari</h3>",
                  "target": [
                    ".bg-slate-50.travel-card.p-6:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3 class=\"font-semibold text-xl\">Iceland Northern Lights Quest</h3>",
                  "target": [
                    ".bg-slate-50.travel-card.p-6:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-header text-5xl font-bold tracking-tighter\">The Nomadica Difference</h2>",
                  "target": [
                    ".mb-10 > .text-5xl"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg\">Expert Itineraries</h4>",
                  "target": [
                    ".feature-card.p-6.border-slate-100:nth-child(1) > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg\">Seamless Booking</h4>",
                  "target": [
                    ".feature-card.p-6.border-slate-100:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg\">Sustainable Travel</h4>",
                  "target": [
                    ".feature-card.p-6.border-slate-100:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg\">24/7 Concierge</h4>",
                  "target": [
                    ".feature-card.p-6.border-slate-100:nth-child(4) > h4"
                  ]
                },
                {
                  "html": "<h2 class=\"section-header text-4xl font-bold tracking-tighter\">Current Deals &amp; Offers</h2>",
                  "target": [
                    ".mb-8 > div > .text-4xl"
                  ]
                },
                {
                  "html": "<h2 class=\"section-header text-4xl font-bold tracking-tighter\">Plan your perfect trip</h2>",
                  "target": [
                    ".max-w-3xl > .text-4xl"
                  ]
                },
                {
                  "html": "<h3 class=\"font-semibold text-xl\">Currency Converter</h3>",
                  "target": [
                    ".mb-6.gap-x-3.items-center > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3 class=\"font-semibold text-xl mb-1\">Quick Trip Builder</h3>",
                  "target": [
                    ".mb-1"
                  ]
                },
                {
                  "html": "<h2 class=\"section-header text-4xl font-bold tracking-tighter\">Voices from the Road</h2>",
                  "target": [
                    "#testimonials > .mb-9 > .text-4xl"
                  ]
                },
                {
                  "html": "<h3 class=\"text-4xl font-bold tracking-tighter\">Ready to begin your next chapter?</h3>",
                  "target": [
                    ".flex-1 > .text-4xl.tracking-tighter"
                  ]
                },
                {
                  "html": "<h5 class=\"font-semibold text-white mb-4 text-sm tracking-wider\">EXPLORE</h5>",
                  "target": [
                    "div:nth-child(2) > h5"
                  ]
                },
                {
                  "html": "<h5 class=\"font-semibold text-white mb-4 text-sm tracking-wider\">RESOURCES</h5>",
                  "target": [
                    "div:nth-child(3) > h5"
                  ]
                },
                {
                  "html": "<h5 class=\"font-semibold text-white mb-4 text-sm tracking-wider\">COMPANY</h5>",
                  "target": [
                    "div:nth-child(4) > h5"
                  ]
                },
                {
                  "html": "<h5 class=\"font-semibold text-white mb-4 text-sm tracking-wider\">CONTACT</h5>",
                  "target": [
                    "div:nth-child(5) > h5"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\" style=\"--primary: #0f766e;\">",
          "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": "normal",
                "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=\"font-semibold text-3xl tracking-tighter text-slate-900\">Nomadica</span>",
          "target": [
            ".text-3xl"
          ]
        }
      ]
    },
    {
      "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\" style=\"--primary: #0f766e;\">",
          "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 type=\"number\" id=\"amount\" value=\"100\" class=\"w-full border border-slate-200 px-4 py-3 text-lg font-medium rounded-2xl focus:outline-none focus:ring-1 focus:ring-emerald-600\" placeholder=\"100\">",
          "target": [
            "#amount"
          ]
        }
      ]
    },
    {
      "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\" style=\"--primary: #0f766e;\">",
          "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\" style=\"--primary: #0f766e;\">",
          "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/180x52/0f766e/ffffff?text=Nomadica&amp;font=montserrat\" alt=\"Nomadica Logo\" class=\"h-11 w-auto object-contain\" style=\"cursor: pointer;\">",
          "target": [
            ".w-auto"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "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": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"number\" id=\"amount\" value=\"100\" class=\"w-full border border-slate-200 px-4 py-3 text-lg font-medium rounded-2xl focus:outline-none focus:ring-1 focus:ring-emerald-600\" placeholder=\"100\">",
          "target": [
            "#amount"
          ]
        }
      ]
    },
    {
      "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"
            }
          ],
          "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=\"#destinations\" class=\"nav-link text-slate-700 font-medium px-1\">Destinations</a>",
          "target": [
            ".nav-link.px-1[href$=\"#destinations\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul class=\"space-y-[7px] text-sm\">",
          "target": [
            "div:nth-child(2) > .space-y-\\[7px\\]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><a href=\"#destinations\" class=\"hover:text-white transition-colors\">Destinations</a></li>",
          "target": [
            "div:nth-child(2) > .space-y-\\[7px\\] > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "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/180x52/0f766e/ffffff?text=Nomadica&amp;font=montserrat\" alt=\"Nomadica Logo\" class=\"h-11 w-auto object-contain\" style=\"cursor: pointer;\">",
          "target": [
            ".w-auto"
          ]
        }
      ]
    },
    {
      "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-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=\"#destinations\" class=\"nav-link text-slate-700 font-medium px-1\">Destinations</a>",
          "target": [
            ".nav-link.px-1[href$=\"#destinations\"]"
          ]
        }
      ]
    }
  ],
  "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": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"inline-flex items-center gap-x-2 px-4 py-1.5 bg-white/90 backdrop-blur-md rounded-3xl mb-6 border border-white/40\">",
                  "target": [
                    ".backdrop-blur-md"
                  ]
                },
                {
                  "html": "<section class=\"hero-bg h-screen flex items-center relative\">",
                  "target": [
                    ".hero-bg"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-emerald-700 text-xs font-semibold tracking-widest\">2025 TRAVEL AWARDS WINNER</span>",
          "target": [
            ".tracking-widest"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a background gradient"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "button-name",
      "impact": "critical",
      "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 does not have inner text that is visible to screen readers"
            },
            {
              "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": "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": "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": "<button onclick=\"convertCurrency()\" class=\"w-full bg-emerald-700 hover:bg-emerald-800 transition-colors text-white font-semibold px-4 py-[15px] rounded-2xl text-sm\">\n                                <i class=\"fa-solid fa-sync-alt\"></i>\n                            </button>",
          "target": [
            ".py-\\[15px\\]"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have inner 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\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        }
      ]
    },
    {
      "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": "#059669",
                "bgColor": "#ffffff",
                "contrastRatio": 3.76,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"travel-card bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-sm\">",
                  "target": [
                    ".overflow-hidden.shadow-sm.travel-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-emerald-600 text-sm font-medium\">Cyclades Islands</p>",
          "target": [
            ".overflow-hidden.shadow-sm.travel-card:nth-child(1) > .p-5 > .items-start.justify-between.flex > div:nth-child(1) > .text-emerald-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#059669",
                "bgColor": "#ffffff",
                "contrastRatio": 3.76,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"travel-card bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-sm\">",
                  "target": [
                    ".overflow-hidden.shadow-sm.travel-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-emerald-600 text-sm font-medium\">Kansai Region</p>",
          "target": [
            ".overflow-hidden.shadow-sm.travel-card:nth-child(2) > .p-5 > .items-start.justify-between.flex > div:nth-child(1) > .text-emerald-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#059669",
                "bgColor": "#ffffff",
                "contrastRatio": 3.76,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"travel-card bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-sm\">",
                  "target": [
                    ".overflow-hidden.shadow-sm.travel-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-emerald-600 text-sm font-medium\">Alberta Rockies</p>",
          "target": [
            ".overflow-hidden.shadow-sm.travel-card:nth-child(3) > .p-5 > .items-start.justify-between.flex > div:nth-child(1) > .text-emerald-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#059669",
                "bgColor": "#ffffff",
                "contrastRatio": 3.76,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"travel-card bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-sm\">",
                  "target": [
                    ".overflow-hidden.shadow-sm.travel-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-emerald-600 text-sm font-medium\">Marrakesh-Safi</p>",
          "target": [
            ".overflow-hidden.shadow-sm.travel-card:nth-child(4) > .p-5 > .items-start.justify-between.flex > div:nth-child(1) > .text-emerald-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#059669",
                "bgColor": "#f8fafc",
                "contrastRatio": 3.6,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"travel-card bg-slate-50 border border-slate-100 rounded-3xl p-6\">",
                  "target": [
                    ".bg-slate-50.travel-card.p-6:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.6 (foreground color: #059669, background color: #f8fafc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>1,942 travelers joined</span>",
          "target": [
            ".bg-slate-50.travel-card.p-6:nth-child(1) > .gap-x-1.text-emerald-600.mt-3 > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.6 (foreground color: #059669, background color: #f8fafc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#059669",
                "bgColor": "#f8fafc",
                "contrastRatio": 3.6,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"travel-card bg-slate-50 border border-slate-100 rounded-3xl p-6\">",
                  "target": [
                    ".bg-slate-50.travel-card.p-6:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.6 (foreground color: #059669, background color: #f8fafc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>784 travelers joined</span>",
          "target": [
            ".bg-slate-50.travel-card.p-6:nth-child(2) > .gap-x-1.text-emerald-600.mt-3 > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.6 (foreground color: #059669, background color: #f8fafc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#059669",
                "bgColor": "#f8fafc",
                "contrastRatio": 3.6,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"travel-card bg-slate-50 border border-slate-100 rounded-3xl p-6\">",
                  "target": [
                    ".bg-slate-50.travel-card.p-6:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.6 (foreground color: #059669, background color: #f8fafc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>1,156 travelers joined</span>",
          "target": [
            ".bg-slate-50.travel-card.p-6:nth-child(3) > .gap-x-1.text-emerald-600.mt-3 > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.6 (foreground color: #059669, background color: #f8fafc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#059669",
                "bgColor": "#ffffff",
                "contrastRatio": 3.76,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white border border-slate-100 p-5 rounded-3xl flex gap-x-5 items-center\">",
                  "target": [
                    ".gap-x-5.p-5.border-slate-100:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"text-xs text-emerald-600\">Flight + Hotel \u2022 30% off</div>",
          "target": [
            ".gap-x-5.p-5.border-slate-100:nth-child(1) > .min-w-0.flex-1 > .justify-between.flex > div:nth-child(1) > .text-emerald-600.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.76 (foreground color: #059669, 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 border border-slate-100 p-5 rounded-3xl flex gap-x-5 items-center\">",
                  "target": [
                    ".gap-x-5.p-5.border-slate-100: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": "<div class=\"text-xs text-slate-400 line-through\">$1,285</div>",
          "target": [
            ".gap-x-5.p-5.border-slate-100:nth-child(1) > .min-w-0.flex-1 > .justify-between.flex > .text-right > .line-through.text-slate-400.text-xs"
          ],
          "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": "#059669",
                "bgColor": "#ffffff",
                "contrastRatio": 3.76,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white border border-slate-100 p-5 rounded-3xl flex gap-x-5 items-center\">",
                  "target": [
                    ".gap-x-5.p-5.border-slate-100:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"text-xs text-emerald-600\">Multi-city package \u2022 25% off</div>",
          "target": [
            ".gap-x-5.p-5.border-slate-100:nth-child(2) > .min-w-0.flex-1 > .justify-between.flex > div:nth-child(1) > .text-emerald-600.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.76 (foreground color: #059669, 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 border border-slate-100 p-5 rounded-3xl flex gap-x-5 items-center\">",
                  "target": [
                    ".gap-x-5.p-5.border-slate-100: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": "<div class=\"text-xs text-slate-400 line-through\">$2,125</div>",
          "target": [
            ".gap-x-5.p-5.border-slate-100:nth-child(2) > .min-w-0.flex-1 > .justify-between.flex > .text-right > .line-through.text-slate-400.text-xs"
          ],
          "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": "#059669",
                "bgColor": "#ffffff",
                "contrastRatio": 3.76,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white border border-slate-100 p-5 rounded-3xl flex gap-x-5 items-center\">",
                  "target": [
                    ".gap-x-5.p-5.border-slate-100:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.76 (foreground color: #059669, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"text-xs text-emerald-600\">Flight + Ski pass \u2022 18% off</div>",
          "target": [
            ".gap-x-5.p-5.border-slate-100:nth-child(3) > .min-w-0.flex-1 > .justify-between.flex > div:nth-child(1) > .text-emerald-600.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.76 (foreground color: #059669, 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 border border-slate-100 p-5 rounded-3xl flex gap-x-5 items-center\">",
                  "target": [
                    ".gap-x-5.p-5.border-slate-100: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": "<div class=\"text-xs text-slate-400 line-through\">$1,550</div>",
          "target": [
            ".gap-x-5.p-5.border-slate-100:nth-child(3) > .min-w-0.flex-1 > .justify-between.flex > .text-right > .line-through.text-slate-400.text-xs"
          ],
          "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-6 rounded-3xl border\">",
                  "target": [
                    ".lg\\:col-span-7 > .p-6.bg-white.rounded-3xl"
                  ]
                }
              ],
              "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": "<div class=\"text-slate-400\">Exchange rates updated: <span class=\"font-medium\">Feb 3, 2025</span></div>",
          "target": [
            ".mt-4.justify-between.items-center > .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-6 rounded-3xl border\">",
                  "target": [
                    ".lg\\:col-span-7 > .p-6.bg-white.rounded-3xl"
                  ]
                }
              ],
              "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=\"font-medium\">Feb 3, 2025</span>",
          "target": [
            ".text-slate-400 > .font-medium"
          ],
          "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": "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-instagram 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-twitter 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-linkedin-in 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=\"from\" class=\"mt-1 w-full border border-slate-200 px-4 py-3 text-sm rounded-2xl focus:outline-none focus:ring-1 focus:ring-emerald-600\">",
          "target": [
            "#from"
          ],
          "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=\"to\" class=\"mt-1 w-full border border-slate-200 px-4 py-3 text-sm rounded-2xl focus:outline-none focus:ring-1 focus:ring-emerald-600\">",
          "target": [
            "#to"
          ],
          "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=\"quick-dest\" class=\"w-full border border-slate-200 px-4 py-3 text-sm rounded-2xl\">",
          "target": [
            "#quick-dest"
          ],
          "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=\"quick-duration\" class=\"w-full border border-slate-200 px-4 py-3 text-sm rounded-2xl\">",
          "target": [
            "#quick-duration"
          ],
          "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=\"quick-travelers\" class=\"w-full border border-slate-200 px-4 py-3 text-sm rounded-2xl\">",
          "target": [
            "#quick-travelers"
          ],
          "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": 4900
      },
      {
        "y": 576,
        "height": 4900
      },
      {
        "y": 1152,
        "height": 4900
      },
      {
        "y": 1728,
        "height": 4900
      },
      {
        "y": 2304,
        "height": 4900
      },
      {
        "y": 2880,
        "height": 4900
      },
      {
        "y": 3456,
        "height": 4900
      },
      {
        "y": 4032,
        "height": 4900
      },
      {
        "y": 4180,
        "height": 4900
      }
    ],
    "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 "Travel" 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: "Travel"
- Description: Travel guides, destinations, booking resources, and tourism tips.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Travel" 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: "Trip Planner", "About", "Experiences".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Travel" category. Consider themes similar to: "Flight Deals", "Hotel Reviews", "Cultural Experiences".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "itinerary", "booking", "travel insurance".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Start Planning", "Search Flights", "Compare Prices".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Travel" sector. Ideas similar but not limited to: "currency converter".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "destination spotlights", "trending destinations", "weather forecasts".
-   **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.