A modern, accessible website for Cinetwa, an organization promoting film and film culture across Africa through school-based film clubs.

├── backend/
│   └── index.ts             # Main Hono server
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main React app with theme management
│   │   ├── Header.tsx       # Navigation component
│   │   ├── Footer.tsx       # Footer component
│   │   └── pages/           # Page components
│   │       ├── Home.tsx
│   │       ├── About.tsx
│   │       ├── FilmClubs.tsx
│   │       ├── Events.tsx
│   │       ├── GetInvolved.tsx
│   │       └── Contact.tsx
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # Frontend entry point
│   └── style.css            # Custom styles with dark mode support
└── shared/
    ├── types.ts             # Shared TypeScript types
    └── theme.ts             # Theme management utilities

• Home Page: Hero section with mission and call-to-action
• About Us: Organization mission, values, and founding story
• Film Clubs: Information about school-based film clubs and activities
• Events: Upcoming and past events showcase
• Get Involved: Volunteer, donate, and partnership opportunities
• Contact: Contact information and social links
• Dark Mode: Toggle between light and dark themes with system preference detection
• Responsive Design: Mobile-first approach with excellent accessibility

• Modern Color Palette: Professional red, gray, and orange accent colors
• Dark Mode Support: Automatic theme detection with manual toggle
• Improved Typography: Poppins for headings, Inter for body text
• Enhanced Contrast: Better readability with WCAG-compliant color ratios
• Smooth Transitions: All theme changes and interactions are smoothly animated
• Mobile-responsive design with TailwindCSS

• Frontend: React 18.2.0 with TypeScript
• Backend: Hono framework
• Styling: TailwindCSS with custom CSS variables for theming
• Theme Management: Custom theme context with localStorage persistence
• Platform: Val Town

• 🌙 Dark Mode: Floating toggle button with system preference detection
• 🎨 Improved UI: Better color contrast and readability
• 📱 Responsive Design: Mobile-first approach with TailwindCSS
• ♿ Accessibility: Semantic HTML, proper ARIA labels, and keyboard navigation
• 🎭 Interactive Forms: Contact and involvement forms with validation
• 🚀 Performance: Optimized loading and minimal dependencies
• 💾 Theme Persistence: User's theme preference is saved across sessions

The website features a comprehensive dark mode implementation:

• Automatic Detection: Respects user's system preference
• Manual Toggle: Floating button in top-right corner
• Persistent Storage: Theme choice saved in localStorage
• Smooth Transitions: All elements transition smoothly between themes
• CSS Variables: Clean implementation using CSS custom properties

• Primary: Red (#E53E3E) - Main brand color
• Secondary: Dark gray (#2D3748) - Text and UI elements
• Accent: Orange (#F6AD55) - Highlights and CTAs
• Background: White (#FFFFFF)
• Surface: Light gray (#F7FAFC)

• Primary: Light red (#FC8181) - Adjusted for dark backgrounds
• Secondary: Light gray (#E2E8F0) - Readable text on dark
• Accent: Light orange (#FBD38D) - Warm highlights
• Background: Dark gray (#1A202C)
• Surface: Medium gray (#2D3748)

The website is fully functional and ready to use. The main entry point is /backend/index.ts which serves the React application and handles API endpoints.

• Email: hello@reallygreatsite.com
• Phone: 123-456-7890
• Social: @reallygreatsite