تحسين كود HTML/CSS/Bootstrap لمطابقة تصميم Figma (عربي/إنجليزي)

CSS HTML html5 تحويل تصميم من PSD إلى HTML Figma بوتستراب 5 Bootstrap4 برمجة هندسة البرمجيات CSS HTML html5 تحويل تصميم من PSD إلى HTML Figma بوتستراب 5 Bootstrap4 برمجة هندسة البرمجيات

لدينا موقع ثنائي اللغة (العربية / الإنجليزية) تم بناؤه بالفعل باستخدام HTML5 + CSS3 + Bootstrap 5. الهيكل العام مطابق لتصميم Figma بنسبة كبيرة، لكن نحتاج ضبط المسافات والهوامش والمحاذاة والأحجام (pixel-perfect) حتى يصبح التطابق 100% مع التصميم. الصفحات الحالية: 1 - الصفحة الرئيسية 2 - صفحة المنتج 3 - من نحن 4 - المدونة 5 - تواصل معنا ** المطلوب فنيًا ليس إعادة بناء، بل تحسينات دقيقة على الستايلينج: ضبط الـ spacing (margin/padding)، الشبكة، قياسات العناصر، الخطوط، التراص، وحالات الاستجابة على جميع المقاسات، مع دعم RTL/LTR بشكل كامل. نطاق العمل (Tasks) - مطابقة التصميم pixel-perfect لكل صفحة مع Figma (انحراف بصري لا يتجاوز 1–2px). - ضبط النظام الطباعي (الأحجام/الوزن/الارتفاع) والخطوط المستخدمة في Figma. - توحيد المسافات (Spacing Scale) عبر استخدام متغيرات Bootstrap أو CSS Variables. - مراجعة الشبكة (Grid/Container/Row/Col) ومحاذاة العناصر بدقة. - تحسين الاستجابة على كافة نقاط التوقف (xs, sm, md, lg, xl). - دعم اتجاهي النص: RTL للعربية وLTR للإنجليزية (تأكد من الانعكاس الصحيح للأيقونات/الأسهم/المحاذاة). ** ما سنوفره لك رابط تصميم Figma مع القياسات/Specs. سورس المشروع الحالي (HTML/CSS/Bootstrap). ** فضلاً أرفِق في عرضك أمثلة لمشاريع تحويل Figma إلى Bootstrap مع دعم RTL. نبذة عن طريقتك في تحقيق pixel-perfect توضيح لو كنت تفضّل SCSS أو CSS عادي وكيف ستُنظّم الملفات.