feat: assemble V2 homepage with new section components and switch page entry
This commit is contained in:
@@ -0,0 +1,88 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { HeroSectionV2 } from '@/components/sections/hero-section-v2';
|
||||
import { SectionSkeleton } from '@/components/ui/loading-skeleton';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
__isProgrammaticScroll?: boolean;
|
||||
}
|
||||
}
|
||||
|
||||
const SocialProofSection = dynamic(
|
||||
() => import('@/components/sections/social-proof-section').then(mod => ({ default: mod.SocialProofSection })),
|
||||
{ loading: () => <SectionSkeleton />, ssr: false }
|
||||
);
|
||||
|
||||
const ProductMatrixSection = dynamic(
|
||||
() => import('@/components/sections/product-matrix-section').then(mod => ({ default: mod.ProductMatrixSection })),
|
||||
{ loading: () => <SectionSkeleton />, ssr: false }
|
||||
);
|
||||
|
||||
const ChallengeSection = dynamic(
|
||||
() => import('@/components/sections/challenge-section').then(mod => ({ default: mod.ChallengeSection })),
|
||||
{ loading: () => <SectionSkeleton />, ssr: false }
|
||||
);
|
||||
|
||||
const TestimonialSection = dynamic(
|
||||
() => import('@/components/sections/testimonial-section').then(mod => ({ default: mod.TestimonialSection })),
|
||||
{ loading: () => <SectionSkeleton />, ssr: false }
|
||||
);
|
||||
|
||||
const CTASection = dynamic(
|
||||
() => import('@/components/sections/cta-section').then(mod => ({ default: mod.CTASection })),
|
||||
{ loading: () => <SectionSkeleton />, ssr: false }
|
||||
);
|
||||
|
||||
function HomeContentV2() {
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
useEffect(() => {
|
||||
const section = searchParams.get('section');
|
||||
if (!section) {return;}
|
||||
|
||||
const maxAttempts = 50;
|
||||
const interval = 100;
|
||||
let attempts = 0;
|
||||
|
||||
const scrollToSection = () => {
|
||||
const targetElement = document.getElementById(section);
|
||||
if (targetElement) {
|
||||
window.__isProgrammaticScroll = true;
|
||||
targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
setTimeout(() => {
|
||||
window.__isProgrammaticScroll = false;
|
||||
}, 2000);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
if (scrollToSection()) {return;}
|
||||
|
||||
const timer = setInterval(() => {
|
||||
attempts++;
|
||||
if (scrollToSection() || attempts >= maxAttempts) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, interval);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [searchParams]);
|
||||
|
||||
return (
|
||||
<main id="main-content" className="min-h-screen bg-white">
|
||||
<HeroSectionV2 />
|
||||
<SocialProofSection />
|
||||
<ProductMatrixSection />
|
||||
<ChallengeSection />
|
||||
<TestimonialSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export { HomeContentV2 };
|
||||
@@ -1,12 +1,11 @@
|
||||
import { Suspense } from 'react';
|
||||
import { HomeContent } from './home-content';
|
||||
import { HomeContentV2 } from './home-content-v2';
|
||||
import { SectionSkeleton } from '@/components/ui/loading-skeleton';
|
||||
import { HeroStatsSSR } from '@/components/sections/hero-stats-ssr';
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<Suspense fallback={<SectionSkeleton />}>
|
||||
<HomeContent heroStats={<HeroStatsSSR />} />
|
||||
<HomeContentV2 />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user