bribrunner commited on
Commit
0372f00
·
verified ·
1 Parent(s): 8dcfc5a

Make sure the FAQ setction is functional, meaning the drop down arrows reveal the intended content. Ensure the get started today button in the CTA section is working. Link the text under serves and quick links in the footer to the corresponding parts on the page. Add Housesitting under services and link this as well. Link the privacy policy and terms of service to their pages. Redo the format of the footer so that it feels more natural do not add social media or newsletter icons.

Browse files
Files changed (1) hide show
  1. index.html +98 -31
index.html CHANGED
@@ -445,55 +445,111 @@
445
  <!-- Footer -->
446
  <footer class="bg-gray-900 text-white py-12">
447
  <div class="container mx-auto px-6">
448
- <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
449
- <div>
450
  <div class="flex items-center mb-6">
451
  <i data-feather="paw" class="text-primary h-8 w-8 mr-2"></i>
452
  <span class="font-hand text-2xl text-primary">Florida Dog Sitting</span>
453
- </div>
454
- <p class="text-gray-400">Premium dog sitting services in the beautiful Florida Keys where every tail gets a tropical treat!</p>
455
- </div>
456
-
457
- <div>
458
- <h4 class="text-lg font-bold mb-4">Services</h4>
459
- <ul class="space-y-2">
460
- <li><a href="#services" class="text-gray-400 hover:text-primary transition">In-Home Sitting</a></li>
461
- <li><a href="#services" class="text-gray-400 hover:text-primary transition">Drop In's</a></li>
462
- <li><a href="#services" class="text-gray-400 hover:text-primary transition">Adventure Walks</a></li>
463
- </ul>
464
  </div>
465
 
466
- <div>
467
- <h4 class="text-lg font-bold mb-4">Quick Links</h4>
468
-
469
- <ul class="space-y-2">
470
- <li><a href="#about" class="text-gray-400 hover:text-primary transition">About Us</a></li>
471
- <li><a href="#testimonials" class="text-gray-400 hover:text-primary transition">Testimonials</a></li>
472
- <li><a href="index.html#faq" class="text-gray-400 hover:text-primary transition">FAQ</a></li>
473
- <li><a href="#contact" class="text-gray-400 hover:text-primary transition">Contact</a></li>
474
- </ul>
 
 
 
 
 
 
 
 
 
 
 
475
  </div>
476
 
477
-
478
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
479
  </div>
480
  </div>
 
481
 
482
  <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
483
  <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Paws & Palms Paradise. All rights reserved.</p>
484
- <div class="flex space-x-6">
485
- <a href="privacy-policy.html" class="text-gray-400 hover:text-primary text-sm transition">Privacy Policy</a>
486
- <a href="terms-conditions.html" class="text-gray-400 hover:text-primary text-sm transition">Terms of Service</a>
 
 
487
  </div>
488
- </div>
489
  </div>
490
  </footer>
491
  </div>
492
-
493
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
494
  // Vanta.js Background
495
  VANTA.WAVES({
496
- el: "#vanta-bg",
497
  mouseControls: true,
498
  touchControls: true,
499
  gyroControls: false,
@@ -507,9 +563,20 @@
507
  waveSpeed: 0.80,
508
  zoom: 0.75
509
  });
 
 
 
 
 
 
 
 
 
 
 
510
 
511
  // Mobile Menu Toggle
512
- const menuBtn = document.getElementById('menu-btn');
513
  const mobileMenu = document.getElementById('mobile-menu');
514
 
515
  menuBtn.addEventListener('click', () => {
 
445
  <!-- Footer -->
446
  <footer class="bg-gray-900 text-white py-12">
447
  <div class="container mx-auto px-6">
448
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
449
+ <div class="md:col-span-1">
450
  <div class="flex items-center mb-6">
451
  <i data-feather="paw" class="text-primary h-8 w-8 mr-2"></i>
452
  <span class="font-hand text-2xl text-primary">Florida Dog Sitting</span>
453
+ </div>
454
+ <p class="text-gray-400 mb-4">Premium dog sitting services in the beautiful Florida Keys where every tail gets a tropical treat!</p>
455
+ <p class="text-gray-400 text-sm">© 2023 Florida Dog Sitting. All rights reserved.</p>
 
 
 
 
 
 
 
 
456
  </div>
457
 
458
+ <div class="md:col-span-1">
459
+ <h4 class="text-lg font-bold mb-4 text-white">Our Services</h4>
460
+ <ul class="space-y-3">
461
+ <li><a href="#services" class="text-gray-400 hover:text-primary transition flex items-start">
462
+ <i data-feather="chevron-right" class="text-primary mr-2 h-4 w-4 mt-0.5"></i>
463
+ <span>In-Home Sitting</span>
464
+ </a></li>
465
+ <li><a href="#services" class="text-gray-400 hover:text-primary transition flex items-start">
466
+ <i data-feather="chevron-right" class="text-primary mr-2 h-4 w-4 mt-0.5"></i>
467
+ <span>Drop In's</span>
468
+ </a></li>
469
+ <li><a href="#services" class="text-gray-400 hover:text-primary transition flex items-start">
470
+ <i data-feather="chevron-right" class="text-primary mr-2 h-4 w-4 mt-0.5"></i>
471
+ <span>Adventure Walks</span>
472
+ </a></li>
473
+ <li><a href="#services" class="text-gray-400 hover:text-primary transition flex items-start">
474
+ <i data-feather="chevron-right" class="text-primary mr-2 h-4 w-4 mt-0.5"></i>
475
+ <span>House Sitting</span>
476
+ </a></li>
477
+ </ul>
478
  </div>
479
 
480
+ <div class="md:col-span-1">
481
+ <h4 class="text-lg font-bold mb-4 text-white">Quick Links</h4>
482
+ <ul class="space-y-3">
483
+ <li><a href="#about" class="text-gray-400 hover:text-primary transition flex items-start">
484
+ <i data-feather="chevron-right" class="text-primary mr-2 h-4 w-4 mt-0.5"></i>
485
+ <span>About Us</span>
486
+ </a></li>
487
+ <li><a href="#testimonials" class="text-gray-400 hover:text-primary transition flex items-start">
488
+ <i data-feather="chevron-right" class="text-primary mr-2 h-4 w-4 mt-0.5"></i>
489
+ <span>Testimonials</span>
490
+ </a></li>
491
+ <li><a href="#faq" class="text-gray-400 hover:text-primary transition flex items-start">
492
+ <i data-feather="chevron-right" class="text-primary mr-2 h-4 w-4 mt-0.5"></i>
493
+ <span>FAQ</span>
494
+ </a></li>
495
+ <li><a href="#contact" class="text-gray-400 hover:text-primary transition flex items-start">
496
+ <i data-feather="chevron-right" class="text-primary mr-2 h-4 w-4 mt-0.5"></i>
497
+ <span>Contact</span>
498
+ </a></li>
499
+ <li><a href="privacy-policy.html" class="text-gray-400 hover:text-primary transition flex items-start">
500
+ <i data-feather="chevron-right" class="text-primary mr-2 h-4 w-4 mt-0.5"></i>
501
+ <span>Privacy Policy</span>
502
+ </a></li>
503
+ <li><a href="terms-conditions.html" class="text-gray-400 hover:text-primary transition flex items-start">
504
+ <i data-feather="chevron-right" class="text-primary mr-2 h-4 w-4 mt-0.5"></i>
505
+ <span>Terms & Conditions</span>
506
+ </a></li>
507
+ </ul>
508
  </div>
509
  </div>
510
+ </div>
511
 
512
  <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
513
  <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Paws & Palms Paradise. All rights reserved.</p>
514
+ <div class="flex space-x-4">
515
+ <a href="privacy-policy.html" class="text-gray-400 hover:text-primary text-sm transition">Privacy Policy</a>
516
+ <span class="text-gray-600">|</span>
517
+ <a href="terms-conditions.html" class="text-gray-400 hover:text-primary text-sm transition">Terms & Conditions</a>
518
+ </div>
519
  </div>
 
520
  </div>
521
  </footer>
522
  </div>
 
523
  <script>
524
+ // FAQ accordion functionality
525
+ document.querySelectorAll('.faq-btn').forEach(button => {
526
+ button.addEventListener('click', () => {
527
+ const content = button.nextElementSibling;
528
+ const icon = button.querySelector('i');
529
+
530
+ // Toggle content visibility
531
+ content.classList.toggle('hidden');
532
+
533
+ // Rotate icon
534
+ if (content.classList.contains('hidden')) {
535
+ icon.style.transform = 'rotate(0deg)';
536
+ } else {
537
+ icon.style.transform = 'rotate(180deg)';
538
+ }
539
+ });
540
+ });
541
+
542
+ // CTA button scroll to contact
543
+ document.getElementById('cta-scroll').addEventListener('click', (e) => {
544
+ e.preventDefault();
545
+ document.getElementById('contact').scrollIntoView({
546
+ behavior: 'smooth'
547
+ });
548
+ });
549
+
550
  // Vanta.js Background
551
  VANTA.WAVES({
552
+ el: "#vanta-bg",
553
  mouseControls: true,
554
  touchControls: true,
555
  gyroControls: false,
 
563
  waveSpeed: 0.80,
564
  zoom: 0.75
565
  });
566
+ // Close other FAQs when opening one
567
+ document.querySelectorAll('.faq-btn').forEach(button => {
568
+ button.addEventListener('click', () => {
569
+ document.querySelectorAll('.faq-content').forEach(content => {
570
+ if (content !== button.nextElementSibling) {
571
+ content.classList.add('hidden');
572
+ content.previousElementSibling.querySelector('i').style.transform = 'rotate(0deg)';
573
+ }
574
+ });
575
+ });
576
+ });
577
 
578
  // Mobile Menu Toggle
579
+ const menuBtn = document.getElementById('menu-btn');
580
  const mobileMenu = document.getElementById('mobile-menu');
581
 
582
  menuBtn.addEventListener('click', () => {