Reflection media
موقع وكالة سعودية للبراند الشخصي: تصميم وتطوير كامل، عربي RTL، تصدير ثابت
موقع تعريفي لوكالة سعودية متخصصة في بناء البراند الشخصي للمهنيين وأصحاب الأعمال. تصميم وتطوير كامل: نظام تصميم بمتغيّرات CSS فوق Tailwind v4 بلا أي UI kit جاهز، محتوى عربي كامل، أنيميشن GSAP في الهيرو، وثلاثة نماذج تواصل تعمل فعلياً فوق موقع ثابت 100% بلا خادم.
المشكلة
وكالة تبيع «الحضور الرقمي»، وموقعها هو أول اختبار لمصداقيتها
الجمهور مهنيون: أطباء، محامون، مستشارون، عقاريون، مدربون. يملكون خبرة حقيقية لكنها صامتة: لا حضور رقمي يعكسها، فيخسرون الفرص لصالح من هو أقل خبرة وأكثر ظهوراً. والمشكلة مزدوجة: الوكالة نفسها في الموقف ذاته، إذ لا يمكنها إقناع أحد ببناء حضوره وهي بلا واجهة تُثبت أنها تُتقن ما تبيعه. الموقع إذاً ليس تعريفاً بالخدمات، بل هو العيّنة.
الحل
منهجية تجعل الزائر يصنّف نفسه، وصفحة تخاطبه بمهنته بالاسم
بدل قائمة خدمات مسطّحة، المحتوى مبني حول منهجية من ثلاث مراحل (تأسيس، تطوير، نفوذ)، لكل مرحلة جمهور محدد وستّ نقاط مساعدة، فيضع الزائر نفسه تلقائياً في المرحلة التي تناسبه. ثم قسم «إذا كنت…» يخاطب ست مهن بالاسم مع صور بورتريه، فيرى الزائر نفسه في الصفحة حرفياً بدل رسالة عامة. وفوق ذلك: هيرو بأنيميشن GSAP، نظام تصميم كامل بمتغيّرات CSS فوق Tailwind v4، وموقع ثابت 100% يبقى سريعاً وشبه مجاني التشغيل.
الأثر بالأرقام
مراحل العمل
التموضع قبل التصميم
السؤال الأول بيعي لا بصري: لماذا يتردد المهني في الدفع مقابل «حضور»؟ لأن السوق مليء بمن يبيع متابعين وأرقاماً تجميلية. فالموقع يفتح بموضع صريح مكتوب في الصفحة: «لا نبيع متابعين ولا أرقاماً تجميلية»، وكل ما بعده يخدم هذا الوعد.
بناء المنهجية والمحتوى
المحتوى العربي كامل، مهيكل حول ثلاث مراحل (تأسيس، تطوير، نفوذ) بجمهور ونقاط مساعدة لكل واحدة، يليه قسم «إذا كنت…» لست مهن.
نظام التصميم والحركة
نظام تصميم كامل بمتغيّرات CSS فوق Tailwind v4: توكنات ألوان، مشاهد تدرّج، وطبقات، بلا shadcn ولا MUI ولا أي مكوّن جاهز. التايبوغرافي IBM Plex Sans Arabic للعربية وSpace Grotesk للاتينية. الهيرو بأنيميشن GSAP: mask reveal مع بطاقات المراحل الثلاث المائلة، وقسم مراحل تفاعلي بتبويبات وبورتريهات ورسم قوس متحرّك.
البناء والنشر
الموقع مبني بـ Next.js (App Router) وReact وTypeScript مع تصدير ثابت كامل، ومنشور على Cloudflare. ويشمل طبقة SEO كاملة (metadata، بطاقات OG/Twitter، sitemap، robots) وصفحات تواصل وأسئلة شائعة وخصوصية وشروط، ونظام نماذج ثلاثي يعمل دون خادم خلفي خاص.
التقنيات والأدوات
Next.jsApp Router + تصدير ثابت
Reactواجهة المستخدم
TypeScriptType Safety
Tailwind v4نظام تصميم بمتغيّرات CSS
GSAPأنيميشن الهيرو
Framer Motionانتقالات الواجهة
Cloudflareالاستضافة
قرارات التجربة
ثلاثة قرارات في التصميم والكود جعلت الصفحة تبيع بدل أن تعرض.
ثلاث مراحل بدل قائمة خدمات
قائمة الخدمات تجبر الزائر على تقييم ما يحتاجه بنفسه، وهو أسوأ من يقوم بذلك. منهجية «تأسيس ← تطوير ← نفوذ» تعطيه مسطرة يقيس بها موقعه الحالي، فيصنّف نفسه في ثوانٍ ويصل للعرض المناسب دون أن يشعر أنه بيع له.
«حان وقت أن يراك العالم»: ست مهن تتراكم مع التمرير
بدل شبكة بطاقات يمرّ عليها الزائر سريعاً، كل مهنة بطاقة كاملة تثبت أعلى الشاشة، وتنزلق التالية فوقها فتصغر السابقة قليلاً وتبقى حافتها الملوّنة ظاهرة فوقها. فيرى الزائر المهن تتراكم أمامه واحدة بعد الأخرى، ويعيدها بالتمرير للأعلى. ولكل مهنة لونها الخاص (ذهبي للأطباء، برونزي للمحامين، زمردي للعقار…) فتبقى كل بطاقة مميزة حتى وهي مطويّة في الكومة. ولمن يفضّل تقليل الحركة، تتوقف حركة التصغير وتبقى البطاقات بحجمها الكامل.
تجربة ناعمة على كل جهاز، لا على جهاز المصمم فقط
الموقع لا يُختبر على شاشة واحدة سريعة ثم يُسلَّم. اختبرته على أجهزة متوسطة، وتتبّعت كل تقطّع في التمرير أو الحركة حتى سببه في الكود، وأزلت ما يُثقل المتصفح دون أن يغيّر شيئاً في الشكل. الزائر لا يرى هذه التفاصيل، لكنه يشعر بها: صفحة تتحرك بسلاسة توحي بوكالة تتقن عملها.
النتائج
“الوكالة التي تبيع الحضور الرقمي، تحتاج هي أيضاً إلى موقع احترافي يقدّمها بالشكل الذي تستحقه.”
أعجبك هذا المشروع؟
يسعدني أشرح أي قرار تصميمي أو تقني بالتفصيل.