Captions AI
Captions | استوديو إبداعي مدعوم بالذكاء الاصطناعي — صفحة هبوط مع GSAP وLottie وبناء يهتم بالأداء
Captions | Your AI-powered creative studio إعادة بناء لصفحة هبوط Captions.ai التسويقية. التركيز على الحركة (GSAP وLottie)، التمرير السلس، وتنفيذ أداء وإمكانية وصول أفضل مقارنة بالموقع المرجعي.
الميزات الرئيسية
- 🎬 صفحة هبوط تسويقية مستوحاة — بنية وإحساس قريب من الصفحة الأصلية، منفذة كموقع ثابت مستقل
- ✨ GSAP + ScrollTrigger — حركات مرتبطة بالتمرير وتسلسل كشف الأقسام
- 🎞️ Lottie — رسوم متجهة مدمجة في سرد الصفحة
- 📐 خطوط متجاوبة (RFS) — تكييف سلس لأحجام العناوين والنص بين الشاشات
- 🖱️ Lenis — تمرير ناعم يعمل مع الحركات المربوطة بالتمرير
- 🎨 SASS + Gerillass — أنماط منظمة مع Mixins وبنية صيانة أوضح
- ⚡ PostCSS —
postcss-preset-envوpostcss-inline-svgوتسليم CSS حديث - ♿ إمكانية الوصول والأداء — ضبط للاستخدام والسرعة مقارنة بالتجربة الأصلية (انظر ملخص Lighthouse أدناه ولقطة الموقع الأصلي)
يهدف هذا البناء إلى أداء أعلى وإمكانية وصول أفضل من الموقع التسويقي الرسمي Captions.ai، مع لقطة Lighthouse للموقع الأصلي كمرجع (صورة على Imgur).
الموقع الأصلي (مرجع)
النسخة المستنسخة (سطح مكتب)
ملخص Lighthouse لسطح المكتب للنسخة المستنسخة، أُعيد بناؤه من لقطة محفوظة من المشروع الخاص ومُستضاف محلياً ليتوافق مع سياسة أمان المحتوى الصارمة:
- HTML5 — هيكل دلالي لأقسام الهبوط وتدفق المحتوى
- SASS — أنماط مكونات ومتغيرات وتخطيط
- JavaScript — تنسيق مكتبات الحركة وسلوك التمرير
- GSAP + ScrollTrigger — حركة زمنية وربط بالتمرير
- Lottie — رسوم JSON مدمجة في الصفحة
- Lenis — طبقة تمرير سلس
- RFS — تكييف حجم الخط دون تعقيد استعلامات الوسائط
- Gerillass — مكتبة Mixins لتسريع كتابة الأنماط
- PostCSS — Preset-env وأدوات SVG مضمنة لـ CSS متوافق ومحسّن
- إعادة بناء الهبوط كواجهة ثابتة مع تحسين الأداء وإمكانية الوصول مقارنة بالمرجع
- تنسيق خطوط زمنية GSAP مع Lenis لاستقرار الحركات المربوطة بالتمرير على الأجهزة المختلفة
- استخدام Lottie حيث يعطي الحركة المتجهة وضوحاً أفضل من CSS وحدها
- تطبيق RFS لتدرج الطباعة بين الجوال وسطح المكتب دون ازدحام استعلامات
- توثيق الجودة عبر ملخص Lighthouse لسطح المكتب مستند إلى لقطة محفوظة من المشروع ومُستضاف على هذا الموقع، مع مقارنة البناء بـ الموقع التسويقي الأصلي عبر لقطة Lighthouse منشورة
أعجبك ما تراه؟
أبني تطبيقات ويب وموبايل ومنتجات SaaS مخصصة. راسلني على واتساب ولنناقش مشروعك القادم.
تواصل عبر واتساب
