88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
const ENTER_DURATION_MS = 2300;
|
|
const EXIT_DURATION_MS = 650;
|
|
|
|
export default function LandingPage() {
|
|
const nav = useNavigate();
|
|
const [isExiting, setIsExiting] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const exitTimer = window.setTimeout(() => setIsExiting(true), ENTER_DURATION_MS);
|
|
const navTimer = window.setTimeout(
|
|
() => nav("/dashboard", { replace: true }),
|
|
ENTER_DURATION_MS + EXIT_DURATION_MS
|
|
);
|
|
|
|
return () => {
|
|
window.clearTimeout(exitTimer);
|
|
window.clearTimeout(navTimer);
|
|
};
|
|
}, [nav]);
|
|
|
|
return (
|
|
<div className={`bf-landing ${isExiting ? "is-exiting" : ""}`} role="status" aria-live="polite">
|
|
<div className="bf-landing-inner">
|
|
<div className="bf-landing-visual" aria-hidden="true">
|
|
<svg className="bf-landing-svg" viewBox="0 0 200 200" role="presentation">
|
|
<defs>
|
|
<linearGradient id="bfBraceGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stopColor="#efb07a" stopOpacity="0.95" />
|
|
<stop offset="100%" stopColor="#d17645" stopOpacity="0.95" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<path
|
|
className="bf-landing-spine"
|
|
d="M100 34 C 92 60, 108 86, 100 112 C 92 138, 108 164, 100 188"
|
|
/>
|
|
|
|
<circle className="bf-landing-vertebra" cx="100" cy="48" r="6.2" />
|
|
<circle className="bf-landing-vertebra" cx="100" cy="74" r="5.8" />
|
|
<circle className="bf-landing-vertebra" cx="100" cy="100" r="5.8" />
|
|
<circle className="bf-landing-vertebra" cx="100" cy="126" r="5.8" />
|
|
<circle className="bf-landing-vertebra" cx="100" cy="152" r="6.2" />
|
|
|
|
<path
|
|
className="bf-landing-brace bf-landing-brace--left"
|
|
d="M58 62 C 44 82, 44 118, 58 138"
|
|
stroke="url(#bfBraceGrad)"
|
|
/>
|
|
<path
|
|
className="bf-landing-brace bf-landing-brace--right"
|
|
d="M142 62 C 156 82, 156 118, 142 138"
|
|
stroke="url(#bfBraceGrad)"
|
|
/>
|
|
|
|
<path
|
|
className="bf-landing-pad"
|
|
d="M70 86 C 64 96, 64 104, 70 114"
|
|
stroke="url(#bfBraceGrad)"
|
|
/>
|
|
<path
|
|
className="bf-landing-pad"
|
|
d="M130 86 C 136 96, 136 104, 130 114"
|
|
stroke="url(#bfBraceGrad)"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="bf-landing-mark">
|
|
<div className="bf-landing-wordmark">
|
|
Brace<span className="bf-brand-accent">iQ</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="bf-landing-slogan">
|
|
Guided support design, from imaging to fabrication.
|
|
</p>
|
|
|
|
<div className="bf-landing-progress" aria-hidden="true">
|
|
<span className="bf-landing-progress-bar" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|