Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>POPULUS - The Ultimate Community Experience</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8f9fa; | |
| overflow-x: hidden; | |
| } | |
| .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); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .community-card { | |
| transition: all 0.3s ease; | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .community-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .avatar-ring { | |
| box-shadow: 0 0 0 3px #fff, 0 0 0 6px #667eea; | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: .15em solid #667eea; | |
| white-space: nowrap; | |
| animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #667eea; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <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-users text-purple-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">POPULUS</span> | |
| </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">Home</a> | |
| <a href="#features" 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">Features</a> | |
| <a href="#community" 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">Community</a> | |
| <a href="#testimonials" 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">Social Proof</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:scale-105"> | |
| Start Your Journey | |
| </button> | |
| </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" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> | |
| <span class="sr-only">Open main menu</span> | |
| <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="sm:hidden 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">Home</a> | |
| <a href="#features" 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">Features</a> | |
| <a href="#community" 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">Community</a> | |
| <a href="#testimonials" 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">Social Proof</a> | |
| <div class="mt-4 pl-3"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium w-full"> | |
| Start Your Journey | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6"> | |
| <span class="block">Build Your Tribe,</span> | |
| <span class="block typewriter">Earn Rewards, Grow Together</span> | |
| </h1> | |
| <p class="mt-6 max-w-lg mx-auto text-xl opacity-90"> | |
| POPULUS is where communities thrive. Connect with like-minded people, unlock exclusive perks, and let our AI assistants help you grow. | |
| </p> | |
| <div class="mt-10 flex justify-center space-x-4"> | |
| <button id="journey-btn" class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-4 rounded-full text-lg font-semibold shadow-lg transition duration-300 ease-in-out transform hover:scale-105 pulse"> | |
| Start Your Journey <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <button class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 text-white px-8 py-4 rounded-full text-lg font-semibold transition duration-300 ease-in-out transform hover:scale-105"> | |
| Watch Demo <i class="fas fa-play-circle ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-16 flex justify-center"> | |
| <div class="relative w-full max-w-4xl"> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl blur opacity-75"></div> | |
| <div class="relative bg-white rounded-2xl overflow-hidden shadow-xl"> | |
| <img src="https://images.unsplash.com/photo-1579389083078-4e7018379f7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="App dashboard" class="w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Journey Modal --> | |
| <div id="journey-modal" class="fixed inset-0 z-50 hidden overflow-y-auto"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </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 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-2xl leading-6 font-bold text-gray-900" id="modal-title"> | |
| Let's Find Your Perfect Communities | |
| </h3> | |
| <button id="close-modal" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <!-- Journey Steps --> | |
| <div class="journey-steps"> | |
| <!-- Step 1 --> | |
| <div id="step-1" class="step active"> | |
| <div class="mb-6"> | |
| <h4 class="text-lg font-medium mb-4">What are you passionate about?</h4> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="interest-btn bg-gray-100 hover:bg-purple-100 border border-gray-200 rounded-lg px-4 py-3 text-left transition-colors"> | |
| <i class="fas fa-laptop-code mr-2 text-purple-600"></i> Technology | |
| </button> | |
| <button class="interest-btn bg-gray-100 hover:bg-purple-100 border border-gray-200 rounded-lg px-4 py-3 text-left transition-colors"> | |
| <i class="fas fa-paint-brush mr-2 text-purple-600"></i> Art & Design | |
| </button> | |
| <button class="interest-btn bg-gray-100 hover:bg-purple-100 border border-gray-200 rounded-lg px-4 py-3 text-left transition-colors"> | |
| <i class="fas fa-dumbbell mr-2 text-purple-600"></i> Fitness | |
| </button> | |
| <button class="interest-btn bg-gray-100 hover:bg-purple-100 border border-gray-200 rounded-lg px-4 py-3 text-left transition-colors"> | |
| <i class="fas fa-utensils mr-2 text-purple-600"></i> Food & Cooking | |
| </button> | |
| <button class="interest-btn bg-gray-100 hover:bg-purple-100 border border-gray-200 rounded-lg px-4 py-3 text-left transition-colors"> | |
| <i class="fas fa-music mr-2 text-purple-600"></i> Music | |
| </button> | |
| <button class="interest-btn bg-gray-100 hover:bg-purple-100 border border-gray-200 rounded-lg px-4 py-3 text-left transition-colors"> | |
| <i class="fas fa-gamepad mr-2 text-purple-600"></i> Gaming | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button class="next-step bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-md"> | |
| Next <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div id="step-2" class="step hidden"> | |
| <div class="mb-6"> | |
| <h4 class="text-lg font-medium mb-4">How do you prefer to engage?</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input id="engage-live" name="engagement" type="radio" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300"> | |
| <label for="engage-live" class="ml-3 block text-gray-700"> | |
| <span class="font-medium">Live Events</span> - I love real-time interactions | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="engage-async" name="engagement" type="radio" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300"> | |
| <label for="engage-async" class="ml-3 block text-gray-700"> | |
| <span class="font-medium">Asynchronous</span> - I engage when I have time | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="engage-mixed" name="engagement" type="radio" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300"> | |
| <label for="engage-mixed" class="ml-3 block text-gray-700"> | |
| <span class="font-medium">Mixed</span> - A bit of both works for me | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="prev-step bg-gray-200 hover:bg-gray-300 text-gray-700 px-6 py-2 rounded-md"> | |
| <i class="fas fa-arrow-left mr-1"></i> Back | |
| </button> | |
| <button class="next-step bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-md"> | |
| Next <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div id="step-3" class="step hidden"> | |
| <div class="mb-6"> | |
| <h4 class="text-lg font-medium mb-4">What's your community personality?</h4> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button class="personality-btn bg-gray-100 hover:bg-purple-100 border border-gray-200 rounded-lg p-3 text-center transition-colors"> | |
| <i class="fas fa-user-friends text-2xl mb-2 text-purple-600"></i> | |
| <div>Social Butterfly</div> | |
| </button> | |
| <button class="personality-btn bg-gray-100 hover:bg-purple-100 border border-gray-200 rounded-lg p-3 text-center transition-colors"> | |
| <i class="fas fa-lightbulb text-2xl mb-2 text-purple-600"></i> | |
| <div>Idea Generator</div> | |
| </button> | |
| <button class="personality-btn bg-gray-100 hover:bg-purple-100 border border-gray-200 rounded-lg p-3 text-center transition-colors"> | |
| <i class="fas fa-hands-helping text-2xl mb-2 text-purple-600"></i> | |
| <div>Helper</div> | |
| </button> | |
| <button class="personality-btn bg-gray-100 hover:bg-purple-100 border border-gray-200 rounded-lg p-3 text-center transition-colors"> | |
| <i class="fas fa-chart-line text-2xl mb-2 text-purple-600"></i> | |
| <div>Analyst</div> | |
| </button> | |
| <button class="personality-btn bg-gray-100 hover:bg-purple-100 border border-gray-200 rounded-lg p-3 text-center transition-colors"> | |
| <i class="fas fa-grin-stars text-2xl mb-2 text-purple-600"></i> | |
| <div>Cheerleader</div> | |
| </button> | |
| <button class="personality-btn bg-gray-100 hover:bg-purple-100 border border-gray-200 rounded-lg p-3 text-center transition-colors"> | |
| <i class="fas fa-question text-2xl mb-2 text-purple-600"></i> | |
| <div>Not Sure</div> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="prev-step bg-gray-200 hover:bg-gray-300 text-gray-700 px-6 py-2 rounded-md"> | |
| <i class="fas fa-arrow-left mr-1"></i> Back | |
| </button> | |
| <button class="next-step bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-md"> | |
| Next <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 4 - Results --> | |
| <div id="step-4" class="step hidden"> | |
| <div class="text-center py-6"> | |
| <div class="mx-auto flex items-center justify-center h-24 w-24 rounded-full bg-purple-100 mb-4"> | |
| <i class="fas fa-check-circle text-5xl text-purple-600"></i> | |
| </div> | |
| <h4 class="text-xl font-bold mb-2">Perfect Match Found!</h4> | |
| <p class="text-gray-600 mb-6">Based on your answers, we've found these communities for you:</p> | |
| <div class="grid grid-cols-1 gap-4 mb-6"> | |
| <div class="border border-gray-200 rounded-lg p-4 flex items-center"> | |
| <div class="bg-purple-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-laptop-code text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h5 class="font-bold">Tech Innovators</h5> | |
| <p class="text-sm text-gray-500">12.4k members • Active discussions</p> | |
| </div> | |
| <button class="ml-auto bg-purple-600 hover:bg-purple-700 text-white px-4 py-1 rounded-full text-sm"> | |
| Join | |
| </button> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 flex items-center"> | |
| <div class="bg-purple-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-lightbulb text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h5 class="font-bold">Creative Thinkers</h5> | |
| <p class="text-sm text-gray-500">8.7k members • Weekly challenges</p> | |
| </div> | |
| <button class="ml-auto bg-purple-600 hover:bg-purple-700 text-white px-4 py-1 rounded-full text-sm"> | |
| Join | |
| </button> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 flex items-center"> | |
| <div class="bg-purple-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-users text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h5 class="font-bold">Community Builders</h5> | |
| <p class="text-sm text-gray-500">5.3k members • Networking events</p> | |
| </div> | |
| <button class="ml-auto bg-purple-600 hover:bg-purple-700 text-white px-4 py-1 rounded-full text-sm"> | |
| Join | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 rounded-lg p-4 mb-6"> | |
| <h5 class="font-bold text-purple-800 mb-2">Your Welcome Gift!</h5> | |
| <p class="text-sm text-purple-700 mb-3">Complete your profile to unlock:</p> | |
| <div class="flex items-center"> | |
| <i class="fas fa-gem text-purple-600 mr-2"></i> | |
| <span class="text-sm font-medium">100 POP Coins</span> | |
| <span class="mx-2 text-gray-400">•</span> | |
| <i class="fas fa-badge-check text-purple-600 mr-2"></i> | |
| <span class="text-sm font-medium">New Member Badge</span> | |
| <span class="mx-2 text-gray-400">•</span> | |
| <i class="fas fa-ticket-alt text-purple-600 mr-2"></i> | |
| <span class="text-sm font-medium">Exclusive Offers</span> | |
| </div> | |
| </div> | |
| <button class="w-full bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-md font-medium"> | |
| Complete Profile & Claim Rewards | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div id="features" class="py-16 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"> | |
| Everything you need to build thriving communities | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| POPULUS combines powerful tools with gamification and AI to create the ultimate community platform. | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> | |
| <!-- Feature 1 --> | |
| <div class="relative p-6 rounded-xl bg-white shadow-lg card-hover transition-all duration-300"> | |
| <div class="absolute -top-6 left-6 bg-purple-600 p-3 rounded-lg shadow-lg"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2 mt-4">AI Community Assistants</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Our AI agents help moderate discussions, suggest connections, and even create content tailored to your community's interests. | |
| </p> | |
| <div class="mt-4"> | |
| <button class="text-purple-600 hover:text-purple-800 font-medium text-sm flex items-center"> | |
| Learn more <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="relative p-6 rounded-xl bg-white shadow-lg card-hover transition-all duration-300"> | |
| <div class="absolute -top-6 left-6 bg-purple-600 p-3 rounded-lg shadow-lg"> | |
| <i class="fas fa-trophy text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2 mt-4">Gamification & Rewards</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Earn badges, level up, and collect POP coins for engagement. Redeem rewards from our partners or unlock exclusive features. | |
| </p> | |
| <div class="mt-4"> | |
| <button class="text-purple-600 hover:text-purple-800 font-medium text-sm flex items-center"> | |
| Learn more <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </html> |