# El Captain — Marketing Website

Premium marketing site for the El Captain Sports Management SaaS platform.

## Concept

**"The Command Center"** — A clean, authoritative marketing site that sells control and clarity to Egyptian sports academy owners. The site demonstrates the product's power through interactive dashboard mockups, scroll-driven animations, and confident Arabic-first copy.

## Design Direction

- **Emotion:** Power & Control
- **Visual:** Clean & Trustworthy (Stripe-level clarity)
- **Audience:** Academy owners/directors in Egypt
- **Language:** Arabic-first (RTL), English toggle

## Stack

| Layer | Tech |
|-------|------|
| Framework | Next.js 14 (App Router) |
| Styling | Tailwind CSS 3.4 |
| Components | shadcn/ui (branded) |
| Animation | Framer Motion 11 |
| Icons | Lucide React |
| Fonts | Cairo (AR) + Inter (EN) |
| Deploy | Vercel |

## Documentation

| Document | Purpose |
|----------|---------|
| [Brand Guidelines](docs/brand-guidelines.md) | Colors, typography, voice, imagery rules |
| [Design System](docs/design-system.md) | Tokens, Tailwind config, component specs |
| [Site Specification](docs/site-specification.md) | Pages, SEO, performance, i18n, deploy |
| [Messaging Framework](docs/messaging-framework.md) | Copy strategy, elevator pitches, objection handling |
| [UX Strategy](docs/ux-strategy.md) | User journey, conversion, accessibility |
| [Animation Spec](docs/animation-spec.md) | Framer Motion variants, timing, scroll orchestration |
| [Wireframes](docs/wireframes.md) | ASCII layout wireframes (desktop + mobile) |
| [Implementation Plan](docs/implementation-plan.md) | Phased build schedule + decisions needed |

## Quick Start

```bash
# When ready to build:
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
npm run dev
```

## Key Design Decisions

1. **No stock photos** — Product screenshots and geometric illustrations only
2. **No video autoplay** — Respects bandwidth (Egyptian mobile networks)
3. **Numbers as heroes** — Stats count up on scroll (builds credibility)
4. **WhatsApp floating** — Egyptian users expect instant messaging access
5. **Progressive disclosure** — Show 6 modules on homepage, full 14 on features page
6. **Scroll as narrative** — Problem → Solution → Proof → Action flow
