63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { useCallback, useRef, useState } from "react"
|
|
import { LandingDemoSection } from "@/components/landing/landing-demo"
|
|
import { LandingHeader } from "@/components/landing/landing-header"
|
|
import { LandingHero } from "@/components/landing/landing-hero"
|
|
import {
|
|
LandingAppsSection,
|
|
LandingFeaturesSection,
|
|
LandingFooter,
|
|
LandingIntegrationsSection,
|
|
LandingSovereigntySection,
|
|
} from "@/components/landing/landing-sections"
|
|
|
|
export function LandingPage() {
|
|
const scrollRef = useRef<HTMLDivElement>(null)
|
|
const [scrolled, setScrolled] = useState(false)
|
|
const [demoActiveTab, setDemoActiveTab] = useState("mail")
|
|
const [demoRevealNonce, setDemoRevealNonce] = useState(0)
|
|
|
|
const openDemo = useCallback((tabId: string | null) => {
|
|
if (tabId) setDemoActiveTab(tabId)
|
|
setDemoRevealNonce((n) => n + 1)
|
|
requestAnimationFrame(() => {
|
|
document.getElementById("demo")?.scrollIntoView({ behavior: "smooth", block: "start" })
|
|
})
|
|
}, [])
|
|
|
|
return (
|
|
<div
|
|
ref={scrollRef}
|
|
className="landing-root relative h-dvh overflow-y-auto overflow-x-hidden"
|
|
onScroll={() => {
|
|
const top = scrollRef.current?.scrollTop ?? 0
|
|
setScrolled((prev) => (top > 8 ? true : top <= 2 ? false : prev))
|
|
}}
|
|
>
|
|
<div className="landing-backdrop" aria-hidden>
|
|
<div className="landing-orb landing-orb--a" />
|
|
<div className="landing-orb landing-orb--b" />
|
|
<div className="landing-orb landing-orb--c" />
|
|
</div>
|
|
|
|
<div className="relative z-10 flex min-h-full flex-col">
|
|
<LandingHeader scrolled={scrolled} />
|
|
<main className="flex-1">
|
|
<LandingHero onOpenDemo={openDemo} />
|
|
<LandingIntegrationsSection />
|
|
<LandingDemoSection
|
|
activeTab={demoActiveTab}
|
|
onActiveTabChange={setDemoActiveTab}
|
|
revealNonce={demoRevealNonce}
|
|
/>
|
|
<LandingAppsSection />
|
|
<LandingFeaturesSection />
|
|
<LandingSovereigntySection />
|
|
</main>
|
|
<LandingFooter />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|