Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | 'use client';
import React, { useEffect, useRef } from "react";
import dynamic from "next/dynamic";
import Hero from "./Hero";
import NewArrival from "./NewArrivals";
import PromoBanner from "./PromoBanner";
import BestSeller from "./BestSeller";
import Newsletter from "@/components/shared/Newsletter";
import type { HeroData } from "./Hero/types";
import { useFunnelSteps } from "@/hooks/useFunnelTracking";
// Dynamically import components that use Swiper (heavy library)
const Categories = dynamic(() => import("./Categories"), {
loading: () => (
<section className="overflow-hidden pt-17.5">
<div className="max-w-[1170px] w-full mx-auto px-4 sm:px-8 xl:px-0 pb-15 border-b border-gray-3 dark:border-gray-700">
{/* Header skeleton matching actual Categories header */}
<div className="mb-10 flex items-center justify-between">
<div>
<div className="h-5 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-1.5" />
<div className="h-7 w-40 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
</div>
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
<div className="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
</div>
</div>
{/* Category items skeleton - single row like Swiper */}
<div className="flex gap-4 overflow-hidden">
{[0, 1].map((i) => (
<div key={i} className="flex-shrink-0 flex flex-col items-center animate-pulse">
<div className="w-[130px] h-[130px] bg-gray-200 dark:bg-gray-700 rounded-full mb-4" />
<div className="w-20 h-4 bg-gray-200 dark:bg-gray-700 rounded" />
</div>
))}
</div>
</div>
</section>
),
});
const Testimonials = dynamic(() => import("./Testimonials"), {
loading: () => (
<section className="overflow-hidden pb-16.5">
<div className="max-w-[1170px] w-full mx-auto px-4 sm:px-8 xl:px-0">
<div className="p-5">
{/* Header skeleton matching actual Testimonials header */}
<div className="mb-10 flex items-center justify-between">
<div>
<div className="h-5 w-28 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-1.5" />
<div className="h-7 w-36 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
</div>
</div>
{/* Single testimonial card skeleton on mobile */}
<div className="bg-white dark:bg-gray-800 rounded-[10px] p-8 shadow-testimonial">
<div className="flex gap-1 mb-5">
{[1, 2, 3, 4, 5].map((j) => (
<div key={j} className="w-4 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
))}
</div>
<div className="space-y-2 mb-6">
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-full" />
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-3/4" />
</div>
<div className="space-y-2">
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-24" />
<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-20" />
</div>
</div>
</div>
</div>
</section>
),
});
interface HomeProps {
heroData?: HeroData | null;
}
const Home = ({ heroData }: HomeProps) => {
const { trackStep } = useFunnelSteps();
const hasTrackedRef = useRef(false);
// Track homepage_view when component mounts
useEffect(() => {
if (!hasTrackedRef.current) {
trackStep('productDiscovery', 'homepage_view', {});
hasTrackedRef.current = true;
}
}, [trackStep]);
return (
<>
{/* Visually hidden h1 for accessibility - screen readers need a main heading */}
<h1 className="sr-only">Elite Events - Premium Event Supplies</h1>
<Hero heroData={heroData} />
<Categories />
<NewArrival />
<PromoBanner promoBanners={heroData?.promoBanners} />
<BestSeller />
<Testimonials />
<Newsletter />
</>
);
};
export default Home;
|