Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SaaS Sparkle - Transform Your Business</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#FF6B6B', | |
| secondary: '#4ECDC4', | |
| accent: '#FFD166', | |
| dark: '#1A535C', | |
| light: '#F7FFF7' | |
| }, | |
| fontFamily: { | |
| sans: ['Open Sans', 'sans-serif'], | |
| heading: ['Montserrat', 'sans-serif'] | |
| }, | |
| boxShadow: { | |
| 'card': '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', | |
| 'hero': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .feature-icon { | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| } | |
| .feature-card:hover .feature-icon { | |
| transform: translateY(-8px) scale(1.1); | |
| } | |
| .pricing-card:hover { | |
| transform: translateY(-10px); | |
| } | |
| .btn-primary { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(79, 70, 229, 0.3); | |
| } | |
| .btn-primary:hover { | |
| box-shadow: 0 6px 12px rgba(79, 70, 229, 0.4); | |
| transform: translateY(-2px); | |
| } | |
| .btn-secondary { | |
| transition: all 0.3s ease; | |
| } | |
| .btn-secondary:hover { | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| transform: translateY(-2px); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: white; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-light text-dark"> | |
| <!-- Hero Section --> | |
| <header class="gradient-bg text-white"> | |
| <div class="container mx-auto px-4 py-6 flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-12 h-12 rounded-xl bg-white flex items-center justify-center shadow-lg"> | |
| <i data-feather="zap" class="text-primary w-6 h-6"></i> | |
| </div> | |
| <span class="text-2xl font-heading font-extrabold">SaaS Sparkle</span> | |
| </div> | |
| <nav class="hidden md:flex space-x-10"> | |
| <a href="#" class="nav-link font-medium">Features</a> | |
| <a href="#" class="nav-link font-medium">Pricing</a> | |
| <a href="#" class="nav-link font-medium">Resources</a> | |
| <a href="#" class="nav-link font-medium">Contact</a> | |
| </nav> | |
| <div class="flex space-x-4"> | |
| <button class="px-5 py-2.5 rounded-lg font-medium hover:bg-white/10 transition duration-300">Sign In</button> | |
| <button class="px-5 py-2.5 bg-white text-primary rounded-lg font-bold hover:bg-gray-100 transition duration-300 btn-primary">Get Started</button> | |
| </div> | |
| </div> | |
| <div class="container mx-auto px-4 py-24 md:py-36"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-7xl font-extrabold font-heading mb-6 leading-tight">Transform Your Business With Smart Solutions</h1> | |
| <p class="text-xl md:text-2xl mb-12 text-indigo-100 max-w-3xl mx-auto leading-relaxed">Powerful tools to streamline operations, engage customers, and drive growth - all in one platform.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-5"> | |
| <button class="px-10 py-4 bg-white text-primary rounded-xl font-extrabold hover:bg-gray-100 transition duration-300 shadow-xl btn-primary">Start Free Trial</button> | |
| <button class="px-10 py-4 bg-transparent border-2 border-white text-white rounded-xl font-extrabold hover:bg-white/10 transition duration-300 btn-secondary">Watch Demo</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container mx-auto px-4 pb-20"> | |
| <div class="bg-white/15 backdrop-blur-sm rounded-3xl p-1.5 max-w-5xl mx-auto shadow-hero"> | |
| <div class="bg-gray-900 rounded-2xl p-8"> | |
| <div class="flex space-x-3 mb-6"> | |
| <div class="w-4 h-4 rounded-full bg-red-500"></div> | |
| <div class="w-4 h-4 rounded-full bg-yellow-500"></div> | |
| <div class="w-4 h-4 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-gray-800 rounded-xl p-5"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-indigo-500/20 flex items-center justify-center mr-3"> | |
| <i data-feather="trending-up" class="text-indigo-400 w-5 h-5"></i> | |
| </div> | |
| <h3 class="font-bold text-white">Analytics Dashboard</h3> | |
| </div> | |
| <div class="h-2 bg-gray-700 rounded-full mb-2 w-4/5"></div> | |
| <div class="h-2 bg-gray-700 rounded-full mb-2 w-3/4"></div> | |
| <div class="h-2 bg-gray-700 rounded-full w-2/3"></div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-5"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center mr-3"> | |
| <i data-feather="users" class="text-green-400 w-5 h-5"></i> | |
| </div> | |
| <h3 class="font-bold text-white">Customer Insights</h3> | |
| </div> | |
| <div class="h-2 bg-gray-700 rounded-full mb-2 w-full"></div> | |
| <div class="h-2 bg-gray-700 rounded-full mb-2 w-5/6"></div> | |
| <div class="h-2 bg-gray-700 rounded-full w-4/5"></div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-5"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center mr-3"> | |
| <i data-feather="settings" class="text-purple-400 w-5 h-5"></i> | |
| </div> | |
| <h3 class="font-bold text-white">Automated Workflows</h3> | |
| </div> | |
| <div class="h-2 bg-gray-700 rounded-full mb-2 w-3/4"></div> | |
| <div class="h-2 bg-gray-700 rounded-full mb-2 w-2/3"></div> | |
| <div class="h-2 bg-gray-700 rounded-full w-5/6"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Features Section --> | |
| <section class="py-24 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center max-w-3xl mx-auto mb-20"> | |
| <h2 class="text-4xl md:text-5xl font-bold font-heading mb-6">Powerful Features for Modern Businesses</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Everything you need to grow your business and delight your customers with cutting-edge technology.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card bg-light rounded-2xl p-8 transition duration-300 hover:shadow-card"> | |
| <div class="feature-icon w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-7"> | |
| <i data-feather="bar-chart-2" class="text-primary w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold font-heading mb-4">Advanced Analytics</h3> | |
| <p class="text-gray-600 mb-5 leading-relaxed">Gain valuable insights with real-time data and customizable reports to make informed decisions.</p> | |
| <a href="#" class="text-primary font-medium flex items-center group"> | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card bg-light rounded-2xl p-8 transition duration-300 hover:shadow-card"> | |
| <div class="feature-icon w-16 h-16 rounded-2xl bg-secondary/10 flex items-center justify-center mb-7"> | |
| <i data-feather="users" class="text-secondary w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold font-heading mb-4">Customer Management</h3> | |
| <p class="text-gray-600 mb-5 leading-relaxed">Centralize customer data and improve relationship management with our intuitive CRM tools.</p> | |
| <a href="#" class="text-primary font-medium flex items-center group"> | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card bg-light rounded-2xl p-8 transition duration-300 hover:shadow-card"> | |
| <div class="feature-icon w-16 h-16 rounded-2xl bg-accent/10 flex items-center justify-center mb-7"> | |
| <i data-feather="zap" class="text-accent w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold font-heading mb-4">Smart Automation</h3> | |
| <p class="text-gray-600 mb-5 leading-relaxed">Streamline workflows and reduce manual tasks with our intelligent automation system.</p> | |
| <a href="#" class="text-primary font-medium flex items-center group"> | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card bg-light rounded-2xl p-8 transition duration-300 hover:shadow-card"> | |
| <div class="feature-icon w-16 h-16 rounded-2xl bg-indigo-500/10 flex items-center justify-center mb-7"> | |
| <i data-feather="shield" class="text-indigo-500 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold font-heading mb-4">Enterprise Security</h3> | |
| <p class="text-gray-600 mb-5 leading-relaxed">Military-grade encryption and compliance with industry standards to keep your data safe.</p> | |
| <a href="#" class="text-primary font-medium flex items-center group"> | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card bg-light rounded-2xl p-8 transition duration-300 hover:shadow-card"> | |
| <div class="feature-icon w-16 h-16 rounded-2xl bg-pink-500/10 flex items-center justify-center mb-7"> | |
| <i data-feather="smartphone" class="text-pink-500 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold font-heading mb-4">Mobile Integration</h3> | |
| <p class="text-gray-600 mb-5 leading-relaxed">Access your dashboard and manage operations from anywhere with our mobile apps.</p> | |
| <a href="#" class="text-primary font-medium flex items-center group"> | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card bg-light rounded-2xl p-8 transition duration-300 hover:shadow-card"> | |
| <div class="feature-icon w-16 h-16 rounded-2xl bg-teal-500/10 flex items-center justify-center mb-7"> | |
| <i data-feather="globe" class="text-teal-500 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold font-heading mb-4">Global Scalability</h3> | |
| <p class="text-gray-600 mb-5 leading-relaxed">Grow your business internationally with our global infrastructure and multi-region support.</p> | |
| <a href="#" class="text-primary font-medium flex items-center group"> | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section class="py-24 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center max-w-3xl mx-auto mb-20"> | |
| <h2 class="text-4xl md:text-5xl font-bold font-heading mb-6">Simple, Transparent Pricing</h2> | |
| <p class="text-xl text-gray-600">Choose the plan that works best for your team with no hidden fees.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Basic Plan --> | |
| <div class="bg-white rounded-3xl p-10 shadow-card border border-gray-100 transition-all duration-300 pricing-card"> | |
| <h3 class="text-2xl font-bold font-heading mb-5">Starter</h3> | |
| <div class="mb-7"> | |
| <span class="text-5xl font-bold font-heading">$29</span> | |
| <span class="text-gray-600">/month</span> | |
| </div> | |
| <p class="text-gray-600 mb-8">Perfect for small teams getting started with basic features.</p> | |
| <ul class="space-y-5 mb-10"> | |
| <li class="flex items-center"> | |
| <i data-feather="check-circle" class="text-accent mr-3 w-6 h-6"></i> | |
| <span>Up to 5 users</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check-circle" class="text-accent mr-3 w-6 h-6"></i> | |
| <span>Basic analytics</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check-circle" class="text-accent mr-3 w-6 h-6"></i> | |
| <span>5GB storage</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i data-feather="x-circle" class="mr-3 w-6 h-6"></i> | |
| <span>Priority support</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i data-feather="x-circle" class="mr-3 w-6 h-6"></i> | |
| <span>Advanced automation</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-4 bg-gray-100 text-dark rounded-xl font-bold hover:bg-gray-200 transition duration-300">Get Started</button> | |
| </div> | |
| <!-- Pro Plan (Popular) --> | |
| <div class="bg-white rounded-3xl p-10 shadow-lg border-2 border-primary relative transition-all duration-300 pricing-card transform hover:-translate-y-2"> | |
| <div class="absolute -top-4 left-1/2 transform -translate-x-1/2"> | |
| <span class="bg-primary text-white text-sm font-bold px-5 py-2 rounded-full">MOST POPULAR</span> | |
| </div> | |
| <h3 class="text-2xl font-bold font-heading mb-5">Professional</h3> | |
| <div class="mb-7"> | |
| <span class="text-5xl font-bold font-heading">$79</span> | |
| <span class="text-gray-600">/month</span> | |
| </div> | |
| <p class="text-gray-600 mb-8">Ideal for growing businesses with advanced requirements.</p> | |
| <ul class="space-y-5 mb-10"> | |
| <li class="flex items-center"> | |
| <i data-feather="check-circle" class="text-accent mr-3 w-6 h-6"></i> | |
| <span>Up to 20 users</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check-circle" class="text-accent mr-3 w-6 h-6"></i> | |
| <span>Advanced analytics</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check-circle" class="text-accent mr-3 w-6 h-6"></i> | |
| <span>50GB storage</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check-circle" class="text-accent mr-3 w-6 h-6"></i> | |
| <span>Priority support</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i data-feather="x-circle" class="mr-3 w-6 h-6"></i> | |
| <span>Advanced automation</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-4 bg-primary text-white rounded-xl font-bold hover:bg-indigo-600 transition duration-300 btn-primary">Get Started</button> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="bg-white rounded-3xl p-10 shadow-card border border-gray-100 transition-all duration-300 pricing-card"> | |
| <h3 class="text-2xl font-bold font-heading mb-5">Enterprise</h3> | |
| <div class="mb-7"> | |
| <span class="text-5xl font-bold font-heading">$199</span> | |
| <span class="text-gray-600">/month</span> | |
| </div> | |
| <p class="text-gray-600 mb-8">For large organizations with complex needs and custom requirements.</p> | |
| <ul class="space-y-5 mb-10"> | |
| <li class="flex items-center"> | |
| <i data-feather="check-circle" class="text-accent mr-3 w-6 h-6"></i> | |
| <span>Unlimited users</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check-circle" class="text-accent mr-3 w-6 h-6"></i> | |
| <span>Advanced analytics</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check-circle" class="text-accent mr-3 w-6 h-6"></i> | |
| <span>500GB storage</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check-circle" class="text-accent mr-3 w-6 h-6"></i> | |
| <span>24/7 priority support</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check-circle" class="text-accent mr-3 w-6 h-6"></i> | |
| <span>Advanced automation</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-4 bg-gray-100 text-dark rounded-xl font-bold hover:bg-gray-200 transition duration-300">Get Started</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-24 gradient-bg"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl md:text-5xl font-bold font-heading text-white mb-7">Ready to Transform Your Business?</h2> | |
| <p class="text-xl md:text-2xl text-indigo-100 mb-12 max-w-3xl mx-auto">Join thousands of satisfied customers using SaaS Sparkle to drive growth and innovation.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-6"> | |
| <button class="px-10 py-5 bg-white text-primary rounded-xl font-bold hover:bg-gray-100 transition duration-300 shadow-xl btn-primary">Start Free 14-Day Trial</button> | |
| <button class="px-10 py-5 bg-transparent border-2 border-white text-white rounded-xl font-bold hover:bg-white/10 transition duration-300 btn-secondary">Schedule a Demo</button> | |
| </div> | |
| <p class="text-indigo-200 mt-8 text-lg">No credit card required. Cancel anytime.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white pt-24 pb-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-16"> | |
| <div class="lg:col-span-2"> | |
| <div class="flex items-center space-x-3 mb-8"> | |
| <div class="w-12 h-12 rounded-xl bg-white flex items-center justify-center shadow-lg"> | |
| <i data-feather="zap" class="text-primary w-6 h-6"></i> | |
| </div> | |
| <span class="text-3xl font-heading font-bold">SaaS Sparkle</span> | |
| </div> | |
| <p class="text-gray-400 mb-8 max-w-md text-lg leading-relaxed">Powerful tools to streamline operations, engage customers, and drive growth - all in one platform.</p> | |
| <div class="flex space-x-5"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300 bg-gray-800 w-12 h-12 rounded-full flex items-center justify-center"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300 bg-gray-800 w-12 h-12 rounded-full flex items-center justify-center"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300 bg-gray-800 w-12 h-12 rounded-full flex items-center justify-center"> | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300 bg-gray-800 w-12 h-12 rounded-full flex items-center justify-center"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-bold font-heading mb-8">Product</h4> | |
| <ul class="space-y-5"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Integrations</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-bold font-heading mb-8">Resources</h4> | |
| <ul class="space-y-5"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-bold font-heading mb-8">Company</h4> | |
| <ul class="space-y-5"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Partners</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-10 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-lg">© 2023 SaaS Sparkle. All rights reserved.</p> | |
| <div class="flex space-x-8 mt-6 md:mt-0"> | |
| <a href="#" class="text-gray-500 hover:text-white transition duration-300 text-lg">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-white transition duration-300 text-lg">Terms of Service</a> | |
| <a href="#" class="text-gray-500 hover:text-white transition duration-300 text-lg">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| // Add animation to elements when they come into view | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const featureCards = document.querySelectorAll('.feature-card'); | |
| const pricingCards = document.querySelectorAll('.pricing-card'); | |
| // Simple fade-in animation for feature cards | |
| featureCards.forEach((card, index) => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| setTimeout(() => { | |
| card.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; | |
| card.style.opacity = '1'; | |
| card.style.transform = 'translateY(0)'; | |
| }, 200 * index); | |
| }); | |
| // Staggered entrance for pricing cards | |
| pricingCards.forEach((card, index) => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(30px)'; | |
| setTimeout(() => { | |
| card.style.transition = 'all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275)'; | |
| card.style.opacity = '1'; | |
| card.style.transform = 'translateY(0)'; | |
| }, 300 * index); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |