Changed index to welcome page, and linked a separate home page to the nav bar

Author: chenfoonglim

client/src/pages/Testing/homeTest.tsx

@@ -0,0 +1,46 @@
+import { NavigationMenuLink } from "@radix-ui/react-navigation-menu";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+
+// Landing page has nav menu on top with a signup on the right
+// scrolling content underneath?
+export default function Home() {
+  return (
+    <div className="flex flex-row justify-center gap-6 p-6">
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Events</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <NavigationMenuLink>
+                <Link href={"/"}>INDEX</Link>
+              </NavigationMenuLink>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Clubs</NavigationMenuTrigger>
+          </NavigationMenuItem>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>
+              Idk another placeholder
+            </NavigationMenuTrigger>
+          </NavigationMenuItem>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>About us</NavigationMenuTrigger>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+      <div className="flex flex-row justify-end gap-6">
+        <Button>Join or something</Button>
+      </div>
+    </div>
+  );
+}

client/src/pages/home.tsx

@@ -1,46 +1,12 @@
-import { NavigationMenuLink } from "@radix-ui/react-navigation-menu";
-import Link from "next/link";
+import Layout from "./layout";
 
-import { Button } from "@/components/ui/button";
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-} from "@/components/ui/navigation-menu";
-
-// Landing page has nav menu on top with a signup on the right
-// scrolling content underneath?
 export default function Home() {
   return (
-    <div className="flex flex-row justify-center gap-6 p-6">
-      <NavigationMenu>
-        <NavigationMenuList>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>Events</NavigationMenuTrigger>
-            <NavigationMenuContent>
-              <NavigationMenuLink>
-                <Link href={"/"}>INDEX</Link>
-              </NavigationMenuLink>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>Clubs</NavigationMenuTrigger>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>
-              Idk another placeholder
-            </NavigationMenuTrigger>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>About us</NavigationMenuTrigger>
-          </NavigationMenuItem>
-        </NavigationMenuList>
-      </NavigationMenu>
-      <div className="flex flex-row justify-end gap-6">
-        <Button>Join or something</Button>
+    <Layout>
+      <div className="p-6">
+        <h1 className="text-2xl font-bold">Home</h1>
+        <p>This is the Home page.</p>
       </div>
-    </div>
+    </Layout>
   );
 }

client/src/pages/index.tsx

@@ -26,7 +26,7 @@ export default function Home() {
           fontSans.variable,
         )}
       >
-        <h1 className="text-3xl text-primary">HOME</h1>
+        <h1 className="text-3xl text-primary">Welcome Page</h1>
         <Button onClick={() => setClicked(true)}>
           {isLoading ? "Loading" : "Ping"}
         </Button>

client/src/pages/layout.tsx

@@ -1,4 +1,4 @@
-import { Bell,Home, Mail, User } from "lucide-react";
+import { Bell, Home, Mail, User } from "lucide-react";
 import Link from "next/link";
 
 type LayoutProps = {
@@ -12,7 +12,7 @@ export default function Layout({ children }: LayoutProps) {
 
       <nav className="fixed bottom-6 left-1/2 z-50 -translate-x-1/2">
         <div className="flex items-center gap-8 rounded-full bg-[#000912] px-8 py-4 shadow-lg">
-          <Link href="/" className="text-gray-300 hover:text-white">
+          <Link href="/home" className="text-gray-300 hover:text-white">
             <Home className="h-6 w-6" />
           </Link>