Thinking Machines Inkling – Hobbies and Interests

via BaseTen · Generated

  • AIMAC Debt 34.15
  • Cost $0.06
  • Total Violations 110
  • HTML Size 66 KB
  • Em Dashes 4

Screenshot

View Thinking Machines Inkling Hobbies and Interests page View Live Page

Accessibility Issues Found

6 Critical 104 Serious

  • color-contrast serious 94 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <h4 class="text-white font-bold text-lg">CraftConnect</h4>
  • image-alt critical 4 instances

    Images must have alternative text

    Example HTML <img src="https://picsum.photos/80/80?random=9" class="w-16 h-16 rounded-lg object-cover flex-shrink-0">
  • label critical 1 instance

    Form elements must have labels

    Example HTML <input type="range" id="waste" min="5" max="30" value="15" class="w-full accent-accent-500">
  • link-name serious 10 instances

    Links must have discernible text

    Example HTML <a href="#" class="flex-shrink-0 self-center text-accent-600 hover:text-accent-700"> <i class="fas fa-chevron-right...
  • select-name critical 1 instance

    Select element must have an accessible name

    Example HTML <select id="craftType" class="w-full px-4 py-3 rounded-xl border border-craft-200 focus:border-accent-500 focus:ring-2 focus:ring-accent-200 outlin...

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>CraftConnect Hub | Your Gateway to Creative Hobbies</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        display: ['Playfair Display', 'serif'],
                    },
                    colors: {
                        craft: {
                            50: '#fdf8f6',
                            100: '#f2e8e5',
                            200: '#eaddd7',
                            300: '#e0cec7',
                            400: '#d2bab0',
                            500: '#a09288',
                            600: '#8a7a6e',
                            700: '#6d5d52',
                            800: '#4a3f35',
                            900: '#2c241e',
                        },
                        accent: {
                            50: '#fff7ed',
                            100: '#ffedd5',
                            200: '#fed7aa',
                            300: '#fdba74',
                            400: '#fb923c',
                            500: '#f97316',
                            600: '#ea580c',
                            700: '#c2410c',
                        }
                    },
                    animation: {
                        'fade-up': 'fadeUp 0.8s ease-out forwards',
                        'fade-in': 'fadeIn 0.6s ease-out forwards',
                        'slide-right': 'slideRight 0.5s ease-out forwards',
                    },
                    keyframes: {
                        fadeUp: {
                            '0%': { opacity: '0', transform: 'translateY(30px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        },
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideRight: {
                            '0%': { opacity: '0', transform: 'translateX(-20px)' },
                            '100%': { opacity: '1', transform: 'translateX(0)' },
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Inter', sans-serif; }
        h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; }
        .hero-overlay { background: linear-gradient(135deg, rgba(44,36,30,0.85) 0%, rgba(44,36,30,0.6) 50%, rgba(242,145,0,0.3) 100%); }
        .card-hover { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
        .card-hover:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); }
        .btn-primary { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); transition: all 0.3s ease; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(249, 115, 22, 0.4); }
        .nav-link { position: relative; }
        .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: #f97316; transition: width 0.3s ease; }
        .nav-link:hover::after { width: 100%; }
        .scroll-reveal { opacity: 0; transform: translateY(30px); transition: all 0.7s ease-out; }
        .scroll-reveal.active { opacity: 1; transform: translateY(0); }
        .calculator-card { background: linear-gradient(145deg, #ffffff 0%, #fdf8f6 100%); }
        .feature-icon { background: linear-gradient(135deg, #f97316 0%, #fb923c 100%); }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #a09288; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #6d5d52; }
        .img-overlay { position: relative; overflow: hidden; }
        .img-overlay img { transition: transform 0.6s ease; }
        .img-overlay:hover img { transform: scale(1.05); }
        .tag-badge { background: rgba(249,115,22,0.1); color: #ea580c; }
    </style>
</head>
<body class="bg-craft-50 text-craft-900 antialiased">

    <!-- Navigation -->
    <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-md border-b border-craft-100 transition-all duration-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-20">
                <div class="flex items-center gap-3">
                    <img src="https://placehold.co/50x50/f97316/ffffff?text=CC" alt="CraftConnect Logo" class="w-12 h-12 rounded-xl shadow-lg">
                    <div>
                        <h1 class="text-2xl font-bold text-craft-900 tracking-tight">CraftConnect</h1>
                        <p class="text-xs text-craft-500 -mt-1 font-medium tracking-wide">HUB</p>
                    </div>
                </div>
                <div class="hidden md:flex items-center gap-8">
                    <a href="#home" class="nav-link text-craft-700 hover:text-accent-600 font-medium text-sm transition-colors">Home</a>
                    <a href="#guides" class="nav-link text-craft-700 hover:text-accent-600 font-medium text-sm transition-colors">Beginner Guides</a>
                    <a href="#showcase" class="nav-link text-craft-700 hover:text-accent-600 font-medium text-sm transition-colors">Projects</a>
                    <a href="#community" class="nav-link text-craft-700 hover:text-accent-600 font-medium text-sm transition-colors">Community</a>
                    <a href="#forums" class="nav-link text-craft-700 hover:text-accent-600 font-medium text-sm transition-colors">Forums</a>
                    <a href="#events" class="nav-link text-craft-700 hover:text-accent-600 font-medium text-sm transition-colors">Events</a>
                    <a href="#calculator" class="nav-link text-craft-700 hover:text-accent-600 font-medium text-sm transition-colors">Tools</a>
                </div>
                <div class="hidden md:flex items-center gap-4">
                    <a href="#join" class="btn-primary text-white px-6 py-2.5 rounded-full font-semibold text-sm shadow-lg shadow-accent-500/30">Join Free</a>
                </div>
                <button id="mobile-menu-btn" class="md:hidden text-craft-700 text-2xl">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-craft-100">
            <div class="px-4 py-4 space-y-3">
                <a href="#home" class="block text-craft-700 font-medium py-2">Home</a>
                <a href="#guides" class="block text-craft-700 font-medium py-2">Beginner Guides</a>
                <a href="#showcase" class="block text-craft-700 font-medium py-2">Projects</a>
                <a href="#community" class="block text-craft-700 font-medium py-2">Community</a>
                <a href="#forums" class="block text-craft-700 font-medium py-2">Forums</a>
                <a href="#events" class="block text-craft-700 font-medium py-2">Events</a>
                <a href="#calculator" class="block text-craft-700 font-medium py-2">Tools</a>
                <a href="#join" class="block btn-primary text-white px-6 py-3 rounded-full font-semibold text-center mt-2">Join Free</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="relative min-h-screen flex items-center pt-20 overflow-hidden">
        <div class="absolute inset-0">
            <img src="https://picsum.photos/1920/1080?grayscale&blur=2" alt="Creative workspace background" class="w-full h-full object-cover opacity-40">
            <div class="hero-overlay absolute inset-0"></div>
        </div>
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-32">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div class="scroll-reveal">
                    <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full px-4 py-1.5 mb-6">
                        <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
                        <span class="text-white/90 text-sm font-medium">12,500+ active creators</span>
                    </div>
                    <h2 class="text-5xl lg:text-7xl font-bold text-white leading-tight mb-6">
                        Discover Your Next <em class="text-accent-400 not-italic border-b-4 border-accent-500/50">Creative Passion</em>
                    </h2>
                    <p class="text-lg text-white/80 leading-relaxed mb-8 max-w-xl">
                        From woodworking mastery to textile artistry, CraftConnect Hub brings together enthusiasts, experts, and beginners in one vibrant ecosystem. Explore guides, share projects, and connect with local makers.
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#guides" class="btn-primary text-white px-8 py-4 rounded-full font-bold text-base shadow-xl shadow-accent-600/30 inline-flex items-center gap-2">
                            Start Exploring <i class="fas fa-arrow-right"></i>
                        </a>
                        <a href="#showcase" class="bg-white/10 backdrop-blur-sm border-2 border-white/30 text-white px-8 py-4 rounded-full font-bold text-base hover:bg-white/20 transition-all inline-flex items-center gap-2">
                            <i class="fas fa-play-circle"></i> Watch Video
                        </a>
                    </div>
                    <div class="mt-12 flex items-center gap-6">
                        <div class="flex -space-x-3">
                            <img src="https://i.pravatar.cc/40?u=1" class="w-10 h-10 rounded-full border-2 border-white/30" alt="Member">
                            <img src="https://i.pravatar.cc/40?u=2" class="w-10 h-10 rounded-full border-2 border-white/30" alt="Member">
                            <img src="https://i.pravatar.cc/40?u=3" class="w-10 h-10 rounded-full border-2 border-white/30" alt="Member">
                            <img src="https://i.pravatar.cc/40?u=4" class="w-10 h-10 rounded-full border-2 border-white/30" alt="Member">
                        </div>
                        <p class="text-white/70 text-sm">Join <span class="text-white font-bold">2,400+</span> monthly active members</p>
                    </div>
                </div>
                <div class="hidden lg:block scroll-reveal" style="animation-delay: 0.2s">
                    <div class="relative">
                        <div class="absolute -inset-4 bg-accent-500/20 rounded-3xl blur-2xl"></div>
                        <img src="https://picsum.photos/600/700?grayscale=false" alt="Crafting workshop" class="relative rounded-2xl shadow-2xl w-full object-cover h-[500px]">
                        <div class="absolute -bottom-6 -left-6 bg-white rounded-2xl p-5 shadow-xl max-w-xs">
                            <div class="flex items-center gap-3 mb-2">
                                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
                                    <i class="fas fa-check text-green-600"></i>
                                </div>
                                <div>
                                    <p class="font-bold text-craft-900 text-sm">Project Completed</p>
                                    <p class="text-craft-500 text-xs">Wooden Coffee Table</p>
                                </div>
                            </div>
                            <div class="w-full bg-craft-100 rounded-full h-2 mt-2">
                                <div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Bar -->
    <section class="bg-white border-y border-craft-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                <div class="scroll-reveal">
                    <p class="text-3xl lg:text-4xl font-bold text-accent-600">450+</p>
                    <p class="text-craft-500 text-sm mt-1 font-medium">Project Guides</p>
                </div>
                <div class="scroll-reveal" style="transition-delay: 0.1s">
                    <p class="text-3xl lg:text-4xl font-bold text-accent-600">85</p>
                    <p class="text-craft-500 text-sm mt-1 font-medium">Craft Categories</p>
                </div>
                <div class="scroll-reveal" style="transition-delay: 0.2s">
                    <p class="text-3xl lg:text-4xl font-bold text-accent-600">12.5K</p>
                    <p class="text-craft-500 text-sm mt-1 font-medium">Community Members</p>
                </div>
                <div class="scroll-reveal" style="transition-delay: 0.3s">
                    <p class="text-3xl lg:text-4xl font-bold text-accent-600">320</p>
                    <p class="text-craft-500 text-sm mt-1 font-medium">Local Events/Year</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content Area with Sidebar Layout -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
        <div class="grid lg:grid-cols-3 gap-12">
            
            <!-- Left Content (2/3) -->
            <div class="lg:col-span-2 space-y-24">
                
                <!-- Beginner Guides -->
                <section id="guides" class="scroll-reveal">
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-10 h-10 rounded-lg feature-icon flex items-center justify-center">
                            <i class="fas fa-book-open text-white"></i>
                        </div>
                        <span class="tag-badge text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full">Education</span>
                    </div>
                    <h3 class="text-3xl lg:text-4xl font-bold text-craft-900 mb-4">Beginner's Craft Academy</h3>
                    <p class="text-craft-600 text-lg leading-relaxed mb-8">
                        Every master was once a beginner. Our comprehensive guide library covers the essential techniques, material sourcing strategies, and safety protocols across every major craft discipline. Whether you're picking up a chisel for the first time or learning to thread a needle with precision, our structured learning paths take you from absolute novice to confident creator.
                    </p>
                    
                    <div class="grid md:grid-cols-2 gap-6 mb-8">
                        <div class="card-hover bg-white rounded-2xl p-6 shadow-lg shadow-craft-200/50 border border-craft-100">
                            <img src="https://picsum.photos/400/250?random=1" alt="Woodworking guide" class="w-full h-40 object-cover rounded-xl mb-4">
                            <h4 class="text-xl font-bold text-craft-900 mb-2">Woodworking Fundamentals</h4>
                            <p class="text-craft-600 text-sm leading-relaxed mb-4">Master grain orientation, joint construction, and finish application. Learn to select hardwoods versus softwoods and understand seasonal wood movement for lasting builds.</p>
                            <a href="#" class="text-accent-600 font-semibold text-sm inline-flex items-center gap-1 hover:gap-2 transition-all">Read Guide <i class="fas fa-arrow-right text-xs"></i></a>
                        </div>
                        <div class="card-hover bg-white rounded-2xl p-6 shadow-lg shadow-craft-200/50 border border-craft-100">
                            <img src="https://picsum.photos/400/250?random=2" alt="Textile arts" class="w-full h-40 object-cover rounded-xl mb-4">
                            <h4 class="text-xl font-bold text-craft-900 mb-2">Textile & Fiber Arts</h4>
                            <p class="text-craft-600 text-sm leading-relaxed mb-4">Explore weaving, knitting, embroidery, and dye techniques. Understand fiber properties, color theory for textiles, and sustainable material sourcing from local suppliers.</p>
                            <a href="#" class="text-accent-600 font-semibold text-sm inline-flex items-center gap-1 hover:gap-2 transition-all">Read Guide <i class="fas fa-arrow-right text-xs"></i></a>
                        </div>
                        <div class="card-hover bg-white rounded-2xl p-6 shadow-lg shadow-craft-200/50 border border-craft-100">
                            <img src="https://picsum.photos/400/250?random=3" alt="Pottery crafting" class="w-full h-40 object-cover rounded-xl mb-4">
                            <h4 class="text-xl font-bold text-craft-900 mb-2">Ceramics & Pottery</h4>
                            <p class="text-craft-600 text-sm leading-relaxed mb-4">From wheel throwing to hand-building, discover clay bodies, glaze chemistry, and kiln firing schedules. Includes studio setup guidance for home practitioners.</p>
                            <a href="#" class="text-accent-600 font-semibold text-sm inline-flex items-center gap-1 hover:gap-2 transition-all">Read Guide <i class="fas fa-arrow-right text-xs"></i></a>
                        </div>
                        <div class="card-hover bg-white rounded-2xl p-6 shadow-lg shadow-craft-200/50 border border-craft-100">
                            <img src="https://picsum.photos/400/250?random=4" alt="Restoration work" class="w-full h-40 object-cover rounded-xl mb-4">
                            <h4 class="text-xl font-bold text-craft-900 mb-2">Restoration Techniques</h4>
                            <p class="text-craft-600 text-sm leading-relaxed mb-4">Breathe new life into vintage furniture, antique tools, and heritage items. Cover structural repair, surface refinishing, and authentic material matching for true restoration.</p>
                            <a href="#" class="text-accent-600 font-semibold text-sm inline-flex items-center gap-1 hover:gap-2 transition-all">Read Guide <i class="fas fa-arrow-right text-xs"></i></a>
                        </div>
                    </div>
                    <a href="#" class="btn-primary text-white px-6 py-3 rounded-full font-semibold text-sm inline-flex items-center gap-2">View All 450 Guides <i class="fas fa-chevron-right"></i></a>
                </section>

                <!-- Project Showcase -->
                <section id="showcase" class="scroll-reveal">
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-10 h-10 rounded-lg feature-icon flex items-center justify-center">
                            <i class="fas fa-hammer text-white"></i>
                        </div>
                        <span class="tag-badge text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full">Showcase</span>
                    </div>
                    <h3 class="text-3xl lg:text-4xl font-bold text-craft-900 mb-4">Featured Creator Projects</h3>
                    <p class="text-craft-600 text-lg leading-relaxed mb-8">
                        Our community produces extraordinary work daily. These featured projects represent the pinnacle of craftsmanship, innovation, and dedication within our network. Each piece tells a story of learning, iteration, and artistic vision brought to life through skilled hands and patient minds.
                    </p>
                    
                    <div class="space-y-8">
                        <div class="img-overlay rounded-2xl overflow-hidden shadow-xl">
                            <img src="https://picsum.photos/800/450?random=5" alt="Custom wooden dining table" class="w-full h-64 lg:h-80 object-cover">
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
                                <span class="text-accent-400 text-xs font-bold uppercase tracking-wider mb-1 block">Woodworking</span>
                                <h4 class="text-white text-2xl font-bold mb-1">Live-Edge Walnut Dining Table</h4>
                                <p class="text-white/80 text-sm">By Marcus Chen · 120 hours · Custom design with epoxy river</p>
                            </div>
                        </div>
                        
                        <div class="grid md:grid-cols-2 gap-6">
                            <div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg border border-craft-100">
                                <img src="https://picsum.photos/500/350?random=6" alt="Handwoven textile" class="w-full h-48 object-cover">
                                <div class="p-5">
                                    <span class="tag-badge text-xs font-bold px-2 py-0.5 rounded">Textiles</span>
                                    <h4 class="font-bold text-craft-900 mt-2 mb-1">Hand-Dyed Silk Scarf Collection</h4>
                                    <p class="text-craft-500 text-sm">Natural indigo and botanical dyes on ethically sourced silk.</p>
                                </div>
                            </div>
                            <div class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg border border-craft-100">
                                <img src="https://picsum.photos/500/350?random=7" alt="Ceramic vase set" class="w-full h-48 object-cover">
                                <div class="p-5">
                                    <span class="tag-badge text-xs font-bold px-2 py-0.5 rounded">Ceramics</span>
                                    <h4 class="font-bold text-craft-900 mt-2 mb-1">Minimalist Ceramic Vase Set</h4>
                                    <p class="text-craft-500 text-sm">Wheel-thrown stoneware with matte glaze finish.</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="img-overlay rounded-2xl overflow-hidden shadow-xl">
                            <img src="https://picsum.photos/800/450?random=8" alt="Leather craft workshop" class="w-full h-64 lg:h-80 object-cover">
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
                                <span class="text-accent-400 text-xs font-bold uppercase tracking-wider mb-1 block">Leathercraft</span>
                                <h4 class="text-white text-2xl font-bold mb-1">Full-Grain Leather Workshop Bag</h4>
                                <p class="text-white/80 text-sm">By Sarah Williams · 45 hours · Hand-stitched with waxed thread</p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-8 text-center">
                        <a href="#" class="btn-primary text-white px-8 py-4 rounded-full font-bold inline-flex items-center gap-2">Explore Full Gallery <i class="fas fa-images"></i></a>
                    </div>
                </section>

                <!-- Interactive Calculator -->
                <section id="calculator" class="scroll-reveal">
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-10 h-10 rounded-lg feature-icon flex items-center justify-center">
                            <i class="fas fa-calculator text-white"></i>
                        </div>
                        <span class="tag-badge text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full">Tool</span>
                    </div>
                    <h3 class="text-3xl lg:text-4xl font-bold text-craft-900 mb-4">Material Supply Calculator</h3>
                    <p class="text-craft-600 text-lg leading-relaxed mb-8">
                        Planning a new project? Our intelligent calculator helps you determine precise material quantities, estimated costs, and waste allowances based on your specific dimensions and craft type. Never over-purchase or fall short mid-project again.
                    </p>
                    
                    <div class="calculator-card rounded-3xl p-8 shadow-xl border border-craft-100">
                        <div class="grid md:grid-cols-2 gap-8">
                            <div class="space-y-5">
                                <div>
                                    <label class="block text-craft-700 font-semibold mb-2 text-sm">Craft Type</label>
                                    <select id="craftType" class="w-full px-4 py-3 rounded-xl border border-craft-200 focus:border-accent-500 focus:ring-2 focus:ring-accent-200 outline-none transition-all bg-white text-craft-800">
                                        <option value="wood">Woodworking</option>
                                        <option value="fabric">Fabric / Textile</option>
                                        <option value="paint">Painting / Finishing</option>
                                        <option value="clay">Pottery / Clay</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-craft-700 font-semibold mb-2 text-sm">Project Dimensions</label>
                                    <div class="grid grid-cols-2 gap-3">
                                        <input type="number" id="width" placeholder="Width (in)" class="w-full px-4 py-3 rounded-xl border border-craft-200 focus:border-accent-500 outline-none transition-all">
                                        <input type="number" id="height" placeholder="Height (in)" class="w-full px-4 py-3 rounded-xl border border-craft-200 focus:border-accent-500 outline-none transition-all">
                                    </div>
                                    <div class="mt-3">
                                        <input type="number" id="depth" placeholder="Depth / Quantity" class="w-full px-4 py-3 rounded-xl border border-craft-200 focus:border-accent-500 outline-none transition-all">
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-craft-700 font-semibold mb-2 text-sm">Waste Allowance %</label>
                                    <input type="range" id="waste" min="5" max="30" value="15" class="w-full accent-accent-500">
                                    <div class="flex justify-between text-xs text-craft-500 mt-1">
                                        <span>5%</span>
                                        <span id="wasteValue" class="font-bold text-accent-600">15%</span>
                                        <span>30%</span>
                                    </div>
                                </div>
                                <button id="calcBtn" class="w-full btn-primary text-white py-4 rounded-xl font-bold text-base shadow-lg">
                                    Calculate Materials <i class="fas fa-magic ml-2"></i>
                                </button>
                            </div>
                            <div class="bg-craft-50 rounded-2xl p-6 flex flex-col justify-center">
                                <h4 class="font-bold text-craft-900 mb-4 text-lg">Your Estimate</h4>
                                <div id="resultArea" class="space-y-4">
                                    <div class="flex justify-between items-center py-3 border-b border-craft-200">
                                        <span class="text-craft-600">Primary Material</span>
                                        <span id="resMaterial" class="font-bold text-craft-900">--</span>
                                    </div>
                                    <div class="flex justify-between items-center py-3 border-b border-craft-200">
                                        <span class="text-craft-600">Quantity Needed</span>
                                        <span id="resQty" class="font-bold text-craft-900">--</span>
                                    </div>
                                    <div class="flex justify-between items-center py-3 border-b border-craft-200">
                                        <span class="text-craft-600">With Waste</span>
                                        <span id="resWaste" class="font-bold text-accent-600">--</span>
                                    </div>
                                    <div class="flex justify-between items-center py-3 border-b border-craft-200">
                                        <span class="text-craft-600">Est. Cost</span>
                                        <span id="resCost" class="font-bold text-green-600">--</span>
                                    </div>
                                    <div class="mt-4 p-4 bg-white rounded-xl border border-craft-200">
                                        <p class="text-xs text-craft-500 mb-1">Recommended Suppliers</p>
                                        <p id="resSupplier" class="text-sm font-medium text-craft-800">Enter dimensions to see recommendations</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Community / Forums Preview -->
                <section id="community" class="scroll-reveal">
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-10 h-10 rounded-lg feature-icon flex items-center justify-center">
                            <i class="fas fa-users text-white"></i>
                        </div>
                        <span class="tag-badge text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full">Social</span>
                    </div>
                    <h3 class="text-3xl lg:text-4xl font-bold text-craft-900 mb-4">Vibrant Online Communities</h3>
                    <p class="text-craft-600 text-lg leading-relaxed mb-8">
                        Crafting thrives in community. Our forums and local chapters connect you with fellow makers who share your passion, offer constructive feedback, and celebrate your milestones. From troubleshooting technical challenges to organizing group material sourcing trips, the collective knowledge here is unparalleled.
                    </p>
                    
                    <div class="grid md:grid-cols-3 gap-5 mb-8">
                        <div class="bg-white p-6 rounded-2xl shadow-md border border-craft-100 text-center card-hover">
                            <div class="w-14 h-14 mx-auto bg-blue-100 rounded-full flex items-center justify-center mb-4">
                                <i class="fas fa-comments text-blue-600 text-xl"></i>
                            </div>
                            <h4 class="font-bold text-craft-900 mb-2">Discussion Forums</h4>
                            <p class="text-craft-500 text-sm leading-relaxed">24 specialized forums with 50,000+ threads covering every craft niche imaginable.</p>
                        </div>
                        <div class="bg-white p-6 rounded-2xl shadow-md border border-craft-100 text-center card-hover">
                            <div class="w-14 h-14 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-4">
                                <i class="fas fa-users-cog text-green-600 text-xl"></i>
                            </div>
                            <h4 class="font-bold text-craft-900 mb-2">Local Chapters</h4>
                            <p class="text-craft-500 text-sm leading-relaxed">180 local groups organizing monthly meetups, workshops, and group buys.</p>
                        </div>
                        <div class="bg-white p-6 rounded-2xl shadow-md border border-craft-100 text-center card-hover">
                            <div class="w-14 h-14 mx-auto bg-purple-100 rounded-full flex items-center justify-center mb-4">
                                <i class="fas fa-trophy text-purple-600 text-xl"></i>
                            </div>
                            <h4 class="font-bold text-craft-900 mb-2">Challenges</h4>
                            <p class="text-craft-500 text-sm leading-relaxed">Monthly themed challenges with expert judging and community voting.</p>
                        </div>
                    </div>
                    
                    <div class="bg-craft-900 rounded-2xl p-8 text-center">
                        <h4 class="text-white text-xl font-bold mb-3">Ready to join the conversation?</h4>
                        <p class="text-craft-300 mb-6 max-w-lg mx-auto">Connect with makers in your area and around the world. Share your work, ask questions, and grow together.</p>
                        <a href="#forums" class="bg-accent-500 hover:bg-accent-600 text-white px-8 py-3 rounded-full font-bold inline-flex items-center gap-2 transition-all">Find Your Group <i class="fas fa-search-location"></i></a>
                    </div>
                </section>

                <!-- Events Section -->
                <section id="events" class="scroll-reveal">
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-10 h-10 rounded-lg feature-icon flex items-center justify-center">
                            <i class="fas fa-calendar-alt text-white"></i>
                        </div>
                        <span class="tag-badge text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full">Calendar</span>
                    </div>
                    <h3 class="text-3xl lg:text-4xl font-bold text-craft-900 mb-4">Upcoming Workshops & Events</h3>
                    <p class="text-craft-600 text-lg leading-relaxed mb-8">
                        Hands-on learning accelerates mastery. Our curated event calendar features workshops led by master craftspeople, regional craft fairs, and virtual masterclasses accessible from anywhere. Secure your spot early—popular sessions fill within days.
                    </p>
                    
                    <div class="space-y-4">
                        <div class="flex gap-4 bg-white p-5 rounded-2xl shadow-md border border-craft-100 card-hover">
                            <div class="flex-shrink-0 w-16 h-16 bg-accent-100 rounded-xl flex flex-col items-center justify-center text-center">
                                <span class="text-accent-700 text-xs font-bold">MAR</span>
                                <span class="text-accent-700 text-xl font-bold">15</span>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-bold text-craft-900 mb-1">Advanced Joinery Workshop</h4>
                                <p class="text-craft-500 text-sm mb-2"><i class="fas fa-map-marker-alt text-accent-500 mr-1"></i> Portland Makerspace, OR</p>
                                <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full font-medium">12 spots left</span>
                            </div>
                            <a href="#" class="flex-shrink-0 self-center text-accent-600 hover:text-accent-700">
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        </div>
                        <div class="flex gap-4 bg-white p-5 rounded-2xl shadow-md border border-craft-100 card-hover">
                            <div class="flex-shrink-0 w-16 h-16 bg-blue-100 rounded-xl flex flex-col items-center justify-center text-center">
                                <span class="text-blue-700 text-xs font-bold">MAR</span>
                                <span class="text-blue-700 text-xl font-bold">22</span>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-bold text-craft-900 mb-1">Spring Craft Fair 2024</h4>
                                <p class="text-craft-500 text-sm mb-2"><i class="fas fa-map-marker-alt text-blue-500 mr-1"></i> Downtown Convention Center</p>
                                <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full font-medium">Open to public</span>
                            </div>
                            <a href="#" class="flex-shrink-0 self-center text-accent-600 hover:text-accent-700">
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        </div>
                        <div class="flex gap-4 bg-white p-5 rounded-2xl shadow-md border border-craft-100 card-hover">
                            <div class="flex-shrink-0 w-16 h-16 bg-purple-100 rounded-xl flex flex-col items-center justify-center text-center">
                                <span class="text-purple-700 text-xs font-bold">APR</span>
                                <span class="text-purple-700 text-xl font-bold">05</span>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-bold text-craft-900 mb-1">Virtual: Natural Dyeing Masterclass</h4>
                                <p class="text-craft-500 text-sm mb-2"><i class="fas fa-video text-purple-500 mr-1"></i> Zoom · 3-hour session</p>
                                <span class="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded-full font-medium">Online</span>
                            </div>
                            <a href="#" class="flex-shrink-0 self-center text-accent-600 hover:text-accent-700">
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        </div>
                    </div>
                </section>

                <!-- Testimonials -->
                <section class="scroll-reveal">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-10 h-10 rounded-lg feature-icon flex items-center justify-center">
                            <i class="fas fa-quote-left text-white"></i>
                        </div>
                        <h3 class="text-2xl lg:text-3xl font-bold text-craft-900">What Our Community Says</h3>
                    </div>
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="bg-white p-6 rounded-2xl shadow-lg border border-craft-100 relative">
                            <i class="fas fa-quote-right absolute top-4 right-4 text-craft-200 text-3xl"></i>
                            <p class="text-craft-600 text-sm leading-relaxed mb-4">"The woodworking guides here transformed my hobby into a side business. The material sourcing section alone saved me hundreds on lumber costs through direct mill connections."</p>
                            <div class="flex items-center gap-3">
                                <img src="https://i.pravatar.cc/50?u=marcus" alt="Marcus" class="w-10 h-10 rounded-full">
                                <div>
                                    <p class="font-bold text-craft-900 text-sm">Marcus Chen</p>
                                    <p class="text-craft-500 text-xs">Furniture Maker · Member since 2021</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-white p-6 rounded-2xl shadow-lg border border-craft-100 relative">
                            <i class="fas fa-quote-right absolute top-4 right-4 text-craft-200 text-3xl"></i>
                            <p class="text-craft-600 text-sm leading-relaxed mb-4">"I found my local pottery chapter through this platform. The community feedback on my glazing techniques has been invaluable—my work improved exponentially within months."</p>
                            <div class="flex items-center gap-3">
                                <img src="https://i.pravatar.cc/50?u=elena" alt="Elena" class="w-10 h-10 rounded-full">
                                <div>
                                    <p class="font-bold text-craft-900 text-sm">Elena Rodriguez</p>
                                    <p class="text-craft-500 text-xs">Ceramic Artist · Member since 2022</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-white p-6 rounded-2xl shadow-lg border border-craft-100 relative md:col-span-2">
                            <i class="fas fa-quote-right absolute top-4 right-4 text-craft-200 text-3xl"></i>
                            <p class="text-craft-600 text-sm leading-relaxed mb-4">"As a complete beginner to textile arts, I was overwhelmed by scattered YouTube videos. CraftConnect's structured learning paths took me from zero to weaving my first scarf in just six weeks. The calculator tool is genius for planning projects without waste."</p>
                            <div class="flex items-center gap-3">
                                <img src="https://i.pravatar.cc/50?u=james" alt="James" class="w-10 h-10 rounded-full">
                                <div>
                                    <p class="font-bold text-craft-900 text-sm">James Park</p>
                                    <p class="text-craft-500 text-xs">Weaving Enthusiast · Member since 2023</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- FAQ Accordion -->
                <section class="scroll-reveal">
                    <h3 class="text-2xl lg:text-3xl font-bold text-craft-900 mb-6">Frequently Asked Questions</h3>
                    <div class="space-y-3" id="faqContainer">
                        <div class="faq-item bg-white rounded-xl border border-craft-200 overflow-hidden">
                            <button class="faq-toggle w-full px-6 py-4 text-left flex justify-between items-center font-semibold text-craft-800 hover:bg-craft-50 transition-colors">
                                <span>Is membership free or paid?</span>
                                <i class="fas fa-chevron-down text-craft-400 transition-transform"></i>
                            </button>
                            <div class="faq-content hidden px-6 pb-4 text-craft-600 text-sm leading-relaxed">
                                Basic membership is completely free and includes access to our guide library, community forums, and event listings. Premium membership ($9/month) adds exclusive masterclasses, advanced calculator tools, and direct messaging with expert mentors.
                            </div>
                        </div>
                        <div class="faq-item bg-white rounded-xl border border-craft-200 overflow-hidden">
                            <button class="faq-toggle w-full px-6 py-4 text-left flex justify-between items-center font-semibold text-craft-800 hover:bg-craft-50 transition-colors">
                                <span>Can I sell my projects through the platform?</span>
                                <i class="fas fa-chevron-down text-craft-400 transition-transform"></i>
                            </button>
                            <div class="faq-content hidden px-6 pb-4 text-craft-600 text-sm leading-relaxed">
                                Yes! Our Marketplace feature (available for Premium members) allows you to list handmade items with integrated payment processing. We charge a 5% transaction fee—significantly lower than other platforms—because we believe in supporting creators.
                            </div>
                        </div>
                        <div class="faq-item bg-white rounded-xl border border-craft-200 overflow-hidden">
                            <button class="faq-toggle w-full px-6 py-4 text-left flex justify-between items-center font-semibold text-craft-800 hover:bg-craft-50 transition-colors">
                                <span>Are the workshops suitable for all skill levels?</span>
                                <i class="fas fa-chevron-down text-craft-400 transition-transform"></i>
                            </button>
                            <div class="faq-content hidden px-6 pb-4 text-craft-600 text-sm leading-relaxed">
                                Each workshop lists required skill levels: Beginner, Intermediate, and Advanced. Many offer tiered instruction where experts can tackle advanced techniques while newcomers focus on fundamentals within the same session.
                            </div>
                        </div>
                        <div class="faq-item bg-white rounded-xl border border-craft-200 overflow-hidden">
                            <button class="faq-toggle w-full px-6 py-4 text-left flex justify-between items-center font-semibold text-craft-800 hover:bg-craft-50 transition-colors">
                                <span>How do local chapters work?</span>
                                <i class="fas fa-chevron-down text-craft-400 transition-transform"></i>
                            </button>
                            <div class="faq-content hidden px-6 pb-4 text-craft-600 text-sm leading-relaxed">
                                Local chapters are member-organized groups within geographic regions. Use our map tool to find groups near you, or apply to start your own if none exists in your area. Chapters organize their own schedules for meetups, skill shares, and group purchasing.
                            </div>
                        </div>
                    </div>
                </section>

            </div>

            <!-- Right Sidebar (1/3) -->
            <aside class="lg:col-span-1 space-y-8">
                
                <!-- Membership Card -->
                <div id="join" class="bg-gradient-to-br from-accent-500 to-accent-600 rounded-2xl p-6 text-white shadow-xl scroll-reveal sticky top-24">
                    <h4 class="font-bold text-xl mb-2">Become a Member</h4>
                    <p class="text-white/90 text-sm mb-5 leading-relaxed">Get unlimited access to guides, tools, and a global network of creators.</p>
                    <ul class="space-y-2 mb-6 text-sm">
                        <li class="flex items-center gap-2"><i class="fas fa-check-circle text-accent-200"></i> 450+ Project Guides</li>
                        <li class="flex items-center gap-2"><i class="fas fa-check-circle text-accent-200"></i> Material Calculator</li>
                        <li class="flex items-center gap-2"><i class="fas fa-check-circle text-accent-200"></i> Forum Access</li>
                        <li class="flex items-center gap-2"><i class="fas fa-check-circle text-accent-200"></i> Event Discounts</li>
                    </ul>
                    <a href="#" class="block w-full bg-white text-accent-600 text-center py-3 rounded-xl font-bold hover:bg-craft-50 transition-colors">Join Free Today</a>
                    <p class="text-center text-white/60 text-xs mt-3">No credit card required</p>
                </div>

                <!-- Popular Projects -->
                <div class="bg-white rounded-2xl p-6 shadow-lg border border-craft-100 scroll-reveal">
                    <h4 class="font-bold text-craft-900 mb-4 flex items-center gap-2">
                        <i class="fas fa-fire text-accent-500"></i> Trending Now
                    </h4>
                    <div class="space-y-4">
                        <a href="#" class="flex gap-3 group">
                            <img src="https://picsum.photos/80/80?random=9" class="w-16 h-16 rounded-lg object-cover flex-shrink-0">
                            <div>
                                <p class="font-semibold text-craft-800 text-sm group-hover:text-accent-600 transition-colors">Mid-Century Coffee Table</p>
                                <p class="text-craft-400 text-xs">1,240 views · Wood</p>
                            </div>
                        </a>
                        <a href="#" class="flex gap-3 group">
                            <img src="https://picsum.photos/80/80?random=10" class="w-16 h-16 rounded-lg object-cover flex-shrink-0">
                            <div>
                                <p class="font-semibold text-craft-800 text-sm group-hover:text-accent-600 transition-colors">Macramé Wall Hanging</p>
                                <p class="text-craft-400 text-xs">980 views · Fiber</p>
                            </div>
                        </a>
                        <a href="#" class="flex gap-3 group">
                            <img src="https://picsum.photos/80/80?random=11" class="w-16 h-16 rounded-lg object-cover flex-shrink-0">
                            <div>
                                <p class="font-semibold text-craft-800 text-sm group-hover:text-accent-600 transition-colors">Hand-Poured Soy Candles</p>
                                <p class="text-craft-400 text-xs">850 views · Candle</p>
                            </div>
                        </a>
                        <a href="#" class="flex gap-3 group">
                            <img src="https://picsum.photos/80/80?random=12" class="w-16 h-16 rounded-lg object-cover flex-shrink-0">
                            <div>
                                <p class="font-semibold text-craft-800 text-sm group-hover:text-accent-600 transition-colors">Leather Journal Cover</p>
                                <p class="text-craft-400 text-xs">720 views · Leather</p>
                            </div>
                        </a>
                    </div>
                </div>

                <!-- Event Calendar Mini -->
                <div class="bg-white rounded-2xl p-6 shadow-lg border border-craft-100 scroll-reveal">
                    <h4 class="font-bold text-craft-900 mb-4 flex items-center gap-2">
                        <i class="fas fa-calendar-day text-accent-500"></i> This Week
                    </h4>
                    <div class="space-y-3">
                        <div class="flex gap-3 items-start">
                            <div class="flex-shrink-0 w-10 h-10 bg-craft-100 rounded-lg flex flex-col items-center justify-center text-center">
                                <span class="text-craft-600 text-[10px] font-bold">TUE</span>
                                <span class="text-craft-800 text-sm font-bold">12</span>
                            </div>
                            <div>
                                <p class="font-semibold text-craft-800 text-sm">Beginner Knitting Circle</p>
                                <p class="text-craft-400 text-xs">7:00 PM · Virtual</p>
                            </div>
                        </div>
                        <div class="flex gap-3 items-start">
                            <div class="flex-shrink-0 w-10 h-10 bg-craft-100 rounded-lg flex flex-col items-center justify-center text-center">
                                <span class="text-craft-600 text-[10px] font-bold">THU</span>
                                <span class="text-craft-800 text-sm font-bold">14</span>
                            </div>
                            <div>
                                <p class="font-semibold text-craft-800 text-sm">Wood Finishing Demo</p>
                                <p class="text-craft-400 text-xs">6:30 PM · Austin, TX</p>
                            </div>
                        </div>
                        <div class="flex gap-3 items-start">
                            <div class="flex-shrink-0 w-10 h-10 bg-craft-100 rounded-lg flex flex-col items-center justify-center text-center">
                                <span class="text-craft-600 text-[10px] font-bold">SAT</span>
                                <span class="text-craft-800 text-sm font-bold">16</span>
                            </div>
                            <div>
                                <p class="font-semibold text-craft-800 text-sm">Spring Material Swap</p>
                                <p class="text-craft-400 text-xs">10:00 AM · Chicago, IL</p>
                            </div>
                        </div>
                    </div>
                    <a href="#events" class="block text-center mt-4 text-accent-600 text-sm font-semibold hover:underline">View Full Calendar</a>
                </div>

                <!-- Member Spotlight -->
                <div class="bg-white rounded-2xl p-6 shadow-lg border border-craft-100 scroll-reveal">
                    <h4 class="font-bold text-craft-900 mb-4 flex items-center gap-2">
                        <i class="fas fa-star text-yellow-500"></i> Creator Spotlight
                    </h4>
                    <div class="text-center">
                        <img src="https://i.pravatar.cc/100?u=spotlight" alt="Featured creator" class="w-20 h-20 rounded-full mx-auto mb-3 border-4 border-accent-100">
                        <h5 class="font-bold text-craft-900">Amara Johnson</h5>
                        <p class="text-accent-600 text-xs font-semibold mb-2">Master Weaver · Nairobi, Kenya</p>
                        <p class="text-craft-500 text-sm leading-relaxed mb-4">Amara combines traditional Kenyan weaving patterns with modern sustainable fibers, creating textiles that honor heritage while embracing innovation.</p>
                        <a href="#" class="text-accent-600 text-sm font-semibold hover:underline">View Portfolio</a>
                    </div>
                </div>

                <!-- Quick Links -->
                <div class="bg-craft-900 rounded-2xl p-6 text-white scroll-reveal">
                    <h4 class="font-bold mb-4">Quick Resources</h4>
                    <div class="space-y-3">
                        <a href="#" class="flex items-center gap-3 text-craft-300 hover:text-white transition-colors text-sm">
                            <i class="fas fa-download w-5 text-center text-accent-400"></i> Free Pattern Library
                        </a>
                        <a href="#" class="flex items-center gap-3 text-craft-300 hover:text-white transition-colors text-sm">
                            <i class="fas fa-map w-5 text-center text-accent-400"></i> Supplier Directory
                        </a>
                        <a href="#" class="flex items-center gap-3 text-craft-300 hover:text-white transition-colors text-sm">
                            <i class="fas fa-video w-5 text-center text-accent-400"></i> Video Tutorial Index
                        </a>
                        <a href="#" class="flex items-center gap-3 text-craft-300 hover:text-white transition-colors text-sm">
                            <i class="fas fa-ruler-combined w-5 text-center text-accent-400"></i> Measurement Converters
                        </a>
                    </div>
                </div>

                <!-- Forums Preview -->
                <div id="forums" class="bg-white rounded-2xl p-6 shadow-lg border border-craft-100 scroll-reveal">
                    <h4 class="font-bold text-craft-900 mb-4 flex items-center gap-2">
                        <i class="fas fa-comments-alt text-accent-500"></i> Active Discussions
                    </h4>
                    <div class="space-y-3">
                        <a href="#" class="block p-3 bg-craft-50 rounded-xl hover:bg-accent-50 transition-colors">
                            <p class="font-semibold text-craft-800 text-sm">Best hardwood for outdoor furniture?</p>
                            <p class="text-craft-400 text-xs mt-1">24 replies · 2 hours ago</p>
                        </a>
                        <a href="#" class="block p-3 bg-craft-50 rounded-xl hover:bg-accent-50 transition-colors">
                            <p class="font-semibold text-craft-800 text-sm">Fixing uneven glaze on ceramics</p>
                            <p class="text-craft-400 text-xs mt-1">18 replies · 5 hours ago</p>
                        </a>
                        <a href="#" class="block p-3 bg-craft-50 rounded-xl hover:bg-accent-50 transition-colors">
                            <p class="font-semibold text-craft-800 text-sm">Source for organic cotton yarn?</p>
                            <p class="text-craft-400 text-xs mt-1">31 replies · 1 day ago</p>
                        </a>
                    </div>
                </div>

            </aside>
        </div>
    </div>

    <!-- CTA Banner -->
    <section class="bg-gradient-to-r from-craft-800 to-craft-900 py-16">
        <div class="max-w-4xl mx-auto px-4 text-center scroll-reveal">
            <h3 class="text-3xl lg:text-4xl font-bold text-white mb-4">Start Your Creative Journey Today</h3>
            <p class="text-craft-300 text-lg mb-8 max-w-2xl mx-auto">Join thousands of makers who are turning passion into skill, and skill into art. Your next masterpiece is waiting.</p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="#" class="bg-accent-500 hover:bg-accent-600 text-white px-8 py-4 rounded-full font-bold text-base transition-all shadow-lg shadow-accent-500/40">Create Account</a>
                <a href="#" class="border-2 border-white/30 text-white hover:bg-white/10 px-8 py-4 rounded-full font-bold text-base transition-all">Browse Communities</a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-craft-950 text-craft-400 py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-4 gap-10 mb-12">
                <div class="md:col-span-1">
                    <div class="flex items-center gap-3 mb-4">
                        <img src="https://placehold.co/40x40/f97316/ffffff?text=CC" alt="Logo" class="w-10 h-10 rounded-lg">
                        <div>
                            <h4 class="text-white font-bold text-lg">CraftConnect</h4>
                            <p class="text-xs -mt-0.5">HUB</p>
                        </div>
                    </div>
                    <p class="text-sm leading-relaxed mb-4">Connecting hobbyists, artisans, and makers worldwide since 2019. Your passion deserves a community.</p>
                    <div class="flex gap-3">
                        <a href="#" class="w-9 h-9 rounded-full bg-craft-800 flex items-center justify-center hover:bg-accent-500 transition-colors text-white"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="w-9 h-9 rounded-full bg-craft-800 flex items-center justify-center hover:bg-accent-500 transition-colors text-white"><i class="fab fa-pinterest"></i></a>
                        <a href="#" class="w-9 h-9 rounded-full bg-craft-800 flex items-center justify-center hover:bg-accent-500 transition-colors text-white"><i class="fab fa-youtube"></i></a>
                        <a href="#" class="w-9 h-9 rounded-full bg-craft-800 flex items-center justify-center hover:bg-accent-500 transition-colors text-white"><i class="fab fa-discord"></i></a>
                    </div>
                </div>
                <div>
                    <h5 class="text-white font-bold mb-4">Explore</h5>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="hover:text-accent-400 transition-colors">Beginner Guides</a></li>
                        <li><a href="#" class="hover:text-accent-400 transition-colors">Project Gallery</a></li>
                        <li><a href="#" class="hover:text-accent-400 transition-colors">Material Calculator</a></li>
                        <li><a href="#" class="hover:text-accent-400 transition-colors">Supplier Directory</a></li>
                        <li><a href="#" class="hover:text-accent-400 transition-colors">Video Tutorials</a></li>
                    </ul>
                </div>
                <div>
                    <h5 class="text-white font-bold mb-4">Community</h5>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="hover:text-accent-400 transition-colors">Discussion Forums</a></li>
                        <li><a href="#" class="hover:text-accent-400 transition-colors">Local Chapters</a></li>
                        <li><a href="#" class="hover:text-accent-400 transition-colors">Monthly Challenges</a></li>
                        <li><a href="#" class="hover:text-accent-400 transition-colors">Event Calendar</a></li>
                        <li><a href="#" class="hover:text-accent-400 transition-colors">Creator Spotlight</a></li>
                    </ul>
                </div>
                <div>
                    <h5 class="text-white font-bold mb-4">Contact</h5>
                    <ul class="space-y-3 text-sm">
                        <li class="flex items-center gap-2"><i class="fas fa-envelope text-accent-500"></i> hello@craftconnecthub.com</li>
                        <li class="flex items-center gap-2"><i class="fas fa-phone text-accent-500"></i> (503) 555-0147</li>
                        <li class="flex items-center gap-2"><i class="fas fa-map-marker-alt text-accent-500"></i> 1427 Artisan Ave, Portland, OR</li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-craft-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <p class="text-sm">2024 CraftConnect Hub. All rights reserved.</p>
                <div class="flex gap-6 text-sm">
                    <a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
                    <a href="#" class="hover:text-white transition-colors">Terms of Service</a>
                    <a href="#" class="hover:text-white transition-colors">Cookie Settings</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Mobile menu toggle
        document.getElementById('mobile-menu-btn').addEventListener('click', function() {
            const menu = document.getElementById('mobile-menu');
            menu.classList.toggle('hidden');
        });

        // Scroll reveal animation
        const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' };
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('active');
                    entry.target.style.animation = 'fadeUp 0.7s ease-out forwards';
                }
            });
        }, observerOptions);

        document.querySelectorAll('.scroll-reveal').forEach(el => observer.observe(el));

        // Navbar scroll effect
        let lastScroll = 0;
        window.addEventListener('scroll', () => {
            const nav = document.getElementById('navbar');
            const currentScroll = window.pageYOffset;
            if (currentScroll > 100) {
                nav.classList.add('shadow-md');
            } else {
                nav.classList.remove('shadow-md');
            }
            lastScroll = currentScroll;
        });

        // Calculator Logic
        const craftData = {
            wood: { unit: 'board feet', price: 8.5, supplier: 'Local hardwood mills, Rockler, Woodcraft' },
            fabric: { unit: 'yards', price: 12.0, supplier: 'JoAnn Fabrics, Mood Fabrics, Etsy suppliers' },
            paint: { unit: 'gallons', price: 35.0, supplier: 'Sherwin-Williams, Home Depot, Benjamin Moore' },
            clay: { unit: 'lbs', price: 1.2, supplier: 'Local ceramic supply, Amaco, Bailey Pottery' }
        };

        document.getElementById('waste').addEventListener('input', function() {
            document.getElementById('wasteValue').textContent = this.value + '%';
        });

        document.getElementById('calcBtn').addEventListener('click', function() {
            const type = document.getElementById('craftType').value;
            const w = parseFloat(document.getElementById('width').value) || 0;
            const h = parseFloat(document.getElementById('height').value) || 0;
            const d = parseFloat(document.getElementById('depth').value) || 1;
            const waste = parseFloat(document.getElementById('waste').value) / 100;

            const data = craftData[type];
            let baseQty = 0;
            if (type === 'wood') baseQty = (w * h * d) / 144;
            else if (type === 'fabric') baseQty = (w * h) / 1296;
            else if (type === 'paint') baseQty = (w * h) / 350;
            else if (type === 'clay') baseQty = d * 2;

            baseQty = Math.max(0, baseQty);
            const withWaste = baseQty * (1 + waste);
            const cost = withWaste * data.price;

            document.getElementById('resMaterial').textContent = data.unit.charAt(0).toUpperCase() + data.unit.slice(1);
            document.getElementById('resQty').textContent = baseQty.toFixed(1) + ' ' + data.unit;
            document.getElementById('resWaste').textContent = withWaste.toFixed(1) + ' ' + data.unit + ' (' + (waste*100).toFixed(0) + '%)';
            document.getElementById('resCost').textContent = '$' + cost.toFixed(2);
            document.getElementById('resSupplier').textContent = data.supplier;

            // Animate result
            const result = document.getElementById('resultArea');
            result.style.animation = 'fadeIn 0.5s ease-out';
        });

        // FAQ Accordion
        document.querySelectorAll('.faq-toggle').forEach(btn => {
            btn.addEventListener('click', () => {
                const content = btn.nextElementSibling;
                const icon = btn.querySelector('i');
                const isHidden = content.classList.contains('hidden');
                
                // Close all
                document.querySelectorAll('.faq-content').forEach(c => c.classList.add('hidden'));
                document.querySelectorAll('.faq-toggle i').forEach(i => i.style.transform = 'rotate(0deg)');
                
                if (isHidden) {
                    content.classList.remove('hidden');
                    icon.style.transform = 'rotate(180deg)';
                }
            });
        });

        // Smooth scroll for nav links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    document.getElementById('mobile-menu').classList.add('hidden');
                }
            });
        });
    </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:44:57.946Z",
  "url": "https://benchmark.aimac.invalid/411d3ac3d7f81536c5379b71f9198052daa26e41959fa0bfdb8d7309461ad07c.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<div class=\"scroll-reveal active\" style=\"animation: 0.7s ease-out 0s 1 normal forwards running fadeUp;\">",
          "target": [
            ".active.scroll-reveal:nth-child(1)"
          ]
        }
      ]
    },
    {
      "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 id=\"calcBtn\" class=\"w-full btn-primary text-white py-4 rounded-xl font-bold text-base shadow-lg\">\n                                    Calculate Materials <i class=\"fas fa-magic ml-2\"></i>\n                                </button>",
          "target": [
            "#calcBtn"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1 class=\"text-2xl font-bold text-craft-900 tracking-tight\">CraftConnect</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2 class=\"text-5xl lg:text-7xl font-bold text-white leading-tight mb-6\">\n                        Discover Your Next <em class=\"text-accent-400 not-italic border-b-4 border-accent-500/50\">Creative Passion</em>\n                    </h2>",
                  "target": [
                    "h2"
                  ]
                },
                {
                  "html": "<h3 class=\"text-3xl lg:text-4xl font-bold text-craft-900 mb-4\">Beginner's Craft Academy</h3>",
                  "target": [
                    "#guides > h3"
                  ]
                },
                {
                  "html": "<h4 class=\"text-xl font-bold text-craft-900 mb-2\">Woodworking Fundamentals</h4>",
                  "target": [
                    ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(1) > .text-xl.mb-2"
                  ]
                },
                {
                  "html": "<h4 class=\"text-xl font-bold text-craft-900 mb-2\">Textile &amp; Fiber Arts</h4>",
                  "target": [
                    ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(2) > .text-xl.mb-2"
                  ]
                },
                {
                  "html": "<h4 class=\"text-xl font-bold text-craft-900 mb-2\">Ceramics &amp; Pottery</h4>",
                  "target": [
                    ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(3) > .text-xl.mb-2"
                  ]
                },
                {
                  "html": "<h4 class=\"text-xl font-bold text-craft-900 mb-2\">Restoration Techniques</h4>",
                  "target": [
                    ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(4) > .text-xl.mb-2"
                  ]
                },
                {
                  "html": "<h3 class=\"text-3xl lg:text-4xl font-bold text-craft-900 mb-4\">Featured Creator Projects</h3>",
                  "target": [
                    "#showcase > h3"
                  ]
                },
                {
                  "html": "<h4 class=\"text-white text-2xl font-bold mb-1\">Live-Edge Walnut Dining Table</h4>",
                  "target": [
                    ".img-overlay.shadow-xl.overflow-hidden:nth-child(1) > .bottom-0.bg-gradient-to-t.from-black\\/80 > .text-2xl.mb-1"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-craft-900 mt-2 mb-1\">Hand-Dyed Silk Scarf Collection</h4>",
                  "target": [
                    ".overflow-hidden.card-hover.shadow-lg:nth-child(1) > .p-5 > .mt-2.mb-1"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-craft-900 mt-2 mb-1\">Minimalist Ceramic Vase Set</h4>",
                  "target": [
                    ".overflow-hidden.card-hover.shadow-lg:nth-child(2) > .p-5 > .mt-2.mb-1"
                  ]
                },
                {
                  "html": "<h4 class=\"text-white text-2xl font-bold mb-1\">Full-Grain Leather Workshop Bag</h4>",
                  "target": [
                    ".img-overlay.shadow-xl.overflow-hidden:nth-child(3) > .bottom-0.bg-gradient-to-t.from-black\\/80 > .text-2xl.mb-1"
                  ]
                },
                {
                  "html": "<h3 class=\"text-3xl lg:text-4xl font-bold text-craft-900 mb-4\">Material Supply Calculator</h3>",
                  "target": [
                    "#calculator > h3"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-craft-900 mb-4 text-lg\">Your Estimate</h4>",
                  "target": [
                    ".bg-craft-50.flex-col.p-6 > .text-lg"
                  ]
                },
                {
                  "html": "<h3 class=\"text-3xl lg:text-4xl font-bold text-craft-900 mb-4\">Vibrant Online Communities</h3>",
                  "target": [
                    "#community > h3"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-craft-900 mb-2\">Discussion Forums</h4>",
                  "target": [
                    ".shadow-md.card-hover.p-6:nth-child(1) > .mb-2"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-craft-900 mb-2\">Local Chapters</h4>",
                  "target": [
                    ".shadow-md.card-hover.p-6:nth-child(2) > .mb-2"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-craft-900 mb-2\">Challenges</h4>",
                  "target": [
                    ".shadow-md.card-hover.p-6:nth-child(3) > .mb-2"
                  ]
                },
                {
                  "html": "<h4 class=\"text-white text-xl font-bold mb-3\">Ready to join the conversation?</h4>",
                  "target": [
                    ".mb-3.text-xl"
                  ]
                },
                {
                  "html": "<h3 class=\"text-3xl lg:text-4xl font-bold text-craft-900 mb-4\">Upcoming Workshops &amp; Events</h3>",
                  "target": [
                    "#events > h3"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-craft-900 mb-1\">Advanced Joinery Workshop</h4>",
                  "target": [
                    ".p-5.shadow-md.gap-4:nth-child(1) > .flex-1 > .mb-1"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-craft-900 mb-1\">Spring Craft Fair 2024</h4>",
                  "target": [
                    ".p-5.shadow-md.gap-4:nth-child(2) > .flex-1 > .mb-1"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-craft-900 mb-1\">Virtual: Natural Dyeing Masterclass</h4>",
                  "target": [
                    ".p-5.shadow-md.gap-4:nth-child(3) > .flex-1 > .mb-1"
                  ]
                },
                {
                  "html": "<h3 class=\"text-2xl lg:text-3xl font-bold text-craft-900\">What Our Community Says</h3>",
                  "target": [
                    ".mb-6.gap-3.items-center > .lg\\:text-3xl.text-2xl"
                  ]
                },
                {
                  "html": "<h3 class=\"text-2xl lg:text-3xl font-bold text-craft-900 mb-6\">Frequently Asked Questions</h3>",
                  "target": [
                    ".lg\\:text-3xl.text-2xl.mb-6"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-xl mb-2\">Become a Member</h4>",
                  "target": [
                    "#join > .text-xl.mb-2"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-craft-900 mb-4 flex items-center gap-2\">\n                        <i class=\"fas fa-fire text-accent-500\"></i> Trending Now\n                    </h4>",
                  "target": [
                    ".shadow-lg.p-6.scroll-reveal:nth-child(2) > .gap-2"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-craft-900 mb-4 flex items-center gap-2\">\n                        <i class=\"fas fa-calendar-day text-accent-500\"></i> This Week\n                    </h4>",
                  "target": [
                    ".shadow-lg.p-6.scroll-reveal:nth-child(3) > .gap-2"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-craft-900 mb-4 flex items-center gap-2\">\n                        <i class=\"fas fa-star text-yellow-500\"></i> Creator Spotlight\n                    </h4>",
                  "target": [
                    ".shadow-lg.p-6.scroll-reveal:nth-child(4) > .gap-2"
                  ]
                },
                {
                  "html": "<h5 class=\"font-bold text-craft-900\">Amara Johnson</h5>",
                  "target": [
                    ".text-center > h5"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold mb-4\">Quick Resources</h4>",
                  "target": [
                    ".bg-craft-900.p-6.scroll-reveal > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-bold text-craft-900 mb-4 flex items-center gap-2\">\n                        <i class=\"fas fa-comments-alt text-accent-500\"></i> Active Discussions\n                    </h4>",
                  "target": [
                    "#forums > .gap-2"
                  ]
                },
                {
                  "html": "<h3 class=\"text-3xl lg:text-4xl font-bold text-white mb-4\">Start Your Creative Journey Today</h3>",
                  "target": [
                    ".max-w-4xl > h3"
                  ]
                },
                {
                  "html": "<h4 class=\"text-white font-bold text-lg\">CraftConnect</h4>",
                  "target": [
                    ".gap-3.mb-4.items-center > div > .text-lg"
                  ]
                },
                {
                  "html": "<h5 class=\"text-white font-bold mb-4\">Explore</h5>",
                  "target": [
                    ".gap-10 > div:nth-child(2) > h5"
                  ]
                },
                {
                  "html": "<h5 class=\"text-white font-bold mb-4\">Community</h5>",
                  "target": [
                    "div:nth-child(3) > h5"
                  ]
                },
                {
                  "html": "<h5 class=\"text-white font-bold mb-4\">Contact</h5>",
                  "target": [
                    "div:nth-child(4) > h5"
                  ]
                }
              ],
              "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": {
                "messageKey": "hidden"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is hidden"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<select id=\"craftType\" class=\"w-full px-4 py-3 rounded-xl border border-craft-200 focus:border-accent-500 focus:ring-2 focus:ring-accent-200 outline-none transition-all bg-white text-craft-800\">",
          "target": [
            "#craftType"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<select id=\"craftType\" class=\"w-full px-4 py-3 rounded-xl border border-craft-200 focus:border-accent-500 focus:ring-2 focus:ring-accent-200 outline-none transition-all bg-white text-craft-800\">",
          "target": [
            "#craftType"
          ]
        }
      ]
    },
    {
      "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": "critical",
      "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/50x50/f97316/ffffff?text=CC\" alt=\"CraftConnect Logo\" class=\"w-12 h-12 rounded-xl shadow-lg\">",
          "target": [
            ".w-12"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": "critical",
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"number\" id=\"width\" placeholder=\"Width (in)\" class=\"w-full px-4 py-3 rounded-xl border border-craft-200 focus:border-accent-500 outline-none transition-all\">",
          "target": [
            "#width"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": "serious",
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a href=\"#home\" class=\"nav-link text-craft-700 hover:text-accent-600 font-medium text-sm transition-colors\">Home</a>",
          "target": [
            ".nav-link.hover\\:text-accent-600[href$=\"#home\"]"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul class=\"space-y-2 mb-6 text-sm\">",
          "target": [
            "#join > .space-y-2"
          ]
        }
      ]
    },
    {
      "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 class=\"flex items-center gap-2\"><i class=\"fas fa-check-circle text-accent-200\"></i> 450+ Project Guides</li>",
          "target": [
            "#join > .space-y-2 > 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/50x50/f97316/ffffff?text=CC\" alt=\"CraftConnect Logo\" class=\"w-12 h-12 rounded-xl shadow-lg\">",
          "target": [
            ".w-12"
          ]
        }
      ]
    },
    {
      "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=\"#home\" class=\"nav-link text-craft-700 hover:text-accent-600 font-medium text-sm transition-colors\">Home</a>",
          "target": [
            ".nav-link.hover\\:text-accent-600[href$=\"#home\"]"
          ]
        }
      ]
    }
  ],
  "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": "18.0pt (24px)",
                "fontWeight": "bold",
                "messageKey": "imgNode",
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<nav id=\"navbar\" class=\"fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-md border-b border-craft-100 transition-all duration-300\">",
                  "target": [
                    "#navbar"
                  ]
                },
                {
                  "html": "<img src=\"https://picsum.photos/1920/1080?grayscale&amp;blur=2\" alt=\"Creative workspace background\" class=\"w-full h-full object-cover opacity-40\">",
                  "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": "<h1 class=\"text-2xl font-bold text-craft-900 tracking-tight\">CraftConnect</h1>",
          "target": [
            "h1"
          ],
          "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": "#ffffff",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.05,
                "fontSize": "13.5pt (18px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.05 (foreground color: #ffffff, background color: #fdf8f6, font size: 13.5pt (18px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h4 class=\"text-white font-bold text-lg\">CraftConnect</h4>",
          "target": [
            ".gap-3.mb-4.items-center > div > .text-lg"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.05 (foreground color: #ffffff, background color: #fdf8f6, font size: 13.5pt (18px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-xs -mt-0.5\">HUB</p>",
          "target": [
            ".-mt-0\\.5"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-sm leading-relaxed mb-4\">Connecting hobbyists, artisans, and makers worldwide since 2019. Your passion deserves a community.</p>",
          "target": [
            ".md\\:col-span-1 > .leading-relaxed.mb-4"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.05,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.05 (foreground color: #ffffff, background color: #fdf8f6, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h5 class=\"text-white font-bold mb-4\">Explore</h5>",
          "target": [
            ".gap-10 > div:nth-child(2) > h5"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.05 (foreground color: #ffffff, background color: #fdf8f6, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-accent-400 transition-colors\">Beginner Guides</a>",
          "target": [
            "div:nth-child(2) > .space-y-2 > li:nth-child(1) > .hover\\:text-accent-400.transition-colors[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-accent-400 transition-colors\">Project Gallery</a>",
          "target": [
            "div:nth-child(2) > .space-y-2 > li:nth-child(2) > .hover\\:text-accent-400.transition-colors[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-accent-400 transition-colors\">Material Calculator</a>",
          "target": [
            "div:nth-child(2) > .space-y-2 > li:nth-child(3) > .hover\\:text-accent-400.transition-colors[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-accent-400 transition-colors\">Supplier Directory</a>",
          "target": [
            "div:nth-child(2) > .space-y-2 > li:nth-child(4) > .hover\\:text-accent-400.transition-colors[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-accent-400 transition-colors\">Video Tutorials</a>",
          "target": [
            "div:nth-child(2) > .space-y-2 > li:nth-child(5) > .hover\\:text-accent-400.transition-colors[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.05,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.05 (foreground color: #ffffff, background color: #fdf8f6, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h5 class=\"text-white font-bold mb-4\">Community</h5>",
          "target": [
            "div:nth-child(3) > h5"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.05 (foreground color: #ffffff, background color: #fdf8f6, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-accent-400 transition-colors\">Discussion Forums</a>",
          "target": [
            "div:nth-child(3) > .space-y-2 > li:nth-child(1) > .hover\\:text-accent-400.transition-colors[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-accent-400 transition-colors\">Local Chapters</a>",
          "target": [
            "div:nth-child(3) > .space-y-2 > li:nth-child(2) > .hover\\:text-accent-400.transition-colors[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-accent-400 transition-colors\">Monthly Challenges</a>",
          "target": [
            "div:nth-child(3) > .space-y-2 > li:nth-child(3) > .hover\\:text-accent-400.transition-colors[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-accent-400 transition-colors\">Event Calendar</a>",
          "target": [
            "div:nth-child(3) > .space-y-2 > li:nth-child(4) > .hover\\:text-accent-400.transition-colors[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-accent-400 transition-colors\">Creator Spotlight</a>",
          "target": [
            "div:nth-child(3) > .space-y-2 > li:nth-child(5) > .hover\\:text-accent-400.transition-colors[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.05,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.05 (foreground color: #ffffff, background color: #fdf8f6, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<h5 class=\"text-white font-bold mb-4\">Contact</h5>",
          "target": [
            "div:nth-child(4) > h5"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.05 (foreground color: #ffffff, background color: #fdf8f6, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<li class=\"flex items-center gap-2\"><i class=\"fas fa-envelope text-accent-500\"></i> hello@craftconnecthub.com</li>",
          "target": [
            "div:nth-child(4) > ul > li:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<li class=\"flex items-center gap-2\"><i class=\"fas fa-phone text-accent-500\"></i> (503) 555-0147</li>",
          "target": [
            "div:nth-child(4) > ul > li:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<li class=\"flex items-center gap-2\"><i class=\"fas fa-map-marker-alt text-accent-500\"></i> 1427 Artisan Ave, Portland, OR</li>",
          "target": [
            "div:nth-child(4) > ul > li:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-sm\">2024 CraftConnect Hub. All rights reserved.</p>",
          "target": [
            ".border-craft-800 > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-white transition-colors\">Privacy Policy</a>",
          "target": [
            ".gap-6.flex.text-sm > .hover\\:text-white.transition-colors[href=\"#\"]:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-white transition-colors\">Terms of Service</a>",
          "target": [
            ".gap-6.flex.text-sm > .hover\\:text-white.transition-colors[href=\"#\"]:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"hover:text-white transition-colors\">Cookie Settings</a>",
          "target": [
            ".gap-6.flex.text-sm > .hover\\:text-white.transition-colors[href=\"#\"]:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"bg-white border-y border-craft-100\">",
                  "target": [
                    ".border-y"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm mt-1 font-medium\">Project Guides</p>",
          "target": [
            ".active.scroll-reveal:nth-child(1) > .mt-1.text-craft-500.font-medium"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"bg-white border-y border-craft-100\">",
                  "target": [
                    ".border-y"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm mt-1 font-medium\">Craft Categories</p>",
          "target": [
            ".active.scroll-reveal:nth-child(2) > .mt-1.text-craft-500.font-medium"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"bg-white border-y border-craft-100\">",
                  "target": [
                    ".border-y"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm mt-1 font-medium\">Community Members</p>",
          "target": [
            ".active.scroll-reveal:nth-child(3) > .mt-1.text-craft-500.font-medium"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"bg-white border-y border-craft-100\">",
                  "target": [
                    ".border-y"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm mt-1 font-medium\">Local Events/Year</p>",
          "target": [
            ".active.scroll-reveal:nth-child(4) > .mt-1.text-craft-500.font-medium"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ea580c",
                "bgColor": "#ffffff",
                "contrastRatio": 3.55,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"block w-full bg-white text-accent-600 text-center py-3 rounded-xl font-bold hover:bg-craft-50 transition-colors\">Join Free Today</a>",
                  "target": [
                    ".hover\\:bg-craft-50.py-3.text-accent-600"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"block w-full bg-white text-accent-600 text-center py-3 rounded-xl font-bold hover:bg-craft-50 transition-colors\">Join Free Today</a>",
          "target": [
            ".hover\\:bg-craft-50.py-3.text-accent-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<nav id=\"navbar\" class=\"fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-md border-b border-craft-100 transition-all duration-300 shadow-md\">",
                  "target": [
                    "#navbar"
                  ]
                },
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-xs text-craft-500 -mt-1 font-medium tracking-wide\">HUB</p>",
          "target": [
            ".-mt-1"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ea580c",
                "bgColor": "#fdebe0",
                "contrastRatio": 3.07,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag-badge text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full\">Education</span>",
                  "target": [
                    "#guides > .mb-2.gap-3.items-center > .px-3.tag-badge.uppercase"
                  ]
                },
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.07 (foreground color: #ea580c, background color: #fdebe0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag-badge text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full\">Education</span>",
          "target": [
            "#guides > .mb-2.gap-3.items-center > .px-3.tag-badge.uppercase"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.07 (foreground color: #ea580c, background color: #fdebe0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#fdf8f6",
                "contrastRatio": 3.91,
                "fontSize": "13.5pt (18px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-600 text-lg leading-relaxed mb-8\">",
          "target": [
            "#guides > .text-lg.mb-8.text-craft-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#ffffff",
                "contrastRatio": 4.12,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"card-hover bg-white rounded-2xl p-6 shadow-lg shadow-craft-200/50 border border-craft-100\">",
                  "target": [
                    ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.12 (foreground color: #8a7a6e, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-600 text-sm leading-relaxed mb-4\">Master grain orientation, joint construction, and finish application. Learn to select hardwoods versus softwoods and understand seasonal wood movement for lasting builds.</p>",
          "target": [
            ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(1) > .text-craft-600.leading-relaxed.mb-4"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.12 (foreground color: #8a7a6e, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ea580c",
                "bgColor": "#ffffff",
                "contrastRatio": 3.55,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"card-hover bg-white rounded-2xl p-6 shadow-lg shadow-craft-200/50 border border-craft-100\">",
                  "target": [
                    ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-accent-600 font-semibold text-sm inline-flex items-center gap-1 hover:gap-2 transition-all\">Read Guide <i class=\"fas fa-arrow-right text-xs\"></i></a>",
          "target": [
            ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(1) > .gap-1.hover\\:gap-2.inline-flex"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#ffffff",
                "contrastRatio": 4.12,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"card-hover bg-white rounded-2xl p-6 shadow-lg shadow-craft-200/50 border border-craft-100\">",
                  "target": [
                    ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.12 (foreground color: #8a7a6e, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-600 text-sm leading-relaxed mb-4\">Explore weaving, knitting, embroidery, and dye techniques. Understand fiber properties, color theory for textiles, and sustainable material sourcing from local suppliers.</p>",
          "target": [
            ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(2) > .text-craft-600.leading-relaxed.mb-4"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.12 (foreground color: #8a7a6e, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ea580c",
                "bgColor": "#ffffff",
                "contrastRatio": 3.55,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"card-hover bg-white rounded-2xl p-6 shadow-lg shadow-craft-200/50 border border-craft-100\">",
                  "target": [
                    ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-accent-600 font-semibold text-sm inline-flex items-center gap-1 hover:gap-2 transition-all\">Read Guide <i class=\"fas fa-arrow-right text-xs\"></i></a>",
          "target": [
            ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(2) > .gap-1.hover\\:gap-2.inline-flex"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#ffffff",
                "contrastRatio": 4.12,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"card-hover bg-white rounded-2xl p-6 shadow-lg shadow-craft-200/50 border border-craft-100\">",
                  "target": [
                    ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.12 (foreground color: #8a7a6e, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-600 text-sm leading-relaxed mb-4\">From wheel throwing to hand-building, discover clay bodies, glaze chemistry, and kiln firing schedules. Includes studio setup guidance for home practitioners.</p>",
          "target": [
            ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(3) > .text-craft-600.leading-relaxed.mb-4"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.12 (foreground color: #8a7a6e, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ea580c",
                "bgColor": "#ffffff",
                "contrastRatio": 3.55,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"card-hover bg-white rounded-2xl p-6 shadow-lg shadow-craft-200/50 border border-craft-100\">",
                  "target": [
                    ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-accent-600 font-semibold text-sm inline-flex items-center gap-1 hover:gap-2 transition-all\">Read Guide <i class=\"fas fa-arrow-right text-xs\"></i></a>",
          "target": [
            ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(3) > .gap-1.hover\\:gap-2.inline-flex"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#ffffff",
                "contrastRatio": 4.12,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"card-hover bg-white rounded-2xl p-6 shadow-lg shadow-craft-200/50 border border-craft-100\">",
                  "target": [
                    ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.12 (foreground color: #8a7a6e, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-600 text-sm leading-relaxed mb-4\">Breathe new life into vintage furniture, antique tools, and heritage items. Cover structural repair, surface refinishing, and authentic material matching for true restoration.</p>",
          "target": [
            ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(4) > .text-craft-600.leading-relaxed.mb-4"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.12 (foreground color: #8a7a6e, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ea580c",
                "bgColor": "#ffffff",
                "contrastRatio": 3.55,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"card-hover bg-white rounded-2xl p-6 shadow-lg shadow-craft-200/50 border border-craft-100\">",
                  "target": [
                    ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-accent-600 font-semibold text-sm inline-flex items-center gap-1 hover:gap-2 transition-all\">Read Guide <i class=\"fas fa-arrow-right text-xs\"></i></a>",
          "target": [
            ".shadow-craft-200\\/50.card-hover.shadow-lg:nth-child(4) > .gap-1.hover\\:gap-2.inline-flex"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#ffffff",
                "contrastRatio": 1.84,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-2xl p-6 shadow-lg border border-craft-100 scroll-reveal active\" style=\"animation: 0.7s ease-out 0s 1 normal forwards running fadeUp;\">",
                  "target": [
                    ".active.shadow-lg.p-6"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.84 (foreground color: #d2bab0, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-400 text-xs\">1,240 views \u00b7 Wood</p>",
          "target": [
            ".group.gap-3[href=\"#\"]:nth-child(1) > div > .text-craft-400.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.84 (foreground color: #d2bab0, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#ffffff",
                "contrastRatio": 1.84,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-2xl p-6 shadow-lg border border-craft-100 scroll-reveal active\" style=\"animation: 0.7s ease-out 0s 1 normal forwards running fadeUp;\">",
                  "target": [
                    ".active.shadow-lg.p-6"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.84 (foreground color: #d2bab0, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-400 text-xs\">980 views \u00b7 Fiber</p>",
          "target": [
            ".group.gap-3[href=\"#\"]:nth-child(2) > div > .text-craft-400.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.84 (foreground color: #d2bab0, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#ffffff",
                "contrastRatio": 1.84,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-2xl p-6 shadow-lg border border-craft-100 scroll-reveal active\" style=\"animation: 0.7s ease-out 0s 1 normal forwards running fadeUp;\">",
                  "target": [
                    ".active.shadow-lg.p-6"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.84 (foreground color: #d2bab0, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-400 text-xs\">850 views \u00b7 Candle</p>",
          "target": [
            ".group.gap-3[href=\"#\"]:nth-child(3) > div > .text-craft-400.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.84 (foreground color: #d2bab0, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#ffffff",
                "contrastRatio": 1.84,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-2xl p-6 shadow-lg border border-craft-100 scroll-reveal active\" style=\"animation: 0.7s ease-out 0s 1 normal forwards running fadeUp;\">",
                  "target": [
                    ".active.shadow-lg.p-6"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.84 (foreground color: #d2bab0, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-400 text-xs\">720 views \u00b7 Leather</p>",
          "target": [
            ".group.gap-3[href=\"#\"]:nth-child(4) > div > .text-craft-400.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.84 (foreground color: #d2bab0, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#f2e8e5",
                "contrastRatio": 3.42,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"flex-shrink-0 w-10 h-10 bg-craft-100 rounded-lg flex flex-col items-center justify-center text-center\">",
                  "target": [
                    ".items-start.gap-3.flex:nth-child(1) > .bg-craft-100.flex-col.flex-shrink-0"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.42 (foreground color: #8a7a6e, background color: #f2e8e5, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-craft-600 text-[10px] font-bold\">TUE</span>",
          "target": [
            ".items-start.gap-3.flex:nth-child(1) > .bg-craft-100.flex-col.flex-shrink-0 > .text-\\[10px\\].text-craft-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.42 (foreground color: #8a7a6e, background color: #f2e8e5, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#ffffff",
                "contrastRatio": 1.84,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-2xl p-6 shadow-lg border border-craft-100 scroll-reveal active\" style=\"animation: 0.7s ease-out 0s 1 normal forwards running fadeUp;\">",
                  "target": [
                    ".active.shadow-lg.p-6:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.84 (foreground color: #d2bab0, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-400 text-xs\">7:00 PM \u00b7 Virtual</p>",
          "target": [
            ".items-start.gap-3.flex:nth-child(1) > div:nth-child(2) > .text-craft-400.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.84 (foreground color: #d2bab0, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#f2e8e5",
                "contrastRatio": 3.42,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"flex-shrink-0 w-10 h-10 bg-craft-100 rounded-lg flex flex-col items-center justify-center text-center\">",
                  "target": [
                    ".items-start.gap-3.flex:nth-child(2) > .bg-craft-100.flex-col.flex-shrink-0"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.42 (foreground color: #8a7a6e, background color: #f2e8e5, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-craft-600 text-[10px] font-bold\">THU</span>",
          "target": [
            ".items-start.gap-3.flex:nth-child(2) > .bg-craft-100.flex-col.flex-shrink-0 > .text-\\[10px\\].text-craft-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.42 (foreground color: #8a7a6e, background color: #f2e8e5, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#ffffff",
                "contrastRatio": 1.84,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-2xl p-6 shadow-lg border border-craft-100 scroll-reveal active\" style=\"animation: 0.7s ease-out 0s 1 normal forwards running fadeUp;\">",
                  "target": [
                    ".active.shadow-lg.p-6:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.84 (foreground color: #d2bab0, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-400 text-xs\">6:30 PM \u00b7 Austin, TX</p>",
          "target": [
            ".items-start.gap-3.flex:nth-child(2) > div:nth-child(2) > .text-craft-400.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.84 (foreground color: #d2bab0, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#f2e8e5",
                "contrastRatio": 3.42,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"flex-shrink-0 w-10 h-10 bg-craft-100 rounded-lg flex flex-col items-center justify-center text-center\">",
                  "target": [
                    ".items-start.gap-3.flex:nth-child(3) > .bg-craft-100.flex-col.flex-shrink-0"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.42 (foreground color: #8a7a6e, background color: #f2e8e5, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-craft-600 text-[10px] font-bold\">SAT</span>",
          "target": [
            ".items-start.gap-3.flex:nth-child(3) > .bg-craft-100.flex-col.flex-shrink-0 > .text-\\[10px\\].text-craft-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.42 (foreground color: #8a7a6e, background color: #f2e8e5, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#ffffff",
                "contrastRatio": 1.84,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-2xl p-6 shadow-lg border border-craft-100 scroll-reveal active\" style=\"animation: 0.7s ease-out 0s 1 normal forwards running fadeUp;\">",
                  "target": [
                    ".active.shadow-lg.p-6:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.84 (foreground color: #d2bab0, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-400 text-xs\">10:00 AM \u00b7 Chicago, IL</p>",
          "target": [
            ".items-start.gap-3.flex:nth-child(3) > div:nth-child(2) > .text-craft-400.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.84 (foreground color: #d2bab0, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ea580c",
                "bgColor": "#ffffff",
                "contrastRatio": 3.55,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-2xl p-6 shadow-lg border border-craft-100 scroll-reveal active\" style=\"animation: 0.7s ease-out 0s 1 normal forwards running fadeUp;\">",
                  "target": [
                    ".active.shadow-lg.p-6:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#events\" class=\"block text-center mt-4 text-accent-600 text-sm font-semibold hover:underline\">View Full Calendar</a>",
          "target": [
            ".mt-4.hover\\:underline[href$=\"#events\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ea580c",
                "bgColor": "#ffffff",
                "contrastRatio": 3.55,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-2xl p-6 shadow-lg border border-craft-100 scroll-reveal active\" style=\"animation: 0.7s ease-out 0s 1 normal forwards running fadeUp;\">",
                  "target": [
                    ".active.shadow-lg.p-6:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-accent-600 text-xs font-semibold mb-2\">Master Weaver \u00b7 Nairobi, Kenya</p>",
          "target": [
            ".text-accent-600.mb-2.font-semibold"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-2xl p-6 shadow-lg border border-craft-100 scroll-reveal active\" style=\"animation: 0.7s ease-out 0s 1 normal forwards running fadeUp;\">",
                  "target": [
                    ".active.shadow-lg.p-6:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm leading-relaxed mb-4\">Amara combines traditional Kenyan weaving patterns with modern sustainable fibers, creating textiles that honor heritage while embracing innovation.</p>",
          "target": [
            ".text-craft-500.leading-relaxed.mb-4"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ea580c",
                "bgColor": "#ffffff",
                "contrastRatio": 3.55,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white rounded-2xl p-6 shadow-lg border border-craft-100 scroll-reveal active\" style=\"animation: 0.7s ease-out 0s 1 normal forwards running fadeUp;\">",
                  "target": [
                    ".active.shadow-lg.p-6:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-accent-600 text-sm font-semibold hover:underline\">View Portfolio</a>",
          "target": [
            ".text-center > .hover\\:underline.text-accent-600.font-semibold"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.55 (foreground color: #ea580c, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ea580c",
                "bgColor": "#fdebe0",
                "contrastRatio": 3.07,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag-badge text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full\">Showcase</span>",
                  "target": [
                    "#showcase > .mb-2.gap-3.items-center > .px-3.tag-badge.uppercase"
                  ]
                },
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.07 (foreground color: #ea580c, background color: #fdebe0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag-badge text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full\">Showcase</span>",
          "target": [
            "#showcase > .mb-2.gap-3.items-center > .px-3.tag-badge.uppercase"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.07 (foreground color: #ea580c, background color: #fdebe0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#fdf8f6",
                "contrastRatio": 3.91,
                "fontSize": "13.5pt (18px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-600 text-lg leading-relaxed mb-8\">",
          "target": [
            "#showcase > .text-lg.mb-8.text-craft-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ea580c",
                "bgColor": "#fef1e8",
                "contrastRatio": 3.21,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag-badge text-xs font-bold px-2 py-0.5 rounded\">Textiles</span>",
                  "target": [
                    ".overflow-hidden.card-hover.shadow-lg:nth-child(1) > .p-5 > .py-0\\.5.rounded.px-2"
                  ]
                },
                {
                  "html": "<div class=\"card-hover bg-white rounded-2xl overflow-hidden shadow-lg border border-craft-100\">",
                  "target": [
                    ".overflow-hidden.card-hover.shadow-lg:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.21 (foreground color: #ea580c, background color: #fef1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag-badge text-xs font-bold px-2 py-0.5 rounded\">Textiles</span>",
          "target": [
            ".overflow-hidden.card-hover.shadow-lg:nth-child(1) > .p-5 > .py-0\\.5.rounded.px-2"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.21 (foreground color: #ea580c, background color: #fef1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"card-hover bg-white rounded-2xl overflow-hidden shadow-lg border border-craft-100\">",
                  "target": [
                    ".overflow-hidden.card-hover.shadow-lg:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm\">Natural indigo and botanical dyes on ethically sourced silk.</p>",
          "target": [
            ".overflow-hidden.card-hover.shadow-lg:nth-child(1) > .p-5 > .text-craft-500"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ea580c",
                "bgColor": "#fef1e8",
                "contrastRatio": 3.21,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag-badge text-xs font-bold px-2 py-0.5 rounded\">Ceramics</span>",
                  "target": [
                    ".overflow-hidden.card-hover.shadow-lg:nth-child(2) > .p-5 > .py-0\\.5.rounded.px-2"
                  ]
                },
                {
                  "html": "<div class=\"card-hover bg-white rounded-2xl overflow-hidden shadow-lg border border-craft-100\">",
                  "target": [
                    ".overflow-hidden.card-hover.shadow-lg:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.21 (foreground color: #ea580c, background color: #fef1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag-badge text-xs font-bold px-2 py-0.5 rounded\">Ceramics</span>",
          "target": [
            ".overflow-hidden.card-hover.shadow-lg:nth-child(2) > .p-5 > .py-0\\.5.rounded.px-2"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.21 (foreground color: #ea580c, background color: #fef1e8, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"card-hover bg-white rounded-2xl overflow-hidden shadow-lg border border-craft-100\">",
                  "target": [
                    ".overflow-hidden.card-hover.shadow-lg:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm\">Wheel-thrown stoneware with matte glaze finish.</p>",
          "target": [
            ".overflow-hidden.card-hover.shadow-lg:nth-child(2) > .p-5 > .text-craft-500"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"block p-3 bg-craft-50 rounded-xl hover:bg-accent-50 transition-colors\">",
                  "target": [
                    ".p-3.hover\\:bg-accent-50.bg-craft-50:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-400 text-xs mt-1\">24 replies \u00b7 2 hours ago</p>",
          "target": [
            ".p-3.hover\\:bg-accent-50.bg-craft-50:nth-child(1) > .mt-1.text-craft-400.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"block p-3 bg-craft-50 rounded-xl hover:bg-accent-50 transition-colors\">",
                  "target": [
                    ".p-3.hover\\:bg-accent-50.bg-craft-50:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-400 text-xs mt-1\">18 replies \u00b7 5 hours ago</p>",
          "target": [
            ".p-3.hover\\:bg-accent-50.bg-craft-50:nth-child(2) > .mt-1.text-craft-400.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d2bab0",
                "bgColor": "#fdf8f6",
                "contrastRatio": 1.75,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"block p-3 bg-craft-50 rounded-xl hover:bg-accent-50 transition-colors\">",
                  "target": [
                    ".p-3.hover\\:bg-accent-50.bg-craft-50:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-400 text-xs mt-1\">31 replies \u00b7 1 day ago</p>",
          "target": [
            ".p-3.hover\\:bg-accent-50.bg-craft-50:nth-child(3) > .mt-1.text-craft-400.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 1.75 (foreground color: #d2bab0, background color: #fdf8f6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ea580c",
                "bgColor": "#fdebe0",
                "contrastRatio": 3.07,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag-badge text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full\">Tool</span>",
                  "target": [
                    "#calculator > .mb-2.gap-3.items-center > .px-3.tag-badge.uppercase"
                  ]
                },
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.07 (foreground color: #ea580c, background color: #fdebe0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag-badge text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full\">Tool</span>",
          "target": [
            "#calculator > .mb-2.gap-3.items-center > .px-3.tag-badge.uppercase"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.07 (foreground color: #ea580c, background color: #fdebe0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#fdf8f6",
                "contrastRatio": 3.91,
                "fontSize": "13.5pt (18px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-600 text-lg leading-relaxed mb-8\">",
          "target": [
            "#calculator > .text-lg.mb-8.text-craft-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#fdf8f6",
                "contrastRatio": 3.91,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-craft-50 rounded-2xl p-6 flex flex-col justify-center\">",
                  "target": [
                    ".bg-craft-50.flex-col.p-6"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-craft-600\">Primary Material</span>",
          "target": [
            ".border-b.justify-between.py-3:nth-child(1) > .text-craft-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#fdf8f6",
                "contrastRatio": 3.91,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-craft-50 rounded-2xl p-6 flex flex-col justify-center\">",
                  "target": [
                    ".bg-craft-50.flex-col.p-6"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-craft-600\">Quantity Needed</span>",
          "target": [
            ".border-b.justify-between.py-3:nth-child(2) > .text-craft-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#fdf8f6",
                "contrastRatio": 3.91,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-craft-50 rounded-2xl p-6 flex flex-col justify-center\">",
                  "target": [
                    ".bg-craft-50.flex-col.p-6"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-craft-600\">With Waste</span>",
          "target": [
            ".border-b.justify-between.py-3:nth-child(3) > .text-craft-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#fdf8f6",
                "contrastRatio": 3.91,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-craft-50 rounded-2xl p-6 flex flex-col justify-center\">",
                  "target": [
                    ".bg-craft-50.flex-col.p-6"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-craft-600\">Est. Cost</span>",
          "target": [
            ".border-b.justify-between.py-3:nth-child(4) > .text-craft-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"mt-4 p-4 bg-white rounded-xl border border-craft-200\">",
                  "target": [
                    ".p-4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-xs text-craft-500 mb-1\">Recommended Suppliers</p>",
          "target": [
            ".mb-1.text-craft-500.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ea580c",
                "bgColor": "#fdebe0",
                "contrastRatio": 3.07,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag-badge text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full\">Social</span>",
                  "target": [
                    "#community > .mb-2.gap-3.items-center > .px-3.tag-badge.uppercase"
                  ]
                },
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.07 (foreground color: #ea580c, background color: #fdebe0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag-badge text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full\">Social</span>",
          "target": [
            "#community > .mb-2.gap-3.items-center > .px-3.tag-badge.uppercase"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.07 (foreground color: #ea580c, background color: #fdebe0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#fdf8f6",
                "contrastRatio": 3.91,
                "fontSize": "13.5pt (18px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-600 text-lg leading-relaxed mb-8\">",
          "target": [
            "#community > .text-lg.mb-8.text-craft-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white p-6 rounded-2xl shadow-md border border-craft-100 text-center card-hover\">",
                  "target": [
                    ".shadow-md.card-hover.p-6:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm leading-relaxed\">24 specialized forums with 50,000+ threads covering every craft niche imaginable.</p>",
          "target": [
            ".shadow-md.card-hover.p-6:nth-child(1) > .text-craft-500.leading-relaxed"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white p-6 rounded-2xl shadow-md border border-craft-100 text-center card-hover\">",
                  "target": [
                    ".shadow-md.card-hover.p-6:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm leading-relaxed\">180 local groups organizing monthly meetups, workshops, and group buys.</p>",
          "target": [
            ".shadow-md.card-hover.p-6:nth-child(2) > .text-craft-500.leading-relaxed"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white p-6 rounded-2xl shadow-md border border-craft-100 text-center card-hover\">",
                  "target": [
                    ".shadow-md.card-hover.p-6:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm leading-relaxed\">Monthly themed challenges with expert judging and community voting.</p>",
          "target": [
            ".shadow-md.card-hover.p-6:nth-child(3) > .text-craft-500.leading-relaxed"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), 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": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#forums\" class=\"bg-accent-500 hover:bg-accent-600 text-white px-8 py-3 rounded-full font-bold inline-flex items-center gap-2 transition-all\">Find Your Group <i class=\"fas fa-search-location\"></i></a>",
                  "target": [
                    ".bg-accent-500.hover\\:bg-accent-600[href$=\"#forums\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#forums\" class=\"bg-accent-500 hover:bg-accent-600 text-white px-8 py-3 rounded-full font-bold inline-flex items-center gap-2 transition-all\">Find Your Group <i class=\"fas fa-search-location\"></i></a>",
          "target": [
            ".bg-accent-500.hover\\:bg-accent-600[href$=\"#forums\"]"
          ],
          "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: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ea580c",
                "bgColor": "#fdebe0",
                "contrastRatio": 3.07,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag-badge text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full\">Calendar</span>",
                  "target": [
                    "#events > .mb-2.gap-3.items-center > .px-3.tag-badge.uppercase"
                  ]
                },
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.07 (foreground color: #ea580c, background color: #fdebe0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag-badge text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full\">Calendar</span>",
          "target": [
            "#events > .mb-2.gap-3.items-center > .px-3.tag-badge.uppercase"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.07 (foreground color: #ea580c, background color: #fdebe0, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#fdf8f6",
                "contrastRatio": 3.91,
                "fontSize": "13.5pt (18px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-craft-50 text-craft-900 antialiased\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-600 text-lg leading-relaxed mb-8\">",
          "target": [
            "#events > .text-lg.mb-8.text-craft-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #8a7a6e, background color: #fdf8f6, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"flex gap-4 bg-white p-5 rounded-2xl shadow-md border border-craft-100 card-hover\">",
                  "target": [
                    ".p-5.gap-4.shadow-md:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm mb-2\"><i class=\"fas fa-map-marker-alt text-accent-500 mr-1\"></i> Portland Makerspace, OR</p>",
          "target": [
            ".p-5.gap-4.shadow-md:nth-child(1) > .flex-1 > .text-craft-500.mb-2"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"flex gap-4 bg-white p-5 rounded-2xl shadow-md border border-craft-100 card-hover\">",
                  "target": [
                    ".p-5.gap-4.shadow-md:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm mb-2\"><i class=\"fas fa-map-marker-alt text-blue-500 mr-1\"></i> Downtown Convention Center</p>",
          "target": [
            ".p-5.gap-4.shadow-md:nth-child(2) > .flex-1 > .text-craft-500.mb-2"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"flex gap-4 bg-white p-5 rounded-2xl shadow-md border border-craft-100 card-hover\">",
                  "target": [
                    ".p-5.gap-4.shadow-md:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm mb-2\"><i class=\"fas fa-video text-purple-500 mr-1\"></i> Zoom \u00b7 3-hour session</p>",
          "target": [
            ".p-5.gap-4.shadow-md:nth-child(3) > .flex-1 > .text-craft-500.mb-2"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#ffffff",
                "contrastRatio": 4.12,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white p-6 rounded-2xl shadow-lg border border-craft-100 relative\">",
                  "target": [
                    ".relative.shadow-lg.p-6:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.12 (foreground color: #8a7a6e, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-600 text-sm leading-relaxed mb-4\">\"The woodworking guides here transformed my hobby into a side business. The material sourcing section alone saved me hundreds on lumber costs through direct mill connections.\"</p>",
          "target": [
            ".relative.shadow-lg.p-6:nth-child(1) > .text-craft-600.leading-relaxed.mb-4"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.12 (foreground color: #8a7a6e, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white p-6 rounded-2xl shadow-lg border border-craft-100 relative\">",
                  "target": [
                    ".relative.shadow-lg.p-6:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-xs\">Furniture Maker \u00b7 Member since 2021</p>",
          "target": [
            ".relative.shadow-lg.p-6:nth-child(1) > .gap-3.items-center.flex > div > .text-craft-500.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#ffffff",
                "contrastRatio": 4.12,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white p-6 rounded-2xl shadow-lg border border-craft-100 relative\">",
                  "target": [
                    ".relative.shadow-lg.p-6:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.12 (foreground color: #8a7a6e, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-600 text-sm leading-relaxed mb-4\">\"I found my local pottery chapter through this platform. The community feedback on my glazing techniques has been invaluable\u2014my work improved exponentially within months.\"</p>",
          "target": [
            ".relative.shadow-lg.p-6:nth-child(2) > .text-craft-600.leading-relaxed.mb-4"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.12 (foreground color: #8a7a6e, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white p-6 rounded-2xl shadow-lg border border-craft-100 relative\">",
                  "target": [
                    ".relative.shadow-lg.p-6:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-xs\">Ceramic Artist \u00b7 Member since 2022</p>",
          "target": [
            ".relative.shadow-lg.p-6:nth-child(2) > .gap-3.items-center.flex > div > .text-craft-500.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a7a6e",
                "bgColor": "#ffffff",
                "contrastRatio": 4.12,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white p-6 rounded-2xl shadow-lg border border-craft-100 relative md:col-span-2\">",
                  "target": [
                    ".md\\:col-span-2"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.12 (foreground color: #8a7a6e, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-600 text-sm leading-relaxed mb-4\">",
          "target": [
            ".md\\:col-span-2 > .text-craft-600.leading-relaxed.mb-4"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.12 (foreground color: #8a7a6e, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-white p-6 rounded-2xl shadow-lg border border-craft-100 relative md:col-span-2\">",
                  "target": [
                    ".md\\:col-span-2"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-xs\">Weaving Enthusiast \u00b7 Member since 2023</p>",
          "target": [
            ".md\\:col-span-2 > .gap-3.items-center.flex > div > .text-craft-500.text-xs"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"bg-white border-y border-craft-100\">",
                  "target": [
                    ".border-y"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm mt-1 font-medium\">Project Guides</p>",
          "target": [
            ".scroll-reveal.active:nth-child(1) > .mt-1.text-craft-500.font-medium"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"bg-white border-y border-craft-100\">",
                  "target": [
                    ".border-y"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm mt-1 font-medium\">Craft Categories</p>",
          "target": [
            ".scroll-reveal.active:nth-child(2) > .mt-1.text-craft-500.font-medium"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"bg-white border-y border-craft-100\">",
                  "target": [
                    ".border-y"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm mt-1 font-medium\">Community Members</p>",
          "target": [
            ".scroll-reveal.active:nth-child(3) > .mt-1.text-craft-500.font-medium"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"bg-white border-y border-craft-100\">",
                  "target": [
                    ".border-y"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm mt-1 font-medium\">Local Events/Year</p>",
          "target": [
            ".scroll-reveal.active:nth-child(4) > .mt-1.text-craft-500.font-medium"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), 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": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"bg-accent-500 hover:bg-accent-600 text-white px-8 py-4 rounded-full font-bold text-base transition-all shadow-lg shadow-accent-500/40\">Create Account</a>",
                  "target": [
                    ".shadow-accent-500\\/40"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"bg-accent-500 hover:bg-accent-600 text-white px-8 py-4 rounded-full font-bold text-base transition-all shadow-lg shadow-accent-500/40\">Create Account</a>",
          "target": [
            ".shadow-accent-500\\/40"
          ],
          "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: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"flex gap-4 bg-white p-5 rounded-2xl shadow-md border border-craft-100 card-hover\">",
                  "target": [
                    ".p-5.shadow-md.gap-4:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm mb-2\"><i class=\"fas fa-map-marker-alt text-accent-500 mr-1\"></i> Portland Makerspace, OR</p>",
          "target": [
            ".p-5.shadow-md.gap-4:nth-child(1) > .flex-1 > .text-craft-500.mb-2"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"flex gap-4 bg-white p-5 rounded-2xl shadow-md border border-craft-100 card-hover\">",
                  "target": [
                    ".p-5.shadow-md.gap-4:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm mb-2\"><i class=\"fas fa-map-marker-alt text-blue-500 mr-1\"></i> Downtown Convention Center</p>",
          "target": [
            ".p-5.shadow-md.gap-4:nth-child(2) > .flex-1 > .text-craft-500.mb-2"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a09288",
                "bgColor": "#ffffff",
                "contrastRatio": 3.01,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"flex gap-4 bg-white p-5 rounded-2xl shadow-md border border-craft-100 card-hover\">",
                  "target": [
                    ".p-5.shadow-md.gap-4:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"text-craft-500 text-sm mb-2\"><i class=\"fas fa-video text-purple-500 mr-1\"></i> Zoom \u00b7 3-hour session</p>",
          "target": [
            ".p-5.shadow-md.gap-4:nth-child(3) > .flex-1 > .text-craft-500.mb-2"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.01 (foreground color: #a09288, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": "critical",
      "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 does not have an alt attribute"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<img src=\"https://picsum.photos/80/80?random=9\" class=\"w-16 h-16 rounded-lg object-cover flex-shrink-0\">",
          "target": [
            ".group.gap-3[href=\"#\"]:nth-child(1) > .w-16.h-16.flex-shrink-0"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an alt attribute"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<img src=\"https://picsum.photos/80/80?random=10\" class=\"w-16 h-16 rounded-lg object-cover flex-shrink-0\">",
          "target": [
            ".group.gap-3[href=\"#\"]:nth-child(2) > .w-16.h-16.flex-shrink-0"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an alt attribute"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<img src=\"https://picsum.photos/80/80?random=11\" class=\"w-16 h-16 rounded-lg object-cover flex-shrink-0\">",
          "target": [
            ".group.gap-3[href=\"#\"]:nth-child(3) > .w-16.h-16.flex-shrink-0"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an alt attribute"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<img src=\"https://picsum.photos/80/80?random=12\" class=\"w-16 h-16 rounded-lg object-cover flex-shrink-0\">",
          "target": [
            ".group.gap-3[href=\"#\"]:nth-child(4) > .w-16.h-16.flex-shrink-0"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        }
      ]
    },
    {
      "id": "label",
      "impact": "critical",
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "non-empty-placeholder",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no placeholder attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<input type=\"range\" id=\"waste\" min=\"5\" max=\"30\" value=\"15\" class=\"w-full accent-accent-500\">",
          "target": [
            "#waste"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element has no placeholder attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        }
      ]
    },
    {
      "id": "link-name",
      "impact": "serious",
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"flex-shrink-0 self-center text-accent-600 hover:text-accent-700\">\n                                <i class=\"fas fa-chevron-right\"></i>\n                            </a>",
          "target": [
            ".p-5.shadow-md.gap-4:nth-child(1) > .self-center.hover\\:text-accent-700.flex-shrink-0"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"flex-shrink-0 self-center text-accent-600 hover:text-accent-700\">\n                                <i class=\"fas fa-chevron-right\"></i>\n                            </a>",
          "target": [
            ".p-5.shadow-md.gap-4:nth-child(2) > .self-center.hover\\:text-accent-700.flex-shrink-0"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"flex-shrink-0 self-center text-accent-600 hover:text-accent-700\">\n                                <i class=\"fas fa-chevron-right\"></i>\n                            </a>",
          "target": [
            ".p-5.shadow-md.gap-4:nth-child(3) > .self-center.hover\\:text-accent-700.flex-shrink-0"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"w-9 h-9 rounded-full bg-craft-800 flex items-center justify-center hover:bg-accent-500 transition-colors text-white\"><i class=\"fab fa-instagram\"></i></a>",
          "target": [
            ".w-9.h-9.bg-craft-800:nth-child(1)"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"w-9 h-9 rounded-full bg-craft-800 flex items-center justify-center hover:bg-accent-500 transition-colors text-white\"><i class=\"fab fa-pinterest\"></i></a>",
          "target": [
            ".w-9.h-9.bg-craft-800:nth-child(2)"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"w-9 h-9 rounded-full bg-craft-800 flex items-center justify-center hover:bg-accent-500 transition-colors text-white\"><i class=\"fab fa-youtube\"></i></a>",
          "target": [
            ".w-9.h-9.bg-craft-800:nth-child(3)"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"w-9 h-9 rounded-full bg-craft-800 flex items-center justify-center hover:bg-accent-500 transition-colors text-white\"><i class=\"fab fa-discord\"></i></a>",
          "target": [
            ".w-9.h-9.bg-craft-800:nth-child(4)"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"flex-shrink-0 self-center text-accent-600 hover:text-accent-700\">\n                                <i class=\"fas fa-chevron-right\"></i>\n                            </a>",
          "target": [
            ".p-5.gap-4.shadow-md:nth-child(1) > .self-center.hover\\:text-accent-700.flex-shrink-0"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"flex-shrink-0 self-center text-accent-600 hover:text-accent-700\">\n                                <i class=\"fas fa-chevron-right\"></i>\n                            </a>",
          "target": [
            ".p-5.gap-4.shadow-md:nth-child(2) > .self-center.hover\\:text-accent-700.flex-shrink-0"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"flex-shrink-0 self-center text-accent-600 hover:text-accent-700\">\n                                <i class=\"fas fa-chevron-right\"></i>\n                            </a>",
          "target": [
            ".p-5.gap-4.shadow-md:nth-child(3) > .self-center.hover\\:text-accent-700.flex-shrink-0"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        }
      ]
    },
    {
      "id": "select-name",
      "impact": "critical",
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<select id=\"craftType\" class=\"w-full px-4 py-3 rounded-xl border border-craft-200 focus:border-accent-500 focus:ring-2 focus:ring-accent-200 outline-none transition-all bg-white text-craft-800\">",
          "target": [
            "#craftType"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 8008
      },
      {
        "y": 576,
        "height": 8008
      },
      {
        "y": 1152,
        "height": 8008
      },
      {
        "y": 1728,
        "height": 8008
      },
      {
        "y": 2304,
        "height": 8008
      },
      {
        "y": 2880,
        "height": 8008
      },
      {
        "y": 3456,
        "height": 8008
      },
      {
        "y": 4032,
        "height": 8008
      },
      {
        "y": 4608,
        "height": 8008
      },
      {
        "y": 5184,
        "height": 8008
      },
      {
        "y": 5760,
        "height": 8008
      },
      {
        "y": 6336,
        "height": 8008
      },
      {
        "y": 6912,
        "height": 8008
      },
      {
        "y": 7288,
        "height": 8008
      }
    ],
    "scans": 15,
    "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 "Hobbies and Interests" 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: "Hobbies and Interests"
- Description: Hobbies, crafts, DIY projects, collecting, and special interest communities.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Hobbies and Interests" 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: "Events", "Community", "Forums".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Hobbies and Interests" category. Consider themes similar to: "Beginner Guides", "Project Showcase", "Online Communities".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "material sourcing", "restoration", "custom design".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Watch Video", "Find Group", "Get Supplies".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Hobbies and Interests" sector. Ideas similar but not limited to: "supply calculator".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "popular projects", "event calendar", "member 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.