v 0.1.1

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

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

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

frontend/app/games/page.jsx

@@ -8,20 +8,20 @@ function GameCard({ game }) {
     return (
         <Link
             href={`/games/${game.id}`}
-            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"
+            className="fade-scale-in group block bg-gray-900/50 p-2 rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-gray-800/50 hover:border-gray-700/50"
+            data-oid="ozypzo3"
         >
-            <div className="overflow-hidden rounded" data-oid="vdjdonj">
+            <div className="overflow-hidden rounded" data-oid="vsbexiv">
                 <Image
                     src={game.thumbnail}
                     alt={game.name}
-                    width={400}
-                    height={300}
+                    width={200}
+                    height={200}
                     className="w-full h-auto group-hover:scale-105 transition-transform"
-                    data-oid="xqg0_7e"
+                    data-oid="zjpfc9j"
                 />
             </div>
-            <h2 className="mt-4 text-xl font-bold text-center text-gray-300" data-oid="52yzjaz">
+            <h2 className="mt-2 text-xl font-bold text-center text-gray-300" data-oid="xye30dv">
                 {game.name}
             </h2>
         </Link>
@@ -34,9 +34,9 @@ function SearchBar({ searchQuery, setSearchQuery }) {
             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"
+            placeholder="Find Games"
+            className="w-full mb-8 text-lg font-extralight text-center bg-gray-900/50 p-2 shadow-lg border-2 border-t-0 border-r-0 border-indigo-400 text-indigo-400 rounded-xl hover:border-b-0 hover:border-l-0 hover:border-t-2 hover:border-r-2 hover:bg-indigo-950/50 transform hover:scale-105 transition-all ease-in-out focus:outline-none"
+            data-oid="307.txx"
         />
     );
 }
@@ -44,12 +44,12 @@ function SearchBar({ searchQuery, setSearchQuery }) {
 export default function GamesPage() {
     const [searchQuery, setSearchQuery] = useState('');
     const dummyDataGames = [
-        { 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' },
+        { id: '6516255', name: 'Game 1', thumbnail: 'https://placehold.in/400x200/dark' },
+        { id: '6286722', name: 'Game 2', thumbnail: 'https://placehold.in/400x200/dark' },
+        { id: '9745127', name: 'Game 3', thumbnail: 'https://placehold.in/400x200/dark' },
+        { id: '5215644', name: 'Game 4', thumbnail: 'https://placehold.in/400x200/dark' },
+        { id: '8941561', name: 'Game 5', thumbnail: 'https://placehold.in/400x200/dark' },
+        { id: '2654145', name: 'Game 6', thumbnail: 'https://placehold.in/400x200/dark' },
     ];
 
     const filteredGames = dummyDataGames.filter((game) =>
@@ -57,31 +57,25 @@ export default function GamesPage() {
     );
 
     return (
-        <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>
+        <main className="pt-14 min-h-screen" data-oid="_xi-jmj">
+            <section className="px-6 max-w-6xl mx-auto" data-oid="adjl_hw">
                 <SearchBar
                     searchQuery={searchQuery}
                     setSearchQuery={setSearchQuery}
-                    data-oid="a498wx2"
+                    data-oid="tnqssi6"
                 />
 
                 {filteredGames.length > 0 ? (
                     <div
                         className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"
-                        data-oid=":uri6s2"
+                        data-oid="1sux_h."
                     >
                         {filteredGames.map((game) => (
-                            <GameCard key={game.id} game={game} data-oid="gbidxtf" />
+                            <GameCard key={game.id} game={game} data-oid="92v2-u4" />
                         ))}
                     </div>
                 ) : (
-                    <p className="text-center text-gray-400 text-xl" data-oid="zjxr2rg">
+                    <p className="text-center text-gray-400 text-xl" data-oid="9f4ylkk">
                         No games found.
                     </p>
                 )}

frontend/app/globals.css

@@ -119,3 +119,29 @@
         @apply bg-background text-foreground;
     }
 }
+
+.fade-scale-in {
+    animation: fadeIn .5s ease-in-out, pulse .3s ease-in-out;
+  }
+  
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+  
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes pulse {
+  
+    0%,
+    100% {
+      transform: scale(1);
+    }
+  
+    50% {
+      transform: scale(1.025);
+    }
+  }

frontend/app/layout.tsx

@@ -3,78 +3,74 @@
 import { Inter } from 'next/font/google';
 import './globals.css';
 import Link from 'next/link';
+import Image from 'next/image';
 
 const inter = Inter({ subsets: ['latin'] });
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
     return (
-        <html lang="en" className="overflow-x-hidden" data-oid="y_yy_gm">
-            <head data-oid="o:gkfmp">
+        <html lang="en" className="overflow-x-hidden" data-oid="jst5_fj">
+            <head data-oid="33qs9le">
                 <meta
                     name="viewport"
                     content="width=device-width, initial-scale=1.0"
-                    data-oid="gc:ebrh"
+                    data-oid="bvrjhap"
                 />
             </head>
-            <body className={`${inter.className} overflow-x-hidden`} data-oid="30z3_82">
+            <body className={`${inter.className} overflow-x-hidden`} data-oid="5j3:cdz">
                 <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"
+                    data-oid="kmqd70j"
                 >
                     <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"
+                        data-oid="9d2kmuf"
                     >
-                        <div className="flex justify-between items-center" data-oid="00o_-1z">
-                            <div className="flex items-center space-x-2" data-oid="xt0_pl6">
-                                <img
+                        <div className="flex justify-between items-center" data-oid="5lp1_:-">
+                            <div className="flex items-center space-x-2" data-oid="9mz3jck">
+                                <Image
                                     className="w-auto h-12 rounded-full"
-                                    src="images/logo.jpg"
+                                    src="/images/logo.jpg"
+                                    width={50}
+                                    height={50}
                                     alt="Logo"
-                                    data-oid="jtersvl"
+                                    data-oid="wy_z2v:"
                                 />
 
                                 <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"
+                                    data-oid="1f3.ku0"
                                 >
                                     CAM
                                 </h1>
                             </div>
-                            <div className="md:flex space-x-6" data-oid=":s.vlw7">
+                            <div className="md:flex space-x-6" data-oid="cl8h.:9">
                                 <Link
                                     href="/"
                                     className="text-gray-300 hover:text-indigo-400 transition-colors"
-                                    data-oid="ojq1h-9"
+                                    data-oid="t0k91mw"
                                 >
                                     Home
                                 </Link>
                                 <Link
                                     href="/games"
                                     className="text-gray-300 hover:text-indigo-400 transition-colors"
-                                    data-oid="x2ichuj"
+                                    data-oid="tg9ok:f"
                                 >
                                     Games
                                 </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" data-oid="zz7b04t">
+                    <div className="flex-grow pt-[60px] pb-12" data-oid="jtee0:r">
                         {children}
                     </div>
-                    <footer className="mt-auto bg-gray-900 py-6" data-oid="rpdqbl3">
+                    <footer className="mt-auto bg-gray-900 py-4" data-oid="n7e1_x1">
                         <div
                             className="max-w-6xl mx-auto px-6 text-center text-gray-400"
-                            data-oid="31a0u89"
+                            data-oid="k.3k0ev"
                         >
-                            <p data-oid="mlr636_">
+                            <p data-oid="b:ubjn3">
                                 © 2025 Community for Active Mathematics. All rights reserved.
                             </p>
                         </div>

frontend/app/page.tsx

@@ -1,126 +1,130 @@
 'use client';
 
 import { useState } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
 
 export default function Page() {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
 
     return (
-        <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">
+        <main className="pt-14 fade-scale-in" data-oid="l1t2bm_">
+            <section className="px-6 max-w-6xl mx-auto" data-oid="w9kprpn">
+                <div className="flex flex-col md:flex-row items-center gap-12" data-oid="bavdy7i">
+                    <div className="flex-1 space-y-6" data-oid="7hmm:8z">
+                        <h2 className="text-5xl font-bold text-gray-100" data-oid="9bgst5n">
                             Making Math
-                            <span className="text-indigo-400" data-oid="wyyhz:q">
+                            <span className="text-indigo-400" data-oid="tz1p116">
                                 {' '}
                                 Fun{' '}
                             </span>
                             and
-                            <span className="text-purple-400" data-oid="r.en8ru">
+                            <span className="text-purple-400" data-oid="35nl7zr">
                                 {' '}
                                 Engaging
                             </span>
                         </h2>
-                        <p className="text-lg text-gray-300" data-oid="1:-n1tn">
+                        <p className="text-lg text-gray-300" data-oid="yerqk-8">
                             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" data-oid="6ea:zb_">
-                            <button
+                        <div className="flex gap-4" data-oid="9y5:rck">
+                            <Link
+                                href={'#learn-more'}
                                 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"
+                                data-oid="qb8hmfq"
                             >
-                                Start Learning
-                            </button>
-                            <button
+                                Learn More
+                            </Link>
+                            <Link
+                                href={'/games'}
                                 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"
+                                data-oid=".hrfywb"
                             >
                                 Explore Games
-                            </button>
+                            </Link>
                         </div>
                     </div>
-                    <div className="flex-1 relative" data-oid="j2k6f07">
+                    <div className="flex-1 relative" data-oid=".8vk9x3">
                         <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"
+                            data-oid="q-c4r.-"
                         ></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"
+                            data-oid="noig022"
                         ></div>
-                        <div className="relative" data-oid="yvx_1_b">
+                        <div className="relative" data-oid="2wiz.sp">
                             <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"
+                                className="bg-gray-900/50 p-8 rounded-2xl shadow-xl transform rotate-3 skew-x-6 skew-y-2 hover:rotate-0 hover:skew-x-0 hover:skew-y-0 transition duration-700 ease-in-out border border-gray-800/50"
+                                data-oid="g69pqu3"
                             >
-                                <div className="grid grid-cols-2 gap-4" data-oid="4-kokh_">
+                                <div className="grid grid-cols-2 gap-4" data-oid="h4g37c8">
                                     <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-"
+                                        data-oid="f0hc80k"
                                     >
-                                        <span className="text-2xl" data-oid="b.dgg1n">
+                                        <span className="text-2xl" data-oid="s.fb2yi">
                                             🎮
                                         </span>
                                         <h3
                                             className="font-bold text-gray-300 mt-2"
-                                            data-oid="gp6c-69"
+                                            data-oid="evtdw1b"
                                         >
                                             Math Games
                                         </h3>
-                                        <p className="text-sm text-gray-400" data-oid="5536hbh">
+                                        <p className="text-sm text-gray-400" data-oid="3i00zb.">
                                             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"
-                                        data-oid="-f1-lsb"
+                                        data-oid="_jme84m"
                                     >
-                                        <span className="text-2xl" data-oid="ogg:3ik">
+                                        <span className="text-2xl" data-oid="854-0y9">
                                             🧮
                                         </span>
                                         <h3
                                             className="font-bold text-gray-300 mt-2"
-                                            data-oid="-33yy7v"
+                                            data-oid="zy:7a6-"
                                         >
                                             Tools
                                         </h3>
-                                        <p className="text-sm text-gray-400" data-oid="a4-ywx.">
+                                        <p className="text-sm text-gray-400" data-oid="mtv6h3p">
                                             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"
-                                        data-oid=".jdekr."
+                                        data-oid="rembm90"
                                     >
-                                        <span className="text-2xl" data-oid="v29xal7">
+                                        <span className="text-2xl" data-oid="_zh0tpg">
                                             👥
                                         </span>
                                         <h3
                                             className="font-bold text-gray-300 mt-2"
-                                            data-oid="q:7swf-"
+                                            data-oid="xvtt9rr"
                                         >
                                             Community
                                         </h3>
-                                        <p className="text-sm text-gray-400" data-oid="jqxkzcy">
+                                        <p className="text-sm text-gray-400" data-oid="nsafeen">
                                             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"
-                                        data-oid=".vx7_k:"
+                                        data-oid="ipdpp8t"
                                     >
-                                        <span className="text-2xl" data-oid="pngnsr4">
+                                        <span className="text-2xl" data-oid=".uogre9">
                                             📈
                                         </span>
                                         <h3
                                             className="font-bold text-gray-300 mt-2"
-                                            data-oid="dmwcu5_"
+                                            data-oid="-fpsg:h"
                                         >
                                             Progress
                                         </h3>
-                                        <p className="text-sm text-gray-400" data-oid="x26n:l3">
+                                        <p className="text-sm text-gray-400" data-oid="-ex.7he">
                                             Track your learning journey
                                         </p>
                                     </div>
@@ -131,68 +135,79 @@ export default function Page() {
                 </div>
             </section>
 
-            <section className="mt-32 px-6 max-w-6xl mx-auto" data-oid="-tclr59">
+            <section id="learn-more" className="mt-32 px-6 max-w-6xl mx-auto" data-oid="q4xev:o">
+                <h2
+                    className="text-3xl font-bold mb-12 text-gray-100 text-center"
+                    data-oid="l4jowqn"
+                >
+                    Community for Active Mathematics
+                </h2>
+                <div className="grid md:grid-cols-3 gap-8" data-oid=":76i.-4">
+                </div>
+            </section>
+
+            <section id="why-choose-us" className="mt-32 px-6 max-w-6xl mx-auto" data-oid="qfja_rp">
                 <h2
                     className="text-3xl font-bold text-center mb-12 text-gray-100"
-                    data-oid="s4q-vmm"
+                    data-oid="vyq0z7m"
                 >
                     Why Choose Us?
                 </h2>
-                <div className="grid md:grid-cols-3 gap-8" data-oid="tj8uck6">
+                <div className="grid md:grid-cols-3 gap-8" data-oid="ipq7p_-">
                     <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"
+                        className="bg-gray-900/50 p-6 rounded-xl shadow-lg hover:shadow-xl border border-gray-800/50 hover:border-purple-600 border-t-0 border-b-0 transition-all duration-300 ease-in-out"
+                        data-oid="glh0:my"
                     >
                         <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."
+                            data-oid="wh35o.2"
                         >
-                            <span className="text-2xl" data-oid="iyv1b_0">
+                            <span className="text-2xl" data-oid="yz0u_iz">
                                 🎯
                             </span>
                         </div>
-                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="-w8s6l7">
+                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="msq-k-o">
                             Engaging Content
                         </h3>
-                        <p className="text-gray-300" data-oid="-97m7ti">
+                        <p className="text-gray-300" data-oid="6c3zydq">
                             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"
-                        data-oid="3npj5te"
+                        className="bg-gray-900/50 p-6 rounded-xl shadow-lg hover:shadow-xl border border-gray-800/50 hover:border-purple-600 border-t-0 border-b-0 transition-all duration-300 ease-in-out"
+                        data-oid="rnwev0."
                     >
                         <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"
+                            data-oid="v-irrsk"
                         >
-                            <span className="text-2xl" data-oid="vk38yl7">
+                            <span className="text-2xl" data-oid="qdmx5ng">
                                 🤝
                             </span>
                         </div>
-                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="81nzq.h">
+                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="ocqn5iw">
                             Active Community
                         </h3>
-                        <p className="text-gray-300" data-oid=".11ais9">
+                        <p className="text-gray-300" data-oid="clxe_yr">
                             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"
-                        data-oid="yk80-ll"
+                        className="bg-gray-900/50 p-6 rounded-xl shadow-lg hover:shadow-xl border border-gray-800/50 hover:border-purple-600 border-t-0 border-b-0 transition-all duration-300 ease-in-out"
+                        data-oid="0p.ilc1"
                     >
                         <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"
+                            data-oid="zx22es1"
                         >
-                            <span className="text-2xl" data-oid="zq-aobf">
+                            <span className="text-2xl" data-oid="uh2dcky">
                                 📱
                             </span>
                         </div>
-                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="v6qecuk">
+                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="frcm9em">
                             Accessible Learning
                         </h3>
-                        <p className="text-gray-300" data-oid="yxyzs3b">
+                        <p className="text-gray-300" data-oid="1_rn785">
                             Learn anytime, anywhere with our mobile-friendly platform
                         </p>
                     </div>