DredgeTours/resources/js/components/home/FeaturedTours.vue

<template>
    <section class="featured-tours">
        <div class="tour-decorations">
            <div class="tour-decoration tour-decoration-1"></div>
            <div class="tour-decoration tour-decoration-2"></div>
        </div>

        <SectionContainer>
            <div 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"
                    class="tour-card"
                    :data-index="index"
                    :tour="tour"
                />
            </div>
            <br/>
            <EdgyButton classes="btn-primary btn-full">Explore All Adventures</EdgyButton>

        </SectionContainer>
    </section>
</template>



<style scoped>
/* Featured Tours Section */
.featured-tours {
    position: relative;
    padding: 5rem 0;
    background: var(--background);
    overflow: hidden;
}

.tour-decorations {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tour-decoration {
    position: absolute;
    opacity: 0.05;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.tour-decoration-1 {
    top: 5rem;
    left: 0;
    width: 128px;
    height: 128px;
    background: var(--gradient-adventure);
}

.tour-decoration-2 {
    bottom: 10rem;
    right: 5rem;
    width: 96px;
    height: 96px;
    background: var(--gradient-accent);
    opacity: 0.1;
}

.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;
}

@media (min-width: 768px) {
    .tours-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .tours-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
</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 { defineProps, onMounted } from 'vue'
import {createIntersectionObserver} from "@/composables/useIntersectionObserver";

const props = 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>