v 0.1

frontend/app/games/[game_id]/page.tsx

@@ -5,9 +5,12 @@ import { useParams } from 'next/navigation';
 export default function GamePage() {
     const { game_id } = useParams();
     return (
-        <main className="pt-24">
-            <section className="px-6 max-w-6xl mx-auto">
-                <div className="flex flex-col md:flex-row items-center gap-12 text-gray-200">
+        <main className="pt-24" data-oid="r2vzs0_">
+            <section className="px-6 max-w-6xl mx-auto" data-oid="0s10fd8">
+                <div
+                    className="flex flex-col md:flex-row items-center gap-12 text-gray-200"
+                    data-oid="zcmrkag"
+                >
                     {game_id}
                 </div>
             </section>

frontend/app/games/page.jsx

@@ -1,42 +1,90 @@
 'use client';
+
+import { useState } from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 
 function GameCard({ game }) {
     return (
         <Link
             href={`/games/${game.id}`}
-            className="border rounded-lg p-4 shadow hover:shadow-lg transition duration-300"
+            className="group block bg-gray-900/50 p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-gray-800/50 hover:border-gray-700/50"
+            data-oid="-pw15tw"
         >
-            <img src={game.thumbnail} alt={game.name} className="w-full h-auto mb-4 rounded" />
-
-            <h2 className="text-xl font-bold text-center text-gray-300">{game.name}</h2>
+            <div className="overflow-hidden rounded" data-oid="vdjdonj">
+                <Image
+                    src={game.thumbnail}
+                    alt={game.name}
+                    width={400}
+                    height={300}
+                    className="w-full h-auto group-hover:scale-105 transition-transform"
+                    data-oid="xqg0_7e"
+                />
+            </div>
+            <h2 className="mt-4 text-xl font-bold text-center text-gray-300" data-oid="52yzjaz">
+                {game.name}
+            </h2>
         </Link>
     );
 }
 
+function SearchBar({ searchQuery, setSearchQuery }) {
+    return (
+        <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Find Game"
+            className="w-full mb-8 text-xl font-bold text-center text-gray-300 bg-gray-900/50 p-4 rounded-xl shadow-lg transition-shadow border border-gray-800/50 hover:border-gray-700/50 focus:outline-none"
+            data-oid="tbh4i8z"
+        />
+    );
+}
+
 export default function GamesPage() {
+    const [searchQuery, setSearchQuery] = useState('');
     const dummyDataGames = [
-        {
-            id: '6516255',
-            name: 'Game 1',
-            thumbnail: 'https://placehold.in/200/dark',
-        },
-        { id: '6286722', name: 'Game 2', thumbnail: 'https://placehold.in/200/dark' },
-        { id: '9745127', name: 'Game 3', thumbnail: 'https://placehold.in/200/dark' },
-        { id: '5215644', name: 'Game 4', thumbnail: 'https://placehold.in/200/dark' },
-        { id: '8941561', name: 'Game 5', thumbnail: 'https://placehold.in/200/dark' },
-        { id: '2654145', name: 'Game 6', thumbnail: 'https://placehold.in/200/dark' },
+        { id: '6516255', name: 'Game 1', thumbnail: 'https://placehold.in/400x300/dark' },
+        { id: '6286722', name: 'Game 2', thumbnail: 'https://placehold.in/400x300/dark' },
+        { id: '9745127', name: 'Game 3', thumbnail: 'https://placehold.in/400x300/dark' },
+        { id: '5215644', name: 'Game 4', thumbnail: 'https://placehold.in/400x300/dark' },
+        { id: '8941561', name: 'Game 5', thumbnail: 'https://placehold.in/400x300/dark' },
+        { id: '2654145', name: 'Game 6', thumbnail: 'https://placehold.in/400x300/dark' },
     ];
 
+    const filteredGames = dummyDataGames.filter((game) =>
+        game.name.toLowerCase().includes(searchQuery.toLowerCase()),
+    );
+
     return (
-        <main className="pt-24">
-            <section className="px-6 max-w-6xl mx-auto">
-                <h1 className="text-3xl font-bold mb-8 text-center text-gray-50">Games Page</h1>
-                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-                    {dummyDataGames.map((game) => (
-                        <GameCard key={game.id} game={game} />
-                    ))}
-                </div>
+        <main className="pt-24 min-h-screen" data-oid="zs-c6nn">
+            <section className="px-6 max-w-6xl mx-auto" data-oid="y:pdqim">
+                <h1
+                    className="text-3xl font-bold mb-8 text-center text-indigo-400"
+                    data-oid="028mndl"
+                >
+                    Games
+                </h1>
+                <SearchBar
+                    searchQuery={searchQuery}
+                    setSearchQuery={setSearchQuery}
+                    data-oid="a498wx2"
+                />
+
+                {filteredGames.length > 0 ? (
+                    <div
+                        className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"
+                        data-oid=":uri6s2"
+                    >
+                        {filteredGames.map((game) => (
+                            <GameCard key={game.id} game={game} data-oid="gbidxtf" />
+                        ))}
+                    </div>
+                ) : (
+                    <p className="text-center text-gray-400 text-xl" data-oid="zjxr2rg">
+                        No games found.
+                    </p>
+                )}
             </section>
         </main>
     );

frontend/app/layout.tsx

@@ -8,49 +8,75 @@ const inter = Inter({ subsets: ['latin'] });
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
     return (
-        <html lang="en">
-            <body className={inter.className}>
-                <div className="min-h-screen bg-gradient-to-br from-[var(--gradient-start)] via-[var(--gradient-middle)] to-[var(--gradient-end)] flex flex-col">
-                    <nav className="px-6 py-4 bg-gray-950/90 backdrop-blur-sm fixed w-full z-50 border-b border-gray-800/50">
-                        <div className="flex justify-between items-center">
-                            <div className="flex items-center space-x-2">
-                                <div className="text-3xl font-bold text-indigo-400">∑</div>
-                                <h1 className="text-xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">
+        <html lang="en" className="overflow-x-hidden" data-oid="y_yy_gm">
+            <head data-oid="o:gkfmp">
+                <meta
+                    name="viewport"
+                    content="width=device-width, initial-scale=1.0"
+                    data-oid="gc:ebrh"
+                />
+            </head>
+            <body className={`${inter.className} overflow-x-hidden`} data-oid="30z3_82">
+                <div
+                    className="min-h-screen bg-gradient-to-br from-[var(--gradient-start)] via-[var(--gradient-middle)] to-[var(--gradient-end)] flex flex-col overflow-x-hidden"
+                    data-oid="h4_ibmx"
+                >
+                    <nav
+                        className="px-2 py-4 bg-gray-950/90 backdrop-blur-sm fixed w-full z-50 border-b border-gray-800/50"
+                        data-oid="dy.0t:f"
+                    >
+                        <div className="flex justify-between items-center" data-oid="00o_-1z">
+                            <div className="flex items-center space-x-2" data-oid="xt0_pl6">
+                                <img
+                                    className="w-auto h-12 rounded-full"
+                                    src="images/logo.jpg"
+                                    alt="Logo"
+                                    data-oid="jtersvl"
+                                />
+
+                                <h1
+                                    className="text-xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent"
+                                    data-oid="q-amsu2"
+                                >
                                     CAM
                                 </h1>
                             </div>
-                            <div className="hidden md:flex space-x-6">
+                            <div className="md:flex space-x-6" data-oid=":s.vlw7">
                                 <Link
                                     href="/"
                                     className="text-gray-300 hover:text-indigo-400 transition-colors"
+                                    data-oid="ojq1h-9"
                                 >
                                     Home
                                 </Link>
                                 <Link
                                     href="/games"
                                     className="text-gray-300 hover:text-indigo-400 transition-colors"
+                                    data-oid="x2ichuj"
                                 >
                                     Games
                                 </Link>
                                 <Link
                                     href="#"
                                     className="text-gray-300 hover:text-indigo-400 transition-colors"
-                                >
-                                    Community
-                                </Link>
-                                <Link
-                                    href="#"
-                                    className="text-gray-300 hover:text-indigo-400 transition-colors"
+                                    data-oid="309-whb"
                                 >
                                     About
                                 </Link>
                             </div>
                         </div>
                     </nav>
-                    <div className="flex-grow pt-[60px] pb-12">{children}</div>
-                    <footer className="mt-auto bg-gray-900 py-6">
-                        <div className="max-w-6xl mx-auto px-6 text-center text-gray-400">
-                            <p>© 2025 Community for Active Mathematics. All rights reserved.</p>
+                    <div className="flex-grow pt-[60px] pb-12" data-oid="zz7b04t">
+                        {children}
+                    </div>
+                    <footer className="mt-auto bg-gray-900 py-6" data-oid="rpdqbl3">
+                        <div
+                            className="max-w-6xl mx-auto px-6 text-center text-gray-400"
+                            data-oid="31a0u89"
+                        >
+                            <p data-oid="mlr636_">
+                                © 2025 Community for Active Mathematics. All rights reserved.
+                            </p>
                         </div>
                     </footer>
                 </div>

frontend/app/page.tsx

@@ -6,60 +6,121 @@ export default function Page() {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
 
     return (
-        <main className="pt-24">
-            <section className="px-6 max-w-6xl mx-auto">
-                <div className="flex flex-col md:flex-row items-center gap-12">
-                    <div className="flex-1 space-y-6">
-                        <h2 className="text-5xl font-bold text-gray-100">
+        <main className="pt-24" data-oid="suia.sz">
+            <section className="px-6 max-w-6xl mx-auto" data-oid="2-lkb6_">
+                <div className="flex flex-col md:flex-row items-center gap-12" data-oid="5_cs3qr">
+                    <div className="flex-1 space-y-6" data-oid="22w2g86">
+                        <h2 className="text-5xl font-bold text-gray-100" data-oid="a5tp9dq">
                             Making Math
-                            <span className="text-indigo-400"> Fun </span>
+                            <span className="text-indigo-400" data-oid="wyyhz:q">
+                                {' '}
+                                Fun{' '}
+                            </span>
                             and
-                            <span className="text-purple-400"> Engaging</span>
+                            <span className="text-purple-400" data-oid="r.en8ru">
+                                {' '}
+                                Engaging
+                            </span>
                         </h2>
-                        <p className="text-lg text-gray-300">
+                        <p className="text-lg text-gray-300" data-oid="1:-n1tn">
                             Join our vibrant community of math enthusiasts and discover a new way to
                             learn mathematics through interactive games and creative tools.
                         </p>
-                        <div className="flex gap-4">
-                            <button className="px-6 py-3 bg-indigo-500 text-white rounded-full hover:bg-indigo-400 transform hover:scale-105 transition-all">
+                        <div className="flex gap-4" data-oid="6ea:zb_">
+                            <button
+                                className="px-6 py-3 bg-indigo-500 text-white rounded-full hover:bg-indigo-400 transform hover:scale-105 transition-all"
+                                data-oid="1iossc7"
+                            >
                                 Start Learning
                             </button>
-                            <button className="px-6 py-3 border-2 border-indigo-400 text-indigo-400 rounded-full hover:bg-indigo-950/50 transform hover:scale-105 transition-all">
+                            <button
+                                className="px-6 py-3 border-2 border-indigo-400 text-indigo-400 rounded-full hover:bg-indigo-950/50 transform hover:scale-105 transition-all"
+                                data-oid="zhnvplg"
+                            >
                                 Explore Games
                             </button>
                         </div>
                     </div>
-                    <div className="flex-1 relative">
-                        <div className="absolute -top-10 -left-10 w-40 h-40 bg-purple-500 rounded-full mix-blend-screen filter blur-xl opacity-20 animate-blob"></div>
-                        <div className="absolute -bottom-10 -right-10 w-40 h-40 bg-indigo-500 rounded-full mix-blend-screen filter blur-xl opacity-20 animate-blob animation-delay-2000"></div>
-                        <div className="relative">
-                            <div className="bg-gray-900/50 p-8 rounded-2xl shadow-xl transform rotate-3 hover:rotate-0 transition-transform border border-gray-800/50">
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div className="bg-indigo-950/50 p-4 rounded-lg border border-indigo-800/20 hover:border-indigo-700/30 transition-colors">
-                                        <span className="text-2xl">🎮</span>
-                                        <h3 className="font-bold text-gray-300 mt-2">Math Games</h3>
-                                        <p className="text-sm text-gray-400">
+                    <div className="flex-1 relative" data-oid="j2k6f07">
+                        <div
+                            className="absolute -top-10 -left-10 w-40 h-40 bg-purple-500 rounded-full mix-blend-screen filter blur-xl opacity-20 animate-blob"
+                            data-oid="f2fmu7t"
+                        ></div>
+                        <div
+                            className="absolute -bottom-10 -right-10 w-40 h-40 bg-indigo-500 rounded-full mix-blend-screen filter blur-xl opacity-20 animate-blob animation-delay-2000"
+                            data-oid=".2r-tpi"
+                        ></div>
+                        <div className="relative" data-oid="yvx_1_b">
+                            <div
+                                className="bg-gray-900/50 p-8 rounded-2xl shadow-xl transform rotate-3 hover:rotate-0 transition-transform border border-gray-800/50"
+                                data-oid="ffx:.9u"
+                            >
+                                <div className="grid grid-cols-2 gap-4" data-oid="4-kokh_">
+                                    <div
+                                        className="bg-indigo-950/50 p-4 rounded-lg border border-indigo-800/20 hover:border-indigo-700/30 transition-colors"
+                                        data-oid="btu80g-"
+                                    >
+                                        <span className="text-2xl" data-oid="b.dgg1n">
+                                            🎮
+                                        </span>
+                                        <h3
+                                            className="font-bold text-gray-300 mt-2"
+                                            data-oid="gp6c-69"
+                                        >
+                                            Math Games
+                                        </h3>
+                                        <p className="text-sm text-gray-400" data-oid="5536hbh">
                                             Interactive learning through play
                                         </p>
                                     </div>
-                                    <div className="bg-purple-950/50 p-4 rounded-lg border border-purple-800/20 hover:border-purple-700/30 transition-colors">
-                                        <span className="text-2xl">🧮</span>
-                                        <h3 className="font-bold text-gray-300 mt-2">Tools</h3>
-                                        <p className="text-sm text-gray-400">
+                                    <div
+                                        className="bg-purple-950/50 p-4 rounded-lg border border-purple-800/20 hover:border-purple-700/30 transition-colors"
+                                        data-oid="-f1-lsb"
+                                    >
+                                        <span className="text-2xl" data-oid="ogg:3ik">
+                                            🧮
+                                        </span>
+                                        <h3
+                                            className="font-bold text-gray-300 mt-2"
+                                            data-oid="-33yy7v"
+                                        >
+                                            Tools
+                                        </h3>
+                                        <p className="text-sm text-gray-400" data-oid="a4-ywx.">
                                             Smart calculators & visualizers
                                         </p>
                                     </div>
-                                    <div className="bg-pink-950/50 p-4 rounded-lg border border-pink-800/20 hover:border-pink-700/30 transition-colors">
-                                        <span className="text-2xl">👥</span>
-                                        <h3 className="font-bold text-gray-300 mt-2">Community</h3>
-                                        <p className="text-sm text-gray-400">
+                                    <div
+                                        className="bg-pink-950/50 p-4 rounded-lg border border-pink-800/20 hover:border-pink-700/30 transition-colors"
+                                        data-oid=".jdekr."
+                                    >
+                                        <span className="text-2xl" data-oid="v29xal7">
+                                            👥
+                                        </span>
+                                        <h3
+                                            className="font-bold text-gray-300 mt-2"
+                                            data-oid="q:7swf-"
+                                        >
+                                            Community
+                                        </h3>
+                                        <p className="text-sm text-gray-400" data-oid="jqxkzcy">
                                             Learn together, grow together
                                         </p>
                                     </div>
-                                    <div className="bg-blue-950/50 p-4 rounded-lg border border-blue-800/20 hover:border-blue-700/30 transition-colors">
-                                        <span className="text-2xl">📈</span>
-                                        <h3 className="font-bold text-gray-300 mt-2">Progress</h3>
-                                        <p className="text-sm text-gray-400">
+                                    <div
+                                        className="bg-blue-950/50 p-4 rounded-lg border border-blue-800/20 hover:border-blue-700/30 transition-colors"
+                                        data-oid=".vx7_k:"
+                                    >
+                                        <span className="text-2xl" data-oid="pngnsr4">
+                                            📈
+                                        </span>
+                                        <h3
+                                            className="font-bold text-gray-300 mt-2"
+                                            data-oid="dmwcu5_"
+                                        >
+                                            Progress
+                                        </h3>
+                                        <p className="text-sm text-gray-400" data-oid="x26n:l3">
                                             Track your learning journey
                                         </p>
                                     </div>
@@ -70,37 +131,68 @@ export default function Page() {
                 </div>
             </section>
 
-            <section className="mt-32 px-6 max-w-6xl mx-auto">
-                <h2 className="text-3xl font-bold text-center mb-12 text-gray-100">
+            <section className="mt-32 px-6 max-w-6xl mx-auto" data-oid="-tclr59">
+                <h2
+                    className="text-3xl font-bold text-center mb-12 text-gray-100"
+                    data-oid="s4q-vmm"
+                >
                     Why Choose Us?
                 </h2>
-                <div className="grid md:grid-cols-3 gap-8">
-                    <div className="bg-gray-900/50 p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-gray-800/50 hover:border-gray-700/50">
-                        <div className="w-12 h-12 bg-indigo-950/50 rounded-full flex items-center justify-center mb-4 border border-indigo-800/20">
-                            <span className="text-2xl">🎯</span>
+                <div className="grid md:grid-cols-3 gap-8" data-oid="tj8uck6">
+                    <div
+                        className="bg-gray-900/50 p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-gray-800/50 hover:border-gray-700/50"
+                        data-oid="7nzukhb"
+                    >
+                        <div
+                            className="w-12 h-12 bg-indigo-950/50 rounded-full flex items-center justify-center mb-4 border border-indigo-800/20"
+                            data-oid="czzu3n."
+                        >
+                            <span className="text-2xl" data-oid="iyv1b_0">
+                                🎯
+                            </span>
                         </div>
-                        <h3 className="font-bold text-xl mb-2 text-gray-100">Engaging Content</h3>
-                        <p className="text-gray-300">
+                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="-w8s6l7">
+                            Engaging Content
+                        </h3>
+                        <p className="text-gray-300" data-oid="-97m7ti">
                             Interactive games and puzzles that make learning mathematics enjoyable
                         </p>
                     </div>
-                    <div className="bg-gray-900/50 p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-gray-800/50 hover:border-gray-700/50">
-                        <div className="w-12 h-12 bg-purple-950/50 rounded-full flex items-center justify-center mb-4 border border-purple-800/20">
-                            <span className="text-2xl">🤝</span>
+                    <div
+                        className="bg-gray-900/50 p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-gray-800/50 hover:border-gray-700/50"
+                        data-oid="3npj5te"
+                    >
+                        <div
+                            className="w-12 h-12 bg-purple-950/50 rounded-full flex items-center justify-center mb-4 border border-purple-800/20"
+                            data-oid="tyjb-ir"
+                        >
+                            <span className="text-2xl" data-oid="vk38yl7">
+                                🤝
+                            </span>
                         </div>
-                        <h3 className="font-bold text-xl mb-2 text-gray-100">Active Community</h3>
-                        <p className="text-gray-300">
+                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="81nzq.h">
+                            Active Community
+                        </h3>
+                        <p className="text-gray-300" data-oid=".11ais9">
                             Connect with fellow learners and share your mathematical journey
                         </p>
                     </div>
-                    <div className="bg-gray-900/50 p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-gray-800/50 hover:border-gray-700/50">
-                        <div className="w-12 h-12 bg-pink-950/50 rounded-full flex items-center justify-center mb-4 border border-pink-800/20">
-                            <span className="text-2xl">📱</span>
+                    <div
+                        className="bg-gray-900/50 p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-gray-800/50 hover:border-gray-700/50"
+                        data-oid="yk80-ll"
+                    >
+                        <div
+                            className="w-12 h-12 bg-pink-950/50 rounded-full flex items-center justify-center mb-4 border border-pink-800/20"
+                            data-oid="itm_4uq"
+                        >
+                            <span className="text-2xl" data-oid="zq-aobf">
+                                📱
+                            </span>
                         </div>
-                        <h3 className="font-bold text-xl mb-2 text-gray-100">
+                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="v6qecuk">
                             Accessible Learning
                         </h3>
-                        <p className="text-gray-300">
+                        <p className="text-gray-300" data-oid="yxyzs3b">
                             Learn anytime, anywhere with our mobile-friendly platform
                         </p>
                     </div>

frontend/next.config.mjs

@@ -2,5 +2,15 @@ import path from 'path';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     output: 'standalone',
+    images:{
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: 'placehold.in',
+                port: '',
+                pathname: '/**',
+              }
+        ]
+    }
 };
 export default nextConfig;