# خطة إعادة تصميم Momira — باستخدام Frontend Skill

## التحليل البصري للأصول (Media Assets)

### الصور المتاحة في `public/media/`:
- **main.png** — صورة رئيسية أنيقة (أبيض/ذهبي، إضاءة دافئة)
- **hf_20260526_115838_...png** — تفاصيل ديكور فاخر (شموع، ورود بيضاء)
- **hf_20260526_115839_...png** — إعدادات طاولة أنيقة
- **hf_20260526_114135_...png** — لقطة جوية لمناسبة
- فيديوهات: لقطات حية من المناسبات

### الاتجاه الجمالي المُختار: **"Luxury/Refined + Editorial"**
- أنيق وراقٍ مثل مجلة عروس فاخرة
- ألوان: أبيض كريمي، ذهبي/عنبري، رمادي داكن
- تباين عالي للقراءة الفاخرة

---

## 1. نظام التصميم (Design System)

### الألوان (CSS Variables)
```css
:root {
  /* اللون الأساسي — ذهبي/عنبري للسوق السعودي */
  --primary: 45 90% 55%;          /* amber-gold */
  --primary-foreground: 30 20% 10%;
  
  /* الخلفيات */
  --background: 30 10% 97%;       /* off-white cream */
  --foreground: 30 10% 10%;       /* rich dark */
  --card: 30 10% 99%;
  --card-foreground: 30 10% 10%;
  
  /* التدرجات */
  --muted: 30 10% 90%;
  --muted-foreground: 30 10% 40%;
  --accent: 40 80% 60%;
  
  /* الحدود والظلال */
  --border: 30 20% 88%;
  --ring: 45 90% 55%;
  --radius: 1rem;                  /* أكثر استدارة = فخامة */
}

.dark {
  --background: 30 10% 8%;
  --foreground: 30 10% 95%;
  --card: 30 10% 12%;
  --muted: 30 10% 20%;
  --muted-foreground: 30 10% 60%;
  --border: 30 10% 20%;
}
```

### الطباعة (Typography)
```css
/* تخطى Inter/Arial — استخدم خطوط مميزة */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Playfair+Display:wght@400;600;700&family=Noto+Sans+Arabic:wght@400;500;700&display=swap');

/* العربي */
font-arabic: 'Noto Sans Arabic', 'Cormorant Garamond', serif;
/* العناوين */
font-display: 'Playfair Display', 'Noto Sans Arabic', serif;
/* النصوص */
font-body: 'Cormorant Garamond', 'Noto Sans Arabic', serif;
```

### RTL Support — CSS Logical Properties
```tsx
// ❌ قديم (لا يدعم RTL)
<div className="ml-4 text-left">

// ✅ جديد (يدعم RTL تلقائياً)
<div className="ms-4 text-start">
// ms = margin-start, me = margin-end
// ps = padding-start, pe = padding-end
// text-start/text-end بدل left/right
```

---

## 2. أقسام الصفحة الرئيسية (Page Sections)

### Hero Section — جديد بالكامل
**الفكرة:** مجلة عائمة (floating editorial) + صورة خلفية متحركة

```tsx
// استخدام الصور المحلية
const HERO_IMAGES = [
  '/media/main.png',
  '/media/hf_20260526_115838_c934bb45-0061-4eec-9e6c-3b62b20fb2ee.png',
  '/media/hf_20260526_115839_f9cc83ed-4d9c-4645-a4b2-9de8faf2479b.png',
];

// التصميم
<section className="relative min-h-[90vh] overflow-hidden">
  {/* خلفية متدرجة مع صورة */}
  <div className="absolute inset-0">
    <Image src={currentImage} fill className="object-cover opacity-90" />
    <div className="absolute inset-0 bg-gradient-to-t from-background via-background/50 to-transparent" />
  </div>
  
  {/* محتوى عائم */}
  <div className="relative z-10 flex flex-col items-center justify-center min-h-[90vh] px-6 text-center">
    <motion.h1 
      className="font-display text-5xl md:text-7xl lg:text-8xl font-bold leading-tight"
      initial={{ opacity: 0, y: 40 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }} // cubic-bezier فاخر
    >
      <span className="block text-foreground">{t(lang, 'captureYourDay')}</span>
      <span className="block text-primary italic">{t(lang, 'throughEveryonesEyes')}</span>
    </motion.h1>
    
    {/* CTA buttons بشكل مجلة */}
    <div className="mt-10 flex flex-col sm:flex-row gap-4">
      <Button size="lg" className="rounded-full px-8 h-14 text-lg">
        {t(lang, 'startCapturing')}
      </Button>
      <Button variant="outline" size="lg" className="rounded-full px-8 h-14 text-lg">
        <Play className="me-2 h-5 w-5" />
        {t(lang, 'watchDemo')}
      </Button>
    </div>
  </div>
</section>
```

### Features Grid — تغيير جذري
**الفكرة:** كروت زجاجية (glassmorphism) بتباعد غير متساوٍ (asymmetric grid)

```tsx
// Grid بمقاسات مختلفة — أكثر إثارة
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* البطاقة الكبيرة */}
  <Card className="lg:col-span-2 lg:row-span-2 glass-card">
    <Image src="/media/hf_20260526_115839_f9cc83ed-4d9c-4645-a4b2-9de8faf2479b.png" />
  </Card>
  
  {/* بطاقات صغيرة */}
  <Card className="glass-card"><CameraIcon /></Card>
  <Card className="glass-card"><ClockIcon /></Card>
  <Card className="lg:col-span-2 glass-card"><PrivacyIcon /></Card>
</div>

// CSS للـ glass effect
.glass-card {
  @apply bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl 
         border border-white/20 dark:border-zinc-800/50
         rounded-3xl shadow-2xl shadow-primary/5;
}
```

### Video Section — استخدام الفيديوهات المحلية
**الفكرة:** عرض سينمائي للفيديوهات

```tsx
<section className="py-24 px-6">
  <div className="max-w-6xl mx-auto">
    <h2 className="font-display text-4xl md:text-5xl text-center mb-16">
      {t(lang, 'momentsInMotion')}
    </h2>
    
    {/* شبكة فيديو */}
    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
      <video 
        src="/media/hf_20260526_115837_80c35ba1-2093-4146-bac8-4831aa3a4226.mp4"
        className="rounded-3xl shadow-2xl w-full aspect-[9/16] object-cover"
        autoPlay muted loop playsInline
      />
      <video 
        src="/media/hf_20260526_121541_8feb33d7-39e9-48fc-b634-1bf4b1834355.mp4"
        className="rounded-3xl shadow-2xl w-full aspect-[9/16] object-cover mt-12"
        autoPlay muted loop playsInline
      />
    </div>
  </div>
</section>
```

### Use Cases — تغيير لـ Editorial Cards
**الفكرة:** بطاقات كبيرة بتصميم مجلة

```tsx
// بدل البطاقات الصغيرة — بطاقات كبيرة بصور حقيقية
const USE_CASES = [
  { 
    key: 'wedding', 
    image: '/media/main.png',
    title: t(lang, 'wedding'),
    desc: t(lang, 'weddingDesc')
  },
  // ...
];

// التصميم
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  {USE_CASES.map((use) => (
    <Card className="group relative overflow-hidden rounded-3xl aspect-[4/3]">
      <Image src={use.image} fill className="object-cover transition-transform duration-700 group-hover:scale-105" />
      <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
      <div className="absolute bottom-0 start-0 p-8">
        <h3 className="font-display text-3xl text-white mb-2">{use.title}</h3>
        <p className="text-white/80 text-lg">{use.desc}</p>
      </div>
    </Card>
  ))}
</div>
```

---

## 3. المكونات الجديدة (New Components)

### 1. ImageCarousel — عرض الصور
```tsx
// Carousel أنيق للصور المحلية
function ImageCarousel() {
  const [index, setIndex] = useState(0);
  const images = [
    '/media/main.png',
    '/media/hf_20260526_115838_c934bb45-0061-4eec-9e6c-3b62b20fb2ee.png',
    '/media/hf_20260526_115839_f9cc83ed-4d9c-4645-a4b2-9de8faf2479b.png',
    '/media/hf_20260526_115839_a443209a-f7c0-42a8-a681-0d0f0b17b418.png',
  ];
  
  useEffect(() => {
    const timer = setInterval(() => {
      setIndex((i) => (i + 1) % images.length);
    }, 5000);
    return () => clearInterval(timer);
  }, []);
  
  return (
    <div className="relative w-full h-[500px] rounded-3xl overflow-hidden">
      <AnimatePresence mode="wait">
        <motion.img
          key={index}
          src={images[index]}
          fill
          className="object-cover"
          initial={{ opacity: 0, scale: 1.1 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}
        />
      </AnimatePresence>
      
      {/* المؤشرات */}
      <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2">
        {images.map((_, i) => (
          <button
            key={i}
            onClick={() => setIndex(i)}
            className={`h-2 rounded-full transition-all ${
              i === index ? 'w-8 bg-primary' : 'w-2 bg-white/50'
            }`}
          />
        ))}
      </div>
    </div>
  );
}
```

### 2. VideoLightbox — مشغل الفيديو
```tsx
// Lightbox أنيق للفيديوهات
function VideoLightbox({ src, isOpen, onClose }: Props) {
  if (!isOpen) return null;
  
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 z-50 bg-black/95 flex items-center justify-center p-4"
      onClick={onClose}
    >
      <motion.div
        initial={{ scale: 0.9 }}
        animate={{ scale: 1 }}
        className="relative max-w-4xl w-full aspect-video rounded-2xl overflow-hidden"
      >
        <video src={src} controls autoPlay className="w-full h-full" />
      </motion.div>
    </motion.div>
  );
}
```

---

## 4. التحسينات المطلوبة (Implementation Checklist)

### Phase 1 — التحسينات البصرية
- [ ] تحديث `globals.css` بالألوان الجديدة (gold/cream)
- [ ] إضافة الخطوط (Google Fonts)
- [ ] إنشاء `glass-card` utility class
- [ ] تحديث `next.config.js` للـ fonts

### Phase 2 — Hero Section
- [ ] استبدال Unsplash بـ `/media/main.png`
- [ ] إضافة ImageCarousel للـ hero
- [ ] تحديث animation timings (cubic-bezier فاخر)
- [ ] إضافة تأثير parallax خفيف

### Phase 3 — المحتوى
- [ ] إنشاء Video Section بالفيديوهات المحلية
- [ ] تحديث Use Cases لاستخدام الصور المحلية
- [ ] إعادة تصميم Features Grid (asymmetric)
- [ ] إضافة تأثيرات hover مميزة

### Phase 4 — RTL & Accessibility
- [ ] استبدال `ml/mr` بـ `ms/me`
- [ ] استبدال `text-left/right` بـ `text-start/end`
- [ ] إضافة `dir={isAr ? 'rtl' : 'ltr'}` للـ html
- [ ] تحسين contrast ratios

### Phase 5 — Animation Polish
- [ ] staggered reveal للـ sections
- [ ] scroll-triggered animations (Framer Motion `whileInView`)
- [ ] micro-interactions للـ buttons
- [ ] hover effects للـ cards

---

## 5. الملفات التي ستُعدّل

| الملف | التغييرات |
|-------|-----------|
| `web/src/app/globals.css` | ألوان جديدة، خطوط، utilities |
| `web/src/app/page.tsx` | Hero جديد، صور محلية، فيديو |
| `web/src/app/layout.tsx` | Google Fonts import |
| `web/next.config.js` | fonts optimization |
| `web/tailwind.config.ts` | extend colors, fontFamily |
| `web/src/lib/i18n.ts` | إضافة مفاتيح ترجمة جديدة |

---

## 6. ما يُحافظ عليه (No Breaking Changes)

- ✅ Authentication flow — لا تغيير
- ✅ Event creation logic — لا تغيير
- ✅ Firebase integration — لا تغيير
- ✅ i18n keys الحالية — نضيف فقط
- ✅ Routes — لا تغيير
- ✅ API endpoints — لا تغيير

---

## الخلاصة

**الرؤية:** تحويل Momira من "موقع داكن عادي" إلى "تجربة مجلة عرائس فاخرة" تستخدم:
- الصور والفيديوهات المحلية الفعلية
- ألوان ذهبية/كريمية تناسب السوق السعودي
- طباعة مميزة (Playfair + Noto Sans Arabic)
- حركات سلسة ومتعمدة
- دعم RTL كامل بـ CSS logical properties

**النتيجة:** موقع يشعرك أنك في معرض أزياء أو مجلة عرائس، لا موقع تقني بارداً.