Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SkillUp Nigeria - Collaborative Learning Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%); | |
| } | |
| .feature-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); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%); | |
| } | |
| .btn-primary:hover { | |
| background: linear-gradient(90deg, #4338ca 0%, #6d28d9 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50" id="how-it-works"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm 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 data-feather="book-open" class="text-indigo-600 h-8 w-8"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">SkillUp Nigeria</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#features" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Features</a> | |
| <a href="#how-it-works" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">How It Works</a> | |
| <a href="#leaderboards" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Leaderboards</a> | |
| <a href="#about" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">About</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <a href="register.html" class="btn-primary text-white px-4 py-2 rounded-md text-sm font-medium shadow-sm hover:shadow-md transition duration-300">Get Started</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient pt-24 pb-20 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="md:w-1/2" data-aos="fade-right"> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-6">Learn Together, Grow Together</h1> | |
| <p class="text-xl text-indigo-100 mb-8">Nigeria's first collaborative quiz platform where students create questions, form study groups, and compete on leaderboards.</p> | |
| <div class="flex space-x-4"> | |
| <a href="register.html" class="btn-primary text-white px-6 py-3 rounded-md text-lg font-medium shadow-lg hover:shadow-xl transition duration-300">Join Now</a> | |
| <a href="#how-it-works" class="bg-white text-indigo-600 px-6 py-3 rounded-md text-lg font-medium shadow-lg hover:shadow-xl transition duration-300">How It Works</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 mt-10 md:mt-0" data-aos="fade-left"> | |
| <img src="http://static.photos/education/1200x630/1" alt="Students learning together" class="rounded-lg shadow-2xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Powerful Features for Collaborative Learning</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Everything you need to make learning interactive and fun</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mb-6"> | |
| <i data-feather="edit-2" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Question Contribution</h3> | |
| <p class="text-gray-500">Students contribute 5-10 questions per subject, building a rich knowledge base together.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-600 mb-6"> | |
| <i data-feather="users" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Dynamic Groups</h3> | |
| <p class="text-gray-500">Form study cohorts of 5 students who've submitted questions on the same topic.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-6"> | |
| <i data-feather="award" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Competitive Quizzes</h3> | |
| <p class="text-gray-500">Test your knowledge with quizzes generated from your group's combined questions.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-6"> | |
| <i data-feather="clock" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Timed Challenges</h3> | |
| <p class="text-gray-500">10-minute prep time followed by dynamic quiz durations based on question count.</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-100 text-yellow-600 mb-6"> | |
| <i data-feather="bar-chart-2" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">Group Leaderboards</h3> | |
| <p class="text-gray-500">See how you rank against your peers immediately after each quiz.</p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-100 text-red-600 mb-6"> | |
| <i data-feather="globe" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-3">National Rankings</h3> | |
| <p class="text-gray-500">Compete for the top spot on weekly state and national leaderboards.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 id="how-it-works" class="text-3xl font-extrabold text-gray-900 sm:text-4xl">How SkillUp Nigeria Works</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Three simple steps to collaborative learning success</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Step 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-100 text-indigo-600 mb-6 mx-auto"> | |
| <span class="text-2xl font-bold">1</span> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-900 mb-3 text-center">Create Your Questions</h3> | |
| <p class="text-gray-500 text-center">Register and contribute 5-10 questions on subjects you've studied. Tag them by subject and specific topic.</p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-green-100 text-green-600 mb-6 mx-auto"> | |
| <span class="text-2xl font-bold">2</span> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-900 mb-3 text-center">Form Your Study Group</h3> | |
| <p class="text-gray-500 text-center">Be the first to submit questions on a topic to initiate a group, or accept invitations to join existing groups.</p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-purple-100 text-purple-600 mb-6 mx-auto"> | |
| <span class="text-2xl font-bold">3</span> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-900 mb-3 text-center">Take the Quiz & Compete</h3> | |
| <p class="text-gray-500 text-center">After 10 minutes of prep time, take the quiz with questions from all group members and see your ranking!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">What Students Are Saying</h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Hear from students who've improved their learning with SkillUp Nigeria</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-8 rounded-xl" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Amina"> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Amina</h4> | |
| <p class="text-indigo-600">SS2 Student, Lagos</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Creating questions helped me understand topics better. The group quizzes are so much fun and really test my knowledge!"</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-8 rounded-xl" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="Chike"> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Chike</h4> | |
| <p class="text-indigo-600">JSS3 Student, Enugu</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"I love competing on the leaderboards. Seeing my name move up each week motivates me to study harder."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-8 rounded-xl" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/3" alt="Fatima"> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Fatima</h4> | |
| <p class="text-indigo-600">Primary 6 Student, Kano</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Learning with friends makes studying enjoyable. We help each other understand difficult topics through our questions."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="hero-gradient py-16 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center" data-aos="zoom-in"> | |
| <h2 class="text-3xl font-extrabold sm:text-4xl mb-6">Ready to Transform Your Learning Experience?</h2> | |
| <p class="text-xl text-indigo-100 mb-8 max-w-3xl mx-auto">Join thousands of Nigerian students who are making learning collaborative, competitive, and fun.</p> | |
| <a href="register.html" class="inline-block bg-white text-indigo-600 px-8 py-3 rounded-md text-lg font-medium shadow-lg hover:shadow-xl transition duration-300">Sign Up Now - It's Free!</a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">SkillUp Nigeria</h3> | |
| <p class="text-gray-400">Empowering Nigerian students through collaborative learning and friendly competition.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li> | |
| <li><a href="#how-it-works" class="text-gray-400 hover:text-white">How It Works</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Leaderboards</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Support</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li> | |
| <li><a href="contact.html" class="text-gray-400 hover:text-white">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Connect With Us</h3> | |
| <div class="flex space-x-4"> | |
| <a href="https://facebook.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a> | |
| <a href="https://twitter.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a> | |
| <a href="https://instagram.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a> | |
| <a href="https://linkedin.com" target="_blank" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 SkillUp Nigeria. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |