Jakob Wennberg
e2d6c92e3a
* feat(onboarding): illustrated halftone backdrop from marketing-site art Ports the gnubok-website halftone illustration set into the onboarding flow so signup -> app feels like one product: - OnboardingBackdrop: petal field across the paper background (radially masked to stay calm behind the form), Stockholm skyline dissolving into the bottom edge, two clouds drifting at reading pace that bounce off the viewport and the onboarding panel (IllustrationFloaters, physics ported from the website's BouncingFloaters). - Per-step instrument ghosted in white ink on the dark card header: pencil -> notebook -> adding machine -> calculator, one per step. - Dark mode via invert/hue-rotate filters; prefers-reduced-motion parks the floaters; all art is aria-hidden and pointer-events-none. Applies to /onboarding, /onboarding/agent and /select-company via the shared (onboarding) layout. No new strings, no API changes. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * refactor(onboarding): strip backdrop to skyline + step art per founder review Founder kept the Stadshuset skyline and the per-step header instruments; the petal field and drifting clouds are cut. Removes the now-unused floater physics component and the petals/cloud assets. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import { ILLUSTRATIONS, illustrationSrc } from './onboarding-illustrations'
|
|
|
|
// Ambient scene behind the onboarding flow, built from the marketing site's
|
|
// halftone illustration set so signup -> app feels like one product: the
|
|
// Stockholm skyline dissolving into the bottom edge. Purely decorative
|
|
// (aria-hidden, pointer-events-none); the content column sits above it on
|
|
// z-10.
|
|
export default function OnboardingBackdrop() {
|
|
const skyline = ILLUSTRATIONS['about-stockholm']
|
|
|
|
return (
|
|
<div aria-hidden className="pointer-events-none fixed inset-0 z-0 overflow-hidden">
|
|
{/* Stadshuset skyline anchored to the bottom: translated down so its
|
|
water reflection falls below the fold and only the silhouette hugs
|
|
the edge, masked so it dissolves upward into the page. min-width
|
|
keeps the towers readable on narrow viewports (crops at the sides). */}
|
|
<div className="absolute bottom-0 left-1/2 w-full min-w-[1100px] -translate-x-1/2">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={illustrationSrc('about-stockholm')}
|
|
width={skyline.w}
|
|
height={skyline.h}
|
|
alt=""
|
|
loading="eager"
|
|
decoding="async"
|
|
className="block h-auto w-full translate-y-[36%] opacity-[0.12] dark:opacity-10 dark:invert"
|
|
style={{
|
|
maskImage: 'linear-gradient(to top, black 55%, transparent 95%)',
|
|
WebkitMaskImage: 'linear-gradient(to top, black 55%, transparent 95%)',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|