Promote version 49a54b8 to main

Promoted commit 49a54b8361c12d1f7097bde194c7d1f5b536ef28 to main branch

index.html

@@ -6,6 +6,7 @@
     <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>
@@ -378,78 +379,68 @@
                 </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. We do require a meet-and-greet for all new clients to ensure we're a good match for your pup's personality and needs.</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">We're trained in pet first aid and CPR. 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 Give Your Pup a Vacation?</h2>
-                <p class="text-xl mb-8 max-w-2xl mx-auto">Book now and receive 10% off your first service with code PAWS10</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>
+               <!-- FAQ Section -->
+<section id="faq" 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">
+      <div class="border-b border-gray-200 pb-6">
+        <button class="faq-btn flex justify-between w-full text-left items-center">
+          <h3 class="text-xl font-bold text-secondary">What areas do you serve?</h3>
+          <i data-feather="chevron-down" class="text-primary transition-transform duration-300"></i>
+        </button>
+        <div class="faq-content hidden mt-4 text-gray-600">We proudly serve all of the Florida Keys from Key West to Key Largo.</div>
+      </div>
+
+      <div class="border-b border-gray-200 pb-6">
+        <button class="faq-btn flex justify-between w-full text-left items-center">
+          <h3 class="text-xl font-bold text-secondary">What's your cancellation policy?</h3>
+          <i data-feather="chevron-down" class="text-primary transition-transform duration-300"></i>
+        </button>
+        <div class="faq-content hidden mt-4 text-gray-600">We require 48 hours’ notice for cancellations to receive a full refund. Within 24–48 hours = 50%. Less than 24 hours = non-refundable.</div>
+      </div>
+
+      <div class="border-b border-gray-200 pb-6">
+        <button class="faq-btn flex justify-between w-full text-left items-center">
+          <h3 class="text-xl font-bold text-secondary">Do you accept all dog breeds?</h3>
+          <i data-feather="chevron-down" class="text-primary transition-transform duration-300"></i>
+        </button>
+        <div class="faq-content hidden mt-4 text-gray-600">Yes! We love all breeds and sizes.</div>
+      </div>
+
+      <div class="border-b border-gray-200 pb-6">
+        <button class="faq-btn flex justify-between w-full text-left items-center">
+          <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 transition-transform duration-300"></i>
+        </button>
+        <div class="faq-content hidden mt-4 text-gray-600">Please provide your dog’s food, medications, leash, toys, vet info, and emergency contacts.</div>
+      </div>
+
+      <div class="border-b border-gray-200 pb-6">
+        <button class="faq-btn flex justify-between w-full text-left items-center">
+          <h3 class="text-xl font-bold text-secondary">How do you handle emergencies?</h3>
+          <i data-feather="chevron-down" class="text-primary transition-transform duration-300"></i>
+        </button>
+        <div class="faq-content hidden mt-4 text-gray-600">We’ll immediately contact you and your vet. If necessary, we’ll go to the nearest clinic.</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+
+       <!-- CTA Section -->
+<section class="py-16 bg-secondary text-white text-center">
+  <div class="container mx-auto px-6">
+    <h2 class="text-4xl font-bold mb-6 font-hand">Ready to Give Your Pup a Vacation?</h2>
+    <p class="text-xl mb-8 max-w-2xl mx-auto">Give your pup the tropical vacation they deserve!</p>
+    <button id="cta-scroll" class="bg-primary hover:bg-opacity-90 text-white px-8 py-4 rounded-full text-lg font-medium transition">
+      Get Started Today
+    </button>
+  </div>
+</section>
+
 
         <!-- Footer -->
         <footer class="bg-gray-900 text-white py-12">
@@ -466,58 +457,39 @@
                     <div>
                         <h4 class="text-lg font-bold mb-4">Services</h4>
                         <ul class="space-y-2">
-                            <li><a href="#" class="text-gray-400 hover:text-primary transition">In-Home Sitting</a></li>
-                            <li><a href="#" class="text-gray-400 hover:text-primary transition">Doggy Day Care</a></li>
-                            <li><a href="#" class="text-gray-400 hover:text-primary transition">Adventure Walks</a></li>
-                            <li><a href="#" class="text-gray-400 hover:text-primary transition">Pet Taxi</a></li>
-                        </ul>
+                            <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>
+</ul>
                     </div>
                     
                     <div>
                         <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>
+                            <li><a href="index.html#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>
-                        <h4 class="text-lg font-bold mb-4">Connect With Us</h4>
-                        <div class="flex space-x-4 mb-4">
-                            <a href="#" class="bg-gray-800 hover:bg-primary p-3 rounded-full transition">
-                                <i data-feather="facebook" class="h-5 w-5"></i>
-                            </a>
-                            <a href="#" class="bg-gray-800 hover:bg-primary p-3 rounded-full transition">
-                                <i data-feather="instagram" class="h-5 w-5"></i>
-                            </a>
-                            <a href="#" class="bg-gray-800 hover:bg-primary p-3 rounded-full transition">
-                                <i data-feather="twitter" class="h-5 w-5"></i>
-                            </a>
-                        </div>
-                        <p class="text-gray-400">Subscribe to our newsletter for tips and special offers</p>
-                        <div class="mt-4 flex">
-                            <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg bg-gray-800 text-white focus:outline-none w-full">
-                            <button class="bg-primary hover:bg-opacity-90 px-4 py-2 rounded-r-lg">
-                                <i data-feather="send" class="h-5 w-5"></i>
-                            </button>
-                        </div>
+                    
+                        
                     </div>
                 </div>
                 
                 <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="#" class="text-gray-400 hover:text-primary text-sm transition">Privacy Policy</a>
-                        <a href="#" class="text-gray-400 hover:text-primary text-sm transition">Terms of Service</a>
-                    </div>
+                        <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({
@@ -571,17 +543,22 @@
                 }
             });
         });
-
         // 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
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    e.preventDefault();
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                    // Update URL without page jump
+                    if(history.pushState) {
+                        history.pushState(null, null, this.getAttribute('href'));
+                    }
+                }
+// Close mobile menu if open
                 if (!mobileMenu.classList.contains('hidden')) {
                     mobileMenu.classList.add('hidden');
                     mobileMenu.classList.remove('flex');
@@ -589,10 +566,53 @@
             });
         });
     </script>
-    <script>feather.replace();</script>
+    
+    <script>
+    // FAQ accordion (only one open at a time)
+document.querySelectorAll('.faq-btn').forEach((btn) => {
+  btn.addEventListener('click', () => {
+    const content = btn.nextElementSibling;
+    const isOpen = !content.classList.contains('hidden');
+    document.querySelectorAll('.faq-content').forEach(c => c.classList.add('hidden'));
+    document.querySelectorAll('.faq-btn i').forEach(i => i.style.transform = 'rotate(0deg)');
+    if (!isOpen) {
+      content.classList.remove('hidden');
+      btn.querySelector('i').style.transform = 'rotate(180deg)';
+    }
+  });
+});
 
-</body>
-</html>
+// CTA scroll to contact
+document.getElementById('cta-scroll').addEventListener('click', () => {
+  const target = document.getElementById('contact');
+  target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+});
+
+// Testimonials carousel
+let index = 0;
+const carousel = document.getElementById('testimonial-carousel');
+const total = carousel.children.length;
+
+function updateCarousel() {
+  carousel.style.transform = `translateX(-${index * 100}%)`;
+  feather.replace();
+}
+
+document.getElementById('next-review').addEventListener('click', () => {
+  index = (index + 1) % total;
+  updateCarousel();
+});
+document.getElementById('prev-review').addEventListener('click', () => {
+  index = (index - 1 + total) % total;
+  updateCarousel();
+});
+
+// Auto-slide every 7 seconds
+setInterval(() => {
+  index = (index + 1) % total;
+  updateCarousel();
+}, 7000);
 
+    feather.replace();</script>
 </body>
 </html>