Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Evergreen Plumbing & HVAC - Rhode Island's Trusted Service Experts</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <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> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1e40af', | |
| secondary: '#dc2626', | |
| accent: '#059669' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%); | |
| } | |
| .nav-gradient { | |
| background: linear-gradient(90deg, #1e40af 0%, #2563eb 100%); | |
| } | |
| .service-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .service-card:hover .service-icon { | |
| transform: scale(1.1); | |
| color: #dc2626; | |
| } | |
| .emergency-badge { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white"> | |
| <!-- Top Bar --> | |
| <div class="bg-gray-900 text-white py-2 text-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="phone" class="w-4 h-4 mr-1 text-secondary"></i> | |
| <span>24/7 Emergency Service: <strong>(401) 437-0055</strong></span> | |
| </div> | |
| <div class="hidden md:flex items-center"> | |
| <i data-feather="clock" class="w-4 h-4 mr-1 text-secondary"></i> | |
| <span>Mon-Fri: 7:00 AM - 7:00 PM</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="hover:text-secondary transition-colors">Free Estimates</a> | |
| <a href="#" class="hover:text-secondary transition-colors">Financing Available</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-20"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="droplet" class="text-white h-6 w-6"></i> | |
| </div> | |
| <span class="text-2xl font-bold text-gray-900">EVERGREEN</span> | |
| </div> | |
| </div> | |
| <div class="hidden lg:flex items-center space-x-8"> | |
| <a href="#services" class="text-gray-700 hover:text-primary font-semibold transition-colors">SERVICES</a> | |
| <a href="#about" class="text-gray-700 hover:text-primary font-semibold transition-colors">ABOUT</a> | |
| <a href="#testimonials" class="text-gray-700 hover:text-primary font-semibold transition-colors">REVIEWS</a> | |
| <a href="#contact" class="text-gray-700 hover:text-primary font-semibold transition-colors">CONTACT</a> | |
| <a href="#" class="bg-secondary text-white px-6 py-3 rounded-lg hover:bg-red-700 font-semibold transition-colors emergency-badge"> | |
| EMERGENCY SERVICE | |
| </a> | |
| </div> | |
| <div class="lg:hidden flex items-center"> | |
| <button id="menu-btn" class="text-gray-700"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="hero" class="relative min-h-[80vh] flex items-center justify-start hero-gradient text-white"> | |
| <div class="absolute inset-0 bg-black opacity-10"></div> | |
| <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> | |
| <div class="py-12"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">RHODE ISLAND'S TRUSTED PLUMBING & HVAC EXPERTS</h1> | |
| <p class="text-xl md:text-2xl mb-8 opacity-95">24/7 Emergency Service • Licensed & Insured • Family Owned & Operated</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <button class="bg-secondary text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-red-700 transition-colors shadow-lg"> | |
| <i data-feather="phone" class="w-5 h-5 mr-2 inline"></i> | |
| CALL NOW: (401) 437-0055 | |
| </button> | |
| <button class="bg-white text-primary px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition-colors shadow-lg"> | |
| SCHEDULE SERVICE | |
| </button> | |
| </div> | |
| </div> | |
| <div class="hidden lg:block"> | |
| <img src="http://static.photos/industry/600x400/1" alt="Professional plumber at work" class="rounded-lg shadow-2xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" 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 mb-16"> | |
| <h2 class="text-4xl font-bold text-gray-900 mb-4">OUR PROFESSIONAL SERVICES</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Comprehensive solutions for all your plumbing and HVAC needs throughout Rhode Island</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Plumbing Card --> | |
| <div class="service-card bg-white rounded-lg p-6 shadow-md border border-gray-200 text-center"> | |
| <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="tool" class="text-white h-10 w-10 service-icon"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">PLUMBING SERVICES</h3> | |
| <ul class="text-gray-600 space-y-2 text-sm mb-4"> | |
| <li>• Emergency Repairs</li> | |
| <li>• Pipe Installation</li> | |
| <li>• Water Heater Services</li> | |
| <li>• Drain Cleaning</li> | |
| <li>• Leak Detection</li> | |
| </ul> | |
| <button class="text-primary font-bold hover:text-blue-800 transition-colors">LEARN MORE →</button> | |
| </div> | |
| <!-- HVAC Card --> | |
| <div class="service-card bg-white rounded-lg p-6 shadow-md border border-gray-200 text-center"> | |
| <div class="w-20 h-20 bg-accent rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="thermometer" class="text-white h-10 w-10 service-icon"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">HVAC SOLUTIONS</h3> | |
| <ul class="text-gray-600 space-y-2 text-sm mb-4"> | |
| <li>• AC Installation</li> | |
| <li>• Heating Systems</li> | |
| <li>• Maintenance Plans</li> | |
| <li>• Air Quality</li> | |
| <li>• System Upgrades</li> | |
| </ul> | |
| <button class="text-accent font-bold hover:text-green-800 transition-colors">LEARN MORE →</button> | |
| </div> | |
| <!-- Emergency Card --> | |
| <div class="service-card bg-white rounded-lg p-6 shadow-md border border-gray-200 text-center"> | |
| <div class="w-20 h-20 bg-secondary rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="alert-triangle" class="text-white h-10 w-10 service-icon"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">24/7 EMERGENCY</h3> | |
| <ul class="text-gray-600 space-y-2 text-sm mb-4"> | |
| <li>• Rapid Response</li> | |
| <li>• Licensed Technicians</li> | |
| <li>• Same Day Service</li> | |
| <li>• Free Estimates</li> | |
| <li>• Insurance Help</li> | |
| </ul> | |
| <button class="text-secondary font-bold hover:text-red-800 transition-colors">CALL NOW →</button> | |
| </div> | |
| <!-- Maintenance Card --> | |
| <div class="service-card bg-white rounded-lg p-6 shadow-md border border-gray-200 text-center"> | |
| <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="shield" class="text-white h-10 w-10 service-icon"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">MAINTENANCE PLANS</h3> | |
| <ul class="text-gray-600 space-y-2 text-sm mb-4"> | |
| <li>• Preventive Maintenance</li> | |
| <li>• Annual Inspections</li> | |
| <li>• Priority Service</li> | |
| <li>• Discounted Rates</li> | |
| <li>• Peace of Mind</li> | |
| </ul> | |
| <button class="text-primary font-bold hover:text-blue-800 transition-colors">LEARN MORE →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> | |
| <div class="relative"> | |
| <div class="bg-primary text-white p-8 rounded-lg shadow-xl"> | |
| <h2 class="text-3xl font-bold mb-6">WHY CHOOSE EVERGREEN?</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="award" class="text-secondary mr-3"></i> | |
| <span class="text-gray-800 font-semibold">Family Owned & Operated Since 2008</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="shield" class="text-secondary mr-3"></i> | |
| <span class="text-gray-800 font-semibold">Licensed, Bonded & Insured</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="clock" class="text-secondary mr-3"></i> | |
| <span class="text-gray-800 font-semibold">24/7 Emergency Services</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="dollar-sign" class="text-secondary mr-3"></i> | |
| <span class="text-gray-800 font-semibold">Upfront Pricing - No Hidden Fees</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="thumbs-up" class="text-secondary mr-3"></i> | |
| <span class="text-gray-800 font-semibold">Satisfaction Guaranteed</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="text-secondary mr-3"></i> | |
| <span class="text-gray-800 font-semibold">5-Star Rated Service</span> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <button class="bg-secondary text-white px-8 py-3 rounded-lg font-bold hover:bg-red-700 transition-colors"> | |
| OUR STORY | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <img src="http://static.photos/construction/400x300/1" alt="Plumbing work" class="rounded-lg shadow-lg"> | |
| <img src="http://static.photos/technology/400x300/2" alt="HVAC installation" class="rounded-lg shadow-lg mt-8"> | |
| <img src="http://static.photos/people/400x300/3" alt="Professional team" class="rounded-lg shadow-lg"> | |
| <img src="http://static.photos/industry/400x300/4" alt="Quality service" class="rounded-lg shadow-lg mt-8"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold text-gray-800 mb-4">What Our Customers Say</h2> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center"> | |
| <i data-feather="user" class="text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold text-gray-800">Sarah Johnson</h4> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Emergency water heater repair on a Sunday! They were at my door in 30 minutes and had it fixed in no time. Professional and affordable."</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-secondary rounded-full flex items-center justify-center"> | |
| <i data-feather="user" class="text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold text-gray-800">Mike Rodriguez</h4> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Complete HVAC system installation. The team was knowledgeable, clean, and efficient. My home has never been more comfortable!"</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center"> | |
| <i data-feather="user" class="text-white"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold text-gray-800">Emily Chen</h4> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Fixed a complex plumbing issue that two other companies couldn't solve. Their expertise and dedication are unmatched!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-secondary text-white"> | |
| <div class="max-w-4xl mx-auto text-center px-4"> | |
| <h2 class="text-4xl font-bold mb-6">READY FOR PROFESSIONAL SERVICE?</h2> | |
| <p class="text-xl mb-8 opacity-95">Contact us today for a free estimate or 24/7 emergency service</p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="bg-white text-secondary px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition-colors shadow-lg"> | |
| <i data-feather="phone" class="w-5 h-5 mr-2 inline"></i> | |
| CALL NOW: (401) 437-0055 | |
| </button> | |
| <button class="border-2 border-white text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-white hover:text-secondary transition-colors shadow-lg"> | |
| SCHEDULE ONLINE | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="droplet" class="text-white h-5 w-5"></i> | |
| </div> | |
| <span class="text-xl font-bold">EVERGREEN</span> | |
| </div> | |
| <p class="text-gray-400">Rhode Island's trusted plumbing and HVAC experts since 2008.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4 text-white">QUICK LINKS</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#services" class="hover:text-white transition-colors">SERVICES</a></li> | |
| <li><a href="#about" class="hover:text-white transition-colors">ABOUT US</a></li> | |
| <li><a href="#testimonials" class="hover:text-white transition-colors">REVIEWS</a></li> | |
| <li><a href="#contact" class="hover:text-white transition-colors">CONTACT</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4 text-white">CONTACT INFO</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-center"> | |
| <i data-feather="phone" class="w-4 h-4 mr-2"></i> | |
| (401) 437-0055 | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="mail" class="w-4 h-4 mr-2"></i> | |
| info@evergreenplumbingri.com | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-2"></i> | |
| Serving All of Rhode Island | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4 text-white">SERVICE AREAS</h4> | |
| <ul class="space-y-1 text-gray-400"> | |
| <li>• Providence County</li> | |
| <li>• Kent County</li> | |
| <li>• Washington County</li> | |
| <li>• Newport County</li> | |
| <li>• Bristol County</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2024 Evergreen Plumbing & HVAC. All rights reserved. License #12345</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| // Mobile menu functionality | |
| document.getElementById('menu-btn').addEventListener('click', function() { | |
| alert('Mobile menu would open here. For demo purposes only.'); | |
| }); | |
| // Smooth scroll for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Add scroll animation for service cards | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe service cards | |
| document.querySelectorAll('.service-card').forEach(card => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| card.style.transition = 'all 0.6s ease'; | |
| observer.observe(card); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |