Overlapping Panel Hero Contact Block for React

The band is a tinted layer behind the first part of the section, stretched to the viewport's width, and the panel has a negative top margin of 5rem (6rem from md), so its first part sits on the band and the rest on the page. The band's bottom padding is larger than the overlap, so the details above never touch the panel. Change the two values together if you want a deeper or shallower overlap.

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call: details holds the name, email, site, phone and message. The phone number is optional and unchecked.

The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks a name, an email address with an @ and a domain, where the site is and what the visitor has in mind. Each problem appears under its field with an icon, the control gets aria-invalid and an aria-describedby that points to the message, and focus moves to the first one. Typing in a field clears its message.

No. studio@oldgrange.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0178 is in the 555-0100 to 555-0199 range set aside for fiction; the town and street are made up. Replace EMAIL, PHONE, HOURS and the address in the file. The phone number keeps its order in a right-to-left layout.

Yes. The band is a muted tint and the panel is the card colour with a ring and a shadow, so both follow whichever preset you install, light or dark. Nothing in the block uses the primary colour except the submit button.

The three ways to reach the studio stack in the band, one per row, and the panel still overlaps the band's lower edge, with its fields one per row. The submit button goes full width. Nothing scrolls sideways at 320 pixels. The band's content and the panel fade up once on load; with reduced motion they simply appear.