Women in Web3 Privacy Website

A modern, community-driven website for the Women in Web3 Privacy initiative, built with Next.js, React, and TypeScript. The site features dynamic event listings, community resources, and a strong focus on accessibility, theming, and maintainability.

Features

• Dynamic Events Page: Upcoming and past events are fetched from the Luma API, with a Next.js backend API route for caching and privacy.
• Responsive UI: Built with Material UI and custom theming for a consistent, accessible experience.
• Light/Dark Mode Favicons: Automatically switches favicon based on user color scheme.
• Community & Contributor Pages: Highlight ways to get involved, join the movement, and connect with the community.
• Type-Safe Codebase: Shared types and strict TypeScript usage for reliability.

Project Structure

src/
  app/
    (pages)/         # Main site pages (about, community, events, getInvolved, resources)
    api/
      luma-events/   # Backend API route for Luma events (with caching)
    layout.tsx       # Global layout, theming, favicon logic
    globals.css      # Global styles
  components/
    eventsPageComponents/  # Events page UI components
    ...              # Other shared and page-specific components
  theme/             # Custom colors, typography, and MUI theme
  types/             # Shared TypeScript types (e.g., LumaEvent)
public/
  icon.svg           # Dark mode favicon
  icon-dark.svg      # Light mode favicon
  social-media.png   # OpenGraph/Twitter preview image
  ...                # Other static assets

Dynamic Events Integration

• The /events page fetches upcoming and past events from /api/luma-events.
• The API route proxies and caches data from Luma, and extracts plain-text descriptions for upcoming events.
• Loading and error states are handled gracefully in the UI.
• Past event rows and upcoming event boxes are fully clickable, with clear sign-up actions.

Theming & UI/UX

• Custom Material UI theme with brand colors and typography.
• Responsive layouts and accessible components.
• Favicons switch automatically for light/dark mode via <link rel="icon" ... media="(prefers-color-scheme: ...)" /> in layout.tsx.
• Buttons and links are styled for clarity and accessibility.

Getting Started

1. Install dependencies:

   yarn install

2. Run the development server:

   yarn dev

   Open http://localhost:3000 to view the site.

3. Edit pages/components:

   • Main pages: src/app/(pages)/
   • Components: src/components/
   • Events API: src/app/api/luma-events/route.ts

Deployment

Deploy easily on Vercel or any platform supporting Next.js 13+ (app directory).

Contributing

Contributions are welcome! Please:

• Use consistent code style (TypeScript, React, MUI)
• Keep types in src/types/ and avoid duplication
• Ensure UI/UX is accessible and responsive
• Open a pull request with a clear description

License

MIT