# El Captain Marketing Site — Implementation Plan

## Phase 1: Foundation (Week 1)

### Setup
- [ ] Initialize Next.js 14 with App Router + TypeScript
- [ ] Configure Tailwind with custom theme (design tokens)
- [ ] Set up Cairo + Inter fonts via next/font
- [ ] Configure i18n routing (ar/en with ar as default)
- [ ] Install: framer-motion, lucide-react, shadcn/ui
- [ ] Set up RTL layout wrapper
- [ ] Create base components: Button, Card, Container, Section

### Layout
- [ ] Build Navbar (sticky, glass effect, RTL)
- [ ] Build Footer
- [ ] Build MobileMenu (slide overlay)
- [ ] Build LanguageToggle component
- [ ] Create AnimateOnScroll wrapper component
- [ ] Create CountUpNumber component

---

## Phase 2: Homepage (Week 2-3)

### Sections (in order)
- [ ] Hero section (headline + dashboard mockup + stats bar)
- [ ] Problem → Solution scroll transition
- [ ] Module Showcase (6 cards grid)
- [ ] Feature Deep-Dive #1: Financial Command
- [ ] Feature Deep-Dive #2: Smart Enrollment
- [ ] Feature Deep-Dive #3: Attendance Intelligence
- [ ] Testimonials carousel
- [ ] Stats section (counting numbers)
- [ ] CTA section (dark gradient)

### Content
- [ ] Write all Arabic copy (from messaging framework)
- [ ] Create dashboard mockup images (screenshot from real app)
- [ ] Design 6 module icons (SVG, outlined)
- [ ] Create feature section mockups (3 screenshots)

---

## Phase 3: Secondary Pages (Week 3-4)

- [ ] Features page (14 module detail cards)
- [ ] Pricing page (3-tier cards + FAQ accordion)
- [ ] About page (mission + values + team placeholder)
- [ ] Contact page (form + calendar embed)
- [ ] 404 page (branded)

---

## Phase 4: Polish & Performance (Week 4-5)

- [ ] All animations tuned and tested
- [ ] Responsive testing (320px → 2560px)
- [ ] RTL testing thoroughness
- [ ] Performance optimization (< 2.5s LCP)
- [ ] SEO: meta tags, OG images, structured data
- [ ] Accessibility audit (axe-core, VoiceOver)
- [ ] Cross-browser testing (Chrome, Safari, Firefox, Samsung Internet)
- [ ] Form backend connection (demo request → email/CRM)
- [ ] WhatsApp floating button integration
- [ ] Analytics setup (Plausible or PostHog)

---

## Phase 5: Launch (Week 5-6)

- [ ] Domain setup (DNS → Vercel)
- [ ] Final content review (Arabic proofreading)
- [ ] Lighthouse scores all green (90+ across board)
- [ ] Social sharing preview correct (OG images)
- [ ] Google Search Console submission
- [ ] Launch announcement prep

---

## Dependencies & Decisions Still Needed

| Decision | Options | Impact |
|----------|---------|--------|
| Domain name | elcaptain.com / elcaptain.app / elcaptain.io | SEO, branding |
| Pricing numbers | Final EGP amounts per tier | Pricing page content |
| Testimonials | Need 3-5 real quotes from existing users | Social proof section |
| Demo booking tool | Cal.com / Calendly / custom | Contact page |
| Analytics | Plausible (simple) / PostHog (powerful) | Privacy vs. features |
| Blog (phase 2) | MDX in repo / Sanity CMS / Contentlayer | Content workflow |
| Logo | Need final designed logo files | Header, favicon, OG |

---

## Quick Start Commands

```bash
cd marketing-site

# Initialize (when ready to code)
npx create-next-app@latest . --typescript --tailwind --app --src-dir
npm install framer-motion lucide-react class-variance-authority clsx tailwind-merge
npx shadcn-ui@latest init

# Development
npm run dev          # localhost:3000
npm run build        # Production build
npm run lint         # ESLint
npm run lighthouse   # Performance audit
```
