60 lines
2.6 KiB
JavaScript
60 lines
2.6 KiB
JavaScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import dynamic from "next/dynamic";
|
|
import Layout from "@/components/layout/Layout";
|
|
|
|
// ✅ Banner components — immediate load (important for FCP)
|
|
import Banner from "@/components/sections/home2/Banner";
|
|
import MobileBanner from "@/components/sections/home2/MobileBanner";
|
|
|
|
// ✅ Lazy load all other sections (FCP/LCP performance boost)
|
|
const AboutSection = dynamic(() => import("@/components/sections/home/AboutSection"), { ssr: false });
|
|
const ServicesSection = dynamic(() => import("@/components/sections/home/ServicesSection"), { ssr: false });
|
|
const MobileServices = dynamic(() => import("@/components/sections/home/MobileServicesSection"), { ssr: false });
|
|
const MobileFeatureCard = dynamic(() => import("@/components/sections/home/MobileFeatureCard"), { ssr: false });
|
|
const Features = dynamic(() => import("@/components/sections/home2/Features"), { ssr: false });
|
|
const FaqSection = dynamic(() => import("@/components/sections/home/FaqSection"), { ssr: false });
|
|
const AreaOfInjury = dynamic(() => import("@/components/sections/home/AreaOfInjury"), { ssr: false });
|
|
const WhyChooseUsSection = dynamic(() => import("@/components/sections/home/WhyChooseusSection"), { ssr: false });
|
|
const CounterSection = dynamic(() => import("@/components/sections/home/CounterSection"), { ssr: false });
|
|
const Testimonial = dynamic(() => import("@/components/sections/home1/Testimonial"), { ssr: false });
|
|
const Solution = dynamic(() => import("@/components/sections/home2/Solution"), { ssr: false });
|
|
const Video = dynamic(() => import("@/components/sections/home1/Video"), { ssr: false });
|
|
|
|
export default function Home() {
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// ✅ Detect mobile screen only in browser
|
|
const checkScreenSize = () => setIsMobile(window.innerWidth <= 768);
|
|
checkScreenSize();
|
|
window.addEventListener("resize", checkScreenSize);
|
|
return () => window.removeEventListener("resize", checkScreenSize);
|
|
}, []);
|
|
|
|
return (
|
|
<Layout headerStyle={2} footerStyle={2}>
|
|
{/* ✅ Prevent layout shift for banner */}
|
|
<section style={{ minHeight: "100vh", position: "relative" }}>
|
|
{isMobile ? <MobileBanner /> : <Banner />}
|
|
</section>
|
|
|
|
{/* ✅ Lazy loaded sections — improve Lighthouse performance */}
|
|
<AboutSection />
|
|
|
|
{isMobile ? <MobileServices /> : <ServicesSection />}
|
|
|
|
<MobileFeatureCard />
|
|
<Features />
|
|
<FaqSection />
|
|
<AreaOfInjury />
|
|
<WhyChooseUsSection />
|
|
<CounterSection />
|
|
<Testimonial />
|
|
<Solution />
|
|
<Video />
|
|
</Layout>
|
|
);
|
|
}
|