| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>FounderMatch | Find Your Perfect Co-Founder</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); |
| } |
| .animate-float { |
| animation: float 6s ease-in-out infinite; |
| } |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| 100% { transform: translateY(0px); } |
| } |
| .hidden { |
| display: none; |
| } |
| .modal { |
| transition: opacity 0.3s ease; |
| } |
| </style> |
| </head> |
| <body class="font-sans antialiased text-gray-800"> |
| |
| <nav class="bg-white shadow-sm"> |
| <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"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i class="fas fa-handshake text-purple-600 text-2xl mr-2"></i> |
| <span class="text-xl font-bold text-purple-600">FounderMatch</span> |
| </div> |
| </div> |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
| <a href="#" class="border-purple-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium" onclick="showSection('home')">Home</a> |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium" onclick="showSection('how-it-works')">How It Works</a> |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium" onclick="showSection('success-stories')">Success Stories</a> |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium" onclick="showSection('resources')">Resources</a> |
| </div> |
| <div class="hidden sm:ml-6 sm:flex sm:items-center" id="auth-buttons"> |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium" onclick="showModal('login-modal')">Login</button> |
| <button class="ml-4 bg-white hover:bg-gray-100 text-purple-600 px-4 py-2 rounded-md text-sm font-medium border border-purple-600" onclick="showModal('register-modal')">Register</button> |
| </div> |
| <div class="hidden sm:ml-6 sm:flex sm:items-center" id="user-menu"> |
| <div class="relative"> |
| <button class="flex items-center text-sm rounded-full focus:outline-none" id="user-menu-button"> |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User profile"> |
| <span class="ml-2 text-gray-700" id="username-display">User</span> |
| </button> |
| <div class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" id="user-dropdown"> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="showSection('dashboard')">Dashboard</a> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="showSection('profile')">Your Profile</a> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="showSection('matches')">Matches</a> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="logout()">Sign out</a> |
| </div> |
| </div> |
| </div> |
| <div class="-mr-2 flex items-center sm:hidden"> |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500" onclick="toggleMobileMenu()"> |
| <span class="sr-only">Open main menu</span> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="hidden sm:hidden" id="mobile-menu"> |
| <div class="pt-2 pb-3 space-y-1"> |
| <a href="#" class="bg-purple-50 border-purple-500 text-purple-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium" onclick="showSection('home')">Home</a> |
| <a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium" onclick="showSection('how-it-works')">How It Works</a> |
| <a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium" onclick="showSection('success-stories')">Success Stories</a> |
| <a href="#" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium" onclick="showSection('resources')">Resources</a> |
| </div> |
| <div class="pt-4 pb-3 border-t border-gray-200"> |
| <div class="flex items-center px-4" id="mobile-auth-buttons"> |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium w-full mb-2" onclick="showModal('login-modal')">Login</button> |
| <button class="bg-white hover:bg-gray-100 text-purple-600 px-4 py-2 rounded-md text-sm font-medium border border-purple-600 w-full" onclick="showModal('register-modal')">Register</button> |
| </div> |
| <div class="hidden" id="mobile-user-menu"> |
| <div class="flex items-center px-4"> |
| <div class="flex-shrink-0"> |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User profile"> |
| </div> |
| <div class="ml-3"> |
| <div class="text-base font-medium text-gray-800" id="mobile-username-display">User</div> |
| </div> |
| </div> |
| <div class="mt-3 space-y-1"> |
| <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100" onclick="showSection('dashboard')">Dashboard</a> |
| <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100" onclick="showSection('profile')">Your Profile</a> |
| <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100" onclick="showSection('matches')">Matches</a> |
| <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100" onclick="logout()">Sign out</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div id="home" class="section"> |
| |
| <div class="gradient-bg"> |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 lg:flex lg:justify-between"> |
| <div class="max-w-xl"> |
| <h1 class="text-4xl font-extrabold text-white sm:text-5xl sm:tracking-tight lg:text-6xl"> |
| Find your perfect co-founder |
| </h1> |
| <p class="mt-5 text-xl text-purple-100"> |
| We match aspiring entrepreneurs based on vision, values, and complementary skills - like dating, but for startups. |
| </p> |
| <div class="mt-10 flex flex-col sm:flex-row sm:space-x-4"> |
| <a href="#" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-purple-50 md:py-4 md:text-lg md:px-10" onclick="showModal('register-modal')"> |
| Start Matching |
| </a> |
| <a href="#" class="mt-3 flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-700 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10 sm:mt-0" onclick="showModal('demo-video-modal')"> |
| <i class="fas fa-play-circle mr-2"></i> Watch Video |
| </a> |
| </div> |
| </div> |
| <div class="mt-12 relative lg:mt-0"> |
| <img class="w-full max-w-lg rounded-lg shadow-xl animate-float" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Founders working together"> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="py-12 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:text-center"> |
| <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Process</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| How FounderMatch Works |
| </p> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| Our simple 3-step process helps you find compatible co-founders quickly and efficiently. |
| </p> |
| </div> |
|
|
| <div class="mt-10"> |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> |
| <div class="relative group"> |
| <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-200"></div> |
| <div class="relative bg-white p-6 rounded-lg h-full transition duration-200 card-hover"> |
| <div class="flex justify-center"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-user-edit"></i> |
| </div> |
| </div> |
| <div class="mt-5 text-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">1. Create Profile</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Tell us about your startup vision, skills, and what you're looking for in a co-founder. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="relative group"> |
| <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-200"></div> |
| <div class="relative bg-white p-6 rounded-lg h-full transition duration-200 card-hover"> |
| <div class="flex justify-center"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-people-arrows"></i> |
| </div> |
| </div> |
| <div class="mt-5 text-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">2. Get Matched</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Our algorithm (and human touch) finds compatible co-founders based on your criteria. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="relative group"> |
| <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-200"></div> |
| <div class="relative bg-white p-6 rounded-lg h-full transition duration-200 card-hover"> |
| <div class="flex justify-center"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-comments"></i> |
| </div> |
| </div> |
| <div class="mt-5 text-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">3. Connect & Build</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Message your matches, meet virtually or in-person, and start building your dream startup. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-purple-50 py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:text-center"> |
| <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Success Stories</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Founders Who Found Their Match |
| </p> |
| </div> |
| <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex items-center"> |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J."> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-gray-900">Sarah J.</h4> |
| <p class="text-purple-600">Co-founder, EcoCart</p> |
| </div> |
| </div> |
| <p class="mt-4 text-gray-600"> |
| "FounderMatch connected me with my technical co-founder within 2 weeks. We launched our MVP 3 months later and just closed our seed round!" |
| </p> |
| <div class="mt-4 flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex items-center"> |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Raj P."> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-gray-900">Raj P.</h4> |
| <p class="text-purple-600">Co-founder, HealthTrack</p> |
| </div> |
| </div> |
| <p class="mt-4 text-gray-600"> |
| "As a developer with no business background, I needed someone to handle sales and marketing. Found the perfect match through FounderMatch." |
| </p> |
| <div class="mt-4 flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex items-center"> |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Mia K."> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-gray-900">Mia K.</h4> |
| <p class="text-purple-600">Co-founder, EduPlay</p> |
| </div> |
| </div> |
| <p class="mt-4 text-gray-600"> |
| "The detailed matching criteria helped me find someone who shared my passion for education technology. We complement each other perfectly." |
| </p> |
| <div class="mt-4 flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="bg-purple-700 rounded-lg shadow-xl overflow-hidden"> |
| <div class="px-6 py-12 sm:p-16"> |
| <div class="md:flex md:items-center md:justify-between"> |
| <div class="md:w-2/3"> |
| <h2 class="text-2xl font-extrabold text-white sm:text-3xl"> |
| Ready to find your co-founder? |
| </h2> |
| <p class="mt-3 max-w-3xl text-lg leading-6 text-purple-200"> |
| Join thousands of entrepreneurs who found their perfect match through our platform. |
| </p> |
| </div> |
| <div class="mt-8 flex md:mt-0 md:flex-shrink-0"> |
| <div class="inline-flex rounded-md shadow"> |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-purple-50" onclick="showModal('register-modal')"> |
| Sign Up Free |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="py-12 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:text-center"> |
| <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Features</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Why Founders Choose Us |
| </p> |
| </div> |
|
|
| <div class="mt-10"> |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-brain"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Smart Matching</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Our algorithm considers vision alignment, complementary skills, personality traits, and work styles. |
| </p> |
| </div> |
| </div> |
|
|
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-user-shield"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Verified Profiles</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| All members go through verification to ensure authenticity and commitment. |
| </p> |
| </div> |
| </div> |
|
|
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-graduation-cap"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Founder Resources</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Access to exclusive content, templates, and tools to help you start strong. |
| </p> |
| </div> |
| </div> |
|
|
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-network-wired"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Community Access</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Join our private founder community for networking, advice, and support. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-purple-50 py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:text-center"> |
| <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Pricing</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Simple, transparent pricing |
| </p> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| Start for free and upgrade when you're ready for more advanced features. |
| </p> |
| </div> |
|
|
| <div class="mt-10 flex flex-col md:flex-row justify-center gap-8"> |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden w-full max-w-md transition duration-200 card-hover"> |
| <div class="px-6 py-8"> |
| <h3 class="text-2xl font-medium text-gray-900">Basic</h3> |
| <p class="mt-4 flex items-baseline"> |
| <span class="text-5xl font-extrabold">Free</span> |
| <span class="ml-1 text-xl font-semibold text-gray-500">forever</span> |
| </p> |
| <p class="mt-5 text-lg text-gray-500"> |
| Perfect for getting started |
| </p> |
| </div> |
| <div class="px-6 pt-6 pb-8 bg-gray-50"> |
| <ul class="space-y-4"> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-purple-500"></i> |
| </div> |
| <p class="ml-3 text-base text-gray-700"> |
| 3 matches per month |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-purple-500"></i> |
| </div> |
| <p class="ml-3 text-base text-gray-700"> |
| Basic matching criteria |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-purple-500"></i> |
| </div> |
| <p class="ml-3 text-base text-gray-700"> |
| Community access |
| </p> |
| </li> |
| </ul> |
| <div class="mt-8"> |
| <div class="rounded-md shadow"> |
| <a href="#" class="flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700" onclick="showModal('register-modal')"> |
| Get Started |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow-xl overflow-hidden w-full max-w-md transform scale-105 transition duration-200 card-hover"> |
| <div class="px-6 py-8 bg-purple-700"> |
| <h3 class="text-2xl font-medium text-white">Premium</h3> |
| <p class="mt-4 flex items-baseline"> |
| <span class="text-5xl font-extrabold text-white">$29</span> |
| <span class="ml-1 text-xl font-semibold text-purple-200">/month</span> |
| </p> |
| <p class="mt-5 text-lg text-purple-100"> |
| For serious founders ready to build |
| </p> |
| </div> |
| <div class="px-6 pt-6 pb-8 bg-gray-50"> |
| <ul class="space-y-4"> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-purple-500"></i> |
| </div> |
| <p class="ml-3 text-base text-gray-700"> |
| Unlimited matches |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-purple-500"></i> |
| </div> |
| <p class="ml-3 text-base text-gray-700"> |
| Advanced matching filters |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-purple-500"></i> |
| </div> |
| <p class="ml-3 text-base text-gray-700"> |
| Priority matching |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-purple-500"></i> |
| </div> |
| <p class="ml-3 text-base text-gray-700"> |
| Exclusive founder resources |
| </p> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-check-circle text-purple-500"></i> |
| </div> |
| <p class="ml-3 text-base text-gray-700"> |
| VC introduction program |
| </p> |
| </li> |
| </ul> |
| <div class="mt-8"> |
| <div class="rounded-md shadow"> |
| <a href="#" class="flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-gray-50" onclick="showModal('register-modal')"> |
| Upgrade Now |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:text-center"> |
| <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">FAQ</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Frequently asked questions |
| </p> |
| </div> |
| <div class="mt-12"> |
| <dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-12"> |
| <div> |
| <dt class="text-lg leading-6 font-medium text-gray-900"> |
| How does the matching process work? |
| </dt> |
| <dd class="mt-2 text-base text-gray-500"> |
| Our algorithm analyzes your profile information (skills, experience, personality traits) and matches you with compatible founders. We also include human review for quality matches. |
| </dd> |
| </div> |
|
|
| <div> |
| <dt class="text-lg leading-6 font-medium text-gray-900"> |
| Is FounderMatch only for tech startups? |
| </dt> |
| <dd class="mt-2 text-base text-gray-500"> |
| Not at all! We support founders across all industries - from e-commerce to healthcare to social enterprises. Our matching focuses on complementary skills and shared vision. |
| </dd> |
| </div> |
|
|
| <div> |
| <dt class="text-lg leading-6 font-medium text-gray-900"> |
| How long does it take to find a match? |
| </dt> |
| <dd class="mt-2 text-base text-gray-500"> |
| Most users receive their first matches within 48 hours. The more complete your profile, the better and faster your matches will be. |
| </dd> |
| </div> |
|
|
| <div> |
| <dt class="text-lg leading-6 font-medium text-gray-900"> |
| What if I don't like my matches? |
| </dt> |
| <dd class="mt-2 text-base text-gray-500"> |
| You can provide feedback on each match to help us refine future suggestions. Premium members can also request manual rematching from our team. |
| </dd> |
| </div> |
|
|
| <div> |
| <dt class="text-lg leading-6 font-medium text-gray-900"> |
| Do you help with legal agreements between co-founders? |
| </dt> |
| <dd class="mt-2 text-base text-gray-500"> |
| We provide template agreements and partner discounts with legal services, but recommend consulting a lawyer for your specific situation. |
| </dd> |
| </div> |
|
|
| <div> |
| <dt class="text-lg leading-6 font-medium text-gray-900"> |
| Can I join if I already have a startup idea? |
| </dt> |
| <dd class="mt-2 text-base text-gray-500"> |
| Absolutely! Many founders come with ideas looking for complementary skills. You can specify whether you're open to joining someone else's idea or want partners for yours. |
| </dd> |
| </div> |
| </dl> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="gradient-bg"> |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> |
| <span class="block">Ready to find your co-founder?</span> |
| <span class="block text-purple-200">Sign up today and get your first match for free.</span> |
| </h2> |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> |
| <div class="inline-flex rounded-md shadow"> |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-purple-50" onclick="showModal('register-modal')"> |
| Get Started |
| </a> |
| </div> |
| <div class="ml-3 inline-flex rounded-md shadow"> |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-600 bg-opacity-60 hover:bg-opacity-70" onclick="showModal('demo-video-modal')"> |
| Live Demo |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="how-it-works" class="section hidden"> |
| <div class="py-12 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:text-center"> |
| <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Detailed Process</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| How FounderMatch Works |
| </p> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| Our comprehensive matching process ensures you find the right co-founder for your startup journey. |
| </p> |
| </div> |
|
|
| <div class="mt-10"> |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> |
| <div class="relative group"> |
| <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-200"></div> |
| <div class="relative bg-white p-6 rounded-lg h-full transition duration-200 card-hover"> |
| <div class="flex justify-center"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-user-edit"></i> |
| </div> |
| </div> |
| <div class="mt-5 text-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">1. Create Your Profile</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Complete your profile with details about your skills, experience, personality, and what you're looking for in a co-founder. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="relative group"> |
| <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-200"></div> |
| <div class="relative bg-white p-6 rounded-lg h-full transition duration-200 card-hover"> |
| <div class="flex justify-center"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-search"></i> |
| </div> |
| </div> |
| <div class="mt-5 text-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">2. Our Matching Process</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Our proprietary algorithm analyzes 50+ factors to identify the most compatible co-founders for you. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="relative group"> |
| <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-200"></div> |
| <div class="relative bg-white p-6 rounded-lg h-full transition duration-200 card-hover"> |
| <div class="flex justify-center"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| </div> |
| <div class="mt-5 text-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">3. Receive Matches</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Get introduced to potential co-founders through our secure messaging system. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="relative group"> |
| <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-200"></div> |
| <div class="relative bg-white p-6 rounded-lg h-full transition duration-200 card-hover"> |
| <div class="flex justify-center"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-video"></i> |
| </div> |
| </div> |
| <div class="mt-5 text-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">4. Virtual Meetups</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Schedule video calls with your matches through our integrated scheduling system. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="relative group"> |
| <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-200"></div> |
| <div class="relative bg-white p-6 rounded-lg h-full transition duration-200 card-hover"> |
| <div class="flex justify-center"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-handshake"></i> |
| </div> |
| </div> |
| <div class="mt-5 text-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">5. Founder Agreement</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Access our co-founder agreement templates and legal resources when you're ready to formalize. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="relative group"> |
| <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-200"></div> |
| <div class="relative bg-white p-6 rounded-lg h-full transition duration-200 card-hover"> |
| <div class="flex justify-center"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-rocket"></i> |
| </div> |
| </div> |
| <div class="mt-5 text-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">6. Build Your Startup</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Get access to our startup resources and community to help you launch successfully. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="success-stories" class="section hidden"> |
| <div class="bg-purple-50 py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:text-center"> |
| <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Success Stories</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Founders Who Found Their Match |
| </p> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| Real stories from entrepreneurs who found their perfect co-founder through our platform. |
| </p> |
| </div> |
|
|
| <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex items-center"> |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J."> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-gray-900">Sarah J.</h4> |
| <p class="text-purple-600">Co-founder, EcoCart</p> |
| </div> |
| </div> |
| <p class="mt-4 text-gray-600"> |
| "I had the business plan but no technical skills. FounderMatch connected me with my technical co-founder within 2 weeks. We launched our MVP 3 months later and just closed our seed round!" |
| </p> |
| <div class="mt-6"> |
| <img class="w-full h-48 object-cover rounded" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="EcoCart product"> |
| </div> |
| <div class="mt-4 flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex items-center"> |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Raj P."> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-gray-900">Raj P.</h4> |
| <p class="text-purple-600">Co-founder, HealthTrack</p> |
| </div> |
| </div> |
| <p class="mt-4 text-gray-600"> |
| "As a developer with no business background, I needed someone to handle sales and marketing. Found the perfect match through FounderMatch. Our complementary skills have been key to our rapid growth." |
| </p> |
| <div class="mt-6"> |
| <img class="w-full h-48 object-cover rounded" src="https://images.unsplash.com/photo-1505751172876-fa1923c5c528?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="HealthTrack app"> |
| </div> |
| <div class="mt-4 flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex items-center"> |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Mia K."> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-gray-900">Mia K.</h4> |
| <p class="text-purple-600">Co-founder, EduPlay</p> |
| </div> |
| </div> |
| <p class="mt-4 text-gray-600"> |
| "The detailed matching criteria helped me find someone who shared my passion for education technology. We complement each other perfectly - I handle product while she focuses on growth." |
| </p> |
| <div class="mt-6"> |
| <img class="w-full h-48 object-cover rounded" src="https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="EduPlay in classroom"> |
| </div> |
| <div class="mt-4 flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-12 text-center"> |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-md text-lg font-medium" onclick="showModal('register-modal')"> |
| Join These Founders |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="resources" class="section hidden"> |
| <div class="py-12 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:text-center"> |
| <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Resources</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Founder Resources |
| </p> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| Tools, templates, and guides to help you build a successful startup with your co-founder. |
| </p> |
| </div> |
|
|
| <div class="mt-10"> |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex justify-center"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-file-contract"></i> |
| </div> |
| </div> |
| <div class="mt-5 text-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Co-founder Agreement Template</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Legal template to formalize your co-founder relationship and equity split. |
| </p> |
| <div class="mt-6"> |
| <a href="#" class="text-purple-600 hover:text-purple-700 font-medium" onclick="downloadResource('agreement-template')">Download Template</a> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex justify-center"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-book"></i> |
| </div> |
| </div> |
| <div class="mt-5 text-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Founder's Playbook</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Comprehensive guide covering everything from idea validation to fundraising. |
| </p> |
| <div class="mt-6"> |
| <a href="#" class="text-purple-600 hover:text-purple-700 font-medium" onclick="downloadResource('founders-playbook')">Download Guide</a> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex justify-center"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-chart-line"></i> |
| </div> |
| </div> |
| <div class="mt-5 text-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Pitch Deck Template</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Investor-ready pitch deck template with examples from successful startups. |
| </p> |
| <div class="mt-6"> |
| <a href="#" class="text-purple-600 hover:text-purple-700 font-medium" onclick="downloadResource('pitch-deck-template')">Download Template</a> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex justify-center"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-users"></i> |
| </div> |
| </div> |
| <div class="mt-5 text-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Founder Equity Calculator</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Tool to help you fairly split equity based on contributions and roles. |
| </p> |
| <div class="mt-6"> |
| <a href="#" class="text-purple-600 hover:text-purple-700 font-medium" onclick="showModal('equity-calculator-modal')">Access Calculator</a> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex justify-center"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-tasks"></i> |
| </div> |
| </div> |
| <div class="mt-5 text-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Startup Roadmap</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Step-by-step roadmap for launching your startup in the first 12 months. |
| </p> |
| <div class="mt-6"> |
| <a href="#" class="text-purple-600 hover:text-purple-700 font-medium" onclick="downloadResource('startup-roadmap')">Download Roadmap</a> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex justify-center"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
| <i class="fas fa-handshake"></i> |
| </div> |
| </div> |
| <div class="mt-5 text-center"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Co-founder Conflict Guide</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Strategies for preventing and resolving conflicts with your co-founder. |
| </p> |
| <div class="mt-6"> |
| <a href="#" class="text-purple-600 hover:text-purple-700 font-medium" onclick="downloadResource('conflict-guide')">Download Guide</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-12 text-center"> |
| <p class="text-lg text-gray-600"> |
| Want access to all our premium resources? |
| </p> |
| <button class="mt-4 bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-md text-lg font-medium" onclick="showModal('register-modal')"> |
| Upgrade to Premium |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="dashboard" class="section hidden"> |
| <div class="py-8 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center"> |
| <h2 class="text-2xl font-bold text-gray-900">Your Dashboard</h2> |
| <div class="flex items-center"> |
| <span class="text-sm text-gray-500 mr-2">Profile Completion:</span> |
| <div class="w-32 bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-purple-600 h-2.5 rounded-full" style="width: 75%"></div> |
| </div> |
| <span class="ml-2 text-sm font-medium text-gray-700">75%</span> |
| </div> |
| </div> |
|
|
| <div class="mt-8 grid grid-cols-1 gap-6 md:grid-cols-3"> |
| |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex items-center justify-between"> |
| <h3 class="text-lg font-medium text-gray-900">Your Matches</h3> |
| <span class="px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full">3 New</span> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center space-x-4 mb-4"> |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/33.jpg" alt="Match 1"> |
| <div> |
| <h4 class="text-sm font-medium text-gray-900">Alexandra M.</h4> |
| <p class="text-xs text-gray-500">Marketing Expert | E-commerce</p> |
| </div> |
| <button class="ml-auto text-purple-600 hover:text-purple-700" onclick="viewMatch('alexandra')"> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
| </div> |
| <div class="flex items-center space-x-4 mb-4"> |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Match 2"> |
| <div> |
| <h4 class="text-sm font-medium text-gray-900">David K.</h4> |
| <p class="text-xs text-gray-500">Full-stack Developer | AI</p> |
| </div> |
| <button class="ml-auto text-purple-600 hover:text-purple-700" onclick="viewMatch('david')"> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Match 3"> |
| <div> |
| <h4 class="text-sm font-medium text-gray-900">Sophia L.</h4> |
| <p class="text-xs text-gray-500">Product Designer | SaaS</p> |
| </div> |
| <button class="ml-auto text-purple-600 hover:text-purple-700" onclick="viewMatch('sophia')"> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <button class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium" onclick="showSection('matches')"> |
| View All Matches |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex items-center justify-between"> |
| <h3 class="text-lg font-medium text-gray-900">Messages</h3> |
| <span class="px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full">2 Unread</span> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center space-x-4 mb-4"> |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/33.jpg" alt="Message 1"> |
| <div> |
| <h4 class="text-sm font-medium text-gray-900">Alexandra M.</h4> |
| <p class="text-xs text-gray-500 truncate w-32">Hey! I'd love to schedule a call to discuss your project...</p> |
| </div> |
| <span class="ml-auto text-xs text-gray-500">2h ago</span> |
| </div> |
| <div class="flex items-center space-x-4 mb-4"> |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Message 2"> |
| <div> |
| <h4 class="text-sm font-medium text-gray-900">David K.</h4> |
| <p class="text-xs text-gray-500 truncate w-32">I've reviewed your profile and think we could be a great...</p> |
| </div> |
| <span class="ml-auto text-xs text-gray-500">1d ago</span> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Message 3"> |
| <div> |
| <h4 class="text-sm font-medium text-gray-900">Sophia L.</h4> |
| <p class="text-xs text-gray-500 truncate w-32">Your design portfolio is impressive! Let's connect...</p> |
| </div> |
| <span class="ml-auto text-xs text-gray-500">3d ago</span> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <button class="w-full bg-white hover:bg-gray-50 text-purple-600 px-4 py-2 rounded-md text-sm font-medium border border-purple-600" onclick="showModal('messages-modal')"> |
| View All Messages |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <h3 class="text-lg font-medium text-gray-900">Complete Your Profile</h3> |
| <p class="mt-2 text-sm text-gray-500"> |
| A complete profile gets 3x more matches. Add these details to improve your matches: |
| </p> |
| <div class="mt-4 space-y-3"> |
| <div class="flex items-center"> |
| <input id="skills-checkbox" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> |
| <label for="skills-checkbox" class="ml-2 text-sm text-gray-700">Add at least 5 skills</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="photo-checkbox" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> |
| <label for="photo-checkbox" class="ml-2 text-sm text-gray-700">Upload a profile photo</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="bio-checkbox" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> |
| <label for="bio-checkbox" class="ml-2 text-sm text-gray-700">Write a detailed bio</label> |
| </div> |
| <div class="flex items-center"> |
| <input id="preferences-checkbox" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> |
| <label for="preferences-checkbox" class="ml-2 text-sm text-gray-700">Specify co-founder preferences</label> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <button class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium" onclick="showSection('profile')"> |
| Edit Profile |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-10"> |
| <h3 class="text-lg font-medium text-gray-900">Recommended Matches</h3> |
| <p class="mt-1 text-sm text-gray-500"> |
| Based on your profile and preferences, we think you'd work well with these founders: |
| </p> |
| |
| <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> |
| |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex items-center space-x-4"> |
| <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/women/42.jpg" alt="Match 1"> |
| <div> |
| <h4 class="text-md font-medium text-gray-900">Emma R.</h4> |
| <p class="text-sm text-gray-500">Business Development | Fintech</p> |
| <div class="mt-1 flex"> |
| <span class="px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full mr-2">Sales</span> |
| <span class="px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full">Marketing</span> |
| </div> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <p class="text-sm text-gray-600"> |
| "Looking for a technical co-founder to build a neobank for freelancers. Have industry connections and initial funding." |
| </p> |
| </div> |
| <div class="mt-6 flex space-x-2"> |
| <button class="flex-1 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium" onclick="showModal('view-profile-modal')"> |
| View Profile |
| </button> |
| <button class="flex-1 bg-white hover:bg-gray-50 text-purple-600 px-4 py-2 rounded-md text-sm font-medium border border-purple-600" onclick="showModal('message-modal')"> |
| Message |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex items-center space-x-4"> |
| <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Match 2"> |
| <div> |
| <h4 class="text-md font-medium text-gray-900">Michael T.</h4> |
| <p class="text-sm text-gray-500">Product Manager | Healthtech</p> |
| <div class="mt-1 flex"> |
| <span class="px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full mr-2">UX</span> |
| <span class="px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full">Strategy</span> |
| </div> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <p class="text-sm text-gray-600"> |
| "Building a platform for remote patient monitoring. Need a co-founder with healthcare experience and technical skills." |
| </p> |
| </div> |
| <div class="mt-6 flex space-x-2"> |
| <button class="flex-1 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium" onclick="showModal('view-profile-modal')"> |
| View Profile |
| </button> |
| <button class="flex-1 bg-white hover:bg-gray-50 text-purple-600 px-4 py-2 rounded-md text-sm font-medium border border-purple-600" onclick="showModal('message-modal')"> |
| Message |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-lg shadow-md transition duration-200 card-hover"> |
| <div class="flex items-center space-x-4"> |
| <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/women/63.jpg" alt="Match 3"> |
| <div> |
| <h4 class="text-md font-medium text-gray-900">Priya K.</h4> |
| <p class="text-sm text-gray-500">Data Scientist | AI</p> |
| <div class="mt-1 flex"> |
| <span class="px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full mr-2">ML</span> |
| <span class="px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full">Python</span> |
| </div> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <p class="text-sm text-gray-600"> |
| "Developing AI tools for small businesses. Looking for a business-minded co-founder to help with go-to-market strategy." |
| </p> |
| </div> |
| <div class="mt-6 flex space-x-2"> |
| <button class="flex-1 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium" onclick="showModal('view-profile-modal')"> |
| View Profile |
| </button> |
| <button class="flex-1 bg-white hover:bg-gray-50 text-purple-600 px-4 py-2 rounded-md text-sm font-medium border border-purple-600" onclick="showModal('message-modal')"> |
| Message |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="profile" class="section hidden"> |
| <div class="py-8 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center"> |
| <h2 class="text-2xl font-bold text-gray-900">Your Profile</h2> |
| <button class="text-purple-600 hover:text-purple-700 font-medium" onclick="showSection('dashboard')"> |
| <i class="fas fa-arrow-left mr-1"></i> Back to Dashboard |
| </button> |
| </div> |
|
|
| <div class="mt-8 grid grid-cols-1 gap-6 md:grid-cols-3"> |
| |
| <div class="md:col-span-1"> |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex flex-col items-center"> |
| <div class="relative"> |
| <img class="w-32 h-32 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User profile"> |
| <button class="absolute bottom-0 right-0 bg-purple-600 hover:bg-purple-700 text-white p-2 rounded-full" onclick="showModal('upload-photo-modal')"> |
| <i class="fas fa-camera"></i> |
| </button> |
| </div> |
| <h3 class="mt-4 text-xl font-medium text-gray-900" id="profile-name">John Doe</h3> |
| <p class="text-sm text-gray-500" id="profile-title">Software Engineer | AI Startup</p> |
| |
| <div class="mt-4 w-full"> |
| <h4 class="text-sm font-medium text-gray-900">Profile Completion</h4> |
| <div class="w-full bg-gray-200 |
| </html> |
