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 { Suspense } from 'react';
|
||||||
import { HomeContent } from './home-content';
|
import { HomeContentV2 } from './home-content-v2';
|
||||||
import { SectionSkeleton } from '@/components/ui/loading-skeleton';
|
import { SectionSkeleton } from '@/components/ui/loading-skeleton';
|
||||||
import { HeroStatsSSR } from '@/components/sections/hero-stats-ssr';
|
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
return (
|
return (
|
||||||
<Suspense fallback={<SectionSkeleton />}>
|
<Suspense fallback={<SectionSkeleton />}>
|
||||||
<HomeContent heroStats={<HeroStatsSSR />} />
|
<HomeContentV2 />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user