undefined / index.html
bribrunner's picture
Manual changes saved
5b73468 verified
Raw History Blame Contribute Delete
35.3 kB
<!DOCTYPE html>
<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>