Update src/app/page.tsx

Merge version_2 into main

src/app/chat/page.tsx

@@ -0,0 +1,66 @@
+"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/login/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactForm from '@/components/form/ContactForm';
+
+export default function LoginPage() {
+  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"
+    >
+      <ReactLenis root>
+        <NavbarStyleCentered
+          navItems={[
+            { name: "الرئيسية", id: "/" },
+            { name: "تسجيل الدخول", id: "/login" },
+          ]}
+          brandName="المهندس"
+        />
+        <div className="min-h-screen flex items-center justify-center p-8">
+          <ContactForm
+            title="تسجيل الدخول"
+            description="سجل دخولك عبر جوجل للوصول إلى تحديات المهندس"
+            tag="دخول"
+            buttonText="الدخول عبر جوجل"
+            onSubmit={(email) => console.log("Auth flow initiated for: ", email)}
+            useInvertedBackground={false}
+            centered={true}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

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