قالب مجاني لصفحة هبوط ثلاثية الأبعاد لمواقع العصائر والمشروبات والتسويق للمنتجات (Next.js + Three.js + GSAP)

باختصار: قالب صفحة الهبوط ثلاثي الأبعاد موقع من صفحة واحدة لعلامة عصائر، مبني بـ Next.js 15 وThree.js وGSAP، تدور فيه عجلة من أربع علب ثلاثية الأبعاد وتأخذ الصفحة ألوان كل نكهة. وهو مجاني: تحصل عليه من Aniq-UI ببريدك الإلكتروني واسمك، ثم تنزّل الكود المصدري كاملاً. وتغطي رخصته التجارية عدداً غير محدود من المشاريع، لك أو لعملائك.

ارتقِ بموقع منتجك مع واجهة ثلاثية الأبعاد

إذا كنت تطلق علامة تجارية للمشروبات، أو عرض منتجات، أو محفظة إبداعية، فإن التجربة ثلاثية الأبعاد يمكن أن تجذب الانتباه فوراً. هذا القالب مصمم لإحداث تأثير بصري مع البقاء خفيفاً ومتجاوباً.

ما يتضمنه هذا القالب ثلاثي الأبعاد؟

🍓 مبني بـ Next.js App Router للتوجيه السريع والسيو

🎨 مُصمم بـ Tailwind CSS للتحديثات السريعة للواجهة

🌀 رسوم متحركة Three.js في الوقت الفعلي لمنتجك (علبة، كائن، أو جهاز)

📱 تصميم متجاوب بالكامل للجوال والتابلت

⚙️ سهل التخصيص للنصوص والعناصر والخلفيات البصرية

🎁 احصل عليه مجاناً

هذا القالب الآن مجاني بالكامل! لا حاجة لكود ترويجي.

تحميل مجاني: احصل على القالب الكامل مع جميع الميزات والتحديثات المستقبلية بدون أي تكلفة.

احصل على القالب الآن:

1. 👉 تحميل القالب المجاني
2. مجاني: أدخل اسمك وبريدك الإلكتروني، ثم حمّل ملف ZIP

تريد المزيد من القوالب مثل هذا؟

هذا جزء من نظام قوالب الواجهة المستمر في Aniq-UI. أقوم ببناء قوالب حديثة وودودة للمطورين ليس للوحات تحكم مُحملة بالمعلومات، بل لمشاريع ويب إبداعية وصفحات هبوط واستخدام حقيقي.

🚀 البدء

تثبيت القالب

# حمّل القالب من Buy Me a Coffee
# فُك ضغط الملف وانتقل إلى المجلد

# ثبت الاعتمادات
yarn install

# شغّل خادم التطوير
yarn dev

ملاحظة: لم يعد التحميل يمر عبر Buy Me a Coffee. يأتي ملف ZIP الآن من صفحة القالب على Aniq-UI، ويحتاج Yarn 4 إلى تشغيل corepack enable مرة واحدة قبل yarn install. تجد الخطوات الحالية في قسم شغّله على جهازك أدناه.

🎨 التقنيات المستخدمة

1. Next.js 15.2.4: إطار عمل React حديث مع App Router
2. Three.js: مكتبة ثلاثية الأبعاد لـ WebGL
3. GSAP: رسوم متحركة عالية الأداء
4. Tailwind CSS 4: إطار عمل CSS أدوات
5. TypeScript: كتابة ثابتة لتطوير أفضل

يعمل التحميل الحالي (الإصدار 2026-10-24) على Next.js 15.5.28، كما تذكر ملاحظات الإصدار. راجع قسم التقنيات والإصدارات أدناه.

💡 حالات الاستخدام المثالية

1. علامات المشروبات: اعرض العلب والزجاجات والتغليف
2. المحافظ الإبداعية: قدم أعمال التصميم بشكل ثلاثي الأبعاد
3. مواقع المنتجات: أبرز الميزات بمرئيات غامرة
4. الوكالات: أبهر العملاء بتجارب تفاعلية

🔧 الميزات التقنية

1. محسن للسيو مع بيانات منظمة
2. تحميل كسول للنماذج ثلاثية الأبعاد لأداء أفضل
3. رسوم متحركة سلسة ومتجاوبة
4. متوافق مع جميع المتصفحات الحديثة
5. كود نظيف وموثق جيداً

📱 تصميم متجاوب

القالب يتكيف بشكل مثالي مع:

1. سطح المكتب: تجربة ثلاثية أبعاد كاملة
2. التابلت: رسوم متحركة محسنة
3. الجوال: نسخة خفيفة مع عناصر تحكم باللمس

---

جاهز لإنشاء تجربة ثلاثية أبعاد مؤثرة؟ حمّل مجاناً الآن وارتقِ بموقعك إلى المستوى التالي.

---

المراجع:

1. توثيق Three.js
2. مكتبة رسوم GSAP المتحركة
3. Next.js App Router
4. المزيد من القوالب في Aniq-UI

حمل مجاناً قالب صفحة الهبوط ثلاثي الأبعاد المبني بـ Next.js و Three.js، وتصفح المزيد من قوالب صفحات الهبوط Next.js، أو استكشف مجموعة قوالب Next.js الكاملة على Aniq UI.

ما يحتويه التحميل الحالي

القالب موقع هبوط من صفحة واحدة لعلامة عصائر اسمها Juicy. يمكنك تجربته أولاً في العرض التجريبي المباشر.

• دوّار العلب ثلاثي الأبعاد: أربع علب على عجلة، علبة لكل ربع دورة. تدور العجلة بعجلة الفأرة أو بمفاتيح الأسهم أو بأزرار الأسهم، وإذا سحبت علبة عادت إلى مكانها عندما تفلتها.
• مظهر لكل نكهة: تتغير ألوان الخلفية والتوهج خلف العلبة والأزرار مع العصير المختار.
• فواكه ومكعبات ثلج وأوراق عائمة، وتموّج مائي يتبع المؤشر.
• تخطيط مستقل للهواتف عند عرض 600 بكسل فأقل.
• الإنجليزية والعربية، مع صفحة عربية من اليمين إلى اليسار.

النكهات هي: ليمون وزنجبيل، وتوت أزرق وأساي، وانفجار المانجو، وتوت العليق والورد. ونموذج تسجيل الدخول ولوحة السلة واجهتان تجريبيتان بلا واجهة خلفية، فلا يُرسَل شيء إلى أي مكان. يحتوي ملف ZIP على مجلد واحد، juicy، فيه الموقع وملف Dockerfile ودليل README.md والرخصة في LICENSE.md. والحزم مثبّتة على إصدارات محددة بدقة، وyarn.lock مرفق.

التقنيات والإصدارات

الجزء	ما يستخدمه
إطار العمل	Next.js 15.5.28 (App Router)، وReact 19، وTypeScript 5
التنسيق	Tailwind CSS 4
المشهد ثلاثي الأبعاد	Three.js 0.176.0 مع React Three Fiber وDrei
الحركة	GSAP 3.15.0، وreact-water-wave للتموّج
اللغات	next-intl
البيانات	لا شيء: لا قاعدة بيانات ولا API ولا متغيرات بيئة

لمن يناسب

يناسب مشروعاً يكون فيه منتج واحد محور القصة كلها: علامة مشروبات، أو قسماً رئيسياً لمنتج غذائي أو مشروب، أو صفحة تسويق لمنتج، أو مقدمة ثلاثية الأبعاد لمحفظة أعمال، أو عرضاً تفاعلياً تقدمه وكالة لعملائها. وهو أيضاً مثال عملي على دمج Three.js داخل App Router في Next.js، إن أردت أن تتعلم كيف يعمل GSAP مع مشهد ثلاثي الأبعاد.

ليس متجراً ولا موقعاً متعدد الصفحات. فأزرار «اعرف المزيد» و«إتمام الشراء» و«عرض السلة» لا تؤدي أي إجراء بعد، وتربطها أنت بمتجرك. وإن احتجت إلى جدول أسعار أو دراسات حالة، فانظر المقارنة أدناه.

كيف تحصل عليه مجاناً

1. افتح صفحة قالب صفحة الهبوط ثلاثي الأبعاد واضغط «احصل عليه مجاناً».
2. أدخل بريدك الإلكتروني واسمك، ثم اضغط «احصل عليه». يُنشئ ذلك حسابك على Aniq-UI ويفتح لوحة التحكم وأنت مسجّل الدخول.
3. نزّل ملف ZIP من «قوالبي».

السعر 0 دولار، ولا توجد أي خطوة دفع.

شغّله على جهازك

استخدم Docker أو Node.js، لا كليهما. ولا يوجد ملف .env عليك إنشاؤه. مع تشغيل Docker Desktop:

unzip juicy-*.zip
cd juicy
docker build -t juicy .
docker run -p 3030:3030 juicy

بدون Docker، ثبّت Node.js 22 أو أحدث وشغّل ما يلي في مجلد juicy:

corepack enable
yarn install
yarn dev

في الحالتين يعمل الموقع على http://localhost:3030، والعربية على /ar. لبناء نسخة الإنتاج، شغّل yarn build ثم yarn start. وإذا كان المنفذ 3030 مستخدماً، فاستخدم docker run -p 3041:3030 juicy أو yarn dev -p 3041. ويضم دليل التثبيت الخطوات كاملة وصفحة لحل المشكلات.

انشره على الإنترنت

لا يحتاج الموقع إلى أي متغير بيئة، لذلك فالنشر قصير:

• Vercel: ارفع مجلد juicy إلى مستودع Git، واستورده في Vercel بإعدادات Next.js الافتراضية، وأضف ENABLE_EXPERIMENTAL_COREPACK=1 قبل النشر الأول حتى يثبّت Vercel الحزم بـ Yarn 4.
• خادم بـ Node.js: مع Node.js 22 أو أحدث، شغّل corepack enable وyarn install وyarn build وyarn start، ثم وجّه نطاقك إلى المنفذ 3030 عبر Nginx أو Caddy. يتجاهل yarn start المتغير PORT، فعلى استضافة تحدده بنفسها شغّله بالأمر yarn next start -p $PORT.
• Docker: الصورة نفسها التي تشغّلها على جهازك تعمل على الخادم أيضاً، بالأمر docker run -d --restart unless-stopped --name juicy -p 3030:3030 juicy.

التفاصيل في دليل النشر.

خصّص المشهد ثلاثي الأبعاد والألوان

كل النصوص موجودة في messages/en.json وmessages/ar.json، ومنها عنوان الصفحة ووصفها تحت metadata. والنكهة معرّف يربط بين علبة ثلاثية الأبعاد ومظهر لوني وصورة فاكهة ونصوصها. وتتسع العجلة لأربع علب بالضبط، لذا تستبدل نكهة بدلاً من إضافة خامسة:

1. غيّر المعرّف في src/types/juice.ts، فيشير TypeScript بعدها إلى كل ملف ما زال يستخدم المعرّف القديم.
2. اصنع العلبة: ملف .glb فيه جسم M_Aluminum وملصق M_Cola، وهو صورة بحجم 2048 في 958 بكسل. افتح علبة موجودة في Blender، واستبدل الملصق، ثم صدّرها بصيغة glTF Binary (.glb) مع الحفاظ على حجمها وموضعها.
3. أضف النموذج إلى src/features/carousel/constants/juiceCans.ts. والعلبة الأولى هي التي تفتح عليها الصفحة.
4. اضبط ألوانها في src/features/product-showcase/constants/themes.ts، وأضف صورة فاكهة PNG بحجم 400 في 600 بكسل، واكتب نصوصها في ملفي الرسائل.
5. شغّل yarn typecheck لتجد أي ملف فاتك.

يحدد كل مظهر mainBgColor (خلفية الصفحة) وblurColor (التوهج خلف العلبة) وbuttonBgColor وbuttonTextColor. ويأتي الضوء على العلب من ملف HDR محلي، هو صورة Forest Slope من Poly Haven (CC0)، ويُذكر اسمه في environment.ts. أما اللمسة المعدنية فتُضبط في الشيفرة، في useCanModel.ts. ويغطي دليل التخصيص كل ملف، بما في ذلك الخطوط والأحجام وروابط التواصل.

ملاحظات حول الأداء

هذه إعدادات في الشيفرة، وليست نتائج قياس:

• كل ملف يأتي مع الموقع، بما في ذلك النماذج ثلاثية الأبعاد وخريطة الإضاءة بدقة 1k، فلا تطلب الصفحة أي خدمة خارجية.
• تبدأ نماذج العلب الأربع بالتحميل فور فتح الصفحة، فلا تنتظر العجلة أي نموذج عند دورانها.
• تبقى العجلة مخفية خلف مؤشر تحميل حتى يكتمل تحميل العلبة الأمامية والإضاءة.
• تحدّ لوحة الرسم ثلاثية الأبعاد نسبة البكسل عند 1.5.
• على الهواتف، يستخدم المشهد وضع GPU الافتراضي في المتصفح، ويحسب الإضاءة بدقة أقل، ويعرض مكعبات ثلج أقل (6 بدلاً من 8) وأوراقاً أقل (10 بدلاً من 14).

تحتاج العلب إلى WebGL في إصدار حديث من Chrome أو Edge أو Firefox أو Safari.

مقارنة مع قوالب Aniq-UI المجانية الأخرى

لدى Aniq-UI أربعة قوالب مجانية، تعمل كلها على Next.js 15.5.28، وهذا القالب وحده فيه مشهد ثلاثي الأبعاد.

القالب	الأنسب لـ	مشهد ثلاثي الأبعاد	التنسيق	الرخصة
قالب صفحة هبوط ثلاثي الأبعاد	قسم رئيسي لمنتج أو مشروب	نعم (Three.js)	Tailwind CSS 4	تجارية
قالب صفحة هبوط SaaS مع الأسعار	إطلاق منتجات SaaS مع جدول أسعار	لا	Tailwind CSS 3	MIT
قالب موقع شركة مع دراسات حالة	مواقع الشركات مع دراسات حالة وقسم للفريق	لا	Tailwind CSS 3	MIT
قالب محفظة وكالة تصميم ويب	محافظ أعمال الوكالات والمستقلين	لا	Tailwind CSS 3	MIT

انتبه إلى الرخصة: يمكن استخدام قوالب MIT في مشاريع مفتوحة المصدر، أما الرخصة التجارية لهذا القالب فلا تسمح بمشاركة كوده المصدري.

الأسئلة الشائعة

هل قالب صفحة الهبوط ثلاثي الأبعاد مجاني فعلاً؟

نعم، سعره 0 دولار. اضغط «احصل عليه مجاناً» في صفحته، وأدخل بريدك الإلكتروني واسمك، ثم نزّل الكود المصدري من «قوالبي» في لوحة تحكم Aniq-UI.

هل يمكنني استخدامه في مشاريع تجارية أو لعملائي؟

نعم. تغطي رخصته التجارية عدداً غير محدود من المشاريع، سواء كانت منتجاتك أو أعمالاً تسلّمها لعملائك، ويمكنك تعديل الشيفرة. ولا يحق لك إعادة بيع الكود المصدري أو مشاركته، ولا بيعه على أنه قالب أو مجموعة واجهات أو سمة، ولا تضمينه في مشروع مفتوح المصدر. اقرأ نص الرخصة كاملاً.

ما إصدار Next.js الذي يستخدمه؟

يستخدم Next.js 15 مع App Router، ويعمل الإصدار الحالي على Next.js 15.5.28 مع React 19 وTailwind CSS 4.

كيف أغيّر نموذج العلبة ثلاثي الأبعاد؟

كل علبة ملف .glb في public/assets/3d/can/، ومذكورة في juiceCans.ts. استبدل صورة الملصق في مادة M_Cola داخل Blender، وصدّر الملف بصيغة glTF Binary، ثم وجّه القائمة إلى الملف الجديد.

هل يمكنني نشره على Vercel؟

نعم. استورد المستودع بإعدادات Next.js الافتراضية، وأضف ENABLE_EXPERIMENTAL_COREPACK=1 حتى يستخدم Vercel الإصدار Yarn 4. ولا حاجة إلى أي متغير آخر.

هل يحتاج إلى واجهة خلفية أو قاعدة بيانات؟

لا. لا توجد قاعدة بيانات ولا API ولا متغيرات بيئة. ونموذج تسجيل الدخول والسلة واجهتان تجريبيتان تربطهما أنت بواجهتك الخلفية.

هل يدعم العربية والتخطيط من اليمين إلى اليسار؟

نعم. الإنجليزية على /en والعربية على /ar، حيث تتجه النصوص والأزرار من اليمين إلى اليسار. ويمكنك إضافة لغة في src/i18n/routing.ts.

أدلة ذات صلة

• أفضل قوالب صفحات هبوط Next.js لعام 2026، المجانية والمدفوعة
• قوالب صفحات هبوط مجانية للوكالات والشركات ومنتجات SaaS
• أفضل قوالب Next.js لعام 2026 حسب الاستخدام
• دليل عملي لتحسين أداء تطبيقات Next.js
• كل قوالب Aniq-UI، ومنها القوالب المجانية الأربعة