|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Wildish | Ecological Landscaping in Detroit Metro</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
} |
|
|
<style> |
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, rgba(45,80,22,0.9) 0%, rgba(184,134,11,0.8) 100%); |
|
|
} |
|
|
.service-card:hover { |
|
|
transform: translateY(-5px); |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.before-after-container { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.before-after-slider { |
|
|
position: absolute; |
|
|
width: 4px; |
|
|
height: 100%; |
|
|
background: #2D5016; |
|
|
left: 50%; |
|
|
top: 0; |
|
|
transform: translateX(-50%); |
|
|
cursor: ew-resize; |
|
|
} |
|
|
.before-after-slider::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 50%; |
|
|
top: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
background: white; |
|
|
border: 4px solid #2D5016; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.2); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans leading-relaxed text-gray-800"> |
|
|
|
|
|
<nav class="bg-white shadow-md sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex justify-between items-center py-4"> |
|
|
<a href="#home" class="flex items-center space-x-2"> |
|
|
<div class="relative"> |
|
|
<span class="text-2xl font-bold text-green-800">WILDISH</span> |
|
|
<div class="absolute -right-1 -top-1 w-6 h-6 bg-pink-500 rounded-full flex items-center justify-center"> |
|
|
<div class="w-4 h-4 bg-white rounded-full flex items-center justify-center"> |
|
|
<div class="w-2 h-2 bg-pink-700 rounded-full animate-blink"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-full h-2 mt-1 flex justify-center"> |
|
|
<div class="w-8 h-1 bg-green-700 rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-sm text-amber-700 hidden md:block">SE Michigan Specialists</span> |
|
|
</a> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="text-green-800 hover:text-amber-700 font-medium">Home</a> |
|
|
<a href="#services" class="text-green-800 hover:text-amber-700 font-medium">Services</a> |
|
|
<a href="#destroy" class="text-green-800 hover:text-amber-700 font-medium bg-amber-100 px-4 py-1 rounded-full">Destroy Your Lawn</a> |
|
|
<a href="#portfolio" class="text-green-800 hover:text-amber-700 font-medium">Portfolio</a> |
|
|
<a href="#about" class="text-green-800 hover:text-amber-700 font-medium">About</a> |
|
|
<a href="#contact" class="bg-green-800 text-white px-4 py-1 rounded-full hover:bg-amber-700 transition">Contact</a> |
|
|
</div> |
|
|
<button class="md:hidden text-green-800 text-2xl" id="menu-toggle"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:hidden hidden py-2" id="mobile-menu"> |
|
|
<a href="#home" class="block py-2 text-green-800 hover:bg-green-50 px-4">Home</a> |
|
|
<a href="#services" class="block py-2 text-green-800 hover:bg-green-50 px-4">Services</a> |
|
|
<a href="#destroy" class="block py-2 text-green-800 hover:bg-green-50 px-4">Destroy Your Lawn</a> |
|
|
<a href="#portfolio" class="block py-2 text-green-800 hover:bg-green-50 px-4">Portfolio</a> |
|
|
<a href="#about" class="block py-2 text-green-800 hover:bg-green-50 px-4">About</a> |
|
|
<a href="#contact" class="block py-2 text-green-800 hover:bg-green-50 px-4">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="hero-gradient text-green-800 py-20 md:py-32 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-4 z-10 relative"> |
|
|
<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 leading-tight mb-4">Michigan-Native Landscaping</h1> |
|
|
<p class="text-lg md:text-xl mb-8">Designed specifically for Southeast Michigan's climate and ecosystems. Let's work with nature, not against it.</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<a href="#destroy" class="bg-amber-700 hover:bg-amber-800 text-white font-bold py-3 px-6 rounded-full text-center transition">Destroy Your Lawn Special</a> |
|
|
<a href="#services" class="bg-white hover:bg-gray-100 text-green-800 font-bold py-3 px-6 rounded-full text-center transition">Explore Services</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative w-full max-w-md h-64 md:h-80 bg-white rounded-xl shadow-xl overflow-hidden"> |
|
|
|
|
|
<div class="before-after-container w-full h-full"> |
|
|
<div id="before-image" class="w-full h-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1516496636080-14fb876e029d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80');"></div> |
|
|
<div id="after-image" class="w-full h-full bg-cover bg-center absolute top-0 left-0" style="background-image: url('https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80'); width: 50%;"></div> |
|
|
<div class="before-after-slider" id="slider"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute inset-0 opacity-20"> |
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-green-900 mix-blend-multiply"></div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white py-12"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Deep Roots in SE Michigan</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto mb-8"> |
|
|
Our team has been studying and working with Michigan's native ecosystems for over a decade. We know exactly which plants will thrive in your specific microclimate. |
|
|
</p> |
|
|
<div class="flex flex-wrap justify-center gap-8"> |
|
|
<div class="bg-green-50 px-6 py-3 rounded-full text-green-800 font-medium flex items-center"> |
|
|
<i class="fas fa-map-marker-alt text-amber-700 mr-2"></i> |
|
|
Oakland County Expertise |
|
|
</div> |
|
|
<div class="bg-green-50 px-6 py-3 rounded-full text-green-800 font-medium flex items-center"> |
|
|
<i class="fas fa-seedling text-amber-700 mr-2"></i> |
|
|
Native Plants Mostly |
|
|
</div> |
|
|
<div class="bg-green-50 px-6 py-3 rounded-full text-green-800 font-medium flex items-center"> |
|
|
<i class="fas fa-hands-helping text-amber-700 mr-2"></i> |
|
|
Local Ecosystems First |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-gray-100 py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">The Problem With Traditional Landscaping</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Conventional lawns are ecological deserts that require constant maintenance while providing almost no wildlife value.</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="text-amber-700 text-3xl mb-4"><i class="fas fa-tint"></i></div> |
|
|
<h3 class="font-bold text-xl text-green-800 mb-2">Wastes Water</h3> |
|
|
<p class="text-gray-600">9 billion gallons of water used daily for lawn irrigation in the U.S. Our native landscapes require little to no extra watering.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="text-amber-700 text-3xl mb-4"><i class="fas fa-bug"></i></div> |
|
|
<h3 class="font-bold text-xl text-green-800 mb-2">Toxic Chemicals</h3> |
|
|
<p class="text-gray-600">70 million pounds of pesticides applied to lawns annually. We use organic methods that support pollinators and soil health.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="text-amber-700 text-3xl mb-4"><i class="fas fa-leaf"></i></div> |
|
|
<h3 class="font-bold text-xl text-green-800 mb-2">No Habitat Value</h3> |
|
|
<p class="text-gray-600">Monoculture lawns support almost no wildlife. Native plant landscapes support 35x more biodiversity according to research.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Our Ecological Services</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Specialized solutions for transforming your property into a thriving ecosystem.</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="service-card bg-white p-6 rounded-lg shadow-md border border-gray-100 hover:border-green-200 transition"> |
|
|
<div class="text-green-800 text-4xl mb-4"><i class="fas fa-tree"></i></div> |
|
|
<h3 class="font-bold text-xl text-green-800 mb-3">Native Habitat Restoration</h3> |
|
|
<p class="text-gray-600 mb-4">Transform your property into a thriving native ecosystem with our science-based plant community designs.</p> |
|
|
<ul class="text-gray-600 text-sm space-y-1 mb-4"> |
|
|
<li class="flex items-start"><i class="fas fa-check text-amber-700 mr-2 mt-1"></i> Site assessment & mapping</li> |
|
|
<li class="flex items-start"><i class="fas fa-check text-amber-700 mr-2 mt-1"></i> Native plant selection</li> |
|
|
<li class="flex items-start"><i class="fas fa-check text-amber-700 mr-2 mt-1"></i> Invasive species removal</li> |
|
|
</ul> |
|
|
<a href="#contact" class="text-green-800 font-medium inline-flex items-center hover:text-amber-700 transition">Learn more <i class="fas fa-arrow-right ml-2"></i></a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white p-6 rounded-lg shadow-md border border-gray-100 hover:border-green-200 transition"> |
|
|
<div class="text-green-800 text-4xl mb-4"><i class="fas fa-spa"></i></div> |
|
|
<h3 class="font-bold text-xl text-green-800 mb-3">Low-Maintenance Design</h3> |
|
|
<p class="text-gray-600 mb-4">Beautiful, resilient native plant landscapes that require minimal care while outcompeting weeds.</p> |
|
|
<ul class="text-gray-600 text-sm space-y-1 mb-4"> |
|
|
<li class="flex items-start"><i class="fas fa-check text-amber-700 mr-2 mt-1"></i> Perennial native beds</li> |
|
|
<li class="flex items-start"><i class="fas fa-check text-amber-700 mr-2 mt-1"></i> Pollinator gardens</li> |
|
|
<li class="flex items-start"><i class="fas fa-check text-amber-700 mr-2 mt-1"></i> Wildlife corridors</li> |
|
|
</ul> |
|
|
<a href="#contact" class="text-green-800 font-medium inline-flex items-center hover:text-amber-700 transition">Learn more <i class="fas fa-arrow-right ml-2"></i></a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white p-6 rounded-lg shadow-md border border-gray-100 hover:border-green-200 transition"> |
|
|
<div class="text-green-800 text-4xl mb-4"><i class="fas fa-seedling"></i></div> |
|
|
<h3 class="font-bold text-xl text-green-800 mb-3">Re-wilding Services</h3> |
|
|
<p class="text-gray-600 mb-4">Convert lawns and unused spaces into productive, ecological landscapes with maximum biodiversity.</p> |
|
|
<ul class="text-gray-600 text-sm space-y-1 mb-4"> |
|
|
<li class="flex items-start"><i class="fas fa-check text-amber-700 mr-2 mt-1"></i> Lawn conversion</li> |
|
|
<li class="flex items-start"><i class="fas fa-check text-amber-700 mr-2 mt-1"></i> Meadow installation</li> |
|
|
<li class="flex items-start"><i class="fas fa-check text-amber-700 mr-2 mt-1"></i> Food forest design</li> |
|
|
</ul> |
|
|
<a href="#contact" class="text-green-800 font-medium inline-flex items-center hover:text-amber-700 transition">Learn more <i class="fas fa-arrow-right ml-2"></i></a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white p-6 rounded-lg shadow-md border border-gray-100 hover:border-green-200 transition"> |
|
|
<div class="text-green-800 text-4xl mb-4"><i class="fas fa-umbrella"></i></div> |
|
|
<h3 class="font-bold text-xl text-green-800 mb-3">Rain Gardens</h3> |
|
|
<p class="text-gray-600 mb-4">Beautiful stormwater solutions that protect waterways while creating unique habitat zones.</p> |
|
|
<ul class="text-gray-600 text-sm space-y-1 mb-4"> |
|
|
<li class="flex items-start"><i class="fas fa-check text-amber-700 mr-2 mt-1"></i> Water management</li> |
|
|
<li class="flex items-start"><i class="fas fa-check text-amber-700 mr-2 mt-1"></i> Native water plants</li> |
|
|
<li class="flex items-start"><i class="fas fa-check text-amber-700 mr-2 mt-1"></i> Permit assistance</li> |
|
|
</ul> |
|
|
<a href="#contact" class="text-green-800 font-medium inline-flex items-center hover:text-amber-700 transition">Learn more <i class="fas fa-arrow-right ml-2"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="destroy" class="py-16 bg-amber-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col lg:flex-row items-center"> |
|
|
<div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> |
|
|
<span class="inline-block bg-amber-700 text-white text-xs font-semibold px-3 py-1 rounded-full uppercase mb-4">Signature Service</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-6">Destroy Your Lawn Special</h2> |
|
|
<p class="text-lg text-gray-700 mb-6">Your lawn is an ecological desert. Our signature service transforms it into a vibrant native habitat that supports biodiversity while reducing your maintenance burden.</p> |
|
|
|
|
|
<div class="space-y-6 mb-8"> |
|
|
<div class="flex items-start"> |
|
|
<div class="text-amber-700 text-xl mr-4 mt-1"><i class="fas fa-check-circle"></i></div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-green-800">More Wildlife</h3> |
|
|
<p class="text-gray-700">Natives support 35 times more caterpillar species than non-native plants. Caterpillars are essential bird food — it takes 6,000-9,000 to raise one chickadee brood.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="text-amber-700 text-xl mr-4 mt-1"><i class="fas fa-check-circle"></i></div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-green-800">Less Maintenance</h3> |
|
|
<p class="text-gray-700">Established native plant communities outcompete weeds and thrive with minimal care after the first 1-2 years.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="text-amber-700 text-xl mr-4 mt-1"><i class="fas fa-check-circle"></i></div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-green-800">Year-Round Beauty</h3> |
|
|
<p class="text-gray-700">Thoughtful native plant selections provide striking beauty and interest through all seasons.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<a href="#contact" class="inline-block bg-green-800 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-full transition">Book Consultation</a> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<h3 class="font-bold text-xl text-green-800 mb-6 text-center">Destroy Your Lawn Special!</h3> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="border border-green-200 rounded-lg p-4 hover:border-green-300 transition"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h4 class="font-bold text-green-800">Starter Package</h4> |
|
|
<span class="bg-green-100 text-green-800 text-sm font-bold px-3 py-1 rounded-full">500 sq ft</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mb-4">Let's get rid of that lawn and install your dream garden!.</p> |
|
|
<div class="text-2xl font-bold text-green-800 mb-4">Starts at $10k</div |
|
|
<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=nock2/wildish" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
