| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Register as Founder | Lumikiza</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| </head> |
| <body class="bg-gray-50"> |
| <custom-navbar></custom-navbar> |
| |
| <main class="py-12"> |
| <section class="container mx-auto px-4 max-w-4xl"> |
| <div class="bg-white rounded-xl shadow-sm p-8 md:p-10"> |
| <div class="text-center mb-8"> |
| <h1 class="text-3xl font-bold text-gray-900 mb-2">Founder Registration</h1> |
| <p class="text-gray-600">Tell us about your business to find the perfect advisor match</p> |
| </div> |
| |
| <form id="founderForm" class="space-y-6"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label for="fullName" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> |
| <input type="text" id="fullName" name="fullName" required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> |
| <input type="email" id="email" name="email" required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div> |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> |
| <input type="tel" id="phone" name="phone" required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div> |
| <label for="businessName" class="block text-sm font-medium text-gray-700 mb-1">Business Name</label> |
| <input type="text" id="businessName" name="businessName" required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| </div> |
| |
| <div> |
| <label for="businessDescription" class="block text-sm font-medium text-gray-700 mb-1">Business Description</label> |
| <textarea id="businessDescription" name="businessDescription" rows="4" required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-2">Business Stage</label> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> |
| <label class="flex items-center space-x-2"> |
| <input type="radio" name="businessStage" value="idea" class="text-blue-600 focus:ring-blue-500"> |
| <span>Idea Stage</span> |
| </label> |
| <label class="flex items-center space-x-2"> |
| <input type="radio" name="businessStage" value="pre-revenue" class="text-blue-600 focus:ring-blue-500"> |
| <span>Pre-Revenue</span> |
| </label> |
| <label class="flex items-center space-x-2"> |
| <input type="radio" name="businessStage" value="early-revenue" class="text-blue-600 focus:ring-blue-500"> |
| <span>Early Revenue</span> |
| </label> |
| <label class="flex items-center space-x-2"> |
| <input type="radio" name="businessStage" value="growth" class="text-blue-600 focus:ring-blue-500"> |
| <span>Growth Stage</span> |
| </label> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-2">What Areas Do You Need Help With?</label> |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-3"> |
| <label class="flex items-center space-x-2"> |
| <input type="checkbox" name="helpAreas" value="funding" class="text-blue-600 focus:ring-blue-500"> |
| <span>Funding</span> |
| </label> |
| <label class="flex items-center space-x-2"> |
| <input type="checkbox" name="helpAreas" value="marketing" class="text-blue-600 focus:ring-blue-500"> |
| <span>Marketing</span> |
| </label> |
| <label class="flex items-center space-x-2"> |
| <input type="checkbox" name="helpAreas" value="operations" class="text-blue-600 focus:ring-blue-500"> |
| <span>Operations</span> |
| </label> |
| <label class="flex items-center space-x-2"> |
| <input type="checkbox" name="helpAreas" value="technology" class="text-blue-600 focus:ring-blue-500"> |
| <span>Technology</span> |
| </label> |
| <label class="flex items-center space-x-2"> |
| <input type="checkbox" name="helpAreas" value="legal" class="text-blue-600 focus:ring-blue-500"> |
| <span>Legal</span> |
| </label> |
| <label class="flex items-center space-x-2"> |
| <input type="checkbox" name="helpAreas" value="strategy" class="text-blue-600 focus:ring-blue-500"> |
| <span>Strategy</span> |
| </label> |
| </div> |
| </div> |
| |
| <div> |
| <label for="advisorExpectations" class="block text-sm font-medium text-gray-700 mb-1">What do you expect from an advisor?</label> |
| <textarea id="advisorExpectations" name="advisorExpectations" rows="3" |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> |
| </div> |
| |
| <div class="border-t border-gray-200 pt-6"> |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Payment Information</h3> |
| <div class="bg-blue-50 p-4 rounded-lg mb-6"> |
| <p class="text-sm text-blue-800">Founder registration fee: <span class="font-bold">ZMW 100</span></p> |
| </div> |
| |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-2">Payment Method</label> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-3"> |
| <button type="button" class="payment-method border border-gray-300 rounded-lg p-4 flex flex-col items-center opacity-50 cursor-not-allowed"> |
| <i data-feather="credit-card" class="text-blue-600 mb-2"></i> |
| <span>Debit/Credit Card (Temporarily Unavailable)</span> |
| </button> |
| <button type="button" class="payment-method border border-gray-300 rounded-lg p-4 flex flex-col items-center"> |
| <i data-feather="smartphone" class="text-green-600 mb-2"></i> |
| <span>MTN Money</span> |
| </button> |
| <button type="button" class="payment-method border border-gray-300 rounded-lg p-4 flex flex-col items-center"> |
| <i data-feather="smartphone" class="text-purple-600 mb-2"></i> |
| <span>Airtel Money</span> |
| </button> |
| </div> |
| </div> |
| |
| <div id="cardDetails" class="hidden space-y-4"> |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <label for="cardNumber" class="block text-sm font-medium text-gray-700 mb-1">Card Number</label> |
| <input type="text" id="cardNumber" name="cardNumber" |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
| placeholder="1234 5678 9012 3456"> |
| </div> |
| <div> |
| <label for="cardExpiry" class="block text-sm font-medium text-gray-700 mb-1">Expiry Date</label> |
| <input type="text" id="cardExpiry" name="cardExpiry" |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
| placeholder="MM/YY"> |
| </div> |
| </div> |
| <div> |
| <label for="cardCvv" class="block text-sm font-medium text-gray-700 mb-1">CVV</label> |
| <input type="text" id="cardCvv" name="cardCvv" |
| class="w-1/3 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
| placeholder="123"> |
| </div> |
| </div> |
| |
| <div id="mobileMoneyDetails" class="hidden"> |
| <div> |
| <label for="mobileNumber" class="block text-sm font-medium text-gray-700 mb-1">Mobile Number</label> |
| <input type="tel" id="mobileNumber" name="mobileNumber" |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <input type="checkbox" id="codeOfConduct" name="codeOfConduct" required |
| class="mt-1 text-blue-600 focus:ring-blue-500"> |
| <label for="codeOfConduct" class="ml-2 text-sm text-gray-700"> |
| I agree to the Lumikiza <a href="/code-of-conduct.html" class="text-blue-600 hover:underline">Code of Conduct</a>, |
| <input type="checkbox" id="terms" name="terms" required |
| class="mt-1 text-blue-600 focus:ring-blue-500"> |
| <label for="terms" class="ml-2 text-sm text-gray-700"> |
| I agree to the <a href="/terms.html" class="text-blue-600 hover:underline">Terms of Service</a> and |
| <a href="/privacy.html" class="text-blue-600 hover:underline">Privacy Policy</a> |
| </label> |
| </div> |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition"> |
| Complete Registration (ZMW 100) |
| </button> |
| </form> |
| </div> |
| </section> |
| </main> |
|
|
| <custom-footer></custom-footer> |
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="components/notification-bell.js"></script> |
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| |
| |
| document.querySelectorAll('.payment-method').forEach(button => { |
| button.addEventListener('click', function() { |
| document.querySelectorAll('.payment-method').forEach(btn => { |
| btn.classList.remove('border-blue-500', 'bg-blue-50'); |
| }); |
| this.classList.add('border-blue-500', 'bg-blue-50'); |
| |
| |
| document.getElementById('cardDetails').classList.add('hidden'); |
| document.getElementById('mobileMoneyDetails').classList.add('hidden'); |
| |
| if (this.textContent.includes('Card')) { |
| document.getElementById('cardDetails').classList.remove('hidden'); |
| } else if (this.textContent.includes('MTN') || this.textContent.includes('Airtel')) { |
| document.getElementById('mobileMoneyDetails').classList.remove('hidden'); |
| } |
| }); |
| }); |
| |
| document.getElementById('founderForm').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| if (validateForm('founderForm')) { |
| |
| const submitBtn = e.target.querySelector('button[type="submit"]'); |
| submitBtn.disabled = true; |
| submitBtn.innerHTML = `<span class="animate-spin inline-block mr-2"><i data-feather="loader"></i></span> Processing...`; |
| feather.replace(); |
| |
| |
| handleFormSuccess('founder'); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
