add contact us

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="45_9vnu">
-            <section className="px-6 max-w-6xl mx-auto" data-oid="n71w7jj">
+        <main className="pt-24" data-oid="mb8qk5q">
+            <section className="px-6 max-w-6xl mx-auto" data-oid="-wtdbza">
                 <div
                     className="flex flex-col md:flex-row items-center gap-12 text-gray-200"
-                    data-oid="tia36-q"
+                    data-oid="5__6:mx"
                 >
                     {game_id}
                 </div>

frontend/app/games/page.jsx

@@ -9,19 +9,19 @@ function GameCard({ game }) {
         <Link
             href={`/games/${game.id}`}
             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"
+            data-oid="e7l_iso"
         >
-            <div className="overflow-hidden rounded" data-oid="vsbexiv">
+            <div className="overflow-hidden rounded" data-oid="8dphux0">
                 <Image
                     src={game.thumbnail}
                     alt={game.name}
                     width={200}
                     height={200}
                     className="w-full h-auto group-hover:scale-105 transition-transform"
-                    data-oid="zjpfc9j"
+                    data-oid="y_p3r17"
                 />
             </div>
-            <h2 className="mt-2 text-xl font-bold text-center text-gray-300" data-oid="xye30dv">
+            <h2 className="mt-2 text-xl font-bold text-center text-gray-300" data-oid="damqhlf">
                 {game.name}
             </h2>
         </Link>
@@ -36,7 +36,7 @@ function SearchBar({ searchQuery, setSearchQuery }) {
             onChange={(e) => setSearchQuery(e.target.value)}
             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"
+            data-oid="trg9yl6"
         />
     );
 }
@@ -57,25 +57,25 @@ export default function GamesPage() {
     );
 
     return (
-        <main className="pt-14 min-h-screen" data-oid="_xi-jmj">
-            <section className="px-6 max-w-6xl mx-auto" data-oid="adjl_hw">
+        <main className="pt-14 min-h-screen" data-oid="-0h7zon">
+            <section className="px-6 max-w-6xl mx-auto" data-oid="01qjrzt">
                 <SearchBar
                     searchQuery={searchQuery}
                     setSearchQuery={setSearchQuery}
-                    data-oid="tnqssi6"
+                    data-oid="q65tjuk"
                 />
 
                 {filteredGames.length > 0 ? (
                     <div
                         className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"
-                        data-oid="1sux_h."
+                        data-oid="hpbi7du"
                     >
                         {filteredGames.map((game) => (
-                            <GameCard key={game.id} game={game} data-oid="92v2-u4" />
+                            <GameCard key={game.id} game={game} data-oid="2_b4wkl" />
                         ))}
                     </div>
                 ) : (
-                    <p className="text-center text-gray-400 text-xl" data-oid="9f4ylkk">
+                    <p className="text-center text-gray-400 text-xl" data-oid="nzxxbpw">
                         No games found.
                     </p>
                 )}

frontend/app/layout.tsx

@@ -9,68 +9,75 @@ const inter = Inter({ subsets: ['latin'] });
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
     return (
-        <html lang="en" className="overflow-x-hidden" data-oid="jst5_fj">
-            <head data-oid="33qs9le">
+        <html lang="en" className="overflow-x-hidden" data-oid="wj461ww">
+            <head data-oid="fm0wt8h">
                 <meta
                     name="viewport"
                     content="width=device-width, initial-scale=1.0"
-                    data-oid="bvrjhap"
+                    data-oid="czf1upe"
                 />
             </head>
-            <body className={`${inter.className} overflow-x-hidden`} data-oid="5j3:cdz">
+            <body className={`${inter.className} overflow-x-hidden`} data-oid="jpj55d-">
                 <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="kmqd70j"
+                    data-oid="92f8nn4"
                 >
                     <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="9d2kmuf"
+                        className="px-4 py-4 bg-gray-950/90 backdrop-blur-sm fixed w-full z-50 border-b border-gray-800/50"
+                        data-oid="n7z_dnt"
                     >
-                        <div className="flex justify-between items-center" data-oid="5lp1_:-">
-                            <div className="flex items-center space-x-2" data-oid="9mz3jck">
+                        <div className="flex justify-between items-center" data-oid="i.df4-z">
+                            <div className="flex items-center space-x-2" data-oid="e0-0u:r">
                                 <Image
                                     className="w-auto h-12 rounded-full"
                                     src="/images/logo.jpg"
                                     width={50}
                                     height={50}
                                     alt="Logo"
-                                    data-oid="wy_z2v:"
+                                    data-oid="nk5uy1m"
                                 />
 
                                 <h1
                                     className="text-xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent"
-                                    data-oid="1f3.ku0"
+                                    data-oid="72g8_m."
                                 >
                                     CAM
                                 </h1>
                             </div>
-                            <div className="md:flex space-x-6" data-oid="cl8h.:9">
+                            <div className="md:flex space-x-6" data-oid="qk-_9ag">
                                 <Link
                                     href="/"
                                     className="text-gray-300 hover:text-indigo-400 transition-colors"
-                                    data-oid="t0k91mw"
+                                    data-oid="2bvld4k"
                                 >
                                     Home
                                 </Link>
                                 <Link
                                     href="/games"
                                     className="text-gray-300 hover:text-indigo-400 transition-colors"
-                                    data-oid="tg9ok:f"
+                                    data-oid="gmala8q"
                                 >
                                     Games
                                 </Link>
+                                <Link
+                                    href="/#contact-us"
+                                    className="text-gray-300 hover:text-indigo-400 transition-colors"
+                                    data-oid="r5-mrc1"
+                                >
+                                    Contact Us
+                                </Link>
                             </div>
                         </div>
                     </nav>
-                    <div className="flex-grow pt-[60px] pb-12" data-oid="jtee0:r">
+                    <div className="flex-grow pt-[60px] pb-12" data-oid="t-r6jll">
                         {children}
                     </div>
-                    <footer className="mt-auto bg-gray-900 py-4" data-oid="n7e1_x1">
+                    <footer className="mt-auto bg-gray-900 py-4" data-oid="l-ta0fb">
                         <div
                             className="max-w-6xl mx-auto px-6 text-center text-gray-400"
-                            data-oid="k.3k0ev"
+                            data-oid="q42-kjm"
                         >
-                            <p data-oid="b:ubjn3">
+                            <p data-oid="4xn2nas">
                                 © 2025 Community for Active Mathematics. All rights reserved.
                             </p>
                         </div>

frontend/app/page.tsx

@@ -8,123 +8,124 @@ export default function Page() {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
 
     return (
-        <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">
+        <main className="pt-14 fade-scale-in" data-oid="iio4n2p">
+            <section className="px-6 max-w-6xl mx-auto" data-oid="rpm6b5v">
+                <div className="flex flex-col md:flex-row items-center gap-12" data-oid="592yvzq">
+                    <div className="flex-1 space-y-6" data-oid="92h6mfy">
+                        <h2 className="text-5xl font-bold text-gray-100" data-oid="7k_nq5_">
                             Making Math
-                            <span className="text-indigo-400" data-oid="tz1p116">
+                            <span className="text-indigo-400" data-oid="k9vw0fi">
                                 {' '}
                                 Fun{' '}
                             </span>
                             and
-                            <span className="text-purple-400" data-oid="35nl7zr">
+                            <span className="text-purple-400" data-oid="qe.y-lg">
                                 {' '}
                                 Engaging
                             </span>
                         </h2>
-                        <p className="text-lg text-gray-300" data-oid="yerqk-8">
+                        <p className="text-lg text-gray-300" data-oid="orx1hpw">
                             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="9y5:rck">
+                        <div className="flex gap-4" data-oid="si_1gx9">
                             <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="qb8hmfq"
+                                data-oid="cp8n0me"
                             >
                                 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=".hrfywb"
+                                data-oid="1iunr:o"
                             >
                                 Explore Games
                             </Link>
                         </div>
                     </div>
-                    <div className="flex-1 relative" data-oid=".8vk9x3">
+                    <div className="flex-1 relative" data-oid="iy1k9am">
                         <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="q-c4r.-"
+                            data-oid="6t3g8g-"
                         ></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="noig022"
+                            data-oid="jojrdr-"
                         ></div>
-                        <div className="relative" data-oid="2wiz.sp">
+                        <div className="relative" data-oid="ayic03:">
                             <div
                                 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"
+                                data-oid="af-fmjz"
                             >
-                                <div className="grid grid-cols-2 gap-4" data-oid="h4g37c8">
-                                    <div
+                                <div className="grid grid-cols-2 gap-4" data-oid="n76aql-">
+                                    <Link
+                                        href={'/games'}
                                         className="bg-indigo-950/50 p-4 rounded-lg border border-indigo-800/20 hover:border-indigo-700/30 transition-colors"
-                                        data-oid="f0hc80k"
+                                        data-oid="w1-cdp9"
                                     >
-                                        <span className="text-2xl" data-oid="s.fb2yi">
+                                        <span className="text-2xl" data-oid=".h200ax">
                                             🎮
                                         </span>
                                         <h3
                                             className="font-bold text-gray-300 mt-2"
-                                            data-oid="evtdw1b"
+                                            data-oid="tdnrwcg"
                                         >
                                             Math Games
                                         </h3>
-                                        <p className="text-sm text-gray-400" data-oid="3i00zb.">
+                                        <p className="text-sm text-gray-400" data-oid="1die_yr">
                                             Interactive learning through play
                                         </p>
-                                    </div>
+                                    </Link>
                                     <div
                                         className="bg-purple-950/50 p-4 rounded-lg border border-purple-800/20 hover:border-purple-700/30 transition-colors"
-                                        data-oid="_jme84m"
+                                        data-oid="ji0erm0"
                                     >
-                                        <span className="text-2xl" data-oid="854-0y9">
+                                        <span className="text-2xl" data-oid="k2zc-w7">
                                             🧮
                                         </span>
                                         <h3
                                             className="font-bold text-gray-300 mt-2"
-                                            data-oid="zy:7a6-"
+                                            data-oid="04pjpf_"
                                         >
                                             Tools
                                         </h3>
-                                        <p className="text-sm text-gray-400" data-oid="mtv6h3p">
+                                        <p className="text-sm text-gray-400" data-oid="l25qgc:">
                                             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="rembm90"
+                                        data-oid="s6r:mry"
                                     >
-                                        <span className="text-2xl" data-oid="_zh0tpg">
+                                        <span className="text-2xl" data-oid="fh-bdcq">
                                             👥
                                         </span>
                                         <h3
                                             className="font-bold text-gray-300 mt-2"
-                                            data-oid="xvtt9rr"
+                                            data-oid="zz8p.ms"
                                         >
                                             Community
                                         </h3>
-                                        <p className="text-sm text-gray-400" data-oid="nsafeen">
+                                        <p className="text-sm text-gray-400" data-oid="cqhan_1">
                                             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="ipdpp8t"
+                                        data-oid="43r8t08"
                                     >
-                                        <span className="text-2xl" data-oid=".uogre9">
+                                        <span className="text-2xl" data-oid="p:ia8gw">
                                             📈
                                         </span>
                                         <h3
                                             className="font-bold text-gray-300 mt-2"
-                                            data-oid="-fpsg:h"
+                                            data-oid="ftei:_y"
                                         >
                                             Progress
                                         </h3>
-                                        <p className="text-sm text-gray-400" data-oid="-ex.7he">
+                                        <p className="text-sm text-gray-400" data-oid="novh-x2">
                                             Track your learning journey
                                         </p>
                                     </div>
@@ -135,84 +136,190 @@ export default function Page() {
                 </div>
             </section>
 
-            <section id="learn-more" className="mt-32 px-6 max-w-6xl mx-auto" data-oid="q4xev:o">
+            <section id="learn-more" className="mt-32 px-6 max-w-6xl mx-auto" data-oid="5q1mp25">
                 <h2
                     className="text-3xl font-bold mb-12 text-gray-100 text-center"
-                    data-oid="l4jowqn"
+                    data-oid="_xuymbu"
                 >
                     Community for Active Mathematics
                 </h2>
-                <div className="grid md:grid-cols-3 gap-8" data-oid=":76i.-4">
+                <div className="grid md:grid-cols-3 gap-8" data-oid="xr4tvmv">
                 </div>
             </section>
 
-            <section id="why-choose-us" className="mt-32 px-6 max-w-6xl mx-auto" data-oid="qfja_rp">
+            <section id="why-choose-us" className="mt-32 px-6 max-w-6xl mx-auto" data-oid="fcu07.r">
                 <h2
                     className="text-3xl font-bold text-center mb-12 text-gray-100"
-                    data-oid="vyq0z7m"
+                    data-oid="o1pmly_"
                 >
                     Why Choose Us?
                 </h2>
-                <div className="grid md:grid-cols-3 gap-8" data-oid="ipq7p_-">
+                <div className="grid md:grid-cols-3 gap-8" data-oid="at5o7t6">
                     <div
                         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"
+                        data-oid="cmlyyj:"
                     >
                         <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="wh35o.2"
+                            data-oid="v08ly.p"
                         >
-                            <span className="text-2xl" data-oid="yz0u_iz">
+                            <span className="text-2xl" data-oid="z7l6ag7">
                                 🎯
                             </span>
                         </div>
-                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="msq-k-o">
+                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="kcq-xu_">
                             Engaging Content
                         </h3>
-                        <p className="text-gray-300" data-oid="6c3zydq">
+                        <p className="text-gray-300" data-oid="e7jq4cg">
                             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 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."
+                        data-oid="z::w5g4"
                     >
                         <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="v-irrsk"
+                            data-oid="87z0q2e"
                         >
-                            <span className="text-2xl" data-oid="qdmx5ng">
+                            <span className="text-2xl" data-oid="dwe24-n">
                                 🤝
                             </span>
                         </div>
-                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="ocqn5iw">
+                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="fgksh93">
                             Active Community
                         </h3>
-                        <p className="text-gray-300" data-oid="clxe_yr">
+                        <p className="text-gray-300" data-oid="2fqax4u">
                             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 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"
+                        data-oid="-xx5--4"
                     >
                         <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="zx22es1"
+                            data-oid="nao-.vw"
                         >
-                            <span className="text-2xl" data-oid="uh2dcky">
+                            <span className="text-2xl" data-oid="y8vf54p">
                                 📱
                             </span>
                         </div>
-                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="frcm9em">
+                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="2csys9d">
                             Accessible Learning
                         </h3>
-                        <p className="text-gray-300" data-oid="1_rn785">
+                        <p className="text-gray-300" data-oid="-8vn_we">
                             Learn anytime, anywhere with our mobile-friendly platform
                         </p>
                     </div>
                 </div>
             </section>
+            <section id="contact-us" className="mt-16 px-6 max-w-6xl mx-auto" data-oid="pzh-00m">
+                <div className="text-center mb-4" data-oid="0qo0e9v">
+                    <h2 className="text-3xl font-bold text-gray-100" data-oid="txu1i85">
+                        Get in Touch
+                    </h2>
+                    <p className="text-gray-400 mt-4 max-w-2xl mx-auto" data-oid="ychht0l">
+                        Have questions or suggestions? We'd love to hear from you. Here's how you
+                        can reach us.
+                    </p>
+                </div>
+                <div className="grid md:grid-cols-3 gap-4" data-oid="dmol.t8">
+                    <div
+                        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 group"
+                        data-oid="0u7cmmg"
+                    >
+                        <div
+                            className="w-12 h-12 bg-indigo-950/50 rounded-full flex items-center justify-center mb-4 border border-indigo-800/20 group-hover:border-indigo-500/50 transition-colors"
+                            data-oid="94dk0ch"
+                        >
+                            <span className="text-2xl" data-oid="big6on:">
+                                📧
+                            </span>
+                        </div>
+                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="5ufcl7p">
+                            Email Us
+                        </h3>
+                        <p className="text-gray-300 mb-3" data-oid="gctvet5">
+                            For general inquiries and support
+                        </p>
+                        <a
+                            href="mailto:#"
+                            className="text-indigo-600 hover:text-indigo-400 transition-colors"
+                            data-oid="qjt:zrg"
+                        >
+                            Email
+                        </a>
+                    </div>
+                    <div
+                        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 group"
+                        data-oid="skepks5"
+                    >
+                        <div
+                            className="w-12 h-12 bg-purple-950/50 rounded-full flex items-center justify-center mb-4 border border-purple-800/20 group-hover:border-purple-500/50 transition-colors"
+                            data-oid="nah:p-8"
+                        >
+                            <span className="text-2xl" data-oid="9r59gi2">
+                                💬
+                            </span>
+                        </div>
+                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="_pnmx.7">
+                            Community
+                        </h3>
+                        <p className="text-gray-300 mb-3" data-oid="amvk.w5">
+                            Join our Discord community
+                        </p>
+                        <a
+                            href="#"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-purple-600 hover:text-purple-400 transition-colors"
+                            data-oid="pmfyfue"
+                        >
+                            Discord
+                        </a>
+                    </div>
+                    <div
+                        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 group"
+                        data-oid="5usrto8"
+                    >
+                        <div
+                            className="w-12 h-12 bg-pink-950/50 rounded-full flex items-center justify-center mb-4 border border-pink-800/20 group-hover:border-pink-500/50 transition-colors"
+                            data-oid="-e161sv"
+                        >
+                            <span className="text-2xl" data-oid="thty60c">
+                                📱
+                            </span>
+                        </div>
+                        <h3 className="font-bold text-xl mb-2 text-gray-100" data-oid="az-.pfs">
+                            Social Media
+                        </h3>
+                        <p className="text-gray-300 mb-3" data-oid="w7pm51i">
+                            Follow us for updates
+                        </p>
+                        <div className="flex gap-4 justify-center" data-oid="fi0r3tc">
+                            <a
+                                href="https://www.facebook.com/mathslabsl"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-blue-600 hover:text-blue-400 transition-colors"
+                                data-oid="cykmscr"
+                            >
+                                Facebook
+                            </a>
+                            <a
+                                href="https://www.youtube.com/@mathslabsrilanka"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-red-600 hover:text-red-400 transition-colors"
+                                data-oid="33524uv"
+                            >
+                                Youtube
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </section>
         </main>
     );
 }