نظرة عامة

Lara's صالون تجميل فاخر للعرائس وأكاديمية تدريب، وهذه صفحته الرئيسية — أحد عشر قسمًا مصنوعًا بعناية ومبنيًا بدقة البكسل انطلاقًا من مجموعة تصاميم. وبدل تقريب التصميم، قُرِئ كل لون وحجم خط ومسافة من التصاميم بسكربتات بكسل ودُوِّن في مواصفة مكتوبة، ثم نُفِّذ وجرى التحقّق منه مقابل التصميم في حلقة عرض ثم لقطة شاشة ثم مقارنة ثم تقارب حتى طابق البناءُ التصميم.

تعمل الصفحة على Next.js 16 (App Router وReact 19) وTailwind v4، مع نظام رموز تصميم مركزي بلونَي الكريمي والذهبي وثلاثة خطوط مستضافة ذاتيًا (Playfair Display وPoppins وGreat Vibes). وتمرّ الصفحة عبر واجهة رئيسية، وعرض افتتاح كبير، وقصة الصالون، وشبكة خدمات قابلة للتصفية، وباقات مميّزة، وأكاديمية تدريب، ومعرض صور، وآراء العملاء، وأسئلة شائعة، وقسم حجز/تواصل مع خريطة الموقع — سريعة، وثابتة في معظمها، ومتجاوبة بالكامل.

التحدي

مصير موقع الصالون الفاخر مرهون بمظهره، لذا لم يكن «قريب بما يكفي» مقبولًا. كان على البناء أن يطابق تصاميم المصمّم تمامًا — التدرّجات الذهبية، والعناوين ذات الزخارف الخطّية، والمسافات على مستوى البكسل. وكانت المشكلة تحويل كومة من التصاميم الثابتة إلى موقع Next.js سريع وسهل الصيانة ومتجاوب دون الانحراف عن التصميم: طريقة منضبطة لقياس النية التصميمية، ونظام رموز وخطوط أمين لها، وأحد عشر قسمًا متمايزًا مركّبة بنظافة، وحلقة تحقّق قادرة على إثبات مطابقة النتيجة لا على ادّعائها.