ما هو القالب
موقع هبوط من صفحة واحدة لعلامة عصائر. تدور عجلة ثلاثية الأبعاد من أربع علب عصير بعجلة الفأرة أو بمفاتيح الأسهم أو بأزرار الأسهم، وتأخذ الصفحة كلها ألوان النكهة الظاهرة في المقدمة.
- دوّار العلب ثلاثي الأبعاد: أربع علب على عجلة، علبة لكل ربع دورة. اسحب علبة لتديرها؛ وتعود إلى مكانها عندما تفلتها.
- مظهر لكل نكهة: تتغير ألوان الخلفية والتوهج خلف العلبة والأزرار مع العصير المختار.
- فواكه ومكعبات ثلج وأوراق عائمة حول المشهد، وتموّج مائي يتبع المؤشر.
- تخطيط مستقل للهواتف، يُستخدم عند عرض 600 بكسل فأقل.
- الإنجليزية والعربية، مع صفحة عربية من اليمين إلى اليسار.
النكهات هي: ليمون وزنجبيل، وتوت أزرق وأساي، وانفجار المانجو، وتوت العليق والورد.
نموذج تسجيل الدخول ولوحة السلة واجهتان تجريبيتان. يتحقق النموذج من حقوله، لكن لا توجد واجهة خلفية، فلا يُرسَل شيء إلى أي مكان. وتعرض السلة منتجين نموذجيين.
التقنيات المستخدمة
| الجزء | مبني بـ |
|---|---|
| إطار العمل | Next.js 15 (App Router)، React 19، TypeScript |
| التنسيق | Tailwind CSS 4 |
| المشهد ثلاثي الأبعاد | React Three Fiber وThree.js وDrei |
| الحركة | GSAP، وreact-water-wave للتموّج |
| اللغات | next-intl |
| نموذج تسجيل الدخول | React Hook Form مع Zod |
لا توجد قاعدة بيانات ولا API. لا يقرأ الموقع أي متغيرات بيئة، فلا يوجد ما تضبطه قبل تشغيله، وكل ملف يحمّله موجود في المجلد.
محتوى الملف المحمّل
يحتوي ملف ZIP على مجلد واحد، juicy، فيه الموقع كاملًا:
| المسار | ما هو |
|---|---|
messages/ | نصوص الصفحة، en.json وar.json |
public/assets/ | نماذج العلب ثلاثية الأبعاد والصور |
src/app/[locale]/ | التخطيط (اللغة، والاتجاه، والخطوط، وعنوان الصفحة) والصفحة |
src/features/ | أجزاء الصفحة: الدوّار، والفواكه، والثلج، والتنقل، ونص المنتج |
Dockerfile | يبني صورة تقدّم الموقع على المنفذ 3030 |
README.md | الدليل، وهو موجود أيضًا في هذا التوثيق |
LICENSE.md | الرخصة |
الحزم مثبّتة على إصدارات محددة بدقة، وyarn.lock مرفق، فتثبّت الإصدارات نفسها التي اختُبر عليها القالب.
الإنجليزية على /en والعربية على /ar. على Windows، استخدم PowerShell أو Git Bash لتنفيذ الأوامر في هذا التوثيق.