|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="scroll-smooth"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>LaunchPad Pro - Modern Startup Landing</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<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> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans antialiased"> |
|
|
|
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
|
|
|
<section class="relative overflow-hidden pt-32 pb-20"> |
|
|
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-indigo-50 to-purple-50 opacity-90"></div> |
|
|
<div class="container mx-auto px-6 relative z-10"> |
|
|
<div class="flex flex-col lg:flex-row items-center"> |
|
|
<div class="lg:w-1/2 mb-16 lg:mb-0"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight"> |
|
|
The <span class="text-indigo-600">Future</span> Starts Here |
|
|
</h1> |
|
|
<p class="text-xl text-gray-600 mb-8 max-w-lg"> |
|
|
Empower your business with our cutting-edge platform. Simple, powerful, and built for scale. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<a href="#signup" class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-8 py-3 rounded-lg shadow-lg transition-all duration-300 transform hover:-translate-y-1 text-center"> |
|
|
Get Started Free |
|
|
</a> |
|
|
<a href="#features" class="bg-white hover:bg-gray-100 text-indigo-600 font-semibold px-8 py-3 rounded-lg shadow-md transition-all duration-300 text-center"> |
|
|
Learn More |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-10 flex items-center"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img src="http://static.photos/people/120x120/1" class="w-10 h-10 rounded-full border-2 border-white" alt="User"> |
|
|
<img src="http://static.photos/people/120x120/2" class="w-10 h-10 rounded-full border-2 border-white" alt="User"> |
|
|
<img src="http://static.photos/people/120x120/3" class="w-10 h-10 rounded-full border-2 border-white" alt="User"> |
|
|
</div> |
|
|
<p class="ml-4 text-gray-600"> |
|
|
<span class="font-semibold">10,000+</span> businesses trust our platform |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2 relative"> |
|
|
<div class="relative max-w-xl mx-auto"> |
|
|
<div class="absolute -top-10 -left-10 w-72 h-72 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob1"></div> |
|
|
<div class="absolute -bottom-20 -right-10 w-72 h-72 bg-indigo-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob2"></div> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/technology/1024x576/42" class="rounded-xl shadow-2xl border-8 border-white transform rotate-2 hover:rotate-0 transition-transform duration-500" alt="Dashboard Preview"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Pain Points Solved</h2> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">We identified the biggest challenges and built the perfect solution</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10"> |
|
|
<div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-shadow duration-300"> |
|
|
<div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="alert-triangle" class="w-6 h-6 text-indigo-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Problem: Complex Systems</h3> |
|
|
<p class="text-gray-600 mb-4">Traditional solutions require extensive training and documentation.</p> |
|
|
<h4 class="text-indigo-600 font-medium">Our Solution</h4> |
|
|
<p class="text-gray-600">Intuitive interface that anyone can master in minutes, not weeks.</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-shadow duration-300"> |
|
|
<div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="clock" class="w-6 h-6 text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Problem: Slow Performance</h3> |
|
|
<p class="text-gray-600 mb-4">Legacy systems with sluggish response times waste productivity.</p> |
|
|
<h4 class="text-indigo-600 font-medium">Our Solution</h4> |
|
|
<p class="text-gray-600">Lightning-fast processing powered by modern cloud infrastructure.</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition-shadow duration-300"> |
|
|
<div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="dollar-sign" class="w-6 h-6 text-blue-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Problem: Hidden Costs</h3> |
|
|
<p class="text-gray-600 mb-4">Unexpected fees and enterprise negotiations create headaches.</p> |
|
|
<h4 class="text-indigo-600 font-medium">Our Solution</h4> |
|
|
<p class="text-gray-600">Transparent pricing with no surprises. Scale up or down anytime.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Powerful Features</h2> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Everything you need to accelerate your business growth</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 gap-12 items-center mb-16"> |
|
|
<div class="order-2 md:order-1"> |
|
|
<div class="text-indigo-600 font-medium mb-2">Feature Highlight</div> |
|
|
<h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Real-time Analytics Dashboard</h3> |
|
|
<p class="text-gray-600 mb-6">Get instant visibility into your key metrics with our beautifully designed analytics interface. Drill down into the data that matters most to your business.</p> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2 mt-1"></i> |
|
|
<span class="text-gray-700">Customizable widgets and reports</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2 mt-1"></i> |
|
|
<span class="text-gray-700">Team performance tracking</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2 mt-1"></i> |
|
|
<span class="text-gray-700">Automated insights and alerts</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="order-1 md:order-2 relative"> |
|
|
<div class="absolute -top-10 -left-10 w-60 h-60 bg-indigo-100 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div> |
|
|
<img src="http://static.photos/technology/640x360/45" class="rounded-xl shadow-2xl border-8 border-white transform -rotate-2 hover:rotate-0 transition-transform duration-500" alt="Analytics Dashboard"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div class="relative"> |
|
|
<div class="absolute -bottom-10 -right-10 w-60 h-60 bg-purple-100 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div> |
|
|
<img src="http://static.photos/technology/640x360/46" class="rounded-xl shadow-2xl border-8 border-white transform rotate-2 hover:rotate-0 transition-transform duration-500" alt="Collaboration Tools"> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-indigo-600 font-medium mb-2">Feature Highlight</div> |
|
|
<h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Seamless Team Collaboration</h3> |
|
|
<p class="text-gray-600 mb-6">Break down silos with built-in tools that keep your team aligned. Comment, share, and collaborate without leaving the platform.</p> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2 mt-1"></i> |
|
|
<span class="text-gray-700">Real-time document editing</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2 mt-1"></i> |
|
|
<span class="text-gray-700">Task assignments and tracking</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2 mt-1"></i> |
|
|
<span class="text-gray-700">Integrated video conferencing</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Meet Our Team</h2> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">The brilliant minds bringing innovation to your business</p> |
|
|
</div> |
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div class="bg-gray-50 rounded-xl p-6 text-center hover:shadow-lg transition-shadow duration-300"> |
|
|
<img src="http://static.photos/people/320x240/10" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover" alt="Team Member"> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-1">Sarah Johnson</h3> |
|
|
<p class="text-indigo-600 font-medium mb-3">CEO & Founder</p> |
|
|
<p class="text-gray-600">Former Google PM and serial entrepreneur with 3 exits</p> |
|
|
<div class="flex justify-center mt-4 space-x-3"> |
|
|
<a href="#" class="text-gray-500 hover:text-indigo-600"><i data-feather="twitter"></i></a> |
|
|
<a href="#" class="text-gray-500 hover:text-indigo-600"><i data-feather="linkedin"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 rounded-xl p-6 text-center hover:shadow-lg transition-shadow duration-300"> |
|
|
<img src="http://static.photos/people/320x240/11" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover" alt="Team Member"> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-1">Michael Chen</h3> |
|
|
<p class="text-indigo-600 font-medium mb-3">CTO</p> |
|
|
<p class="text-gray-600">Ex-Facebook engineer with expertise in scalable systems</p> |
|
|
<div class="flex justify-center mt-4 space-x-3"> |
|
|
<a href="#" class="text-gray-500 hover:text-indigo-600"><i data-feather="twitter"></i></a> |
|
|
<a href="#" class="text-gray-500 hover:text-indigo-600"><i data-feather="linkedin"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 rounded-xl p-6 text-center hover:shadow-lg transition-shadow duration-300"> |
|
|
<img src="http://static.photos/people/320x240/12" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover" alt="Team Member"> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-1">David Rodriguez</h3> |
|
|
<p class="text-indigo-600 font-medium mb-3">Head of Product</p> |
|
|
<p class="text-gray-600">User experience expert with 15+ years in SaaS products</p> |
|
|
<div class="flex justify-center mt-4 space-x-3"> |
|
|
<a href="#" class="text-gray-500 hover:text-indigo-600"><i data-feather="twitter"></i></a> |
|
|
<a href="#" class="text-gray-500 hover:text-indigo-600"><i data-feather="linkedin"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 rounded-xl p-6 text-center hover:shadow-lg transition-shadow duration-300"> |
|
|
<img src="http://static.photos/people/320x240/13" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover" alt="Team Member"> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-1">Emily Wilson</h3> |
|
|
<p class="text-indigo-600 font-medium mb-3">Head of Growth</p> |
|
|
<p class="text-gray-600">Marketing leader who scaled 3 startups to $100M+</p> |
|
|
<div class="flex justify-center mt-4 space-x-3"> |
|
|
<a href="#" class="text-gray-500 hover:text-indigo-600"><i data-feather="twitter"></i></a> |
|
|
<a href="#" class="text-gray-500 hover:text-indigo-600"><i data-feather="linkedin"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Backed by the Best</h2> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Trusted by leading investors worldwide</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center"> |
|
|
<img src="http://static.photos/finance/120x120/1" class="w-32 h-auto mx-auto opacity-70 hover:opacity-100 transition-opacity" alt="Investor Logo"> |
|
|
<img src="http://static.photos/finance/120x120/2" class="w-32 h-auto mx-auto opacity-70 hover:opacity-100 transition-opacity" alt="Investor Logo"> |
|
|
<img src="http://static.photos/finance/120x120/3" class="w-32 h-auto mx-auto opacity-70 hover:opacity-100 transition-opacity" alt="Investor Logo"> |
|
|
<img src="http://static.photos/finance/120x120/4" class="w-32 h-auto mx-auto opacity-70 hover:opacity-100 transition-opacity" alt="Investor Logo"> |
|
|
<img src="http://static.photos/finance/120x120/5" class="w-32 h-auto mx-auto opacity-70 hover:opacity-100 transition-opacity" alt="Investor Logo"> |
|
|
<img src="http://static.photos/finance/120x120/6" class="w-32 h-auto mx-auto opacity-70 hover:opacity-100 transition-opacity" alt="Investor Logo"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Featured In</h2> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">What the press says about us</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-50 p-6 rounded-xl"> |
|
|
<img src="http://static.photos/media/120x120/1" class="h-10 mb-4" alt="Press Logo"> |
|
|
<p class="text-gray-600 italic mb-4">"The most innovative platform we've seen this year. A game-changer for SMEs looking to scale."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="http://static.photos/people/48x48/20" class="w-10 h-10 rounded-full mr-3" alt="Author"> |
|
|
<div> |
|
|
<p class="font-medium text-gray-900">Lisa Williams</p> |
|
|
<p class="text-sm text-gray-500">TechCrunch</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-xl"> |
|
|
<img src="http://static.photos/media/120x120/2" class="h-10 mb-4" alt="Press Logo"> |
|
|
<p class="text-gray-600 italic mb-4">"Combines enterprise power with startup agility. Their growth metrics are truly impressive."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="http://static.photos/people/48x48/21" class="w-10 h-10 rounded-full mr-3" alt="Author"> |
|
|
<div> |
|
|
<p class="font-medium text-gray-900">Robert Chang</p> |
|
|
<p class="text-sm text-gray-500">Forbes</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-xl"> |
|
|
<img src="http://static.photos/media/120x120/3" class="h-10 mb-4" alt="Press Logo"> |
|
|
<p class="text-gray-600 italic mb-4">"User experience is unparalleled. This is what happens when top Silicon Valley talent builds for SMEs."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="http://static.photos/people/48x48/22" class="w-10 h-10 rounded-full mr-3" alt="Author"> |
|
|
<div> |
|
|
<p class="font-medium text-gray-900">Maya Patel</p> |
|
|
<p class="text-sm text-gray-500">Wired</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="signup" class="py-20 bg-gradient-to-br from-indigo-600 to-purple-600"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-3xl mx-auto text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Ready to Transform Your Business?</h2> |
|
|
<p class="text-xl text-indigo-100 mb-8">Join thousands of businesses growing faster with our platform. Get started in minutes.</p> |
|
|
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto"> |
|
|
<input type="email" placeholder="Enter your email" class="flex-grow px-5 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50"> |
|
|
<button type="submit" class="bg-white text-indigo-600 font-semibold px-8 py-3 rounded-lg shadow-md hover:bg-gray-100 transition-colors duration-300"> |
|
|
Get Started Free |
|
|
</button> |
|
|
</form> |
|
|
<p class="text-indigo-100 text-sm mt-4 opacity-80">No credit card required. Cancel anytime.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
