WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Paws & Care | Professional Pet Sitting Services</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"> <script> tailwind.config = { theme: { extend: { colors: { primary: '#FF9AA2', secondary: '#FFB7B2', accent: '#FFDAC1', light: '#E2F0CB', dark: '#B5EAD7', } } } } </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; } .hero-image { background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('https://images.unsplash.com/photo-1586671267731-da2cf3ceeb80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1498&q=80'); background-size: cover; background-position: center; } .service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); } .testimonial-card { transition: all 0.3s ease; } .testimonial-card:hover { transform: scale(1.03); } .pricing-card:hover { transform: scale(1.05); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } </style> </head> <body class="bg-gray-50"> <!-- Navigation --> <nav class="bg-white shadow-sm 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 h-16"> <div class="flex items-center"> <div class="flex-shrink-0 flex items-center"> <i class="fas fa-paw text-3xl text-primary mr-2"></i> <span class="text-xl font-bold text-gray-800">Paws & Care</span> </div> </div> <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> <a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-primary text-sm font-medium">Home</a> <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-secondary text-sm font-medium">Our Sitters</a> <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-secondary text-sm font-medium">How It Works</a> <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-secondary text-sm font-medium">Services</a> <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-secondary text-sm font-medium">Pricing</a> <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-secondary text-sm font-medium">Blog</a> <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-secondary text-sm font-medium">Contact</a> </div> <div class="-mr-2 flex items-center md:hidden"> <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary" aria-controls="mobile-menu" aria-expanded="false"> <span class="sr-only">Open main menu</span> <i class="fas fa-bars"></i> </button> </div> </div> </div> <!-- Mobile menu --> <div class="md:hidden hidden" id="mobile-menu"> <div class="pt-2 pb-3 space-y-1"> <a href="#" class="bg-primary text-white block pl-3 pr-4 py-2 border-l-4 border-primary text-base font-medium">Home</a> <a href="#" class="text-gray-500 hover:bg-secondary hover:text-white block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">Our Sitters</a> <a href="#" class="text-gray-500 hover:bg-secondary hover:text-white block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">How It Works</a> <a href="#" class="text-gray-500 hover:bg-secondary hover:text-white block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">Services</a> <a href="#" class="text-gray-500 hover:bg-secondary hover:text-white block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">Pricing</a> <a href="#" class="text-gray-500 hover:bg-secondary hover:text-white block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">Blog</a> <a href="#" class="text-gray-500 hover:bg-secondary hover:text-white block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">Contact</a> </div> </div> </nav> <!-- Hero Section --> <div class="hero-image relative overflow-hidden"> <div class="max-w-7xl mx-auto"> <div class="relative z-10 pb-20 sm:pb-24 md:pb-32 lg:max-w-2xl lg:w-full lg:pb-40 xl:pb-48"> <div class="pt-10 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden"> <div class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"> <div class="sm:text-center lg:text-left"> <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl"> <span class="block">Your Pets Deserve</span> <span class="block text-primary">The Best Care</span> </h1> <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> Trusted pet sitting, walking, and boarding services in your neighborhood. We treat your pets like family! </p> <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> <div class="rounded-md shadow"> <a href="#booking" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-secondary md:py-4 md:text-lg md:px-10"> Book Now </a> </div> <div class="mt-3 sm:mt-0 sm:ml-3"> <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Meet Our Sitters </a> </div> </div> </div> </div> </div> </div> </div> <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1583511655826-05700d52f4d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=988&q=80" alt="Happy dog with pet sitter"> </div> </div> <!-- Services Section --> <div class="py-12 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center"> <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> Our Pet Care Services </h2> <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> We offer a variety of services to keep your pets happy and healthy </p> </div> <div class="mt-10"> <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> <!-- Service 1 --> <div class="service-card pt-6 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105"> <div class="flow-root bg-light rounded-lg px-6 pb-8 h-full"> <div class="-mt-6"> <div> <span class="inline-flex items-center justify-center p-3 bg-primary rounded-md shadow-lg"> <i class="fas fa-dog text-white text-2xl"></i> </span> </div> <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Dog Walking</h3> <p class="mt-5 text-base text-gray-500"> Daily walks to keep your dog active and happy. Our sitters provide exercise, playtime, and potty breaks. </p> <ul class="mt-4 space-y-2"> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-2 text-sm text-gray-500">30-60 minute walks</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-2 text-sm text-gray-500">GPS tracked routes</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-2 text-sm text-gray-500">Photo updates</p> </li> </ul> </div> </div> </div> <!-- Service 2 --> <div class="service-card pt-6 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105"> <div class="flow-root bg-accent rounded-lg px-6 pb-8 h-full"> <div class="-mt-6"> <div> <span class="inline-flex items-center justify-center p-3 bg-secondary rounded-md shadow-lg"> <i class="fas fa-home text-white text-2xl"></i> </span> </div> <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Overnight Care</h3> <p class="mt-5 text-base text-gray-500"> Stay in your home to provide companionship and care while you're away. Perfect for pets who need extra attention. </p> <ul class="mt-4 space-y-2"> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-secondary"></i> </div> <p class="ml-2 text-sm text-gray-500">12-hour overnight stays</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-secondary"></i> </div> <p class="ml-2 text-sm text-gray-500">Medication administration</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-secondary"></i> </div> <p class="ml-2 text-sm text-gray-500">House sitting included</p> </li> </ul> </div> </div> </div> <!-- Service 3 --> <div class="service-card pt-6 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105"> <div class="flow-root bg-dark rounded-lg px-6 pb-8 h-full"> <div class="-mt-6"> <div> <span class="inline-flex items-center justify-center p-3 bg-accent rounded-md shadow-lg"> <i class="fas fa-clinic-medical text-white text-2xl"></i> </span> </div> <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Vet Visits</h3> <p class="mt-5 text-base text-gray-500"> We'll take your pet to vet appointments when you can't. Includes waiting time and detailed report. </p> <ul class="mt-4 space-y-2"> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-accent"></i> </div> <p class="ml-2 text-sm text-gray-500">Transportation to vet</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-accent"></i> </div> <p class="ml-2 text-sm text-gray-500">Wait time included</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-accent"></i> </div> <p class="ml-2 text-sm text-gray-500">Detailed report card</p> </li> </ul> </div> </div> </div> </div> </div> </div> </div> <!-- How It Works Section --> <div class="py-12 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:text-center"> <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> How It Works </h2> <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> Getting started with Paws & Care is simple and stress-free </p> </div> <div class="mt-10"> <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> <!-- Step 1 --> <div class="relative"> <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white"> <span class="text-xl font-bold">1</span> </div> <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Create Your Profile</p> <p class="mt-2 ml-16 text-base text-gray-500"> Tell us about your pets - their routines, preferences, and any special needs. Upload photos and vet info. </p> </div> <!-- Step 2 --> <div class="relative"> <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-secondary text-white"> <span class="text-xl font-bold">2</span> </div> <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Meet Your Sitter</p> <p class="mt-2 ml-16 text-base text-gray-500"> We'll match you with the perfect sitter. Schedule a free meet-and-greet to ensure it's a good fit. </p> </div> <!-- Step 3 --> <div class="relative"> <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-accent text-white"> <span class="text-xl font-bold">3</span> </div> <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Enjoy Peace of Mind</p> <p class="mt-2 ml-16 text-base text-gray-500"> Relax knowing your pets are in good hands. Receive photo updates and a report card after each visit. </p> </div> </div> </div> </div> </div> <!-- Testimonials Section --> <div class="py-12 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center"> <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> Happy Pets, Happy Owners </h2> <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> Don't just take our word for it - hear from our satisfied customers </p> </div> <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> <!-- Testimonial 1 --> <div class="testimonial-card bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300"> <div class="flex items-center"> <img class="w-12 h-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Sarah J."> <div class="ml-4"> <h4 class="text-lg font-medium text-gray-900">Sarah J.</h4> <div class="flex mt-1"> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> </div> </div> </div> <blockquote class="mt-4 text-gray-600"> <p>"Our golden retriever Max absolutely loves his walks with Paws & Care. The photo updates give me peace of mind while I'm at work. Highly recommend!"</p> </blockquote> </div> <!-- Testimonial 2 --> <div class="testimonial-card bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300"> <div class="flex items-center"> <img class="w-12 h-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Michael T."> <div class="ml-4"> <h4 class="text-lg font-medium text-gray-900">Michael T.</h4> <div class="flex mt-1"> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> </div> </div> </div> <blockquote class="mt-4 text-gray-600"> <p>"We travel frequently and Paws & Care has been a lifesaver. Our cat Luna gets anxious but loves her sitter Emily. The detailed reports show how well she's cared for."</p> </blockquote> </div> <!-- Testimonial 3 --> <div class="testimonial-card bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300"> <div class="flex items-center"> <img class="w-12 h-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=776&q=80" alt="Lisa M."> <div class="ml-4"> <h4 class="text-lg font-medium text-gray-900">Lisa M.</h4> <div class="flex mt-1"> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> </div> </div> </div> <blockquote class="mt-4 text-gray-600"> <p>"When I broke my leg, Paws & Care took my dog Bailey to all his vet appointments. They were so professional and caring. I don't know what I would have done without them!"</p> </blockquote> </div> </div> </div> </div> <!-- Pricing Section --> <div class="py-12 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center"> <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> Simple, Transparent Pricing </h2> <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> No hidden fees. Cancel or reschedule anytime. </p> </div> <div class="mt-10 space-y-8 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8"> <!-- Basic Plan --> <div class="pricing-card bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden transition duration-300 hover:shadow-lg"> <div class="px-6 py-8"> <h3 class="text-lg font-medium text-gray-900">Basic Care</h3> <div class="mt-4 flex items-baseline"> <span class="text-4xl font-extrabold tracking-tight">$15</span> <span class="ml-1 text-xl font-semibold text-gray-500">/walk</span> </div> <p class="mt-4 text-sm text-gray-500"> Perfect for occasional walks or check-ins </p> </div> <div class="px-6 pt-6 pb-8 bg-gray-50"> <h4 class="text-xs font-medium text-gray-900 uppercase tracking-wide">What's included</h4> <ul class="mt-6 space-y-4"> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">30-minute dog walk</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">Water refresh & treat</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">Photo update</p> </li> </ul> <div class="mt-8"> <a href="#booking" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-secondary"> Book Now </a> </div> </div> </div> <!-- Popular Plan --> <div class="pricing-card bg-white border-2 border-primary rounded-lg shadow-sm overflow-hidden transition duration-300 hover:shadow-lg transform scale-105"> <div class="px-6 py-8"> <div class="flex justify-between"> <h3 class="text-lg font-medium text-gray-900">Premium Care</h3> <span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-primary text-white"> Most Popular </span> </div> <div class="mt-4 flex items-baseline"> <span class="text-4xl font-extrabold tracking-tight">$65</span> <span class="ml-1 text-xl font-semibold text-gray-500">/day</span> </div> <p class="mt-4 text-sm text-gray-500"> Best for regular care or longer absences </p> </div> <div class="px-6 pt-6 pb-8 bg-gray-50"> <h4 class="text-xs font-medium text-gray-900 uppercase tracking-wide">What's included</h4> <ul class="mt-6 space-y-4"> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">12-hour overnight care</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">3 walks/play sessions</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">Medication administration</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">House sitting included</p> </li> </ul> <div class="mt-8"> <a href="#booking" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-secondary"> Book Now </a> </div> </div> </div> <!-- VIP Plan --> <div class="pricing-card bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden transition duration-300 hover:shadow-lg"> <div class="px-6 py-8"> <h3 class="text-lg font-medium text-gray-900">VIP Care</h3> <div class="mt-4 flex items-baseline"> <span class="text-4xl font-extrabold tracking-tight">$120</span> <span class="ml-1 text-xl font-semibold text-gray-500">/day</span> </div> <p class="mt-4 text-sm text-gray-500"> Luxury care with 24/7 attention </p> </div> <div class="px-6 pt-6 pb-8 bg-gray-50"> <h4 class="text-xs font-medium text-gray-900 uppercase tracking-wide">What's included</h4> <ul class="mt-6 space-y-4"> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">24-hour care in your home</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">Unlimited walks & play</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">Special needs care</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">Daily grooming</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">Live video updates</p> </li> </ul> <div class="mt-8"> <a href="#booking" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-secondary"> Book Now </a> </div> </div> </div> </div> </div> </div> <!-- Booking Form Section --> <div id="booking" class="py-12 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:grid lg:grid-cols-2 lg:gap-8"> <div class="mb-8 lg:mb-0"> <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> Ready to Book? </h2> <p class="mt-4 text-lg text-gray-500"> Fill out the form and we'll match you with the perfect sitter for your pets. We typically respond within 2 hours during business hours. </p> <div class="mt-8"> <div class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-phone-alt text-primary"></i> </div> <div class="ml-3"> <h3 class="text-lg font-medium text-gray-900">Prefer to call?</h3> <p class="mt-1 text-base text-gray-500"> <a href="tel:+18005551234" class="text-primary hover:text-secondary">(800) 555-1234</a> </p> </div> </div> <div class="mt-6 flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-envelope text-primary"></i> </div> <div class="ml-3"> <h3 class="text-lg font-medium text-gray-900">Email us</h3> <p class="mt-1 text-base text-gray-500"> <a href="mailto:hello@pawscare.com" class="text-primary hover:text-secondary">hello@pawscare.com</a> </p> </div> </div> </div> <div class="mt-12"> <img class="rounded-lg shadow-lg" src="https://images.unsplash.com/photo-1559190394-df5a28aab5c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1035&q=80" alt="Happy dog with sitter"> </div> </div> <div class="bg-gray-50 py-8 px-6 rounded-lg shadow-sm"> <form class="space-y-6"> <div> <label for="name" class="block text-sm font-medium text-gray-700">Your Name</label> <div class="mt-1"> <input type="text" name="name" id="name" autocomplete="name" class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"> </div> </div> <div> <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label> <div class="mt-1"> <input type="email" name="email" id="email" autocomplete="email" class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"> </div> </div> <div> <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label> <div class="mt-1"> <input type="tel" name="phone" id="phone" autocomplete="tel" class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"> </div> </div> <div> <label for="pet-type" class="block text-sm font-medium text-gray-700">Pet Type(s)</label> <div class="mt-1"> <select id="pet-type" name="pet-type" class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"> <option>Dog</option> <option>Cat</option> <option>Dog & Cat</option> <option>Small Animal</option> <option>Bird</option> <option>Reptile</option> <option>Other</option> </select> </div> </div> <div> <label for="service" class="block text-sm font-medium text-gray-700">Service Needed</label> <div class="mt-1"> <select id="service" name="service" class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"> <option>Dog Walking</option> <option>Drop-in Visits</option> <option>Overnight Care</option> <option>Pet Boarding</option> <option>Vet Visit</option> <option>Grooming Transport</option> <option>Other</option> </select> </div> </div> <div> <label for="dates" class="block text-sm font-medium text-gray-700">Dates Needed</label> <div class="mt-1"> <input type="text" name="dates" id="dates" class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md" placeholder="Select dates"> </div> </div> <div> <label for="message" class="block text-sm font-medium text-gray-700">Special Instructions</label> <div class="mt-1"> <input id="message" name="message" rows="4" class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"/> </div> </div> <div class="flex items-start"> <div class="flex-shrink-0"> <input id="agree" name="agree" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> </div> <div class="ml-3 text-sm"> <label for="agree" class="font-medium text-gray-700">I agree to the <a href="#" class="text-primary hover:text-secondary">Terms of Service</a> and <a href="#" class="text-primary hover:text-secondary">Privacy Policy</a></label> </div> </div> <div> <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> Request Booking </button> </div> </form> </div> </div> </div> </div> <!-- CTA Section --> <div class="bg-primary"> <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> <span class="block">Ready to give your pet</span> <span class="block text-secondary">the care they deserve?</span> </h2> <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> <div class="inline-flex rounded-md shadow"> <a href="#booking" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50"> Book a Sitter </a> </div> <div class="ml-3 inline-flex rounded-md shadow"> <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-secondary hover:bg-accent"> Meet Our Team </a> </div> </div> </div> </div> <!-- Footer --> <footer class="bg-gray-800"> <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8"> <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Services</h3> <ul class="mt-4 space-y-4"> <li><a href="#" class="text-base text-gray-300 hover:text-white">Dog Walking</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Pet Sitting</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Overnight Care</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Vet Visits</a></li> </ul> </div> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> <ul class="mt-4 space-y-4"> <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Our Sitters</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> </ul> </div> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3> <ul class="mt-4 space-y-4"> <li><a href="#" class="text-base text-gray-300 hover:text-white">Help Center</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Safety</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Cancellation Policy</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">FAQ</a></li> </ul> </div> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3> <ul class="mt-4 space-y-4"> <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact Us</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Partnerships</a></li> </ul> <div class="mt-6 flex space-x-6"> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-instagram"></i> </a> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-twitter"></i> </a> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-pinterest"></i> </a> </div> </div> </div> <div class="mt-12 border-t border-gray-700 pt-8"> <p class="text-base text-gray-400 text-center"> © 2023 Paws & Care. All rights reserved. </p> </div> </div> </footer> <script> // Mobile menu toggle document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() { const menu = document.getElementById('mobile-menu'); menu.classList.toggle('hidden'); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); // Form submission (example) document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); alert('Thank you for your booking request! We will contact you shortly.'); this.reset(); }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Paws & Care | Professional Pet Sitting Services</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"> <script> tailwind.config = { theme: { extend: { colors: { primary: '#FF9AA2', secondary: '#FFB7B2', accent: '#FFDAC1', light: '#E2F0CB', dark: '#B5EAD7', } } } } </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; } .hero-image { background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('https://images.unsplash.com/photo-1586671267731-da2cf3ceeb80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1498&q=80'); background-size: cover; background-position: center; } .service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); } .testimonial-card { transition: all 0.3s ease; } .testimonial-card:hover { transform: scale(1.03); } .pricing-card:hover { transform: scale(1.05); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } </style> </head> <body class="bg-gray-50"> <!-- Navigation --> <nav class="bg-white shadow-sm 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 h-16"> <div class="flex items-center"> <div class="flex-shrink-0 flex items-center"> <i class="fas fa-paw text-3xl text-primary mr-2"></i> <span class="text-xl font-bold text-gray-800">Paws & Care</span> </div> </div> <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> <a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-primary text-sm font-medium">Home</a> <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-secondary text-sm font-medium">Our Sitters</a> <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-secondary text-sm font-medium">How It Works</a> <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-secondary text-sm font-medium">Services</a> <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-secondary text-sm font-medium">Pricing</a> <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-secondary text-sm font-medium">Blog</a> <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-secondary text-sm font-medium">Contact</a> </div> <div class="-mr-2 flex items-center md:hidden"> <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary" aria-controls="mobile-menu" aria-expanded="false"> <span class="sr-only">Open main menu</span> <i class="fas fa-bars"></i> </button> </div> </div> </div> <!-- Mobile menu --> <div class="md:hidden hidden" id="mobile-menu"> <div class="pt-2 pb-3 space-y-1"> <a href="#" class="bg-primary text-white block pl-3 pr-4 py-2 border-l-4 border-primary text-base font-medium">Home</a> <a href="#" class="text-gray-500 hover:bg-secondary hover:text-white block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">Our Sitters</a> <a href="#" class="text-gray-500 hover:bg-secondary hover:text-white block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">How It Works</a> <a href="#" class="text-gray-500 hover:bg-secondary hover:text-white block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">Services</a> <a href="#" class="text-gray-500 hover:bg-secondary hover:text-white block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">Pricing</a> <a href="#" class="text-gray-500 hover:bg-secondary hover:text-white block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">Blog</a> <a href="#" class="text-gray-500 hover:bg-secondary hover:text-white block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">Contact</a> </div> </div> </nav> <!-- Hero Section --> <div class="hero-image relative overflow-hidden"> <div class="max-w-7xl mx-auto"> <div class="relative z-10 pb-20 sm:pb-24 md:pb-32 lg:max-w-2xl lg:w-full lg:pb-40 xl:pb-48"> <div class="pt-10 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden"> <div class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"> <div class="sm:text-center lg:text-left"> <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl"> <span class="block">Your Pets Deserve</span> <span class="block text-primary">The Best Care</span> </h1> <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> Trusted pet sitting, walking, and boarding services in your neighborhood. We treat your pets like family! </p> <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> <div class="rounded-md shadow"> <a href="#booking" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-secondary md:py-4 md:text-lg md:px-10"> Book Now </a> </div> <div class="mt-3 sm:mt-0 sm:ml-3"> <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Meet Our Sitters </a> </div> </div> </div> </div> </div> </div> </div> <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1583511655826-05700d52f4d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=988&q=80" alt="Happy dog with pet sitter"> </div> </div> <!-- Services Section --> <div class="py-12 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center"> <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> Our Pet Care Services </h2> <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> We offer a variety of services to keep your pets happy and healthy </p> </div> <div class="mt-10"> <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> <!-- Service 1 --> <div class="service-card pt-6 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105"> <div class="flow-root bg-light rounded-lg px-6 pb-8 h-full"> <div class="-mt-6"> <div> <span class="inline-flex items-center justify-center p-3 bg-primary rounded-md shadow-lg"> <i class="fas fa-dog text-white text-2xl"></i> </span> </div> <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Dog Walking</h3> <p class="mt-5 text-base text-gray-500"> Daily walks to keep your dog active and happy. Our sitters provide exercise, playtime, and potty breaks. </p> <ul class="mt-4 space-y-2"> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-2 text-sm text-gray-500">30-60 minute walks</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-2 text-sm text-gray-500">GPS tracked routes</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-2 text-sm text-gray-500">Photo updates</p> </li> </ul> </div> </div> </div> <!-- Service 2 --> <div class="service-card pt-6 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105"> <div class="flow-root bg-accent rounded-lg px-6 pb-8 h-full"> <div class="-mt-6"> <div> <span class="inline-flex items-center justify-center p-3 bg-secondary rounded-md shadow-lg"> <i class="fas fa-home text-white text-2xl"></i> </span> </div> <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Overnight Care</h3> <p class="mt-5 text-base text-gray-500"> Stay in your home to provide companionship and care while you're away. Perfect for pets who need extra attention. </p> <ul class="mt-4 space-y-2"> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-secondary"></i> </div> <p class="ml-2 text-sm text-gray-500">12-hour overnight stays</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-secondary"></i> </div> <p class="ml-2 text-sm text-gray-500">Medication administration</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-secondary"></i> </div> <p class="ml-2 text-sm text-gray-500">House sitting included</p> </li> </ul> </div> </div> </div> <!-- Service 3 --> <div class="service-card pt-6 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105"> <div class="flow-root bg-dark rounded-lg px-6 pb-8 h-full"> <div class="-mt-6"> <div> <span class="inline-flex items-center justify-center p-3 bg-accent rounded-md shadow-lg"> <i class="fas fa-clinic-medical text-white text-2xl"></i> </span> </div> <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Vet Visits</h3> <p class="mt-5 text-base text-gray-500"> We'll take your pet to vet appointments when you can't. Includes waiting time and detailed report. </p> <ul class="mt-4 space-y-2"> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-accent"></i> </div> <p class="ml-2 text-sm text-gray-500">Transportation to vet</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-accent"></i> </div> <p class="ml-2 text-sm text-gray-500">Wait time included</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-accent"></i> </div> <p class="ml-2 text-sm text-gray-500">Detailed report card</p> </li> </ul> </div> </div> </div> </div> </div> </div> </div> <!-- How It Works Section --> <div class="py-12 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:text-center"> <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> How It Works </h2> <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> Getting started with Paws & Care is simple and stress-free </p> </div> <div class="mt-10"> <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> <!-- Step 1 --> <div class="relative"> <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white"> <span class="text-xl font-bold">1</span> </div> <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Create Your Profile</p> <p class="mt-2 ml-16 text-base text-gray-500"> Tell us about your pets - their routines, preferences, and any special needs. Upload photos and vet info. </p> </div> <!-- Step 2 --> <div class="relative"> <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-secondary text-white"> <span class="text-xl font-bold">2</span> </div> <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Meet Your Sitter</p> <p class="mt-2 ml-16 text-base text-gray-500"> We'll match you with the perfect sitter. Schedule a free meet-and-greet to ensure it's a good fit. </p> </div> <!-- Step 3 --> <div class="relative"> <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-accent text-white"> <span class="text-xl font-bold">3</span> </div> <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Enjoy Peace of Mind</p> <p class="mt-2 ml-16 text-base text-gray-500"> Relax knowing your pets are in good hands. Receive photo updates and a report card after each visit. </p> </div> </div> </div> </div> </div> <!-- Testimonials Section --> <div class="py-12 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center"> <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> Happy Pets, Happy Owners </h2> <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> Don't just take our word for it - hear from our satisfied customers </p> </div> <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> <!-- Testimonial 1 --> <div class="testimonial-card bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300"> <div class="flex items-center"> <img class="w-12 h-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Sarah J."> <div class="ml-4"> <h4 class="text-lg font-medium text-gray-900">Sarah J.</h4> <div class="flex mt-1"> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> </div> </div> </div> <blockquote class="mt-4 text-gray-600"> <p>"Our golden retriever Max absolutely loves his walks with Paws & Care. The photo updates give me peace of mind while I'm at work. Highly recommend!"</p> </blockquote> </div> <!-- Testimonial 2 --> <div class="testimonial-card bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300"> <div class="flex items-center"> <img class="w-12 h-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Michael T."> <div class="ml-4"> <h4 class="text-lg font-medium text-gray-900">Michael T.</h4> <div class="flex mt-1"> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> </div> </div> </div> <blockquote class="mt-4 text-gray-600"> <p>"We travel frequently and Paws & Care has been a lifesaver. Our cat Luna gets anxious but loves her sitter Emily. The detailed reports show how well she's cared for."</p> </blockquote> </div> <!-- Testimonial 3 --> <div class="testimonial-card bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300"> <div class="flex items-center"> <img class="w-12 h-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=776&q=80" alt="Lisa M."> <div class="ml-4"> <h4 class="text-lg font-medium text-gray-900">Lisa M.</h4> <div class="flex mt-1"> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> </div> </div> </div> <blockquote class="mt-4 text-gray-600"> <p>"When I broke my leg, Paws & Care took my dog Bailey to all his vet appointments. They were so professional and caring. I don't know what I would have done without them!"</p> </blockquote> </div> </div> </div> </div> <!-- Pricing Section --> <div class="py-12 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center"> <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> Simple, Transparent Pricing </h2> <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> No hidden fees. Cancel or reschedule anytime. </p> </div> <div class="mt-10 space-y-8 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8"> <!-- Basic Plan --> <div class="pricing-card bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden transition duration-300 hover:shadow-lg"> <div class="px-6 py-8"> <h3 class="text-lg font-medium text-gray-900">Basic Care</h3> <div class="mt-4 flex items-baseline"> <span class="text-4xl font-extrabold tracking-tight">$15</span> <span class="ml-1 text-xl font-semibold text-gray-500">/walk</span> </div> <p class="mt-4 text-sm text-gray-500"> Perfect for occasional walks or check-ins </p> </div> <div class="px-6 pt-6 pb-8 bg-gray-50"> <h4 class="text-xs font-medium text-gray-900 uppercase tracking-wide">What's included</h4> <ul class="mt-6 space-y-4"> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">30-minute dog walk</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">Water refresh & treat</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">Photo update</p> </li> </ul> <div class="mt-8"> <a href="#booking" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-secondary"> Book Now </a> </div> </div> </div> <!-- Popular Plan --> <div class="pricing-card bg-white border-2 border-primary rounded-lg shadow-sm overflow-hidden transition duration-300 hover:shadow-lg transform scale-105"> <div class="px-6 py-8"> <div class="flex justify-between"> <h3 class="text-lg font-medium text-gray-900">Premium Care</h3> <span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-primary text-white"> Most Popular </span> </div> <div class="mt-4 flex items-baseline"> <span class="text-4xl font-extrabold tracking-tight">$65</span> <span class="ml-1 text-xl font-semibold text-gray-500">/day</span> </div> <p class="mt-4 text-sm text-gray-500"> Best for regular care or longer absences </p> </div> <div class="px-6 pt-6 pb-8 bg-gray-50"> <h4 class="text-xs font-medium text-gray-900 uppercase tracking-wide">What's included</h4> <ul class="mt-6 space-y-4"> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">12-hour overnight care</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">3 walks/play sessions</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">Medication administration</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">House sitting included</p> </li> </ul> <div class="mt-8"> <a href="#booking" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-secondary"> Book Now </a> </div> </div> </div> <!-- VIP Plan --> <div class="pricing-card bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden transition duration-300 hover:shadow-lg"> <div class="px-6 py-8"> <h3 class="text-lg font-medium text-gray-900">VIP Care</h3> <div class="mt-4 flex items-baseline"> <span class="text-4xl font-extrabold tracking-tight">$120</span> <span class="ml-1 text-xl font-semibold text-gray-500">/day</span> </div> <p class="mt-4 text-sm text-gray-500"> Luxury care with 24/7 attention </p> </div> <div class="px-6 pt-6 pb-8 bg-gray-50"> <h4 class="text-xs font-medium text-gray-900 uppercase tracking-wide">What's included</h4> <ul class="mt-6 space-y-4"> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">24-hour care in your home</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">Unlimited walks & play</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">Special needs care</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">Daily grooming</p> </li> <li class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-check-circle text-primary"></i> </div> <p class="ml-3 text-sm text-gray-700">Live video updates</p> </li> </ul> <div class="mt-8"> <a href="#booking" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-secondary"> Book Now </a> </div> </div> </div> </div> </div> </div> <!-- Booking Form Section --> <div id="booking" class="py-12 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="lg:grid lg:grid-cols-2 lg:gap-8"> <div class="mb-8 lg:mb-0"> <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> Ready to Book? </h2> <p class="mt-4 text-lg text-gray-500"> Fill out the form and we'll match you with the perfect sitter for your pets. We typically respond within 2 hours during business hours. </p> <div class="mt-8"> <div class="flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-phone-alt text-primary"></i> </div> <div class="ml-3"> <h3 class="text-lg font-medium text-gray-900">Prefer to call?</h3> <p class="mt-1 text-base text-gray-500"> <a href="tel:+18005551234" class="text-primary hover:text-secondary">(800) 555-1234</a> </p> </div> </div> <div class="mt-6 flex items-start"> <div class="flex-shrink-0"> <i class="fas fa-envelope text-primary"></i> </div> <div class="ml-3"> <h3 class="text-lg font-medium text-gray-900">Email us</h3> <p class="mt-1 text-base text-gray-500"> <a href="mailto:hello@pawscare.com" class="text-primary hover:text-secondary">hello@pawscare.com</a> </p> </div> </div> </div> <div class="mt-12"> <img class="rounded-lg shadow-lg" src="https://images.unsplash.com/photo-1559190394-df5a28aab5c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1035&q=80" alt="Happy dog with sitter"> </div> </div> <div class="bg-gray-50 py-8 px-6 rounded-lg shadow-sm"> <form class="space-y-6"> <div> <label for="name" class="block text-sm font-medium text-gray-700">Your Name</label> <div class="mt-1"> <input type="text" name="name" id="name" autocomplete="name" class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"> </div> </div> <div> <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label> <div class="mt-1"> <input type="email" name="email" id="email" autocomplete="email" class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"> </div> </div> <div> <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label> <div class="mt-1"> <input type="tel" name="phone" id="phone" autocomplete="tel" class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"> </div> </div> <div> <label for="pet-type" class="block text-sm font-medium text-gray-700">Pet Type(s)</label> <div class="mt-1"> <select id="pet-type" name="pet-type" class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"> <option>Dog</option> <option>Cat</option> <option>Dog & Cat</option> <option>Small Animal</option> <option>Bird</option> <option>Reptile</option> <option>Other</option> </select> </div> </div> <div> <label for="service" class="block text-sm font-medium text-gray-700">Service Needed</label> <div class="mt-1"> <select id="service" name="service" class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"> <option>Dog Walking</option> <option>Drop-in Visits</option> <option>Overnight Care</option> <option>Pet Boarding</option> <option>Vet Visit</option> <option>Grooming Transport</option> <option>Other</option> </select> </div> </div> <div> <label for="dates" class="block text-sm font-medium text-gray-700">Dates Needed</label> <div class="mt-1"> <input type="text" name="dates" id="dates" class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md" placeholder="Select dates"> </div> </div> <div> <label for="message" class="block text-sm font-medium text-gray-700">Special Instructions</label> <div class="mt-1"> <input id="message" name="message" rows="4" class="py-3 px-4 block w-full shadow-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md"/> </div> </div> <div class="flex items-start"> <div class="flex-shrink-0"> <input id="agree" name="agree" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> </div> <div class="ml-3 text-sm"> <label for="agree" class="font-medium text-gray-700">I agree to the <a href="#" class="text-primary hover:text-secondary">Terms of Service</a> and <a href="#" class="text-primary hover:text-secondary">Privacy Policy</a></label> </div> </div> <div> <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> Request Booking </button> </div> </form> </div> </div> </div> </div> <!-- CTA Section --> <div class="bg-primary"> <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> <span class="block">Ready to give your pet</span> <span class="block text-secondary">the care they deserve?</span> </h2> <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> <div class="inline-flex rounded-md shadow"> <a href="#booking" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50"> Book a Sitter </a> </div> <div class="ml-3 inline-flex rounded-md shadow"> <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-secondary hover:bg-accent"> Meet Our Team </a> </div> </div> </div> </div> <!-- Footer --> <footer class="bg-gray-800"> <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8"> <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Services</h3> <ul class="mt-4 space-y-4"> <li><a href="#" class="text-base text-gray-300 hover:text-white">Dog Walking</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Pet Sitting</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Overnight Care</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Vet Visits</a></li> </ul> </div> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> <ul class="mt-4 space-y-4"> <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Our Sitters</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> </ul> </div> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3> <ul class="mt-4 space-y-4"> <li><a href="#" class="text-base text-gray-300 hover:text-white">Help Center</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Safety</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Cancellation Policy</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">FAQ</a></li> </ul> </div> <div> <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3> <ul class="mt-4 space-y-4"> <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact Us</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li> <li><a href="#" class="text-base text-gray-300 hover:text-white">Partnerships</a></li> </ul> <div class="mt-6 flex space-x-6"> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-instagram"></i> </a> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-twitter"></i> </a> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-pinterest"></i> </a> </div> </div> </div> <div class="mt-12 border-t border-gray-700 pt-8"> <p class="text-base text-gray-400 text-center"> © 2023 Paws & Care. All rights reserved. </p> </div> </div> </footer> <script> // Mobile menu toggle document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() { const menu = document.getElementById('mobile-menu'); menu.classList.toggle('hidden'); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); // Form submission (example) document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); alert('Thank you for your booking request! We will contact you shortly.'); this.reset(); }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */