Build a “Coming Soon” waitlist page for Nexus Truck Park — d Build a “Coming Soon” waitlist page for Nexus Truck Park — dark, cinematic, electric-blue tech aesthetic. Mobile-first, one screen.
Think premium coming-soon teaser, not a website: a single cinematic screen built around the hero video.
• Hero (the whole page): the uploaded video as a full-bleed b
react
lucide-react
24/7 Access
Secure Parking
Camera Surveillance
Reservations
className=
data-eid=
>
<source src={HERO_VIDEO} type=
>
Skip Intro
<ArrowRight className=
>
<video
data-slot=
poster={HERO_POSTER}
aria-hidden=
>
<span
data-slot=
>
<div className=
>
<span
className=
onSubmit={submit}
className=
>
<p
className=
>
<input
type=
aria-label=
>
<div
className=
);
const [joined, setJoined] = useState(false);
const [revealed, setRevealed] = useState(false);
const videoRef = useRef(null);
function reveal() {
setRevealed(true);
}
function submit(e) {
e.preventDefault();
if (!email.trim() || !email.includes(
)) return;
setJoined(true);
}
return (
<main className=
>
{/* Full-screen intro video — plays in full before hero content appears */}
{!revealed && (
<section
data-section=
>
<video
ref={videoRef}
src={HERO_VIDEO}
autoPlay
muted
playsInline
preload=
onEnded={reveal}
poster={HERO_POSTER}
className=
>
{/* Background — looping ambient video once intro is done */}
<div className=
src={HERO_VIDEO}
autoPlay
muted
loop
playsInline
preload=
>
Nexus Truck Park
</span>
</header>
{/* Center content — only revealed after the intro video finishes */}
{revealed && (
<div
className=
>
Launching Soon
</span>
</div>
<h1
className=
>
NEXUS
</span>
</h1>
<p
className=
>
Truck Park
</p>
<div
className=
>
The future of truck parking.
<span className=
> Reserve your spot.</span>
</p>
</div>
)}
{/* Lower third — waitlist + chips (revealed after intro) */}
{revealed && (
<div className=
>
{/* Waitlist form */}
{!joined ? (
<form
data-section=
>
Be first to reserve — join the waitlist
</p>
<div
className=
required
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder=
>
Join
<ArrowRight className=
>
No spam. We'll ping you the moment we open.
</p>
</form>
) : (
<div
className=
>
We'll reach out before launch with early reservation access.
</p>
</div>
)}
{/* Trust chips */}
<div
className=
>
{TRUST.map(({ icon: Icon, label }) => (
<div
key={label}
className=
strokeWidth={1.5} />
<span
className=
>
{label}
</span>
</div>
))}
</div>
</div>
</div>
)}
{/* bottom LED line */}
<footer
data-section=
>
© {new Date().getFullYear()} Nexus Truck Park ·{
Build a “Coming Soon” waitlist page for Nexus Truck Park — d Build a “Coming Soon” waitlist page for Nexus Truck Park — dark, cinematic, electric-blue tech aesthetic. Mobile-first, one screen.
Think premium coming-soon teaser, not a website: a single cinematic screen built around the hero video.
• Hero (the whole page): the uploaded video as a full-bleed b
react
lucide-react
24/7 Access
Secure Parking
Camera Surveillance
Reservations
className=
data-eid=
>
<source src={HERO_VIDEO} type=
>
Skip Intro
<ArrowRight className=
>
<video
data-slot=
poster={HERO_POSTER}
aria-hidden=
>
<span
data-slot=
>
<div className=
>
<span
className=
onSubmit={submit}
className=
>
<p
className=
>
<input
type=
aria-label=
>
<div
className=
);
const [joined, setJoined] = useState(false);
const [revealed, setRevealed] = useState(false);
const videoRef = useRef(null);
function reveal() {
setRevealed(true);
}
function submit(e) {
e.preventDefault();
if (!email.trim() || !email.includes(
)) return;
setJoined(true);
}
return (
<main className=
>
{/* Full-screen intro video — plays in full before hero content appears */}
{!revealed && (
<section
data-section=
>
<video
ref={videoRef}
src={HERO_VIDEO}
autoPlay
muted
playsInline
preload=
onEnded={reveal}
poster={HERO_POSTER}
className=
>
{/* Background — looping ambient video once intro is done */}
<div className=
src={HERO_VIDEO}
autoPlay
muted
loop
playsInline
preload=
>
Nexus Truck Park
</span>
</header>
{/* Center content — only revealed after the intro video finishes */}
{revealed && (
<div
className=
>
Launching Soon
</span>
</div>
<h1
className=
>
NEXUS
</span>
</h1>
<p
className=
>
Truck Park
</p>
<div
className=
>
The future of truck parking.
<span className=
> Reserve your spot.</span>
</p>
</div>
)}
{/* Lower third — waitlist + chips (revealed after intro) */}
{revealed && (
<div className=
>
{/* Waitlist form */}
{!joined ? (
<form
data-section=
>
Be first to reserve — join the waitlist
</p>
<div
className=
required
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder=
>
Join
<ArrowRight className=
>
No spam. We'll ping you the moment we open.
</p>
</form>
) : (
<div
className=
>
We'll reach out before launch with early reservation access.
</p>
</div>
)}
{/* Trust chips */}
<div
className=
>
{TRUST.map(({ icon: Icon, label }) => (
<div
key={label}
className=
strokeWidth={1.5} />
<span
className=
>
{label}
</span>
</div>
))}
</div>
</div>
</div>
)}
{/* bottom LED line */}
<footer
data-section=
>
© {new Date().getFullYear()} Nexus Truck Park ·{
Built with Jerian