Added About Page

resources/js/components/home/FeaturedTours.vue

@@ -6,28 +6,33 @@
         </div>
 
         <SectionContainer>
-            <div class="tours-header">
+            <div
+                v-show-on-intersect="{ type: 'fade-up', duration: '1s' }"
+                class="tours-header"
+            >
                 <SectionTitle title="Featured" gradient="Adventures" subtitle="Discover somewhere new, in a new way" />
             </div>
 
             <div class="tours-grid">
                 <TourCard
                     v-for="(tour, index) in featuredTours"
-                    :key="tour.id ?? index"
+                    :key="index"
                     class="tour-card"
                     :data-index="index"
                     :tour="tour"
                 />
             </div>
             <br/>
-            <EdgyButton classes="btn-primary btn-full">Explore All Adventures</EdgyButton>
-
+            <EdgyButton
+                v-show-on-intersect="{ type: 'fade-up', duration: '0.6s' }"
+                classes="btn-primary btn-full"
+            >
+                Explore All Adventures
+            </EdgyButton>
         </SectionContainer>
     </section>
 </template>
 
-
-
 <style scoped>
 /* Featured Tours Section */
 .featured-tours {
@@ -69,19 +74,12 @@
 .tours-header {
     text-align: center;
     margin-bottom: 4rem;
-    opacity: 0;
-    transform: translateY(50px);
-    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.tours-header.visible {
-    opacity: 1;
-    transform: translateY(0);
 }
 
 .tours-grid {
     display: grid;
     gap: 2rem;
+    overflow: hidden;
 }
 
 @media (min-width: 768px) {
@@ -95,85 +93,27 @@
         grid-template-columns: repeat(3, 1fr);
     }
 }
+
+/* Hover effects for tour cards */
+.tour-card {
+    transition: transform 0.3s ease;
+    cursor: pointer;
+    overflow: hidden;
+}
+
+.tour-card:hover {
+    transform: translateY(-8px) scale(1.02);
+}
 </style>
 
 <script setup lang="ts">
 import SectionContainer from "@/components/dredgy/SectionContainer.vue";
 import SectionTitle from "@/components/dredgy/SectionTitle.vue";
 import TourCard from "@/components/dredgy/TourCard.vue";
-import { Tour } from "@/types";
 import EdgyButton from "@/components/dredgy/EdgyButton.vue";
+import { Tour } from "@/types";
 
-
-import { defineProps, onMounted } from 'vue'
-import {createIntersectionObserver} from "@/composables/useIntersectionObserver";
-
-const props = defineProps<{
+defineProps<{
     featuredTours: Tour[]
 }>()
-
-onMounted(() => {
-    initToursAnimation()
-    initTourCardInteractions()
-})
-
-const initTourCardInteractions = (): void => {
-    const tourCards = document.querySelectorAll('.tour-card') as NodeListOf<HTMLElement>;
-
-    tourCards.forEach((card: HTMLElement) => {
-        // Add hover effects
-        card.addEventListener('mouseenter', () => {
-            card.style.transform = 'translateY(-8px) scale(1.02)';
-        });
-
-        card.addEventListener('mouseleave', () => {
-            if (card.classList.contains('visible')) {
-                card.style.transform = 'translateY(0) rotate(0deg) scale(1)';
-            }
-        });
-    });
-};
-
-const initToursAnimation = (): void => {
-    const toursHeader = document.querySelector('.tours-header') as HTMLElement | null;
-    const tourCards = document.querySelectorAll('.tour-card') as NodeListOf<HTMLElement>;
-
-    if (!toursHeader || !tourCards.length) return;
-
-    // Header animation
-    const headerObserver = createIntersectionObserver((entries: IntersectionObserverEntry[]) => {
-        entries.forEach((entry: IntersectionObserverEntry) => {
-            if (entry.isIntersecting) {
-                entry.target.classList.add('visible');
-            }
-        });
-    });
-
-    headerObserver.observe(toursHeader);
-
-    // Tour cards animation with staggered effect
-    const cardsObserver = createIntersectionObserver((entries: IntersectionObserverEntry[]) => {
-        entries.forEach((entry: IntersectionObserverEntry) => {
-            const tourCard = entry.target as HTMLElement;
-            const index = parseInt(tourCard.dataset.index || '0');
-
-            if (entry.isIntersecting) {
-                // Staggered animation when scrolling down
-                setTimeout(() => {
-                    tourCard.classList.add('visible');
-                }, index * 150);
-            } else {
-                // Reverse staggered animation when scrolling up
-                const reverseIndex = (tourCards.length - 1) - index;
-                setTimeout(() => {
-                    tourCard.classList.remove('visible');
-                }, reverseIndex * 100);
-            }
-        });
-    }, { threshold: 0.2 });
-
-    tourCards.forEach((card: HTMLElement) => {
-        cardsObserver.observe(card);
-    });
-};
 </script>