add home pages and update app page laye out and navebar

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() {
 
         <div className="hidden flex-1 items-center justify-center gap-6 md:flex">
           {navLinks.map((link) => (
-            <a
+            <Link
               key={link.label}
-              href="#"
+              href={link.href}
               className={`text-[13px] font-semibold transition hover:text-blue-600 ${
                 link.active ? "text-blue-600" : "text-slate-500"
               }`}
             >
               {link.label}
-            </a>
+            </Link>
           ))}
         </div>
 
-        {/*
-          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.
-        */}
         <div className="ms-auto flex items-center gap-2">
           <Link href="/login" className="flex h-[34px] items-center rounded-lg bg-blue-600 px-3 text-[13px] font-bold text-white shadow-sm transition hover:bg-blue-700">
             تسجيل الدخول ←

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<Tone, string> = {
+  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 (
+    <main className="min-h-screen bg-[#ECEEF2] text-slate-900" dir="rtl">
+      <Navbar />
+
+      <section className="bg-[linear-gradient(145deg,#0D47A1_0%,#1A73E8_45%,#1565C0_100%)] text-white">
+        <div className="mx-auto max-w-7xl px-6 py-14 lg:px-8">
+          <p className="text-[11px] uppercase tracking-[0.35em] text-white/60">
+            المميزات
+          </p>
+          <h1 className="mt-3 max-w-2xl text-[30px] font-extrabold leading-tight lg:text-[36px]">
+            كل أدوات إدارة الأسطول في منصة واحدة
+          </h1>
+          <p className="mt-3 max-w-2xl text-[14px] leading-7 text-white/75">
+            من أول تسجيل مركبة جديدة وحتى تسليم آخر شحنة، صممنا كل ميزة لتوفّر
+            عليك الوقت وتمنحك رؤية واضحة على عملياتك.
+          </p>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-7xl px-6 py-12 lg:px-8">
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {featureGroups.map((feature) => {
+            const Icon = feature.icon;
+            return (
+              <article
+                key={feature.title}
+                className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"
+              >
+                <div
+                  className={`mb-4 flex h-11 w-11 items-center justify-center rounded-xl ${toneClasses[feature.tone]}`}
+                >
+                  <Icon className="h-5 w-5" strokeWidth={1.8} />
+                </div>
+                <h3 className="text-[16px] font-bold text-slate-900">{feature.title}</h3>
+                <p className="mt-2 text-[13px] leading-6 text-slate-500">{feature.text}</p>
+              </article>
+            );
+          })}
+        </div>
+
+        <div className="mt-10 flex flex-col items-center gap-4 rounded-3xl bg-white p-8 text-center shadow-sm ring-1 ring-slate-200">
+          <h2 className="text-[20px] font-extrabold text-slate-900">
+            عايز تجرب المنصة بنفسك؟
+          </h2>
+          <p className="max-w-xl text-[14px] text-slate-500">
+            سجّل الدخول للوحة التحكم أو تواصل معنا لمعرفة الخطة المناسبة لفريقك.
+          </p>
+          <div className="flex flex-wrap justify-center gap-3">
+            <Link
+              href="/login"
+              className="inline-flex h-11 items-center rounded-xl bg-blue-600 px-6 text-[13px] font-semibold text-white shadow-sm hover:bg-blue-700"
+            >
+              تسجيل الدخول
+            </Link>
+            <Link
+              href="/prices"
+              className="inline-flex h-11 items-center rounded-xl border border-slate-200 bg-white px-6 text-[13px] font-semibold text-slate-700 hover:bg-slate-50"
+            >
+              عرض الأسعار
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      <footer className="bg-[#0F172A] text-white">
+        <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-6 py-6 text-[13px] lg:flex-row lg:items-center lg:justify-between lg:px-8">
+          <Logo white={true} />
+          <div className="text-center text-white/40">
+            © 2026 Slash.sa. جميع الحقوق محفوظة.
+          </div>
+        </div>
+      </footer>
+    </main>
+  );
+}

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<number | null>(0);
+
+  return (
+    <main className="min-h-screen bg-[#ECEEF2] text-slate-900" dir="rtl">
+      <Navbar />
+
+      <section className="bg-[linear-gradient(145deg,#0D47A1_0%,#1A73E8_45%,#1565C0_100%)] text-white">
+        <div className="mx-auto max-w-7xl px-6 py-14 lg:px-8">
+          <p className="text-[11px] uppercase tracking-[0.35em] text-white/60">
+            الأسئلة الشائعة
+          </p>
+          <h1 className="mt-3 max-w-2xl text-[30px] font-extrabold leading-tight lg:text-[36px]">
+            إجابات على أكثر الأسئلة تكرارًا
+          </h1>
+          <p className="mt-3 max-w-2xl text-[14px] leading-7 text-white/75">
+            لم تجد إجابة سؤالك؟ تواصل معنا وسنكون سعداء بمساعدتك.
+          </p>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-3xl px-6 py-14 lg:px-8">
+        <div className="flex flex-col gap-3">
+          {faqs.map((faq, i) => {
+            const isOpen = openIndex === i;
+            return (
+              <div
+                key={faq.q}
+                className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"
+              >
+                <button
+                  type="button"
+                  onClick={() => setOpenIndex(isOpen ? null : i)}
+                  aria-expanded={isOpen}
+                  className="flex w-full items-center justify-between gap-3 px-5 py-4 text-right"
+                >
+                  <span className="text-[14px] font-bold text-slate-900">
+                    {faq.q}
+                  </span>
+                  <ChevronDown
+                    className={`h-4 w-4 flex-shrink-0 text-slate-400 transition-transform ${
+                      isOpen ? "rotate-180" : ""
+                    }`}
+                  />
+                </button>
+                {isOpen && (
+                  <p className="px-5 pb-4 text-[13px] leading-6 text-slate-500">
+                    {faq.a}
+                  </p>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="mt-10 flex flex-col items-center gap-4 rounded-3xl bg-white p-8 text-center shadow-sm ring-1 ring-slate-200">
+          <h2 className="text-[18px] font-extrabold text-slate-900">
+            عندك سؤال تاني؟
+          </h2>
+          <Link
+            href="/prices"
+            className="inline-flex h-11 items-center rounded-xl bg-blue-600 px-6 text-[13px] font-semibold text-white shadow-sm hover:bg-blue-700"
+          >
+            تواصل معنا
+          </Link>
+        </div>
+      </section>
+
+      <footer className="bg-[#0F172A] text-white">
+        <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-6 py-6 text-[13px] lg:flex-row lg:items-center lg:justify-between lg:px-8">
+          <Logo white={true} />
+          <div className="text-center text-white/40">
+            © 2026 Slash.sa. جميع الحقوق محفوظة.
+          </div>
+        </div>
+      </footer>
+    </main>
+  );
+}

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<Tone, string> = {
+  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 <section className="">Home
-  
-  <Topbar/>
-  </section>;
-}
+  return (
+    <main className="min-h-screen bg-[#ECEEF2] text-slate-900" dir="rtl">
+      <Navbar />
+
+      {/* Hero */}
+      <section className="relative overflow-hidden bg-[linear-gradient(145deg,#0D47A1_0%,#1A73E8_45%,#1565C0_100%)] text-white">
+        <div className="absolute inset-0 opacity-10 [background-image:radial-gradient(rgba(255,255,255,0.9)_1px,transparent_1px)] [background-size:28px_28px]" />
+        <div className="relative mx-auto flex max-w-7xl flex-col gap-10 px-6 py-16 lg:flex-row lg:items-center lg:justify-between lg:px-8 lg:py-20">
+          <article className="max-w-2xl space-y-6">
+            <span className="inline-flex items-center gap-2 rounded-full border border-white/30 bg-white/10 px-4 py-2 text-[13px] text-white shadow-sm backdrop-blur">
+              <span className="h-2.5 w-2.5 rounded-full bg-emerald-400" />
+              منصة سعودية لإدارة الأسطول واللوجستيات
+            </span>
+            <h1 className="max-w-xl text-[32px] font-extrabold leading-tight text-white lg:text-[42px]">
+              إدارة لوجستية سهلة، توصيل مضمون في كل مرة.
+            </h1>
+            <p className="max-w-xl text-[15px] leading-7 text-white/75">
+              أدِر كل شحنة وعميل وسائق ومركبة من منصة واحدة آمنة، مصممة خصيصًا
+              لفرق العمليات في المملكة العربية السعودية.
+            </p>
+            <div className="flex flex-wrap gap-3">
+              <Link
+                href="/login"
+                className="inline-flex h-11 items-center rounded-xl border border-white/30 bg-white/15 px-5 text-[13px] font-semibold text-white shadow-md backdrop-blur"
+              >
+                تسجيل الدخول للوحة التحكم
+              </Link>
+              <Link
+                href="/how_work"
+                className="inline-flex h-11 items-center rounded-xl bg-white px-5 text-[13px] font-semibold text-blue-700 shadow-md"
+              >
+                كيف تعمل المنصة؟
+              </Link>
+            </div>
+          </article>
+
+          <aside className="w-full max-w-md rounded-2xl border border-white/20 bg-white/12 p-5 shadow-2xl shadow-blue-950/30 backdrop-blur-md">
+            <p className="text-[11px] uppercase tracking-[0.35em] text-white/60">
+              تغذية الطلبات المباشرة
+            </p>
+            <div className="mt-5 space-y-3">
+              {[
+                ["SHIP-202606-00142", "في الطريق", "bg-amber-100 text-amber-800"],
+                ["SHIP-202606-00139", "تم التسليم", "bg-emerald-100 text-emerald-800"],
+                ["SHIP-202606-00145", "تم الإنشاء", "bg-blue-100 text-blue-800"],
+              ].map(([code, status, badge]) => (
+                <div
+                  key={code}
+                  className="flex items-center justify-between rounded-xl border border-white/10 bg-white/8 px-4 py-3"
+                >
+                  <span className="font-mono text-[12px] text-white/90">{code}</span>
+                  <span className={`rounded-full px-3 py-1 text-[11px] font-semibold ${badge}`}>
+                    {status}
+                  </span>
+                </div>
+              ))}
+            </div>
+            <div className="mt-4 flex items-center justify-between text-[12px] text-white/40">
+              <span>تم التحديث للتو</span>
+              <span className="text-emerald-300">● النظام متصل</span>
+            </div>
+          </aside>
+        </div>
+      </section>
+
+      {/* Stats + Features */}
+      <section className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 py-10 lg:px-8">
+        <div className="grid gap-4 md:grid-cols-3">
+          {stats.map((item) => (
+            <article
+              key={item.label}
+              className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"
+            >
+              <p className="text-[11px] uppercase tracking-[0.35em] text-slate-500">
+                {item.label}
+              </p>
+              <p className={`mt-3 text-[32px] font-extrabold ${item.color}`}>
+                {item.value}
+              </p>
+            </article>
+          ))}
+        </div>
+
+        <article className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200 lg:p-8">
+          <p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">
+            المميزات الأساسية
+          </p>
+          <h2 className="mt-2 text-[22px] font-extrabold text-slate-900">
+            كل ما يحتاجه فريق اللوجستيك
+          </h2>
+          <p className="mt-2 text-[14px] text-slate-500">
+            من إدارة الطلبات إلى التتبع المباشر، كل شيء في مكان واحد.
+          </p>
+          <div className="mt-6 grid gap-4 md:grid-cols-3">
+            {features.map((feature) => {
+              const Icon = feature.icon;
+              return (
+                <article
+                  key={feature.title}
+                  className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"
+                >
+                  <div className={`mb-4 flex h-11 w-11 items-center justify-center rounded-xl ${toneClasses[feature.tone]}`}>
+                    <Icon className="h-5 w-5" strokeWidth={1.8} />
+                  </div>
+                  <h3 className="text-[16px] font-bold text-slate-900">{feature.title}</h3>
+                  <p className="mt-2 text-[13px] leading-6 text-slate-500">{feature.text}</p>
+                </article>
+              );
+            })}
+          </div>
+          <div className="mt-6">
+            <Link href="/features/app" className="text-[13px] font-semibold text-blue-600 hover:text-blue-700">
+              عرض كل المميزات ←
+            </Link>
+          </div>
+        </article>
+      </section>
+
+      {/* Roles */}
+      <section className="bg-[#ECEEF2] py-2">
+        <div className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 py-10 lg:px-8">
+          <article className="text-center">
+            <p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">
+              أدوار المستخدمين
+            </p>
+            <h2 className="mt-2 text-[22px] font-extrabold text-slate-900">
+              منصة واحدة، ثلاثة مداخل
+            </h2>
+          </article>
+          <div className="grid gap-4 md:grid-cols-3">
+            {roles.map((role) => (
+              <article
+                key={role.title}
+                className={`rounded-2xl border p-5 shadow-sm ${role.tone === "dark" ? "border-slate-800 bg-slate-950 " : role.tone === "blue" ? "border-blue-200 bg-blue-50 text-blue-950" : "border-emerald-200 bg-emerald-50 text-emerald-950"}`}
+              >
+                <span
+                  className={`inline-flex rounded-full px-3 py-1 text-[11px] font-semibold ${role.tone === "dark" ? "bg-slate-800 text-slate-200" : role.tone === "blue" ? "bg-blue-100 text-blue-700" : "bg-emerald-100 text-emerald-700"}`}
+                >
+                  {role.tag}
+                </span>
+                <h3 className="mt-3 text-[18px] font-extrabold">{role.title}</h3>
+                <ul className="mt-4 space-y-2 text-[13px] leading-6">
+                  {role.items.map((item) => (
+                    <li key={item} className="flex items-start gap-2">
+                      <span className="mt-1 text-[12px]">✓</span>
+                      <span>{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="mx-auto w-full max-w-7xl px-6 py-10 lg:px-8">
+        <article className="flex flex-col items-center gap-4 rounded-3xl bg-[linear-gradient(145deg,#0D47A1_0%,#1A73E8_45%,#1565C0_100%)] p-10 text-center text-white shadow-sm">
+          <PackageCheck className="h-10 w-10" strokeWidth={1.8} />
+          <h2 className="text-[22px] font-extrabold">جاهز تبدأ توصيل أسرع وأذكى؟</h2>
+          <p className="max-w-xl text-[14px] text-white/80">
+            انضم إلى فرق اللوجستيك التي تدير عملياتها بثقة عبر منصتنا.
+          </p>
+          <div className="flex flex-wrap justify-center gap-3">
+            <Link
+              href="/login"
+              className="inline-flex h-11 items-center rounded-xl bg-white px-6 text-[13px] font-semibold text-blue-700 shadow-md"
+            >
+              ابدأ الآن
+            </Link>
+            <Link
+              href="/prices"
+              className="inline-flex h-11 items-center rounded-xl border border-white/30 bg-white/10 px-6 text-[13px] font-semibold text-white backdrop-blur"
+            >
+              عرض الأسعار
+            </Link>
+          </div>
+        </article>
+      </section>
+
+      <footer className="bg-[#0F172A] text-white">
+        <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-6 py-6 text-[13px] lg:flex-row lg:items-center lg:justify-between lg:px-8">
+          <Logo white={true} />
+          <div className="text-center text-white/40">
+            © 2026 Slash.sa. جميع الحقوق محفوظة.
+          </div>
+          <div className="flex items-center gap-4 text-white/40">
+            <Link href="/prices" className="hover:text-white/70">الأسعار</Link>
+            <Link href="/frequently_asked_questions" className="hover:text-white/70">الأسئلة الشائعة</Link>
+            <Link href="/how_work" className="hover:text-white/70">كيف يعمل</Link>
+          </div>
+        </div>
+      </footer>
+    </main>
+  );
+}

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 (
+    <main className="min-h-screen bg-[#ECEEF2] text-slate-900" dir="rtl">
+      <Navbar />
+
+      <section className="bg-[linear-gradient(145deg,#0D47A1_0%,#1A73E8_45%,#1565C0_100%)] text-white">
+        <div className="mx-auto max-w-7xl px-6 py-14 lg:px-8">
+          <p className="text-[11px] uppercase tracking-[0.35em] text-white/60">
+            كيف تعمل المنصة
+          </p>
+          <h1 className="mt-3 max-w-2xl text-[30px] font-extrabold leading-tight lg:text-[36px]">
+            أربع خطوات فقط لإدارة أسطولك بالكامل
+          </h1>
+          <p className="mt-3 max-w-2xl text-[14px] leading-7 text-white/75">
+            صممنا رحلة الإعداد لتكون بسيطة وسريعة، بحيث يبدأ فريقك العمل من
+            اليوم الأول.
+          </p>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-5xl px-6 py-14 lg:px-8">
+        <div className="relative flex flex-col gap-8">
+          <div
+            aria-hidden="true"
+            className="absolute right-[27px] top-4 hidden h-[calc(100%-2rem)] w-px bg-slate-200 md:block"
+          />
+          {steps.map((step) => {
+            const Icon = step.icon;
+            return (
+              <article key={step.step} className="relative flex gap-5">
+                <div className="flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-2xl bg-blue-600 text-white shadow-sm">
+                  <Icon className="h-6 w-6" strokeWidth={1.8} />
+                </div>
+                <div className="flex-1 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                  <span className="text-[11px] font-bold uppercase tracking-[0.3em] text-blue-600">
+                    خطوة {step.step}
+                  </span>
+                  <h3 className="mt-2 text-[17px] font-extrabold text-slate-900">
+                    {step.title}
+                  </h3>
+                  <p className="mt-2 text-[13px] leading-6 text-slate-500">
+                    {step.text}
+                  </p>
+                </div>
+              </article>
+            );
+          })}
+        </div>
+
+        <div className="mt-12 flex flex-col items-center gap-4 rounded-3xl bg-white p-8 text-center shadow-sm ring-1 ring-slate-200">
+          <h2 className="text-[20px] font-extrabold text-slate-900">
+            جاهز تبدأ؟
+          </h2>
+          <p className="max-w-xl text-[14px] text-slate-500">
+            سجّل الدخول الآن وابدأ في تنظيم أسطولك من لوحة تحكم واحدة.
+          </p>
+          <Link
+            href="/login"
+            className="inline-flex h-11 items-center rounded-xl bg-blue-600 px-6 text-[13px] font-semibold text-white shadow-sm hover:bg-blue-700"
+          >
+            تسجيل الدخول للوحة التحكم
+          </Link>
+        </div>
+      </section>
+
+      <footer className="bg-[#0F172A] text-white">
+        <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-6 py-6 text-[13px] lg:flex-row lg:items-center lg:justify-between lg:px-8">
+          <Logo white={true} />
+          <div className="text-center text-white/40">
+            © 2026 Slash.sa. جميع الحقوق محفوظة.
+          </div>
+        </div>
+      </footer>
+    </main>
+  );
+}

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 (
-    <main className="min-h-screen bg-[#ECEEF2] text-slate-900" dir="rtl">
-      <Navbar />
-
-      <section className="relative overflow-hidden bg-[linear-gradient(145deg,#0D47A1_0%,#1A73E8_45%,#1565C0_100%)] text-white">
-        <div className="absolute inset-0 opacity-10 [background-image:radial-gradient(rgba(255,255,255,0.9)_1px,transparent_1px)] [background-size:28px_28px]" />
-        <div className="relative mx-auto flex max-w-7xl flex-col gap-10 px-6 py-12 lg:flex-row lg:items-center lg:justify-between lg:px-8 lg:py-16">
-          <article className="max-w-2xl space-y-6">
-            <span className="inline-flex items-center gap-2 rounded-full border border-white/30 bg-white/10 px-4 py-2 text-[13px] text-white shadow-sm backdrop-blur">
-              <span className="h-2.5 w-2.5 rounded-full bg-emerald-400" />
-              منصة مباشرة • 3 صلاحيات
-            </span>
-            <h1 className="max-w-xl text-[30px] font-extrabold leading-tight text-white lg:text-[38px]">
-              إدارة لوجستية سهلة، توصيل مضمون في كل مرة.
-            </h1>
-            <p className="max-w-xl text-[14px] leading-7 text-white/75">
-              أدِر كل شحنة وعميل وسائق من منصة واحدة آمنة. مصممة للمشرفين
-              والعملاء والمستخدمين الميدانيين.
-            </p>
-            <div className="flex flex-wrap gap-3">
-              <Link
-                href="/login"
-                className="h-11 pt-3 rounded-xl border border-white/30 bg-white/15 px-5 text-[13px] font-semibold text-white shadow-md backdrop-blur"
-              >
-                تسجيل الدخول للوحة التحكم
-              </Link>
-            </div>
-          </article>
-
-          <aside className="w-full max-w-md rounded-2xl border border-white/20 bg-white/12 p-5 shadow-2xl shadow-blue-950/30 backdrop-blur-md">
-            <p className="text-[11px] uppercase tracking-[0.35em] text-white/60">
-              تغذية الطلبات المباشرة
-            </p>
-            <div className="mt-5 space-y-3">
-              {[
-                [
-                  "SHIP-202606-00142",
-                  "في الطريق",
-                  "bg-amber-100 text-amber-800",
-                ],
-                [
-                  "SHIP-202606-00139",
-                  "تم التسليم",
-                  "bg-emerald-100 text-emerald-800",
-                ],
-                [
-                  "SHIP-202606-00145",
-                  "تم الإنشاء",
-                  "bg-blue-100 text-blue-800",
-                ],
-              ].map(([code, status, badge]) => (
-                <div
-                  key={code}
-                  className="flex items-center justify-between rounded-xl border border-white/10 bg-white/8 px-4 py-3"
-                >
-                  <span className="font-mono text-[12px] text-white/90">
-                    {code}
-                  </span>
-                  <span
-                    className={`rounded-full px-3 py-1 text-[11px] font-semibold ${badge}`}
-                  >
-                    {status}
-                  </span>
-                </div>
-              ))}
-            </div>
-            <div className="mt-4 flex items-center justify-between text-[12px] text-white/40">
-              <span>تم التحديث للتو</span>
-              <span className="text-emerald-300">● النظام متصل</span>
-            </div>
-          </aside>
-        </div>
-      </section>
-
-      <section className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 py-10 lg:px-8">
-        <div className="grid gap-4 md:grid-cols-3">
-          {stats.map((item) => (
-            <article
-              key={item.label}
-              className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"
-            >
-              <p className="text-[11px] uppercase tracking-[0.35em] text-slate-500">
-                {item.label}
-              </p>
-              <p className={`mt-3 text-[32px] font-extrabold ${item.color}`}>
-                {item.value}
-              </p>
-            </article>
-          ))}
-        </div>
-
-        <article className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200 lg:p-8">
-          <p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">
-            المميزات الأساسية
-          </p>
-          <h2 className="mt-2 text-[22px] font-extrabold text-slate-900">
-            كل ما يحتاجه فريق اللوجستيك
-          </h2>
-          <p className="mt-2 text-[14px] text-slate-500">
-            من إدارة الطلبات إلى التتبع المباشر، كل شيء في مكان واحد.
-          </p>
-          <div className="mt-6 grid gap-4 md:grid-cols-3">
-            {features.map((feature) => (
-              <article
-                key={feature.title}
-                className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"
-              >
-                <div
-                  className={`mb-4 flex h-11 w-11 items-center justify-center rounded-xl ${feature.tone === "blue" ? "bg-blue-100 text-blue-600" : feature.tone === "emerald" ? "bg-emerald-100 text-emerald-600" : "bg-amber-100 text-amber-600"}`}
-                >
-                  {feature.icon === "truck" ? (
-                    <svg
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1.8"
-                      className="h-5 w-5"
-                    >
-                      <path d="M3 7h11l3 4h4l-2 4H8" />
-                      <circle
-                        cx="9"
-                        cy="18"
-                        r="1.7"
-                        fill="currentColor"
-                        stroke="none"
-                      />
-                      <circle
-                        cx="18"
-                        cy="18"
-                        r="1.7"
-                        fill="currentColor"
-                        stroke="none"
-                      />
-                    </svg>
-                  ) : feature.icon === "clock" ? (
-                    <svg
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1.8"
-                      className="h-5 w-5"
-                    >
-                      <circle cx="12" cy="12" r="8" />
-                      <path d="M12 7v5l3 2" />
-                    </svg>
-                  ) : (
-                    <svg
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1.8"
-                      className="h-5 w-5"
-                    >
-                      <path d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2" />
-                      <circle cx="9.5" cy="7" r="3" />
-                      <path d="M17 8l2 2 4-4" />
-                    </svg>
-                  )}
-                </div>
-                <h3 className="text-[16px] font-bold text-slate-900">
-                  {feature.title}
-                </h3>
-                <p className="mt-2 text-[13px] leading-6 text-slate-500">
-                  {feature.text}
-                </p>
-              </article>
-            ))}
-          </div>
-        </article>
-      </section>
-
-      <section className="bg-[#ECEEF2] py-2">
-        <div className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 py-10 lg:px-8">
-          <article className="text-center">
-            <p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">
-              أدوار المستخدمين
-            </p>
-            <h2 className="mt-2 text-[22px] font-extrabold text-slate-900">
-              منصة واحدة، ثلاثة مداخل
-            </h2>
-          </article>
-          <div className="grid gap-4 md:grid-cols-3">
-            {roles.map((role) => (
-              <article
-                key={role.title}
-                className={`rounded-2xl border p-5 shadow-sm ${role.tone === "dark" ? "border-slate-800 bg-slate-950 text-slate-800" : role.tone === "blue" ? "border-blue-200 bg-blue-50 text-blue-950" : "border-emerald-200 bg-emerald-50 text-emerald-950"}`}
-              >
-                <span
-                  className={`inline-flex rounded-full px-3 py-1 text-[11px] font-semibold ${role.tone === "dark" ? "bg-slate-800 text-slate-200" : role.tone === "blue" ? "bg-blue-100 text-blue-700" : "bg-emerald-100 text-emerald-700"}`}
-                >
-                  {role.tag}
-                </span>
-                <h3 className="mt-3 text-[18px] font-extrabold">
-                  {role.title}
-                </h3>
-                <ul className="mt-4 space-y-2 text-[13px] leading-6">
-                  {role.items.map((item) => (
-                    <li key={item} className="flex items-start gap-2">
-                      {" "}
-                      <span className="mt-1 text-[12px]">✓</span>
-                      <span>{item}</span>
-                    </li>
-                  ))}
-                </ul>
-              </article>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      <section className="mx-auto w-full max-w-7xl px-6 py-10 lg:px-8">
-        <article className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200 lg:p-8">
-          <p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">
-            الأسئلة الشائعة
-          </p>
-          <h2 className="mt-2 text-[22px] font-extrabold text-slate-900">
-            أسئلة متكررة
-          </h2>
-          <div className="mt-6 space-y-3">
-            {faqs.map((faq) => (
-              <article
-                key={faq.q}
-                className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"
-              >
-                <h3 className="text-[14px] font-bold text-slate-900">
-                  {faq.q}
-                </h3>
-                <p className="mt-2 text-[13px] leading-6 text-slate-500">
-                  {faq.a}
-                </p>
-              </article>
-            ))}
-          </div>
-        </article>
-      </section>
-
-      <footer className="bg-[#0F172A] text-white">
-        <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-6 py-6 text-[13px] lg:flex-row lg:items-center lg:justify-between lg:px-8">
-          <Logo white={true} />
-          <div className="text-center text-white/40">
-            © 2026 Slash.sa. جميع الحقوق محفوظة.
-          </div>
-          <div className="flex items-center gap-4 text-white/40">
-            الخصوصية · الشروط · الحالة
-          </div>
-        </div>
-      </footer>
-    </main>
-  );
-}
+export default function RootPage() {
+  return <HomePage />;
+}

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 (
+    <main className="min-h-screen bg-[#ECEEF2] text-slate-900" dir="rtl">
+      <Navbar />
+
+      <section className="bg-[linear-gradient(145deg,#0D47A1_0%,#1A73E8_45%,#1565C0_100%)] text-white">
+        <div className="mx-auto max-w-7xl px-6 py-14 text-center lg:px-8">
+          <p className="text-[11px] uppercase tracking-[0.35em] text-white/60">
+            الأسعار
+          </p>
+          <h1 className="mx-auto mt-3 max-w-2xl text-[30px] font-extrabold leading-tight lg:text-[36px]">
+            خطط تناسب حجم أسطولك
+          </h1>
+          <p className="mx-auto mt-3 max-w-2xl text-[14px] leading-7 text-white/75">
+            جميع الأسعار بالريال السعودي وغير شاملة ضريبة القيمة المضافة. يمكنك
+            تغيير خطتك أو إلغاؤها في أي وقت.
+          </p>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-7xl px-6 py-14 lg:px-8">
+        <div className="grid gap-6 md:grid-cols-3">
+          {plans.map((plan) => (
+            <article
+              key={plan.name}
+              className={`flex flex-col rounded-3xl border p-7 shadow-sm ${
+                plan.highlighted
+                  ? "border-blue-600 bg-white ring-2 ring-blue-600"
+                  : "border-slate-200 bg-white"
+              }`}
+            >
+              {plan.highlighted && (
+                <span className="mb-4 inline-flex w-fit rounded-full bg-blue-600 px-3 py-1 text-[11px] font-bold text-white">
+                  الأكثر طلبًا
+                </span>
+              )}
+              <h3 className="text-[18px] font-extrabold text-slate-900">
+                {plan.name}
+              </h3>
+              <p className="mt-2 text-[13px] leading-6 text-slate-500">
+                {plan.description}
+              </p>
+              <div className="mt-5 flex items-end gap-1">
+                <span className="text-[32px] font-extrabold text-slate-900">
+                  {plan.price}
+                </span>
+                {plan.period && (
+                  <span className="pb-1.5 text-[13px] text-slate-500">
+                    ر.س / {plan.period}
+                  </span>
+                )}
+              </div>
+              <ul className="mt-6 flex-1 space-y-3 text-[13px] text-slate-700">
+                {plan.features.map((f) => (
+                  <li key={f} className="flex items-start gap-2">
+                    <Check className="mt-0.5 h-4 w-4 flex-shrink-0 text-emerald-600" strokeWidth={2.5} />
+                    <span>{f}</span>
+                  </li>
+                ))}
+              </ul>
+              <Link
+                href={plan.name === "مؤسسات" ? "/frequently_asked_questions" : "/login"}
+                className={`mt-7 inline-flex h-11 items-center justify-center rounded-xl px-5 text-[13px] font-semibold ${
+                  plan.highlighted
+                    ? "bg-blue-600 text-white hover:bg-blue-700"
+                    : "border border-slate-200 text-slate-700 hover:bg-slate-50"
+                }`}
+              >
+                {plan.name === "مؤسسات" ? "تواصل مع المبيعات" : "ابدأ الآن"}
+              </Link>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <footer className="bg-[#0F172A] text-white">
+        <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-6 py-6 text-[13px] lg:flex-row lg:items-center lg:justify-between lg:px-8">
+          <Logo white={true} />
+          <div className="text-center text-white/40">
+            © 2026 Slash.sa. جميع الحقوق محفوظة.
+          </div>
+        </div>
+      </footer>
+    </main>
+  );
+}