# El Captain Marketing Site — Full Specification

## Tech Stack

| Layer | Technology | Why |
|-------|-----------|-----|
| Framework | Next.js 14 (App Router) | SSR for SEO, image optimization, i18n routing |
| Styling | Tailwind CSS 3.4 | Utility-first, RTL support via logical properties |
| Components | shadcn/ui (customized) | Accessible primitives, easy to brand |
| Animation | Framer Motion 11 | Declarative scroll animations, layout transitions |
| 3D (optional) | Spline / Three.js | Interactive dashboard mockup (hero only) |
| Icons | Lucide React | Consistent 1.5px stroke icons |
| Forms | React Hook Form + Zod | Validation for demo request / contact |
| Analytics | Plausible / PostHog | Privacy-friendly, no cookie banner needed |
| CMS (future) | Sanity / MDX | Blog content management |
| Deploy | Vercel | Edge CDN, automatic HTTPS, preview deploys |
| Font Loading | next/font | Zero layout shift, subset for Arabic |

---

## Project Structure

```
marketing-site/
├── src/
│   ├── app/
│   │   ├── [locale]/
│   │   │   ├── page.tsx              # Home
│   │   │   ├── features/page.tsx     # Features deep-dive
│   │   │   ├── pricing/page.tsx      # Pricing plans
│   │   │   ├── about/page.tsx        # About / team
│   │   │   ├── contact/page.tsx      # Demo request form
│   │   │   ├── blog/page.tsx         # Blog listing (future)
│   │   │   └── layout.tsx            # Locale layout (dir, lang, font)
│   │   ├── layout.tsx                # Root layout
│   │   └── globals.css               # Tailwind base + tokens
│   ├── components/
│   │   ├── ui/                       # shadcn/ui base components
│   │   ├── layout/
│   │   │   ├── Navbar.tsx
│   │   │   ├── Footer.tsx
│   │   │   └── MobileMenu.tsx
│   │   ├── sections/
│   │   │   ├── Hero.tsx
│   │   │   ├── ProblemSolution.tsx
│   │   │   ├── ModuleShowcase.tsx
│   │   │   ├── FeatureDeepDive.tsx
│   │   │   ├── DashboardPreview.tsx
│   │   │   ├── Testimonials.tsx
│   │   │   ├── PricingTable.tsx
│   │   │   ├── StatsBar.tsx
│   │   │   ├── CTASection.tsx
│   │   │   └── FAQ.tsx
│   │   ├── shared/
│   │   │   ├── AnimateOnScroll.tsx
│   │   │   ├── CountUpNumber.tsx
│   │   │   ├── ModuleIcon.tsx
│   │   │   ├── DashboardMockup.tsx
│   │   │   └── LanguageToggle.tsx
│   │   └── forms/
│   │       ├── DemoRequestForm.tsx
│   │       └── NewsletterForm.tsx
│   ├── lib/
│   │   ├── i18n.ts                   # Locale config
│   │   ├── fonts.ts                  # Cairo + Inter loading
│   │   └── animations.ts            # Framer Motion variants
│   ├── content/
│   │   ├── ar/                       # Arabic content files
│   │   └── en/                       # English content files
│   └── assets/
│       ├── mockups/                  # Dashboard screenshots
│       ├── icons/                    # Custom SVG module icons
│       └── illustrations/           # Geometric illustrations
├── public/
│   ├── og-image-ar.png              # Social share (Arabic)
│   ├── og-image-en.png              # Social share (English)
│   └── favicon.svg                  # Brand icon
├── docs/
│   ├── brand-guidelines.md
│   ├── design-system.md
│   └── site-specification.md (this file)
├── tailwind.config.ts
├── next.config.js
└── package.json
```

---

## Page Specifications

### Home Page (الرئيسية)

#### Section Flow (scroll order)
1. **Navbar** — sticky, glass effect
2. **Hero** — headline + dashboard mockup + stats bar
3. **Problem → Solution** — brief chaos-to-order transition
4. **Module Showcase** — 6 key modules as cards (grid)
5. **Feature Deep-Dive** — 3 spotlight features with interactive previews
6. **Social Proof** — testimonials carousel + logos
7. **Stats Section** — large numbers (academies, players, revenue tracked)
8. **CTA Section** — dark gradient, strong Arabic CTA
9. **Footer** — links, social, language toggle

#### Hero Content
```
Headline (AR): كل شيء تحت إدارتك
Subheadline (AR): منصة إدارة رياضية متكاملة تضع كل لاعب وكل جنيه وكل حصة تحت تحكمك الكامل
CTA Primary: ابدأ تجربة مجانية
CTA Secondary: احجز عرض تجريبي
Stats: ٤٧+ أكاديمية | ١٢,٠٠٠+ لاعب | ٩٩.٩% وقت تشغيل
```

#### Problem → Solution Section
```
Before state: "من غير نظام..." + scattered elements (papers, WhatsApp messages, Excel icons)
Transition: elements morph/dissolve into organized dashboard UI
After state: "مع الكابتن..." + clean dashboard preview
Duration: triggered on scroll, 2-3 second animation sequence
```

#### Module Showcase (6 primary)
| Module | Icon | Headline | One-liner |
|--------|------|----------|-----------|
| المالية | Wallet | إدارة مالية متكاملة | تتبع كل جنيه من الدفع حتى التقرير |
| اللاعبين | Users | ملفات لاعبين شاملة | كل بيانات اللاعب في مكان واحد |
| التدريب | Calendar | برامج ومجموعات | جدولة ذكية وتتبع تلقائي |
| الحضور | CheckCircle | حضور آلي | تسجيل، تنبيهات، ومتابعة |
| نقاط البيع | ShoppingCart | POS متكامل | بيع، تحصيل، ومخزون |
| المنشآت | Building | إدارة المنشآت | حجز، جدولة، وتخصيص |

#### Feature Deep-Dives (3 spotlights)
Each has: left = text block, right = interactive mockup

1. **Financial Command** — Dashboard with live-looking charts (revenue, outstanding, collections)
2. **Smart Enrollment** — Wizard preview showing the enrollment flow
3. **Attendance Intelligence** — Heat map / calendar view with absence alerts

#### Stats Section
```
١.٢ مليون+ ج.م — إيرادات مُدارة شهرياً
٥٠,٠٠٠+ — حصة مسجلة
٩٨% — رضا العملاء
```
Numbers count up on scroll with staggered timing.

---

### Features Page (المميزات)

#### Structure
- Hero: "كل ما تحتاجه في منصة واحدة" + module count badge
- Module grid: all 14 modules with expandable detail cards
- Each module expands to show: 4-5 specific capabilities, screenshot, related modules
- Comparison table: El Captain vs Excel vs WhatsApp vs generic ERP
- CTA: "اكتشف كيف تناسب أكاديميتك"

#### All 14 Modules Listed
1. الإدارة المالية (Finance)
2. إدارة اللاعبين (Participants)
3. البرامج التدريبية (Training Programs)
4. المجموعات (Training Groups)
5. الحضور والغياب (Attendance)
6. نقاط البيع (POS)
7. المخزون (Inventory)
8. إدارة المنشآت (Facilities)
9. الجدولة (Scheduling)
10. التقارير (Reports)
11. الإشعارات (Notifications)
12. الأدوار والصلاحيات (Permissions)
13. المحافظ الإلكترونية (Wallets)
14. التسعير الذكي (Pricing Engine)

---

### Pricing Page (الأسعار)

#### Plans
| Feature | أساسي (Starter) | احترافي (Pro) | مؤسسي (Enterprise) |
|---------|-----------------|---------------|---------------------|
| Price | ٤٩٩ ج.م/شهر | ٩٩٩ ج.م/شهر | تواصل معنا |
| Players | حتى ٢٠٠ | حتى ١,٠٠٠ | غير محدود |
| Branches | ١ | ٥ | غير محدود |
| Users | ٥ | ١٥ | غير محدود |
| Finance | ✓ | ✓ | ✓ |
| Attendance | ✓ | ✓ | ✓ |
| POS | ✗ | ✓ | ✓ |
| Inventory | ✗ | ✓ | ✓ |
| Reports | Basic | Advanced | Custom |
| Support | Email | Priority | Dedicated |
| API | ✗ | ✗ | ✓ |

#### Toggle: Monthly / Annual (20% discount on annual)
#### FAQ section below pricing cards (6-8 common questions)

---

### About Page (عن الكابتن)

- Mission statement (brand guidelines version)
- Team section (if ready) or "Built by sports people for sports people" story
- Timeline: product development milestones
- Values: 3-4 core values with icons
- Partners/integrations (if any)

---

### Contact / Demo Page

- Split layout: form left, info right
- Form fields: name, academy name, phone, email, player count (dropdown), message
- Right side: calendar embed (Cal.com or Calendly) for booking demo calls
- Below: FAQ about onboarding, data migration, support

---

## SEO Strategy

### Meta Structure
```html
<!-- Arabic (default) -->
<html dir="rtl" lang="ar">
<title>الكابتن — منصة إدارة الأكاديميات الرياضية</title>
<meta name="description" content="منصة متكاملة لإدارة الأكاديميات الرياضية: تسجيل اللاعبين، الحضور، المالية، نقاط البيع. جرب مجاناً." />

<!-- English -->
<html dir="ltr" lang="en">
<title>El Captain — Sports Academy Management Platform</title>
<meta name="description" content="All-in-one platform for sports academies: enrollment, attendance, finance, POS. Start your free trial." />
```

### Target Keywords (Arabic)
- إدارة أكاديمية رياضية
- برنامج إدارة نادي رياضي
- نظام حضور لاعبين
- برنامج محاسبة أكاديمية
- تسجيل لاعبين أونلاين

### Structured Data
- Organization schema
- SoftwareApplication schema
- FAQ schema (pricing page)
- BreadcrumbList schema

---

## Performance Targets

| Metric | Target | How |
|--------|--------|-----|
| LCP | < 2.5s | next/image, font preload, static hero |
| FID | < 100ms | Defer non-critical JS, code split |
| CLS | < 0.1 | Fixed dimensions on images, font-display: swap |
| TTI | < 3.5s | Progressive hydration, lazy animations |
| Bundle | < 150KB first load | Tree-shake, dynamic imports for Framer Motion |

### Egypt-Specific Performance
- Target: 3G/4G mobile (dominant in Egypt)
- Image format: WebP with AVIF fallback
- Font: subset Arabic glyphs only (reduce Cairo from 200KB to ~60KB)
- CDN: Vercel Edge with Middle East PoP (Bahrain)
- Critical CSS: inline above-fold styles

---

## i18n Architecture

### URL Structure
```
elcaptain.com/        → Arabic (default, redirects to /ar)
elcaptain.com/ar/     → Arabic
elcaptain.com/en/     → English
```

### Content Strategy
- Arabic is FULL content (primary)
- English is TRANSLATED (not separate content)
- Numbers: Arabic-Indic in Arabic, Western in English
- Currency: always EGP (ج.م in Arabic, EGP in English)

### Implementation
```typescript
// src/lib/i18n.ts
export const locales = ['ar', 'en'] as const;
export const defaultLocale = 'ar';

// Direction mapping
export const localeConfig = {
  ar: { dir: 'rtl', font: 'cairo' },
  en: { dir: 'ltr', font: 'inter' },
};
```

---

## Deployment & Infrastructure

### Hosting
- **Platform:** Vercel (Pro plan for analytics + team)
- **Domain:** elcaptain.com (or elcaptain.app / elcaptain.io)
- **SSL:** Automatic via Vercel
- **CDN:** Vercel Edge Network

### Environment Variables
```
NEXT_PUBLIC_SITE_URL=https://elcaptain.com
NEXT_PUBLIC_ANALYTICS_ID=...
CONTACT_FORM_ENDPOINT=...  (could hit the Laravel app's API)
CALENDAR_EMBED_URL=...
```

### CI/CD
- Push to `main` → auto-deploy to production
- Push to PR branches → preview deploy with unique URL
- Lighthouse CI check on every PR (block if LCP > 3s)

---

## Content Checklist (Before Launch)

- [ ] All Arabic copy reviewed by native speaker
- [ ] Dashboard mockup screenshots (from actual El Captain app)
- [ ] Testimonials collected (even 2-3 is enough for launch)
- [ ] Pricing finalized with stakeholders
- [ ] Contact form backend connected
- [ ] Calendar booking tool configured
- [ ] OG images designed (Arabic + English)
- [ ] Favicon and app icons
- [ ] Legal pages (privacy policy, terms) — Arabic
- [ ] Google Search Console + Analytics connected
- [ ] Performance audit passed (< 2.5s LCP on 4G)
