<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Build Your Idea Without Writing Code | AI Bootcamp</title>
    <link rel="icon" type="image/png" href="/favicon.png">
    <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@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; }
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
    </style>
</head>
<body class="bg-gray-950 text-white">

    <!-- Hero Section -->
    <section class="min-h-screen flex flex-col justify-center px-6 py-20">
        <div class="max-w-4xl mx-auto text-center">
            <img src="/codemongrel-hero.png" alt="Code Mongrel - Build Real Apps with AI" class="mx-auto mb-8 rounded-2xl shadow-2xl max-w-full md:max-w-2xl">
            <p class="text-purple-400 font-medium mb-2 tracking-wide uppercase text-sm">7-Day Live Bootcamp</p>
            <p class="text-gray-300 text-lg mb-6">February 3 - February 10, 2026</p>
            <h1 class="text-6xl md:text-8xl font-extrabold mb-6 leading-tight">
                Turn Your Idea Into
                <span class="gradient-text block">A Product with AI</span>
            </h1>
            <p class="text-xl md:text-2xl text-gray-400 mb-10 max-w-2xl mx-auto">
                The step-by-step system to build and launch a real product in 7 days. No coding required.
            </p>
            <a href="#pricing" class="inline-block bg-purple-600 hover:bg-purple-700 text-white font-semibold text-lg px-8 py-4 rounded-lg transition-all transform hover:scale-105">
                Enroll Now
            </a>
            <p class="text-gray-400 mt-4 text-base">Limited to 15 spots</p>
        </div>
    </section>

    <!-- Pain Section -->
    <section class="px-6 py-20 bg-gray-900">
        <div class="max-w-3xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center">You have the idea. <span class="gradient-text">You just can't build it.</span></h2>
            <div class="space-y-6 text-lg text-gray-400">
                <p>You've had this app idea for months. Maybe years.</p>
                <p>You've looked into hiring developers. <span class="text-white font-medium">$10,000 - $50,000</span> for an MVP. And they still might not get it right.</p>
                <p>You've tried no-code tools. Hit walls. Couldn't do what you actually needed.</p>
                <p>You've watched YouTube tutorials. Still staring at a blank screen.</p>
                <p class="text-white font-medium pt-4">Meanwhile, other founders are shipping apps in days using AI.</p>
                <p class="text-purple-400 font-semibold text-xl pt-2">What do they know that you don't?</p>
            </div>
        </div>
    </section>

    <!-- Solution Section -->
    <section class="px-6 py-20">
        <div class="max-w-3xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center">AI changed everything.</h2>
            <div class="space-y-6 text-lg text-gray-400">
                <p>Tools like Claude Code, Lovable, and Cursor can now generate entire applications from plain English descriptions.</p>
                <p>But there's a gap between "AI can build apps" and <span class="text-white font-medium">you actually knowing how to use these tools</span> to build something real.</p>
                <p>That's what this bootcamp teaches.</p>
                <p class="text-white font-medium">In 7 days, you'll go from idea to deployed, working MVP.</p>
            </div>
        </div>
    </section>

    <!-- What You'll Build Section -->
    <section class="px-6 py-20 bg-gray-900">
        <div class="max-w-3xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold mb-10 text-center">By Day 7, you'll have:</h2>
            <div class="space-y-4">
                <div class="flex items-start gap-4 bg-gray-800 p-5 rounded-lg">
                    <span class="text-green-400 text-2xl">✓</span>
                    <p class="text-lg"><span class="text-white font-medium">A working web application</span> <span class="text-gray-400">- not a mockup, real software</span></p>
                </div>
                <div class="flex items-start gap-4 bg-gray-800 p-5 rounded-lg">
                    <span class="text-green-400 text-2xl">✓</span>
                    <p class="text-lg"><span class="text-white font-medium">User authentication</span> <span class="text-gray-400">- login, signup, real users</span></p>
                </div>
                <div class="flex items-start gap-4 bg-gray-800 p-5 rounded-lg">
                    <span class="text-green-400 text-2xl">✓</span>
                    <p class="text-lg"><span class="text-white font-medium">Database connected</span> <span class="text-gray-400">- your app stores real data</span></p>
                </div>
                <div class="flex items-start gap-4 bg-gray-800 p-5 rounded-lg">
                    <span class="text-green-400 text-2xl">✓</span>
                    <p class="text-lg"><span class="text-white font-medium">Deployed live</span> <span class="text-gray-400">- real URL, anyone can use it</span></p>
                </div>
                <div class="flex items-start gap-4 bg-gray-800 p-5 rounded-lg">
                    <span class="text-green-400 text-2xl">✓</span>
                    <p class="text-lg"><span class="text-white font-medium">The skills to build your next 10 apps</span></p>
                </div>
            </div>
            <p class="text-center text-gray-500 mt-8">This isn't theory. You're shipping something real.</p>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="px-6 py-20">
        <div class="max-w-4xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">What Founders Are Saying</h2>
            <div class="grid md:grid-cols-3 gap-6">
                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <div class="flex items-center gap-1 text-yellow-400 mb-4">
                        <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
                    </div>
                    <p class="text-gray-300 mb-4">"I had this SaaS idea for 2 years. After the bootcamp, I had a working MVP in 7 days. Actually deployed. Actually works. Mind blown."</p>
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center font-bold">M</div>
                        <div>
                            <p class="font-medium">Marcus R.</p>
                            <p class="text-gray-500 text-sm">Founder, TaskFlow</p>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <div class="flex items-center gap-1 text-yellow-400 mb-4">
                        <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
                    </div>
                    <p class="text-gray-300 mb-4">"I'm a marketing person. Never touched code. Now I've built 3 apps. The ROI on this bootcamp is insane."</p>
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-green-600 rounded-full flex items-center justify-center font-bold">S</div>
                        <div>
                            <p class="font-medium">Sarah K.</p>
                            <p class="text-gray-500 text-sm">Marketing Director</p>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <div class="flex items-center gap-1 text-yellow-400 mb-4">
                        <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
                    </div>
                    <p class="text-gray-300 mb-4">"Got quotes from devs: $15k-30k. Built it myself in the bootcamp for $299. It's been running in production for 4 months."</p>
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center font-bold">J</div>
                        <div>
                            <p class="font-medium">James T.</p>
                            <p class="text-gray-500 text-sm">Founder, LocalLens</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- What You'll Learn Section -->
    <section class="px-6 py-20">
        <div class="max-w-4xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">What You'll Learn</h2>
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <div class="text-purple-400 font-bold mb-2">AI Development Tools</div>
                    <p class="text-gray-400">Master Claude Code web, Lovable, and other AI tools. Know when to use each one.</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <div class="text-purple-400 font-bold mb-2">Database & Backend</div>
                    <p class="text-gray-400">Set up Supabase. Store user data. Build real functionality.</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <div class="text-purple-400 font-bold mb-2">Deployment</div>
                    <p class="text-gray-400">Deploy to Vercel. Get a real URL. Share with the world.</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <div class="text-purple-400 font-bold mb-2">Version Control</div>
                    <p class="text-gray-400">Use GitHub without the command line. Undo mistakes. Work safely.</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <div class="text-purple-400 font-bold mb-2">Security Basics</div>
                    <p class="text-gray-400">Don't ship something that gets hacked. Learn what matters.</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <div class="text-purple-400 font-bold mb-2">Iterative Development</div>
                    <p class="text-gray-400">Build in stages. Test as you go. Don't break what works.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works -->
    <section class="px-6 py-20 bg-gray-900">
        <div class="max-w-4xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">How It Works</h2>
            <div class="space-y-6">
                <div class="flex items-start gap-6 bg-gray-800 p-6 rounded-xl">
                    <span class="text-purple-400 text-2xl font-bold">1</span>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">Live Sessions</h3>
                        <p class="text-gray-400">Daily live calls where I walk you through everything. Ask questions in real-time.</p>
                    </div>
                </div>
                <div class="flex items-start gap-6 bg-gray-800 p-6 rounded-xl">
                    <span class="text-purple-400 text-2xl font-bold">2</span>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">Build Your Own Project</h3>
                        <p class="text-gray-400">Not a tutorial project. Your actual idea. Your actual MVP.</p>
                    </div>
                </div>
                <div class="flex items-start gap-6 bg-gray-800 p-6 rounded-xl">
                    <span class="text-purple-400 text-2xl font-bold">3</span>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">Community Support</h3>
                        <p class="text-gray-400">Private group with other founders. Get unstuck. Share progress. Stay accountable.</p>
                    </div>
                </div>
                <div class="flex items-start gap-6 bg-gray-800 p-6 rounded-xl">
                    <span class="text-purple-400 text-2xl font-bold">4</span>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">Ship by Day 7</h3>
                        <p class="text-gray-400">You'll deploy a working app by the end. Not "almost done." Done.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section class="px-6 py-20">
        <div class="max-w-3xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center">Who's teaching this?</h2>
            <div class="bg-gray-800 p-8 rounded-2xl border border-gray-700">
                <div class="space-y-4 text-lg text-gray-400">
                    <p>I built a full production SaaS using these exact tools and methods.</p>
                    <p>No development team. No $50k budget. Just AI tools and knowing how to use them.</p>
                    <p>I've spent hundreds of hours figuring out what works, what doesn't, and how to teach it to people who've never written code.</p>
                    <p class="text-white font-medium">This isn't theory from someone who read a blog post. This is what I actually do.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section id="pricing" class="px-6 py-20 bg-gray-900">
        <div class="max-w-xl mx-auto text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Join the Bootcamp</h2>
            <p class="text-gray-400 mb-8">Limited to 15 founders per cohort for personalized attention.</p>

            <div class="bg-gray-800 rounded-2xl p-8 border border-purple-600">
                <div class="text-purple-400 text-sm font-semibold mb-2">FOUNDING MEMBER PRICING</div>
                <div class="text-5xl font-extrabold mb-2">$299</div>
                <p class="text-gray-400 mb-6">One-time payment. Lifetime access to materials.</p>

                <ul class="text-left space-y-3 mb-8">
                    <li class="flex items-center gap-3">
                        <span class="text-green-400">✓</span>
                        <span>7 days of live sessions</span>
                    </li>
                    <li class="flex items-center gap-3">
                        <span class="text-green-400">✓</span>
                        <span>Build your actual MVP</span>
                    </li>
                    <li class="flex items-center gap-3">
                        <span class="text-green-400">✓</span>
                        <span>Private community access</span>
                    </li>
                    <li class="flex items-center gap-3">
                        <span class="text-green-400">✓</span>
                        <span>Recordings of all sessions</span>
                    </li>
                    <li class="flex items-center gap-3">
                        <span class="text-green-400">✓</span>
                        <span>Templates and resources</span>
                    </li>
                    <li class="flex items-center gap-3">
                        <span class="text-green-400">✓</span>
                        <span>Lifetime updates</span>
                    </li>
                </ul>

                <a href="#signup" class="block w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold text-lg px-8 py-4 rounded-lg transition-all">
                    Reserve Your Spot
                </a>
                <p class="text-sm text-gray-500 mt-4">Price increases to $499 after founding cohort.</p>
            </div>
        </div>
    </section>

    <!-- Signup Section -->
    <section id="signup" class="px-6 py-20">
        <div class="max-w-xl mx-auto text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Reserve Your Spot</h2>
            <p class="text-gray-400 mb-8">Enter your email to get notified when the next cohort opens.</p>

            <div class="bg-gray-800 rounded-2xl p-8 border border-gray-700">
                <div id="success-message" class="hidden bg-green-900/50 border border-green-500 text-green-300 p-4 rounded-lg mb-4">
                    You're on the list! We'll email you when enrollment opens.
                </div>
                <form id="signup-form" action="/signups" method="POST" class="space-y-4">
                    <input type="hidden" name="source" value="bootcamp">
                    <input type="email" name="email" placeholder="Enter your email" required
                        class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 text-white placeholder-gray-400 focus:outline-none focus:border-purple-500">
                    <button type="submit"
                        class="w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold text-lg px-8 py-4 rounded-lg transition-all">
                        Join the Waitlist
                    </button>
                </form>
                <p class="text-sm text-gray-500 mt-4">No spam. Just cohort updates.</p>
            </div>
            <script>
                if (window.location.search.includes('signed_up=true')) {
                    document.getElementById('success-message').classList.remove('hidden');
                    document.getElementById('signup-form').classList.add('hidden');
                }
            </script>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="px-6 py-20 bg-gray-900">
        <div class="max-w-3xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">Questions</h2>
            <div class="space-y-6">
                <div class="bg-gray-800 p-6 rounded-xl">
                    <h3 class="font-semibold text-lg mb-2">Do I need any technical experience?</h3>
                    <p class="text-gray-400">No. This bootcamp is designed for non-technical founders. If you can use Google Docs, you can do this.</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl">
                    <h3 class="font-semibold text-lg mb-2">What kind of app can I build?</h3>
                    <p class="text-gray-400">Web applications, SaaS tools, marketplaces, directories, internal tools. Not mobile apps (yet).</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl">
                    <h3 class="font-semibold text-lg mb-2">How much time do I need?</h3>
                    <p class="text-gray-400">Plan for 1-2 hours per day for 7 days. Live sessions plus building time.</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl">
                    <h3 class="font-semibold text-lg mb-2">What tools will I need?</h3>
                    <p class="text-gray-400">A laptop and internet. We'll use free tiers of Claude, Supabase, Vercel, and GitHub. I'll walk you through all the setup.</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl">
                    <h3 class="font-semibold text-lg mb-2">What if I can't keep up?</h3>
                    <p class="text-gray-400">All sessions are recorded. You have lifetime access. Plus the community stays open for questions.</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl">
                    <h3 class="font-semibold text-lg mb-2">Is there a refund policy?</h3>
                    <p class="text-gray-400">If you attend the first two sessions and feel it's not for you, I'll refund you in full. No questions asked.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Final CTA -->
    <section class="px-6 py-20">
        <div class="max-w-3xl mx-auto text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">Turn your idea into a real app in 7 days.</h2>
            <p class="text-xl text-gray-400 mb-8">
                Next cohort starts February 3, 2026.<br>
                Only 15 spots available.
            </p>
            <a href="#signup" class="inline-block bg-purple-600 hover:bg-purple-700 text-white font-semibold text-lg px-8 py-4 rounded-lg transition-all transform hover:scale-105">
                Enroll Now
            </a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="px-6 py-10 border-t border-gray-800">
        <div class="max-w-3xl mx-auto text-center text-gray-500 text-sm">
            <p>&copy; 2026 Code Mongrel. All rights reserved.</p>
            <div class="mt-4 space-x-4">
                <a href="/privacy.html" class="hover:text-purple-400">Privacy Policy</a>
                <a href="/terms.html" class="hover:text-purple-400">Terms of Service</a>
            </div>
        </div>
    </footer>

</body>
</html>
