index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FounderFind - Find Your Startup Match</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .swipe-card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            max-height: 500px;
        }
        .swipe-card.swipe-right {
            transform: translateX(120%) rotate(15deg);
            opacity: 0;
        }
        .swipe-card.swipe-left {
            transform: translateX(-120%) rotate(-15deg);
            opacity: 0;
        }
    </style>
</head>
<body class="font-sans antialiased text-gray-800">
    <!-- Navigation -->
    <nav class="bg-white shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fas fa-rocket text-indigo-600 text-2xl mr-2"></i>
                        <span class="text-xl font-bold text-gray-900">FounderFind</span>
                    </div>
                </div>
                <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
                    <a href="#how-it-works" class="text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">How It Works</a>
                    <a href="#who-its-for" class="text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Who It's For</a>
                    <a href="#testimonials" class="text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Testimonials</a>
                </div>
                <div class="flex items-center">
                    <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition duration-300">
                        Join Now
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="gradient-bg text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
            <div class="md:flex md:items-center md:justify-between">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
                        Find Your Startup Match
                    </h1>
                    <p class="text-xl mb-8 opacity-90">
                        Join projects you believe in. Build the future together. 🚀
                    </p>
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                        <button class="bg-white text-indigo-600 px-6 py-3 rounded-md text-lg font-semibold hover:bg-gray-100 transition duration-300">
                            I'm a Founder
                        </button>
                        <button class="bg-indigo-800 text-white px-6 py-3 rounded-md text-lg font-semibold hover:bg-indigo-900 transition duration-300">
                            I'm a Builder
                        </button>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-80 h-96">
                        <div class="absolute top-0 left-0 w-full h-full bg-white rounded-xl shadow-xl transform rotate-3"></div>
                        <div class="absolute top-0 left-0 w-full h-full bg-white rounded-xl shadow-xl transform -rotate-3"></div>
                        <div class="absolute top-0 left-0 w-full h-full bg-white rounded-xl shadow-xl overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Startup Team" class="w-full h-full object-cover">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works -->
    <section id="how-it-works" class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">✅ How it works</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    This is not just another job board — it's where startups are born and teams are built.
                </p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Step 1 -->
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300 card-hover">
                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
                        <span class="text-indigo-600 text-2xl font-bold">1</span>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">Create your profile</h3>
                    <p class="text-gray-600">
                        Choose if you're a founder or a builder. Add your skills, experience, and what you're looking for.
                    </p>
                </div>
                
                <!-- Step 2 -->
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300 card-hover">
                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
                        <span class="text-indigo-600 text-2xl font-bold">2</span>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">Get matched</h3>
                    <p class="text-gray-600">
                        Swipe through startups or profiles that fit your goals. No noise, just potential.
                    </p>
                </div>
                
                <!-- Step 3 -->
                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300 card-hover">
                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
                        <span class="text-indigo-600 text-2xl font-bold">3</span>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">Start building</h3>
                    <p class="text-gray-600">
                        When there's a match, start chatting. Align visions. Start shipping.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Swipe Demo -->
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Start Swiping Today</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    Find your perfect match with our intuitive swipe interface.
                </p>
            </div>
            
            <div class="flex justify-center">
                <div class="relative w-full max-w-md mx-auto">
                    <div id="swipe-card" class="swipe-card bg-white rounded-xl shadow-xl w-full max-w-sm mx-auto">
                        <img id="profile-image" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Profile" class="w-full h-72 object-cover rounded-t-xl">
                        <div class="p-6 pb-8">
                            <h3 id="profile-name" class="text-xl font-semibold mb-1">Sarah Johnson</h3>
                            <p id="profile-title" class="text-indigo-600 font-medium mb-3">Full Stack Developer</p>
                            <p id="profile-bio" class="text-gray-600 text-sm leading-relaxed">
                                Looking to join an early-stage startup with ambitious goals. Specialized in React, Node.js, and AWS.
                            </p>
                        </div>
                    </div>
                    
                    <div class="flex justify-center mt-8 space-x-6 mx-auto">
                        <button id="swipe-left" class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center text-red-500 hover:bg-red-200 transition duration-300">
                            <i class="fas fa-times text-2xl"></i>
                        </button>
                        <button id="swipe-right" class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center text-green-500 hover:bg-green-200 transition duration-300">
                            <i class="fas fa-heart text-2xl"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Who It's For -->
    <section id="who-its-for" class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">👥 Who is this for?</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    Build something real, from day one. Equity, vision, upside — not just a paycheck.
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Founder Card -->
                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 card-hover">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4 text-indigo-600">
                        <i class="fas fa-lightbulb text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Founders</h3>
                    <p class="text-gray-600">
                        Looking for co-founders or early team members to bring your vision to life.
                    </p>
                </div>
                
                <!-- Developer Card -->
                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 card-hover">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4 text-indigo-600">
                        <i class="fas fa-code text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Developers</h3>
                    <p class="text-gray-600">
                        Want to join early-stage startups and work on meaningful products.
                    </p>
                </div>
                
                <!-- Designers Card -->
                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 card-hover">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4 text-indigo-600">
                        <i class="fas fa-paint-brush text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Designers</h3>
                    <p class="text-gray-600">
                        Looking to shape products from the ground up with your creative skills.
                    </p>
                </div>
                
                <!-- Growth Card -->
                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 card-hover">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4 text-indigo-600">
                        <i class="fas fa-chart-line text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Growth Pros</h3>
                    <p class="text-gray-600">
                        Tired of corporate structures and want to drive real growth in startups.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="gradient-bg text-white py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">No fluff. Just builders.</h2>
            <p class="text-xl mb-8 max-w-3xl mx-auto opacity-90">
                Start swiping today and find your perfect startup match.
            </p>
            <button class="bg-white text-indigo-600 px-8 py-4 rounded-md text-lg font-semibold hover:bg-gray-100 transition duration-300 shadow-lg">
                Join Now - It's Free
            </button>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">FounderFind</h3>
                    <p class="text-gray-400">
                        Where startups are born and teams are built.
                    </p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">Product</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Features</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Pricing</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">FAQ</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">Company</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">Connect</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition duration-300">
                            <i class="fab fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition duration-300">
                            <i class="fab fa-linkedin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition duration-300">
                            <i class="fab fa-instagram text-xl"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
                <p>© 2023 FounderFind. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        // Sample profiles for swipe demo
        const profiles = [
            {
                name: "Sarah Johnson",
                title: "Full Stack Developer",
                bio: "Looking to join an early-stage startup with ambitious goals. Specialized in React, Node.js, and AWS.",
                image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
            },
            {
                name: "Michael Chen",
                title: "UX/UI Designer",
                bio: "Passionate about creating beautiful, functional interfaces. Looking for a startup where design is valued.",
                image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
            },
            {
                name: "Aisha Williams",
                title: "Growth Marketer",
                bio: "Experienced in scaling startups from 0 to 1M users. Looking for my next big challenge.",
                image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
            },
            {
                name: "David Kim",
                title: "Backend Engineer",
                bio: "Specialized in distributed systems and scaling infrastructure. Want to work on hard technical problems.",
                image: "https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
            }
        ];

        let currentProfileIndex = 0;
        const swipeCard = document.getElementById('swipe-card');
        const profileImage = document.getElementById('profile-image');
        const profileName = document.getElementById('profile-name');
        const profileTitle = document.getElementById('profile-title');
        const profileBio = document.getElementById('profile-bio');
        const swipeLeftBtn = document.getElementById('swipe-left');
        const swipeRightBtn = document.getElementById('swipe-right');

        // Initialize first profile
        updateProfile();

        // Swipe left (reject)
        swipeLeftBtn.addEventListener('click', () => {
            swipeCard.classList.add('swipe-left');
            setTimeout(() => {
                swipeCard.classList.remove('swipe-left');
                currentProfileIndex = (currentProfileIndex + 1) % profiles.length;
                updateProfile();
            }, 300);
        });

        // Swipe right (like)
        swipeRightBtn.addEventListener('click', () => {
            swipeCard.classList.add('swipe-right');
            setTimeout(() => {
                swipeCard.classList.remove('swipe-right');
                currentProfileIndex = (currentProfileIndex + 1) % profiles.length;
                updateProfile();
            }, 300);
        });

        function updateProfile() {
            const profile = profiles[currentProfileIndex];
            profileImage.src = profile.image;
            profileName.textContent = profile.name;
            profileTitle.textContent = profile.title;
            profileBio.textContent = profile.bio;
        }

        // Mobile menu toggle would go here if needed
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ctresb/testing" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>