108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
import { motion, useScroll, useSpring, useTransform } from 'motion/react';
|
|
import { HeroSection } from './HeroSection';
|
|
import { WhyChooseCityCards } from './WhyChooseCityCards';
|
|
import { VarietyOfAdventures } from './VarietyOfAdventures';
|
|
|
|
import { MobileAppSection } from './MobileAppSection';
|
|
import { MagicItinerary } from './MagicItinerary';
|
|
import { ScrollAnimatedJourney } from './ScrollAnimatedJourney';
|
|
import { CustomPostcards } from './CustomPostcards';
|
|
import { BookAttractionSection } from './BookAttractionSection';
|
|
import { UpcomingCities } from './UpcomingCities';
|
|
import { TrustSection } from './TrustSection';
|
|
import { Footer } from './Footer';
|
|
import { SectionWrapper } from './SectionWrapper';
|
|
import { sectionsConfig } from '../utils/sections';
|
|
import {
|
|
heroVariants,
|
|
staggerContainer,
|
|
backgroundVariants
|
|
} from '../utils/animations';
|
|
|
|
interface HomePageProps {
|
|
isMobile: boolean;
|
|
onSignInClick?: () => void;
|
|
onPassesClick?: () => void;
|
|
currentPage?: string;
|
|
}
|
|
|
|
export function HomePage({ isMobile, onSignInClick, onPassesClick, currentPage }: HomePageProps) {
|
|
// Smooth scroll progress for global effects
|
|
const { scrollYProgress } = useScroll();
|
|
const scaleX = useSpring(scrollYProgress, {
|
|
stiffness: 100,
|
|
damping: 30,
|
|
restDelta: 0.001
|
|
});
|
|
|
|
// Parallax effect for scroll progress
|
|
const progressOpacity = useTransform(scrollYProgress, [0, 0.1], [0, 1]);
|
|
|
|
const sectionComponents = [
|
|
WhyChooseCityCards,
|
|
VarietyOfAdventures,
|
|
ScrollAnimatedJourney,
|
|
MagicItinerary,
|
|
BookAttractionSection,
|
|
CustomPostcards,
|
|
UpcomingCities,
|
|
TrustSection,
|
|
MobileAppSection
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{/* Scroll Progress Indicator */}
|
|
<motion.div
|
|
className="fixed top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-secondary origin-left z-40"
|
|
style={{
|
|
scaleX,
|
|
opacity: progressOpacity
|
|
}}
|
|
/>
|
|
|
|
{/* Main Content - No padding needed as capsule navbar floats */}
|
|
<main>
|
|
{/* 1. Hero Section - Immediate Load Animation */}
|
|
<motion.section
|
|
id="hero-section"
|
|
initial="hidden"
|
|
animate="visible"
|
|
variants={staggerContainer}
|
|
className="relative overflow-hidden"
|
|
>
|
|
<motion.div variants={backgroundVariants}>
|
|
<motion.div variants={heroVariants}>
|
|
<HeroSection
|
|
onSignInClick={onSignInClick}
|
|
onPassesClick={onPassesClick}
|
|
currentPage={currentPage}
|
|
/>
|
|
</motion.div>
|
|
</motion.div>
|
|
</motion.section>
|
|
|
|
{/* 2-10. All Other Sections */}
|
|
{sectionsConfig.map((config, index) => {
|
|
const Component = sectionComponents[index];
|
|
return (
|
|
<SectionWrapper
|
|
key={config.id}
|
|
id={config.id}
|
|
containerType={config.containerType}
|
|
backgroundGradient={config.backgroundGradient}
|
|
className={config.className}
|
|
variantType={config.variantType}
|
|
isMobile={isMobile}
|
|
>
|
|
<Component />
|
|
</SectionWrapper>
|
|
);
|
|
})}
|
|
</main>
|
|
|
|
{/* 11. Footer */}
|
|
<Footer />
|
|
</>
|
|
);
|
|
} |