Merge pull request #177 from BigBen-7/layoutFix

Fix: Fix app layout and route

frontend/app/(root)/forgot-password/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const page = () => {
+  return (
+    <div>Forgot password email verification page.</div>
+  )
+}
+
+export default page

frontend/app/(root)/game/page.tsx

@@ -0,0 +1,11 @@
+import Keyboard from "../../../components/Keyboard";
+import WordGrid from "../../../components/WordGrid.jsx";
+
+export default function page() {
+  return (
+    <div>
+        <WordGrid />
+        <Keyboard />
+    </div>
+  );
+}

frontend/app/(root)/layout.js

@@ -1,6 +1,14 @@
-import { ReactNode } from "react";
+import Navbar from "../../components/Navbar";
+import { AppProvider } from "../../context/AppContext";
 
 const Layout = ({ children }) => {
-  return <main>{children}</main>;
+  return (
+    <main>
+      <AppProvider>
+        <Navbar />
+        {children}
+      </AppProvider>
+    </main>
+  );
 };
 export default Layout;

frontend/app/(root)/otp/page.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const page = () => {
+  return <div>OTP page</div>;
+};
+
+export default page;

frontend/app/(root)/page.jsx

@@ -1,11 +1,9 @@
-import Keyboard from "../../components/Keyboard.jsx";
-import WordGrid from "../../components/WordGrid.jsx";
+import LandingPage from "../../components/LandingPage";
 
-export default function page() {
+export default function Page() {
   return (
-    <div>
-      <WordGrid />
-      <Keyboard />
+    <div className="bg-[#ffffff]">
+      <LandingPage  />
     </div>
   );
 }

frontend/app/(root)/reset-password/page.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const page = () => {
+  return <div>Reset Password</div>;
+};
+
+export default page;

frontend/app/(root)/setting/page.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const page = () => {
+  return <div>Settings</div>;
+};
+
+export default page;

frontend/app/(root)/stats/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const page = () => {
+  return (
+    <div>stats</div>
+  )
+}
+
+export default page

frontend/components/LandingPage.jsx

@@ -20,17 +20,17 @@ const LandingPage = () => {
   }, []);
   return (
     <div className="w-full h-full relative px-4 pb-2  sm:px-10 xl:px-20">
-      <header
+      {/* <header
         className={`fixed inset-x-0 top-0 z-50 py-4 lg:py-5 sm:px-10 xl:px-20 bg-white transition-shadow ${
           hasShadow ? "shadow-[0_1px_4px_rgba(0,0,0,0.05)]" : "shadow-none"
         }`}
       >
-      </header>
+      </header> */}
 
       <div className="w-full h-full max-w-7xl mx-auto">
         <div className="mx-auto justify-between lg:flex gap-10 xl:gap-24 mt-8 ">
           <div className="lg:mx-0 pt-8 sm:pt-10 lg:pb-1 xl:max-w-[548px] ">
-            <h1 className="mt-10 lg:mt-32 text-3xl text-[#29296E] font-roboto sm:pr-20 break-words lg:pr-0 sm:text-5xl font-semibold sm:leading-[58px] lg:leading-[70px] tracking-[1.2px]">
+            <h1 className=" text-3xl text-[#29296E] font-roboto sm:pr-20 break-words lg:pr-0 sm:text-5xl font-semibold sm:leading-[58px] lg:leading-[70px] tracking-[1.2px]">
               Get 6 Chances to guess a 5-letter word.
             </h1>
             <p className="mt-6 text-lg text-black sm:text-[24px] font-normal break-words leading-[40px] w-full">
@@ -52,8 +52,8 @@ const LandingPage = () => {
               </Link>
             </div>
           </div>
-          <div className="relative w-full h-auto min-h-[400px] lg:min-h-[630px] flex items-center justify-center">
-            <div className="relative w-full h-full aspect-square max-w-[630px] max-h-[630px]">
+          <div className="relative w-full h-auto min-h-[400px] flex items-center justify-center">
+            <div className="relative w-full h-full max-w-[630px] max-h-[630px]">
               <Image
                 src="/landingpageImg.svg"
                 alt="Word game illustration"