Fuad-Muhammed/techspark

TechSpark Ghana - Youth tech education landing website # TechSpark Ghana Landing/awareness website for TechSpark Ghana — a youth tech education initiative that visits Senior High Schools across Ghana and runs hands-on tech programs. ## Tech Stack - **Next.js 16** (App Router) - **Tailwind CSS v4** - **Framer Motion** for scroll-triggered animations - **TypeScript** ## Local Setup ```bash # Install dependencies npm install # Start development server npm run dev # Build for production npm run build # Start production server npm start ``` Open localhost to view the site. ## Project Structure ``` src/ ├── app/ │ ├── layout.tsx # Root layout with fonts, Navbar, Footer │ ├── page.tsx # Home page │ ├── about/page.tsx # About page │ ├── globals.css # Tailwind + brand tokens │ └── icon.svg # Favicon ├── components/ │ ├── layout/ # Navbar, Footer │ ├── home/ # Hero, StatsBar, HowItWorks, WhoIsThisFor │ ├── about/ # MissionStatement, OriginStory, TeamSection, TheoryOfChange │ └── ui/ # Button, AnimateOnScroll, SectionHeading, GradientPlaceholder ├── lib/ │ └── constants.ts # All site content and configuration public/ └── images/ # Logo assets ``` ## Brand Colors | Token | Hex | Usage | |-------|-----------|--------------------------------| | Navy | `#142841` | Backgrounds, body text | | Cyan | `#26B1EA` | CTAs, links, accents | | Gold | `#F8B238` | Stat numbers, decorative (sparingly) | | White | `#FFFFFF` | Section backgrounds, text on dark | ## Pages - **Home** — Hero, stats bar, "How It Works" steps, "Who Is This For" audience cards - **About** — Mission statement, origin story, team section, theory of change pathway