ما هو القالب
موقع هبوط من صفحة واحدة لمنتج برمجي، مع الأسعار. هو تطبيق Next.js واحد: بلا قاعدة بيانات، وبلا خادم خلفي، ولا شيء تضبطه قبل التشغيل الأول.
تتكوّن الصفحة من هذه الأقسام، من الأعلى إلى الأسفل:
| القسم | ما تعرضه |
|---|---|
| الترويسة | الشعار، وقائمتان فيهما قوائم فرعية (المنتجات والموارد)، وروابط إلى الأسعار وآراء العملاء، ومبدّل اللغة، وقائمة للجوال |
| القسم الرئيسي | عنوان رئيسي وزرّان وصورة للمنتج |
| الإثبات الاجتماعي | شعارات شركات وأربعة أرقام |
| المزايا | ست بطاقات للمزايا |
| كيف يعمل | أربع خطوات، لكل منها صورة |
| آراء العملاء | ثلاثة اقتباسات من العملاء مع صورهم |
| الأسعار | ثلاث خطط شهرية، والخطة الوسطى موسومة بـ «الأكثر شعبية» |
| جدول المقارنة | الخطط الثلاث جنبًا إلى جنب، ميزة بميزة |
| التكاملات | شعارات عشر أدوات |
| الأسئلة الشائعة | ستة أسئلة تُفتح وتُغلق |
| معاينة المدونة | ثلاث بطاقات مقالات |
| دعوة إلى الإجراء | زر ختامي مع ثلاث عبارات مطمئنة |
| التذييل | أعمدة روابط، وروابط التواصل الاجتماعي، وسطر حقوق النشر |
يأتي مع القالب أيضًا قسم للنشرة البريدية فيه نموذج اشتراك، في src/features/home/Newsletter/. لا يظهر على الصفحة حتى تضيفه.
نظرة على الصفحة
التقنيات المستخدمة
| التقنية | دورها هنا |
|---|---|
| Next.js 15 (App Router) | إطار العمل، والتوجيه، وخادم الإنتاج |
| TypeScript | كل ملفات المصدر |
| Tailwind CSS | كل التنسيقات |
| next-intl | النصوص الإنجليزية والعربية، واللغة في العنوان |
| Framer Motion | الحركات |
| Radix UI | أكورديون الأسئلة الشائعة وخاصية Slot في الزر |
| Lucide React | الأيقونات |
| React Hook Form و Zod و TanStack Query | نموذج النشرة البريدية، والتحقق منه، وطلبه |
كل اعتمادية مثبّتة على إصدار محدد في package.json، والملف yarn.lock مرفق، فيحصل تثبيتك على الإصدارات نفسها التي اختُبر بها القالب.
محتويات التنزيل
يُستخرج ملف ZIP إلى مجلد اسمه landing-page-template-2:
| المسار | ما هو |
|---|---|
src/ | التطبيق: الصفحة وأقسامها، والترويسة والتذييل، وإعداد اللغات |
messages/ | كل نص ظاهر، في en.json وar.json |
public/ | الصور والشعارات والأيقونات المفضلة |
Dockerfile | يبني الموقع في صورة تقدّمه على المنفذ 3030 |
.env.example | الإعدادان الاختياريان، مع قيمهما الافتراضية |
README.md | دليل الإعداد والتخصيص |
package.json, yarn.lock, .yarnrc.yml | الاعتماديات وإعداد Yarn 4 |
LICENSE | رخصة MIT |
تأتي الصفحة بالإنجليزية والعربية. يبدأ كل عنوان بلغته، /en أو /ar، وتُعرض الصفحة العربية من اليمين إلى اليسار. الصفحة داكنة دائمًا.
على Windows، استخدم PowerShell أو Git Bash لتنفيذ الأوامر الواردة في هذه الأدلة.