Notes

A landing page for a fictional rota and timesheet app for restaurants, in seven sections: an inverted hero with a working rota board built from Divs, a feature bento with one brand-flooded tile, a three-step switch-over, per-person pricing beside a worked example, a single large quote, an FAQ and an inverted close with the footer. The hero and close use the heading colour as the background and the ground colour for text, so they stay inverted in dark mode; the hero background is a hard-stop gradient at 71% so the rota board sits across the edge, so recheck that stop if you change the hero copy length. The rota is a grid of eight columns per row (name plus seven days) with shift chips as small Divs, and the hours and labour bars are Breakdance Progress Bar elements with stripes, animation and labels off. Pricing is a single per-person rate rather than tiers, and the FAQ is an Advanced Accordion with colours set to theme tokens.