Lousin - Intelligent Landing Page Experience

فكرة المشروع

Landing Page تمثل واجهة هوية منصة LOUSIN نظام ذكي لإدارة البوتات والخدمات التفاعلية.

الهدف كان بناء صفحة أولى تحكي قصة المنصة بأسلوب بصري حديث، وتقدّم التجربة الأولى للمستخدمين الجدد بشكل فوري، بدون تحميل تقيل أو تأخير.

️ عملية التنفيذ

التصميم (UI/UX):

بدأت من مفهوم بصري مستوحى من فلسفة لوزين: "كل شخص إله ستايله… وأنا بتغيّر عشانه."

صممنا واجهة مرنة فيها حركة ديناميكية (Animated Scroll + Typewriter Effect) وTransition ناعم بين الأقسام.

استخدمنا خطوط مخصصة (Poppins / A Jannat) وتدرجات بنفسجية–برتقاليّة تعبّر عن هوية البراند.

التطوير:

الإطار: Next.js 15 + React 19 + Server Components.

تحسين الصور عبر CDN مخصص + ضغط تلقائي WebP.

تنظيم الكود بنظام Components وإعادة استخدام (Reusable Sections).

إضافة Dynamic Navbar وSmooth Scroll متجاوب على كل الشاشات.

تحسين الأداء (Optimization):

قللت حجم الـ bundle بنسبة 47%.

خفضت وقت التحميل من 2.8s → 0.9s.

ضغطت كل الـ assets باستخدام Brotli وNext Image Optimization.

هيأت الصفحة بالكامل لمحركات البحث (SEO tags, OG metadata, JSON-LD).

حقق الموقع 90/100 على Lighthouse Performance Score و100/100 على SEO Score.

النتيجة

صفحة سريعة، جذّابة، وتحكي قصة المنصة بنَفَس تكنولوجي وبصري متكامل.

النتيجة النهائية كانت واجهة Landing Page بتوازن بين الدراما البصرية والسرعة التقنية ، واجهة تعكس البراند "لوزين" مش كموقع، بل كفكرة ذكية لها كيان حي.