divine-3d

byDev Orachi

أنت مطوّر Front-End خبير ومصمّم UI/UX متخصص في تجارب الويب ثلاثية الأبعاد. أنشئ الصفحة الرئيسية لموقع كراء السيارات باسم "[اسم الموقع]" بواجهة 3D تفاعلية فاخرة وعصرية. ## التقنيات - React + Vite + Tailwind CSS - Three.js مع React Three Fiber و Drei - GSAP + ScrollTrigger للحركات المرتبطة بالتمرير - Framer Motion للانتقالات - الأداء: 60fps، تحميل كسول للنماذج، دعم الموبايل ## الأقسام 1. **Hero ثلاثي الأبعاد**: سيارة 3D (صيغة .glb) تدور ببطء على منصة عاكسة، إضاءة سينمائية (HDRI)، خلفية متدرجة داكنة، وعنوان كبير: "اكترِ سيارة أحلامك في دقائق". التحكم بالسيارة بالماوس أو اللمس. 2. **شريط البحث الذكي** عائم بتأثير Glassmorphism: المدينة، تاريخ الاستلام والتسليم، نوع السيارة، وزر بحث متوهج. 3. **معرض السيارات**: بطاقات 3D تميل مع حركة الماوس (tilt effect)، وعند التمرير على البطاقة تدور السيارة. تعرض السعر لليوم، ناقل الحركة، الوقود، عدد المقاعد. 4. **اختيار اللون**: أزرار ألوان تغيّر لون السيارة في الوقت الفعلي. 5. **قسم "لماذا نحن"**: أيقونات متحركة (تأمين شامل، توصيل مجاني، دعم 24/7، بدون رسوم مخفية). 6. **كيف يعمل**: ثلاث خطوات مع سيارة 3D تتحرك على طريق أثناء التمرير (scroll-driven animation). 7. **آراء العملاء**: سلايدر بتأثير عمق. 8. **CTA ختامي + Footer** مع زر واتساب عائم. ## التصميم - لوحة الألوان: أسود فحمي (#0B0B0F)، ذهبي/برتقالي (#F5A623) كلون مميز، أبيض ناعم - خط عربي: Cairo أو Tajawal، وخط إنجليزي: Inter - دعم كامل لـ RTL والعربية مع إمكانية التبديل للفرنسية والإنجليزية - زوايا مستديرة، ظلال ناعمة، توهج (glow) على الأزرار - Preloader بسيارة متحركة مع نسبة التحميل - مؤشر ماوس مخصص (custom cursor) ## التفاعل والحركة - Parallax عند تحريك الماوس - كاميرا تتحرك بسلاسة بين الأقسام أثناء التمرير - Hover effects على كل عنصر تفاعلي - Fallback صورة ثابتة إذا لم يدعم الجهاز WebGL ## متطلبات الجودة - كود نظيف مقسّم إلى مكونات قابلة لإعادة الاستخدام - Responsive كامل (موبايل، تابلت، ديسكتوب) - SEO و Accessibility أساسية - شرح قصير لكيفية التشغيل ومكان وضع نماذج .glb سلّم المشروع كاملاً بالملفات جاهزاً للتشغيل بـ npm run dev.