40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useRef } from "react";
|
|
import { ClientOnly } from "@/components/ClientOnly";
|
|
import { ScrollScene } from "@/components/ScrollScene";
|
|
import { ScrollOverlays } from "@/components/ScrollOverlays";
|
|
import { ConfiguratorSection } from "@/components/ConfiguratorSection";
|
|
|
|
export default function HomePage() {
|
|
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
|
|
|
return (
|
|
<>
|
|
{/* Fixed 3D scene behind everything */}
|
|
<ClientOnly>
|
|
<ScrollScene scrollContainerRef={scrollContainerRef} />
|
|
</ClientOnly>
|
|
|
|
{/* Text overlays that fade based on scroll */}
|
|
<ScrollOverlays />
|
|
|
|
{/* Scroll spacer with snap sections -- 7 sections for the landing */}
|
|
<div ref={scrollContainerRef} style={{ position: "relative", zIndex: 1, pointerEvents: "none" }}>
|
|
<div className="snap-section" />
|
|
<div className="snap-section" />
|
|
<div className="snap-section" />
|
|
<div className="snap-section" />
|
|
<div className="snap-section" />
|
|
<div className="snap-section" />
|
|
<div className="snap-section" />
|
|
</div>
|
|
|
|
{/* Configurator section */}
|
|
<div style={{ position: "relative", zIndex: 20 }}>
|
|
<ConfiguratorSection />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|