DredgeTours/resources/js/pages/Home.vue

<template>
    <Hero />
    <About />
    <FeaturedTours :featured-tours="featured_tours" />
</template>

<style>

</style>

<script setup lang="ts">
import { onMounted } from 'vue';
import {usePage} from "@inertiajs/vue3";
import {Tour} from "@/types";

interface Properties {
    featured_tours: Tour[]
}

const { featured_tours } = usePage().props as unknown as Properties

import AppLayout from '../layouts/AppLayout.vue'
import Hero from "@/components/home/Hero.vue";
import About from "@/components/home/About.vue";
import FeaturedTours from "@/components/home/FeaturedTours.vue";

defineOptions({
    layout: AppLayout
})

// Types
interface IntersectionObserverOptions {
    threshold?: number;
    rootMargin?: string;
}

// Intersection Observer for animations
const createIntersectionObserver = (
    callback: IntersectionObserverCallback,
    options: IntersectionObserverOptions = {}
): IntersectionObserver => {
    const defaultOptions: IntersectionObserverOptions = {
        threshold: 0.3,
        rootMargin: '0px 0px -50px 0px'
    };

    return new IntersectionObserver(callback, { ...defaultOptions, ...options });
};

// About section animation
const initAboutAnimation = (): void => {
    const aboutContent = document.querySelector('.about-content') as HTMLElement | null;
    if (!aboutContent) return;

    const observer = createIntersectionObserver((entries: IntersectionObserverEntry[]) => {
        entries.forEach((entry: IntersectionObserverEntry) => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            } else {
                entry.target.classList.remove('visible');
            }
        });
    });

    observer.observe(aboutContent);
};

// Featured tours animation
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);
    });
};

// Smooth scrolling for navigation links
const initSmoothScrolling = (): void => {
    const navLinks = document.querySelectorAll('a[href^="#"]') as NodeListOf<HTMLAnchorElement>;

    navLinks.forEach((link: HTMLAnchorElement) => {
        link.addEventListener('click', (e: Event) => {
            e.preventDefault();

            const targetId = link.getAttribute('href');
            const targetElement = targetId ? document.querySelector(targetId) as HTMLElement | null : null;

            if (targetElement) {
                const header = document.querySelector('.header') as HTMLElement | null;
                const headerHeight = header ? header.offsetHeight : 0;
                const targetPosition = targetElement.offsetTop - headerHeight;

                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });

                // Close dropdown if open
                const dropdown = document.querySelector('.dropdown') as HTMLElement | null;
                if (dropdown) {
                    dropdown.classList.remove('open');
                }
            }
        });
    });
};

// Parallax effect for hero background
const initParallax = (): void => {
    const heroBackground = document.querySelector('.hero-bg') as HTMLElement | null;
    const heroSection = document.querySelector('.hero') as HTMLElement | null;
    if (!heroBackground || !heroSection) return;

    window.addEventListener('scroll', () => {
        const scrolled = window.pageYOffset;
        const heroRect = heroSection.getBoundingClientRect();
        const heroHeight = heroSection.offsetHeight;

        if (heroRect.bottom > 0) {
            const rate = scrolled * -0.15;
            const maxMovement = heroHeight * 0.1;
            const constrainedRate = Math.max(rate, -maxMovement);

            heroBackground.style.transform = `translateY(${constrainedRate}px)`;
        }
    });
};

// Add loading animations
const initLoadingAnimations = (): void => {
    // Add class to trigger CSS animations
    document.body.classList.add('loaded');

    // Animate hero content
    const heroTitle = document.querySelector('.hero-title') as HTMLElement | null;
    const heroSubtitle = document.querySelector('.hero-subtitle') as HTMLElement | null;

    if (heroTitle) {
        setTimeout(() => {
            heroTitle.style.opacity = '1';
            heroTitle.style.transform = 'translateY(0)';
        }, 300);
    }

    if (heroSubtitle) {
        setTimeout(() => {
            heroSubtitle.style.opacity = '1';
            heroSubtitle.style.transform = 'translateY(0)';
        }, 600);
    }
};


// Tour card interactions
const initTourCardInteractions = (): void => {
    const tourCards = document.querySelectorAll('.tour-card') as NodeListOf<HTMLElement>;

    tourCards.forEach((card: HTMLElement) => {
        const bookButton = card.querySelector('.btn') as HTMLElement | null;

        if (bookButton) {
            bookButton.addEventListener('click', () => {
                // Add your booking logic here
                alert('Booking functionality would be implemented here!');
            });
        }

        // 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)';
            }
        });
    });
};

// Initialize all functionality when DOM is loaded
onMounted(() => {
    initAboutAnimation();
    initToursAnimation();
    initSmoothScrolling();
    initParallax();
    initLoadingAnimations();
    initTourCardInteractions();
});

// Add performance optimization
const debounce = <T extends (...args: any[]) => void>(func: T, wait: number): T => {
    let timeout: number  | undefined;
    return ((...args: Parameters<T>) => {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    }) as T;
};

// Optimize scroll events
window.addEventListener('scroll', debounce(() => {
    // Scroll-based animations can be added here
}, 16)); // ~60fps
</script>