Merge version_4 into main

Merge version_4 into main

src/app/chat/page.tsx

@@ -1,66 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import TextAnimation from '@/components/text/TextAnimation';
-import ButtonBounceEffect from '@/components/button/ButtonBounceEffect/ButtonBounceEffect';
-import Textarea from '@/components/form/Textarea';
-
-export default function ChatPage() {
-  const [messages, setMessages] = useState<{id: number, text: string, sender: string}[]>([]);
-  const [input, setInput] = useState('');
-  const socket = useRef<WebSocket | null>(null);
-
-  useEffect(() => {
-    socket.current = new WebSocket('ws://localhost:8080');
-    socket.current.onmessage = (event) => {
-      const newMessage = JSON.parse(event.data);
-      setMessages((prev) => [...prev, { id: Date.now(), ...newMessage }]);
-    };
-    return () => socket.current?.close();
-  }, []);
-
-  const sendMessage = useCallback(() => {
-    if (input.trim() && socket.current) {
-      socket.current.send(JSON.stringify({ text: input, sender: 'User' }));
-      setInput('');
-    }
-  }, [input]);
-
-  return (
-    <ThemeProvider
-        defaultButtonVariant="directional-hover"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="pill"
-        contentWidth="mediumSmall"
-        sizing="mediumLarge"
-        background="aurora"
-        cardStyle="glass-elevated"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="radial-glow"
-        headingFontWeight="extrabold"
-    >
-      <div className="min-h-screen p-8 flex flex-col gap-6">
-        <NavbarStyleCentered 
-            navItems={[{name: "الرئيسية", id: "/"}, {name: "الدردشة", id: "/chat"}]} 
-            brandName="المهندس" 
-        />
-        <div className="mt-20">
-            <TextAnimation title="دردشة المهندسين الحية" />
-        </div>
-        <div className="flex-1 bg-white/10 p-6 rounded-2xl h-[500px] overflow-y-auto">
-            {messages.map((m) => (
-                <div key={m.id} className="mb-2 p-2 bg-white/5 rounded">
-                    <strong>{m.sender}:</strong> {m.text}
-                </div>
-            ))}
-        </div>
-        <div className="flex gap-2">
-            <Textarea value={input} onChange={setInput} placeholder="اكتب رسالتك هنا..." />
-            <ButtonBounceEffect text="إرسال" onClick={sendMessage} />
-        </div>
-      </div>
-    </ThemeProvider>
-  );
-}

src/app/page.tsx

@@ -28,10 +28,14 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        { name: "الرئيسية", id: "hero" },
+        {
-        { name: "الألعاب", id: "features" },
+          name: "الرئيسية",          id: "hero"},
-        { name: "الاشتراكات", id: "pricing" },
+        {
-        { name: "الدردشة", id: "contact" },
+          name: "الألعاب",          id: "features"},
+        {
+          name: "الاشتراكات",          id: "pricing"},
+        {
+          name: "الدردشة",          id: "contact"},
       ]}
       brandName="المهندس"
     />
@@ -41,7 +45,10 @@ export default function LandingPage() {
       <HeroLogo
       logoText="المهندس"
       description="منصة التحديات والمهارات. العب، اربح النقاط، وتواصل مع المهندسين من كل مكان."
-      buttons={[{ text: "ابدأ اللعب الآن", href: "#features" }]}
+      buttons={[
+        {
+          text: "ابدأ اللعب الآن",          href: "#features"},
+      ]}
       buttonAnimation="slide-up"
       imageSrc="http://img.b2bpic.net/free-vector/futuristic-technology-infographic-pack_52683-34337.jpg"
     />
@@ -54,20 +61,20 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "ألعاب الذاكرة الذكية",          description: "اختبر سرعة بديهتك وذاكرتك في ألعاب تفاعلية مصممة لتحدي قدراتك الهندسية.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/phone-icon-front-side-with-white-background_187299-39933.jpg", imageAlt: "Memory game interface" },
+          title: "الألعاب التنافسية",          description: "مجموعة متنوعة من الألعاب التفاعلية مع تتبع فوري للنتيجة وحالة اللعب.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/phone-icon-front-side-with-white-background_187299-39933.jpg", imageAlt: "3d puzzle game" },
-          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/3d-view-puzzle-pieces_23-2150499224.jpg", imageAlt: "Puzzle game layout" }
+          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/3d-view-puzzle-pieces_23-2150499224.jpg", imageAlt: "3d puzzle game" }
         },
         {
-          title: "عجلة الحظ التفاعلية",          description: "جرب حظك اليومي للفوز بنقاط إضافية وتفعيل ميزات حصرية على حسابك الشخصي.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/student-home-taking-notes-while-watching-presentation-closeup_482257-118737.jpg", imageAlt: "Lucky wheel UI" },
+          title: "عجلة الحظ اليومية",          description: "نظام سحب عشوائي تفاعلي يحدد الجوائز بناءً على خوارزمية منطقية.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/student-home-taking-notes-while-watching-presentation-closeup_482257-118737.jpg", imageAlt: "3d puzzle game" },
-          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/8-bits-cars-gaming-assets_23-2151143796.jpg", imageAlt: "Gaming assets" }
+          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/8-bits-cars-gaming-assets_23-2151143796.jpg", imageAlt: "3d puzzle game" }
         },
         {
-          title: "لوحة التحدي المباشر",          description: "تنافس في الوقت الفعلي ضد مهندسين آخرين وتصدر قائمة المتصدرين العالمية.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/view-3d-arcade-game-box_23-2151005754.jpg", imageAlt: "Competitive dashboard" },
+          title: "نظام النقاط الذكي",          description: "لوحة تحكم كاملة تدير رصيد المستخدم وحالة الجلسات التفاعلية.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/view-3d-arcade-game-box_23-2151005754.jpg", imageAlt: "3d puzzle game" },
-          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/gradient-futuristic-infographic_23-2148459379.jpg", imageAlt: "Infographic stats" }
+          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/gradient-futuristic-infographic_23-2148459379.jpg", imageAlt: "3d puzzle game" }
         }
       ]}
       showStepNumbers={true}
-      title="الألعاب التفاعلية"
+      title="مميزات منصة المهندس"
       description="تطوير شامل لأنظمة اللعب التفاعلية وضمان تجربة مستخدم ديناميكية."
     />
   </div>
@@ -79,13 +86,20 @@ export default function LandingPage() {
       useInvertedBackground={true}
       plans={[
         {
-          id: "monthly", name: "اشتراك شهري", price: "100,000 نقطة", 
+          id: "monthly",          name: "اشتراك شهري",          price: "100,000 نقطة",          buttons: [
-          buttons: [{ text: "تفعيل الاشتراك" }],
+            {
-          features: ["دخول كامل للألعاب", "دردشة المهندسين", "عجلة حظ إضافية"],
+              text: "تفعيل الاشتراك"},
+          ],
+          features: [
+            "دخول كامل للألعاب",            "دردشة المهندسين",            "عجلة حظ إضافية"],
         },
         {
-          id: "yearly", name: "اشتراك سنوي", price: "500,000 نقطة",          buttons: [{ text: "تفعيل الاشتراك" }],
+          id: "yearly",          name: "اشتراك سنوي",          badge: "الأوفر",          price: "500,000 نقطة",          buttons: [
-          features: ["كل مميزات الشهرية", "خصم خاص", "أولوية في المسابقات"],
+            {
+              text: "تفعيل الاشتراك"},
+          ],
+          features: [
+            "كل مميزات الشهرية",            "خصم خاص",            "أولوية في المسابقات"],
         },
       ]}
       title="خطط الاشتراكات"
@@ -98,9 +112,12 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       faqs={[
-        { id: "f1", title: "كيف أحصل على النقاط؟", content: "يمكنك الحصول على 200 نقطة يومياً من خلال الدخول واللعب." },
+        {
-        { id: "f2", title: "كيف أستخدم عجلة الحظ؟", content: "تتوفر عجلة الحظ مرة واحدة كل 24 ساعة في واجهة المستخدم." },
+          id: "f1",          title: "كيف أحصل على النقاط؟",          content: "يمكنك الحصول على 200 نقطة يومياً من خلال الدخول واللعب."},
-        { id: "f3", title: "هل الاشتراك يتجدد تلقائياً؟", content: "لا، يمكنك اختيار التجديد يدوياً من خلال لوحة التحكم." },
+        {
+          id: "f2",          title: "كيف أستخدم عجلة الحظ؟",          content: "تتوفر عجلة الحظ مرة واحدة كل 24 ساعة في واجهة المستخدم."},
+        {
+          id: "f3",          title: "هل الاشتراك يتجدد تلقائياً؟",          content: "لا، يمكنك اختيار التجديد يدوياً من خلال لوحة التحكم."},
       ]}
       title="الأسئلة الشائعة"
       description="كل ما تحتاج معرفته عن منصة المهندس."
@@ -111,7 +128,8 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactSplit
       useInvertedBackground={false}
-      background={{ variant: "animated-grid" }}
+      background={{
+        variant: "animated-grid"}}
       title="دردشة المجتمع"
       description="انضم إلى الدردشة العامة للمهندسين وشارك تجاربك مع الآخرين."
       mediaAnimation="slide-up"
@@ -124,8 +142,22 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
       columns={[
-        { items: [{ label: "الرئيسية", href: "/" }, { label: "الألعاب", href: "#features" }] },
+        {
-        { items: [{ label: "الاشتراكات", href: "#pricing" }, { label: "الدردشة", href: "#contact" }] },
+          items: [
+            {
+              label: "الرئيسية",              href: "/"},
+            {
+              label: "الألعاب",              href: "#features"},
+          ],
+        },
+        {
+          items: [
+            {
+              label: "الاشتراكات",              href: "#pricing"},
+            {
+              label: "الدردشة",              href: "#contact"},
+          ],
+        },
       ]}
       logoText="المهندس"
     />