KLC-Website-Frontend/src/pages/HomePage.tsx

import React from 'react';
import HeroSection from '../components/HeroSection';
import { StatsSection } from '../components/StatsSection';
import { LogosSection } from '../components/LogosSection';
import { ServicesSection } from '../components/ServicesSection';
import { VirtualSpaceSection } from '../components/VirtualSpaceSection';
import { TestimonialsSection } from '../components/TestimonialsSection';
import { UpcomingWebinarsSection } from '../components/UpcomingWebinarsSection';
import { InsightsSection } from '../components/InsightsSection';
import { WhitepapersSection } from '../components/WhitepapersSection';
import { CTABannerSection } from '../components/CTABannerSection';
import { motion } from "motion/react";
import { PrimaryCTAButton } from '../components/PrimaryCTAButton';
import { BrandedTag } from '../components/about/BrandedTag';
import { useNavigate } from 'react-router-dom';



const HomePage: React.FC = () => {
    const navigate = useNavigate();
    return (
        <>
            <HeroSection />
            <StatsSection />
            <LogosSection />
            <ServicesSection />
            <div>
                <div className="mx-auto text-center py-16 px-4 bg-gradient-to-r from-blue-900 via-gray-400 to-black exp-our-head-tab-sec" >
                    {/* Branded Tag */}
                    <motion.div
                        initial={{ opacity: 0, y: -20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6 }}
                        viewport={{ once: true }}
                    >
                        <BrandedTag
                            text="Virtual Learning Environment"
                            className="justify-center"
                            variant="white"
                        />
                    </motion.div>

                    {/* Main Heading */}
                    <motion.h2
                        className="text-5xl font-bold leading-tight mb-4 max-lg:text-4xl max-md:text-3xl text-white"
                        initial={{ opacity: 0, y: 30 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8, delay: 0.2 }}
                        viewport={{ once: true }}
                    >
                        Experience Our Space Virtually
                    </motion.h2>

                    {/* Subheading */}
                    <motion.p
                        className="text-lg leading-relaxed max-w-2xl mx-auto max-lg:text-base mb-6 text-white/90"
                        initial={{ opacity: 0, y: 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8, delay: 0.4 }}
                        viewport={{ once: true }}
                    >
                        Take a virtual walk through our state-of-the-art facility designed to inspire leadership excellence and foster collaborative learning.
                    </motion.p>

                    {/* Main CTA Button - Explore Our Space */}
                    <motion.div
                        className="flex justify-center"
                        initial={{ opacity: 0, y: 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8, delay: 0.6 }}
                        viewport={{ once: true }}
                    >
                        <div className="hero-slide-button">
                            <PrimaryCTAButton
                                text="Explore Our Space"
                                onClick={() => navigate('/services/learning-facility')}
                                ariaLabel="Explore our virtual learning space and facilities"
                            />
                        </div>
                    </motion.div>
                </div>
                <VirtualSpaceSection />
            </div>
            <TestimonialsSection />
            {/* <UpcomingWebinarsSection /> */}
            <InsightsSection />
            {/* <WhitepapersSection /> */}
            <CTABannerSection />
        </>
    );
};

export default HomePage;