TechnicalLocal business hero with hours, address and one action
Act as a web designer for local businesses. Build the hero for {{business_name}} in {{city}}. Hours and details: {{business_details}}. One action: {{call_to_action}}. Keep the existing stack and tokens.
Content, with real copy:
- a headline naming what we are and where ("Neighborhood bakery on East 6th, baking since 2012"), never "Welcome to our website"
- a live status line: "Open until 3 p.m." or "Closed. Opens Tuesday at 7 a.m.", computed in the business's time zone, not the visitor's; handle holidays, split hours and hours past midnight
- the address as a link to directions, the phone as a tel: link
- one primary button for the action
- a real photo of the place, the people or the product; no stock
Layout:
- 360: headline, status, address and phone, button, then the photo; everything above the photo fits the first screen, buttons 48px tall
- 768: text left 7 columns, photo right 5
- 1280: 6 and 6, photo full height of the text block, 16px radius only if the site uses it
Type: headline 32 / 44 / 56px, weight 700; status and address 16 to 18px at full contrast, never muted gray.
States: status uses words plus an icon, not color alone; a missing photo becomes a brand-color panel with the business name; a long address wraps cleanly; hover, focus-visible and active on every link.
Search: LocalBusiness structured data whose openingHoursSpecification matches the visible hours exactly, from the same data source.
Motion: none on load. Photo may fade in over 300ms; none under prefers-reduced-motion.
Avoid: hours inside an image, a pulsing "open" dot, a slideshow, a handshake stock photo, three buttons competing.
List anything you assumed about hours or holidays so I can check it.