|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>GreenScape | Professional Yard Maintenance & Landscaping</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> |
|
|
.hero { |
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.testimonial-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.testimonial-card:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
|
|
|
.before-after-container { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
overflow: hidden; |
|
|
border-radius: 0.5rem; |
|
|
} |
|
|
|
|
|
.before-after-slider { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
bottom: 0; |
|
|
width: 50%; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.slider-handle { |
|
|
position: absolute; |
|
|
width: 4px; |
|
|
height: 100%; |
|
|
background: white; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
cursor: ew-resize; |
|
|
} |
|
|
|
|
|
.slider-handle:after { |
|
|
content: "↔"; |
|
|
position: absolute; |
|
|
left: 50%; |
|
|
top: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
color: white; |
|
|
background: rgba(0,0,0,0.5); |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 16px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans"> |
|
|
|
|
|
<nav class="bg-green-800 text-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-leaf text-2xl text-green-300"></i> |
|
|
<span class="text-xl font-bold">GreenScape</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button id="mobile-menu-button" class="md:hidden focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
|
|
|
|
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="hover:text-green-300 transition">Home</a> |
|
|
<a href="#services" class="hover:text-green-300 transition">Services</a> |
|
|
<a href="#gallery" class="hover:text-green-300 transition">Gallery</a> |
|
|
<a href="#testimonials" class="hover:text-green-300 transition">Testimonials</a> |
|
|
<a href="#contact" class="hover:text-green-300 transition">Contact</a> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:block"> |
|
|
<a href="#contact" class="bg-green-600 hover:bg-green-500 px-4 py-2 rounded-lg font-medium transition">Get a Quote</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-green-700 px-4 py-2"> |
|
|
<a href="#home" class="block py-2 hover:text-green-300 transition">Home</a> |
|
|
<a href="#services" class="block py-2 hover:text-green-300 transition">Services</a> |
|
|
<a href="#gallery" class="block py-2 hover:text-green-300 transition">Gallery</a> |
|
|
<a href="#testimonials" class="block py-2 hover:text-green-300 transition">Testimonials</a> |
|
|
<a href="#contact" class="block py-2 hover:text-green-300 transition">Contact</a> |
|
|
<a href="#contact" class="block bg-green-600 hover:bg-green-500 px-4 py-2 rounded-lg font-medium my-2 text-center transition">Get a Quote</a> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="hero min-h-screen flex items-center justify-center text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6">Transform Your Outdoor Space</h1> |
|
|
<p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Professional yard maintenance and landscaping services to enhance your property's beauty and value.</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<a href="#contact" class="bg-green-600 hover:bg-green-500 px-6 py-3 rounded-lg font-medium text-lg transition">Free Consultation</a> |
|
|
<a href="#services" class="bg-white hover:bg-gray-100 text-green-800 px-6 py-3 rounded-lg font-medium text-lg transition">Our Services</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
|
|
<h2 class="text-3xl font-bold text-green-800 mb-4">About GreenScape</h2> |
|
|
<p class="text-gray-700 mb-4">With over 15 years of experience in the landscaping industry, GreenScape is dedicated to creating and maintaining beautiful outdoor spaces that reflect your style and enhance your property's value.</p> |
|
|
<p class="text-gray-700 mb-6">Our team of certified professionals combines creativity with technical expertise to deliver exceptional results for both residential and commercial properties.</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-600 mr-2"></i> |
|
|
<span>Licensed & Insured</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-600 mr-2"></i> |
|
|
<span>Eco-Friendly Practices</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-600 mr-2"></i> |
|
|
<span>Free Estimates</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="before-after-container h-96"> |
|
|
<img src="https://images.unsplash.com/photo-1600566752227-8f3b45d6fbbf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Before landscaping" class="w-full h-full object-cover"> |
|
|
<div class="before-after-slider"> |
|
|
<img src="https://images.unsplash.com/photo-1600566752355-35792bedcfea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="After landscaping" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="slider-handle"></div> |
|
|
</div> |
|
|
<div class="flex justify-between mt-2 text-sm text-gray-600"> |
|
|
<span>Before</span> |
|
|
<span>After</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="bg-gray-100 py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-green-800 mb-4">Our Services</h2> |
|
|
<p class="text-gray-700 max-w-2xl mx-auto">Comprehensive landscaping and yard maintenance solutions tailored to your needs.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="h-48 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Landscape Design" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-pencil-ruler text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-green-800">Landscape Design</h3> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">Custom landscape designs that transform your outdoor space into a beautiful, functional oasis.</p> |
|
|
<ul class="text-gray-600 space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Custom planting plans</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Hardscape integration</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>3D visualizations</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="h-48 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1600679472829-3044539ce8ed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Lawn Maintenance" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-leaf text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-green-800">Lawn Maintenance</h3> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">Regular lawn care services to keep your grass healthy, green, and looking its best all year round.</p> |
|
|
<ul class="text-gray-600 space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Mowing & edging</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Fertilization</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Aeration & overseeding</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="h-48 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2089&q=80" alt="Tree & Shrub Care" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-tree text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-green-800">Tree & Shrub Care</h3> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">Expert care for your trees and shrubs to promote health, beauty, and longevity.</p> |
|
|
<ul class="text-gray-600 space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Pruning & trimming</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Disease treatment</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Removal & stump grinding</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="h-48 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Irrigation Systems" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-tint text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-green-800">Irrigation Systems</h3> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">Smart watering solutions to keep your landscape lush while conserving water.</p> |
|
|
<ul class="text-gray-600 space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>System design & installation</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Repairs & maintenance</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Smart controller upgrades</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="h-48 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Seasonal Cleanups" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-broom text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-green-800">Seasonal Cleanups</h3> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">Prepare your property for each season with our comprehensive cleanup services.</p> |
|
|
<ul class="text-gray-600 space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Leaf removal</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Mulching & bed maintenance</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Snow removal (winter)</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="h-48 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2089&q=80" alt="Commercial Services" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-building text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-green-800">Commercial Services</h3> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">Professional landscaping solutions for businesses and commercial properties.</p> |
|
|
<ul class="text-gray-600 space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Property maintenance</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Snow & ice management</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Holiday decorations</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="gallery" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-green-800 mb-4">Our Work</h2> |
|
|
<p class="text-gray-700 max-w-2xl mx-auto">See the transformations we've created for our satisfied clients.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> |
|
|
<div class="overflow-hidden rounded-lg shadow-md"> |
|
|
<img src="https://images.unsplash.com/photo-1600566752227-8f3b45d6fbbf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Project 1" class="w-full h-64 object-cover hover:scale-105 transition duration-500"> |
|
|
</div> |
|
|
<div class="overflow-hidden rounded-lg shadow-md"> |
|
|
<img src="https://images.unsplash.com/photo-1600566752355-35792bedcfea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Project 2" class="w-full h-64 object-cover hover:scale-105 transition duration-500"> |
|
|
</div> |
|
|
<div class="overflow-hidden rounded-lg shadow-md"> |
|
|
<img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Project 3" class="w-full h-64 object-cover hover:scale-105 transition duration-500"> |
|
|
</div> |
|
|
<div class="overflow-hidden rounded-lg shadow-md"> |
|
|
<img src="https://images.unsplash.com/photo-1600679472829-3044539ce8ed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Project 4" class="w-full h-64 object-cover hover:scale-105 transition duration-500"> |
|
|
</div> |
|
|
<div class="overflow-hidden rounded-lg shadow-md"> |
|
|
<img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Project 5" class="w-full h-64 object-cover hover:scale-105 transition duration-500"> |
|
|
</div> |
|
|
<div class="overflow-hidden rounded-lg shadow-md"> |
|
|
<img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Project 6" class="w-full h-64 object-cover hover:scale-105 transition duration-500"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-8"> |
|
|
<a href="#contact" class="inline-block bg-green-600 hover:bg-green-500 text-white px-6 py-3 rounded-lg font-medium transition">Request Your Free Estimate</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="testimonials" class="bg-gray-100 py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-green-800 mb-4">What Our Clients Say</h2> |
|
|
<p class="text-gray-700 max-w-2xl mx-auto">Don't just take our word for it - hear from our satisfied customers.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="testimonial-card bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Sarah Johnson</h4> |
|
|
<div class="flex 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> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 italic">"GreenScape transformed our backyard into a paradise. Their attention to detail and creative design exceeded our expectations. We enjoy our outdoor space now more than ever!"</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="testimonial-card bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Thompson" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Michael Thompson</h4> |
|
|
<div class="flex 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> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 italic">"The lawn maintenance team is punctual, professional, and does an outstanding job. Our yard has never looked better. Highly recommend their services!"</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="testimonial-card bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Lisa Chen" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Lisa Chen</h4> |
|
|
<div class="flex 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> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 italic">"From the initial consultation to the final installation, GreenScape was a pleasure to work with. They listened to our needs and delivered a landscape that fits our lifestyle perfectly."</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-green-700 text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Ready to Transform Your Outdoor Space?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Contact us today for a free consultation and estimate. Let's create the yard of your dreams together!</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<a href="tel:+15551234567" class="bg-white hover:bg-gray-100 text-green-800 px-6 py-3 rounded-lg font-medium text-lg transition"> |
|
|
<i class="fas fa-phone mr-2"></i> (555) 123-4567 |
|
|
</a> |
|
|
<a href="#contact" class="bg-green-800 hover:bg-green-600 px-6 py-3 rounded-lg font-medium text-lg transition"> |
|
|
<i class="fas fa-envelope mr-2"></i> Get a Quote |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
|
|
<h2 class="text-3xl font-bold text-green-800 mb-4">Contact Us</h2> |
|
|
<p class="text-gray-700 mb-6">Have questions about our services or ready to schedule an appointment? Reach out to us using the form or contact information below.</p> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-map-marker-alt text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Address</h4> |
|
|
<p class="text-gray-700">123 Greenway Blvd, Garden City, GC 12345</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-phone text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Phone</h4> |
|
|
<p class="text-gray-700">(555) 123-4567</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-envelope text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Email</h4> |
|
|
<p class="text-gray-700">[email protected]</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-clock text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Hours</h4> |
|
|
<p class="text-gray-700">Monday - Friday: 8:00 AM - 5:00 PM</p> |
|
|
<p class="text-gray-700">Saturday: 9:00 AM - 2:00 PM</p> |
|
|
<p class="text-gray-700">Sunday: Closed</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h4 class="font-bold text-gray-800 mb-4">Follow Us</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-green-100 hover:bg-green-200 w-10 h-10 rounded-full flex items-center justify-center transition"> |
|
|
<i class="fab fa-facebook-f text-green-600"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-green-100 hover:bg-green-200 w-10 h-10 rounded-full flex items-center justify-center transition"> |
|
|
<i class="fab fa-instagram text-green-600"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-green-100 hover:bg-green-200 w-10 h-10 rounded-full flex items-center justify-center transition"> |
|
|
<i class="fab fa-twitter text-green-600"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-green-100 hover:bg-green-200 w-10 h-10 rounded-full flex items-center justify-center transition"> |
|
|
<i class="fab fa-pinterest-p text-green-600"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2"> |
|
|
<form class="bg-gray-100 p-6 rounded-lg"> |
|
|
<div class="mb-4"> |
|
|
<label for="name" class="block text-gray-700 font-medium mb-2">Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="email" class="block text-gray-700 font-medium mb-2">Email</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="phone" class="block text-gray-700 font-medium mb-2">Phone</label> |
|
|
<input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="service" class="block text-gray-700 font-medium mb-2">Service Interested In</label> |
|
|
<select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> |
|
|
<option value="">Select a service</option> |
|
|
<option value="design">Landscape Design</option> |
|
|
<option value="maintenance">Lawn Maintenance</option> |
|
|
<option value="treecare">Tree & Shrub Care</option> |
|
|
<option value="irrigation">Irrigation Systems</option> |
|
|
<option value="cleanups">Seasonal Cleanups</option> |
|
|
<option value="commercial">Commercial Services</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="message" class="block text-gray-700 font-medium mb-2">Message</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-green-600 hover:bg-green-500 text-white px-6 py-3 rounded-lg font-medium transition">Send Message</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-green-900 text-white py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center space-x-2 mb-4 md:mb-0"> |
|
|
<i class="fas fa-leaf text-2xl text-green-300"></i> |
|
|
<span class="text-xl font-bold">GreenScape</span> |
|
|
</div> |
|
|
|
|
|
<div class="text-center md:text-right"> |
|
|
<p>© 2023 GreenScape Landscaping. All rights reserved.</p> |
|
|
<p class="text-sm text-green-300 mt-1">Serving the community with quality landscaping since 2008.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const container = document.querySelector('.before-after-container'); |
|
|
const slider = document.querySelector('.before-after-slider'); |
|
|
const handle = document.querySelector('.slider-handle'); |
|
|
|
|
|
if (container && slider && handle) { |
|
|
let isDragging = false; |
|
|
|
|
|
handle.addEventListener('mousedown', function(e) { |
|
|
isDragging = true; |
|
|
e.preventDefault(); |
|
|
}); |
|
|
|
|
|
document.addEventListener('mousemove', function(e) { |
|
|
if (!isDragging) return; |
|
|
|
|
|
const containerRect = container.getBoundingClientRect(); |
|
|
let x = e.clientX - containerRect.left; |
|
|
|
|
|
|
|
|
x = Math.max(0, Math.min(x, containerRect.width)); |
|
|
|
|
|
const percent = (x / containerRect.width) * 100; |
|
|
|
|
|
slider.style.width = `${percent}%`; |
|
|
handle.style.left = `${percent}%`; |
|
|
}); |
|
|
|
|
|
document.addEventListener('mouseup', function() { |
|
|
isDragging = false; |
|
|
}); |
|
|
|
|
|
|
|
|
handle.addEventListener('touchstart', function(e) { |
|
|
isDragging = true; |
|
|
e.preventDefault(); |
|
|
}); |
|
|
|
|
|
document.addEventListener('touchmove', function(e) { |
|
|
if (!isDragging) return; |
|
|
|
|
|
const containerRect = container.getBoundingClientRect(); |
|
|
let x = e.touches[0].clientX - containerRect.left; |
|
|
|
|
|
|
|
|
x = Math.max(0, Math.min(x, containerRect.width)); |
|
|
|
|
|
const percent = (x / containerRect.width) * 100; |
|
|
|
|
|
slider.style.width = `${percent}%`; |
|
|
handle.style.left = `${percent}%`; |
|
|
}); |
|
|
|
|
|
document.addEventListener('touchend', function() { |
|
|
isDragging = false; |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
targetElement.scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
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=mikeschlottig/greenscape-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
