# Homebrew Club

## About This App
A community landing page for a coworking space connecting founders, tinkerers, and innovators exploring frontier tech in San Francisco

- **Creator**: @vgrichina

## Specification


# Homebrew Club — Community Coworking Space Website

Create a sleek, modern, and immersive single-page website for **Homebrew Club**, a community-led coworking space in San Francisco for founders, tinkerers, and innovators exploring frontier tech.

The site should feel like a blend of a startup landing page and a hacker collective's digital home — polished yet raw, inviting yet aspirational. Think dark mode with warm amber/golden accents (like homebrew beer tones 🍺), subtle tech-inspired textures, and smooth scroll animations.

## App Type

**React Web App** — This is a branding/landing page with multiple sections, smooth scrolling, animations, and interactive elements. React with Tailwind is the ideal fit.

## UI Elements

### Navigation Bar (Fixed/Sticky)
- Logo/wordmark: "Homebrew Club" in a bold, modern sans-serif font (or a monospace/hacker-style font for character)
- Navigation links: Home, About, Space, Community, Location, Contact
- Smooth scroll to each section on click
- Semi-transparent dark background that becomes more opaque on scroll
- Mobile hamburger menu with slide-in drawer

### Hero Section
- Full-viewport hero with a dark gradient background and subtle animated particles or a grid/circuit-board pattern animation (CSS or canvas-based)
- Large headline: **"Homebrew Club"**
- Subheadline: *"A community-led coworking space for founders, tinkerers & innovators to explore frontier tech."*
- Tagline below: **"Experiment. Collaborate. Build the future."**
- CTA buttons: "Join the Club" (primary, amber/gold) and "Visit Us" (secondary, outline)
- Subtle floating/glowing animation on the headline text

### About / Mission Section
- Section title: "What is Homebrew Club?"
- Rich description of the mission: community-driven, frontier tech exploration, collaboration between founders and builders
- Use an icon grid (3-4 items) with icons and short descriptions for pillars like:
  - 🔬 **Experiment** — Access tools, hardware, and ideas at the edge of what's possible
  - 🤝 **Collaborate** — Meet founders, engineers, and creatives building tomorrow
  - 🚀 **Build** — Turn wild ideas into real products in a space designed for makers
  - 🧠 **Learn** — Weekly talks, demos, and workshops on frontier tech
- Animated fade-in/slide-up on scroll for each card

### The Space Section
- Section title: "The Space"
- Address prominently displayed: **111 Maiden Lane, San Francisco, Suite 540**
- Visual cards or a gallery-style layout showcasing what the space offers:
  - Hot desks & dedicated desks
  - Meeting rooms
  - Workshop/maker area
  - Event space for demos & talks
  - High-speed internet, coffee, community
- Use placeholder imagery or styled gradient cards with icons
- Clean grid layout (2x2 or 3-column)

### Community Section
- Section title: "Our Community"
- Testimonial-style quotes or community member spotlights (can be placeholder/fictional)
- A counter/stats bar with animated counting numbers:
  - "50+ Members" | "100+ Events" | "∞ Ideas"
- Warm, inviting tone

### Location / Map Section
- Section title: "Find Us"
- Full address displayed: **111 Maiden Lane, San Francisco, CA, Suite 540**
- Embedded interactive map or a stylized static map illustration pointing to the location
- Nearby landmarks or transit info (optional)
- "Get Directions" button linking to Google Maps

### Contact / Join Section
- Section title: "Join the Club" or "Get in Touch"
- Simple contact/interest form with fields: Name, Email, Message, and a "What are you building?" textarea
- Form stores submissions to localStorage (or just shows a confirmation toast)
- Social links displayed prominently with icons:
  - 🐦 Twitter: [@club_homebrew](https://twitter.com/club_homebrew)
  - 💼 LinkedIn: Homebrew Club LinkedIn page
- Email or other contact info if desired

### Footer
- Dark background, minimal
- Homebrew Club wordmark
- Social icons row (Twitter, LinkedIn)
- Address: 111 Maiden Lane, SF, Suite 540
- Copyright notice: © 2025 Homebrew Club. All rights reserved.
- "Remix on Berrry" link

## Styling Preferences
- **Color palette**: Dark background (#0a0a0a or #111), warm amber/gold (#F59E0B, #D97706) as primary accent, off-white text (#F5F5F5), muted grays for secondary text
- **Typography**: Modern sans-serif (Inter or similar) for body, monospace or bold display font for headings
- **Animations**: Scroll-triggered fade-ins, subtle parallax, hover effects on cards and buttons, animated gradient borders
- **Overall vibe**: Dark, techy, warm — like a cozy workshop that happens to be building the future
- **Responsive**: Fully responsive, mobile-first approach with beautiful layouts on all screen sizes

## Functionality
- Smooth scrolling navigation between sections
- Scroll-triggered animations (intersection observer)
- Contact form with basic validation and localStorage submission + toast notification
- Animated number counters in the community section
- Mobile-responsive hamburger nav with smooth drawer animation
- External links to Twitter and LinkedIn open in new tabs

## About Berrry
Berrry transforms your social media content into interactive web applications. Share a Twitter/X post or Reddit comment, and our AI creates a custom web app hosted at your own subdomain.

**Visit**: https://berrry.app

Transform your social media ideas into real web applications today.