src/app/contact/page.tsx

@@ -4,24 +4,22 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import Link from "next/link";
 
-// No 'contact' section component found in the provided registry. The page will render Navbar and Footer only.
-
 export default function ContactPage() {
   const navItems = [
-    { href: "/", label: "الرئيسية" },
-    { href: "/learn", label: "ابدأ التعلم" },
-    { href: "/training", label: "التدريب" },
-    { href: "/challenges", label: "التحديات" },
-    { href: "/levels", label: "المستويات" },
-    { href: "/achievements", label: "الإنجازات" },
-    { href: "/statistics", label: "الإحصائيات" },
-    { href: "/keyboard", label: "لوحة المفاتيح" },
-    { href: "/tips", label: "نصائح" },
-    { href: "/quiz", label: "الاختبار" },
-    { href: "/certificate", label: "الشهادة" },
-    { href: "/about-us", label: "من نحن" },
-    { href: "/faq", label: "الأسئلة الشائعة" },
-    { href: "/contact", label: "تواصل معنا" }
+    { name: "الرئيسية", id: "/" },
+    { name: "ابدأ التعلم", id: "/learn" },
+    { name: "التدريب", id: "/training" },
+    { name: "التحديات", id: "/challenges" },
+    { name: "المستويات", id: "/levels" },
+    { name: "الإنجازات", id: "/achievements" },
+    { name: "الإحصائيات", id: "/statistics" },
+    { name: "لوحة المفاتيح", id: "/keyboard" },
+    { name: "نصائح", id: "/tips" },
+    { name: "الاختبار", id: "/quiz" },
+    { name: "الشهادة", id: "/certificate" },
+    { name: "من نحن", id: "/about-us" },
+    { name: "الأسئلة الشائعة", id: "/faq" },
+    { name: "تواصل معنا", id: "/contact" }
   ];
 
   return (
@@ -44,23 +42,42 @@ export default function ContactPage() {
           logoAlt="KeyQuest logo futuristic neon"
           navItems={navItems}
           button={{
-            text: "ابدأ الآن",            href: "/learn"}}
+            text: "ابدأ الآن",            href: "/learn"
+          }}
         />
       </div>
 
-      <div id="contact-content" data-section="contact-content" className="min-h-[50vh] flex items-center justify-center">
-        <h1 className="text-3xl md:text-5xl font-bold text-center text-foreground p-8">تواصل معنا</h1>
-        {/* Content for contact page would go here if a component was available. */}
+      <div id="contact-form" data-section="contact-form" className="container mx-auto px-4 md:px-6 py-12">
+        <h2 className="text-4xl font-bold text-center mb-6">تواصل معنا</h2>
+        <p className="text-center text-lg text-gray-700 dark:text-gray-300 mb-10">لأي استفسارات أو دعم، لا تتردد في التواصل معنا.</p>
+        <div className="max-w-md mx-auto bg-card p-8 rounded-lg shadow-lg">
+          <form className="space-y-4">
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-foreground">الاسم الكامل</label>
+              <input type="text" id="name" name="name" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-cta focus:ring-primary-cta bg-input text-foreground" required />
+            </div>
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-foreground">البريد الإلكتروني</label>
+              <input type="email" id="email" name="email" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-cta focus:ring-primary-cta bg-input text-foreground" required />
+            </div>
+            <div>
+              <label htmlFor="message" className="block text-sm font-medium text-foreground">رسالتك</label>
+              <textarea id="message" name="message" rows={4} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-cta focus:ring-primary-cta bg-input text-foreground" required></textarea>
+            </div>
+            <button type="submit" className="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-cta hover:bg-primary-cta-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta">
+              إرسال الرسالة
+            </button>
+          </form>
+        </div>
       </div>
 
-      {/* Footer component not found in registry. */}
       <footer className="py-8 bg-card text-foreground mt-12" data-section="footer">
         <div className="container mx-auto px-4 md:px-6 text-center">
-          <p className="text-sm mb-4">© 2024 KeyQuest. All rights reserved.</p>
+          <p className="text-sm mb-4">© {new Date().getFullYear()} KeyQuest. جميع الحقوق محفوظة.</p>
           <div className="flex flex-wrap justify-center gap-x-6 gap-y-2">
             {navItems.map((item) => (
-              <Link key={item.href} href={item.href} className="text-sm hover:text-primary-cta transition-colors">
-                {item.label}
+              <Link key={item.id} href={item.id} className="text-sm hover:text-primary-cta transition-colors">
+                {item.name}
               </Link>
             ))}
           </div>