| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>RunPulse | Track Your Running Passion</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#3B82F6', |
| secondary: '#10B981', |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Poppins', sans-serif; |
| } |
| .hero-gradient { |
| background: linear-gradient(135deg, rgba(59,130,246,0.9) 0%, rgba(16,185,129,0.8) 100%); |
| } |
| .run-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); |
| } |
| .pace-meter { |
| background: conic-gradient(#10B981 0% 70%, #E5E7EB 70% 100%); |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div id="vanta-bg" class="fixed inset-0 -z-10"></div> |
| |
| |
| <nav class="bg-white/90 backdrop-blur-md fixed w-full shadow-sm 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 data-feather="activity" class="text-primary h-6 w-6"></i> |
| <span class="ml-2 text-xl font-bold text-gray-900">RunPulse</span> |
| </div> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
| <a href="#" class="text-primary font-medium px-3 py-2 rounded-md">Home</a> |
| <a href="#" class="text-gray-600 hover:text-primary font-medium px-3 py-2 rounded-md">Training</a> |
| <a href="#" class="text-gray-600 hover:text-primary font-medium px-3 py-2 rounded-md">Events</a> |
| <a href="#" class="text-gray-600 hover:text-primary font-medium px-3 py-2 rounded-md">Community</a> |
| <a href="#" class="text-gray-600 hover:text-primary font-medium px-3 py-2 rounded-md">Stats</a> |
| <button class="bg-primary text-white px-4 py-2 rounded-full font-medium hover:bg-primary/90 transition">Sign In</button> |
| </div> |
| <div class="-mr-2 flex items-center md: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"> |
| <i data-feather="menu" class="h-6 w-6"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="relative pt-32 pb-20 px-4 sm:px-6 lg:px-8"> |
| <div class="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 font-extrabold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl"> |
| <span class="block">Elevate Your</span> |
| <span class="block text-primary">Running Journey</span> |
| </h1> |
| <p class="mt-3 text-lg text-gray-600 sm:mt-5"> |
| Track, analyze and improve your running performance with our comprehensive platform designed for passionate runners like you. |
| </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-4"> |
| <button class="bg-primary text-white px-6 py-3 rounded-full font-medium hover:bg-primary/90 transition shadow-lg"> |
| Start Running Now |
| </button> |
| <button class="bg-secondary text-white px-6 py-3 rounded-full font-medium hover:bg-secondary/90 transition shadow-lg"> |
| Join Community |
| </button> |
| </div> |
| </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 overflow-hidden"> |
| <img class="w-full" src="http://static.photos/sport/640x360/42" alt="Runner on track"> |
| <div class="absolute bottom-0 left-0 right-0 hero-gradient px-4 py-3"> |
| <p class="text-white font-medium">"Running is not just exercise, it's a lifestyle"</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-white/80 backdrop-blur-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-primary/10 text-primary"> |
| <i data-feather="watch" class="h-6 w-6"></i> |
| </div> |
| <h3 class="mt-2 text-xl font-bold text-gray-900">2,458</h3> |
| <p class="mt-1 text-gray-600">Hours Tracked</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-secondary/10 text-secondary"> |
| <i data-feather="map" class="h-6 w-6"></i> |
| </div> |
| <h3 class="mt-2 text-xl font-bold text-gray-900">8,752</h3> |
| <p class="mt-1 text-gray-600">Kilometers Logged</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-primary/10 text-primary"> |
| <i data-feather="users" class="h-6 w-6"></i> |
| </div> |
| <h3 class="mt-2 text-xl font-bold text-gray-900">15,627</h3> |
| <p class="mt-1 text-gray-600">Active Runners</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-secondary/10 text-secondary"> |
| <i data-feather="award" class="h-6 w-6"></i> |
| </div> |
| <h3 class="mt-2 text-xl font-bold text-gray-900">342</h3> |
| <p class="mt-1 text-gray-600">Events Completed</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-4 sm:px-6 lg:px-8"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center"> |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
| Features Designed for Runners |
| </h2> |
| <p class="mt-3 max-w-2xl mx-auto text-lg text-gray-600"> |
| Everything you need to take your running to the next level |
| </p> |
| </div> |
| <div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> |
| |
| <div class="bg-white p-8 rounded-xl shadow-md run-card transition duration-300"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white"> |
| <i data-feather="bar-chart-2" class="h-6 w-6"></i> |
| </div> |
| <h3 class="mt-4 text-lg font-medium text-gray-900">Advanced Analytics</h3> |
| <p class="mt-2 text-gray-600"> |
| Detailed performance metrics to help you understand your progress and identify areas for improvement. |
| </p> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-md run-card transition duration-300"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary text-white"> |
| <i data-feather="compass" class="h-6 w-6"></i> |
| </div> |
| <h3 class="mt-4 text-lg font-medium text-gray-900">Route Planning</h3> |
| <p class="mt-2 text-gray-600"> |
| Discover and create running routes tailored to your preferences and fitness level. |
| </p> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-md run-card transition duration-300"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white"> |
| <i data-feather="calendar" class="h-6 w-6"></i> |
| </div> |
| <h3 class="mt-4 text-lg font-medium text-gray-900">Training Plans</h3> |
| <p class="mt-2 text-gray-600"> |
| Personalized training programs designed by professional coaches for all skill levels. |
| </p> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-md run-card transition duration-300"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary text-white"> |
| <i data-feather="heart" class="h-6 w-6"></i> |
| </div> |
| <h3 class="mt-4 text-lg font-medium text-gray-900">Health Tracking</h3> |
| <p class="mt-2 text-gray-600"> |
| Monitor your heart rate, calories burned, and other vital health metrics. |
| </p> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-md run-card transition duration-300"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white"> |
| <i data-feather="users" class="h-6 w-6"></i> |
| </div> |
| <h3 class="mt-4 text-lg font-medium text-gray-900">Run Clubs</h3> |
| <p class="mt-2 text-gray-600"> |
| Connect with local runners, join challenges, and stay motivated together. |
| </p> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-md run-card transition duration-300"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary text-white"> |
| <i data-feather="award" class="h-6 w-6"></i> |
| </div> |
| <h3 class="mt-4 text-lg font-medium text-gray-900">Race Prep</h3> |
| <p class="mt-2 text-gray-600"> |
| Specialized programs to help you prepare for your next 5K, 10K, half marathon or marathon. |
| </p> |
| </div> |
| </div> |
| </div> |
| </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="lg:grid lg:grid-cols-12 lg:gap-8"> |
| <div class="lg:col-span-5"> |
| <h2 class="text-3xl font-extrabold text-gray-900"> |
| Your Running Performance at a Glance |
| </h2> |
| <p class="mt-3 text-lg text-gray-600"> |
| Our intuitive dashboard gives you immediate insights into your training progress, achievements, and areas for improvement. |
| </p> |
| <div class="mt-8 space-y-4"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-6 w-6 rounded-md bg-primary text-white"> |
| <i data-feather="check" class="h-4 w-4"></i> |
| </div> |
| </div> |
| <div class="ml-3"> |
| <p class="text-base text-gray-700"> |
| Track your pace, distance, and elevation across all your runs |
| </p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-6 w-6 rounded-md bg-primary text-white"> |
| <i data-feather="check" class="h-4 w-4"></i> |
| </div> |
| </div> |
| <div class="ml-3"> |
| <p class="text-base text-gray-700"> |
| Visualize your progress with interactive charts and graphs |
| </p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="flex items-center justify-center h-6 w-6 rounded-md bg-primary text-white"> |
| <i data-feather="check" class="h-4 w-4"></i> |
| </div> |
| </div> |
| <div class="ml-3"> |
| <p class="text-base text-gray-700"> |
| Compare your performance over weeks, months, or years |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-10 lg:mt-0 lg:col-span-7"> |
| <div class="bg-white rounded-xl shadow-xl overflow-hidden"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center"> |
| <h3 class="text-lg font-medium text-gray-900">This Week's Summary</h3> |
| <span class="px-3 py-1 rounded-full text-sm font-medium bg-secondary/10 text-secondary">Active</span> |
| </div> |
| <div class="mt-6 grid grid-cols-3 gap-4"> |
| <div class="text-center"> |
| <p class="text-2xl font-bold text-primary">28.6</p> |
| <p class="text-sm text-gray-600">Kilometers</p> |
| </div> |
| <div class="text-center"> |
| <p class="text-2xl font-bold text-primary">4</p> |
| <p class="text-sm text-gray-600">Runs</p> |
| </div> |
| <div class="text-center"> |
| <p class="text-2xl font-bold text-primary">5:42</p> |
| <p class="text-sm text-gray-600">Avg Pace (min/km)</p> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <div class="h-4 bg-gray-200 rounded-full overflow-hidden"> |
| <div class="h-full bg-primary rounded-full" style="width: 75%;"></div> |
| </div> |
| <div class="mt-2 flex justify-between text-sm text-gray-600"> |
| <span>Weekly Goal: 35km</span> |
| <span>75% Completed</span> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <div class="relative h-40"> |
| <div class="pace-meter absolute inset-0 rounded-xl flex items-center justify-center"> |
| <div class="bg-white h-28 w-28 rounded-full flex items-center justify-center shadow-inner"> |
| <div class="text-center"> |
| <p class="text-2xl font-bold text-gray-900">5:42</p> |
| <p class="text-xs text-gray-600">min/km</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-4 sm:px-6 lg:px-8"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center"> |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
| What Runners Say |
| </h2> |
| <p class="mt-3 max-w-2xl mx-auto text-lg text-gray-600"> |
| Join thousands of runners who improved their performance with RunPulse |
| </p> |
| </div> |
| <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> |
| <div class="bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center"> |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Sarah J."> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-gray-900">Sarah J.</h4> |
| <p class="text-sm text-gray-600">Marathon Runner</p> |
| </div> |
| </div> |
| <p class="mt-4 text-gray-600"> |
| "RunPulse helped me shave 15 minutes off my marathon PB! The training plans are fantastic and the community support kept me motivated." |
| </p> |
| <div class="mt-4 flex text-yellow-400"> |
| <i data-feather="star" class="h-5 w-5 fill-current"></i> |
| <i data-feather="star" class="h-5 w-5 fill-current"></i> |
| <i data-feather="star" class="h-5 w-5 fill-current"></i> |
| <i data-feather="star" class="h-5 w-5 fill-current"></i> |
| <i data-feather="star" class="h-5 w-5 fill-current"></i> |
| </div> |
| </div> |
| <div class="bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center"> |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="Michael T."> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-gray-900">Michael T.</h4> |
| <p class="text-sm text-gray-600">Trail Runner</p> |
| </div> |
| </div> |
| <p class="mt-4 text-gray-600"> |
| "The route planning feature is a game-changer for my trail runs. I've discovered so many new paths I never knew existed near me." |
| </p> |
| <div class="mt-4 flex text-yellow-400"> |
| <i data-feather="star" class="h-5 w-5 fill-current"></i> |
| <i data-feather="star" class="h-5 w-5 fill-current"></i> |
| <i data-feather="star" class="h-5 w-5 fill-current"></i> |
| <i data-feather="star" class="h-5 w-5 fill-current"></i> |
| <i data-feather="star" class="h-5 w-5 fill-current"></i> |
| </div> |
| </div> |
| <div class="bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center"> |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/3" alt="Lisa M."> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium text-gray-900">Lisa M.</h4> |
| <p class="text-sm text-gray-600">Beginner Runner</p> |
| </div> |
| </div> |
| <p class="mt-4 text-gray-600"> |
| "As a beginner, I was intimidated but the beginner-friendly plans and supportive community made all the difference. I just completed my first 5K!" |
| </p> |
| <div class="mt-4 flex text-yellow-400"> |
| <i data-feather="star" class="h-5 w-5 fill-current"></i> |
| <i data-feather="star" class="h-5 w-5 fill-current"></i> |
| <i data-feather="star" class="h-5 w-5 fill-current"></i> |
| <i data-feather="star" class="h-5 w-5 fill-current"></i> |
| <i data-feather="star" class="h-5 w-5"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 px-4 sm:px-6 lg:px-8 bg-primary text-white"> |
| <div class="max-w-7xl mx-auto text-center"> |
| <h2 class="text-3xl font-extrabold sm:text-4xl"> |
| Ready to Take Your Running to the Next Level? |
| </h2> |
| <p class="mt-4 text-xl"> |
| Join RunPulse today and start tracking your progress like never before |
| </p> |
| <div class="mt-8 flex justify-center"> |
| <button class="bg-white text-primary px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition shadow-xl"> |
| Get Started - It's Free |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white"> |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-lg font-medium">RunPulse</h3> |
| <p class="mt-4 text-sm text-gray-400"> |
| Empowering runners to achieve their goals through technology and community. |
| </p> |
| <div class="mt-4 flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="facebook" class="h-5 w-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="twitter" class="h-5 w-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="instagram" class="h-5 w-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="youtube" class="h-5 w-5"></i> |
| </a> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-lg font-medium">Features</h3> |
| <ul class="mt-4 space-y-2"> |
| <li><a href="#" class="text-sm text-gray-400 hover:text-white">Running Tracker</a></li> |
| <li><a href="#" class="text-sm text-gray-400 hover:text-white">Training Plans</a></li> |
| <li><a href="#" class="text-sm text-gray-400 hover:text-white">Route Planner</a></li> |
| <li><a href="#" class="text-sm text-gray-400 hover:text-white">Race Finder</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-medium">Company</h3> |
| <ul class="mt-4 space-y-2"> |
| <li><a href="#" class="text-sm text-gray-400 hover:text-white">About Us</a></li> |
| <li><a href="#" class="text-sm text-gray-400 hover:text-white">Careers</a></li> |
| <li><a href="#" class="text-sm text-gray-400 hover:text-white">Blog</a></li> |
| <li><a href="#" class="text-sm text-gray-400 hover:text-white">Press</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-medium">Support</h3> |
| <ul class="mt-4 space-y-2"> |
| <li><a href="#" class="text-sm text-gray-400 hover:text-white">Help Center</a></li> |
| <li><a href="#" class="text-sm text-gray-400 hover:text-white">Contact Us</a></li> |
| <li><a href="#" class="text-sm text-gray-400 hover:text-white">Privacy Policy</a></li> |
| <li><a href="#" class="text-sm text-gray-400 hover:text-white">Terms of Service</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between"> |
| <p class="text-sm text-gray-400"> |
| © 2023 RunPulse. All rights reserved. |
| </p> |
| <div class="mt-4 md:mt-0"> |
| <p class="text-sm text-gray-400"> |
| Made with <i data-feather="heart" class="h-4 w-4 inline text-red-500"></i> for runners everywhere |
| </p> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| VANTA.WAVES({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x3b82f6, |
| shininess: 35.00, |
| waveHeight: 15.00, |
| waveSpeed: 0.75, |
| zoom: 0.85 |
| }); |
| |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
