Templates

قوالب صفحات هبوط مجانية

استكشف ثلاث قوالب صفحات هبوط مجانية وجاهزة للإنتاج، مثالية للوكالات والمواقع الشركاتية والشركات الناشئة SaaS. مبنية باستخدام Next.js 15.2.4 و Tailwind CSS لأداء سريع وتصميم عصري.

بقلم Aniq-UIتم التحديث في 30 أكتوبر 202611 دقيقة قراءة
مشاركة:
قوالب صفحات هبوط مجانية
#Landing Page#Templates#Next.js#Tailwind CSS#Free#Web Design

تقدّم Aniq-UI أربعة قوالب مجانية لصفحات الهبوط مبنية بـ Next.js: قالب محفظة لوكالات تصميم الويب، وقالب موقع شركة، وقالب صفحة هبوط SaaS مع الأسعار، وقالب صفحة هبوط ثلاثية الأبعاد لعرض منتج. كل قالب منها موقع من صفحة واحدة بالإنجليزية والعربية، تنزّله في ملف ZIP بعد إدخال اسمك وبريدك الإلكتروني، ثم تشغّله باستخدام Docker أو Node.js 22 على المنفذ 3030. ومنذ إصدار 24 أكتوبر 2026 تعمل القوالب الأربعة على Next.js 15.5.28، ثلاثة منها برخصة MIT، ويأتي القالب ثلاثي الأبعاد برخصة تجارية تغطي عددًا غير محدود من المشاريع.

إنشاء صفحة هبوط فعّالة من الصفر يتطلب وقتًا وخبرة في التصميم. لهذا السبب نقدم لك ثلاثة قوالب مجانية، متجاوبة بالكامل ومبنية باستخدام Next.js 15.2.4 وTailwind CSS. سواء كنت تدير وكالة إبداعية أو موقع شركة أو تطلق منتج SaaS، ستساعدك هذه الصفحات على الانطلاق بسرعة.

لماذا تستخدم Next.js 15.2.4 + Tailwind CSS لصفحات الهبوط؟

  1. سرعة فائقة وتحسين محركات البحث: العرض من جهة الخادم (SSR) وتوليد المواقع الثابتة (SSG)
  2. تصميم مرن وسهل: Tailwind CSS يتيح لك بناء تصاميم معقدة بدون كتابة CSS مخصص
  3. إعداد تلقائي: توجيه مدمج، تحسين الصور، وتحديث سريع
  4. مكونات قابلة لإعادة الاستخدام: أقسام يمكنك تخصيصها بسهولة لتناسب علامتك التجارية

1. قالب صفحة هبوط لتصميم المواقع

قالب صفحة هبوط لتصميم المواقعالتقنيات:

  1. Next.js 15.5.28
  2. React 19
  3. Tailwind CSS 3
  4. TypeScript

الميزات الرئيسية:

  1. قسم رئيسي مع زر دعوة لاتخاذ إجراء
  2. شبكة أعمال مع معاينات مضيئة
  3. خدمات وشهادات عملاء في شريط تمرير
  4. نموذج تواصل مع تحقق من صحة البيانات
  5. متجاوب بالكامل مع جميع الأجهزة

الروابط:

  1. عرض مباشر
  2. تحميل مجاني

2. قالب موقع شركة مجاني

قالب موقع شركةالتقنيات:

  1. Next.js 15.5.28
  2. React 19
  3. Tailwind CSS 3
  4. TypeScript

الميزات الرئيسية:

  1. تخطيطات نظيفة لقسم «كيف يعمل» والميزات في تبويبات
  2. شريط آراء العملاء وشبكة التكاملات
  3. جداول أسعار ومقارنة ميزات
  4. قسم مدونة مختصر
  5. تعليمات برمجية محسنة لمحركات البحث

الروابط:

  1. عرض مباشر
  2. تحميل مجاني

3. قالب صفحة هبوط SaaS مجاني

قالب صفحة هبوط SaaSالتقنيات:

  1. Next.js 15.5.28
  2. React 19
  3. Tailwind CSS 3
  4. TypeScript

الميزات الرئيسية:

  1. قسم رئيسي مع إبراز الميزات بشكل ديناميكي
  2. خطط أسعار مع جدول لمقارنة الميزات
  3. قسم اختياري للاشتراك في النشرة البريدية (يتصل بواجهتك البرمجية الخاصة)
  4. قسم تكاملات يعرض شعارات عشر أدوات
  5. شعارات العملاء وإحصائيات النجاح

الروابط:

  1. عرض مباشر
  2. تحميل مجاني

🚀 البدء السريع

تثبيت القالب

كل قالب يتبع نفس خطوات الإعداد والتخصيص:

# استنساخ مستودع القالب
git clone <repository-url>
cd <repo-name>

# تثبيت الاعتمادات
corepack enable
yarn install

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

استبدل <repo-name> باسم مجلد القالب الذي قمت بتنزيله.


💎 قوالب مميزة

تبحث عن صفحات هبوط أكثر تقدماً؟ تصفح خياراتنا المميزة أدناه.

1. قالب صفحة هبوط SaaS مميز

قالب صفحة هبوط SaaS مميزالتقنيات:

  1. Next.js 16.4.2
  2. React 19
  3. Tailwind CSS 4
  4. TypeScript

احصل على القالب المميز ←


2. قالب صفحة هبوط SaaS مميز 2

قالب صفحة هبوط SaaS مميز 2التقنيات:

  1. Next.js 16.4.2
  2. React 19
  3. Tailwind CSS 4
  4. TypeScript

احصل على القالب المميز ←


💡 الخطوات التالية والتخصيص

  1. تخصيص العلامة التجارية: غيّر الألوان والخطوط والصور لتناسب علامتك.
  2. الإضافة: أضف أقسام مثل الأسئلة الشائعة أو الفريق أو المدونة حسب حاجتك.
  3. النشر: استضف على Vercel أو على أي خادم يعمل بـ Node.js أو كصورة Docker.

استمتع بقوالب صفحات الهبوط المجانية وسرّع إطلاق مشروعك اليوم! إذا كنت بحاجة إلى دعم في التخصيص، لا تتردد في مراسلتنا عبر نموذج التواصل في موقع Aniq-UI.

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


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

كل قالب من القوالب المجانية الأربعة موقع Next.js من صفحة واحدة مبني بـ React 19 وTypeScript، بالإنجليزية (/en) والعربية (/ar، من اليمين إلى اليسار)، ويعمل على المنفذ 3030. صدرت هذه القوالب أولًا على Next.js 15.2.4، ثم انتقلت إلى Next.js 15.5.28 في إصدار 24 أكتوبر 2026، وقوائم التقنيات أعلاه تعرض الإصدارات الحالية.

قالب محفظة وكالة تصميم ويب

MONO موقع داكن بالأبيض والأسود وبأسلوب التصميم الوحشي (Brutalist) لوكالة تصميم أو تطوير ويب: قسم رئيسي بزرين، وأربع بطاقات عن نهج الوكالة، وأربعة مشاريع، وخمس خطوات عمل، وثلاثة آراء للعملاء، وثلاث خطط أسعار مع اختيار بين الدفع الشهري والسنوي، وقسم تواصل فيه نموذج يتحقق من حقوله.

  • التقنيات: Next.js 15 وTailwind CSS 3 وnext-intl وMotion وReact Hook Form مع Zod وTanStack Query.
  • معلومة مهمة: لا يرسل نموذج التواصل شيئًا حتى تضبط NEXT_PUBLIC_API_BASE_URL، وبعدها يرسل الرسائل إلى /contact في واجهتك البرمجية الخاصة.
  • الأنسب لـ: الوكالات والمستقلين. برخصة MIT. راجع قالب محفظة وكالة تصميم الويب وتوثيقه.

قالب موقع شركة

NOVA صفحة هبوط لمنتج ذكاء اصطناعي من عشرة أقسام، منها أربع خطوات في قسم «كيف يعمل»، وأربعة تبويبات للميزات، واثنا عشر شعارًا للتكاملات، وشريط متحرك لآراء العملاء، وثلاث بطاقات للمدونة، وأسعار مع اختيار بين الدفع الشهري والسنوي، وستة أسئلة شائعة.

  • التقنيات: Next.js 15 وTailwind CSS 3 وnext-intl وFramer Motion وRadix UI وEmbla Carousel.
  • معلومة مهمة: لا يوجد نموذج ولا واجهة خلفية، والإعداد الوحيد هو NEXT_PUBLIC_SITE_URL. تُحمَّل الصور من images.unsplash.com ومعظم الشعارات من cdn.simpleicons.org.
  • الأنسب لـ: شركة أو شركة ناشئة في مجال البرمجيات. برخصة MIT. راجع قالب موقع الشركة وتوثيقه.

قالب صفحة هبوط SaaS مع الأسعار

SaasPro صفحة داكنة دائمًا لمنتج برمجي، فيها ست بطاقات للميزات، وأربع خطوات، وثلاث شهادات للعملاء، وثلاث خطط شهرية، وجدول لمقارنة الخطط، وعشرة شعارات للتكاملات، وستة أسئلة شائعة، وثلاث بطاقات للمدونة.

  • التقنيات: Next.js 15 وTailwind CSS 3 وnext-intl وFramer Motion وRadix UI.
  • معلومة مهمة: يأتي قسم النشرة البريدية ضمن الشيفرة لكنه لا يظهر في الصفحة حتى تضيفه، ويرسل البريد إلى /newsletter/subscribe في واجهتك البرمجية الخاصة. الأسعار شهرية وبالدولار الأمريكي افتراضيًا.
  • الأنسب لـ: منتج SaaS يبيع خططًا. برخصة MIT. راجع قالب صفحة هبوط SaaS وتوثيقه.

قالب صفحة هبوط ثلاثية الأبعاد

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

  • التقنيات: Next.js 15 وTailwind CSS 4 وReact Three Fiber مع Three.js وDrei وGSAP وnext-intl.
  • معلومة مهمة: لا يقرأ أي متغيرات بيئة، ويضم كل الملفات التي يحمّلها، بما فيها النماذج ثلاثية الأبعاد. نموذج تسجيل الدخول وسلة المشتريات للعرض فقط. كل علبة نموذج .glb تستبدل ملصقه في Blender، ويحتاج الزوار إلى متصفح يدعم WebGL.
  • الأنسب لـ: منتج واحد مثل مشروب، أو لتعلّم Three.js داخل Next.js. مجاني برخصة Aniq-UI التجارية. راجع قالب صفحة الهبوط ثلاثية الأبعاد وتوثيقه.

مقارنة القوالب المجانية

القالبالنوعالأقسام الرئيسيةالتقنياتالأنسب لـ
محفظة وكالة تصميم ويبموقع وكالةالنهج، المشاريع، خطوات العمل، آراء العملاء، الأسعار، نموذج التواصلNext.js 15، Tailwind CSS 3، Motionالوكالات والمستقلون
موقع شركةصفحة شركة أو منتجكيف يعمل، تبويبات الميزات، التكاملات، آراء العملاء، معاينة المدونة، الأسعار، الأسئلة الشائعةNext.js 15، Tailwind CSS 3، Framer Motionالشركات والشركات الناشئة
صفحة هبوط SaaSصفحة SaaSالميزات، الخطط الشهرية، جدول المقارنة، التكاملات، الأسئلة الشائعة، معاينة المدونةNext.js 15، Tailwind CSS 3، Framer Motionمنتجات SaaS التي تبيع خططًا
صفحة هبوط ثلاثية الأبعادصفحة ثلاثية الأبعاد لمنتج واحدعجلة علب ثلاثية الأبعاد، ألوان لكل نكهة، أزرار الأحجامNext.js 15، Tailwind CSS 4، Three.js، GSAPمنتج واحد بمظهر لافت

كيف تختار

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

كيف تشغّل قالبًا مجانيًا على جهازك

  1. في صفحة القالب، اضغط احصل عليه مجاناً، وأدخل اسمك وبريدك الإلكتروني، ثم اضغط احصل عليه. تُفتح لوحة التحكم وفيها ملف ZIP ضمن «قوالبي».
  2. فك ضغط الملف وافتح نافذة طرفية في مجلده (landing-page-template-1 أو -2 أو -3 أو juicy).
  3. باستخدام Docker Desktop، ابنِ الصورة وشغّلها، ثم افتح http://localhost:3030.
docker build -t my-site .
docker run -p 3030:3030 my-site

من دون Docker، استخدم Node.js 22 أو أحدث. يكفي تشغيل corepack enable مرة واحدة على كل جهاز، حتى يستخدم yarn إصدار Yarn 4 الذي يحدده القالب.

corepack enable
yarn install
yarn dev

إذا كان المنفذ 3030 مشغولًا، شغّل docker run -p 3041:3030 my-site أو yarn dev -p 3041 ثم افتح http://localhost:3041.

كيف تنشره

في قوالب الوكالة والشركة وSaaS، اضبط NEXT_PUBLIC_SITE_URL على عنوان موقعك قبل البناء، فالرابط الأساسي (canonical) وروابط اللغات وبطاقات المشاركة تعتمد عليه. أما القالب ثلاثي الأبعاد فلا يحتاج إلى أي متغيرات.

  • Vercel: ارفع المجلد إلى مستودع Git، واستورده، واترك الإعدادات الافتراضية. أضف ENABLE_EXPERIMENTAL_COREPACK=1 حتى يثبّت Vercel إصدار Yarn 4 المحدد.
  • خادم يعمل بـ Node.js: corepack enable ثم yarn install ثم yarn build ثم yarn start، مع Nginx أو Caddy أمامه لربط نطاقك وتفعيل HTTPS.
  • Docker: الصورة نفسها تعمل في بيئة الإنتاج. مرّر إعدادات NEXT_PUBLIC_ عبر --build-arg، لأنها تُكتب في الموقع وقت البناء.

قبل الإطلاق، استبدل المشاريع وآراء العملاء والأسعار وبيانات التواصل التجريبية، واجعل الأزرار والروابط تقود إلى وجهات حقيقية.

ما الذي تسمح به الرخصة المجانية

  • قوالب الوكالة والشركة وSaaS: رخصة MIT. يمكنك استخدامها وتعديلها ونشرها وبيع نسخ منها، بما في ذلك مواقع العملاء، بشرط أن يبقى إشعار حقوق النشر والإذن مع الشيفرة.
  • القالب ثلاثي الأبعاد: رخصة Aniq-UI التجارية تغطي عددًا غير محدود من المشاريع، لك أو لعميل، ويمكنك تعديل الشيفرة. لا يجوز لك إعادة بيع الشيفرة المصدرية أو مشاركتها، ولا بيعها كقالب أو مجموعة واجهات أو سمة أو حزمة بداية، ولا نسبة تأليفها إليك، ولا إدراجها في مشروع مفتوح المصدر.

تأتي الرخصة مع كل تنزيل وفي توثيق كل قالب، فاقرأها قبل النشر.

متى يكون القالب المدفوع خيارًا أفضل

اختر قالبًا مدفوعًا من Aniq-UI إذا احتجت إلى صفحات أكثر، أو وضع فاتح، أو منتج حقيقي خلف الصفحة:

يسمح Publino وSaaS Pro بعدد غير محدود من المشاريع التجارية، ويشمل ذلك العمل للعملاء. الأسعار في صفحة كل قالب.

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

هل قوالب صفحات الهبوط هذه مجانية فعلًا؟

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

هل يمكنني استخدام قالب مجاني لموقع عميل؟

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

ما إصدار Next.js الذي تستخدمه القوالب المجانية؟

Next.js 15.5.28 مع React 19 وApp Router، منذ إصدار 24 أكتوبر 2026. أما Publino وSaaS Pro فيعملان على Next.js 16.

هل أحتاج إلى Docker لتشغيلها؟

لا. يكفي Docker Desktop وحده، أو Node.js 22 أو أحدث مع Yarn 4 عبر Corepack. وفي الحالتين يفتح الموقع على http://localhost:3030.

هل تتضمن القوالب المجانية واجهة خلفية؟

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

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

نعم. يأتي كل قالب بالإنجليزية على /en وبالعربية على /ar بتخطيط من اليمين إلى اليسار، ويشرح دليل اللغات الخاص به كيف تضيف لغة أخرى.

هل وجدت هذا المقال مفيدًا؟

مشاركة:
النشرة البريدية

احصل على إشعار عند إطلاق قالب جديد

كن أول من يعلم عند إصدار قالب جديد.

  • إصدارات القوالب الجديدة
  • تابع ما يُبنى الآن وصوّت عليه
  • إصدارات مجانية ومدفوعة
  • إلغاء الاشتراك بنقرة واحدة

القادم قريباً

world map

مجتمع المستخدمين العالمي

انضم إلى آلاف المطورين في جميع أنحاء العالم الذين يثقون بـ Aniq-UI لمشاريعهم. يتم استخدام قوالبنا في جميع أنحاء العالم لإنشاء تجارب ويب مذهلة.

Aniq-uiAniq-ui

تفضيلات ملفات تعريف الارتباط

نستخدم ملفات تعريف الارتباط لتعزيز تجربة التصفح الخاصة بك وتحليل حركة المرور على الموقع وتخصيص المحتوى. بالنقر على "قبول الكل"، فإنك توافق على استخدامنا لملفات تعريف الارتباط للتحليلات والإعلانات المخصصة.