Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>StartupLaunch Pro - Transform Your Ideas into Reality</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <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://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <style> | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c); | |
| background-size: 400% 400%; | |
| animation: gradient 15s ease infinite; | |
| } | |
| .float-animation { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .text-gradient { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .hover-lift { | |
| transition: all 0.3s ease; | |
| } | |
| .hover-lift:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 w-full bg-white/95 backdrop-blur-md shadow-sm z-50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <span class="text-2xl font-bold text-gradient">StartupLaunch Pro</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#features" class="text-gray-700 hover:text-purple-600 transition">Features</a> | |
| <a href="#solution" class="text-gray-700 hover:text-purple-600 transition">Solution</a> | |
| <a href="#team" class="text-gray-700 hover:text-purple-600 transition">Team</a> | |
| <a href="#press" class="text-gray-700 hover:text-purple-600 transition">Press</a> | |
| <button class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-6 py-2 rounded-full hover:shadow-lg transition"> | |
| Get Started | |
| </button> | |
| </div> | |
| <button class="md:hidden" id="mobileMenuBtn"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-20 px-6 gradient-bg relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-black/20"></div> | |
| <div class="container mx-auto relative z-10"> | |
| <div class="text-center text-white"> | |
| <div class="inline-block glass-effect px-4 py-2 rounded-full mb-6" data-aos="fade-down"> | |
| <span class="text-sm font-semibold">🎉 Launching Soon - Join Our Beta</span> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6" data-aos="fade-up"> | |
| Transform Your<br> | |
| <span class="text-yellow-300">Startup Dreams</span><br> | |
| Into Reality | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8 opacity-90 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| The all-in-one platform that helps entrepreneurs build, launch, and scale their startups with confidence and speed. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center" data-aos="fade-up" data-aos-delay="200"> | |
| <button class="bg-white text-purple-600 px-8 py-4 rounded-full font-semibold hover:shadow-xl transition transform hover:scale-105"> | |
| Start Free Trial | |
| </button> | |
| <button class="glass-effect text-white px-8 py-4 rounded-full font-semibold hover:bg-white/20 transition"> | |
| <i data-feather="play-circle" class="inline mr-2"></i> | |
| Watch Demo | |
| </button> | |
| </div> | |
| <div class="mt-12 float-animation" data-aos="zoom-in" data-aos-delay="300"> | |
| <img src="http://static.photos/technology/1200x630/42" alt="Product Dashboard" class="rounded-2xl shadow-2xl mx-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Problem-Solution Section --> | |
| <section class="py-20 px-6"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-12" data-aos="fade-up"> | |
| <h2 class="text-4xl font-bold mb-4"> | |
| <span class="text-gradient">Struggling</span> with Your Startup Journey? | |
| </h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| 90% of startups fail due to common pitfalls. We've built the solution to help you beat the odds. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div data-aos="fade-right"> | |
| <h3 class="text-2xl font-bold mb-6 text-red-600">The Problems You Face</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-3"> | |
| <i data-feather="alert-circle" class="text-red-500 mt-1"></i> | |
| <div> | |
| <h4 class="font-semibold">Limited Resources</h4> | |
| <p class="text-gray-600">Tight budgets and small teams make it hard to compete</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <i data-feather="clock" class="text-red-500 mt-1"></i> | |
| <div> | |
| <h4 class="font-semibold">Time Constraints</h4> | |
| <p class="text-gray-600">Racing against the clock to launch before competitors</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <i data-feather="users" class="text-red-500 mt-1"></i> | |
| <div> | |
| <h4 class="font-semibold">Finding Talent</h4> | |
| <p class="text-gray-600">Difficulty hiring the right people for your vision</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <h3 class="text-2xl font-bold mb-6 text-green-600">Our Solutions</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-3"> | |
| <i data-feather="check-circle" class="text-green-500 mt-1"></i> | |
| <div> | |
| <h4 class="font-semibold">Smart Automation</h4> | |
| <p class="text-gray-600">AI-powered tools that reduce manual work by 80%</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <i data-feather="zap" class="text-green-500 mt-1"></i> | |
| <div> | |
| <h4 class="font-semibold">Rapid Prototyping</h4> | |
| <p class="text-gray-600">Launch your MVP in weeks, not months</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <i data-feather="target" class="text-green-500 mt-1"></i> | |
| <div> | |
| <h4 class="font-semibold">Expert Network</h4> | |
| <p class="text-gray-600">Connect with mentors and investors instantly</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 px-6 bg-gray-100"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-12" data-aos="fade-up"> | |
| <h2 class="text-4xl font-bold mb-4"> | |
| Powerful <span class="text-gradient">Features</span> That Drive Success | |
| </h2> | |
| <p class="text-xl text-gray-600">Everything you need to launch and scale your startup</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-xl p-8 hover-lift" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="layers" class="text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">No-Code Builder</h3> | |
| <p class="text-gray-600 mb-4">Build your entire product without writing a single line of code</p> | |
| <img src="http://static.photos/technology/320x240/123" alt="No-Code Builder" class="rounded-lg"> | |
| </div> | |
| <div class="bg-white rounded-xl p-8 hover-lift" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-600 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="trending-up" class="text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Analytics Dashboard</h3> | |
| <p class="text-gray-600 mb-4">Track KPIs, user behavior, and growth metrics in real-time</p> | |
| <img src="http://static.photos/office/320x240/456" alt="Analytics" class="rounded-lg"> | |
| </div> | |
| <div class="bg-white rounded-xl p-8 hover-lift" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="users" class="text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Team Collaboration</h3> | |
| <p class="text-gray-600 mb-4">Seamlessly work with your team regardless of location</p> | |
| <img src="http://static.photos/workspace/320x240/789" alt="Team Collaboration" class="rounded-lg"> | |
| </div> | |
| <div class="bg-white rounded-xl p-8 hover-lift" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-red-500 to-orange-600 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="credit-card" class="text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Payment Processing</h3> | |
| <p class="text-gray-600 mb-4">Accept payments from anywhere in the world instantly</p> | |
| <img src="http://static.photos/finance/320x240/321" alt="Payments" class="rounded-lg"> | |
| </div> | |
| <div class="bg-white rounded-xl p-8 hover-lift" data-aos="fade-up" data-aos-delay="500"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-amber-600 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="shield" class="text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Enterprise Security</h3> | |
| <p class="text-gray-600 mb-4">Bank-level security to protect your data and customers</p> | |
| <img src="http://static.photos/technology/320x240/654" alt="Security" class="rounded-lg"> | |
| </div> | |
| <div class="bg-white rounded-xl p-8 hover-lift" data-aos="fade-up" data-aos-delay="600"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="globe" class="text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Global Deployment</h3> | |
| <p class="text-gray-600 mb-4">Deploy your application across 50+ regions worldwide</p> | |
| <img src="http://static.photos/technology/320x240/987" alt="Global Deployment" class="rounded-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Section --> | |
| <section id="team" class="py-20 px-6"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-12" data-aos="fade-up"> | |
| <h2 class="text-4xl font-bold mb-4"> | |
| Meet Our <span class="text-gradient">Amazing Team</span> | |
| </h2> | |
| <p class="text-xl text-gray-600">Passionate experts dedicated to your success</p> | |
| </div> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div class="text-center" data-aos="fade-up" data-aos-delay="100"> | |
| <img src="http://static.photos/people/200x200/101" alt="Team Member" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover"> | |
| <h3 class="font-bold text-lg">Sarah Johnson</h3> | |
| <p class="text-gray-600">CEO & Founder</p> | |
| <div class="flex justify-center space-x-3 mt-3"> | |
| <i data-feather="linkedin" class="w-4 h-4 text-gray-400 hover:text-blue-600 cursor-pointer"></i> | |
| <i data-feather="twitter" class="w-4 h-4 text-gray-400 hover:text-blue-400 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <div class="text-center" data-aos="fade-up" data-aos-delay="200"> | |
| <img src="http://static.photos/people/200x200/102" alt="Team Member" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover"> | |
| <h3 class="font-bold text-lg">Michael Chen</h3> | |
| <p class="text-gray-600">CTO</p> | |
| <div class="flex justify-center space-x-3 mt-3"> | |
| <i data-feather="linkedin" class="w-4 h-4 text-gray-400 hover:text-blue-600 cursor-pointer"></i> | |
| <i data-feather="twitter" class="w-4 h-4 text-gray-400 hover:text-blue-400 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <div class="text-center" data-aos="fade-up" data-aos-delay="300"> | |
| <img src="http://static.photos/people/200x200/103" alt="Team Member" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover"> | |
| <h3 class="font-bold text-lg">Emily Davis</h3> | |
| <p class="text-gray-600">Head of Design</p> | |
| <div class="flex justify-center space-x-3 mt-3"> | |
| <i data-feather="linkedin" class="w-4 h-4 text-gray-400 hover:text-blue-600 cursor-pointer"></i> | |
| <i data-feather="twitter" class="w-4 h-4 text-gray-400 hover:text-blue-400 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <div class="text-center" data-aos="fade-up" data-aos-delay="400"> | |
| <img src="http://static.photos/people/200x200/104" alt="Team Member" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover"> | |
| <h3 class="font-bold text-lg">David Park</h3> | |
| <p class="text-gray-600">Head of Growth</p> | |
| <div class="flex justify-center space-x-3 mt-3"> | |
| <i data-feather="linkedin" class="w-4 h-4 text-gray-400 hover:text-blue-600 cursor-pointer"></i> | |
| <i data-feather="twitter" class="w-4 h-4 text-gray-400 hover:text-blue-400 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Investors Section --> | |
| <section class="py-20 px-6 bg-gray-100"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-12" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-4"> | |
| Backed by <span class="text-gradient">Top Investors</span> | |
| </h2> | |
| <p class="text-xl text-gray-600">Trusted by leading venture capital firms</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center opacity-60"> | |
| <div class="text-center" data-aos="zoom-in" data-aos-delay="100"> | |
| <div class="bg-white p-8 rounded-lg shadow-sm"> | |
| <img src="http://static.photos/finance/200x100/201" alt="Investor Logo" class="mx-auto grayscale hover:grayscale-0 transition"> | |
| </div> | |
| </div> | |
| <div class="text-center" data-aos="zoom-in" data-aos-delay="200"> | |
| <div class="bg-white p-8 rounded-lg shadow-sm"> | |
| <img src="http://static.photos/finance/200x100/202" alt="Investor Logo" class="mx-auto grayscale hover:grayscale-0 transition"> | |
| </div> | |
| </div> | |
| <div class="text-center" data-aos="zoom-in" data-aos-delay="300"> | |
| <div class="bg-white p-8 rounded-lg shadow-sm"> | |
| <img src="http://static.photos/finance/200x100/203" alt="Investor Logo" class="mx-auto grayscale hover:grayscale-0 transition"> | |
| </div> | |
| </div> | |
| <div class="text-center" data-aos="zoom-in" data-aos-delay="400"> | |
| <div class="bg-white p-8 rounded-lg shadow-sm"> | |
| <img src="http://static.photos/finance/200x100/204" alt="Investor Logo" class="mx-auto grayscale hover:grayscale-0 transition"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Press Section --> | |
| <section id="press" class="py-20 px-6"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-12" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-4"> | |
| As Featured in <span class="text-gradient">Top Media</span> | |
| </h2> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-lg p-6 shadow-lg hover-lift" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/office/80x80/301" alt="TechCrunch" class="w-16 h-16 rounded mr-4"> | |
| <div> | |
| <h4 class="font-bold">TechCrunch</h4> | |
| <p class="text-sm text-gray-600">March 15, 2024</p> | |
| </div> | |
| </div> | |
| <h3 class="font-bold mb-2">"Revolutionizing How Startups Launch"</h3> | |
| <p class="text-gray-600 text-sm">StartupLaunch Pro is changing the game with its innovative approach to rapid prototyping...</p> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-lg hover-lift" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/office/80x80/302" alt="Forbes" class="w-16 h-16 rounded mr-4"> | |
| <div> | |
| <h4 class="font-bold">Forbes</h4> | |
| <p class="text-sm text-gray-600">March 10, 2024</p> | |
| </div> | |
| </div> | |
| <h3 class="font-bold mb-2">"Top 10 Startups to Watch in 2024"</h3> | |
| <p class="text-gray-600 text-sm">With a impressive growth trajectory and innovative solutions, StartupLaunch Pro...</p> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-lg hover-lift" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/office/80x80/303" alt="Wired" class="w-16 h-16 rounded mr-4"> | |
| <div> | |
| <h4 class="font-bold">Wired</h4> | |
| <p class="text-sm text-gray-600">March 5, 2024</p> | |
| </div> | |
| </div> | |
| <h3 class="font-bold mb-2">"The Future of No-Code is Here"</h3> | |
| <p class="text-gray-600 text-sm">StartupLaunch Pro's platform democratizes software development for non-technical founders...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Email Signup Section --> | |
| <section class="py-20 px-6 gradient-bg relative"> | |
| <div class="absolute inset-0 bg-black/20"></div> | |
| <div class="container mx-auto relative z-10"> | |
| <div class="max-w-3xl mx-auto text-center text-white" data-aos="fade-up"> | |
| <h2 class="text-4xl font-bold mb-4">Ready to Launch Your Dream?</h2> | |
| <p class="text-xl mb-8 opacity-90">Join 10,000+ entrepreneurs who are already building with us</p> | |
| <form id="signupForm" class="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto"> | |
| <input type="email" id="emailInput" placeholder="Enter your email" required | |
| class="flex-1 px-6 py-3 rounded-full text-gray-800 focus:outline-none focus:ring-4 focus:ring-white/50"> | |
| <button type="submit" class="bg-yellow-400 text-gray-900 px-8 py-3 rounded-full font-bold hover:bg-yellow-300 transition transform hover:scale-105"> | |
| Get Started Free | |
| </button> | |
| </form> | |
| <div id="successMessage" class="hidden mt-4 p-4 bg-green-500/20 rounded-lg"> | |
| <p class="text-green-100">🎉 Welcome aboard! Check your inbox for next steps.</p> | |
| </div> | |
| <p class="mt-6 text-sm opacity-75">No credit card required • 14-day free trial • Cancel anytime</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12 px-6"> | |
| <div class="container mx-auto"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-4 text-gradient">StartupLaunch Pro</h3> | |
| <p class="text-gray-400">Empowering entrepreneurs to build, launch, and scale successful startups.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Product</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition">Features</a></li> | |
| <li><a href="#" class="hover:text-white transition">Pricing</a></li> | |
| <li><a href="#" class="hover:text-white transition">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Company</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition">About</a></li> | |
| <li><a href="#" class="hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="hover:text-white transition">Careers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <i data-feather="twitter" class="w-6 h-6 text-gray-400 hover:text-white cursor-pointer transition"></i> | |
| <i data-feather="linkedin" class="w-6 h-6 text-gray-400 hover:text-white cursor-pointer transition"></i> | |
| <i data-feather="github" class="w-6 h-6 text-gray-400 hover:text-white cursor-pointer transition"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2024 StartupLaunch Pro. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script>AOS.init({ duration: 1000, once: true });</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |