ByteDance Seed Seed 2.1 Turbo – Pets

via Seed · Generated

  • AIMAC Debt 4.90
  • Cost $0.06
  • Total Violations 21
  • HTML Size 37 KB
  • Em Dashes 4

Screenshot

View ByteDance Seed Seed 2.1 Turbo Pets page View Live Page

Accessibility Issues Found

21 Serious

  • color-contrast serious 21 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <h1 class="text-2xl font-bold text-primary">Pawprint Haven</h1>

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>Pawprint Haven | Your Trusted Hub for Pet Care, Adoption, and Companionship</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2DD4BF',
                        secondary: '#F97316',
                        dark: '#1F2937',
                        light: '#F9FAFB',
                    },
                    fontFamily: {
                        poppins: ['Poppins', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            }
            .bg-overlay {
                background-color: rgba(0, 0, 0, 0.5);
            }
        }
    </style>
</head>
<body class="font-poppins text-dark bg-light">
    <!-- Header -->
    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center mb-4 md:mb-0">
                <img src="https://placehold.co/60x60/2DD4BF/ffffff?text=🐾&font=poppins" alt="Pawprint Haven Logo" class="h-12 w-12 mr-3 rounded-full">
                <div>
                    <h1 class="text-2xl font-bold text-primary">Pawprint Haven</h1>
                    <p class="text-sm text-gray-600">Your Trusted Hub for Pet Care, Adoption, and Lifelong Companionship</p>
                </div>
            </div>
            <nav>
                <ul class="flex flex-wrap justify-center gap-4 md:gap-6">
                    <li><a href="#" class="text-dark hover:text-primary font-medium transition-colors">Home</a></li>
                    <li><a href="#" class="text-dark hover:text-primary font-medium transition-colors">Adoption</a></li>
                    <li><a href="#" class="text-dark hover:text-primary font-medium transition-colors">Care Resources</a></li>
                    <li><a href="#" class="text-dark hover:text-primary font-medium transition-colors">Training</a></li>
                    <li><a href="#" class="text-dark hover:text-primary font-medium transition-colors">Community</a></li>
                    <li><a href="#" class="text-dark hover:text-primary font-medium transition-colors">Find Help</a></li>
                    <li><a href="#" class="text-dark hover:text-primary font-medium transition-colors">About Us</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="relative h-[80vh] min-h-[500px] flex items-center justify-center">
        <div class="absolute inset-0 z-0">
            <img src="https://picsum.photos/id/237/1920/1080" alt="Happy golden retriever dog sitting in a sunlit field" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-overlay"></div>
        </div>
        <div class="container mx-auto px-4 relative z-10 text-center text-white">
            <h2 class="text-[clamp(2rem,5vw,4rem)] font-bold leading-tight text-shadow mb-6">Every Pet Deserves a Loving Home.<br>Every Owner Deserves Reliable Guidance.</h2>
            <p class="text-[clamp(1rem,2vw,1.25rem)] max-w-3xl mx-auto mb-8 text-shadow">Pawprint Haven connects compassionate adopters with rescue animals, while providing expert care resources, training support, and a community of fellow pet lovers to help you and your furry friend thrive.</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="#" class="bg-secondary hover:bg-secondary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-lg">Adopt a Pet Today</a>
                <a href="#" class="bg-white/10 backdrop-blur-sm border-2 border-white hover:bg-white hover:text-dark text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105">Explore Care Resources</a>
            </div>
        </div>
    </section>

    <!-- Adoption Spotlight Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4">Meet Our Adoptable Friends</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">Every animal in our care has been rescued from challenging situations, fully vetted, and socialized to prepare them for their forever home. Our adoption process ensures each pet is matched with a family that fits their unique personality and needs—so you can be confident your new companion is the perfect fit. All adopted pets come with a complete health record, up-to-date vaccinations, microchipping, and spay/neuter surgery to give them the healthiest start in their new home.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Pet Card 1 -->
                <div class="bg-light rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105 hover:shadow-lg">
                    <img src="https://picsum.photos/id/40/400/300" alt="Domestic shorthair cat with grey fur sitting on a couch" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="text-xl font-bold">Luna</h3>
                            <span class="bg-primary/20 text-primary text-sm font-medium px-3 py-1 rounded-full">2 Years Old</span>
                        </div>
                        <p class="text-gray-500 mb-3">Domestic Shorthair Cat</p>
                        <p class="text-gray-700 mb-6">Luna is a gentle, curious cat who loves sunbathing by the window and playing with feather wands. She’s great with kids and other cats, and would thrive in a calm, loving home. Fully vaccinated and microchipped.</p>
                        <a href="#" class="inline-block w-full text-center bg-primary hover:bg-primary/90 text-white font-semibold py-2 px-4 rounded-lg transition-colors">Meet Luna</a>
                    </div>
                </div>
                <!-- Pet Card 2 -->
                <div class="bg-light rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105 hover:shadow-lg">
                    <img src="https://picsum.photos/id/1025/400/300" alt="Black labrador retriever smiling in a grassy field" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="text-xl font-bold">Max</h3>
                            <span class="bg-primary/20 text-primary text-sm font-medium px-3 py-1 rounded-full">3 Years Old</span>
                        </div>
                        <p class="text-gray-500 mb-3">Labrador Retriever Mix</p>
                        <p class="text-gray-700 mb-6">Max is an energetic, friendly pup who loves long walks and playing fetch. He’s graduated from our basic training program, is great with families, and knows all his commands. Neutered and up-to-date on all shots.</p>
                        <a href="#" class="inline-block w-full text-center bg-primary hover:bg-primary/90 text-white font-semibold py-2 px-4 rounded-lg transition-colors">Meet Max</a>
                    </div>
                </div>
                <!-- Pet Card 3 -->
                <div class="bg-light rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105 hover:shadow-lg">
                    <img src="https://picsum.photos/id/1062/400/300" alt="Holland lop rabbit with brown fur sitting in hay" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="text-xl font-bold">Bella</h3>
                            <span class="bg-primary/20 text-primary text-sm font-medium px-3 py-1 rounded-full">1 Year Old</span>
                        </div>
                        <p class="text-gray-500 mb-3">Holland Lop Rabbit</p>
                        <p class="text-gray-700 mb-6">Bella is a sweet, social rabbit who loves being held and exploring new spaces. She’s litter-trained, spayed, and gets along well with other small pets. Perfect for both apartments and larger homes.</p>
                        <a href="#" class="inline-block w-full text-center bg-primary hover:bg-primary/90 text-white font-semibold py-2 px-4 rounded-lg transition-colors">Meet Bella</a>
                    </div>
                </div>
            </div>
            <div class="text-center mt-12">
                <a href="#" class="inline-block bg-secondary hover:bg-secondary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-md">View All Adoptable Pets</a>
            </div>
        </div>
    </section>

    <!-- Pet Care Resource Hub -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4">Expert Care Guides for Every Pet Parent</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">Whether you’re a first-time pet owner or a seasoned pro, our library of vetted resources covers everything you need to keep your companion healthy, happy, and thriving. All our guides are reviewed by licensed veterinarians and certified pet trainers to ensure you get accurate, up-to-date information you can trust.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Resource Card 1 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105 hover:shadow-lg">
                    <img src="https://picsum.photos/id/1080/400/250" alt="Dog eating kibble from a ceramic bowl" class="w-full h-56 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Nutrition Advice</h3>
                        <p class="text-gray-700 mb-6">Learn how to create a balanced, age-appropriate diet for your pet, from puppy/kitten formula to senior pet nutrition. We cover ingredient label decoding, portion control, and common dietary restrictions to help you choose the best food for your companion’s unique needs. Plus, get vet-recommended treat ideas and easy recipes for homemade meals you can feel good about serving.</p>
                        <a href="#" class="inline-block text-primary font-semibold hover:text-secondary transition-colors">Read Nutrition Guides →</a>
                    </div>
                </div>
                <!-- Resource Card 2 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105 hover:shadow-lg">
                    <img src="https://picsum.photos/id/1074/400/250" alt="Veterinarian examining a small dog with a stethoscope" class="w-full h-56 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Veterinary Care Guides</h3>
                        <p class="text-gray-700 mb-6">Stay on top of your pet’s health with our comprehensive veterinary resources, including recommended vaccination schedules, parasite prevention tips, and red flags that warrant an immediate trip to the vet. We also provide detailed guidance on spay/neuter benefits, dental care, and managing chronic conditions like diabetes or arthritis to keep your pet healthy and comfortable for years to come.</p>
                        <a href="#" class="inline-block text-primary font-semibold hover:text-secondary transition-colors">Explore Vet Resources →</a>
                    </div>
                </div>
                <!-- Resource Card 3 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105 hover:shadow-lg">
                    <img src="https://picsum.photos/id/1069/400/250" alt="Golden retriever being brushed by a groomer" class="w-full h-56 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3">Grooming & Hygiene Tips</h3>
                        <p class="text-gray-700 mb-6">Keep your pet looking and feeling their best with our step-by-step grooming guides for dogs, cats, and small pets. Learn how to brush coats properly, trim nails safely, clean ears, and bathe your pet at home without stress. We also share tips for managing excessive shedding, matting, and skin sensitivities, plus recommendations for the best grooming tools and products for your pet’s specific coat type.</p>
                        <a href="#" class="inline-block text-primary font-semibold hover:text-secondary transition-colors">View Grooming Tips →</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Interactive Care Guide Finder -->
    <section class="py-16 bg-primary/10">
        <div class="container mx-auto px-4">
            <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8 md:p-12">
                <div class="text-center mb-10">
                    <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4">Find Your Customized Pet Care Guide</h2>
                    <p class="text-gray-600">Not sure where to start? Our quick, free tool helps you find tailored care recommendations based on your pet’s species, age, and lifestyle. Get instant access to feeding schedules, health checklists, training tips, and more—all curated by our team of pet experts.</p>
                </div>
                <form id="careGuideForm" class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            <label for="petType" class="block text-gray-700 font-medium mb-2">Pet Type</label>
                            <select id="petType" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                                <option value="">Select your pet type</option>
                                <option value="dog">Dog</option>
                                <option value="cat">Cat</option>
                                <option value="rabbit">Rabbit</option>
                                <option value="bird">Bird</option>
                                <option value="small-mammal">Small Mammal (hamster, guinea pig, etc.)</option>
                            </select>
                        </div>
                        <div>
                            <label for="petAge" class="block text-gray-700 font-medium mb-2">Pet Age</label>
                            <select id="petAge" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                                <option value="">Select your pet's age</option>
                                <option value="young">Puppy/Kitten (0-1 year)</option>
                                <option value="adult">Adult (1-7 years)</option>
                                <option value="senior">Senior (7+ years)</option>
                            </select>
                        </div>
                        <div>
                            <label for="primaryNeed" class="block text-gray-700 font-medium mb-2">Primary Need</label>
                            <select id="primaryNeed" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                                <option value="">Select your primary focus</option>
                                <option value="all">All Care Basics</option>
                                <option value="nutrition">Nutrition</option>
                                <option value="health">Health & Vaccines</option>
                                <option value="training">Training</option>
                                <option value="grooming">Grooming</option>
                            </select>
                        </div>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="bg-secondary hover:bg-secondary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-md">Generate My Guide</button>
                    </div>
                </form>
                <div id="guideResult" class="mt-8 hidden">
                    <div class="bg-primary/5 border border-primary/20 rounded-lg p-6">
                        <h3 class="text-xl font-bold text-primary mb-3">Your Custom Care Guide is Ready!</h3>
                        <p id="guideResultText" class="text-gray-700 mb-4"></p>
                        <a href="#" class="inline-block bg-primary hover:bg-primary/90 text-white font-semibold py-2 px-6 rounded-lg transition-colors">View Full Guide</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Training & Behavior Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div>
                    <img src="https://picsum.photos/id/1035/800/600" alt="Dog trainer giving a treat to a golden retriever during a training session" class="w-full h-auto rounded-xl shadow-lg">
                </div>
                <div>
                    <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-6">Positive Reinforcement Training for Every Pet</h2>
                    <p class="text-gray-700 mb-6">Training is key to building a strong, trusting bond with your pet—and it’s never too late to start. Our certified trainers use science-backed, positive reinforcement methods to teach basic obedience, correct behavioral issues, and help your pet feel confident and secure. We offer options for every skill level, from puppy kindergarten to advanced behavioral correction for rescue pets with trauma histories.</p>
                    <ul class="space-y-4 mb-8">
                        <li class="flex items-start">
                            <span class="text-primary mr-3 text-xl">✓</span>
                            <div>
                                <h4 class="font-semibold">Puppy Basics (8-16 weeks)</h4>
                                <p class="text-gray-600">Socialization, house training, basic commands (sit, stay, come), and bite inhibition. 6-week group classes with hands-on practice and take-home exercises.</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <span class="text-primary mr-3 text-xl">✓</span>
                            <div>
                                <h4 class="font-semibold">Adult Obedience (1+ years)</h4>
                                <p class="text-gray-600">Refresher on basic commands, leash walking, impulse control, and advanced tricks. 4-week group or private sessions available to fit your schedule.</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <span class="text-primary mr-3 text-xl">✓</span>
                            <div>
                                <h4 class="font-semibold">Behavioral Correction</h4>
                                <p class="text-gray-600">Customized plans for issues like anxiety, aggression, separation anxiety, and destructive behavior. One-on-one sessions with a certified applied animal behaviorist.</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <span class="text-primary mr-3 text-xl">✓</span>
                            <div>
                                <h4 class="font-semibold">Group Socialization Classes</h4>
                                <p class="text-gray-600">Supervised playgroups for dogs and cats to build social skills in a safe, controlled environment. All pets are pre-screened for compatibility and vaccination status.</p>
                            </div>
                        </li>
                    </ul>
                    <a href="#" class="inline-block bg-secondary hover:bg-secondary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-md">Browse All Training Programs</a>
                </div>
            </div>
            <!-- Testimonial -->
            <div class="mt-16 max-w-3xl mx-auto">
                <div class="bg-gray-50 rounded-xl p-8 shadow-md relative">
                    <div class="absolute -top-6 left-8 text-6xl text-primary/20">"</div>
                    <p class="text-gray-700 italic mb-6 text-lg">We adopted Max from Pawprint Haven last year, and he struggled with severe separation anxiety. After 8 weeks of private training with their team, he’s calm and confident when we leave the house. The trainers were patient, kind, and gave us all the tools we needed to help him thrive. We couldn’t be more grateful for their ongoing support!</p>
                    <div class="flex items-center">
                        <img src="https://i.pravatar.cc/60?u=sarahm" alt="Sarah M." class="h-12 w-12 rounded-full mr-4">
                        <div>
                            <p class="font-semibold">Sarah M.</p>
                            <p class="text-gray-500 text-sm">Max’s Mom, Pawprint Haven Adopter</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Community & Events Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4">Join Our Pet-Loving Community</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">Pawprint Haven is more than just a resource site—it’s a community of thousands of pet owners, rescuers, and experts who share a love for animals. Connect with fellow pet parents, attend local events, and share your own pet stories to inspire others.</p>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                <!-- Upcoming Events -->
                <div>
                    <h3 class="text-2xl font-bold mb-6 flex items-center">
                        <span class="text-primary mr-3">📅</span> Upcoming Events
                    </h3>
                    <div class="space-y-4">
                        <div class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
                            <div class="flex justify-between items-start mb-2">
                                <h4 class="font-semibold text-lg">Monthly Adoption Fair</h4>
                                <span class="bg-secondary/10 text-secondary text-sm font-medium px-3 py-1 rounded-full">Free</span>
                            </div>
                            <p class="text-gray-500 text-sm mb-3">Saturday, October 19, 2024 | 10AM - 4PM | Maplewood Park</p>
                            <p class="text-gray-700">Meet dozens of adoptable pets from 12 local rescue groups, get free vet consultations, and pick up free pet supplies from our sponsors. All attendees receive a free pet care kit with samples and coupons!</p>
                        </div>
                        <div class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
                            <div class="flex justify-between items-start mb-2">
                                <h4 class="font-semibold text-lg">Pet First Aid Workshop</h4>
                                <span class="bg-secondary/10 text-secondary text-sm font-medium px-3 py-1 rounded-full">$25</span>
                            </div>
                            <p class="text-gray-500 text-sm mb-3">Wednesday, October 23, 2024 | 6PM - 8PM | Pawprint Haven Community Center</p>
                            <p class="text-gray-700">Learn life-saving skills including pet CPR, wound care, choking response, and emergency first aid for common pet injuries. All proceeds benefit our rescue medical fund. Certificates of completion provided for all attendees.</p>
                        </div>
                        <div class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
                            <div class="flex justify-between items-start mb-2">
                                <h4 class="font-semibold text-lg">Doggy Hike & Play</h4>
                                <span class="bg-secondary/10 text-secondary text-sm font-medium px-3 py-1 rounded-full">Free</span>
                            </div>
                            <p class="text-gray-500 text-sm mb-3">Sunday, October 27, 2024 | 9AM | Pine Ridge Trailhead</p>
                            <p class="text-gray-700">Join our guided 3-mile hike for friendly dogs and their owners. The trail is moderate difficulty with plenty of stops for water and play. All dogs must be leashed and up-to-date on rabies and distemper vaccinations.</p>
                        </div>
                    </div>
                    <a href="#" class="inline-block mt-6 text-primary font-semibold hover:text-secondary transition-colors">View All Events →</a>
                </div>
                <!-- Success Stories -->
                <div>
                    <h3 class="text-2xl font-bold mb-6 flex items-center">
                        <span class="text-primary mr-3">❤️</span> Adoption Success Stories
                    </h3>
                    <div class="space-y-6">
                        <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow flex">
                            <img src="https://picsum.photos/id/1025/150/150" alt="Golden retriever playing in a backyard with children" class="w-24 h-24 object-cover md:w-32 md:h-32">
                            <div class="p-4 md:p-6">
                                <h4 class="font-semibold mb-1">Mia & The Thompson Family</h4>
                                <p class="text-gray-500 text-sm mb-2">Adopted 6 months ago</p>
                                <p class="text-gray-700 text-sm">"Mia (formerly known as Daisy) was the first dog we looked at, and we knew instantly she was the one. She’s now the star of her agility class and loves hiking with my husband every weekend. Thank you, Pawprint Haven, for bringing us together!"</p>
                            </div>
                        </div>
                        <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow flex">
                            <img src="https://picsum.photos/id/40/150/150" alt="Orange tabby cat sleeping on a knit pillow" class="w-24 h-24 object-cover md:w-32 md:h-32">
                            <div class="p-4 md:p-6">
                                <h4 class="font-semibold mb-1">Mr. Whiskers & Ms. Henderson</h4>
                                <p class="text-gray-500 text-sm mb-2">Adopted 2 months ago</p>
                                <p class="text-gray-700 text-sm">"I was hesitant to adopt a senior cat, but Mr. Whiskers has brought so much joy to my retirement. He’s the sweetest, most laid-back companion I could ask for. The staff at Pawprint Haven made the entire process so easy and supportive."</p>
                            </div>
                        </div>
                        <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow flex">
                            <img src="https://picsum.photos/id/1062/150/150" alt="Grey rabbit eating a carrot in a grassy pen" class="w-24 h-24 object-cover md:w-32 md:h-32">
                            <div class="p-4 md:p-6">
                                <h4 class="font-semibold mb-1">Thumper & The Carter Kids</h4>
                                <p class="text-gray-500 text-sm mb-2">Adopted 1 year ago</p>
                                <p class="text-gray-700 text-sm">"Thumper was the perfect first pet for our two kids. They’ve learned so much about responsibility and kindness from caring for him. He’s part of the family now, and we can’t imagine life without our fluffy little friend."</p>
                            </div>
                        </div>
                    </div>
                    <a href="#" class="inline-block mt-6 text-primary font-semibold hover:text-secondary transition-colors">Read More Stories →</a>
                </div>
            </div>
            <div class="text-center mt-12">
                <a href="#" class="inline-block bg-primary hover:bg-primary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-md">Join Our Community Forum</a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- About -->
                <div>
                    <div class="flex items-center mb-4">
                        <img src="https://placehold.co/50x50/2DD4BF/ffffff?text=🐾&font=poppins" alt="Pawprint Haven Logo" class="h-10 w-10 mr-3 rounded-full">
                        <h3 class="text-xl font-bold text-primary">Pawprint Haven</h3>
                    </div>
                    <p class="text-gray-300 mb-4">Your trusted hub for pet adoption, expert care resources, and a supportive community of pet lovers. We believe every animal deserves a loving home, and every owner deserves the tools to care for them well.</p>
                    <div class="flex space-x-3">
                        <a href="#" class="bg-white/10 hover:bg-primary transition-colors h-10 w-10 rounded-full flex items-center justify-center" aria-label="Facebook">
                            <span>f</span>
                        </a>
                        <a href="#" class="bg-white/10 hover:bg-primary transition-colors h-10 w-10 rounded-full flex items-center justify-center" aria-label="Instagram">
                            <span>📷</span>
                        </a>
                        <a href="#" class="bg-white/10 hover:bg-primary transition-colors h-10 w-10 rounded-full flex items-center justify-center" aria-label="X (Twitter)">
                            <span>X</span>
                        </a>
                        <a href="#" class="bg-white/10 hover:bg-primary transition-colors h-10 w-10 rounded-full flex items-center justify-center" aria-label="YouTube">
                            <span>▶</span>
                        </a>
                    </div>
                </div>
                <!-- Quick Links -->
                <div>
                    <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-300 hover:text-primary transition-colors">Home</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-primary transition-colors">Pet Adoption</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-primary transition-colors">Care Resources</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-primary transition-colors">Training Programs</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-primary transition-colors">Community Forum</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-primary transition-colors">Find Help</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-primary transition-colors">About Us</a></li>
                    </ul>
                </div>
                <!-- Contact -->
                <div>
                    <h4 class="text-lg font-semibold mb-4">Contact Us</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <span class="text-primary mr-3">📍</span>
                            <span class="text-gray-300">123 Pet Lane<br>Maplewood, CA 90210</span>
                        </li>
                        <li class="flex items-center">
                            <span class="text-primary mr-3">📞</span>
                            <span class="text-gray-300">(555) 789-1234</span>
                        </li>
                        <li class="flex items-center">
                            <span class="text-primary mr-3">✉️</span>
                            <span class="text-gray-300">info@pawprinthaven.org</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-primary mr-3">⏰</span>
                            <span class="text-gray-300">Mon-Fri: 9AM - 6PM<br>Sat: 10AM - 4PM<br>Sun: Closed</span>
                        </li>
                    </ul>
                </div>
                <!-- Newsletter -->
                <div>
                    <h4 class="text-lg font-semibold mb-4">Stay Updated</h4>
                    <p class="text-gray-300 mb-4">Subscribe to our newsletter for the latest adoption stories, care tips, and event updates delivered straight to your inbox.</p>
                    <form class="space-y-3">
                        <input type="email" placeholder="Your email address" class="w-full px-4 py-2 rounded-lg bg-white/10 border border-gray-600 text-white placeholder-gray-400 focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                        <button type="submit" class="w-full bg-secondary hover:bg-secondary/90 text-white font-semibold py-2 px-4 rounded-lg transition-colors">Subscribe</button>
                    </form>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400 text-sm mb-4 md:mb-0">&copy; 2024 Pawprint Haven. All rights reserved.</p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-primary text-sm transition-colors">Privacy Policy</a>
                    <a href="#" class="text-gray-400 hover:text-primary text-sm transition-colors">Terms of Service</a>
                    <a href="#" class="text-gray-400 hover:text-primary text-sm transition-colors">Accessibility Statement</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript for Interactive Care Guide Finder -->
    <script>
        document.getElementById('careGuideForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const petType = document.getElementById('petType').value;
            const petAge = document.getElementById('petAge').value;
            const primaryNeed = document.getElementById('primaryNeed').value;
            
            if (!petType || !petAge || !primaryNeed) {
                alert('Please fill in all three fields to generate your custom guide.');
                return;
            }
            
            const petTypeText = {
                'dog': 'dog',
                'cat': 'cat',
                'rabbit': 'rabbit',
                'bird': 'bird',
                'small-mammal': 'small mammal'
            }[petType];
            
            const petAgeText = {
                'young': 'young (0-1 year)',
                'adult': 'adult (1-7 years)',
                'senior': 'senior (7+ years)'
            }[petAge];
            
            const needText = {
                'all': 'complete care basics',
                'nutrition': 'nutrition guidance',
                'health': 'health and vaccination information',
                'training': 'positive reinforcement training tips',
                'grooming': 'species-specific grooming advice'
            }[primaryNeed];
            
            const resultText = `Great! We’ve compiled a custom care guide for your ${petAgeText} ${petTypeText}, focused on ${needText}. This guide includes vet-recommended tips, step-by-step instructions, and downloadable checklists tailored specifically to your pet’s life stage and needs. Click below to access the full guide and save it for future reference.`;
            
            document.getElementById('guideResultText').textContent = resultText;
            document.getElementById('guideResult').classList.remove('hidden');
            
            // Smooth scroll to result
            document.getElementById('guideResult').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        });
    </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:46:01.305Z",
  "url": "https://benchmark.aimac.invalid/086e6bf925b8cc5a50476fec9f4945f283638a17eda5f50009466670a6ea0f84.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<a href=\"#\" class=\"bg-white/10 hover:bg-primary transition-colors h-10 w-10 rounded-full flex items-center justify-center\" aria-label=\"Facebook\">\n                            <span>f</span>\n                        </a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"bg-white/10 hover:bg-primary transition-colors h-10 w-10 rounded-full flex items-center justify-center\" aria-label=\"Facebook\">\n                            <span>f</span>\n                        </a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "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=\"font-poppins text-dark bg-light\">",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a href=\"#\" class=\"bg-white/10 hover:bg-primary transition-colors h-10 w-10 rounded-full flex items-center justify-center\" aria-label=\"Facebook\">\n                            <span>f</span>\n                        </a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"bg-white/10 hover:bg-primary transition-colors h-10 w-10 rounded-full flex items-center justify-center\" aria-label=\"Facebook\">\n                            <span>f</span>\n                        </a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"bg-white/10 hover:bg-primary transition-colors h-10 w-10 rounded-full flex items-center justify-center\" aria-label=\"Facebook\">\n                            <span>f</span>\n                        </a>",
          "target": [
            "a[aria-label=\"Facebook\"]"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button type=\"submit\" class=\"bg-secondary hover:bg-secondary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-md\">Generate My Guide</button>",
          "target": [
            ".text-center > button"
          ]
        }
      ]
    },
    {
      "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": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1 class=\"text-2xl font-bold text-primary\">Pawprint Haven</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2 class=\"text-[clamp(2rem,5vw,4rem)] font-bold leading-tight text-shadow mb-6\">Every Pet Deserves a Loving Home.<br>Every Owner Deserves Reliable Guidance.</h2>",
                  "target": [
                    ".text-\\[clamp\\(2rem\\,5vw\\,4rem\\)\\]"
                  ]
                },
                {
                  "html": "<h2 class=\"text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4\">Meet Our Adoptable Friends</h2>",
                  "target": [
                    ".py-16:nth-child(3) > .container.mx-auto.px-4 > .mb-12.text-center > .text-\\[clamp\\(1\\.75rem\\,3vw\\,2\\.5rem\\)\\]"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold\">Luna</h3>",
                  "target": [
                    ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(1) > .p-6 > .justify-between.mb-2.items-center > h3"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold\">Max</h3>",
                  "target": [
                    ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(2) > .p-6 > .justify-between.mb-2.items-center > h3"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold\">Bella</h3>",
                  "target": [
                    ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(3) > .p-6 > .justify-between.mb-2.items-center > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4\">Expert Care Guides for Every Pet Parent</h2>",
                  "target": [
                    ".bg-gray-50.py-16:nth-child(4) > .container.mx-auto.px-4 > .mb-12.text-center > .text-\\[clamp\\(1\\.75rem\\,3vw\\,2\\.5rem\\)\\]"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold mb-3\">Nutrition Advice</h3>",
                  "target": [
                    ".transition-transform.hover\\:shadow-lg.rounded-xl:nth-child(1) > .p-6 > h3"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold mb-3\">Veterinary Care Guides</h3>",
                  "target": [
                    ".transition-transform.hover\\:shadow-lg.rounded-xl:nth-child(2) > .p-6 > h3"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold mb-3\">Grooming &amp; Hygiene Tips</h3>",
                  "target": [
                    ".transition-transform.hover\\:shadow-lg.rounded-xl:nth-child(3) > .p-6 > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4\">Find Your Customized Pet Care Guide</h2>",
                  "target": [
                    ".mb-10 > .text-\\[clamp\\(1\\.75rem\\,3vw\\,2\\.5rem\\)\\]"
                  ]
                },
                {
                  "html": "<h2 class=\"text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-6\">Positive Reinforcement Training for Every Pet</h2>",
                  "target": [
                    "div:nth-child(2) > .text-\\[clamp\\(1\\.75rem\\,3vw\\,2\\.5rem\\)\\]"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold\">Puppy Basics (8-16 weeks)</h4>",
                  "target": [
                    ".items-start:nth-child(1) > div > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold\">Adult Obedience (1+ years)</h4>",
                  "target": [
                    ".items-start:nth-child(2) > div > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold\">Behavioral Correction</h4>",
                  "target": [
                    ".items-start:nth-child(3) > div > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold\">Group Socialization Classes</h4>",
                  "target": [
                    ".items-start:nth-child(4) > div > h4"
                  ]
                },
                {
                  "html": "<h2 class=\"text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4\">Join Our Pet-Loving Community</h2>",
                  "target": [
                    ".bg-gray-50.py-16:nth-child(7) > .container.mx-auto.px-4 > .mb-12.text-center > .text-\\[clamp\\(1\\.75rem\\,3vw\\,2\\.5rem\\)\\]"
                  ]
                },
                {
                  "html": "<h3 class=\"text-2xl font-bold mb-6 flex items-center\">\n                        <span class=\"text-primary mr-3\">\ud83d\udcc5</span> Upcoming Events\n                    </h3>",
                  "target": [
                    "div:nth-child(1) > .text-2xl"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg\">Monthly Adoption Fair</h4>",
                  "target": [
                    ".shadow-sm.hover\\:shadow-md.transition-shadow:nth-child(1) > .justify-between.items-start.mb-2 > .text-lg"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg\">Pet First Aid Workshop</h4>",
                  "target": [
                    ".shadow-sm.hover\\:shadow-md.transition-shadow:nth-child(2) > .justify-between.items-start.mb-2 > .text-lg"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg\">Doggy Hike &amp; Play</h4>",
                  "target": [
                    ".shadow-sm.hover\\:shadow-md.transition-shadow:nth-child(3) > .justify-between.items-start.mb-2 > .text-lg"
                  ]
                },
                {
                  "html": "<h3 class=\"text-2xl font-bold mb-6 flex items-center\">\n                        <span class=\"text-primary mr-3\">\u2764\ufe0f</span> Adoption Success Stories\n                    </h3>",
                  "target": [
                    ".lg\\:grid-cols-2.gap-12.grid > div:nth-child(2) > .text-2xl"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold mb-1\">Mia &amp; The Thompson Family</h4>",
                  "target": [
                    ".shadow-sm.hover\\:shadow-md.transition-shadow:nth-child(1) > .p-4.md\\:p-6 > .mb-1"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold mb-1\">Mr. Whiskers &amp; Ms. Henderson</h4>",
                  "target": [
                    ".shadow-sm.hover\\:shadow-md.transition-shadow:nth-child(2) > .p-4.md\\:p-6 > .mb-1"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold mb-1\">Thumper &amp; The Carter Kids</h4>",
                  "target": [
                    ".shadow-sm.hover\\:shadow-md.transition-shadow:nth-child(3) > .p-4.md\\:p-6 > .mb-1"
                  ]
                },
                {
                  "html": "<h3 class=\"text-xl font-bold text-primary\">Pawprint Haven</h3>",
                  "target": [
                    ".mb-4.items-center.flex > h3"
                  ]
                },
                {
                  "html": "<h4 class=\"text-lg font-semibold mb-4\">Quick Links</h4>",
                  "target": [
                    "div:nth-child(2) > .text-lg"
                  ]
                },
                {
                  "html": "<h4 class=\"text-lg font-semibold mb-4\">Contact Us</h4>",
                  "target": [
                    "div:nth-child(3) > .text-lg"
                  ]
                },
                {
                  "html": "<h4 class=\"text-lg font-semibold mb-4\">Stay Updated</h4>",
                  "target": [
                    "div:nth-child(4) > .text-lg"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#4b5563",
                "bgColor": "#ffffff",
                "contrastRatio": 7.55,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 7.55"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<p class=\"text-sm text-gray-600\">Your Trusted Hub for Pet Care, Adoption, and Lifelong Companionship</p>",
          "target": [
            ".text-gray-600.text-sm"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "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": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "petType",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<select id=\"petType\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors\">",
          "target": [
            "#petType"
          ]
        }
      ]
    },
    {
      "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": [
                {
                  "html": "<label for=\"petType\" class=\"block text-gray-700 font-medium mb-2\">Pet Type</label>",
                  "target": [
                    "label[for=\"petType\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<select id=\"petType\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors\">",
          "target": [
            "#petType"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/60x60/2DD4BF/ffffff?text=\ud83d\udc3e&amp;font=poppins\" alt=\"Pawprint Haven Logo\" class=\"h-12 w-12 mr-3 rounded-full\">",
          "target": [
            ".h-12.w-12[alt=\"Pawprint Haven Logo\"]"
          ]
        }
      ]
    },
    {
      "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=\"email\" placeholder=\"Your email address\" class=\"w-full px-4 py-2 rounded-lg bg-white/10 border border-gray-600 text-white placeholder-gray-400 focus:ring-2 focus:ring-primary focus:border-primary transition-colors\">",
          "target": [
            "input"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "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=\"#\" class=\"text-dark hover:text-primary font-medium transition-colors\">Home</a>",
          "target": [
            "li:nth-child(1) > .text-dark.font-medium.hover\\:text-primary"
          ]
        }
      ]
    },
    {
      "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=\"flex flex-wrap justify-center gap-4 md:gap-6\">",
          "target": [
            ".flex-wrap"
          ]
        }
      ]
    },
    {
      "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=\"#\" class=\"text-dark hover:text-primary font-medium transition-colors\">Home</a></li>",
          "target": [
            ".flex-wrap > 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/60x60/2DD4BF/ffffff?text=\ud83d\udc3e&amp;font=poppins\" alt=\"Pawprint Haven Logo\" class=\"h-12 w-12 mr-3 rounded-full\">",
          "target": [
            ".h-12.w-12[alt=\"Pawprint Haven Logo\"]"
          ]
        }
      ]
    },
    {
      "id": "select-name",
      "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 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": "explicit-label",
              "data": {
                "explicitLabel": "Pet Type"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"petType\" class=\"block text-gray-700 font-medium mb-2\">Pet Type</label>",
                  "target": [
                    "label[for=\"petType\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<select id=\"petType\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors\">",
          "target": [
            "#petType"
          ]
        }
      ]
    },
    {
      "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=\"#\" class=\"text-dark hover:text-primary font-medium transition-colors\">Home</a>",
          "target": [
            "li:nth-child(1) > .text-dark.font-medium.hover\\:text-primary"
          ]
        }
      ]
    }
  ],
  "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": "48.0pt (64px)",
                "fontWeight": "bold",
                "messageKey": "imgNode",
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"absolute inset-0 bg-overlay\"></div>",
                  "target": [
                    ".bg-overlay"
                  ]
                },
                {
                  "html": "<img src=\"https://picsum.photos/id/237/1920/1080\" alt=\"Happy golden retriever dog sitting in a sunlit field\" class=\"w-full h-full object-cover\">",
                  "target": [
                    ".h-full"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined because element contains an image node"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h2 class=\"text-[clamp(2rem,5vw,4rem)] font-bold leading-tight text-shadow mb-6\">Every Pet Deserves a Loving Home.<br>Every Owner Deserves Reliable Guidance.</h2>",
          "target": [
            ".text-\\[clamp\\(2rem\\,5vw\\,4rem\\)\\]"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because element contains an image node"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2dd4bf",
                "bgColor": "#ffffff",
                "contrastRatio": 1.86,
                "fontSize": "18.0pt (24px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"bg-white shadow-md sticky top-0 z-50\">",
                  "target": [
                    "header"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.86 (foreground color: #2dd4bf, background color: #ffffff, font size: 18.0pt (24px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h1 class=\"text-2xl font-bold text-primary\">Pawprint Haven</h1>",
          "target": [
            "h1"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.86 (foreground color: #2dd4bf, background color: #ffffff, font size: 18.0pt (24px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f97316",
                "contrastRatio": 2.8,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"bg-secondary hover:bg-secondary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-lg\">Adopt a Pet Today</a>",
                  "target": [
                    ".shadow-lg.bg-secondary.hover\\:bg-secondary\\/90"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"bg-secondary hover:bg-secondary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-lg\">Adopt a Pet Today</a>",
          "target": [
            ".shadow-lg.bg-secondary.hover\\:bg-secondary\\/90"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2dd4bf",
                "bgColor": "#d0f2ef",
                "contrastRatio": 1.56,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"bg-primary/20 text-primary text-sm font-medium px-3 py-1 rounded-full\">2 Years Old</span>",
                  "target": [
                    ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(1) > .p-6 > .justify-between.mb-2.items-center > .bg-primary\\/20.px-3.py-1"
                  ]
                },
                {
                  "html": "<div class=\"bg-light rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105 hover:shadow-lg\">",
                  "target": [
                    ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.56 (foreground color: #2dd4bf, background color: #d0f2ef, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"bg-primary/20 text-primary text-sm font-medium px-3 py-1 rounded-full\">2 Years Old</span>",
          "target": [
            ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(1) > .p-6 > .justify-between.mb-2.items-center > .bg-primary\\/20.px-3.py-1"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.56 (foreground color: #2dd4bf, background color: #d0f2ef, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#2dd4bf",
                "contrastRatio": 1.86,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"inline-block w-full text-center bg-primary hover:bg-primary/90 text-white font-semibold py-2 px-4 rounded-lg transition-colors\">Meet Luna</a>",
                  "target": [
                    ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(1) > .p-6 > .bg-primary.hover\\:bg-primary\\/90.py-2"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.86 (foreground color: #ffffff, background color: #2dd4bf, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"inline-block w-full text-center bg-primary hover:bg-primary/90 text-white font-semibold py-2 px-4 rounded-lg transition-colors\">Meet Luna</a>",
          "target": [
            ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(1) > .p-6 > .bg-primary.hover\\:bg-primary\\/90.py-2"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.86 (foreground color: #ffffff, background color: #2dd4bf, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2dd4bf",
                "bgColor": "#d0f2ef",
                "contrastRatio": 1.56,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"bg-primary/20 text-primary text-sm font-medium px-3 py-1 rounded-full\">3 Years Old</span>",
                  "target": [
                    ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(2) > .p-6 > .justify-between.mb-2.items-center > .bg-primary\\/20.px-3.py-1"
                  ]
                },
                {
                  "html": "<div class=\"bg-light rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105 hover:shadow-lg\">",
                  "target": [
                    ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.56 (foreground color: #2dd4bf, background color: #d0f2ef, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"bg-primary/20 text-primary text-sm font-medium px-3 py-1 rounded-full\">3 Years Old</span>",
          "target": [
            ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(2) > .p-6 > .justify-between.mb-2.items-center > .bg-primary\\/20.px-3.py-1"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.56 (foreground color: #2dd4bf, background color: #d0f2ef, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#2dd4bf",
                "contrastRatio": 1.86,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"inline-block w-full text-center bg-primary hover:bg-primary/90 text-white font-semibold py-2 px-4 rounded-lg transition-colors\">Meet Max</a>",
                  "target": [
                    ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(2) > .p-6 > .bg-primary.hover\\:bg-primary\\/90.py-2"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.86 (foreground color: #ffffff, background color: #2dd4bf, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"inline-block w-full text-center bg-primary hover:bg-primary/90 text-white font-semibold py-2 px-4 rounded-lg transition-colors\">Meet Max</a>",
          "target": [
            ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(2) > .p-6 > .bg-primary.hover\\:bg-primary\\/90.py-2"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.86 (foreground color: #ffffff, background color: #2dd4bf, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2dd4bf",
                "bgColor": "#d0f2ef",
                "contrastRatio": 1.56,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"bg-primary/20 text-primary text-sm font-medium px-3 py-1 rounded-full\">1 Year Old</span>",
                  "target": [
                    ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(3) > .p-6 > .justify-between.mb-2.items-center > .bg-primary\\/20.px-3.py-1"
                  ]
                },
                {
                  "html": "<div class=\"bg-light rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105 hover:shadow-lg\">",
                  "target": [
                    ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.56 (foreground color: #2dd4bf, background color: #d0f2ef, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"bg-primary/20 text-primary text-sm font-medium px-3 py-1 rounded-full\">1 Year Old</span>",
          "target": [
            ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(3) > .p-6 > .justify-between.mb-2.items-center > .bg-primary\\/20.px-3.py-1"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.56 (foreground color: #2dd4bf, background color: #d0f2ef, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#2dd4bf",
                "contrastRatio": 1.86,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"inline-block w-full text-center bg-primary hover:bg-primary/90 text-white font-semibold py-2 px-4 rounded-lg transition-colors\">Meet Bella</a>",
                  "target": [
                    ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(3) > .p-6 > .bg-primary.hover\\:bg-primary\\/90.py-2"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.86 (foreground color: #ffffff, background color: #2dd4bf, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"inline-block w-full text-center bg-primary hover:bg-primary/90 text-white font-semibold py-2 px-4 rounded-lg transition-colors\">Meet Bella</a>",
          "target": [
            ".bg-light.transition-transform.hover\\:shadow-lg:nth-child(3) > .p-6 > .bg-primary.hover\\:bg-primary\\/90.py-2"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.86 (foreground color: #ffffff, background color: #2dd4bf, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f97316",
                "contrastRatio": 2.8,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"inline-block bg-secondary hover:bg-secondary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-md\">View All Adoptable Pets</a>",
                  "target": [
                    ".mt-12.text-center > .bg-secondary.hover\\:bg-secondary\\/90.px-8"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"inline-block bg-secondary hover:bg-secondary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-md\">View All Adoptable Pets</a>",
          "target": [
            ".mt-12.text-center > .bg-secondary.hover\\:bg-secondary\\/90.px-8"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2dd4bf",
                "bgColor": "#ffffff",
                "contrastRatio": 1.86,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105 hover:shadow-lg\">",
                  "target": [
                    ".bg-gray-50.py-16:nth-child(4) > .container.mx-auto.px-4 > .md\\:grid-cols-3.gap-8.grid > .transition-transform.hover\\:shadow-lg.rounded-xl:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.86 (foreground color: #2dd4bf, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"inline-block text-primary font-semibold hover:text-secondary transition-colors\">Read Nutrition Guides \u2192</a>",
          "target": [
            ".transition-transform.hover\\:shadow-lg.rounded-xl:nth-child(1) > .p-6 > .hover\\:text-secondary.inline-block.text-primary"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.86 (foreground color: #2dd4bf, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2dd4bf",
                "bgColor": "#ffffff",
                "contrastRatio": 1.86,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105 hover:shadow-lg\">",
                  "target": [
                    ".bg-gray-50.py-16:nth-child(4) > .container.mx-auto.px-4 > .md\\:grid-cols-3.gap-8.grid > .transition-transform.hover\\:shadow-lg.rounded-xl:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.86 (foreground color: #2dd4bf, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"inline-block text-primary font-semibold hover:text-secondary transition-colors\">Explore Vet Resources \u2192</a>",
          "target": [
            ".transition-transform.hover\\:shadow-lg.rounded-xl:nth-child(2) > .p-6 > .hover\\:text-secondary.inline-block.text-primary"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.86 (foreground color: #2dd4bf, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2dd4bf",
                "bgColor": "#ffffff",
                "contrastRatio": 1.86,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105 hover:shadow-lg\">",
                  "target": [
                    ".bg-gray-50.py-16:nth-child(4) > .container.mx-auto.px-4 > .md\\:grid-cols-3.gap-8.grid > .transition-transform.hover\\:shadow-lg.rounded-xl:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.86 (foreground color: #2dd4bf, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"inline-block text-primary font-semibold hover:text-secondary transition-colors\">View Grooming Tips \u2192</a>",
          "target": [
            ".transition-transform.hover\\:shadow-lg.rounded-xl:nth-child(3) > .p-6 > .hover\\:text-secondary.inline-block.text-primary"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.86 (foreground color: #2dd4bf, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f97316",
                "contrastRatio": 2.8,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button type=\"submit\" class=\"bg-secondary hover:bg-secondary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-md\">Generate My Guide</button>",
                  "target": [
                    ".text-center > button"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button type=\"submit\" class=\"bg-secondary hover:bg-secondary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-md\">Generate My Guide</button>",
          "target": [
            ".text-center > button"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f97316",
                "contrastRatio": 2.8,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"inline-block bg-secondary hover:bg-secondary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-md\">Browse All Training Programs</a>",
                  "target": [
                    ".lg\\:grid-cols-2.gap-12.grid > div:nth-child(2) > .bg-secondary.hover\\:bg-secondary\\/90.px-8"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"inline-block bg-secondary hover:bg-secondary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-md\">Browse All Training Programs</a>",
          "target": [
            ".lg\\:grid-cols-2.gap-12.grid > div:nth-child(2) > .bg-secondary.hover\\:bg-secondary\\/90.px-8"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f97316",
                "bgColor": "#fef1e8",
                "contrastRatio": 2.53,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"bg-secondary/10 text-secondary text-sm font-medium px-3 py-1 rounded-full\">Free</span>",
                  "target": [
                    ".shadow-sm.hover\\:shadow-md.transition-shadow:nth-child(1) > .justify-between.items-start.mb-2 > .bg-secondary\\/10.text-secondary.px-3"
                  ]
                },
                {
                  "html": "<div class=\"bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow\">",
                  "target": [
                    ".space-y-4 > .shadow-sm.hover\\:shadow-md.transition-shadow:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.53 (foreground color: #f97316, background color: #fef1e8, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"bg-secondary/10 text-secondary text-sm font-medium px-3 py-1 rounded-full\">Free</span>",
          "target": [
            ".shadow-sm.hover\\:shadow-md.transition-shadow:nth-child(1) > .justify-between.items-start.mb-2 > .bg-secondary\\/10.text-secondary.px-3"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.53 (foreground color: #f97316, background color: #fef1e8, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f97316",
                "bgColor": "#fef1e8",
                "contrastRatio": 2.53,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"bg-secondary/10 text-secondary text-sm font-medium px-3 py-1 rounded-full\">$25</span>",
                  "target": [
                    ".shadow-sm.hover\\:shadow-md.transition-shadow:nth-child(2) > .justify-between.items-start.mb-2 > .bg-secondary\\/10.text-secondary.px-3"
                  ]
                },
                {
                  "html": "<div class=\"bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow\">",
                  "target": [
                    ".space-y-4 > .shadow-sm.hover\\:shadow-md.transition-shadow:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.53 (foreground color: #f97316, background color: #fef1e8, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"bg-secondary/10 text-secondary text-sm font-medium px-3 py-1 rounded-full\">$25</span>",
          "target": [
            ".shadow-sm.hover\\:shadow-md.transition-shadow:nth-child(2) > .justify-between.items-start.mb-2 > .bg-secondary\\/10.text-secondary.px-3"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.53 (foreground color: #f97316, background color: #fef1e8, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#f97316",
                "bgColor": "#fef1e8",
                "contrastRatio": 2.53,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"bg-secondary/10 text-secondary text-sm font-medium px-3 py-1 rounded-full\">Free</span>",
                  "target": [
                    ".shadow-sm.hover\\:shadow-md.transition-shadow:nth-child(3) > .justify-between.items-start.mb-2 > .bg-secondary\\/10.text-secondary.px-3"
                  ]
                },
                {
                  "html": "<div class=\"bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow\">",
                  "target": [
                    ".space-y-4 > .shadow-sm.hover\\:shadow-md.transition-shadow:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.53 (foreground color: #f97316, background color: #fef1e8, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"bg-secondary/10 text-secondary text-sm font-medium px-3 py-1 rounded-full\">Free</span>",
          "target": [
            ".shadow-sm.hover\\:shadow-md.transition-shadow:nth-child(3) > .justify-between.items-start.mb-2 > .bg-secondary\\/10.text-secondary.px-3"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.53 (foreground color: #f97316, background color: #fef1e8, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2dd4bf",
                "bgColor": "#f9fafb",
                "contrastRatio": 1.78,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"py-16 bg-gray-50\">",
                  "target": [
                    ".bg-gray-50.py-16:nth-child(7)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.78 (foreground color: #2dd4bf, background color: #f9fafb, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"inline-block mt-6 text-primary font-semibold hover:text-secondary transition-colors\">View All Events \u2192</a>",
          "target": [
            "div:nth-child(1) > .mt-6.hover\\:text-secondary.inline-block"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.78 (foreground color: #2dd4bf, background color: #f9fafb, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#2dd4bf",
                "bgColor": "#f9fafb",
                "contrastRatio": 1.78,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"py-16 bg-gray-50\">",
                  "target": [
                    ".bg-gray-50.py-16:nth-child(7)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.78 (foreground color: #2dd4bf, background color: #f9fafb, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"inline-block mt-6 text-primary font-semibold hover:text-secondary transition-colors\">Read More Stories \u2192</a>",
          "target": [
            "div:nth-child(2) > .mt-6.hover\\:text-secondary.inline-block"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.78 (foreground color: #2dd4bf, background color: #f9fafb, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#2dd4bf",
                "contrastRatio": 1.86,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"inline-block bg-primary hover:bg-primary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-md\">Join Our Community Forum</a>",
                  "target": [
                    ".bg-primary.hover\\:bg-primary\\/90.px-8"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.86 (foreground color: #ffffff, background color: #2dd4bf, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"inline-block bg-primary hover:bg-primary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-md\">Join Our Community Forum</a>",
          "target": [
            ".bg-primary.hover\\:bg-primary\\/90.px-8"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.86 (foreground color: #ffffff, background color: #2dd4bf, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f97316",
                "contrastRatio": 2.8,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button type=\"submit\" class=\"w-full bg-secondary hover:bg-secondary/90 text-white font-semibold py-2 px-4 rounded-lg transition-colors\">Subscribe</button>",
                  "target": [
                    "form > button"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button type=\"submit\" class=\"w-full bg-secondary hover:bg-secondary/90 text-white font-semibold py-2 px-4 rounded-lg transition-colors\">Subscribe</button>",
          "target": [
            "form > button"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 6182
      },
      {
        "y": 576,
        "height": 6182
      },
      {
        "y": 1152,
        "height": 6182
      },
      {
        "y": 1728,
        "height": 6182
      },
      {
        "y": 2304,
        "height": 6182
      },
      {
        "y": 2880,
        "height": 6182
      },
      {
        "y": 3456,
        "height": 6182
      },
      {
        "y": 4032,
        "height": 6182
      },
      {
        "y": 4608,
        "height": 6182
      },
      {
        "y": 5184,
        "height": 6182
      },
      {
        "y": 5462,
        "height": 6182
      }
    ],
    "scans": 12,
    "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 "Pets" 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: "Pets"
- Description: Pet care, adoption, veterinary resources, training, and animal rescue information.

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

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Find Help", "Community", "About".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Pets" category. Consider themes similar to: "Adoption Stories", "Nutrition Advice", "Training Tips".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "vaccination schedule", "spay/neuter", "microchipping".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Learn More", "Adopt Today", "Get Supplies".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Pets" sector. Ideas similar but not limited to: "care guide finder".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "event calendar", "adoption success stories", "rescue spotlights".
-   **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.