feat: Add OpenGraph and Twitter metadata for better social media sharing

[mmd-rehan]

Description

Currently, this project lacks proper OpenGraph and Twitter metadata, which affects how links appear when shared on social media platforms. This feature request aims to add comprehensive metadata support for better social media sharing experience.

Current State

• Basic metadata exists (title, description) but lacks OpenGraph and Twitter-specific tags
• No OG images are configured
• Social media sharing shows generic previews

Proposed Changes

1. Add OpenGraph metadata to all pages:

   • og:title
   • og:description
   • og:image
   • og:url
   • og:type
   • og:site_name

2. Add Twitter Card metadata:

   • twitter:card
   • twitter:title
   • twitter:description
   • twitter:image
   • twitter:creator (optional)

3. Create OG images:

   • Generate default OG images for each page type
   • Support dynamic OG images for portfolio items
   • Ensure proper image dimensions (1200x630px recommended)

4. Update metadata structure:

   • Enhance existing generateMetadata functions
   • Add metadata to root layout
   • Support i18n for metadata

Files to Modify

• src/app/[locale]/layout.tsx - Add base metadata
• src/app/[locale]/(marketing)/page.tsx - Homepage metadata
• src/app/[locale]/(marketing)/about/page.tsx - About page metadata
• src/app/[locale]/(marketing)/portfolio/page.tsx - Portfolio metadata
• src/app/[locale]/(marketing)/portfolio/[slug]/page.tsx - Dynamic portfolio metadata
• src/app/[locale]/(marketing)/counter/page.tsx - Counter page metadata
• src/locales/en.json - Add metadata translations
• src/locales/fr.json - Add metadata translations

Benefits

• Improved social media sharing experience
• Better SEO performance
• Professional appearance when shared
• Enhanced brand visibility

Acceptance Criteria

• All pages have proper OpenGraph metadata
• All pages have proper Twitter Card metadata
• OG images are created and properly sized
• Metadata supports i18n
• Dynamic metadata works for portfolio items
• Tests pass
• Documentation updated

Type

• Bug fix
• New feature
• Documentation update
• Performance improvement
• Refactoring

Priority

• Low
• Medium
• High
• Critical