Lamido-stack/liftoff-africa

# Liftoff Africa - Space Education NGO Website A modern, visually stunning website for an African NGO focused on space education for kids and young adults across the continent. Built with React, TypeScript, Vite, and Three.js for interactive 3D rocket depictions. ## About Liftoff Africa Liftoff Africa is dedicated to inspiring the next generation of African space explorers, scientists, and engineers. Through innovative education programs, we're building Africa's space future one student at a time. ## Features - 🚀 **Interactive 3D Rocket**: Beautiful Three.js animated rocket model - 🌟 **Modern Design**: Clean, playful, and educational UI/UX - 📱 **Responsive**: Works perfectly on all devices - ⚡ **Fast**: Built with Vite for optimal performance - 🎨 **Smooth Animations**: Engaging user experience - 📧 **Contact Form**: Get in touch functionality ## Sections - **Hero**: Eye-catching landing with 3D rocket animation - **About**: Mission, vision, and impact statistics - **Programs**: Educational offerings and workshops - **Events**: Upcoming space education events - **Contact**: Contact form and organization details ## Technologies Used - React 18 with TypeScript - Vite for build tooling - Three.js with React Three Fiber for 3D graphics - CSS Grid and Flexbox for responsive layouts - Modern CSS with smooth animations ## Getting Started ### Prerequisites - Node.js (version 16 or higher) - npm or yarn ### Installation 1. Clone the repository 2. Install dependencies: ```bash npm install ``` 3. Start the development server: ```bash npm run dev ``` 4. Open your browser and navigate to `localhost` ### Building for Production ```bash npm run build ``` The built files will be in the `dist` directory. ## Project Structure ``` src/ ├── components/ # React components │ ├── Rocket.tsx # 3D rocket component │ ├── Navigation.tsx # Navigation bar │ ├── Hero.tsx # Hero section │ ├── About.tsx # About section │ ├── Prog …