Contact Section With Map Preview
ProVisit contact section with studio address and hours, a short note form, and a 2D map mockup with streets, a pin, and fake zoom chrome. Follows light and dark.
When to use Contact Section With Map Preview
Use this when the honest next step is walking in, not only mailing a form. The left column names the studio, the hours, and an inbox, then takes a short note. The right column is a drawn 2D map: blocks, streets, a park, a river, a pin, and zoom chrome that does not call a maps API. It is a preview, not live directions.
Do not wire Google Maps into this file. A live tile set would leak keys, stall the preview, and age the block. Swap the Market Street copy, the mailbox, and the pin label before production. If you later need real routing, keep this mockup as the preview and put the live map behind Get directions on your own domain.
Block details
- Category
- Contact Sections
- Renders
- CSS only. Paints as soon as the stylesheet arrives
- Theme
- Follows the site theme in light and dark
- Responsive
- Mobile, tablet and desktop breakpoints are already set
- Dependencies
clsxtailwind-merge- Source
- 218 lines, 9 KB in one file
- Install
wensity add contact-section-with-map-preview --type block- Stack
- React, Next.js, TypeScript and Tailwind CSS v4
- Licence
- Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
- Tags
- light, dark, contact, map, form, studio
- Last updated
