Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EcoPower Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#3b82f6', // blue-500 | |
| secondary: '#10b981', // emerald-500 | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .btn-primary { | |
| @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-full transition-all duration-200 shadow-md hover:shadow-lg; | |
| } | |
| .btn-secondary { | |
| @apply bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-6 rounded-full transition-all duration-200; | |
| } | |
| .card { | |
| @apply bg-white rounded-xl shadow-md overflow-hidden p-6 hover:shadow-lg transition-all duration-200; | |
| } | |
| .nav-link { | |
| @apply text-gray-600 hover:text-primary transition-colors duration-200; | |
| } | |
| .nav-link.active { | |
| @apply text-primary font-medium; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Hero Section --> | |
| <section class="bg-primary text-white"> | |
| <div class="container mx-auto px-6 py-20"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Smart Energy Storage for a Sustainable Future</h1> | |
| <p class="text-xl mb-8">Our cutting-edge battery technology provides efficient, reliable energy storage for homes and businesses.</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <button class="btn-secondary"> | |
| Learn More <i data-feather="arrow-right" class="ml-2"></i> | |
| </button> | |
| <button class="bg-white text-primary hover:bg-gray-100 font-medium py-3 px-6 rounded-full transition-all duration-200 shadow-md"> | |
| Get a Quote | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="http://static.photos/technology/1200x630/42" alt="EcoPower Battery System" class="rounded-lg shadow-2xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">Why Choose EcoPower?</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Our advanced energy storage solutions deliver unmatched performance and reliability.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="card text-center p-8"> | |
| <div class="bg-primary/10 p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="battery" class="text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-3">High Capacity</h3> | |
| <p class="text-gray-600">Store more energy with our industry-leading battery density technology.</p> | |
| </div> | |
| <div class="card text-center p-8"> | |
| <div class="bg-primary/10 p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="clock" class="text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-3">Long Lifespan</h3> | |
| <p class="text-gray-600">Designed for durability with thousands of charge cycles.</p> | |
| </div> | |
| <div class="card text-center p-8"> | |
| <div class="bg-primary/10 p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="shield" class="text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-3">Smart Safety</h3> | |
| <p class="text-gray-600">Advanced thermal management and protection systems.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Product Showcase --> | |
| <section class="py-16"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="md:w-1/2"> | |
| <img src="http://static.photos/technology/640x360/123" alt="EcoPower Battery Unit" class="rounded-lg shadow-lg"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold mb-6">Next-Gen Battery Technology</h2> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i> | |
| <span>Modular design for flexible capacity</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i> | |
| <span>Seamless integration with solar systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i> | |
| <span>Real-time monitoring via mobile app</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-500 mr-3 mt-1"></i> | |
| <span>10-year performance warranty</span> | |
| </li> | |
| </ul> | |
| <button class="mt-8 btn-primary"> | |
| View Specifications <i data-feather="download" class="ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-6 py-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="card"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Energy Generated</p> | |
| <h3 class="text-3xl font-bold mt-2">5,000 MWh</h3> | |
| </div> | |
| <div class="bg-primary/10 p-3 rounded-full"> | |
| <i data-feather="sun" class="text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-green-500"> | |
| <i data-feather="trending-up" class="mr-1"></i> | |
| <span>12% increase</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Carbon Offset</p> | |
| <h3 class="text-3xl font-bold mt-2">2,500+</h3> | |
| </div> | |
| <div class="bg-secondary/10 p-3 rounded-full"> | |
| <i data-feather="wind" class="text-secondary"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-green-500"> | |
| <i data-feather="trending-up" class="mr-1"></i> | |
| <span>8% increase</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Customers</p> | |
| <h3 class="text-3xl font-bold mt-2">10,000+</h3> | |
| </div> | |
| <div class="bg-primary/10 p-3 rounded-full"> | |
| <i data-feather="users" class="text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-green-500"> | |
| <i data-feather="trending-up" class="mr-1"></i> | |
| <span>15% increase</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Efficiency</p> | |
| <h3 class="text-3xl font-bold mt-2">15%</h3> | |
| </div> | |
| <div class="bg-secondary/10 p-3 rounded-full"> | |
| <i data-feather="activity" class="text-secondary"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-green-500"> | |
| <i data-feather="trending-up" class="mr-1"></i> | |
| <span>5% increase</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Call to Action --> | |
| <section class="bg-primary/10 rounded-xl p-12 text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to Power Your Future?</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto mb-8">Join thousands of satisfied customers who are taking control of their energy needs with EcoPower.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="btn-primary"> | |
| Contact Sales <i data-feather="message-square" class="ml-2"></i> | |
| </button> | |
| <button class="bg-white text-primary hover:bg-gray-50 font-medium py-3 px-6 rounded-full transition-all duration-200 shadow-md border border-primary/20"> | |
| Find a Dealer | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Trusted By Energy Innovators</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="card p-8"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">Sarah Johnson</h4> | |
| <p class="text-gray-500 text-sm">Solar Installer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"The EcoPower batteries have transformed how we design solar systems. The reliability and capacity are unmatched."</p> | |
| </div> | |
| <div class="card p-8"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">Michael Chen</h4> | |
| <p class="text-gray-500 text-sm">Homeowner</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"After installing EcoPower, our energy bills dropped by 60%. The system pays for itself!"</p> | |
| </div> | |
| <div class="card p-8"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">Energy Solutions Co.</h4> | |
| <p class="text-gray-500 text-sm">Commercial Installer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Our commercial clients love the scalability and performance of EcoPower systems."</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-6"> | |
| <i data-feather="zap" class="text-primary mr-2"></i> | |
| <h3 class="text-xl font-bold">EcoPower</h3> | |
| </div> | |
| <p class="text-gray-400">Leading the energy storage revolution with innovative battery solutions.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Products</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Residential</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Commercial</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Industrial</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Case Studies</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 EcoPower. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |