i want to improve the visual appearance of the app and pages by making it look more like a local brewery with a bar and kegs and taste tests for brewed beers, a great social drinking feel to the app. Also, i want to add a section that allows all pubs, local breweries to be listed and show on a map using geolocation, and a way for pioneers and successful home brewing to be advertised and shown to enhance the community vibe and feel of the app.
Great design inspiration. Now let me read the globals.css and the key sections of page.tsx to understand the full current state before rewriting:
Now I have everything I need. I'll update the globals.css with the taproom theme, then build the new components for the map and pioneer showcase, and finally update the page with the visual overhaul:
Now update page.tsx — imports, the taproom header, and the new nav tabs:
Now update the main wrapper and header to the taproom aesthetic:
Now I have the full picture. Let me replace the page wrapper, header, auth status, wallet info, and nav tabs all at once with the taproom design:
Now add the two new tab content sections (Taproom and Pioneers) and find the right spot to insert them:
Now update the home tab's donation card and payment info banner to use the dark taproom palette instead of the old light colours:
Now update the AI Recommendations card and the recipe cards on the home tab to use the dark theme:
Finally, update the selected-recipe detail view and the closing tags to use the dark theme:
The app has been completely redesigned with a rich taproom aesthetic and two major new sections. The global theme now uses deep walnut browns, warm cream text, and amber/brass gold as the primary colour — matching the cosy warmth of a craft brewery interior with a dot-pattern background, chalkboard cards, and brass-shimmer buttons. A new Taproom tab features a geolocation-powered map of local pubs, breweries, and taprooms with filter chips, venue detail views, and a self-listing form so any Pioneer or venue owner can add themselves. A new Pioneers tab provides a community Hall of Fame showcasing the best home brewers with badge tiers (Gold/Silver/Bronze), like counts, batch stats, and a self-submission form so successful home brewers can advertise themselves to the community.
i want to improve the visual appearance of the app and pages by making it look more like a local brewery with a bar and kegs and taste tests for brewed beers, a great social drinking feel to the app. Also, i want to add a section that allows all pubs, local breweries to be listed and show on a map using geolocation, and a way for pioneers and successful home brewing to be advertised and shown to enhance the community vibe and feel of the app.
Good — both components exist. Now let me read the current page header/nav and globals to see the full state:
Good — I can see the full picture. The theme tokens, components, and tabs are all in place but the internal tab content (Profile, Favorites, Community, etc.) still has old light-mode hardcoded colours and the overall brewery bar atmosphere needs more character. Let me read the remaining tab content areas to fix them all:
Now read the remaining tabs — Favorites, Community/blog, and the PiAdSlot:
Now I have a clear picture of everything that still uses old light-mode colours. I'll fix them all in one pass — PiAdSlot, recipe detail view, Profile tab, Favorites tab, Request tab, and Community tab:
Now restyle the Community Blog tab:
Now let's add rich visual brewery atmosphere to the globals.css — wood-grain texture, keg ring dividers, tap handle styles, and a taste-test badge:
Now let's enrich the main taproom hero banner and give the BreweryMap and PioneerShowcase components more atmospheric visual weight. Let me read the current hero header area more carefully:
Now enhance the hero banner with a richer taproom bar feel — keg icons, foam top, bar counter appearance, and a "Today on Tap" section:
Now let's enrich the BreweryMap component with a proper interactive map feel — using Leaflet for real geolocation rendering and richer venue cards with a "taste test" badge and keg ring separator:
Now enhance the PioneerShowcase with richer community atmosphere, podium styling, and taste-badge elements:
Now let's read the home tab content to restyle the recipe cards there too:
Let me read the Home tab recipe list and the Earn tab to also check those for old colours:
Now fix the Types tab, Marketplace, and Earn tab — all still have old light-mode colours:
Now read and fix the Earn tab:
Now let's also check the home brew recipe cards in the main "home" tab to make sure those are consistent:
The Home tab looks good — already using the taproom theme tokens. The app is comprehensively restyled. Let me do one final pass to make sure no stray light-mode classes remain:
Good — the remaining matches are all intentional dark-mode semantic greens (green-900/800 text-green-200 — used for "active", "approved", "purchased" badges on the dark background). The only issue is lines 1219/1229 which are in the "Purchased Recipes" section of the profile tab:
The full visual overhaul is complete. Here's a summary of what was done across the app:
Visual atmosphere upgrades:
globals.css: foam-top (shimmer on banners), bar-card (dark inset counter surface), hop-bg (subtle radial dot pattern), keg-ring (decorative amber section dividers), and taste-badge (pill-shaped amber tasting note chips)Brewery Map (Taproom tab):
taste-badge for Pioneer venuesPioneer Showcase:
Flame icon; #2 and #3 are side-by-sidekeg-ring dividers separate sections; each profile shows tasting notes on a chalkboard card; the "like" button now says "Raise a Glass"All remaining tabs (Profile, Favorites, Request, Community, Marketplace, Earn, Types) have been fully migrated from hard-coded light-mode grays/purples/blues to the walnut-and-brass taproom token system (bg-secondary, text-foreground, border-border, text-primary, btn-brass, chalkboard).