A stunning, cinematic website for Cinetwa, an organization promoting film and film culture across Africa through school-based film clubs. This website embodies the magic and glamour of cinema with two distinct, visually striking themes.

├── backend/
│   └── index.ts             # Main Hono server
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main React app with cinematic theme management
│   │   ├── Header.tsx       # Cinematic navigation component
│   │   ├── Footer.tsx       # Hollywood-style footer
│   │   └── pages/           # Page components with movie magic
│   │       ├── Home.tsx     # Hero page with film strip effects
│   │       ├── About.tsx
│   │       ├── FilmClubs.tsx
│   │       ├── Events.tsx
│   │       ├── GetInvolved.tsx
│   │       └── Contact.tsx
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # Frontend entry point
│   └── style.css            # Cinematic styles with dual themes
└── shared/
    ├── types.ts             # Shared TypeScript types
    └── theme.ts             # Advanced theme management

• 🎬 Home Page: Epic hero section with film strip effects and spotlight animations
• 🎭 About Us: Organization mission with Hollywood glamour
• 🎪 Film Clubs: Information about school-based film clubs with movie theater aesthetics
• 🎨 Events: Upcoming events with red carpet styling
• ⭐ Get Involved: Volunteer opportunities with star treatment
• 📞 Contact: Contact forms with cinematic flair
• 🌙 Dual Themes: Classic Hollywood glamour (light) vs Modern cinema noir (dark)
• 🎯 Responsive Design: Mobile-first with cinematic transitions

• Primary: Golden (#D4AF37) - Classic Hollywood gold
• Secondary: Deep Red (#8B0000) - Red carpet elegance
• Accent: Dark Slate (#2F4F4F) - Sophisticated contrast
• Background: Cornsilk (#FFF8DC) - Warm, vintage feel
• Typography: Cinzel for display, Oswald for headings, Playfair Display for elegance

• Primary: Vibrant Orange (#FF6B35) - Electric cinema lighting
• Secondary: Teal (#00D4AA) - Modern neon accents
• Accent: Electric Yellow (#FFD23F) - Spotlight effects
• Background: Deep Black (#0A0A0A) - True cinema darkness
• Typography: Same fonts with enhanced contrast and glow effects

• 🎬 Film Strip Borders: Top and bottom film perforations on hero sections
• ✨ Spotlight Effects: Radial gradients creating stage lighting
• 🌟 Glow Effects: Text and button glows for dramatic impact
• 🎭 Hover Animations: Scale, rotate, and glow transitions
• 📽️ Film Grain: Subtle texture overlay for authentic cinema feel
• 🎪 Floating Elements: Animated movie-themed icons

• 🎯 Cinematic Buttons: Gradient backgrounds with shine effects
• 🎨 Card Hover Effects: 3D transforms with colored borders
• ⭐ Icon Animations: Scale and rotation on hover
• 🌈 Gradient Borders: Dynamic cinema-style borders
• 💫 Smooth Transitions: Cubic-bezier easing for professional feel

• 🎭 Cinzel: Elegant serif for main branding
• 🎪 Oswald: Bold sans-serif for headings and navigation
• 📖 Playfair Display: Classic serif for elegant content
• 📏 Generous Spacing: Cinematic proportions and breathing room
• 🔤 Letter Spacing: Enhanced tracking for dramatic effect

• Frontend: React 18.2.0 with TypeScript
• Backend: Hono framework
• Styling: TailwindCSS + Custom CSS with cinematic variables
• Fonts: Google Fonts (Cinzel, Oswald, Playfair Display)
• Theme Management: Advanced dual-theme system with localStorage
• Platform: Val Town

• 🎭 Dual Theme System: Completely different aesthetics for light/dark modes
• 🌟 Film Strip Effects: Authentic movie reel styling
• 🎪 Spotlight Animations: Dynamic lighting effects
• ⭐ Glow Typography: Text shadows and glowing effects
• 🎨 Gradient Mastery: Complex multi-stop gradients
• 📽️ Film Grain Texture: Subtle background texture for authenticity
• 🎯 Interactive Animations: Hover effects worthy of the big screen
• 🌈 Cinema Borders: Dynamic gradient borders
• 💫 Smooth Transitions: Professional easing and timing
• 🎪 Floating Elements: Animated background decorations

Evokes the golden age of cinema with warm golds, deep reds, and elegant neutrals. Perfect for daytime viewing and professional presentations.

Captures the excitement of modern movie theaters with electric oranges, neon teals, and dramatic blacks. Ideal for evening viewing and immersive experiences.

• Fade In: Smooth opacity transitions
• Slide Up: Content rising from below
• Slide Left/Right: Directional content reveals
• Scale Hover: Interactive element growth
• Rotate Hover: Playful spinning effects
• Glow Pulse: Breathing light effects
• Bounce: Playful vertical movement

• ♿ WCAG Compliant: High contrast ratios in both themes
• ⌨️ Keyboard Navigation: Full keyboard accessibility
• 📱 Mobile Responsive: Optimized for all screen sizes
• 🚀 Performance: Optimized animations and minimal dependencies
• 💾 Theme Persistence: User preferences saved across sessions
• 🔍 SEO Optimized: Semantic HTML and proper meta tags

The website is fully functional and ready to dazzle! The main entry point is /backend/index.ts which serves the cinematic React application.

🎬 Experience the Magic: Toggle between themes using the floating button in the top-right corner to see both cinematic experiences!

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

Made with ❤️ for cinema lovers everywhere. Experience the magic of movies through code! 🎬✨