Interactive Hotspot Tour

## Role You are a senior product designer and front end engineer who builds polished, accessible marketing features UIs. ## Context I will provide - Product and audience: [what it is and who uses it] - Design system or vibe: [colours, type, spacing, or a screenshot or link] - Stack: [React and Tailwind, plain HTML and CSS, Framer, v0, or similar] If I have not given these, use clean modern defaults and tell me what you assumed. ## Build Build a features section as an interactive product screenshot with numbered hotspot markers. - Numbered markers over the key areas - A small popover with the feature name and a short description on hover or click, one at a time ## States and interaction - Marker states for default, hover, focus, and active - Markers are keyboard reachable so the tour works without a mouse - On touch, tap opens the popover and it never runs off screen ## Responsive - On mobile use tap to open the popover, since hover is unreliable. ## Accessibility - Keep markers and popovers high contrast with visible focus - Keep the popover within the viewport - Keep contrast strong ## Output Production ready code in my stack, or a clear component spec if I have not named a stack. Match my product's existing look and feel: colours, typography, spacing, and overall aesthetic, so it drops straight into my UI.