Create a modern, attractive SaaS website landing page with the use of smart gradients and slick animations including appealing, modern mouse hover animations.
0bfd444 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GradientFlow - Modern SaaS Solution</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> | |
| </head> | |
| <body class="transition-colors duration-300"> | |
| <!-- Theme Toggle Component --> | |
| <script src="components/theme-toggle.js"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/pricing-card.js"></script> | |
| <!-- Background Gradient Animation --> | |
| <div class="fixed inset-0 -z-10 overflow-hidden"> | |
| <div class="gradient-bg"></div> | |
| </div> | |
| <!-- Navigation --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-5xl mx-auto"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600 animate-text-gradient"> | |
| Transform Your Business | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-700 dark:text-gray-300 mb-8 leading-relaxed"> | |
| Experience the future of SaaS with intelligent automation, seamless integration, and unparalleled performance | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-full font-semibold hover:shadow-2xl hover:scale-105 transition-all duration-300 transform"> | |
| Start Free Trial | |
| </button> | |
| <button class="px-8 py-4 border-2 border-purple-600 text-purple-600 dark:text-purple-400 rounded-full font-semibold hover:bg-purple-600 hover:text-white transition-all duration-300"> | |
| Watch Demo | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-16 dark:text-white"> | |
| Powerful Features | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="feature-card p-8 rounded-2xl bg-white/10 dark:bg-gray-800/50 backdrop-blur-lg border border-white/20 dark:border-gray-700"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl mb-6 flex items-center justify-center"> | |
| <i data-feather="zap" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4 dark:text-white">Lightning Fast</h3> | |
| <p class="text-gray-600 dark:text-gray-400">Experience blazing speeds with our optimized infrastructure</p> | |
| </div> | |
| <div class="feature-card p-8 rounded-2xl bg-white/10 dark:bg-gray-800/50 backdrop-blur-lg border border-white/20 dark:border-gray-700"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl mb-6 flex items-center justify-center"> | |
| <i data-feather="shield" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4 dark:text-white">Enterprise Security</h3> | |
| <p class="text-gray-600 dark:text-gray-400">Bank-level security with end-to-end encryption</p> | |
| </div> | |
| <div class="feature-card p-8 rounded-2xl bg-white/10 dark:bg-gray-800/50 backdrop-blur-lg border border-white/20 dark:border-gray-700"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-teal-500 rounded-xl mb-6 flex items-center justify-center"> | |
| <i data-feather="trending-up" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4 dark:text-white">Scale Effortlessly</h3> | |
| <p class="text-gray-600 dark:text-gray-400">Grow your business without worrying about infrastructure</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold mb-4 dark:text-white">Choose Your Plan</h2> | |
| <p class="text-xl text-gray-600 dark:text-gray-400">Flexible pricing that scales with your business</p> | |
| </div> | |
| <!-- Billing Toggle --> | |
| <div class="flex justify-center mb-12"> | |
| <div class="relative flex items-center bg-gray-200 dark:bg-gray-800 rounded-full p-1"> | |
| <div class="absolute h-full w-1/2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full transition-transform duration-300" id="billing-toggle"></div> | |
| <button id="monthly-btn" class="relative z-10 px-6 py-2 rounded-full font-medium transition-colors duration-300 text-white"> | |
| Monthly | |
| </button> | |
| <button id="yearly-btn" class="relative z-10 px-6 py-2 rounded-full font-medium transition-colors duration-300"> | |
| Yearly | |
| <span class="ml-2 text-xs bg-green-500 text-white px-2 py-1 rounded-full">Save 20%</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Pricing Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <custom-pricing-card | |
| plan="Starter" | |
| price="29" | |
| :features="['5 Projects', '10GB Storage', 'Basic Support', 'API Access']"> | |
| </custom-pricing-card> | |
| <custom-pricing-card | |
| plan="Professional" | |
| price="79" | |
| popular="true" | |
| :features="['Unlimited Projects', '100GB Storage', 'Priority Support', 'Advanced Analytics', 'Team Collaboration']"> | |
| </custom-pricing-card> | |
| <custom-pricing-card | |
| plan="Enterprise" | |
| price="199" | |
| :features="['Unlimited Everything', '1TB Storage', '24/7 Support', 'Custom Integrations', 'SLA Guarantee']"> | |
| </custom-pricing-card> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-4 sm:px-6 lg:px-8 bg-gray-900 text-white"> | |
| <div class="max-w-7xl mx-auto text-center"> | |
| <p>© 2024 GradientFlow. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |