App Name: WiFiLink Kenya Prompt: Build a fully responsive and animated React app called WiFiLink Kenya that serves as a broker for public and private Wi-Fi billing systems across Kenya. The app connects internet resellers, cyber cafés, and local hotspots with customers who want to access Wi-Fi in exchange for M-Pesa payments or tokens. Key Features: 📍 Location-based Wi-Fi hotspots directory 🔐 User sign-up/login with email and phone number (linked to M-Pesa) 💰 Admin and vendor dashboards for earnings tracking and user management 🧾 Token generation for timed Wi-Fi access (30min, 1hr, 3hr, etc.) 🔄 API integration with Wi-Fi routers (Mikrotik or UniFi API simulated) 📦 Payment system simulated via M-Pesa logic (placeholder or third-party gateway ready) 📊 Analytics dashboard for vendors and admin 🎨 Modern animations and smooth UI transitions using Framer Motion Backend: Use Supabase connected to the account derricknyaga254@gmail.com Tables: users, vendors, wifi_tokens, transactions, hotspots, sessions Auth: Email & phone (OTP), Role-based access (admin, vendor, user) Real-time updates using Supabase subscriptions for session tracking Storage: Upload router/device config files or hotspot images Design: Use Tailwind CSS for sleek UI Include responsive mobile and desktop views Animations for transitions, loaders, and real-time notifications (Framer Motion) Use dark/light mode toggle Monetization: Admin (you) earns a commission per transaction (e.g. 5% of every top-up) Vendors are charged a monthly listing fee for hotspot visibility Option for running ads or data bundles marketplace (future integration) - Follow Up Deployment
d912a7b verified | <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WiFiLink Kenya - Smart WiFi Access Broker</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"> | |
| <script src="https://unpkg.com/framer-motion@10.16.4/dist/framer-motion.js"></script> | |
| <style> | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .animate-pulse-custom { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .map-container { | |
| height: 400px; | |
| background-image: url('https://maps.googleapis.com/maps/api/staticmap?center=Kenya&zoom=6&size=800x400&maptype=roadmap&key=YOUR_API_KEY'); | |
| background-size: cover; | |
| background-position: center; | |
| border-radius: 1rem; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%); | |
| } | |
| .token-card: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); | |
| } | |
| .slide-in { | |
| animation: slideIn 0.3s ease-out forwards; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in forwards; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300"> | |
| <!-- Navigation --> | |
| <nav class="bg-white dark:bg-gray-800 shadow-md fixed w-full z-10"> | |
| <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-wifi text-indigo-600 dark:text-indigo-400 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-800 dark:text-white">WiFiLink <span class="text-indigo-600 dark:text-indigo-400">Kenya</span></span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#home" class="border-indigo-500 text-gray-900 dark:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#hotspots" class="border-transparent text-gray-500 dark:text-gray-300 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Hotspots</a> | |
| <a href="#how-it-works" class="border-transparent text-gray-500 dark:text-gray-300 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">How It Works</a> | |
| <a href="#pricing" class="border-transparent text-gray-500 dark:text-gray-300 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button id="theme-toggle" type="button" class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none"> | |
| <i id="theme-icon" class="fas fa-moon"></i> | |
| </button> | |
| <button onclick="toggleAuthModal()" class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Sign In | |
| </button> | |
| <button onclick="toggleRegisterModal()" class="ml-2 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:text-indigo-100 dark:bg-indigo-700 dark:hover:bg-indigo-600"> | |
| Register | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button id="mobile-menu-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-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden sm:hidden"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#home" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:bg-gray-700 dark:text-indigo-300">Home</a> | |
| <a href="#hotspots" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-200">Hotspots</a> | |
| <a href="#how-it-works" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-200">How It Works</a> | |
| <a href="#pricing" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-200">Pricing</a> | |
| <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center px-4"> | |
| <button onclick="toggleAuthModal()" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"> | |
| Sign In | |
| </button> | |
| <button onclick="toggleRegisterModal()" class="ml-2 w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-indigo-700 bg-indigo-100 hover:bg-indigo-200 dark:text-indigo-100 dark:bg-indigo-700 dark:hover:bg-indigo-600"> | |
| Register | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8"> | |
| <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white sm:text-5xl md:text-6xl"> | |
| <span class="block">Smart WiFi Access</span> | |
| <span class="block text-indigo-600 dark:text-indigo-400">Across Kenya</span> | |
| </h1> | |
| <p class="mt-3 text-base text-gray-500 dark:text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| Connect to thousands of WiFi hotspots across Kenya with just a tap. Pay via M-Pesa and get instant access. | |
| </p> | |
| <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> | |
| <div class="flex flex-col sm:flex-row gap-3"> | |
| <button onclick="toggleRegisterModal()" class="flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-8"> | |
| Get Started | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <button onclick="toggleAuthModal()" class="flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 dark:text-indigo-100 dark:bg-indigo-700 dark:hover:bg-indigo-600 md:py-4 md:text-lg md:px-8"> | |
| Sign In | |
| </button> | |
| </div> | |
| <p class="mt-3 text-sm text-gray-500 dark:text-gray-400"> | |
| Already have an account? <button onclick="toggleAuthModal()" class="text-indigo-600 dark:text-indigo-400 font-medium hover:text-indigo-500 dark:hover:text-indigo-300">Sign in</button> | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"> | |
| <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md"> | |
| <div class="relative overflow-hidden bg-white dark:bg-gray-800 rounded-lg"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-indigo-500 to-purple-600 opacity-70"></div> | |
| <div class="relative px-8 py-12"> | |
| <div class="text-white"> | |
| <h3 class="text-2xl font-bold mb-4">Find WiFi Near You</h3> | |
| <div class="flex items-center mb-6"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> | |
| <input type="text" placeholder="Enter your location" class="bg-white bg-opacity-20 border border-white border-opacity-30 rounded-md px-4 py-2 w-full placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-white bg-opacity-20 rounded-lg p-4 text-center"> | |
| <i class="fas fa-wifi text-2xl mb-2"></i> | |
| <p class="font-semibold">1,200+ Hotspots</p> | |
| </div> | |
| <div class="bg-white bg-opacity-20 rounded-lg p-4 text-center"> | |
| <i class="fas fa-users text-2xl mb-2"></i> | |
| <p class="font-semibold">50,000+ Users</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-indigo-600 dark:bg-indigo-800 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 gap-8 text-center sm:grid-cols-4"> | |
| <div class="slide-in"> | |
| <p class="text-3xl font-extrabold text-white sm:text-4xl">1,200+</p> | |
| <p class="text-sm font-medium text-indigo-100">WiFi Hotspots</p> | |
| </div> | |
| <div class="slide-in" style="animation-delay: 0.1s;"> | |
| <p class="text-3xl font-extrabold text-white sm:text-4xl">50K+</p> | |
| <p class="text-sm font-medium text-indigo-100">Active Users</p> | |
| </div> | |
| <div class="slide-in" style="animation-delay: 0.2s;"> | |
| <p class="text-3xl font-extrabold text-white sm:text-4xl">98%</p> | |
| <p class="text-sm font-medium text-indigo-100">Uptime</p> | |
| </div> | |
| <div class="slide-in" style="animation-delay: 0.3s;"> | |
| <p class="text-3xl font-extrabold text-white sm:text-4xl">24/7</p> | |
| <p class="text-sm font-medium text-indigo-100">Support</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Hotspots Section --> | |
| <section id="hotspots" class="py-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl"> | |
| Find WiFi Hotspots Near You | |
| </h2> | |
| <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-300 sm:mt-4"> | |
| Discover thousands of WiFi hotspots across Kenya's major cities and towns | |
| </p> | |
| </div> | |
| <div class="map-container mb-12 slide-in"></div> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Hotspot Card 1 --> | |
| <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg transition-all duration-300 hover:shadow-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-wifi text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900 dark:text-white">Nairobi CBD</h3> | |
| <p class="mt-1 text-sm text-gray-500 dark:text-gray-300 truncate">Kenyatta Avenue, Nairobi</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500 dark:text-gray-300"> | |
| <span>Speed</span> | |
| <span class="font-medium">25 Mbps</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 dark:text-gray-300 mt-1"> | |
| <span>Price</span> | |
| <span class="font-medium">KSh 50/hr</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 dark:text-gray-300 mt-1"> | |
| <span>Distance</span> | |
| <span class="font-medium">1.2 km</span> | |
| </div> | |
| </div> | |
| <div class="mt-5"> | |
| <button onclick="showTokenModal()" class="w-full flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700"> | |
| Buy WiFi Token | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hotspot Card 2 --> | |
| <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg transition-all duration-300 hover:shadow-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-wifi text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900 dark:text-white">Westlands</h3> | |
| <p class="mt-1 text-sm text-gray-500 dark:text-gray-300 truncate">Waiyaki Way, Nairobi</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500 dark:text-gray-300"> | |
| <span>Speed</span> | |
| <span class="font-medium">30 Mbps</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 dark:text-gray-300 mt-1"> | |
| <span>Price</span> | |
| <span class="font-medium">KSh 60/hr</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 dark:text-gray-300 mt-1"> | |
| <span>Distance</span> | |
| <span class="font-medium">3.5 km</span> | |
| </div> | |
| </div> | |
| <div class="mt-5"> | |
| <button onclick="showTokenModal()" class="w-full flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700"> | |
| Buy WiFi Token | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hotspot Card 3 --> | |
| <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg transition-all duration-300 hover:shadow-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-wifi text-white"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900 dark:text-white">Mombasa Old Town</h3> | |
| <p class="mt-1 text-sm text-gray-500 dark:text-gray-300 truncate">Nkrumah Road, Mombasa</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500 dark:text-gray-300"> | |
| <span>Speed</span> | |
| <span class="font-medium">20 Mbps</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 dark:text-gray-300 mt-1"> | |
| <span>Price</span> | |
| <span class="font-medium">KSh 45/hr</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 dark:text-gray-300 mt-1"> | |
| <span>Distance</span> | |
| <span class="font-medium">450 km</span> | |
| </div> | |
| </div> | |
| <div class="mt-5"> | |
| <button onclick="showTokenModal()" class="w-full flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700"> | |
| Buy WiFi Token | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700"> | |
| View All Hotspots | |
| <i class="fas fa-chevron-right ml-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" class="py-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gray-50 dark:bg-gray-800 rounded-xl"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl"> | |
| How WiFiLink Works | |
| </h2> | |
| <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-300 sm:mt-4"> | |
| Get connected in just 3 simple steps | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="relative"> | |
| <!-- Line connecting steps --> | |
| <div class="hidden lg:block absolute top-0 left-1/2 h-full w-0.5 bg-indigo-200 dark:bg-indigo-900 transform -translate-x-1/2"></div> | |
| <div class="relative lg:grid lg:grid-cols-3 lg:gap-8 space-y-8 lg:space-y-0"> | |
| <!-- Step 1 --> | |
| <div class="bg-white dark:bg-gray-700 shadow rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg"> | |
| <div class="px-6 py-8 sm:p-10"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <span class="text-xl font-bold">1</span> | |
| </div> | |
| <h3 class="mt-6 text-xl font-medium text-gray-900 dark:text-white">Find a Hotspot</h3> | |
| <p class="mt-2 text-base text-gray-500 dark:text-gray-300"> | |
| Browse our network of WiFi hotspots across Kenya. Filter by location, speed, or price to find the perfect connection. | |
| </p> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-50 dark:bg-gray-600 border-t border-gray-200 dark:border-gray-500"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-indigo-500 mr-2"></i> | |
| <span class="text-sm text-gray-500 dark:text-gray-300">Location-based search</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="bg-white dark:bg-gray-700 shadow rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg"> | |
| <div class="px-6 py-8 sm:p-10"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <span class="text-xl font-bold">2</span> | |
| </div> | |
| <h3 class="mt-6 text-xl font-medium text-gray-900 dark:text-white">Purchase WiFi Token</h3> | |
| <p class="mt-2 text-base text-gray-500 dark:text-gray-300"> | |
| Select your preferred duration (30min, 1hr, 3hr, etc.) and pay securely via M-Pesa. Receive your unique WiFi token instantly. | |
| </p> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-50 dark:bg-gray-600 border-t border-gray-200 dark:border-gray-500"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-money-bill-wave text-indigo-500 mr-2"></i> | |
| <span class="text-sm text-gray-500 dark:text-gray-300">M-Pesa integration</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="bg-white dark:bg-gray-700 shadow rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg"> | |
| <div class="px-6 py-8 sm:p-10"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <span class="text-xl font-bold">3</span> | |
| </div> | |
| <h3 class="mt-6 text-xl font-medium text-gray-900 dark:text-white">Connect & Enjoy</h3> | |
| <p class="mt-2 text-base text-gray-500 dark:text-gray-300"> | |
| Enter the WiFi token at the hotspot login page and enjoy high-speed internet for your purchased duration. | |
| </p> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-50 dark:bg-gray-600 border-t border-gray-200 dark:border-gray-500"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-wifi text-indigo-500 mr-2"></i> | |
| <span class="text-sm text-gray-500 dark:text-gray-300">Instant access</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl"> | |
| Simple, Transparent Pricing | |
| </h2> | |
| <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-300 sm:mt-4"> | |
| Choose the plan that works best for you | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- User Plan --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl"> | |
| <div class="px-6 py-8 sm:p-10"> | |
| <h3 class="text-2xl font-bold text-gray-900 dark:text-white text-center">WiFi User</h3> | |
| <div class="mt-4 flex items-center justify-center"> | |
| <span class="text-5xl font-extrabold text-gray-900 dark:text-white">Free</span> | |
| </div> | |
| <p class="mt-4 text-base text-gray-500 dark:text-gray-300 text-center"> | |
| Pay only for the WiFi you use | |
| </p> | |
| <div class="mt-6"> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700 dark:text-gray-300"> | |
| Access to all WiFi hotspots | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700 dark:text-gray-300"> | |
| Pay-as-you-go with M-Pesa | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700 dark:text-gray-300"> | |
| Token durations from 30min to 24hr | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700 dark:text-gray-300"> | |
| Real-time connection monitoring | |
| </p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600 text-center"> | |
| <button onclick="toggleRegisterModal()" class="w-full flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Vendor Plan --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform scale-105 z-10 border-2 border-indigo-500"> | |
| <div class="absolute top-0 right-0 bg-indigo-500 text-white text-xs font-bold px-3 py-1 transform translate-x-2 -translate-y-2 rotate-12"> | |
| POPULAR | |
| </div> | |
| <div class="px-6 py-8 sm:p-10"> | |
| <h3 class="text-2xl font-bold text-gray-900 dark:text-white text-center">WiFi Vendor</h3> | |
| <div class="mt-4 flex items-center justify-center"> | |
| <span class="text-5xl font-extrabold text-gray-900 dark:text-white">KSh 2,500</span> | |
| <span class="ml-2 text-xl font-medium text-gray-500 dark:text-gray-300">/month</span> | |
| </div> | |
| <p class="mt-4 text-base text-gray-500 dark:text-gray-300 text-center"> | |
| Monetize your WiFi network | |
| </p> | |
| <div class="mt-6"> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700 dark:text-gray-300"> | |
| List unlimited hotspots | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700 dark:text-gray-300"> | |
| Real-time earnings dashboard | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700 dark:text-gray-300"> | |
| Custom pricing for your hotspots | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700 dark:text-gray-300"> | |
| Mikrotik & UniFi integration | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700 dark:text-gray-300"> | |
| Priority customer support | |
| </p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600 text-center"> | |
| <button onclick="toggleRegisterModal('vendor')" class="w-full flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700"> | |
| Become a Vendor | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl"> | |
| <div class="px-6 py-8 sm:p-10"> | |
| <h3 class="text-2xl font-bold text-gray-900 dark:text-white text-center">Enterprise</h3> | |
| <div class="mt-4 flex items-center justify-center"> | |
| <span class="text-5xl font-extrabold text-gray-900 dark:text-white">Custom</span> | |
| </div> | |
| <p class="mt-4 text-base text-gray-500 dark:text-gray-300 text-center"> | |
| For large-scale deployments | |
| </p> | |
| <div class="mt-6"> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700 dark:text-gray-300"> | |
| Multiple location management | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700 dark:text-gray-300"> | |
| White-label solution | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700 dark:text-gray-300"> | |
| API access & custom integrations | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700 dark:text-gray-300"> | |
| Dedicated account manager | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700 dark:text-gray-300"> | |
| Bulk user management | |
| </p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600 text-center"> | |
| <button onclick="toggleContactModal()" class="w-full flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700"> | |
| Contact Sales | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gray-50 dark:bg-gray-800 rounded-xl"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl"> | |
| What Our Users Say | |
| </h2> | |
| <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-300 sm:mt-4"> | |
| Trusted by thousands of users and vendors across Kenya | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah K."> | |
| <div> | |
| <h4 class="text-lg font-medium text-gray-900 dark:text-white">Sarah K.</h4> | |
| <p class="text-indigo-600 dark:text-indigo-400">Nairobi</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300"> | |
| "As a digital nomad, WiFiLink has been a game-changer. I can work from anywhere in Nairobi without worrying about expensive data bundles." | |
| </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> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="James M."> | |
| <div> | |
| <h4 class="text-lg font-medium text-gray-900 dark:text-white">James M.</h4> | |
| <p class="text-indigo-600 dark:text-indigo-400">Cyber Cafe Owner</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300"> | |
| "Since listing my cyber cafe on WiFiLink, my customer base has grown by 40%. The payment system is seamless and I get paid instantly." | |
| </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> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Amina W."> | |
| <div> | |
| <h4 class="text-lg font-medium text-gray-900 dark:text-white">Amina W.</h4> | |
| <p class="text-indigo-600 dark:text-indigo-400">Mombasa</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300"> | |
| "The app is so easy to use. I can buy WiFi tokens for my kids when they're studying at the library without giving them cash." | |
| </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> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="gradient-bg rounded-2xl px-6 py-16 sm:p-16"> | |
| <div class="max-w-xl mx-auto lg:max-w-none lg:flex lg:items-center lg:justify-between"> | |
| <div> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Ready to get started? | |
| </h2> | |
| <p class="mt-3 max-w-3xl text-lg leading-6 text-indigo-100"> | |
| Join thousands of Kenyans enjoying affordable, reliable WiFi access today. | |
| </p> | |
| </div> | |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <button onclick="toggleRegisterModal()" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50"> | |
| Sign up for free | |
| </button> | |
| </div> | |
| <div class="ml-3 inline-flex rounded-md shadow"> | |
| <button onclick="toggleContactModal()" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70"> | |
| Contact sales | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 pt-12 pb-8 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-2 gap-8 md:grid-cols-4"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Product</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Features</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Hotspots</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Legal</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Terms</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Cookie Policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Twitter</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Facebook</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Instagram</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">LinkedIn</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between"> | |
| <div class="flex space-x-6 md:order-2"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| </div> | |
| <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1"> | |
| © 2023 WiFiLink Kenya. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Login Modal --> | |
| <div id="auth-modal" class="fixed z-50 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true"> | |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="toggleAuthModal()"></div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full sm:p-6"> | |
| <div> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 dark:bg-indigo-900"> | |
| <i class="fas fa-sign-in-alt text-indigo-600 dark:text-indigo-300"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-5"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title"> | |
| Sign in to your account | |
| </h3> | |
| <div class="mt-2"> | |
| <p class="text-sm text-gray-500 dark:text-gray-300"> | |
| Enter your credentials to access your WiFiLink account. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-5 sm:mt-6"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label> | |
| <div class="mt-1"> | |
| <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label> | |
| <div class="mt-1"> | |
| <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 rounded"> | |
| <label for="remember-me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Remember me</label> | |
| </div> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Forgot your password?</a> | |
| </div> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Sign in | |
| </button> | |
| </div> | |
| </form> | |
| <div class="mt-6"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 flex items-center"> | |
| <div class="w-full border-t border-gray-300 dark:border-gray-600"></div> | |
| </div> | |
| <div class="relative flex justify-center text-sm"> | |
| <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400"> | |
| Or continue with | |
| </span> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-2 gap-3"> | |
| <div> | |
| <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fab fa-google text-red-500"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fab fa-apple"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <p class="text-sm text-gray-500 dark:text-gray-400"> | |
| Don't have an account? | |
| <button onclick="toggleRegisterModal()" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Register now</button> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Register Modal --> | |
| <div id="register-modal" class="fixed z-50 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true"> | |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="toggleRegisterModal()"></div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full sm:p-6"> | |
| <div> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 dark:bg-indigo-900"> | |
| <i class="fas fa-user-plus text-indigo-600 dark:text-indigo-300"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-5"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title"> | |
| Create your account | |
| </h3> | |
| <div class="mt-2"> | |
| <p class="text-sm text-gray-500 dark:text-gray-300"> | |
| Join WiFiLink Kenya today to access thousands of WiFi hotspots. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-5 sm:mt-6"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full name</label> | |
| <div class="mt-1"> | |
| <input id="full-name" name="full-name" type="text" autocomplete="name" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label> | |
| <div class="mt-1"> | |
| <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Phone number (M-Pesa)</label> | |
| <div class="mt-1"> | |
| <input id="phone" name="phone" type="tel" autocomplete="tel" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label> | |
| <div class="mt-1"> | |
| <input id="password" name="password" type="password" autocomplete="new-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label> | |
| <div class="mt-1"> | |
| <input id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 rounded" required> | |
| <label for="terms" class="ml-2 block text-sm text-gray-700 dark:text-gray-300"> | |
| I agree to the <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Terms of Service</a> and <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Privacy Policy</a> | |
| </label> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Create account | |
| </button> | |
| </div> | |
| </form> | |
| <div class="mt-6"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 flex items-center"> | |
| <div class="w-full border-t border-gray-300 dark:border-gray-600"></div> | |
| </div> | |
| <div class="relative flex justify-center text-sm"> | |
| <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400"> | |
| Or sign up with | |
| </span> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-2 gap-3"> | |
| <div> | |
| <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fab fa-google text-red-500"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fab fa-apple"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <p class="text-sm text-gray-500 dark:text-gray-400"> | |
| Already have an account? | |
| <button onclick="toggleAuthModal()" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Sign in</button> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Modal --> | |
| <div id="contact-modal" class="fixed z-50 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true"> | |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="toggleContactModal()"></div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full sm:p-6"> | |
| <div> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 dark:bg-indigo-900"> | |
| <i class="fas fa-envelope text-indigo-600 dark:text-indigo-300"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-5"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title"> | |
| Contact our sales team | |
| </h3> | |
| <div class="mt-2"> | |
| <p class="text-sm text-gray-500 dark:text-gray-300"> | |
| Fill out the form below and we'll get back to you shortly. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-5 sm:mt-6"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="contact-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Your name</label> | |
| <div class="mt-1"> | |
| <input id="contact-name" name="contact-name" type="text" autocomplete="name" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="contact-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label> | |
| <div class="mt-1"> | |
| <input id="contact-email" name="contact-email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="contact-phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Phone number</label> | |
| <div class="mt-1"> | |
| <input id="contact-phone" name="contact-phone" type="tel" autocomplete="tel" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="contact-company" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Company (optional)</label> | |
| <div class="mt-1"> | |
| <input id="contact-company" name="contact-company" type="text" class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="contact-message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label> | |
| <div class="mt-1"> | |
| <textarea id="contact-message" name="contact-message" rows="4" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea> | |
| </div> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Send message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Token Purchase Modal --> | |
| <div id="token-modal" class="fixed z-50 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true"> | |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="hideTokenModal()"></div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full sm:p-6"> | |
| <div> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 dark:bg-indigo-900"> | |
| <i class="fas fa-wifi text-indigo-600 dark:text-indigo-300"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-5"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title"> | |
| Purchase WiFi Token | |
| </h3> | |
| <div class="mt-2"> | |
| <p class="text-sm text-gray-500 dark:text-gray-300"> | |
| Select your preferred duration and payment method. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-5 sm:mt-6"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Select Duration</label> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="token-duration-btn flex flex-col items-center justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <span>30 Minutes</span> | |
| <span class="text-indigo-600 dark:text-indigo-400 font-bold">KSh 50</span> | |
| </button> | |
| <button class="token-duration-btn flex flex-col items-center justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <span>1 Hour</span> | |
| <span class="text-indigo-600 dark:text-indigo-400 font-bold">KSh 80</span> | |
| </button> | |
| <button class="token-duration-btn flex flex-col items-center justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <span>3 Hours</span> | |
| <span class="text-indigo-600 dark:text-indigo-400 font-bold">KSh 200</span> | |
| </button> | |
| <button class="token-duration-btn flex flex-col items-center justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <span>24 Hours</span> | |
| <span class="text-indigo-600 dark:text-indigo-400 font-bold">KSh 500</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Payment Method</ | |
| <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=Ghost9126/autoreel" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |