AI Prompts

Build me a full-screen volunteer events mapping application using Next.js 15 and Tailwind CSS that replicates a political campaign's event finder interface. I need an interactive Google Maps integration showing volunteer events across New York City with custom red markers, paired with a fixed sidebar on the left that lists all the same events in a scrollable format.

The application should use these exact brand colors throughout: red #e61700 for map markers, blue #2519d2 for primary UI elements like headers and buttons, and yellow #ffab00 for accent elements and branding. Make sure you remove the default navbar from the layout since this needs to be a full-screen map experience.

For the sidebar, I want it to be exactly 384px wide and sticky to the left side. At the top, center a logo image that's 128x128 pixels, followed by a "Volunteer Events" title. Below that, add two filter buttons - one saying "NEAR 11104" with a white semi-transparent background, and another saying "ANYTIME" with the brand blue background that opens a calendar popup when clicked. The main area should be a scrollable list of event cards, each showing an organization tag in brand yellow, the event title in brand blue that's clickable, and the date/time with a calendar icon. When an event is selected, highlight it with a blue left border.

The Google Maps component needs to use the Advanced Markers API and be centered on NYC with a zoom level of 12. Create custom circular markers using the brand red color with white numbers inside (1-9, then 9+ for additional events). When someone clicks a marker or an event in the sidebar, it should open a detailed registration modal and pan the map to that location.

For the registration modal, design it as a centered overlay with a form containing fields for full name, address, phone number with country selector, email, a checkbox asking about weekly commitment, a language selection dropdown, and checkboxes for selecting specific events to attend. Style all the form elements with the brand blue color for focus states and use the brand blue for the submit button. Include a privacy notice at the bottom.

The calendar popup should be a simple month view defaulting to August 2024 with navigation arrows. Highlight today's date with the brand blue background and make days that have events appear in bold brand blue text. Allow users to click dates to filter events, though for now just console.log the selection.

Create mock data for about 15 volunteer events spread across all NYC boroughs - include neighborhoods like Sunnyside, Woodside, Astoria, Jackson Heights in Queens; Upper East Side and Lower East Side in Manhattan; Williamsburg and Park Slope in Brooklyn; and South Bronx. Each event should have realistic coordinates, dates in late August 2024, and be labeled as "CANVASS FOR ZOHRAN" events.

Make sure all interactions feel smooth with proper hover effects, the sidebar has a custom scrollbar design, and the overall aesthetic matches a professional political campaign tool. The map markers should have a subtle scale animation on hover, and all the brand colors should be consistently applied throughout every component. Install the Google Maps JavaScript API loader package and set up the environment variable for the API key.