ما هو القالب
صفحة هبوط لمنتج أو نشاط تجاري، كُتبت لـ Publino، وهي منصة وهمية تبيع مكونات واجهات وقوالب وتنشر المواقع، وتُستخدم مثالًا. هي تطبيق Next.js واحد بلا قاعدة بيانات ولا خلفية، ولا يلزم ضبط أي شيء قبل التشغيل الأول.
فيها ثلاث صفحات: صفحة رئيسية تحت العنوان فيها نموذج متحرك للوحة تحكم، وصفحة الأسعار، وصفحة التواصل. وتأتي بالسمتين الداكنة والفاتحة، وبالإنجليزية والعربية.
نظرة على الموقع
التقنيات المستخدمة
| التقنية | دورها هنا |
|---|---|
| Next.js 16 (App Router) | إطار العمل، والصفحات، والبيانات الوصفية، وخادم الإنتاج |
| React 19 و TypeScript | كل المكونات وملفات المصدر |
| Tailwind CSS 4 | كل التنسيق، مع ألوان السمتين الفاتحة والداكنة |
| next-intl | النصوص الإنجليزية والعربية واللغة في العنوان |
| React Hook Form و Zod | النموذجان وفحوصهما |
| الحركة | الحركات |
| Recharts و dnd-kit و cobe | رسم بياني في بطاقة الميزة، وبطاقات نموذج لوحة التحكم القابلة للسحب، والكرة الأرضية ثلاثية الأبعاد |
| Radix UI و Tabler Icons | التبويبات والتلميحات والتسميات، والأيقونات |
كل اعتمادية مثبّتة على إصدار محدد في package.json، والملف yarn.lock مرفق، فيحصل تثبيتك على الإصدارات نفسها التي اختُبر بها القالب.
محتويات التنزيل
يُستخرج ملف ZIP إلى مجلد اسمه Publino-template:
| المسار | ما هو |
|---|---|
src/ | التطبيق: الصفحات وأقسامها والترويسة ونموذج لوحة التحكم وبطاقات الميزات وإعداد اللغة |
messages/ | كل نص ظاهر، بالإنجليزية والعربية |
public/ | الصور والأيقونات المصغرة وأيقونات التطبيق وصورة المشاركة الاجتماعية |
Dockerfile, .dockerignore | ابنِ الموقع في صورة تقدّمه على المنفذ 3030 |
.env.example | الإعدادات الاختيارية، مع قيمها الافتراضية |
README.md | دليل الإعداد والتخصيص |
LICENSE.md | رخصتك التجارية |
package.json, yarn.lock, .yarnrc.yml | الاعتماديات وإعداد Yarn 4 |
أمور تحسن معرفتها قبل البناء عليه
- يفحص النموذجان ما يكتبه الزوار، لكنهما لا يرسلان شيئًا حتى تربطهما بخدمتك الخاصة.
- لا شيء هنا يقبل دفعات. أزرار الخطط تقود إلى صفحة التواصل أو إلى نموذج الصفحة الرئيسية.
- بعض الأزرار عناصر نائبة لتوجّهها إلى صفحاتك، مثل تسجيل الدخول واحجز مكالمة وزرّي القسم الرئيسي.
- النصوص والأرقام والأشخاص والأسعار وبطاقات القوالب كلها محتوى تجريبي لتستبدله.
يأتي الموقع بالإنجليزية والعربية. العناوين الإنجليزية بلا بادئة، مثل /pricing، والعربية تبدأ بـ /ar، مثل /ar/pricing، وتُعرض الصفحات العربية من اليمين إلى اليسار.
على Windows، استخدم PowerShell أو Git Bash لتنفيذ الأوامر الواردة في هذه الأدلة.
