priority-waitlist.html

---
layout: default
title: Priority Waitlist | Hacker Dojo
---
<!-- Load Tailwind and Fonts for this page -->
<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=Rajdhani:wght@400;500;600;700&family=Saira:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<script>
    tailwind.config = {
        theme: {
            extend: {
                fontFamily: { sans: ['Saira', 'system-ui', 'sans-serif'] },
                colors: {
                    dojo: {
                        red: '#C84A0E',
                        navy: '#0C111D',
                        purple: '#7C3AED',
                        blue: '#2563EB',
                        green: '#059669'
                    }
                }
            }
        }
    }
</script>

<div class="bg-[#F5F5F5] text-[#141414] antialiased selection:bg-dojo-red selection:text-white font-sans min-h-screen py-16 px-6">
    <div class="max-w-3xl mx-auto">
        
        <!-- Header -->
        <div class="text-center mb-10">
            <div class="inline-flex items-center gap-2 bg-red-50 text-dojo-red px-4 py-1.5 rounded-full text-xs font-bold mb-6 border border-red-100 shadow-sm uppercase tracking-widest">
                Waitlist Application
            </div>
            <h1 class="text-4xl md:text-6xl font-black tracking-tight text-dojo-navy mb-4 leading-tight">
                Priority Waitlist
            </h1>
            <p class="text-lg text-gray-600 font-medium max-w-xl mx-auto leading-relaxed">
                Due to high demand, our current AI Initiative cohorts are at capacity. Join the waitlist below to be notified the moment a seat opens up or new dates are announced.
            </p>
        </div>

        <!-- Form Card -->
        <div class="bg-white border border-gray-200 rounded-3xl p-8 md:p-12 shadow-xl relative overflow-hidden" id="formContainer">
            <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-dojo-blue via-dojo-purple to-dojo-red"></div>
            
            <div id="errBox" class="hidden mb-6 bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-xl text-sm font-semibold text-center"></div>

            <form id="waitlistForm" onsubmit="submitForm(event)" class="space-y-6">
                <!-- Name -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 uppercase tracking-wide mb-2">Full Name</label>
                    <input type="text" id="fullName" required placeholder="Jane Doe" 
                           class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-dojo-purple/50 focus:border-dojo-purple transition-all font-medium text-gray-900">
                </div>

                <!-- Email -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 uppercase tracking-wide mb-2">Email Address</label>
                    <input type="email" id="emailAddress" required placeholder="jane@example.com" 
                           class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-dojo-purple/50 focus:border-dojo-purple transition-all font-medium text-gray-900">
                </div>

                <!-- Program Selection -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 uppercase tracking-wide mb-2">Program Interest</label>
                    <div class="relative">
                        <select id="program" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-dojo-purple/50 focus:border-dojo-purple transition-all font-medium text-gray-900 appearance-none cursor-pointer">
                            <option value="" disabled selected>Select a track...</option>
                            <option value="Bridge Standard">The Bridge - Standard ($997)</option>
                            <option value="Bridge Premium">The Bridge - Premium ($1,497)</option>
                            <option value="Forge Standard">The Forge - Standard ($1,497)</option>
                            <option value="Forge Premium">The Forge - Premium ($1,997)</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-gray-500">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </div>
                    </div>
                </div>

                <!-- Notes -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 uppercase tracking-wide mb-2">Notes (Optional)</label>
                    <p class="text-xs text-gray-500 mb-2 font-medium">Please let us know if you need to join ASAP, require a scholarship, or have any other relevant details we should consider for priority placement.</p>
                    <textarea id="notes" rows="4" placeholder="Share your context here..." 
                              class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-dojo-purple/50 focus:border-dojo-purple transition-all font-medium text-gray-900 resize-none"></textarea>
                </div>

                <!-- Submit Button -->
                <button type="submit" id="submitBtn" 
                        class="w-full mt-4 py-4 rounded-xl bg-dojo-navy text-white font-black text-lg hover:bg-gray-800 transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                    Secure My Place in Line &rarr;
                </button>
            </form>
        </div>

    </div>
</div>

<script>
async function submitForm(e) {
    e.preventDefault();
    
    const errBox = document.getElementById('errBox');
    const submitBtn = document.getElementById('submitBtn');
    
    // Get values
    const name = document.getElementById('fullName').value.trim();
    const email = document.getElementById('emailAddress').value.trim();
    const program = document.getElementById('program').value;
    const notes = document.getElementById('notes').value.trim();
    
    // Hide error
    errBox.classList.add('hidden');
    
    // Change button state
    const originalText = submitBtn.innerHTML;
    submitBtn.disabled = true;
    submitBtn.innerHTML = 'Submitting...';
    submitBtn.classList.add('opacity-75');

    // Create the payload exactly as Airtable expects
    const payload = {
        "Name": name,
        "Email Address": email,
        "Program you're interested in": program,
        "Notes": notes
    };

    try {
        // Send request to our Vercel rewrite (which proxies securely to Airtable)
        const response = await fetch('/api/waitlist', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(payload)
        });

        if (!response.ok) {
            throw new Error('Network response was not ok');
        }

        // Show Success UI
        document.getElementById('formContainer').innerHTML = `
            <div class="absolute top-0 left-0 w-full h-2 bg-dojo-green"></div>
            <div class="text-center py-10">
                <div class="w-20 h-20 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-6">
                    <svg class="w-10 h-10 text-dojo-green" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
                </div>
                <h3 class="text-3xl font-black text-dojo-navy mb-4">You're on the list!</h3>
                <p class="text-gray-600 font-medium text-lg max-w-md mx-auto">
                    We've securely saved your spot. We will email you at <strong class="text-gray-900">${email}</strong> the moment a seat opens up or new dates are announced.
                </p>
                <div class="mt-8">
                    <a href="/" class="text-dojo-blue font-bold hover:underline">&larr; Return to Hacker Dojo</a>
                </div>
            </div>
        `;

    } catch (error) {
        // Show Error
        errBox.textContent = "Something went wrong connecting to the server. Please try again.";
        errBox.classList.remove('hidden');
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
        submitBtn.classList.remove('opacity-75');
    }
}
</script>