Active Mobility Ghana Website

A modern, interactive website built with Nuxt.js for Active Mobility Ghana - an organization promoting sustainable transport, trails, greenways, and complete streets across Ghana.

🚀 Features

Design & User Experience

• Modern, Responsive Design - Optimized for all devices and screen sizes
• Interactive Animations - Smooth scroll animations and hover effects
• Video Background Hero - Dynamic video background on landing page using your French Embassy partnership footage
• Local Media Integration - All your event photos and videos properly integrated
• Accessibility Focused - WCAG compliant color contrasts and semantic HTML
• Ghana-Inspired Color Palette - Vibrant greens, golds, and earthy tones reflecting Ghana's natural beauty

Pages & Functionality

• Home Page - Video hero section, real event showcases, impact statistics, and program previews
• About Us - Event gallery, organizational timeline, and partnership information
• Vision & Mission - Interactive mission pillars and impact metrics visualization
• Programs - Real events showcased with interactive cards, video modals, and photo galleries
• Contact - Working contact form with validation

Technical Features

• Nuxt.js 3 - Modern Vue.js framework with SSR/SSG capabilities
• Google Fonts Integration - Open Sans and Poppins for optimal readability
• CSS Custom Properties - Consistent design system with CSS variables
• Form Validation - Client-side validation with error handling
• Mobile-First Design - Progressive enhancement for all device sizes
• Local Media Assets - All images and videos served from /public/media/ directory

🎯 Real Events Featured

Your website now showcases your actual events with local media:

1. Ride with the Israel Embassy - Bring the Hostages Home

   • Solidarity ride raising awareness about global issues
   • Photos: /media/2025-09-01 15.09.43.jpg

2. Community Weekly Cycling Tour

   • Regular community events for all skill levels
   • Photos: /media/2025-09-01 15.09.51.jpg

3. Partnership with French Embassy - Ride with Team Europe

   • International collaboration with video documentation
   • Video: /media/Partnership with French Embassy.mp4 (used as hero background)
   • Photos: /media/2025-09-01 15.10.17.jpg

4. Cycling Tour to the Adomi Bridge

   • Adventure cycling showcasing Ghana's landscapes
   • Photos: /media/2025-09-01 15.10.27.jpg

🛠️ Installation & Setup

Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager

Installation Steps

1. Navigate to the project directory:

   cd /Users/joshuagasu/Documents/Dev/Python/mobility

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and visit:

   http://localhost:3000
   

Build for Production

# Build the application
npm run build

# Preview the production build
npm run preview

# Generate static site (optional)
npm run generate

📱 What's Working Now

✅ Hero Video Background - Your French Embassy partnership video plays as background ✅ All Images Loading - Fixed paths from /assets/media/ to /media/ ✅ Real Event Content - All 4 of your actual events are featured ✅ Interactive Video Modal - Click "Watch Video" to view your partnership video ✅ Responsive Design - Works on all devices ✅ Smooth Animations - Scroll-triggered animations throughout ✅ Working Contact Form - Functional form with validation

🎨 Color Palette

• Primary Green (#2E7D32) - Sustainability and nature
• Primary Gold (#FBC02D) - Ghana's vibrancy and optimism
• Secondary Brown (#8D6E63) - Earthy, grounded community focus
• Secondary Blue (#4FC3F7) - Open skies and freedom of movement
• Accent Orange (#FF5722) - Energy and calls-to-action

📄 Pages Structure

• Home (/) - Video hero, stats, recent events, call-to-action
• About (/about) - Story, timeline, event gallery, team info
• Vision & Mission (/vision-mission) - Goals, mission pillars, impact metrics
• Programs (/programs) - Event showcase, video modal, photo gallery
• Contact (/contact) - Contact form, location info, social links

🔧 Next Steps

Your website is now fully functional with:

• All your local media properly integrated
• Video background on the landing page
• Real event content instead of placeholder text
• Working navigation and responsive design
• Interactive elements and animations

The site is ready for:

• Adding more events as they happen
• Updating contact information
• Adding social media links
• Deploying to a hosting platform

---

Built with ❤️ for Active Mobility Ghana

Empowering communities through sustainable transport solutions across Ghana.