Cinematic Landing Page — Bakery Facilities

Produce a single-page, scroll-cinematic B2B landing site for "Bakery Facilities", a premium bakery-solutions company. A complete, rendered reference implementation ships beside this skill at example.html — start from it. Copy example.html, then adjust copy/data and (if asked) port to the React stack; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, fonts, layout, sections, and animations described below.

This is the authoritative build brief. Follow it exactly — named colors, fonts, video URLs, breakpoints, and animation params are locked.

Stack

• Default output: the single self-contained example.html seed (vanilla HTML/CSS/JS). It includes everything inline; the only remote refs are the 3 CloudFront hero videos and picsum.photos gallery stills (stable CDNs — keep them).
• If the user explicitly asks for the project form, port faithfully to React 18 + Vite + TypeScript + Tailwind + GSAP (ScrollTrigger + SplitText) + Lottie. No Framer Motion — all motion is GSAP. Keep the design identical while porting. Map the vanilla ports back to their framework origin:
  • IntersectionObserver toggling .in → GSAP ScrollTrigger with once: true.
  • passive scroll listener writing inline clip-path / transform / word opacity → GSAP useScroll/ScrollTrigger scrub.
  • per-char setTimeout reveal → GSAP SplitText char stagger (30ms).

Fonts (Google Fonts)

Import: https://fonts.googleapis.com/css2?family=Luxurious+Script&family=Manrope:wght@500&family=Open+Sans:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap