واجهة عربية وإنجليزية مع تبديل صحيح بين RTL وLTR.
دراسة الحالةVercel - Production
Bayoumy Co. | موقع شركة ثنائي اللغة
موقع شركة ثنائي اللغة (عربي/إنجليزي) لشركة محمد عبد الوهاب بيومي. بنيت حضورًا مصقولًا لشركة مقاولات بتخطيطات متجاوبة، وعرض بالحركة، وصور محسّنة، ونماذج متعددة الخطوات، وTechnical SEO يساعد العلامة تظهر بوضوح على الأجهزة ومحركات البحث.
تقنيات الواجهة
- Next.js
- React
- TypeScript
- Tailwind CSS
- Framer Motion
الأداء
- Static generation لصفحات التسويق الثقيلة.
- تحسين صور البانرات والمعارض عبر Next.js Image.
- تقسيم الكود حتى يتحمّل الـ UI غير الضروري لاحقًا.
- تحميل الخطوط عبر next/font.
- Prefetch للروابط الداخلية الأساسية.
الجودة والموثوقية
- نماذج TypeScript للمحتوى الثنائي اللغة والنماذج وخصائص الواجهة.
- تحقق واضح من النماذج وحماية من السبام.
- سلوك تخطيط متسق عبر أحجام الشاشات.
- إرسال نماذج التوظيف والموردين عبر تكامل بريد مخصص.
أبرز المميزات
تخطيطات شركة واضحة على الموبايل والتابلت وسطح المكتب.
انتقالات صفحات وتفاعلات صغيرة بـ Framer Motion.
تحسين الصور عبر Next.js Image بصيغ حديثة.
نماذج توظيف وموردين متعددة الخطوات مع تحقق واضح من المدخلات.
معرض مشاريع مع بحث وتصفية حسب التصنيف.
Technical SEO يشمل metadata وsitemap وstructured data.
ثيمات ذهبي وداكن وفاتح لهوية بصرية متسقة.
بنية الواجهة
مسارات صفحات ثنائية اللغة وتخطيطات مشتركة مكوّنات واجهة وأقسام قابلة لإعادة الاستخدام طبقة حركة وتفاعل سياقات الثيم واللغة والتحميل أصول وسائط ثابتة محسّنة
استراتيجيات هندسة الواجهة
- إبقاء صفحات التسويق ثابتة، وإضافة التفاعل فقط حيث يلزم.
- مكوّنات React قابلة لإعادة الاستخدام لأقسام الشركة.
- توجيه وmetadata ثنائية اللغة يستطيع محرك البحث متابعتها.
- مسار Next.js Image لصور متجاوبة.
- حركة تدعم الهوية من دون أن تشوّش على المحتوى.
- تجربة نماذج مع حماية من السبام وملاحظات نجاح وخطأ واضحة.
الواجهة البصرية
