Merge pull request #139 from pawelek3113/main

fix: body height and footer position

app/(footer)/layout.tsx

@@ -0,0 +1,14 @@
+import Footer from "@/components/Footer"
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      {children}
+      <Footer />
+    </>
+  )
+}

app/page.tsx → app/(footer)/page.tsx

@@ -9,8 +9,8 @@ import { FiChevronsDown } from "react-icons/fi"
 
 export default async function Home() {
   return (
-    <main className="flex flex-grow flex-col items-center gap-7">
-      <section className="flex w-full flex-col items-center px-6 pb-24 pt-32 lg:pt-64">
+    <section className="flex flex-grow flex-col items-center gap-7">
+      <div className="flex w-full flex-col items-center px-6 pb-24 pt-32 lg:pt-64">
         <div className="absolute -left-1 top-8 -z-10 h-80 w-40 bg-gradient-to-br from-primary from-5% opacity-30 blur-3xl filter sm:w-96" />
         <div className="flex flex-col items-center gap-8">
           <div className="flex flex-col items-center gap-4">
@@ -57,7 +57,7 @@ export default async function Home() {
           Learn more
           <FiChevronsDown className="animate-bounce text-primary" />
         </Link>
-      </section>
+      </div>
 
       <DiscordInput />
       <Features />
@@ -72,6 +72,6 @@ export default async function Home() {
       </section>
 
       <InvitationCard />
-    </main>
+    </section>
   )
 }

app/globals.css

@@ -58,6 +58,6 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply flex min-h-screen flex-col bg-background text-foreground;
   }
 }

app/layout.tsx

@@ -1,5 +1,4 @@
 import authOptions from "@/app/api/auth/options"
-import Footer from "@/components/Footer"
 import Navbar from "@/components/Navbar"
 import SessionProvider from "@/components/providers/SessionProvider"
 import { ThemeProvider } from "@/components/providers/ThemeProvider"
@@ -29,8 +28,7 @@ export default async function RootLayout({
         <SessionProvider session={session}>
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
             <Navbar />
-            {children}
-            <Footer />
+            <main className="flex-1">{children}</main>
           </ThemeProvider>
         </SessionProvider>
       </body>

components/Footer.tsx

@@ -4,9 +4,9 @@ import IconButton from "./IconButton"
 
 export default function Footer() {
   return (
-    <div className="flex flex-col">
+    <footer className="flex flex-col">
       <Separator />
-      <footer className="m-auto flex w-full max-w-7xl flex-col justify-between px-6 py-4">
+      <div className="m-auto flex w-full max-w-7xl flex-col justify-between px-6 py-4">
         <div className="flex w-full flex-col md:flex-row md:justify-between">
           <div>
             <h1 className="text-lg font-bold leading-10 tracking-wider">
@@ -66,7 +66,7 @@ export default function Footer() {
             />
           </div>
         </div>
-      </footer>
-    </div>
+      </div>
+    </footer>
   )
 }