102 lines
4.3 KiB
TypeScript
102 lines
4.3 KiB
TypeScript
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 { InsightsSection } from "../components/InsightsSection";
|
|
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";
|
|
import { useGetHomepageQuery } from "../redux/services/homepageApi";
|
|
|
|
const HomePage: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
|
|
const { data, isLoading } = useGetHomepageQuery({
|
|
landing_page_type: "home",
|
|
});
|
|
|
|
const heroSections = data?.hero_sections ?? [];
|
|
const stats = data?.stats_sections ?? [];
|
|
const highlightCards = data?.highlight_cards ?? [];
|
|
const ctaBands = data?.cta_bands ?? [];
|
|
|
|
return (
|
|
<>
|
|
<HeroSection heroSections={heroSections} isLoading={isLoading} />
|
|
|
|
{/* Stats Section */}
|
|
<StatsSection stats={stats} isLoading={isLoading} />
|
|
|
|
<LogosSection />
|
|
<ServicesSection highlightCards={highlightCards} isLoading={isLoading} />
|
|
|
|
<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">
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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 />
|
|
<InsightsSection />
|
|
<CTABannerSection ctaBands={ctaBands} isLoading={isLoading} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default HomePage; |