website portfoilo

تصميم وتطوير واجهة مستخدم متقدمة (UI/UX) لقسم باقات التسعير والمقارنة (Pricing & Comparison Section) مخصص لمنصات العمل كخدمة (SaaS) وشركات أتمتة الذكاء الاصطناعي. الهدف كان تحويل تصميم معقد إلى كود حي متجاوب 100%، مع التركيز على الأداء العالي (Performance) والاعتماد على أكواد نظيفة (Clean CSS) لضمان سرعة التحميل دون التأثير على جودة المؤثرات البصرية.

[أبرز التحديات التي تم إنجازها بدقة Pixel-Perfect]

Inverted Border Radius (القطعية المعكوسة): تنفيذ تصميم النوتش (Notch) الخاص بكلمة "Popular" ودمجه بشكل انسيابي داخل الكارت بتأثير القطع العكسي باستخدام CSS فقط وبدون استخدام صور لتخفيف حجم الصفحة.

Advanced Edge Highlighting & Glow: محاكاة إضاءة الـ 3D بتصميم الإضاءة المنبثقة من الأسفل (Bottom-up Backlight) ولمعان الحواف الداخلية (Inner Edge Glow) لإعطاء الكروت عمقاً وفخامة بصرية مميزة.

Premium Animations:

برمجة تأثير "الموجة" (Wave Text Reveal) المخصص لأزرار اتخاذ القرار (CTAs) لجذب انتباه المستخدم ورفع معدل التحويل (Conversion Rate).

تنفيذ تأثير الظهور المتتابع (Staggered Fade-In Up) للكروت عند عمل Scroll لأسفل، مما يضفي حيوية واحترافية على الواجهة.

[التوافق والتجاوب (Responsiveness)]

تصميم متجاوب بالكامل (Fully Responsive) ليتناسب مع كافة الشاشات (Desktop, Tablet, Mobile).

العمل متوافق تماماً للدمج بمرونة داخل بيئة "ووردبريس" وتحديداً مع منشئ الصفحات "إلمنتور" (Elementor) باستخدام ويدجت الـ HTML والـ Custom CSS المخصص لكل عنصر لتجنب تعارض الأكواد.

[التقنيات المستخدمة]

HTML5 (بنية دلالية نظيفة و Semantic).

CSS3 المتقدمة (Flexbox, Grid, Advanced Pseudo-elements, Complex Gradients & Shadows).

Vanilla JavaScript (لإدارة تفاعلات الظهور Animation Observers بأقل استهلاك لموارد المتصفح).