diff --git a/src/app/appointments/page.tsx b/src/app/appointments/page.tsx
index b67c31e..1d5c084 100644
--- a/src/app/appointments/page.tsx
+++ b/src/app/appointments/page.tsx
@@ -1,15 +1,42 @@
 "use client";
 
+import { useState } from 'react';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
-import FooterBase from '@/components/sections/footer/FooterBase';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import { Clock, Globe, Lock, Server, Shield } from "lucide-react";
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import ButtonTextStagger from '@/components/button/ButtonTextStagger/ButtonTextStagger';
+import Textarea from '@/components/form/Textarea';
+import { CalendarDays, Clock, User, Mail, Phone, MessageSquare } from 'lucide-react';
+
+export default function AppointmentsPage() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    date: '',
+    time: '',
+    message: ''
+  });
+  const [bookingConfirmed, setBookingConfirmed] = useState(false);
+  const [bookingNumber, setBookingNumber] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Simulate booking confirmation
+    const uniqueNum = 'BOOK-' + Math.random().toString(36).substr(2, 9).toUpperCase();
+    setBookingNumber(uniqueNum);
+    setBookingConfirmed(true);
+    // In a real application, you'd send this data to a backend
+    console.log('Booking data:', formData);
+    console.log('Sending SMS/WhatsApp notification to +212 662-862436 for booking:', uniqueNum);
+  };
 
-export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -24,218 +51,159 @@ export default function LandingPage() {
         headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "الرئيسية",
-          id: "hero",
-        },
-        {
-          name: "عنّا",
-          id: "about",
-        },
-        {
-          name: "خدماتنا",
-          id: "features",
-        },
-        {
-          name: "تواصل معنا",
-          id: "contact",
-        },
-        {
-          name: "حجز موعد",
-          href: "/appointments",
-          id: "5",
-        },
-      ]}
-      brandName="Complexe Éducatif Lixus"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarStyleApple
+            navItems={[
+              {
+                name: "الرئيسية",                id: "hero"},
+              {
+                name: "عنّا",                id: "about"},
+              {
+                name: "خدماتنا",                id: "features"},
+              {
+                name: "تواصل معنا",                id: "contact"},
+              {
+                name: "حجز موعد",                href: "/appointments",                id: "5"},
+            ]}
+            brandName="Complexe Éducatif Lixus"
+          />
+        </div>
 
-  <div id="booking-process" data-section="booking-process">
-      <FaqSplitMedia
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "1",
-          title: "كيف أحجز موعداً؟",
-          content: "يمكنك حجز موعد عن طريق اختيار الخدمة، ثم اختيار التاريخ والوقت المتاحين، وتأكيد الحجز.",
-        },
-        {
-          id: "2",
-          title: "هل يمكنني إلغاء أو تعديل موعد؟",
-          content: "نعم، يمكنك إدارة مواعيدك المحجوزة من خلال لوحة التحكم الخاصة بك.",
-        },
-        {
-          id: "3",
-          title: "ما هي اللغات المدعومة؟",
-          content: "يدعم نظامنا عدة لغات لضمان تجربة سلسة للجميع.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/smartphone-with-notebook-coffee-table_23-2148036911.jpg?_wi=2"
-      imageAlt="online calendar appointment booking interface"
-      mediaPosition="right"
-      title="عملية حجز المواعيد المبسّطة"
-      description="نظامنا سهل الاستخدام يجعل حجز المواعيد مع المعلمين والإدارة أمراً يسيراً. اتبع الخطوات التالية لحجز موعدك."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <main className="min-h-screen flex flex-col items-center justify-center py-16 px-4 bg-background-accent">
+          <div className="max-w-4xl w-full bg-card rounded-lg shadow-xl p-8 space-y-8">
+            <h1 className="text-4xl font-bold text-foreground text-center">حجز موعد</h1>
+            {bookingConfirmed ? (
+              <div className="text-center space-y-4">
+                <p className="text-xl text-foreground">تم تأكيد موعدكم بنجاح!</p>
+                <p className="text-lg text-primary-cta">رقم الحجز الخاص بكم: <span className="font-semibold">{bookingNumber}</span></p>
+                <p className="text-muted-foreground">سيتم إرسال تأكيد إلى بريدكم الإلكتروني ورسالة عبر SMS/WhatsApp إلى رقم الهاتف المقدم.</p>
+                <p className="text-sm text-gray-500">نحن بانتظاركم في Complexe Éducatif Lixus.</p>
+                <ButtonTextStagger text="العودة للصفحة الرئيسية" href="/" className="mt-6" />
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label htmlFor="name" className="block text-sm font-medium text-foreground mb-2">الاسم الكامل</label>
+                    <div className="relative">
+                      <User className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} />
+                      <input
+                        type="text"
+                        id="name"
+                        name="name"
+                        value={formData.name}
+                        onChange={handleChange}
+                        placeholder="اسمك"
+                        required
+                        className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta bg-background text-foreground"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">البريد الإلكتروني</label>
+                    <div className="relative">
+                      <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} />
+                      <input
+                        type="email"
+                        id="email"
+                        name="email"
+                        value={formData.email}
+                        onChange={handleChange}
+                        placeholder="بريدك الإلكتروني"
+                        required
+                        className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta bg-background text-foreground"
+                      />
+                    </div>
+                  </div>
+                </div>
 
-  <div id="booking-features" data-section="booking-features">
-      <FeatureCardTen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          id: "1",
-          title: "سهولة الاستخدام",
-          description: "واجهة بديهية لتبسيط عملية الحجز.",
-          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/portrait-girl-with-rucksack-school-corridor_329181-14299.jpg?_wi=2",
-            imageAlt: "Easy-to-use interface",
-          },
-          items: [
-            {
-              icon: Cursor,
-              text: "نقرة واحدة للحجز",
-            },
-            {
-              icon: CalendarCheck,
-              text: "تأكيد فوري",
-            },
-            {
-              icon: Clock,
-              text: "توفير الوقت",
-            },
-          ],
-          reverse: false,
-        },
-        {
-          id: "2",
-          title: "دعم متعدد اللغات",
-          description: "نظامنا متاح بلغات متعددة لخدمة جمهور أوسع.",
-          media: {
-            imageSrc: "http://img.b2bpic.net/free-vector/language-concept-background_23-2147865025.jpg?_wi=2",
-            imageAlt: "Multi-language support icon",
-          },
-          items: [
-            {
-              icon: Globe,
-              text: "اللغة العربية",
-            },
-            {
-              icon: MessagesSquare,
-              text: "اللغة الفرنسية",
-            },
-            {
-              icon: Languages,
-              text: "المزيد قريباً",
-            },
-          ],
-          reverse: true,
-        },
-        {
-          id: "3",
-          title: "أمان وخصوصية البيانات",
-          description: "نضمن حماية بياناتك ومعلوماتك الشخصية بأعلى معايير الأمان.",
-          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/army-espionage-specialist-control-center-collecting-satellite-cctv-data_482257-94930.jpg?_wi=2",
-            imageAlt: "Data protection and privacy padlock",
-          },
-          items: [
-            {
-              icon: Lock,
-              text: "تشفير كامل",
-            },
-            {
-              icon: Shield,
-              text: "حماية الخصوصية",
-            },
-            {
-              icon: Server,
-              text: "خوادم آمنة",
-            },
-          ],
-          reverse: false,
-        },
-      ]}
-      title="ميزات نظام حجز المواعيد لدينا"
-      description="صُمم ليوفر لك أقصى درجات الراحة والمرونة في إدارة مواعيدك التعليمية."
-    />
-  </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label htmlFor="phone" className="block text-sm font-medium text-foreground mb-2">رقم الهاتف</label>
+                    <div className="relative">
+                      <Phone className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} />
+                      <input
+                        type="tel"
+                        id="phone"
+                        name="phone"
+                        value={formData.phone}
+                        onChange={handleChange}
+                        placeholder="رقم هاتفك (+212...)"
+                        pattern="\+212[0-9]{9}"
+                        title="Please enter a Moroccan phone number starting with +212"
+                        required
+                        className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta bg-background text-foreground"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <label htmlFor="date" className="block text-sm font-medium text-foreground mb-2">تاريخ الموعد</label>
+                    <div className="relative">
+                      <CalendarDays className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} />
+                      <input
+                        type="date"
+                        id="date"
+                        name="date"
+                        value={formData.date}
+                        onChange={handleChange}
+                        required
+                        className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta bg-background text-foreground"
+                      />
+                    </div>
+                  </div>
+                </div>
 
-  <div id="book-now-cta" data-section="book-now-cta">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      tag="لا تتردد!"
-      title="احجز موعدك اليوم"
-      description="ابدأ بتجربة تعليمية منظمة ومريحة لأبنائك. نظامنا مصمم لراحتك."
-      buttons={[
-        {
-          text: "احجز موعد الآن",
-          href: "/appointments",
-        },
-      ]}
-    />
-  </div>
+                <div>
+                  <label htmlFor="time" className="block text-sm font-medium text-foreground mb-2">وقت الموعد المفضل</label>
+                  <div className="relative">
+                    <Clock className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} />
+                    <input
+                      type="time"
+                      id="time"
+                      name="time"
+                      value={formData.time}
+                      onChange={handleChange}
+                      required
+                      className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta bg-background text-foreground"
+                    />
+                  </div>
+                </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "خدماتنا",
-          items: [
-            {
-              label: "حجز المواعيد",
-              href: "/appointments",
-            },
-            {
-              label: "تتبع المواعيد",
-              href: "/tracking",
-            },
-            {
-              label: "لوحة الإدارة",
-              href: "/admin",
-            },
-          ],
-        },
-        {
-          title: "المدرسة",
-          items: [
-            {
-              label: "عنّا",
-              href: "/about",
-            },
-            {
-              label: "اتصل بنا",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          title: "الدعم",
-          items: [
-            {
-              label: "الأسئلة الشائعة",
-              href: "/faq",
-            },
-            {
-              label: "المساعدة",
-              href: "/help",
-            },
-          ],
-        },
-      ]}
-      logoText="Complexe Éducatif Lixus"
-      copyrightText="© 2024 Complexe Éducatif Lixus. جميع الحقوق محفوظة."
-    />
-  </div>
+                <div>
+                  <label htmlFor="message" className="block text-sm font-medium text-foreground mb-2">رسالة إضافية (اختياري)</label>
+                  <div className="relative">
+                     <MessageSquare className="absolute left-3 top-3 text-muted-foreground" size={20} />
+                      <Textarea
+                        id="message"
+                        name="message"
+                        value={formData.message}
+                        onChange={val => setFormData(prev => ({ ...prev, message: val }))}
+                        placeholder="اكتب رسالتك هنا..."
+                        rows={4}
+                        className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta bg-background text-foreground"
+                      />
+                  </div>
+                </div>
+
+                <ButtonTextStagger
+                  text="تأكيد الحجز"
+                  type="submit"
+                  className="w-full bg-primary-cta hover:bg-primary-cta/90 text-primary-cta-foreground py-3 rounded-md font-semibold text-lg"
+                />
+              </form>
+            )}
+          </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+            <FooterLogoReveal
+            logoText="Complexe Éducatif Lixus"
+            leftLink={{
+              text: "سياسة الخصوصية",              href: "/privacy"}}
+            rightLink={{
+              text: "شروط الاستخدام",              href: "/terms"}}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 93e018b..2511f5c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -30,26 +30,17 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "الرئيسية",
-          id: "hero",
-        },
+          name: "الرئيسية",          id: "hero"},
         {
-          name: "عنّا",
-          id: "about",
-        },
+          name: "عنّا",          id: "about"},
         {
-          name: "خدماتنا",
-          id: "features",
-        },
+          name: "خدماتنا",          id: "features"},
         {
-          name: "تواصل معنا",
-          id: "contact",
-        },
+          name: "تواصل معنا",          id: "contact"},
         {
-          name: "حجز موعد",
-          href: "/appointments",
-          id: "5",
-        },
+          name: "حجز موعد",          href: "/appointments",          id: "5"},
+        {
+          name: "تتبع الموعد",          href: "/tracking",          id: "tracking"},
       ]}
       brandName="Complexe Éducatif Lixus"
     />
@@ -58,32 +49,23 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroSplitDualMedia
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       title="مستقبل أبنائكم يبدأ من هنا"
       description="مؤسسة تعليمية رائدة تقدم تعليماً شاملاً ومتوازناً، مع التركيز على التميز الأكاديمي والتنمية الشخصية. انضموا إلينا لبيئة تعليمية محفزة."
       tag="مرحباً بكم في Complexe Éducatif Lixus"
       tagAnimation="slide-up"
       buttons={[
         {
-          text: "اكتشف المزيد",
-          href: "#about",
-        },
+          text: "اكتشف المزيد",          href: "#about"},
         {
-          text: "سجل الآن",
-          href: "/appointments",
-        },
+          text: "سجل الآن",          href: "/appointments"},
       ]}
       buttonAnimation="slide-up"
       mediaItems={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/colleagues-studying-university-library_23-2148844693.jpg?_wi=1",
-          imageAlt: "Students collaborating in a bright classroom",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/colleagues-studying-university-library_23-2148844693.jpg?_wi=1",          imageAlt: "Students collaborating in a bright classroom"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-girl-with-rucksack-school-corridor_329181-14299.jpg?_wi=1",
-          imageAlt: "Diverse students in a modern school setting",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-girl-with-rucksack-school-corridor_329181-14299.jpg?_wi=1",          imageAlt: "Diverse students in a modern school setting"},
       ]}
       mediaAnimation="slide-up"
       rating={5}
@@ -109,40 +91,16 @@ export default function LandingPage() {
       features={[
         {
           id: 1,
-          tag: "مواعيد مرنة",
-          title: "نظام حجز المواعيد الإلكتروني",
-          subtitle: "حجز سهل وسريع",
-          description: "يمكن لأولياء الأمور حجز المواعيد بسهولة ومرونة لتحديد لقاءات مع الإدارة أو المعلمين، مع تحديد التاريخ والوقت المناسبين لهم.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-notebook-coffee-table_23-2148036911.jpg?_wi=1",
-          imageAlt: "Online appointment booking interface",
-        },
+          tag: "مواعيد مرنة",          title: "نظام حجز المواعيد الإلكتروني",          subtitle: "حجز سهل وسريع",          description: "يمكن لأولياء الأمور حجز المواعيد بسهولة ومرونة لتحديد لقاءات مع الإدارة أو المعلمين، مع تحديد التاريخ والوقت المناسبين لهم.",          imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-notebook-coffee-table_23-2148036911.jpg?_wi=1",          imageAlt: "Online appointment booking interface"},
         {
           id: 2,
-          tag: "لغات متعددة",
-          title: "دعم متعدد اللغات",
-          subtitle: "عربي وفرنسي",
-          description: "الموقع يدعم اللغتين العربية والفرنسية لضمان سهولة الوصول والفهم لجميع زوارنا، مع زر لتغيير اللغة بسهولة.",
-          imageSrc: "http://img.b2bpic.net/free-vector/language-concept-background_23-2147865025.jpg?_wi=1",
-          imageAlt: "Multi-language interface with Arabic and French flags",
-        },
+          tag: "لغات متعددة",          title: "دعم متعدد اللغات",          subtitle: "عربي وفرنسي",          description: "الموقع يدعم اللغتين العربية والفرنسية لضمان سهولة الوصول والفهم لجميع زوارنا، مع زر لتغيير اللغة بسهولة.",          imageSrc: "http://img.b2bpic.net/free-vector/language-concept-background_23-2147865025.jpg?_wi=1",          imageAlt: "Multi-language interface with Arabic and French flags"},
         {
           id: 3,
-          tag: "أمان البيانات",
-          title: "أمان وحماية فائقة",
-          subtitle: "بياناتكم في أمان",
-          description: "نضمن أمان بياناتكم وخصوصيتكم من خلال أحدث تقنيات التشفير والحماية ضد الهجمات الإلكترونية، بما في ذلك HTTPS، SQL Injection، XSS، و CSRF.",
-          imageSrc: "http://img.b2bpic.net/free-photo/army-espionage-specialist-control-center-collecting-satellite-cctv-data_482257-94930.jpg?_wi=1",
-          imageAlt: "Cybersecurity padlock and digital shield",
-        },
+          tag: "أمان البيانات",          title: "أمان وحماية فائقة",          subtitle: "بياناتكم في أمان",          description: "نضمن أمان بياناتكم وخصوصيتكم من خلال أحدث تقنيات التشفير والحماية ضد الهجمات الإلكترونية، بما في ذلك HTTPS، SQL Injection، XSS، و CSRF.",          imageSrc: "http://img.b2bpic.net/free-photo/army-espionage-specialist-control-center-collecting-satellite-cctv-data_482257-94930.jpg?_wi=1",          imageAlt: "Cybersecurity padlock and digital shield"},
         {
           id: 4,
-          tag: "إدارة سهلة",
-          title: "إدارة وتتبع المواعيد",
-          subtitle: "بوابة إدارية وتتبع خاص",
-          description: "لوحة تحكم إدارية شاملة لمراجعة المواعيد وتأكيدها وتعديلها أو حذفها، مع بوابة تتبع خاصة لأولياء الأمور باستخدام رقم الموعد.",
-          imageSrc: "http://img.b2bpic.net/free-vector/medical-booking-application-interface_23-2148569125.jpg?_wi=1",
-          imageAlt: "Admin dashboard for appointment management and tracking",
-        },
+          tag: "إدارة سهلة",          title: "إدارة وتتبع المواعيد",          subtitle: "بوابة إدارية وتتبع خاص",          description: "لوحة تحكم إدارية شاملة لمراجعة المواعيد وتأكيدها وتعديلها أو حذفها، مع بوابة تتبع خاصة لأولياء الأمور باستخدام رقم الموعد.",          imageSrc: "http://img.b2bpic.net/free-vector/medical-booking-application-interface_23-2148569125.jpg?_wi=1",          imageAlt: "Admin dashboard for appointment management and tracking"},
       ]}
       title="خدماتنا المتميزة"
       description="نقدم مجموعة من الخدمات التي تضمن تجربة تعليمية وإدارية سلسة لأولياء الأمور والطلاب."
@@ -157,41 +115,17 @@ export default function LandingPage() {
       carouselMode="buttons"
       testimonials={[
         {
-          id: "1",
-          name: "فاطمة الزهراء",
-          handle: "@ParentFZ",
-          testimonial: "أشكر Complexe Éducatif Lixus على الاهتمام الرائع الذي يقدمونه لابني. لقد تطور مستواه بشكل ملحوظ وأصبح يحب الذهاب إلى المدرسة.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/psychologist-helping-little-girl-speech-therapy-indoors_23-2149113830.jpg",
-          imageAlt: "Fatima Zahra, satisfied parent",
-        },
+          id: "1",          name: "فاطمة الزهراء",          handle: "@ParentFZ",          testimonial: "أشكر Complexe Éducatif Lixus على الاهتمام الرائع الذي يقدمونه لابني. لقد تطور مستواه بشكل ملحوظ وأصبح يحب الذهاب إلى المدرسة.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/psychologist-helping-little-girl-speech-therapy-indoors_23-2149113830.jpg",          imageAlt: "Fatima Zahra, satisfied parent"},
         {
-          id: "2",
-          name: "أحمد السعيد",
-          handle: "@AhmedElsaid",
-          testimonial: "نظام حجز المواعيد على الموقع سهل جداً وفعال. تمكنت من التواصل مع الإدارة بسهولة وسرعة، وهذا يوفر الكثير من الوقت والجهد.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/parents-spending-time-with-their-little-daughter-home_23-2149022810.jpg",
-          imageAlt: "Ahmed Elsaid, happy father",
-        },
+          id: "2",          name: "أحمد السعيد",          handle: "@AhmedElsaid",          testimonial: "نظام حجز المواعيد على الموقع سهل جداً وفعال. تمكنت من التواصل مع الإدارة بسهولة وسرعة، وهذا يوفر الكثير من الوقت والجهد.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/parents-spending-time-with-their-little-daughter-home_23-2149022810.jpg",          imageAlt: "Ahmed Elsaid, happy father"},
         {
-          id: "3",
-          name: "مريم العلوي",
-          handle: "@MariamAlawi",
-          testimonial: "الأمان في الموقع ممتاز جداً، أشعر بالراحة تجاه حماية بياناتي ومعلومات أبنائي. هذا يمنحني ثقة كبيرة في المؤسسة.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-standing-white-isolated-background-winking-looking-camera-with-sexy-expression-cheerful-happy-face_839833-19863.jpg",
-          imageAlt: "Mariam Alawi, parent",
-        },
+          id: "3",          name: "مريم العلوي",          handle: "@MariamAlawi",          testimonial: "الأمان في الموقع ممتاز جداً، أشعر بالراحة تجاه حماية بياناتي ومعلومات أبنائي. هذا يمنحني ثقة كبيرة في المؤسسة.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-standing-white-isolated-background-winking-looking-camera-with-sexy-expression-cheerful-happy-face_839833-19863.jpg",          imageAlt: "Mariam Alawi, parent"},
         {
-          id: "4",
-          name: "يوسف العمراني",
-          handle: "@YoussefAmrani",
-          testimonial: "تعدد اللغات في الموقع ميزة رائعة. أنا أقدر أنني أستطيع تصفح الموقع بالفرنسية أو العربية بكل سهولة ويسر.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-father-with-baby-outdoors_23-2148812311.jpg",
-          imageAlt: "Youssef Amrani, father",
-        },
+          id: "4",          name: "يوسف العمراني",          handle: "@YoussefAmrani",          testimonial: "تعدد اللغات في الموقع ميزة رائعة. أنا أقدر أنني أستطيع تصفح الموقع بالفرنسية أو العربية بكل سهولة ويسر.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/happy-father-with-baby-outdoors_23-2148812311.jpg",          imageAlt: "Youssef Amrani, father"},
       ]}
       showRating={true}
       title="ماذا يقول أولياء الأمور عنا؟"
@@ -205,20 +139,11 @@ export default function LandingPage() {
       useInvertedBackground={true}
       faqs={[
         {
-          id: "1",
-          title: "كيف يمكنني حجز موعد عبر الموقع؟",
-          content: "يمكنكم حجز موعد بسهولة عبر زيارة قسم 'حجز المواعيد' على الموقع، ثم اختيار التاريخ والوقت المتاحين والذين يناسبونكم. سيتم تزويدكم برقم تعريف خاص بالموعد.",
-        },
+          id: "1",          title: "كيف يمكنني حجز موعد عبر الموقع؟",          content: "يمكنكم حجز موعد بسهولة عبر زيارة قسم 'حجز المواعيد' على الموقع، ثم اختيار التاريخ والوقت المتاحين والذين يناسبونكم. سيتم تزويدكم برقم تعريف خاص بالموعد."},
         {
-          id: "2",
-          title: "ما هي اللغات المدعومة في الموقع؟",
-          content: "الموقع يدعم اللغتين العربية والفرنسية بشكل كامل. يمكنكم التبديل بين اللغتين في أي وقت باستخدام زر تغيير اللغة الموجود في أعلى الصفحة.",
-        },
+          id: "2",          title: "ما هي اللغات المدعومة في الموقع؟",          content: "الموقع يدعم اللغتين العربية والفرنسية بشكل كامل. يمكنكم التبديل بين اللغتين في أي وقت باستخدام زر تغيير اللغة الموجود في أعلى الصفحة."},
         {
-          id: "3",
-          title: "كيف يمكنني تتبع حالة الموعد الذي حجزته؟",
-          content: "بعد حجز الموعد، ستتلقون رقم تعريف خاص (ID). يمكنكم استخدام هذا الرقم في بوابة 'تتبع المواعيد' للمعاينة الفورية لحالة موعدكم.",
-        },
+          id: "3",          title: "كيف يمكنني تتبع حالة الموعد الذي حجزته؟",          content: "بعد حجز الموعد، ستتلقون رقم تعريف خاص (ID). يمكنكم استخدام هذا الرقم في بوابة 'تتبع المواعيد' للمعاينة الفورية لحالة موعدكم."},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/millennial-employee-stretching-taking-break-from-computer-work-relaxation_1163-4104.jpg"
       imageAlt="Students asking questions in a classroom setting"
@@ -234,17 +159,13 @@ export default function LandingPage() {
       <ContactText
       useInvertedBackground={false}
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       text="لمزيد من المعلومات أو لأي استفسارات، لا تترددوا في الاتصال بنا. فريق Complexe Éducatif Lixus هنا لمساعدتكم وتقديم الدعم اللازم."
       buttons={[
         {
-          text: "إرسال رسالة",
-        },
+          text: "إرسال رسالة"},
         {
-          text: "اتصل بنا: 0539 52 13 33",
-          href: "tel:+212539521333",
-        },
+          text: "اتصل بنا: 0539 52 13 33",          href: "tel:+212539521333"},
       ]}
     />
   </div>
@@ -253,13 +174,9 @@ export default function LandingPage() {
       <FooterLogoReveal
       logoText="Complexe Éducatif Lixus"
       leftLink={{
-        text: "سياسة الخصوصية",
-        href: "/privacy",
-      }}
+        text: "سياسة الخصوصية",        href: "/privacy"}}
       rightLink={{
-        text: "شروط الاستخدام",
-        href: "/terms",
-      }}
+        text: "شروط الاستخدام",        href: "/terms"}}
     />
   </div>
       </ReactLenis>
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index 609d76f..b18d56d 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #FFFFFF;
-  --card: #F8F8F8;
-  --foreground: #2C2C2C;
-  --primary-cta: #900020;
-  --primary-cta-text: #FFFFFF;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #2c2c2c;
+  --primary-cta: #E0115F;
+  --primary-cta-text: #ffffff;
   --secondary-cta: #0B4A23;
-  --secondary-cta-text: #FFFFFF;
-  --accent: #E0E0E0;
-  --background-accent: #F0F0F0;
+  --secondary-cta-text: #ffffff;
+  --accent: #e2e2e2;
+  --background-accent: #f0f0f0;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
diff --git a/src/app/tracking/page.tsx b/src/app/tracking/page.tsx
index 7a688a5..641fd2b 100644
--- a/src/app/tracking/page.tsx
+++ b/src/app/tracking/page.tsx
@@ -1,200 +1,154 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import React, { useState, useCallback } from "react";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
-import FooterBase from '@/components/sections/footer/FooterBase';
-import MediaAbout from '@/components/sections/about/MediaAbout';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Search } from "lucide-react";
+
+const mockAppointmentData: { [key: string]: string } = {
+  "12345": "Confirmed - Your appointment is scheduled for 2024-10-26 at 10:00 AM.",  "67890": "Pending - Your request is being reviewed. Please check back later.",  "11223": "Cancelled - Your appointment was cancelled. Please re-book if needed."};
+
+export default function TrackingPage() {
+  const [appointmentNumber, setAppointmentNumber] = useState("");
+  const [appointmentStatus, setAppointmentStatus] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleTrackAppointment = useCallback(() => {
+    setError(null);
+    setAppointmentStatus(null);
+
+    if (!appointmentNumber.trim()) {
+      setError("Please enter an appointment number.");
+      return;
+    }
+
+    const status = mockAppointmentData[appointmentNumber.trim()];
+    if (status) {
+      setAppointmentStatus(status);
+    } else {
+      setAppointmentStatus("Appointment not found. Please check the number and try again.");
+    }
+  }, [appointmentNumber]);
 
-export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="background-highlight"
-        borderRadius="rounded"
-        contentWidth="compact"
-        sizing="mediumLargeSizeLargeTitles"
-        background="blurBottom"
-        cardStyle="gradient-bordered"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="layered"
-        headingFontWeight="semibold"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "الرئيسية",
-          id: "hero",
-        },
-        {
-          name: "عنّا",
-          id: "about",
-        },
-        {
-          name: "خدماتنا",
-          id: "features",
-        },
-        {
-          name: "تواصل معنا",
-          id: "contact",
-        },
-        {
-          name: "حجز موعد",
-          href: "/appointments",
-          id: "5",
-        },
-      ]}
-      brandName="Complexe Éducatif Lixus"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              {
+                name: "الرئيسية",                id: "hero"},
+              {
+                name: "عنّا",                id: "about"},
+              {
+                name: "خدماتنا",                id: "features"},
+              {
+                name: "تواصل معنا",                id: "contact"},
+              {
+                name: "حجز موعد",                href: "/appointments",                id: "5"},
+              {
+                name: "تتبع الموعد",                href: "/tracking",                id: "tracking"},
+            ]}
+            brandName="Complexe Éducatif Lixus"
+          />
+        </div>
 
-  <div id="tracking-intro" data-section="tracking-intro">
-      <MediaAbout
-      useInvertedBackground={false}
-      title="تتبع مواعيد أبنائك بسهولة ويسر"
-      description="مع نظام تتبع المواعيد الخاص بنا، كن على اطلاع دائم بجدول أبنائك ومواعيدهم التعليمية بضغطة زر."
-      imageSrc="http://img.b2bpic.net/free-photo/colleagues-studying-university-library_23-2148844693.jpg?_wi=2"
-      imageAlt="happy diverse students classroom"
-    />
-  </div>
+        <main className="flex min-h-[calc(100vh-var(--navbar-height)-var(--footer-height))] flex-col items-center justify-center p-8 text-center">
+          <div className="w-full max-w-md rounded-lg p-6 shadow-lg sm:p-8"
+               style={{
+                 background: 'var(--card)',
+                 borderColor: 'var(--primary-cta)',
+                 borderWidth: '1px',
+                 borderStyle: 'solid',
+               }}
+          >
+            <h1 className="mb-6 text-3xl font-bold md:text-4xl"
+                style={{ color: 'var(--foreground)' }}
+            >
+              تتبع حالة موعدك
+            </h1>
+            <p className="mb-8 text-lg"
+                style={{ color: 'var(--foreground)' }}
+            >
+              أدخل رقم الموعد الخاص بك لمعرفة حالته.
+            </p>
+            <div className="flex flex-col gap-4 sm:flex-row">
+              <input
+                type="text"
+                value={appointmentNumber}
+                onChange={(e) => setAppointmentNumber(e.target.value)}
+                placeholder="أدخل رقم الموعد"
+                className="flex-grow rounded-md border p-3 text-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                style={{
+                  borderColor: 'var(--accent)',
+                  background: 'var(--background-accent)',
+                  color: 'var(--foreground)',
+                  '::placeholder': { color: 'var(--foreground)' } // This won't work in inline style but sets intention
+                }}
+                aria-label="Appointment Number Input"
+              />
+              <button
+                onClick={handleTrackAppointment}
+                className="flex items-center justify-center gap-2 rounded-md p-3 text-lg font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                style={{
+                  background: 'var(--primary-cta)',
+                  color: 'var(--background)',
+                }}
+                aria-label="Track Appointment Button"
+              >
+                <Search size={20} />
+                تتبع
+              </button>
+            </div>
 
-  <div id="tracking-steps" data-section="tracking-steps">
-      <FeatureCardEight
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          id: 1,
-          title: "تسجيل الدخول",
-          description: "ادخل إلى حسابك الخاص على منصة Complexe Éducatif Lixus.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-notebook-coffee-table_23-2148036911.jpg?_wi=3",
-          imageAlt: "Login screen",
-        },
-        {
-          id: 2,
-          title: "اذهب إلى 'مواعيدي'",
-          description: "في لوحة التحكم، ابحث عن قسم 'مواعيدي' أو 'تتبع المواعيد'.",
-          imageSrc: "http://img.b2bpic.net/free-vector/medical-booking-application-interface_23-2148569125.jpg?_wi=4",
-          imageAlt: "Dashboard with appointments list",
-        },
-        {
-          id: 3,
-          title: "عرض التفاصيل",
-          description: "اضغط على الموعد المطلوب لترى تفاصيله وحالته الحالية.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-notebook-coffee-table_23-2148036911.jpg?_wi=4",
-          imageAlt: "Appointment detail screen",
-        },
-      ]}
-      title="كيف يعمل تتبع المواعيد؟"
-      description="من لوحة التحكم الخاصة بك، يمكنك بسهولة متابعة حالة كل موعد ومراحل تقدمه."
-    />
-  </div>
+            {error && <p className="mt-4 text-red-500">{error}</p>}
 
-  <div id="tracking-faqs" data-section="tracking-faqs">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "1",
-          title: "متى يتم تحديث حالة الموعد؟",
-          content: "تُحدّث حالات المواعيد فورياً عند أي تغيير يقوم به المعلم أو الإدارة.",
-        },
-        {
-          id: "2",
-          title: "هل يمكنني تتبع المواعيد القديمة؟",
-          content: "نعم، يمكنك الوصول إلى سجل كامل لمواعيدك السابقة لمراجعتها.",
-        },
-        {
-          id: "3",
-          title: "ماذا لو لم أجد موعدي؟",
-          content: "تأكد من استخدام نفس الحساب الذي حجزت به الموعد، أو تواصل مع الدعم الفني للمساعدة.",
-        },
-      ]}
-      title="الأسئلة الشائعة حول تتبع المواعيد"
-      description="ابحث عن إجابات لأسئلتك الأكثر شيوعاً حول كيفية استخدام نظام تتبع المواعيد."
-      faqsAnimation="slide-up"
-    />
-  </div>
+            {appointmentStatus && (
+              <div className="mt-8 rounded-md p-4"
+                   style={{
+                     background: 'var(--background-accent)',
+                     borderColor: 'var(--accent)',
+                     borderWidth: '1px',
+                     borderStyle: 'solid',
+                   }}
+              >
+                <h2 className="mb-2 text-xl font-semibold"
+                    style={{ color: 'var(--foreground)' }}
+                >
+                  حالة الموعد:
+                </h2>
+                <p className="text-lg"
+                    style={{ color: 'var(--foreground)' }}
+                >
+                  {appointmentStatus}
+                </p>
+              </div>
+            )}
+          </div>
+        </main>
 
-  <div id="contact-support" data-section="contact-support">
-      <ContactCTA
-      useInvertedBackground={true}
-      background={{
-        variant: "gradient-bars",
-      }}
-      tag="تحتاج إلى مساعدة؟"
-      title="تواصل مع فريق الدعم لدينا"
-      description="إذا واجهتك أي مشكلة في تتبع مواعيدك أو لديك استفسارات، فلا تتردد في الاتصال بنا."
-      buttons={[
-        {
-          text: "تحدث إلينا",
-          href: "/contact",
-        },
-        {
-          text: "أرسل بريداً إلكترونياً",
-          href: "mailto:support@complexelixus.com",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "خدماتنا",
-          items: [
-            {
-              label: "حجز المواعيد",
-              href: "/appointments",
-            },
-            {
-              label: "تتبع المواعيد",
-              href: "/tracking",
-            },
-            {
-              label: "لوحة الإدارة",
-              href: "/admin",
-            },
-          ],
-        },
-        {
-          title: "المدرسة",
-          items: [
-            {
-              label: "عنّا",
-              href: "/about",
-            },
-            {
-              label: "اتصل بنا",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          title: "الدعم",
-          items: [
-            {
-              label: "الأسئلة الشائعة",
-              href: "/faq",
-            },
-            {
-              label: "المساعدة",
-              href: "/help",
-            },
-          ],
-        },
-      ]}
-      logoText="Complexe Éducatif Lixus"
-      copyrightText="© 2024 Complexe Éducatif Lixus. جميع الحقوق محفوظة."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Complexe Éducatif Lixus"
+            leftLink={{
+              text: "سياسة الخصوصية",              href: "/privacy"}}
+            rightLink={{
+              text: "شروط الاستخدام",              href: "/terms"}}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );