Example — Design Studio — React Page Block
Complete fictional design-studio page (Atelier North): daylight editorial hero, engagement steps, portfolio showcase, before/after slider, services grid, fixed-fee engagements, testimonials, FAQ and a typographic footer.
Usage
import { ExampleStudio } from "@/components/ExampleStudio";
export default function StudioPage() {
return <ExampleStudio />;
}Implementation notes & API
Purpose: proof of cross-scenario reuse — a services/portfolio page with a daylight palette, built from the same blocks as the launch example. Content: fictional studio "Atelier North"; clients, quotes and prices are invented and labeled on screen. Links target in-page anchors. Requires: @vfx-ui/react. The daylight composition, packaging artwork, hero and footer are DOM/CSS; the registry installs the referenced block-* items. Guardrails: the entire page uses the light scheme; the before/after slider is keyboard-operable without JS gestures.
| Property | Type | Notes / default |
|---|---|---|
className / style | string / CSSProperties | Applied to the page root |
(compose yourself) | — | The page composes nine blocks; copy it and delete or reorder any section |