# Mawidi OG Image Assets

## Current Status
This directory currently contains an SVG placeholder for the Open Graph image. For production use, this should be replaced with a properly optimized PNG file.

## Required Final Image Specifications

### Dimensions
- **Width:** 1200px
- **Height:** 630px
- **Aspect Ratio:** 1.91:1 (standard for Open Graph)

### File Format
- **Format:** PNG or JPG
- **Filename:** `mawidi-og-1200x630.png` or `mawidi-og-1200x630.jpg`
- **Size:** Under 1MB (ideally 200-500KB)
- **Optimization:** Use tools like TinyPNG or ImageOptim

### Design Requirements

#### Visual Elements
1. **Background:**
   - Gradient from indigo (#4F46E5) to purple (#7C3AED)
   - Or use Mawidi brand colors
   - Consider subtle pattern or texture

2. **Main Text:**
   - "Mawidi" in large, bold font
   - Center-aligned
   - High contrast (white or very light color)

3. **Subtext:**
   - "WhatsApp AI Receptionist for Business"
   - Or current tagline
   - Slightly smaller, readable font

4. **Branding:**
   - Include Mawidi logo if available
   - WhatsApp icon or reference (ensure licensing compliance)
   - Professional, clean design

#### Technical Requirements
- **Text Safety Zone:** Keep all text at least 40px from edges
- **Color Contrast:** Ensure WCAG AA compliance (4.5:1 minimum)
- **Readability:** Test at thumbnail size (200px wide)
- **No Text Cutoff:** Some platforms crop images differently

### Design Tools
- **Figma:** Professional UI design
- **Canva:** Quick templates
- **Photoshop/Sketch:** Advanced editing
- **Online Generators:** ogimage.xyz, bannerbear.com

### Testing
Test your OG image across platforms:
1. **Facebook Debugger:** https://developers.facebook.com/tools/debug/
2. **Twitter Card Validator:** https://cards-validator.twitter.com/
3. **LinkedIn Post Inspector:** https://www.linkedin.com/post-inspector/
4. **Open Graph Preview:** https://www.opengraph.xyz/

### Implementation

#### In Next.js Metadata
```typescript
// app/[lang]/layout.tsx or page.tsx
export const metadata: Metadata = {
  openGraph: {
    images: [
      {
        url: '/images/og/mawidi-og-1200x630.png',
        width: 1200,
        height: 630,
        alt: 'Mawidi - WhatsApp AI Receptionist for Business',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    images: ['/images/og/mawidi-og-1200x630.png'],
  },
};
```

#### In HTML Meta Tags
```html
<meta property="og:image" content="https://mawidi.com/images/og/mawidi-og-1200x630.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Mawidi - WhatsApp AI Receptionist for Business" />
<meta name="twitter:image" content="https://mawidi.com/images/og/mawidi-og-1200x630.png" />
<meta name="twitter:card" content="summary_large_image" />
```

### Additional Variations (Optional)

Consider creating variations for different contexts:
- `mawidi-og-home-1200x630.png` - Homepage
- `mawidi-og-blog-1200x630.png` - Blog posts (with dynamic text overlay)
- `mawidi-og-pricing-1200x630.png` - Pricing page
- `mawidi-og-features-1200x630.png` - Features page

### Accessibility
- **Alt Text:** Always include descriptive alt text
- **Color Contrast:** Ensure text is readable for visually impaired users
- **Font Size:** Minimum 32px for body text, 64px+ for headlines

### Localization
For Arabic (RTL) version:
- Consider creating `mawidi-og-ar-1200x630.png`
- Mirror or adjust layout for RTL reading
- Use Arabic text: "موعدي - مساعد واتساب الذكي للأعمال"

## Current Files

- `mawidi-og-1200x630.svg` - SVG placeholder (temporary)
- `README.md` - This documentation

## Next Steps

1. Design final PNG image following specifications above
2. Optimize image file size
3. Replace SVG with PNG in this directory
4. Update metadata in Next.js app
5. Test across social media platforms
6. Consider creating localized versions

## Resources

- [Open Graph Protocol](https://ogp.me/)
- [Twitter Cards Documentation](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards)
- [LinkedIn Image Guidelines](https://www.linkedin.com/help/linkedin/answer/a521928)
- [Facebook Sharing Guidelines](https://developers.facebook.com/docs/sharing/webmasters/)
