navigation

app/layout.tsx

@@ -1,6 +1,7 @@
 import { Metadata } from "next"
 import Footer from "../components/Footer/Footer"
 import Navbar from "../components/Navbar/Navbar"
+import NextUiProvider from "../providers/NextUiProvider"
 
 import "../styles/tailwind.css"
 
@@ -31,11 +32,13 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <div className="flex min-h-screen flex-col justify-between">
-          <Navbar />
-          <main className="mb-auto min-h-screen bg-primary-50">{children}</main>
-          <Footer />
-        </div>
+        <NextUiProvider>
+          <div className="flex min-h-screen flex-col justify-between bg-primary-50">
+            <Navbar />
+            <main className="mb-auto h-auto">{children}</main>
+            <Footer />
+          </div>
+        </NextUiProvider>
       </body>
     </html>
   )

app/page.tsx

@@ -1,8 +1,4 @@
-import { getProjects } from "./actions"
-
 export default async function Web() {
-  const projects = await getProjects()
-
   return (
     <section>
       <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
@@ -10,14 +6,6 @@ export default async function Web() {
           <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl">
             IsaCon
           </h1>
-          {projects.map((project) => (
-            <div
-              key={project.id}
-              className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl"
-            >
-              {project.name}
-            </div>
-          ))}
         </div>
       </div>
     </section>

app/projects/page.tsx

@@ -0,0 +1,22 @@
+import { getProjects } from "../actions"
+
+export default async function Projects() {
+  const projects = await getProjects()
+
+  return (
+    <section>
+      <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
+        <div className="mx-auto place-self-center">
+          {projects.map((project) => (
+            <div
+              key={project.id}
+              className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl"
+            >
+              {project.name}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}