Spaces:
Running
Running
Download index.html from bribrunner/undefined: direct link, hf CLI and curl.
- Browser
- Download file 35.3 kB
-
https://huggingface.co/spaces/bribrunner/undefined/resolve/main/index.html
- Command line
-
hf download hf://spaces/bribrunner/undefined/index.html
-
curl -L -o index.html https://huggingface.co/spaces/bribrunner/undefined/resolve/main/index.html
35.3 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Florida Dog Sitting | Premium Dog Care in the Florida Keys</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.waves.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#FF8C42', | |
| secondary: '#1B9AAA', | |
| sand: '#F4E8C1', | |
| ocean: '#A8D0E6', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Patrick+Hand&display=swap'); | |
| .font-hand { font-family: 'Patrick Hand', cursive; } | |
| .wave-animation { | |
| animation: wave 8s ease-in-out infinite alternate; | |
| } | |
| @keyframes wave { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(2deg); } | |
| } | |
| .paw-print { | |
| position: absolute; | |
| opacity: 0.1; | |
| z-index: 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-sand font-sans"> | |
| <!-- Vanta.js Background --> | |
| <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div> | |
| <!-- Main Content --> | |
| <div class="relative z-10 min-h-screen flex flex-col"> | |
| <!-- Navigation --> | |
| <nav class="bg-white/80 backdrop-blur-md shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i data-feather="paw" class="text-primary h-8 w-8 mr-2"></i> | |
| <span class="font-hand text-3xl text-primary">Florida Dog Sitting</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#services" class="text-secondary hover:text-primary transition">Services</a> | |
| <a href="#about" class="text-secondary hover:text-primary transition">About Us</a> | |
| <a href="#testimonials" class="text-secondary hover:text-primary transition">Testimonials</a> | |
| <a href="#contact" class="bg-primary text-white px-4 py-2 rounded-full hover:bg-opacity-90 transition">Book Now</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="menu-btn"> | |
| <i data-feather="menu" class="text-secondary h-6 w-6"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden flex flex-col space-y-4 mt-4" id="mobile-menu"> | |
| <a href="#services" class="text-secondary hover:text-primary transition">Services</a> | |
| <a href="#about" class="text-secondary hover:text-primary transition">About Us</a> | |
| <a href="#testimonials" class="text-secondary hover:text-primary transition">Testimonials</a> | |
| <a href="#contact" class="bg-primary text-white px-4 py-2 rounded-full text-center hover:bg-opacity-90 transition">Book Now</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative py-20 md:py-32 overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-white/70 to-transparent z-0"></div> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-5xl md:text-6xl font-bold text-secondary mb-6 font-hand leading-tight">Your Pet's Vacation <span class="text-primary">Starts Here</span></h1> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contact" class="bg-primary hover:bg-opacity-90 text-white px-8 py-3 rounded-full text-center font-medium transition">Book Now</a> | |
| <a href="#services" class="border-2 border-primary text-primary hover:bg-primary hover:text-white px-8 py-3 rounded-full text-center font-medium transition">Our Services</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="wave-animation"> | |
| <img src="https://www.dropbox.com/scl/fi/11uvidqbxfbd6ig5x3uld/IMG_0019.JPEG?rlkey=636l8cp3x83w30bmmfe8t2z90&st=iyx321qp&raw=1 | |
| " alt="Happy dog in Florida Keys" class="rounded-2xl shadow-xl border-8 border-white transform rotate-2"> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white/80 backdrop-blur-sm relative"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold text-secondary mb-4 font-hand">Tail-Wagging Services</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">We offer a variety of services to keep your pup happy while you're away</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition transform hover:-translate-y-2"> | |
| <div class="bg-primary/10 p-4 rounded-full inline-block mb-6"> | |
| <i data-feather="home" class="text-primary h-8 w-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-secondary mb-3">In-Home Sitting</h3> | |
| <p class="text-gray-600 mb-4">Your pup stays in the comfort of your own home with our loving care and attention.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Daily Photo Updates</span> | |
| </li> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Available For Cats & Dogs</span> | |
| </li> | |
| </ul> | |
| <p class="text-primary font-bold text-xl">From $150/night</p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition transform hover:-translate-y-2"> | |
| <div class="bg-primary/10 p-4 rounded-full inline-block mb-6"> | |
| <i data-feather="sun" class="text-primary h-8 w-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-secondary mb-3">Drop In's</h3> | |
| <p class="text-gray-600 mb-4">Daily adventures and socialization for your furry friend while you're at work or play.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Beach & Park Outings</span> | |
| </li> | |
| </ul> | |
| <p class="text-primary font-bold text-xl">$60/day</p> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition transform hover:-translate-y-2"> | |
| <div class="bg-primary/10 p-4 rounded-full inline-block mb-6"> | |
| <i data-feather="map-pin" class="text-primary h-8 w-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-secondary mb-3">Adventure Walks</h3> | |
| <p class="text-gray-600 mb-4">Spectacular scenic walks through the Florida Keys' most beautiful trails and beaches.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>1-2 Hour Excursions</span> | |
| </li> | |
| </ul> | |
| <p class="text-primary font-bold text-xl">$50/walk</p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition transform hover:-translate-y-2"> | |
| <div class="bg-primary/10 p-4 rounded-full inline-block mb-6"> | |
| <i data-feather="sun" class="text-primary h-8 w-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-secondary mb-3">House Sitting</h3> | |
| <p class="text-gray-600 mb-4">Daily peace of mind while you’re away—your home cared for like it’s our own.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Trash & Recycling</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-primary mr-2"></i> | |
| <span>Plant Care</span> | |
| </li> | |
| </ul> | |
| <p class="text-primary font-bold text-xl">$100/day</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-ocean/10 relative"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> | |
| <img src="https://www.dropbox.com/scl/fi/qzysij9uv9ei1tf30a469/IMG_9301.JPG?rlkey=44w99y91lf0r1ew7p0pop91h1&st=fiumug4j&raw=1" alt="Our dog sitters" class="rounded-2xl shadow-xl border-8 border-white"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-4xl font-bold text-secondary mb-6 font-hand">About Us</h2> | |
| <p class="text-lg text-gray-700 mb-6">Hello! My name is Sydney, and I created this resource to help connect pet owners and reliable dog sitters across the Florida Keys. I noticed there weren’t many local options for trusted care, and many homeowners were struggling to find consistent help for their furry friends. | |
| </p> | |
| <p class="text-lg text-gray-700 mb-8">Our mission is to make it easy to find dependable pet sitting and house sitting services you can trust. We coordinate everything — from introductions and meet-and-greets to scheduling and ongoing communication — so you can relax knowing your pets are in great hands. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-white/80 backdrop-blur-sm relative"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-4xl font-bold text-secondary mb-12 font-hand">Reviews</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-12">Don’t just take our word for it — hear what our clients have to say!</p> | |
| <div class="relative overflow-hidden"> | |
| <div id="testimonial-carousel" class="flex transition-transform duration-700 ease-in-out"> | |
| <!-- Testimonial 1 --> | |
| <div class="min-w-full p-8 bg-white rounded-xl shadow-lg"> | |
| <div class="flex justify-center mb-4 text-primary"> | |
| <i data-feather="star"></i><i data-feather="star"></i><i data-feather="star"></i><i data-feather="star"></i><i data-feather="star"></i> | |
| </div> | |
| <p class="text-gray-700 italic mb-6">"Syd did a great job with my Great Dane Boz. Responses and updates were timely. Would definitely have her watch Boz again."</p> | |
| <h4 class="font-bold text-secondary">Joe P.</h4> | |
| <p class="text-gray-600">Jan. 2025</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="min-w-full p-8 bg-white rounded-xl shadow-lg"> | |
| <div class="flex justify-center mb-4 text-primary"> | |
| <i data-feather="star"></i><i data-feather="star"></i><i data-feather="star"></i><i data-feather="star"></i><i data-feather="star"></i> | |
| </div> | |
| <p class="text-gray-700 italic mb-6">"Sydney stayed with our two pups over Thanksgiving and took such good care of them! We got updates and pictures/videos. She also saved us because the sitter we had booked canceled last minute. We'll definitely use her again!"</p> | |
| <h4 class="font-bold text-secondary">Jamie B.</h4> | |
| <p class="text-gray-600">Dec. 2024</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="min-w-full p-8 bg-white rounded-xl shadow-lg"> | |
| <div class="flex justify-center mb-4 text-primary"> | |
| <i data-feather="star"></i><i data-feather="star"></i><i data-feather="star"></i><i data-feather="star"></i><i data-feather="star"></i> | |
| </div> | |
| <p class="text-gray-700 italic mb-6">"I have very reactive dogs and Sydney was absolutely great with them! She's super gentle and definitely a fellow pet lover. I recommend her to everyone!!!"</p> | |
| <h4 class="font-bold text-secondary">Abby M.</h4> | |
| <p class="text-gray-600">Sept. 2024</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="min-w-full p-8 bg-white rounded-xl shadow-lg"> | |
| <div class="flex justify-center mb-4 text-primary"> | |
| <i data-feather="star"></i><i data-feather="star"></i><i data-feather="star"></i><i data-feather="star"></i><i data-feather="star"></i> | |
| </div> | |
| <p class="text-gray-700 italic mb-6">"Sydney did an incredible job caring for my dog while I was away with family. She sent me photos during playtime and I really felt comfortable leaving Rye in her care."</p> | |
| <h4 class="font-bold text-secondary">Mia D.</h4> | |
| <p class="text-gray-600">Dec. 2024</p> | |
| </div> | |
| <!-- Testimonial 4 --> | |
| <div class="min-w-full p-8 bg-white rounded-xl shadow-lg"> | |
| <div class="flex justify-center mb-4 text-primary"> | |
| <i data-feather="star"></i><i data-feather="star"></i><i data-feather="star"></i><i data-feather="star"></i><i data-feather="star"></i> | |
| </div> | |
| <p class="text-gray-700 italic mb-6">"Sydney did an incredible job caring for my dog while I was away with family. She sent me photos during playtime and made me feel so at ease. Highly recommend her services!"</p> | |
| <h4 class="font-bold text-secondary">Lena R.</h4> | |
| <p class="text-gray-600">Feb. 2025</p> | |
| </div> | |
| </div> | |
| <!-- Carousel Controls --> | |
| <div class="flex justify-center space-x-4 mt-8"> | |
| <button id="prev-review" class="bg-primary/20 hover:bg-primary/40 p-2 rounded-full"><i data-feather="chevron-left"></i></button> | |
| <button id="next-review" class="bg-primary/20 hover:bg-primary/40 p-2 rounded-full"><i data-feather="chevron-right"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-secondary mb-12 text-center font-hand">Gallery</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <img src="https://www.dropbox.com/scl/fi/buvakja1ffg40pn9v07qg/IMG_3973.JPG?rlkey=hut2kc1gl3ixmq5bngzml0uqg&st=s9ww00nq&raw=1" alt="Dog at beach" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105"> | |
| <img src="https://www.dropbox.com/scl/fi/7zdrm8f09bq73p130p0ok/IMG_7983.JPG?rlkey=npsvcltx1awdv2n2ul213lctb&st=ila1t233&raw=1" alt="Dog walking" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105"> | |
| <img src="https://www.dropbox.com/scl/fi/udvyhovnuws6uuk8pu1h4/IMG_9935.JPEG?rlkey=i8cfu4oiwozdyqz6x0uf30zeq&st=jeptawbl&raw=1" alt="Happy dog" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105"> | |
| <img src="https://www.dropbox.com/scl/fi/ik40qnjd2w79tpzdmu9nw/IMG_5401.JPEG?rlkey=c5vmbbeyz7jn07p3o9ofhqdoq&st=wa4i3m10&raw=1" alt="Dog playing" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105"> | |
| <img src="https://www.dropbox.com/scl/fi/shcuddoqr65oueyopakuz/IMG_4519.JPG?rlkey=tc30dsunb4gflg7z4kz5bs7pn&st=9i58ksw9&raw=1" alt="Beach sunset with dog" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105"> | |
| <img src="https://www.dropbox.com/scl/fi/6aksl422cb54xdm8849sp/IMG_5284.JPEG?rlkey=k802lcyww8u64syvf650kji9p&st=io1wocwr&raw=1" alt="Dog in water" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105"> | |
| <img src="https://www.dropbox.com/scl/fi/hxog61pfwnmadchgk9g53/IMG_3378.jpg?rlkey=xejm7sc2o8i8zibeaa9padqvd&st=cmhg1vjw&raw=1" alt="Dog with sitter" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105"> | |
| <img src="https://www.dropbox.com/scl/fi/1xahh3dtpomsswtw9m7vr/IMG_5291.JPEG?rlkey=umb3go8aiq1c584o6ha8mj09b&st=0lig8jp3&raw=1" alt="Sleeping dog" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-primary/5 relative"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-secondary p-12 text-white"> | |
| <h2 class="text-3xl font-bold mb-6 font-hand">Ready to Book?</h2> | |
| <p class="mb-6">Fill out the form and we'll get back to you to confirm your reservation.</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-primary p-2 rounded-full mr-4"> | |
| <i data-feather="phone" class="text-white h-5 w-5"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Call Us</h4> | |
| <p> | |
| <a href="tel:+16129910987" class="hover:underline">(612) 991-0987</a> | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary p-2 rounded-full mr-4"> | |
| <i data-feather="mail" class="text-white h-5 w-5"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Email Us</h4> | |
| <p> | |
| <a href="mailto:info@floridakeysdogsitting.com" class="hover:underline">info@floridakeysdogsitting.com</a> | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary p-2 rounded-full mr-4"> | |
| <i data-feather="map-pin" class="text-white h-5 w-5"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Service Area</h4> | |
| <p>Key West to Key Largo</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-12"> | |
| <form action="https://formspree.io/f/mpwyjowz" method="POST"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 mb-2">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="phone" class="block text-gray-700 mb-2">Phone Number</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="service" class="block text-gray-700 mb-2">Service Needed</label> | |
| <select id="service" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option>Select a service</option> | |
| <option>In-Home Sitting</option> | |
| <option>Doggy Day Care</option> | |
| <option>Adventure Walks</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 mb-2">Tell Us About Your Pet</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-primary hover:bg-opacity-90 text-white font-bold py-3 px-4 rounded-lg transition">Send Request</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6 max-w-4xl"> | |
| <h2 class="text-4xl font-bold text-secondary mb-12 text-center font-hand">Frequently Asked Questions</h2> | |
| <div class="space-y-6"> | |
| <!-- FAQ 1 --> | |
| <div class="border-b border-gray-200 pb-6"> | |
| <button class="faq-btn flex items-center justify-between w-full text-left"> | |
| <h3 class="text-xl font-bold text-secondary">What areas do you serve?</h3> | |
| <i data-feather="chevron-down" class="text-primary h-6 w-6 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content hidden mt-4"> | |
| <p class="text-gray-600">We proudly serve all of the Florida Keys from Key West to Key Largo. If you're outside this area, please contact us as we may be able to make special arrangements.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ 2 --> | |
| <div class="border-b border-gray-200 pb-6"> | |
| <button class="faq-btn flex items-center justify-between w-full text-left"> | |
| <h3 class="text-xl font-bold text-secondary">What's your cancellation policy?</h3> | |
| <i data-feather="chevron-down" class="text-primary h-6 w-6 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content hidden mt-4"> | |
| <p class="text-gray-600">We require 48 hours notice for cancellations to receive a full refund. Cancellations within 24-48 hours will receive a 50% refund. Less than 24 hours notice is non-refundable.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ 3 --> | |
| <div class="border-b border-gray-200 pb-6"> | |
| <button class="faq-btn flex items-center justify-between w-full text-left"> | |
| <h3 class="text-xl font-bold text-secondary">Do you accept all dog breeds?</h3> | |
| <i data-feather="chevron-down" class="text-primary h-6 w-6 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content hidden mt-4"> | |
| <p class="text-gray-600">Yes! We love all breeds and sizes.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ 4 --> | |
| <div class="border-b border-gray-200 pb-6"> | |
| <button class="faq-btn flex items-center justify-between w-full text-left"> | |
| <h3 class="text-xl font-bold text-secondary">What should I provide for in-home sitting?</h3> | |
| <i data-feather="chevron-down" class="text-primary h-6 w-6 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content hidden mt-4"> | |
| <p class="text-gray-600">We ask that you provide your dog's food, any medications, favorite toys, leash, and any special instructions. Please also provide vet contact information and emergency contacts.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ 5 --> | |
| <div class="border-b border-gray-200 pb-6"> | |
| <button class="faq-btn flex items-center justify-between w-full text-left"> | |
| <h3 class="text-xl font-bold text-secondary">How do you handle emergencies?</h3> | |
| <i data-feather="chevron-down" class="text-primary h-6 w-6 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content hidden mt-4"> | |
| <p class="text-gray-600">In case of emergency, we'll immediately contact you and your vet. If needed, we'll transport your pet to the nearest veterinary clinic.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-secondary text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-4xl font-bold mb-6 font-hand">Ready to Book?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Give your pet the vacation they deserve!</p> | |
| <a href="#contact" class="bg-primary hover:bg-opacity-90 text-white px-8 py-4 rounded-full text-lg font-medium transition inline-block">Get Started Today</a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-12"> | |
| <!-- Logo & Description --> | |
| <div class="flex flex-col justify-between"> | |
| <div> | |
| <div class="mb-4"> | |
| <i data-feather="paw" class="text-primary h-8 w-8 mr-2"></i> | |
| <span class="font-hand text-2xl text-primary">Florida Dog Sitting</span> | |
| </div> | |
| <p class="text-gray-400">Reliable pet and house sitting services. </p> | |
| </div> | |
| </div> | |
| <!-- Services --> | |
| <div class="flex flex-col justify-between"> | |
| <h4 class="text-lg font-bold mb-4">Services</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#services" class="text-gray-400 hover:text-primary transition">In-Home Sitting</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-primary transition">Drop In's</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-primary transition">Adventure Walks</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-primary transition">House Sitting</a></li> | |
| </ul> | |
| </div> | |
| <!-- Quick Links --> | |
| <div class="flex flex-col justify-between"> | |
| <h4 class="text-lg font-bold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#about" class="text-gray-400 hover:text-primary transition">About Us</a></li> | |
| <li><a href="#testimonials" class="text-gray-400 hover:text-primary transition">Testimonials</a></li> | |
| <li><a href="#faq" class="text-gray-400 hover:text-primary transition">FAQ</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-primary transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Bottom Bar --> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Paws & Palms Paradise. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="privacy-policy.html" class="text-gray-400 hover:text-primary text-sm transition">Privacy Policy</a> | |
| <a href="terms-conditions.html" class="text-gray-400 hover:text-primary text-sm transition">Terms of Service</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Vanta.js Background | |
| VANTA.WAVES({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x1b9aaa, | |
| shininess: 130.00, | |
| waveHeight: 25.00, | |
| waveSpeed: 0.80, | |
| zoom: 0.75 | |
| }); | |
| // Mobile Menu Toggle | |
| const menuBtn = document.getElementById('menu-btn'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuBtn.addEventListener('click', () => { | |
| const isOpen = mobileMenu.classList.contains('hidden'); | |
| if (isOpen) { | |
| mobileMenu.classList.remove('hidden'); | |
| mobileMenu.classList.add('flex'); | |
| feather.replace(); | |
| } else { | |
| mobileMenu.classList.add('hidden'); | |
| mobileMenu.classList.remove('flex'); | |
| } | |
| }); | |
| // FAQ Accordion | |
| const faqBtns = document.querySelectorAll('.faq-btn'); | |
| faqBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const content = btn.nextElementSibling; | |
| const icon = btn.querySelector('i'); | |
| // Toggle content | |
| content.classList.toggle('hidden'); | |
| // Rotate icon | |
| if (content.classList.contains('hidden')) { | |
| icon.style.transform = 'rotate(0deg)'; | |
| } else { | |
| icon.style.transform = 'rotate(180deg)'; | |
| } | |
| }); | |
| }); | |
| // 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' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| mobileMenu.classList.remove('flex'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <!-- Feather Icons --> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| // Replace all feather icons with SVGs | |
| feather.replace(); | |
| // Testimonial Carousel | |
| const carousel = document.getElementById('testimonial-carousel'); | |
| const prevBtn = document.getElementById('prev-review'); | |
| const nextBtn = document.getElementById('next-review'); | |
| // Keep track of current slide | |
| let currentIndex = 0; | |
| const slides = carousel.children; | |
| const totalSlides = slides.length; | |
| function updateCarousel() { | |
| // Move the carousel to show the current slide | |
| carousel.style.transform = `translateX(-${currentIndex * 100}%)`; | |
| } | |
| prevBtn.addEventListener('click', () => { | |
| currentIndex = (currentIndex - 1 + totalSlides) % totalSlides; // wrap around | |
| updateCarousel(); | |
| }); | |
| nextBtn.addEventListener('click', () => { | |
| currentIndex = (currentIndex + 1) % totalSlides; // wrap around | |
| updateCarousel(); | |
| }); | |
| // Optional: Auto-slide every 5 seconds | |
| // setInterval(() => { | |
| // nextBtn.click(); | |
| // }, 5000); | |
| </script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |