diff --git a/README.md b/README.md index e215bc4..b3dc044 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,72 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# Slash.sa — منصة إدارة الأسطول واللوجستيات -## Getting Started +منصة ويب متكاملة لإدارة عمليات الأسطول واللوجستيات، مبنية بلغة عربية أولًا (Arabic-first) +باتجاه RTL كامل، وموجهة للسوق السعودي. تشمل المنصة إدارة المركبات والسائقين والفروع +والطلبات والرحلات وسجل الصيانة، مع لوحات تحكم منفصلة حسب دور المستخدم (مشرف / عميل / مستخدم ميداني). -First, run the development server: +## المتطلبات الأساسية + +- Node.js 20.9 أو أحدث +- npm (أو أي package manager متوافق) + +## التقنيات المستخدمة + +| الطبقة | التقنية | +| -------------------- | ------------------------------------------ | +| الإطار | Next.js 16 (App Router) | +| اللغة | TypeScript | +| التنسيق | Tailwind CSS v4 | +| النماذج والتحقق | react-hook-form + yup | +| الأيقونات | lucide-react (صفحات التسويق) / Tabler Icons Webfont (لوحة التحكم) | +| المصادقة | JWT + HttpOnly cookie + middleware للحماية | + +## هيكل المشروع (مختصر) +app/ +├── (صفحات تسويقية) home, features/app, how_work, prices, frequently_asked_questions +├── dashboard/ لوحة التحكم (محمية بواسطة middleware) +│ ├── cars, drivers, orders, trips, clients, branches, roles, audit, users +├── login, register صفحات المصادقة +├── api/proxy/[...path] بروكسي موحّد لكل طلبات الـ backend +└── components/layout Navbar, Sidebar, Topbar (تُستخدم عبر الصفحات يدويًا) +src/ +├── Components/ مكوّنات لوحة التحكم (مقسّمة حسب الوحدة: Car, Driver, Order...) +├── hooks/ منطق جلب البيانات والطفرات (Create/Update/Delete) لكل وحدة +├── services/ طبقة استدعاء الـ API (كل وحدة لها service منفصل) +├── types/ تعريفات TypeScript لكل نموذج بيانات +├── validations/ مخططات yup للتحقق من صحة النماذج +└── lib/ دوال مساعدة (auth, session, formatters, order-status) +## التشغيل محليًا ```bash +npm install npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +افتح [http://localhost:3000](http://localhost:3000) في المتصفح. -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +## الأوامر المتاحة -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +| الأمر | الوصف | +| ---------------- | --------------------------------------- | +| `npm run dev` | تشغيل بيئة التطوير (Webpack) | +| `npm run build` | بناء نسخة الإنتاج | +| `npm run start` | تشغيل نسخة الإنتاج المبنية | +| `npm run lint` | فحص الكود بواسطة ESLint | -## Learn More +## ملاحظات النشر (Deployment) -To learn more about Next.js, take a look at the following resources: +- المنصة مبنية على Next.js App Router وتعمل على أي بيئة تدعم Node.js 20.9+ (مثل Vercel). +- كل طلبات الـ backend تمر عبر `app/api/proxy/[...path]/route.ts`، فتأكد من ضبط الـ backend base URL بشكل صحيح قبل النشر. +- التوثيق (Authentication) يعتمد على HttpOnly cookie تُضبط عبر `app/api/auth/set-cookie`، وتُمسح عبر `app/api/clear-cookie` — تأكد من تفعيل `Secure` في بيئة الإنتاج (يتم تلقائيًا حسب `NODE_ENV`). +- الحماية على مستوى الراوت تتم عبر `middleware.ts` — راجع الـ `matcher` فيه عند إضافة مسارات محمية جديدة. -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +## المساهمة (Contributing) -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +1. أنشئ فرعًا جديدًا من `main` باسم واضح للتغيير (مثال: `feature/car-maintenance-filters`). +2. اتبع نفس أسلوب الكود الموجود: RTL-first، CSS custom property tokens بدل الألوان الثابتة، وهيكلة hooks/services/types/validations لكل وحدة جديدة. +3. شغّل `npm run lint` قبل فتح Pull Request. +4. اكتب وصفًا واضحًا للتغيير وربطه بأي تذكرة (issue) ذات صلة. -## Deploy on Vercel +## الترخيص -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +جميع الحقوق محفوظة © 2026 Slash.sa \ No newline at end of file diff --git a/app/components/layout/Navbar.tsx b/app/components/layout/Navbar.tsx index 5aa41b1..f0b60c9 100644 --- a/app/components/layout/Navbar.tsx +++ b/app/components/layout/Navbar.tsx @@ -1,14 +1,12 @@ import Logo from "@/src/utils/logo"; import Link from "next/link"; - - const navLinks = [ - { label: "الرئيسية", active: true }, - { label: "المميزات" }, - { label: "كيف يعمل" }, - { label: "الأسعار" }, - { label: "الأسئلة الشائعة" }, + { label: "الرئيسية", href: "/home", active: true }, + { label: "المميزات", href: "/features" }, + { label: "كيف يعمل", href: "/how_work" }, + { label: "الأسعار", href: "/prices" }, + { label: "الأسئلة الشائعة", href: "/frequently_asked_questions" }, ]; export default function Navbar() { @@ -21,32 +19,18 @@ export default function Navbar() {
{navLinks.map((link) => ( - {link.label} - + ))}
- {/* - Was `mr-auto`. `mr-*` is a PHYSICAL Tailwind utility — it means - "margin-right" no matter what `dir` says, so it would have - pinned the login button to the visual left in both LTR and - RTL, fighting the rest of the nav. `ms-auto` ("margin-inline- - start: auto") pushes against the start edge instead, which is - right in RTL and left in LTR — it tracks `dir` automatically. - This is the single most common RTL bug: Tailwind's l/r-prefixed - utilities (ml, mr, pl, pr, left-, right-, text-left, text-right, - rounded-l, rounded-r, border-l, border-r) are all physical and - need their logical (s/e) equivalents — ms, me, ps, pe, start-, - end-, text-start, text-end, rounded-s, rounded-e, border-s, - border-e — anywhere direction should matter. - */}
تسجيل الدخول ← diff --git a/app/features/page.tsx b/app/features/page.tsx new file mode 100644 index 0000000..90c2b79 --- /dev/null +++ b/app/features/page.tsx @@ -0,0 +1,156 @@ +import Link from "next/link"; +import { + Car, + UserCog, + PackageSearch, + Route, + Wrench, + Building2, + ShieldCheck, + ClipboardList, + FileBarChart2, +} from "lucide-react"; +import Navbar from "@/app/components/layout/Navbar"; +import Logo from "@/src/utils/logo"; + +type Tone = "blue" | "emerald" | "amber"; + +const toneClasses: Record = { + blue: "bg-blue-100 text-blue-600", + emerald: "bg-emerald-100 text-emerald-600", + amber: "bg-amber-100 text-amber-600", +}; + +const featureGroups: { icon: typeof Car; tone: Tone; title: string; text: string }[] = [ + { + icon: Car, + tone: "blue", + title: "إدارة المركبات", + text: "سجل كامل لكل مركبة: بيانات الترخيص، التأمين، الفحص الدوري، وحالة المركبة الحالية.", + }, + { + icon: UserCog, + tone: "emerald", + title: "إدارة السائقين", + text: "بيانات الهوية والرخصة وبطاقة السائق، مع تنبيهات قبل انتهاء أي مستند بـ90 يومًا.", + }, + { + icon: PackageSearch, + tone: "amber", + title: "إدارة الطلبات", + text: "إنشاء الطلبات، متابعة حالتها من الإنشاء وحتى التسليم، وربطها بالرحلات والعملاء.", + }, + { + icon: Route, + tone: "blue", + title: "تنظيم الرحلات", + text: "تعيين سائق ومركبة لكل رحلة، مع تحديث تلقائي لحالتيهما عند بدء الرحلة وانتهائها.", + }, + { + icon: Wrench, + tone: "emerald", + title: "سجل الصيانة", + text: "تتبع تكلفة ومدة كل عملية صيانة، مع أرشيف كامل وربط تلقائي بحالة المركبة.", + }, + { + icon: Building2, + tone: "amber", + title: "إدارة الفروع", + text: "أدر عدة فروع وعناوين بمواقعها الجغرافية، وربطها بالمستخدمين والمركبات.", + }, + { + icon: ShieldCheck, + tone: "blue", + title: "أدوار وصلاحيات", + text: "تحكم دقيق فيما يمكن لكل مستخدم فعله، عبر صلاحيات قابلة للتخصيص لكل دور.", + }, + { + icon: ClipboardList, + tone: "emerald", + title: "سجل التدقيق", + text: "سجل كامل لكل الإجراءات على النظام: من قام بها، ومتى، وعلى أي بيانات.", + }, + { + icon: FileBarChart2, + tone: "amber", + title: "تقارير مفصّلة", + text: "تقارير يومية للسائقين وتقارير تفصيلية للرحلات، جاهزة للمشاركة والطباعة.", + }, +]; + +export default function FeaturesPage() { + return ( +
+ + +
+
+

+ المميزات +

+

+ كل أدوات إدارة الأسطول في منصة واحدة +

+

+ من أول تسجيل مركبة جديدة وحتى تسليم آخر شحنة، صممنا كل ميزة لتوفّر + عليك الوقت وتمنحك رؤية واضحة على عملياتك. +

+
+
+ +
+
+ {featureGroups.map((feature) => { + const Icon = feature.icon; + return ( +
+
+ +
+

{feature.title}

+

{feature.text}

+
+ ); + })} +
+ +
+

+ عايز تجرب المنصة بنفسك؟ +

+

+ سجّل الدخول للوحة التحكم أو تواصل معنا لمعرفة الخطة المناسبة لفريقك. +

+
+ + تسجيل الدخول + + + عرض الأسعار + +
+
+
+ +
+
+ +
+ © 2026 Slash.sa. جميع الحقوق محفوظة. +
+
+
+
+ ); +} \ No newline at end of file diff --git a/app/frequently_asked_questions/page.tsx b/app/frequently_asked_questions/page.tsx new file mode 100644 index 0000000..60ad86e --- /dev/null +++ b/app/frequently_asked_questions/page.tsx @@ -0,0 +1,118 @@ +"use client"; + +import { useState } from "react"; +import Link from "next/link"; +import { ChevronDown } from "lucide-react"; +import Navbar from "@/app/components/layout/Navbar"; +import Logo from "@/src/utils/logo"; + +const faqs = [ + { + q: "كيف أنشئ حساب عميل؟", + a: "اضغط على زر تسجيل الدخول ثم اختر إنشاء حساب جديد، وأكمل بياناتك الأساسية لتفعيل الحساب في دقائق.", + }, + { + q: "هل يمكنني إدارة أكثر من فرع؟", + a: "نعم، تدعم المنصة إدارة عدد غير محدود من الفروع في خطتي الاحترافي والمؤسسات، مع ربط كل فرع بعناوينه ومركباته.", + }, + { + q: "ماذا يحدث إن أدخلت كلمة مرور خاطئة؟", + a: "ستظهر لك رسالة خطأ واضحة مع خيار إعادة المحاولة أو استرجاع كلمة المرور.", + }, + { + q: "هل بياناتي الشخصية محمية؟", + a: "نعم، يتم تشفير البيانات باستخدام معايير أمان متقدمة، مع صلاحيات دقيقة تحدد من يستطيع الوصول لكل بيانات.", + }, + { + q: "هل يمكن للعميل رؤية طلبات عملاء آخرين؟", + a: "لا، كل عميل يرى فقط طلباته الخاصة ضمن لوحة التحكم المخصصة له.", + }, + { + q: "هل تدعم المنصة تنبيهات انتهاء تراخيص المركبات والسائقين؟", + a: "نعم، تصل التنبيهات قبل 90 يومًا من انتهاء الاستمارة أو رخصة القيادة أو أي مستند رسمي آخر.", + }, + { + q: "كيف أتواصل مع الدعم الفني؟", + a: "يمكنك التواصل معنا عبر البريد الإلكتروني أو من خلال صفحة الأسعار لطلب التحدث مع فريق المبيعات لخطة المؤسسات.", + }, +]; + +export default function FaqPage() { + const [openIndex, setOpenIndex] = useState(0); + + return ( +
+ + +
+
+

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

+

+ إجابات على أكثر الأسئلة تكرارًا +

+

+ لم تجد إجابة سؤالك؟ تواصل معنا وسنكون سعداء بمساعدتك. +

+
+
+ +
+
+ {faqs.map((faq, i) => { + const isOpen = openIndex === i; + return ( +
+ + {isOpen && ( +

+ {faq.a} +

+ )} +
+ ); + })} +
+ +
+

+ عندك سؤال تاني؟ +

+ + تواصل معنا + +
+
+ +
+
+ +
+ © 2026 Slash.sa. جميع الحقوق محفوظة. +
+
+
+
+ ); +} \ No newline at end of file diff --git a/app/home/page.tsx b/app/home/page.tsx index 687292b..eff5ae8 100644 --- a/app/home/page.tsx +++ b/app/home/page.tsx @@ -1,8 +1,302 @@ -import { Topbar } from "../components/layout/Topbar"; +import Link from "next/link"; +import { + Truck, + Clock, + Users, + ShieldCheck, + BarChart3, + MapPin, + PackageCheck, +} from "lucide-react"; +import Navbar from "@/app/components/layout/Navbar"; +import Logo from "@/src/utils/logo"; + +const stats = [ + { label: "الطلبات النشطة", value: "48", color: "text-blue-600" }, + { label: "مُسلَّم هذا الشهر", value: "312", color: "text-emerald-600" }, + { label: "العملاء المسجلون", value: "127", color: "text-slate-900" }, +]; + +type Tone = "blue" | "emerald" | "amber"; + +const toneClasses: Record = { + blue: "bg-blue-100 text-blue-600", + emerald: "bg-emerald-100 text-emerald-600", + amber: "bg-amber-100 text-amber-600", +}; + +const features: { icon: typeof Truck; title: string; text: string; tone: Tone }[] = [ + { + icon: Truck, + title: "إدارة الطلبات", + text: "إنشاء الطلبات وتتبعها وتحديثها في الوقت الفعلي.", + tone: "blue", + }, + { + icon: Clock, + title: "التتبع المباشر", + text: "راقب تقدم الاستلام والتسليم عبر خريطة مرئية.", + tone: "emerald", + }, + { + icon: Users, + title: "صلاحيات حسب الدور", + text: "لوحات تحكم منفصلة للمشرفين والعملاء والمستخدمين.", + tone: "amber", + }, + { + icon: ShieldCheck, + title: "أمان بمستوى المؤسسات", + text: "تشفير متقدّم وصلاحيات دقيقة لكل مستخدم على حدة.", + tone: "blue", + }, + { + icon: BarChart3, + title: "تقارير وتحليلات", + text: "تقارير يومية للسائقين والرحلات وسجل صيانة المركبات.", + tone: "emerald", + }, + { + icon: MapPin, + title: "إدارة الفروع", + text: "أدر عناوين متعددة وفروع مرتبطة بأسطولك بسهولة.", + tone: "amber", + }, +]; + +const roles = [ + { + tone: "dark", + tag: "مشرف", + title: "تحكم كامل", + items: [ + "عرض جميع طلبات العملاء", + "تحديث حالات الطلبات", + "إدارة العملاء والسائقين", + "سجل التدقيق", + "تعيين الرحلات", + ], + }, + { + tone: "blue", + tag: "عميل", + title: "طلباتي", + items: [ + "إضافة طلبات جديدة", + "تتبع الشحنات النشطة", + "عرض سجل الطلبات", + "إدارة العناوين", + "التواصل مع الدعم", + ], + }, + { + tone: "green", + tag: "مستخدم", + title: "وصول ميداني", + items: [ + "عرض الرحلات المعينة", + "تحديث حالة التسليم", + "الملف الشخصي", + "إعدادات الإشعارات", + "تفضيلات التطبيق", + ], + }, +]; export default function HomePage() { - return
Home - - -
; -} + return ( +
+ + + {/* Hero */} +
+
+
+
+ + + منصة سعودية لإدارة الأسطول واللوجستيات + +

+ إدارة لوجستية سهلة، توصيل مضمون في كل مرة. +

+

+ أدِر كل شحنة وعميل وسائق ومركبة من منصة واحدة آمنة، مصممة خصيصًا + لفرق العمليات في المملكة العربية السعودية. +

+
+ + تسجيل الدخول للوحة التحكم + + + كيف تعمل المنصة؟ + +
+
+ + +
+
+ + {/* Stats + Features */} +
+
+ {stats.map((item) => ( +
+

+ {item.label} +

+

+ {item.value} +

+
+ ))} +
+ +
+

+ المميزات الأساسية +

+

+ كل ما يحتاجه فريق اللوجستيك +

+

+ من إدارة الطلبات إلى التتبع المباشر، كل شيء في مكان واحد. +

+
+ {features.map((feature) => { + const Icon = feature.icon; + return ( +
+
+ +
+

{feature.title}

+

{feature.text}

+
+ ); + })} +
+
+ + عرض كل المميزات ← + +
+
+
+ + {/* Roles */} +
+
+
+

+ أدوار المستخدمين +

+

+ منصة واحدة، ثلاثة مداخل +

+
+
+ {roles.map((role) => ( +
+ + {role.tag} + +

{role.title}

+
    + {role.items.map((item) => ( +
  • + ✓ + {item} +
    • + ))} +
+
+ ))} +
+
+
+ + {/* CTA */} +
+
+ +

جاهز تبدأ توصيل أسرع وأذكى؟

+

+ انضم إلى فرق اللوجستيك التي تدير عملياتها بثقة عبر منصتنا. +

+
+ + ابدأ الآن + + + عرض الأسعار + +
+
+
+ +
+
+ +
+ © 2026 Slash.sa. جميع الحقوق محفوظة. +
+
+ الأسعار + الأسئلة الشائعة + كيف يعمل +
+
+
+
+ ); +} \ No newline at end of file diff --git a/app/how_work/page.tsx b/app/how_work/page.tsx new file mode 100644 index 0000000..913c8df --- /dev/null +++ b/app/how_work/page.tsx @@ -0,0 +1,108 @@ +import Link from "next/link"; +import { UserPlus, Building2, PackagePlus, LineChart } from "lucide-react"; +import Navbar from "@/app/components/layout/Navbar"; +import Logo from "@/src/utils/logo"; + +const steps = [ + { + icon: UserPlus, + step: "01", + title: "أنشئ حسابك", + text: "سجّل بيانات شركتك وأضف أول مستخدم مشرف على المنصة في دقائق.", + }, + { + icon: Building2, + step: "02", + title: "جهّز أسطولك", + text: "أضف الفروع والمركبات والسائقين، مع كل بياناتهم ومستنداتهم الرسمية.", + }, + { + icon: PackagePlus, + step: "03", + title: "أنشئ الطلبات والرحلات", + text: "اربط كل طلب برحلة وسائق ومركبة، وتابع حالته حتى وصوله للعميل.", + }, + { + icon: LineChart, + step: "04", + title: "راقب وحلّل", + text: "استخدم لوحة التحكم والتقارير لمتابعة الأداء واتخاذ قرارات أفضل.", + }, +]; + +export default function HowWorkPage() { + return ( +
+ + +
+
+

+ كيف تعمل المنصة +

+

+ أربع خطوات فقط لإدارة أسطولك بالكامل +

+

+ صممنا رحلة الإعداد لتكون بسيطة وسريعة، بحيث يبدأ فريقك العمل من + اليوم الأول. +

+
+
+ +
+
+ + +
+

+ جاهز تبدأ؟ +

+

+ سجّل الدخول الآن وابدأ في تنظيم أسطولك من لوحة تحكم واحدة. +

+ + تسجيل الدخول للوحة التحكم + +
+
+ +
+
+ +
+ © 2026 Slash.sa. جميع الحقوق محفوظة. +
+
+
+
+ ); +} \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 568dc05..b1a5c0f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,340 +1,5 @@ -import Link from "next/link"; -import Navbar from "./components/layout/Navbar"; -import Logo from "@/src/utils/logo"; +import HomePage from "@/app/home/page"; -const stats = [ - { label: "الطلبات النشطة", value: "48", color: "text-blue-600" }, - { label: "مُسلَّم هذا الشهر", value: "312", color: "text-emerald-600" }, - { label: "العملاء المسجلون", value: "127", color: "text-slate-900" }, -]; - -const features = [ - { - icon: "truck", - title: "إدارة الطلبات", - text: "إنشاء الطلبات وتتبعها وتحديثها في الوقت الفعلي.", - tone: "blue", - }, - { - icon: "clock", - title: "التتبع المباشر", - text: "راقب تقدم الاستلام والتسليم عبر خريطة مرئية.", - tone: "emerald", - }, - { - icon: "users", - title: "صلاحيات حسب الدور", - text: "لوحات تحكم منفصلة للمشرفين والعملاء والمستخدمين.", - tone: "amber", - }, -]; - -const roles = [ - { - tone: "dark", - tag: "مشرف", - title: "تحكم كامل", - items: [ - "عرض جميع طلبات العملاء", - "تحديث حالات الطلبات", - "إدارة العملاء والسائقين", - "سجل التدقيق", - "تعيين الرحلات", - ], - }, - { - tone: "blue", - tag: "عميل", - title: "طلباتي", - items: [ - "إضافة طلبات جديدة", - "تتبع الشحنات النشطة", - "عرض سجل الطلبات", - "إدارة العناوين", - "التواصل مع الدعم", - ], - }, - { - tone: "green", - tag: "مستخدم", - title: "وصول ميداني", - items: [ - "عرض الرحلات المعينة", - "تحديث حالة التسليم", - "الملف الشخصي", - "إعدادات الإشعارات", - "تفضيلات التطبيق", - ], - }, -]; - -const faqs = [ - { - q: "كيف أنشئ حساب عميل؟", - a: "اضغط على “إنشاء حساب عميل” ثم أكمل بياناتك الأساسية لتفعيل الحساب في دقائق.", - }, - { - q: "ماذا يحدث إن أدخلت كلمة مرور خاطئة؟", - a: "ستظهر لك رسالة خطأ واضحة مع خيار إعادة المحاولة أو استرجاع كلمة المرور.", - }, - { - q: "هل بياناتي الشخصية محمية؟", - a: "نعم، يتم تشفير البيانات باستخدام AES-256-GCM وإجراءات أمان متقدمة.", - }, - { - q: "هل يمكن للعميل رؤية طلبات عملاء آخرين؟", - a: "لا، كل عميل يرى فقط طلباته الخاصة ضمن لوحة التحكم المخصصة له.", - }, -]; - -export default function Home() { - return ( -
- - -
-
-
-
- - - منصة مباشرة • 3 صلاحيات - -

- إدارة لوجستية سهلة، توصيل مضمون في كل مرة. -

-

- أدِر كل شحنة وعميل وسائق من منصة واحدة آمنة. مصممة للمشرفين - والعملاء والمستخدمين الميدانيين. -

-
- - تسجيل الدخول للوحة التحكم - -
-
- - -
-
- -
-
- {stats.map((item) => ( -
-

- {item.label} -

-

- {item.value} -

-
- ))} -
- -
-

- المميزات الأساسية -

-

- كل ما يحتاجه فريق اللوجستيك -

-

- من إدارة الطلبات إلى التتبع المباشر، كل شيء في مكان واحد. -

-
- {features.map((feature) => ( -
-
- {feature.icon === "truck" ? ( - - - - - - ) : feature.icon === "clock" ? ( - - - - - ) : ( - - - - - - )} -
-

- {feature.title} -

-

- {feature.text} -

-
- ))} -
-
-
- -
-
-
-

- أدوار المستخدمين -

-

- منصة واحدة، ثلاثة مداخل -

-
-
- {roles.map((role) => ( -
- - {role.tag} - -

- {role.title} -

-
    - {role.items.map((item) => ( -
  • - {" "} - ✓ - {item} -
    • - ))} -
-
- ))} -
-
-
- -
-
-

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

-

- أسئلة متكررة -

-
- {faqs.map((faq) => ( -
-

- {faq.q} -

-

- {faq.a} -

-
- ))} -
-
-
- -
-
- -
- © 2026 Slash.sa. جميع الحقوق محفوظة. -
-
- الخصوصية · الشروط · الحالة -
-
-
-
- ); -} +export default function RootPage() { + return ; +} \ No newline at end of file diff --git a/app/prices/page.tsx b/app/prices/page.tsx new file mode 100644 index 0000000..c1d0f04 --- /dev/null +++ b/app/prices/page.tsx @@ -0,0 +1,134 @@ +import Link from "next/link"; +import { Check } from "lucide-react"; +import Navbar from "@/app/components/layout/Navbar"; +import Logo from "@/src/utils/logo"; + +const plans = [ + { + name: "أساسي", + price: "499", + period: "شهريًا", + description: "مناسبة للفرق الصغيرة التي تبدأ في تنظيم أسطولها.", + features: [ + "حتى 10 مركبات", + "حتى 15 سائقًا", + "إدارة الطلبات والرحلات", + "دعم عبر البريد الإلكتروني", + ], + highlighted: false, + }, + { + name: "احترافي", + price: "1,299", + period: "شهريًا", + description: "الأنسب للشركات متوسطة الحجم مع عدة فروع.", + features: [ + "حتى 50 مركبة", + "عدد غير محدود من السائقين", + "إدارة الفروع والصلاحيات", + "تقارير وتحليلات متقدمة", + "دعم فني مباشر", + ], + highlighted: true, + }, + { + name: "مؤسسات", + price: "تواصل معنا", + period: "", + description: "حلول مخصصة للمؤسسات الكبيرة وأصحاب الأساطيل الضخمة.", + features: [ + "عدد غير محدود من المركبات والفروع", + "تكاملات مخصصة", + "مدير حساب مخصص", + "اتفاقية مستوى خدمة (SLA)", + ], + highlighted: false, + }, +]; + +export default function PricesPage() { + return ( +
+ + +
+
+

+ الأسعار +

+

+ خطط تناسب حجم أسطولك +

+

+ جميع الأسعار بالريال السعودي وغير شاملة ضريبة القيمة المضافة. يمكنك + تغيير خطتك أو إلغاؤها في أي وقت. +

+
+
+ +
+
+ {plans.map((plan) => ( +
+ {plan.highlighted && ( + + الأكثر طلبًا + + )} +

+ {plan.name} +

+

+ {plan.description} +

+
+ + {plan.price} + + {plan.period && ( + + ر.س / {plan.period} + + )} +
+
    + {plan.features.map((f) => ( +
  • + + {f} +
    • + ))} +
+ + {plan.name === "مؤسسات" ? "تواصل مع المبيعات" : "ابدأ الآن"} + +
+ ))} +
+
+ + +
+ ); +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 78a42f3..37afbe8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,8 @@ "dependencies": { "@hookform/resolvers": "^3.9.1", "@tabler/icons-webfont": "^3.44.0", + "axios": "^1.18.1", + "lucide-react": "^0.460.0", "next": "16.2.7", "react": "19.2.4", "react-dom": "19.2.4", @@ -2633,6 +2635,12 @@ "node": ">= 0.4" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "license": "MIT" + }, "node_modules/auto-config-loader": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/auto-config-loader/-/auto-config-loader-2.0.2.tgz", @@ -2717,6 +2725,43 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.18.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.18.1.tgz", + "integrity": "sha512-3nTvFlvpn9Zu/RkHUqtc7/+al4UpRW5az71ap5zccp6e8RAYEzhMTecX8Dz1wWDYrPpUoB1HAQEGEAEvUr7S9g==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.16.0", + "form-data": "^4.0.5", + "https-proxy-agent": "^5.0.1", + "proxy-from-env": "^2.1.0" + } + }, + "node_modules/axios/node_modules/agent-base": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", + "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==", + "license": "MIT", + "dependencies": { + "debug": "4" + }, + "engines": { + "node": ">= 6.0.0" + } + }, + "node_modules/axios/node_modules/https-proxy-agent": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz", + "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==", + "license": "MIT", + "dependencies": { + "agent-base": "6", + "debug": "4" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", @@ -3049,7 +3094,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==", - "dev": true, "license": "MIT", "dependencies": { "es-errors": "^1.3.0", @@ -3224,6 +3268,18 @@ "url": "https://jaywcjlove.github.io/#/sponsor" } }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "license": "MIT", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/commander": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", @@ -3478,6 +3534,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/detect-libc": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", @@ -3560,7 +3625,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==", - "dev": true, "license": "MIT", "dependencies": { "call-bind-apply-helpers": "^1.0.1", @@ -3727,7 +3791,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.4" @@ -3737,7 +3800,6 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.4" @@ -3775,7 +3837,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz", "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==", - "dev": true, "license": "MIT", "dependencies": { "es-errors": "^1.3.0" @@ -3788,7 +3849,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz", "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==", - "dev": true, "license": "MIT", "dependencies": { "es-errors": "^1.3.0", @@ -4419,6 +4479,26 @@ "dev": true, "license": "ISC" }, + "node_modules/follow-redirects": { + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz", + "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.5", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz", @@ -4451,6 +4531,22 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/form-data": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz", + "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "es-set-tostringtag": "^2.1.0", + "hasown": "^2.0.4", + "mime-types": "^2.1.35" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/formdata-polyfill": { "version": "4.0.10", "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz", @@ -4507,7 +4603,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", - "dev": true, "license": "MIT", "funding": { "url": "https://github.com/sponsors/ljharb" @@ -4577,7 +4672,6 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==", - "dev": true, "license": "MIT", "dependencies": { "call-bind-apply-helpers": "^1.0.2", @@ -4602,7 +4696,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==", - "dev": true, "license": "MIT", "dependencies": { "dunder-proto": "^1.0.1", @@ -4750,7 +4843,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.4" @@ -4821,7 +4913,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.4" @@ -4834,7 +4925,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", - "dev": true, "license": "MIT", "dependencies": { "has-symbols": "^1.0.3" @@ -4850,7 +4940,6 @@ "version": "2.0.4", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz", "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==", - "dev": true, "license": "MIT", "dependencies": { "function-bind": "^1.1.2" @@ -6031,6 +6120,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.460.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.460.0.tgz", + "integrity": "sha512-BVtq/DykVeIvRTJvRAgCsOwaGL8Un3Bxh8MbDxMhEWlZay3T4IpEKDEpwt5KZ0KJMHzgm6jrltxlT5eXOWXDHg==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" + } + }, "node_modules/magic-string": { "version": "0.30.21", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", @@ -6067,7 +6165,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.4" @@ -6109,6 +6206,27 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "3.1.5", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz", @@ -7056,6 +7174,15 @@ "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==", "license": "MIT" }, + "node_modules/proxy-from-env": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz", + "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==", + "license": "MIT", + "engines": { + "node": ">=10" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/package.json b/package.json index 3cde41f..e45309f 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,8 @@ "dependencies": { "@hookform/resolvers": "^3.9.1", "@tabler/icons-webfont": "^3.44.0", + "axios": "^1.18.1", + "lucide-react": "^0.460.0", "next": "16.2.7", "react": "19.2.4", "react-dom": "19.2.4",