rootAcademy

root — أكاديمية برمجة أونلاين

موقع تعريفي بلغتين (عربي/إنجليزي) مع وضعين (داكن/فاتح)، مبني على Next.js.

التقنيات

• Next.js 14 (App Router) + TypeScript
• Tailwind CSS — نظام ألوان root عبر CSS variables (يتبدّل بالكامل بين الوضعين)
• next-intl — تعدّد اللغات وتوجيه /ar و /en (العربية افتراضية، RTL)
• next-themes — تبديل الوضع الداكن/الفاتح
• next-mdx-remote + gray-matter — المحتوى من ملفات MDX
• كل الصفحات static (SSG) — بدون خادم.

التشغيل

npm install
npm run dev      # http://localhost:3000  (يحوّل تلقائياً إلى /ar)
npm run build    # بناء إنتاجي
npm start

ملاحظة: أول build/dev بيحمّل الخطوط من Google Fonts، فتأكّد إنك متّصل بالإنترنت.

بنية المشروع

content/            ← المحتوى (MDX) — هون بتضيف بدون ما تلمس الكود
  instructors/      ← <slug>.ar.mdx / <slug>.en.mdx
  tracks/           ← <slug>.ar.mdx / <slug>.en.mdx
messages/           ← ترجمات الواجهة (ar.json / en.json)
src/
  app/[locale]/     ← الصفحات (home, tracks, instructors, reviews, contact)
  components/        ← مكوّنات الواجهة (ui, layout, cards, brand)
  data/              ← بيانات ثابتة (stats, reviews, site) — قابلة للربط بـ API لاحقاً
  i18n/              ← إعداد next-intl (routing, request, navigation, middleware)
  lib/               ← طبقة المحتوى (content.ts) والأنواع (types.ts)

كيف تضيف مدرّب جديد

أنشئ ملفّين:

content/instructors/ahmad-saleh.ar.mdx
content/instructors/ahmad-saleh.en.mdx

بنفس شكل الملفات الموجودة (frontmatter: name, role, tags, socials, order — ثم نص السيرة). بيظهر تلقائياً بصفحة المدربين وبصفحة تفصيلية /instructors/ahmad-saleh.

إذا ترجمة مفقودة، بيرجع تلقائياً للّغة الافتراضية (العربية).

كيف تضيف مسار جديد

أنشئ content/tracks/<slug>.ar.mdx و .en.mdx. الـ frontmatter بيحمل: title, tagline, color, icon (globe/smartphone/palette/shield), duration, outcomes[], levels[{name, summary, duration, skills[], outcomes[]}] — ثم نص النظرة العامة.

تغيير ألوان الثيم

كل الألوان معرّفة كـ CSS variables في src/app/globals.css تحت :root (فاتح) و .dark (داكن). غيّرها من مكان واحد.

ربط backend لاحقاً (الزوّار/التقييمات/التواصل)

كل شي static حالياً بشكل مقصود:

• الإحصائيات: src/data/stats.ts — بدّل القيم بـ fetch داخل Server Component.
• التقييمات: src/data/reviews.ts — بدّلها بجلب من قاعدة بيانات.
• نموذج التواصل: src/components/sections/ContactForm.tsx — استبدل setSent(true) بـ fetch('/api/contact', ...).

الواجهة ما بتتغيّر — بس مصدر البيانات.

إضافة لغة ثالثة

أضف الرمز في src/i18n/routing.ts، وملف messages/<locale>.json، وملفات المحتوى <slug>.<locale>.mdx. خلص.