# Mawidi Brand Assets

This folder contains official Mawidi brand assets including logos and icons.

## Current Logo Files

| File | Description | Use Case |
|------|-------------|----------|
| `logo-horizontal.jpeg` | Icon + "Mawidi" + "موعدي" side by side | Header, navigation, marketing |
| `logo-icon.jpg` | Icon only (WhatsApp bubble with M) | Favicon, small spaces, app icon |
| `logo-stacked.jpg` | Icon above bilingual text | Square layouts, social profiles |

## Logo Design

The Mawidi logo consists of:

```
┌─────────────────────────────────────────┐
│                                         │
│    ┌─────┐                              │
│    │  M  │ ✓   Mawidi                   │
│    │ ••• │     موعدي                    │
│    └─────┘                              │
│                                         │
└─────────────────────────────────────────┘
```

**Elements:**
- WhatsApp-style speech bubble (green gradient)
- White "M" letter
- Three dots (typing indicator style)
- Black checkmark badge (verification)
- "Mawidi" in dark charcoal
- "موعدي" in green

## Brand Colors (from logo)

```css
/* Logo icon gradient */
--logo-green-light: #25D366;
--logo-green-dark: #128C7E;

/* Text colors */
--logo-text-dark: #333333;      /* "Mawidi" */
--logo-text-arabic: #25D366;    /* "موعدي" */
```

## Usage in Code

```jsx
// Header navigation
<img 
  src="/brand/logo-horizontal.jpeg" 
  alt="Mawidi - موعدي" 
  className="h-10 w-auto"
/>

// Favicon / App icon
<img 
  src="/brand/logo-icon.jpg" 
  alt="Mawidi" 
  className="h-8 w-8"
/>

// Square contexts (social, avatars)
<img 
  src="/brand/logo-stacked.jpg" 
  alt="Mawidi - موعدي" 
  className="h-24 w-auto"
/>
```

### Next.js Image Component

```jsx
import Image from 'next/image';

<Image
  src="/brand/logo-horizontal.jpeg"
  alt="Mawidi - موعدي"
  width={180}
  height={60}
  priority
/>
```

## Sizing Guidelines

| Context | Variant | Height |
|---------|---------|--------|
| Desktop nav | horizontal | 40-48px |
| Mobile nav | icon | 32-40px |
| Footer | horizontal | 32-40px |
| Social avatar | stacked | 64-128px |
| Hero section | stacked | 80-120px |

## Still Needed (Optional)

For complete brand coverage, consider adding:

- [ ] `logo-white.png` - White version for dark backgrounds
- [ ] `favicon.ico` - Browser favicon (32x32)
- [ ] `apple-touch-icon.png` - iOS icon (180x180)
- [ ] `og-image.jpg` - Social sharing (1200x630)

## Logo Guidelines

**DO:**
- ✅ Use appropriate variant for context
- ✅ Maintain clear space around logo
- ✅ Ensure sufficient contrast with background

**DON'T:**
- ❌ Stretch or distort
- ❌ Rotate or skew
- ❌ Change colors
- ❌ Add effects (shadows, glows)
- ❌ Use on busy backgrounds

## Reference

See the [brand-guidelines skill](/.claude/mcp/skills/brand-guidelines/SKILL.md) for complete brand documentation including colors, typography, and component styling.
