Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Serverless Tool Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom animations */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| /* Smooth scroll */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Gradient text */ | |
| .gradient-text { | |
| background: linear-gradient(45deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white/90 backdrop-blur-md shadow-sm z-50 transition-all duration-300"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-20 items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <div class="w-10 h-10 rounded-lg bg-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-bolt text-white"></i> | |
| </div> | |
| <span class="ml-3 text-xl font-bold text-gray-900">Serverless<span class="gradient-text">Tools</span></span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-8"> | |
| <a href="#features" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md font-medium transition-colors">Features</a> | |
| <a href="#how-it-works" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md font-medium transition-colors">How It Works</a> | |
| <a href="#why-choose-us" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md font-medium transition-colors">Why Choose Us</a> | |
| <a href="#testimonials" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md font-medium transition-colors">Testimonials</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="/login" class="px-4 py-2 rounded-md font-medium text-indigo-600 border border-indigo-600 hover:bg-indigo-50 transition-colors">Sign In</a> | |
| <a href="/register" class="px-4 py-2 rounded-md font-medium text-white bg-indigo-600 hover:bg-indigo-700 transition-colors shadow-sm">Get Started</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menu-toggle" class="text-gray-500 hover:text-gray-900 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="md:hidden hidden pb-4 px-4"> | |
| <div class="space-y-2 pt-2"> | |
| <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Features</a> | |
| <a href="#how-it-works" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">How It Works</a> | |
| <a href="#why-choose-us" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Why Choose Us</a> | |
| <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Testimonials</a> | |
| <div class="pt-4 border-t border-gray-200 flex space-x-4"> | |
| <a href="/login" class="w-full px-4 py-2 rounded-md font-medium text-indigo-600 border border-indigo-600 hover:bg-indigo-50 text-center">Sign In</a> | |
| <a href="/register" class="w-full px-4 py-2 rounded-md font-medium text-white bg-indigo-600 hover:bg-indigo-700 text-center">Get Started</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-20 md:pt-40 md:pb-28 bg-gradient-to-br from-indigo-50 to-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center"> | |
| <div class="text-center lg:text-left"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6"> | |
| Build & Deploy <span class="gradient-text">Serverless Tools</span> in Minutes | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-600 max-w-lg mb-8"> | |
| Our platform provides everything you need to create, deploy, and manage serverless applications without infrastructure hassles. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start"> | |
| <a href="/register" class="px-8 py-3 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-lg shadow-md hover:shadow-lg transition-all"> | |
| Get Started for Free | |
| </a> | |
| <a href="#features" class="px-8 py-3 rounded-lg border border-gray-300 hover:bg-gray-50 font-medium text-lg transition-colors shadow-sm flex items-center justify-center gap-2"> | |
| <i class="fas fa-play"></i> See Demo | |
| </a> | |
| </div> | |
| <div class="mt-8 flex flex-wrap justify-center lg:justify-start gap-4"> | |
| <span class="text-gray-500 flex items-center gap-2"> | |
| <i class="fas fa-check-circle text-green-500"></i> No credit card required | |
| </span> | |
| <span class="text-gray-500 flex items-center gap-2"> | |
| <i class="fas fa-check-circle text-green-500"></i> 99.9% uptime | |
| </span> | |
| </div> | |
| </div> | |
| <div class="hidden lg:block relative"> | |
| <div class="relative floating"> | |
| <div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div> | |
| <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div> | |
| <div class="relative"> | |
| <div class="rounded-2xl shadow-2xl overflow-hidden border-8 border-white"> | |
| <img src="https://placehold.co/600x400/f3f4f6/9ca3af?text=Dashboard+Preview" alt="Dashboard Preview" class="w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trusted By Section --> | |
| <div class="py-12 bg-gray-100/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <p class="text-center text-sm uppercase tracking-wider text-gray-500 mb-8">Trusted by leading companies</p> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 items-center justify-center"> | |
| <div class="flex justify-center"> | |
| <img src="https://placehold.co/160x40/fff/ccc?text=Company+1" alt="Company 1" class="h-8 opacity-70 hover:opacity-100 transition-opacity"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://placehold.co/160x40/fff/ccc?text=Company+2" alt="Company 2" class="h-8 opacity-70 hover:opacity-100 transition-opacity"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://placehold.co/160x40/fff/ccc?text=Company+3" alt="Company 3" class="h-8 opacity-70 hover:opacity-100 transition-opacity"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://placehold.co/160x40/fff/ccc?text=Company+4" alt="Company 4" class="h-8 opacity-70 hover:opacity-100 transition-opacity"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://placehold.co/160x40/fff/ccc?text=Company+5" alt="Company 5" class="h-8 opacity-70 hover:opacity-100 transition-opacity"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-4xl mx-auto mb-16"> | |
| <span class="inline-block px-3 py-1 text-sm font-medium text-indigo-600 bg-indigo-100 rounded-full mb-4">Features</span> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Everything You Need for Serverless Development</h2> | |
| <p class="text-lg text-gray-600"> | |
| Build, deploy, and scale serverless tools with our comprehensive platform designed for developers of all skill levels. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="group rounded-xl border border-gray-200 p-6 transition-all hover:border-indigo-100 hover:shadow-lg"> | |
| <div class="w-12 h-12 rounded-lg bg-indigo-600 flex items-center justify-center mb-4 group-hover:bg-indigo-700 transition-colors"> | |
| <i class="fas fa-tachometer-alt text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Tool Dashboard</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Intuitive interface to manage all your serverless tools in one place with real-time monitoring. | |
| </p> | |
| <a href="/tool_list" class="inline-flex items-center text-indigo-600 hover:text-indigo-700 font-medium group"> | |
| Learn more | |
| <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="group rounded-xl border border-gray-200 p-6 transition-all hover:border-indigo-100 hover:shadow-lg"> | |
| <div class="w-12 h-12 rounded-lg bg-indigo-600 flex items-center justify-center mb-4 group-hover:bg-indigo-700 transition-colors"> | |
| <i class="fas fa-code text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">API Management</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Create and manage RESTful APIs with built-in authentication, rate limiting, and analytics. | |
| </p> | |
| <a href="#" class="inline-flex items-center text-indigo-600 hover:text-indigo-700 font-medium group"> | |
| Coming soon | |
| </a> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="group rounded-xl border border-gray-200 p-6 transition-all hover:border-indigo-100 hover:shadow-lg"> | |
| <div class="w-12 h-12 rounded-lg bg-indigo-600 flex items-center justify-center mb-4 group-hover:bg-indigo-700 transition-colors"> | |
| <i class="fas fa-cubes text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Function Hub</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Deploy pre-built functions or your own code in multiple languages with just a few clicks. | |
| </p> | |
| <a href="#" class="inline-flex items-center text-indigo-600 hover:text-indigo-700 font-medium group"> | |
| Coming soon | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" 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 max-w-4xl mx-auto mb-16"> | |
| <span class="inline-block px-3 py-1 text-sm font-medium text-indigo-600 bg-indigo-100 rounded-full mb-4">Process</span> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">How Our Platform Works</h2> | |
| <p class="text-lg text-gray-600"> | |
| Get your serverless tools up and running in just a few simple steps. | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <!-- Vertical line --> | |
| <div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-0.5 bg-gray-200 transform -translate-x-1/2"></div> | |
| <div class="space-y-8 md:space-y-0"> | |
| <!-- Step 1 --> | |
| <div class="group flex flex-col md:flex-row items-center"> | |
| <div class="flex-shrink-0 h-12 w-12 rounded-full bg-white border-2 border-indigo-600 flex items-center justify-center relative z-10 shadow-md md:mr-8"> | |
| <span class="text-xl font-bold text-indigo-600">1</span> | |
| </div> | |
| <div class="mt-4 md:mt-0 md:w-1/2 md:pr-8"> | |
| <h3 class="text-xl font-semibold mb-2">Create Your Account</h3> | |
| <p class="text-gray-600"> | |
| Sign up for free in just a few seconds. No credit card required to get started. | |
| </p> | |
| </div> | |
| <div class="hidden md:block md:w-1/2 md:pl-8 text-right"> | |
| <div class="h-56 rounded-lg overflow-hidden border border-gray-200 shadow-sm"> | |
| <img src="https://placehold.co/400x240/f3f4f6/9ca3af?text=Sign+Up+Form" alt="Sign Up Form" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="group flex flex-col md:flex-row items-center"> | |
| <div class="flex-shrink-0 h-12 w-12 rounded-full bg-white border-2 border-indigo-600 flex items-center justify-center relative z-10 shadow-md md:mr-8"> | |
| <span class="text-xl font-bold text-indigo-600">2</span> | |
| </div> | |
| <div class="hidden md:block md:w-1/2 md:pr-8"> | |
| <div class="h-56 rounded-lg overflow-hidden border border-gray-200 shadow-sm"> | |
| <img src="https://placehold.co/400x240/f3f4f6/9ca3af?text=Service+Selection" alt="Service Selection" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="mt-4 md:mt-0 md:w-1/2 md:pl-8"> | |
| <h3 class="text-xl font-semibold mb-2">Select a Service</h3> | |
| <p class="text-gray-600"> | |
| Choose from our range of serverless tools or bring your own functions and APIs. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="group flex flex-col md:flex-row items-center"> | |
| <div class="flex-shrink-0 h-12 w-12 rounded-full bg-white border-2 border-indigo-600 flex items-center justify-center relative z-10 shadow-md md:mr-8"> | |
| <span class="text-xl font-bold text-indigo-600">3</span> | |
| </div> | |
| <div class="mt-4 md:mt-0 md:w-1/2 md:pr-8"> | |
| <h3 class="text-xl font-semibold mb-2">Configure Your Tool</h3> | |
| <p class="text-gray-600"> | |
| Customize settings, environment variables, and triggers with our easy-to-use interface. | |
| </p> | |
| </div> | |
| <div class="hidden md:block md:w-1/2 md:pl-8 text-right"> | |
| <div class="h-56 rounded-lg overflow-hidden border border-gray-200 shadow-sm"> | |
| <img src="https://placehold.co/400x240/f3f4f6/9ca3af?text=Configuration" alt="Configuration" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="group flex flex-col md:flex-row items-center"> | |
| <div class="flex-shrink-0 h-12 w-12 rounded-full bg-white border-2 border-indigo-600 flex items-center justify-center relative z-10 shadow-md md:mr-8"> | |
| <span class="text-xl font-bold text-indigo-600">4</span> | |
| </div> | |
| <div class="hidden md:block md:w-1/2 md:pr-8"> | |
| <div class="h-56 rounded-lg overflow-hidden border border-gray-200 shadow-sm"> | |
| <img src="https://placehold.co/400x240/f3f4f6/9ca3af?text=Deployment" alt="Deployment" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="mt-4 md:mt-0 md:w-1/2 md:pl-8"> | |
| <h3 class="text-xl font-semibold mb-2">Deploy & Monitor</h3> | |
| <p class="text-gray-600"> | |
| Deploy instantly and monitor performance with real-time analytics. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Choose Us Section --> | |
| <section id="why-choose-us" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-4xl mx-auto mb-16"> | |
| <span class="inline-block px-3 py-1 text-sm font-medium text-indigo-600 bg-indigo-100 rounded-full mb-4">Benefits</span> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Why Developers Choose Our Platform</h2> | |
| <p class="text-lg text-gray-600"> | |
| We're committed to providing the best serverless development experience. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-shadow"> | |
| <div class="w-12 h-12 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center mb-4"> | |
| <i class="fas fa-rocket text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Lightning Fast</h3> | |
| <p class="text-gray-600"> | |
| Deploy in milliseconds with our optimized infrastructure designed for serverless workloads. | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-shadow"> | |
| <div class="w-12 h-12 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center mb-4"> | |
| <i class="fas fa-lock text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Enterprise Security</h3> | |
| <p class="text-gray-600"> | |
| Built with security best practices including automatic TLS, IAM, and VPC networking. | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-shadow"> | |
| <div class="w-12 h-12 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center mb-4"> | |
| <i class="fas fa-dollar-sign text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Cost Effective</h3> | |
| <p class="text-gray-600"> | |
| Only pay for what you use with per-millisecond billing and a generous free tier. | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-shadow"> | |
| <div class="w-12 h-12 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center mb-4"> | |
| <i class="fas fa-share-alt text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Seamless Integrations</h3> | |
| <p class="text-gray-600"> | |
| Connect with other services like databases, APIs, and third-party platforms. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-indigo-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-4xl mx-auto mb-16"> | |
| <span class="inline-block px-3 py-1 text-sm font-medium text-indigo-600 bg-indigo-100 rounded-full mb-4">Testimonials</span> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Users Say</h2> | |
| <p class="text-lg text-gray-600"> | |
| Don't just take our word for it - hear from developers who love our platform. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://placehold.co/80x80/eee/999?text=JS" alt="User" class="w-12 h-12 rounded-full"> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold">James Smith</h4> | |
| <p class="text-sm text-gray-500">CTO @TechCorp</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-2 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| "We've reduced our infrastructure costs by 60% while improving reliability since moving our APIs to ServerlessTools. The team has been incredible to work with." | |
| </p> | |
| <div class="text-indigo-600 text-sm"> | |
| <i class="fas fa-check-circle mr-1"></i> Verified User | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://placehold.co/80x80/eee/999?text=MW" alt="User" class="w-12 h-12 rounded-full"> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold">Maria Wilson</h4> | |
| <p class="text-sm text-gray-500">Lead Developer @AppFactory</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-2 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| "The dashboard makes it so easy to manage all our serverless functions in one place. Deployment times are significantly faster than our previous setup." | |
| </p> | |
| <div class="text-indigo-600 text-sm"> | |
| <i class="fas fa-check-circle mr-1"></i> Verified User | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-gradient-to-r from-indigo-600 to-purple-600 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Build Something Amazing?</h2> | |
| <p class="text-xl max-w-3xl mx-auto mb-8"> | |
| Join thousands of developers who trust our platform for their serverless needs. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="/register" class="px-8 py-3 rounded-lg bg-white text-indigo-600 hover:bg-gray-100 font-semibold text-lg shadow-md hover:shadow-lg transition-all"> | |
| Get Started for Free | |
| </a> | |
| <a href="/login" class="px-8 py-3 rounded-lg border border-white hover:bg-white/10 font-medium text-lg transition-colors shadow-sm"> | |
| Sign In to Your Account | |
| </a> | |
| </div> | |
| <p class="mt-6 text-sm text-white/80"> | |
| No credit card required • 14-day free trial | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-300 py-12"> | |
| <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 lg:grid-cols-5 gap-8"> | |
| <div class="col-span-2"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-bolt text-white"></i> | |
| </div> | |
| <span class="ml-3 text-xl font-bold text-white">Serverless<span class="text-indigo-400">Tools</span></span> | |
| </div> | |
| <p class="mb-4"> | |
| The easiest way to build, deploy, and manage serverless applications. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-200 uppercase tracking-wider mb-4">Product</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#features" class="hover:text-white transition-colors">Features</a></li> | |
| <li><a href="/pricing" class="hover:text-white transition-colors">Pricing</a></li> | |
| <li><a href="/integrations" class="hover:text-white transition-colors">Integrations</a></li> | |
| <li><a href="/docs" class="hover:text-white transition-colors">Documentation</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-200 uppercase tracking-wider mb-4">Company</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="/about" class="hover:text-white transition-colors">About</a></li> | |
| <li><a href="/blog" class="hover:text-white transition-colors">Blog</a></li> | |
| <li><a href="/careers" class="hover:text-white transition-colors">Careers</a></li> | |
| <li><a href="/contact" class="hover:text-white transition-colors">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-200 uppercase tracking-wider mb-4">Legal</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="/privacy" class="hover:text-white transition-colors">Privacy</a></li> | |
| <li><a href="/terms" class="hover:text-white transition-colors">Terms</a></li> | |
| <li><a href="/security" class="hover:text-white transition-colors">Security</a></li> | |
| <li><a href="/policy" class="hover:text-white transition-colors">Cookie Policy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-sm text-gray-500"> | |
| © 2023 ServerlessTools. All rights reserved. | |
| </p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="/status" class="text-sm text-gray-500 hover:text-white">Status</a> | |
| <a href="/changelog" class="text-sm text-gray-500 hover:text-white">Changelog</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Sticky navbar | |
| window.addEventListener('scroll', function() { | |
| const nav = document.querySelector('nav'); | |
| if (window.scrollY > 50) { | |
| nav.classList.add('shadow-md'); | |
| } else { | |
| nav.classList.remove('shadow-md'); | |
| } | |
| }); | |
| // Smooth scroll for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=aops02/serverlesstools" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |