Cinetwa - Modern Film Culture Organization

A clean, modern website for Cinetwa, an organization promoting film and film culture across Africa through school-based film clubs. Built with contemporary UI design principles and excellent user experience.

├── backend/
│   └── index.ts             # Main Hono server
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main React app with theme management
│   │   ├── Header.tsx       # Modern navigation component
│   │   ├── Footer.tsx       # Clean footer component
│   │   └── pages/           # Page components
│   │       ├── Home.tsx     # Modern hero and content sections
│   │       ├── About.tsx
│   │       ├── FilmClubs.tsx
│   │       ├── Events.tsx
│   │       ├── GetInvolved.tsx
│   │       └── Contact.tsx
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # Frontend entry point
│   └── style.css            # Modern CSS with clean design system
└── shared/
    ├── types.ts             # Shared TypeScript types
    └── theme.ts             # Theme management utilities

• 🏠 Home Page: Clean hero section with modern layout and clear call-to-actions
• 📖 About Us: Organization mission with contemporary card design
• 🎬 Film Clubs: Information about school-based film clubs
• 🎪 Events: Upcoming and past events showcase
• ⭐ Get Involved: Volunteer and partnership opportunities
• 📞 Contact: Contact information and forms
• 🌙 Dark Mode: Seamless light/dark theme switching
• 📱 Responsive Design: Mobile-first approach with excellent UX

Light Mode:

• Primary: Blue (#2563EB) - Professional and trustworthy
• Secondary: Red (#DC2626) - Energy and passion
• Accent: Amber (#F59E0B) - Warmth and creativity
• Background: White (#FFFFFF) - Clean and minimal
• Surface: Slate 50 (#F8FAFC) - Subtle contrast

Dark Mode:

• Primary: Blue 500 (#3B82F6) - Bright and accessible
• Secondary: Red 500 (#EF4444) - Vibrant energy
• Accent: Amber 300 (#FCD34D) - Warm highlights
• Background: Slate 900 (#0F172A) - Deep and comfortable
• Surface: Slate 800 (#1E293B) - Elevated elements

• Primary Font: Inter - Modern, readable sans-serif
• Display Font: Space Grotesk - Contemporary geometric sans-serif
• Font Weights: 300-800 for perfect hierarchy
• Letter Spacing: Optimized for readability

• Subtle Shadows: Layered shadow system for depth
• Rounded Corners: 12px radius for modern feel
• Backdrop Blur: Glass morphism effects
• Smooth Transitions: 200ms cubic-bezier animations
• Hover Effects: Subtle lift and scale interactions

• Modern Buttons: Clean styling with hover states
• Card Hover Effects: Gentle lift and shadow changes
• Navigation: Pill-style active states
• Form Elements: Clean inputs with focus states
• Theme Toggle: Floating button with smooth transitions

• Generous Whitespace: Breathing room for content
• Grid Systems: Responsive layouts
• Typography Scale: Consistent text sizing
• Component Spacing: Logical padding and margins

• Frontend: React 18.2.0 with TypeScript
• Backend: Hono framework
• Styling: TailwindCSS + Custom CSS variables
• Fonts: Google Fonts (Inter, Space Grotesk)
• Theme System: CSS custom properties with localStorage
• Platform: Val Town

• 🎨 Modern Design: Clean, contemporary UI inspired by leading design systems
• 🌙 Dark Mode: Seamless theme switching with system preference detection
• 📱 Responsive: Mobile-first design that works on all devices
• ♿ Accessible: WCAG compliant with proper focus states
• ⚡ Performance: Optimized animations and minimal dependencies
• 🎯 User Experience: Intuitive navigation and clear information hierarchy
• 💾 Persistence: Theme preferences saved across sessions

Clean layouts with plenty of whitespace and clear visual hierarchy.

Unified design system with consistent spacing, colors, and typography.

High contrast ratios, keyboard navigation, and screen reader support.

Optimized animations and efficient CSS for smooth interactions.

Mobile-first approach ensuring great experience on all devices.

• Fade In: Smooth opacity transitions (0.6s ease-out)
• Slide Up: Content rising from below (0.6s ease-out)
• Slide Left/Right: Directional reveals (0.6s ease-out)
• Hover Lift: Subtle Y-axis movement (-2px)
• Hover Scale: Gentle scaling (1.02x)
• Focus States: Clear outline indicators

The website is fully functional with modern UI/UX. The main entry point is /backend/index.ts which serves the React application.

Toggle between light and dark themes using the floating button in the top-right corner to experience both modes!

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

Built with modern web standards and contemporary design principles for an exceptional user experience. ✨