|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Paws & Relax - Premium Dog Sitting Services</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
} |
|
|
.service-card:hover { |
|
|
transform: translateY(-10px); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.floating { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
@keyframes floating { |
|
|
0% { transform: translate(0, 0px); } |
|
|
50% { transform: translate(0, -15px); } |
|
|
100% { transform: translate(0, -0px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-lg fixed w-full z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<div class="flex justify-between items-center py-4"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="heart" class="text-purple-600 w-8 h-8 mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-800">Paws & Relax</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="text-gray-600 hover:text-purple-600 transition duration-300">Home</a> |
|
|
<a href="#services" class="text-gray-600 hover:text-purple-600 transition duration-300">Services</a> |
|
|
<a href="#about" class="text-gray-600 hover:text-purple-600 transition duration-300">About</a> |
|
|
<a href="#testimonials" class="text-gray-600 hover:text-purple-600 transition duration-300">Reviews</a> |
|
|
<a href="#contact" class="text-gray-600 hover:text-purple-600 transition duration-300">Contact</a> |
|
|
</div> |
|
|
<button class="bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition duration-300"> |
|
|
Book Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="gradient-bg min-h-screen flex items-center pt-20"> |
|
|
<div class="max-w-7xl mx-auto px-4 py-20"> |
|
|
<div class="grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div class="text-white"> |
|
|
<h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight"> |
|
|
Your Best Friend's<br> |
|
|
<span class="text-yellow-300">Second Home</span> |
|
|
</h1> |
|
|
<p class="text-xl mb-8 text-purple-100"> |
|
|
Professional dog sitting services with love, care, and lots of tail wags. |
|
|
Your furry family members deserve the best while you're away. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<button class="bg-yellow-400 text-purple-900 px-8 py-4 rounded-full font-semibold hover:bg-yellow-300 transition duration-300 text-lg"> |
|
|
Book a Sitter |
|
|
</button> |
|
|
<button class="border-2 border-white text-white px-8 py-4 rounded-full font-semibold hover:bg-white hover:text-purple-900 transition duration-300 text-lg"> |
|
|
Learn More |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="floating"> |
|
|
<img src="http://static.photos/pets/1200x630/1" alt="Happy Dog" class="rounded-3xl shadow-2xl"> |
|
|
</div> |
|
|
<div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-2xl shadow-lg"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-3"> |
|
|
<i data-feather="check" class="text-green-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-600">Trusted by</p> |
|
|
<p class="font-bold text-gray-800">500+ Happy Paws</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-20 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold text-gray-800 mb-4">Our Paw-some Services</h2> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto"> |
|
|
From daily walks to overnight stays, we've got everything your furry friend needs |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="service-card bg-gradient-to-br from-purple-50 to-pink-50 p-8 rounded-3xl shadow-lg border border-purple-100"> |
|
|
<div class="w-16 h-16 bg-purple-600 rounded-2xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="home" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-4">In-Home Sitting</h3> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Your dog stays in their familiar environment with all the comforts of home |
|
|
</p> |
|
|
<ul class="space-y-2 mb-6"> |
|
|
<li class="flex items-center text-gray-700"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> |
|
|
24/7 supervision |
|
|
</li> |
|
|
<li class="flex items-center text-gray-700"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> |
|
|
Regular photo updates |
|
|
</li> |
|
|
<li class="flex items-center text-gray-700"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> |
|
|
Medication administration |
|
|
</li> |
|
|
</ul> |
|
|
<div class="text-3xl font-bold text-purple-600">$45<span class="text-lg text-gray-600">/day</span></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-gradient-to-br from-blue-50 to-cyan-50 p-8 rounded-3xl shadow-lg border border-blue-100 transform scale-105"> |
|
|
<div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="sun" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-4">Day Care</h3> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Perfect for working pet parents who want their dogs to socialize and play |
|
|
</p> |
|
|
<ul class="space-y-2 mb-6"> |
|
|
<li class="flex items-center text-gray-700"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> |
|
|
Group play sessions |
|
|
</li> |
|
|
<li class="flex items-center text-gray-700"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> |
|
|
Individual attention |
|
|
</li> |
|
|
<li class="flex items-center text-gray-700"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> |
|
|
Nap time included |
|
|
</li> |
|
|
</ul> |
|
|
<div class="text-3xl font-bold text-blue-600">$35<span class="text-lg text-gray-600">/day</span></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-gradient-to-br from-green-50 to-emerald-50 p-8 rounded-3xl shadow-lg border border-green-100"> |
|
|
<div class="w-16 h-16 bg-green-600 rounded-2xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="map-pin" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-4">Dog Walking</h3> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Regular exercise and potty breaks to keep your dog happy and healthy |
|
|
</p> |
|
|
<ul class="space-y-2 mb-6"> |
|
|
<li class="flex items-center text-gray-700"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> |
|
|
30-60 minute walks |
|
|
</li> |
|
|
<li class="flex items-center text-gray-700"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> |
|
|
GPS tracked routes |
|
|
</li> |
|
|
<li class="flex items-center text-gray-700"> |
|
|
<i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> |
|
|
Fresh water provided |
|
|
</li> |
|
|
</ul> |
|
|
<div class="text-3xl font-bold text-green-600">$20<span class="text-lg text-gray-600">/walk</span></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<h2 class="text-4xl font-bold text-gray-800 mb-6">Why Choose Paws & Relax?</h2> |
|
|
<p class="text-lg text-gray-600 mb-8"> |
|
|
We're not just dog sitters - we're passionate animal lovers dedicated to providing |
|
|
the highest quality care for your furry family members. |
|
|
</p> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4 mt-1"> |
|
|
<i data-feather="shield" class="text-purple-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">Fully Vetted & Insured</h3> |
|
|
<p class="text-gray-600">All our sitters undergo thorough background checks and are fully insured.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4 mt-1"> |
|
|
<i data-feather="award" class="text-blue-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">Certified Professionals</h3> |
|
|
<p class="text-gray-600">Our team includes certified dog trainers and pet first aid specialists.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4 mt-1"> |
|
|
<i data-feather="heart" class="text-green-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">Personalized Care</h3> |
|
|
<p class="text-gray-600">We tailor our services to meet your dog's unique needs and personality.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<img src="http://static.photos/pets/640x360/2" alt="Dog playing" class="rounded-2xl shadow-lg"> |
|
|
<img src="http://static.photos/pets/640x360/3" alt="Dog cuddling" class="rounded-2xl shadow-lg mt-8"> |
|
|
<img src="http://static.photos/pets/640x360/4" alt="Dog walking" class="rounded-2xl shadow-lg"> |
|
|
<img src="http://static.photos/pets/640x360/5" alt="Happy dog" class="rounded-2xl shadow-lg mt-8"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="testimonials" class="py-20 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold text-gray-800 mb-4">Happy Tails & Reviews</h2> |
|
|
<p class="text-xl text-gray-600">See what other pet parents are saying about our services</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-3xl border border-gray-200"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="http://static.photos/people/200x200/1" alt="Sarah M." class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Sarah M.</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 italic"> |
|
|
"I was so nervous leaving my golden retriever for the first time, but Paws & Relax made it so easy! |
|
|
The daily photo updates and videos showed me how much fun he was having. Will definitely book again!" |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-3xl border border-gray-200"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="http://static.photos/people/200x200/2" alt="Mike R." class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Mike R.</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 italic"> |
|
|
"Our anxious rescue dog usually struggles with new people, but she warmed up to her sitter immediately. |
|
|
The care and patience shown was exceptional. Highly recommend!" |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-3xl border border-gray-200"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="http://static.photos/people/200x200/3" alt="Jessica L." class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Jessica L.</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 italic"> |
|
|
"Professional, reliable, and so loving with our two dogs. The detailed reports after each visit |
|
|
showed us exactly how their day went. Couldn't be happier with the service!" |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="gradient-bg py-20"> |
|
|
<div class="max-w-4xl mx-auto text-center px-4"> |
|
|
<h2 class="text-4xl font-bold text-white mb-6">Ready to Give Your Dog the Best Care?</h2> |
|
|
<p class="text-xl text-purple-100 mb-8"> |
|
|
Join hundreds of satisfied pet parents who trust us with their furry family members |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center"> |
|
|
<button class="bg-yellow-400 text-purple-900 px-8 py-4 rounded-full font-semibold hover:bg-yellow-300 transition duration-300 text-lg"> |
|
|
Get Started Today |
|
|
</button> |
|
|
<button class="border-2 border-white text-white px-8 py-4 rounded-full font-semibold hover:bg-white hover:text-purple-900 transition duration-300 text-lg"> |
|
|
Call Us: (555) 123-PAWS |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i data-feather="heart" class="text-purple-400 w-6 h-6 mr-2"></i> |
|
|
<span class="text-xl font-bold">Paws & Relax</span> |
|
|
</div> |
|
|
<p class="text-gray-400"> |
|
|
Premium dog sitting services with love, care, and professional expertise. |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-lg mb-4">Services</h3> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-white transition duration-300">In-Home Sitting</a></li> |
|
|
<li><a href="#" class="hover:text-white transition duration-300">Day Care</a></li> |
|
|
<li><a href="#" class="hover:text-white transition duration-300">Dog Walking</a></li> |
|
|
<li><a href="#" class="hover:text-white transition duration-300">Pet Taxi</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-lg mb-4">Company</h3> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-white transition duration-300">About Us</a></li> |
|
|
<li><a href="#" class="hover:text-white transition duration-300">Careers</a></li> |
|
|
<li><a href="#" class="hover:text-white transition duration-300">Blog</a></li> |
|
|
<li><a href="#" class="hover:text-white transition duration-300">Press</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-lg mb-4">Contact</h3> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="mail" class="w-4 h-4 mr-2"></i> |
|
|
<span>hello@pawsandrelax.com</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="phone" class="w-4 h-4 mr-2"></i> |
|
|
<span>(555) 123-PAWS</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="map-pin" class="w-4 h-4 mr-2"></i> |
|
|
<span>123 Dog Street, Petville</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2024 Paws & Relax. All rights reserved. Made with ❤️ for dogs everywhere.</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.NET({ |
|
|
el: "#home", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x764ba2, |
|
|
backgroundColor: 0x667eea, |
|
|
points: 12.00, |
|
|
maxDistance: 22.00, |
|
|
spacing: 18.00 |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<script>feather.replace();</script> |
|
|
</body> |
|
|
</html> |
|
|
|
