صفحات الهبوط لشركة LH Energies
تفاصيل العمل
بالطبع! إليك وصف شامل للموقع باللغة العربية:
## وصف شامل للموقع
### **الغرض من الموقع**
هذا الموقع هو **محفظة أعمال مطور** متخصص في تطوير صفحات الهبوط عالية التحويل. الموقع مصمم لعرض مجموعة من صفحات الهبوط التي تم تطويرها لشركة **LH Energies** المتخصصة في التجديد الطاقوي والطاقة المتجددة.
### **الهدف الأساسي**
- عرض مهارات المطور في تصميم وتطوير صفحات الهبوط المتنوعة
- إظهار القدرة على إنشاء تصاميم مختلفة لنفس الشركة
- توفير منصة لعرض الأعمال للعملاء المحتملين
- ربط صفحات الهبوط بحملات إعلانات جوجل للتسويق الرقمي
### ️ **التقنيات المستخدمة**
#### **Frontend Framework:**
- **Next.js 14** مع App Router - إطار عمل React متقدم للتطبيقات الحديثة
- **React 18** - مكتبة JavaScript لبناء واجهات المستخدم التفاعلية
- **TypeScript** - لغة برمجة قوية تضيف الأنواع الثابتة لـ JavaScript
#### **التصميم والأنماط:**
- **Tailwind CSS** - إطار عمل CSS utility-first للتصميم السريع والمرن
- **shadcn/ui** - مكتبة مكونات UI حديثة وقابلة للتخصيص
- **Lucide React** - مكتبة أيقونات عصرية وخفيفة
- **CSS Variables** - للتحكم الديناميكي في الألوان والثيمات
#### **الخطوط:**
- **Cairo Font** - خط عربي حديث وأنيق للنصوص العربية
- **Inter Font** - خط لاتيني عصري للنصوص الإنجليزية والفرنسية
#### **الميزات المتقدمة:**
- **next-themes** - نظام متقدم للتبديل بين الوضع الليلي والنهاري
- **Internationalization (i18n)** - دعم متعدد اللغات مع middleware مخصص
- **RTL/LTR Support** - دعم الكتابة من اليمين لليسار والعكس
### **الميزات الرئيسية**
#### **1. دعم متعدد اللغات:**
- **العربية** (اللغة الافتراضية) مع دعم RTL
- **الفرنسية** مع دعم LTR
- **الإنجليزية** مع دعم LTR
- تبديل سلس بين اللغات مع الحفاظ على التخطيط المناسب
#### **2. الوضع الليلي/النهاري:**
- تبديل تلقائي حسب إعدادات النظام
- تبديل يدوي بنقرة واحدة
- انتقالات سلسة بين الأوضاع
- حفظ تفضيلات المستخدم
#### **3. التصميم المتجاوب:**
- متوافق مع جميع أحجام الشاشات
- تخطيط مرن للهواتف والأجهزة اللوحية وأجهزة الكمبيوتر
- تجربة مستخدم محسنة على جميع الأجهزة
#### **4. معرض صفحات الهبوط:**
- **7 تصاميم مختلفة** لصفحات الهبوط:
1. **تصميم عصري** - للطاقة الشمسية (تدرج أزرق)
2. **تصميم فاخر** - لأنظمة التدفئة (تدرج بنفسجي)
3. **تصميم بسيط** - للعزل الحراري (تدرج رمادي)
4. **تصميم تقني** - للمنزل الذكي (تدرج أخضر)
5. **تصميم مؤسسي** - للتجديد الشامل (تدرج نيلي)
6. **تصميم ودود** - للاستشارة (تدرج وردي)
7. **تصميم احترافي** - للتمويل (تدرج ذهبي)
### **الهوية البصرية**
#### **الألوان الأساسية:**
- **اللون الأساسي:** `#80D19C` (أخضر مميز للأزرار والعناصر التفاعلية)
- **تدرجات متنوعة** لكل تصميم من تصاميم صفحات الهبوط
- **نظام ألوان متوافق** مع الوضع الليلي والنهاري
#### **التخطيط:**
- **تخطيط نظيف ومنظم** مع مساحات بيضاء مدروسة
- **بطاقات تفاعلية** مع تأثيرات hover جذابة
- **أيقونات معبرة** لكل نوع من أنواع التصاميم
- **شارات تعريفية** لكل نمط تصميم
بالطبع! إليك وصف شامل للموقع باللغة العربية:
## وصف شامل للموقع
### **الغرض من الموقع**
هذا الموقع هو **محفظة أعمال مطور** متخصص في تطوير صفحات الهبوط عالية التحويل. الموقع مصمم لعرض مجموعة من صفحات الهبوط التي تم تطويرها لشركة **LH Energies** المتخصصة في التجديد الطاقوي والطاقة المتجددة.
### **الهدف الأساسي**
- عرض مهارات المطور في تصميم وتطوير صفحات الهبوط المتنوعة
- إظهار القدرة على إنشاء تصاميم مختلفة لنفس الشركة
- توفير منصة لعرض الأعمال للعملاء المحتملين
- ربط صفحات الهبوط بحملات إعلانات جوجل للتسويق الرقمي
### ️ **التقنيات المستخدمة**
#### **Frontend Framework:**
- **Next.js 14** مع App Router - إطار عمل React متقدم للتطبيقات الحديثة
- **React 18** - مكتبة JavaScript لبناء واجهات المستخدم التفاعلية
- **TypeScript** - لغة برمجة قوية تضيف الأنواع الثابتة لـ JavaScript
#### **التصميم والأنماط:**
- **Tailwind CSS** - إطار عمل CSS utility-first للتصميم السريع والمرن
- **shadcn/ui** - مكتبة مكونات UI حديثة وقابلة للتخصيص
- **Lucide React** - مكتبة أيقونات عصرية وخفيفة
- **CSS Variables** - للتحكم الديناميكي في الألوان والثيمات
#### **الخطوط:**
- **Cairo Font** - خط عربي حديث وأنيق للنصوص العربية
- **Inter Font** - خط لاتيني عصري للنصوص الإنجليزية والفرنسية
#### **الميزات المتقدمة:**
- **next-themes** - نظام متقدم للتبديل بين الوضع الليلي والنهاري
- **Internationalization (i18n)** - دعم متعدد اللغات مع middleware مخصص
- **RTL/LTR Support** - دعم الكتابة من اليمين لليسار والعكس
### **الميزات الرئيسية**
#### **1. دعم متعدد اللغات:**
- **العربية** (اللغة الافتراضية) مع دعم RTL
- **الفرنسية** مع دعم LTR
- **الإنجليزية** مع دعم LTR
- تبديل سلس بين اللغات مع الحفاظ على التخطيط المناسب
#### **2. الوضع الليلي/النهاري:**
- تبديل تلقائي حسب إعدادات النظام
- تبديل يدوي بنقرة واحدة
- انتقالات سلسة بين الأوضاع
- حفظ تفضيلات المستخدم
#### **3. التصميم المتجاوب:**
- متوافق مع جميع أحجام الشاشات
- تخطيط مرن للهواتف والأجهزة اللوحية وأجهزة الكمبيوتر
- تجربة مستخدم محسنة على جميع الأجهزة
#### **4. معرض صفحات الهبوط:**
- **7 تصاميم مختلفة** لصفحات الهبوط:
1. **تصميم عصري** - للطاقة الشمسية (تدرج أزرق)
2. **تصميم فاخر** - لأنظمة التدفئة (تدرج بنفسجي)
3. **تصميم بسيط** - للعزل الحراري (تدرج رمادي)
4. **تصميم تقني** - للمنزل الذكي (تدرج أخضر)
5. **تصميم مؤسسي** - للتجديد الشامل (تدرج نيلي)
6. **تصميم ودود** - للاستشارة (تدرج وردي)
7. **تصميم احترافي** - للتمويل (تدرج ذهبي)
### **الهوية البصرية**
#### **الألوان الأساسية:**
- **اللون الأساسي:** `#80D19C` (أخضر مميز للأزرار والعناصر التفاعلية)
- **تدرجات متنوعة** لكل تصميم من تصاميم صفحات الهبوط
- **نظام ألوان متوافق** مع الوضع الليلي والنهاري
#### **التخطيط:**
- **تخطيط نظيف ومنظم** مع مساحات بيضاء مدروسة
- **بطاقات تفاعلية** مع تأثيرات hover جذابة
- **أيقونات معبرة** لكل نوع من أنواع التصاميم
- **شارات تعريفية** لكل نمط تصميم
### **البنية التقنية**
#### **هيكل المشروع:**
```plaintext
├── app/[lang]/ # صفحات متعددة اللغات
├── components/ # مكونات قابلة لإعادة الاستخدام
├── dictionaries/ # ملفات الترجمة
├── middleware.ts # معالج اللغات والتوجيه
└── tailwind.config.ts # إعدادات التصميم
```
#### **إدارة الحالة:**
- **React Hooks** لإدارة الحالة المحلية
- **Context API** للثيمات واللغات
- **Local Storage** لحفظ تفضيلات المستخدم
#### **الأداء والتحسين:**
- **Static Generation** لتحميل سريع
- **Code Splitting** لتقليل حجم الحزم
- **Image Optimization** للصور والأيقونات
- **Font Optimization** للخطوط العربية واللاتينية
### **تجربة المستخدم (UX)**
#### **التنقل:**
- **قائمة تنقل بديهية** مع روابط سلسة
- **أزرار واضحة** للإجراءات الأساسية
- **تأثيرات تفاعلية** عند التمرير والنقر
#### **إمكانية الوصول:**
- **دعم قارئات الشاشة** مع ARIA labels
- **تباين ألوان مناسب** للمستخدمين ذوي الإعاقة البصرية
- **تنقل بلوحة المفاتيح** لجميع العناصر التفاعلية
### **الاستخدام المستقبلي**
- **ربط الروابط الحقيقية** لصفحات الهبوط
- **إضافة نماذج اتصال** لجمع بيانات العملاء المحتملين
- **تتبع Google Analytics** لقياس الأداء
- **تحسين SEO** لمحركات البحث
- **إضافة المزيد من التصاميم** حسب الحاجة
### **القيمة التجارية**
هذا الموقع يُظهر احترافية المطور وقدرته على:
- إنشاء تطبيقات ويب حديثة ومتطورة
- التعامل مع متطلبات العملاء المتنوعة
- تطوير حلول تقنية متكاملة للتسويق الرقمي
- إنتاج أعمال عالية الجودة تدعم أهداف العمل
هذا الموقع يُعتبر **نموذج مثالي** لمحفظة أعمال مطور متخصص في صفحات الهبوط والتسويق الرقمي.