Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VibeFlow - AI-Powered Project Management</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-slide { | |
| opacity: 0; | |
| transition: opacity 0.5s ease; | |
| } | |
| .testimonial-slide.active { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white/90 backdrop-blur-sm z-50 shadow-sm"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 bg-sky-500 rounded-lg"></div> | |
| <span class="text-xl font-bold text-gray-800">VibeFlow</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#features" class="text-gray-600 hover:text-sky-500 transition-colors">Features</a> | |
| <a href="#pricing" class="text-gray-600 hover:text-sky-500 transition-colors">Pricing</a> | |
| <a href="#testimonials" class="text-gray-600 hover:text-sky-500 transition-colors">Testimonials</a> | |
| <a href="#faq" class="text-gray-600 hover:text-sky-500 transition-colors">FAQ</a> | |
| <a href="#contact" class="text-gray-600 hover:text-sky-500 transition-colors">Contact</a> | |
| </div> | |
| <button class="bg-sky-500 hover:bg-sky-600 text-white px-6 py-2 rounded-lg font-medium transition-colors"> | |
| Start Free Trial | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center justify-center overflow-hidden"> | |
| <div id="vanta-bg" class="vanta-bg"></div> | |
| <div class="container mx-auto px-6 text-center z-10"> | |
| <h1 class="text-5xl md:text-7xl font-bold text-gray-800 mb-6"> | |
| Revolutionize Your Project Management with AI | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto"> | |
| AI-driven insights, seamless collaboration, and project tracking in one powerful platform. | |
| </p> | |
| <button class="bg-emerald-500 hover:bg-emerald-600 text-white px-8 py-4 rounded-xl text-lg font-semibold transition-colors shadow-lg"> | |
| Start Free Trial | |
| </button> | |
| <div class="mt-12"> | |
| <img src="http://static.photos/technology/1024x576/42" alt="VibeFlow Dashboard" class="rounded-2xl shadow-2xl mx-auto max-w-4xl w-full"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center text-gray-800 mb-16">Powerful Features</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="feature-card bg-white p-8 rounded-2xl shadow-lg text-center"> | |
| <i data-feather="brain" class="w-16 h-16 text-sky-500 mx-auto mb-6"></i> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">AI-Powered Insights</h3> | |
| <p class="text-gray-600">Get intelligent predictions and recommendations for your projects</p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-2xl shadow-lg text-center"> | |
| <i data-feather="users" class="w-16 h-16 text-sky-500 mx-auto mb-6"></i> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Real-Time Collaboration</h3> | |
| <p class="text-gray-600">Work together seamlessly with your team in real-time</p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-2xl shadow-lg text-center"> | |
| <i data-feather="settings" class="w-16 h-16 text-sky-500 mx-auto mb-6"></i> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Task Automation</h3> | |
| <p class="text-gray-600">Automate repetitive tasks and focus on what matters</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center text-gray-800 mb-16">What Our Users Say</h2> | |
| <div class="max-w-4xl mx-auto relative"> | |
| <div id="testimonial-slider" class="overflow-hidden"> | |
| <div class="testimonial-slide active bg-gray-50 p-8 rounded-2xl text-center"> | |
| <p class="text-lg text-gray-600 mb-6">"VibeFlow transformed how our remote team collaborates. The AI insights helped us identify bottlenecks we didn't even know existed!"</p> | |
| <div class="flex items-center justify-center space-x-4"> | |
| <img src="http://static.photos/people/200x200/1" alt="Sarah Chen" class="w-12 h-12 rounded-full"> | |
| <div class="text-left"> | |
| <p class="font-semibold text-gray-800">Sarah Chen</p> | |
| <p class="text-gray-500">CTO at TechNova</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center space-x-2 mt-8"> | |
| <button class="w-3 h-3 bg-sky-500 rounded-full"></button> | |
| <button class="w-3 h-3 bg-gray-300 rounded-full"></button> | |
| <button class="w-3 h-3 bg-gray-300 rounded-full"></button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing --> | |
| <section id="pricing" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center text-gray-800 mb-16">Simple, Transparent Pricing</h2> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg text-center"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Basic</h3> | |
| <div class="text-4xl font-bold text-sky-500 mb-6">$0</div> | |
| <p class="text-gray-600 mb-6">Perfect for small teams getting started</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center text-gray-600"> | |
| <i data-feather="check" class="w-5 h-5 text-emerald-500 mr-2"></i> | |
| Up to 5 team members | |
| </li> | |
| <li class="flex items-center text-gray-600"> | |
| <i data-feather="check" class="w-5 h-5 text-emerald-500 mr-2"></i> | |
| Basic AI insights | |
| </li> | |
| </ul> | |
| <button class="w-full bg-sky-500 hover:bg-sky-600 text-white py-3 rounded-lg font-medium transition-colors"> | |
| Start Free Trial | |
| </button> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg text-center border-2 border-sky-500 relative"> | |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-sky-500 text-white px-4 py-1 rounded-full text-sm font-medium"> | |
| Most Popular | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Pro</h3> | |
| <div class="text-4xl font-bold text-sky-500 mb-6">$29<span class="text-lg text-gray-500">/month</span></div> | |
| <p class="text-gray-600 mb-6">Ideal for growing businesses</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center text-gray-600"> | |
| <i data-feather="check" class="w-5 h-5 text-emerald-500 mr-2"></i> | |
| Up to 50 team members | |
| </li> | |
| <li class="flex items-center text-gray-600"> | |
| <i data-feather="check" class="w-5 h-5 text-emerald-500 mr-2"></i> | |
| Advanced AI insights | |
| </li> | |
| </ul> | |
| <button class="w-full bg-emerald-500 hover:bg-emerald-600 text-white py-3 rounded-lg font-medium transition-colors"> | |
| Start Free Trial | |
| </button> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg text-center"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Enterprise</h3> | |
| <div class="text-4xl font-bold text-sky-500 mb-6">Custom</div> | |
| <p class="text-gray-600 mb-6">For large organizations</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center text-gray-600"> | |
| <i data-feather="check" class="w-5 h-5 text-emerald-500 mr-2"></i> | |
| Unlimited team members | |
| </li> | |
| <li class="flex items-center text-gray-600"> | |
| <i data-feather="check" class="w-5 h-5 text-emerald-500 mr-2"></i> | |
| Full AI capabilities | |
| </li> | |
| </ul> | |
| <button class="w-full bg-sky-500 hover:bg-sky-600 text-white py-3 rounded-lg font-medium transition-colors"> | |
| Contact Sales | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-sky-500"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-4xl font-bold text-white mb-6"> | |
| Ready to take your project management to the next level? | |
| </h2> | |
| <p class="text-xl text-sky-100 mb-8 max-w-2xl mx-auto"> | |
| Join thousands of teams already revolutionizing their workflow with VibeFlow | |
| </p> | |
| <button class="bg-emerald-500 hover:bg-emerald-600 text-white px-8 py-4 rounded-xl text-lg font-semibold transition-colors"> | |
| Start Your Free Trial Today | |
| </button> | |
| </div> | |
| </section> | |
| <!-- FAQ --> | |
| <section id="faq" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6 max-w-3xl"> | |
| <h2 class="text-4xl font-bold text-center text-gray-800 mb-16">Frequently Asked Questions</h2> | |
| <div class="space-y-6"> | |
| <div class="bg-gray-50 p-6 rounded-2xl"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">How does the free trial work?</h3> | |
| <p class="text-gray-600">Start with our Basic plan completely free for 14 days. No credit card required.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-2xl"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Can I cancel my subscription at any time?</h3> | |
| <p class="text-gray-600">Yes, you can cancel your subscription at any time with no hidden fees.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-2xl"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">What features are included in each plan?</h3> | |
| <p class="text-gray-600">All plans include core features. Higher tiers offer more team members and advanced AI capabilities.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact --> | |
| <section id="contact" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6 max-w-2xl"> | |
| <h2 class="text-4xl font-bold text-center text-gray-800 mb-16">Get In Touch</h2> | |
| <form class="bg-white p-8 rounded-2xl shadow-lg"> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2 font-medium">Name</label> | |
| <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="Your name"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2 font-medium">Email</label> | |
| <input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="Your email"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2 font-medium">Message</label> | |
| <textarea class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500" rows="4" placeholder="Your message"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-sky-500 hover:bg-sky-600 text-white py-3 rounded-lg font-medium transition-colors"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <div class="flex justify-center items-center space-x-2 mb-6"> | |
| <div class="w-6 h-6 bg-sky-500 rounded"></div> | |
| <span class="text-xl font-bold">VibeFlow</span> | |
| </div> | |
| <p class="text-gray-400 mb-4">Revolutionizing project management with AI</p> | |
| <p class="text-gray-500 text-sm">© 2024 VibeFlow. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js globe background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| backgroundColor: 0xffffff | |
| }); | |
| // Testimonial slider functionality | |
| let currentSlide = 0; | |
| const slides = document.querySelectorAll('.testimonial-slide'); | |
| function showSlide(index) { | |
| slides.forEach(slide => slide.classList.remove('active')); | |
| slides[index].classList.add('active'); | |
| } | |
| // Auto-rotate testimonials | |
| setInterval(() => { | |
| currentSlide = (currentSlide + 1) % slides.length; | |
| showSlide(currentSlide); | |
| }, 5000); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |