ui/ create footer component

src/app/layout.tsx

@@ -3,6 +3,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { SiteHeader } from "@/components/site-header";
+import { SiteFooter } from "@/components/site-footer";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -38,6 +39,7 @@ export default function RootLayout({
         >
           <SiteHeader />
           {children}
+          <SiteFooter />
         </ThemeProvider>
       </body>
     </html>

src/app/page.tsx

@@ -9,7 +9,6 @@ import { StarterPromptModal } from "@/components/starter-prompt-modal";
 export default function Home() {
   const { isAuthReady, isAiReady, loading } = useDiagnostics();
   return (
-    <div className="min-h-screen flex flex-col grain">
     <main className="flex-1 container mx-auto px-4 py-12">
       <div className="max-w-4xl mx-auto text-center space-y-8">
         <div className="space-y-4">
@@ -128,24 +127,5 @@ export default function Home() {
         </div>
       </div>
     </main>
-
-      <footer className="border-t py-8 text-center text-sm text-muted-foreground">
-        <div className="container mx-auto px-4">
-          <p className="mb-2">Boilerplate template by Leon van Zyl</p>
-          <p>
-            Visit{" "}
-            <a
-              href="https://youtube.com/@leonvanzyl"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-primary hover:underline"
-            >
-              @leonvanzyl on YouTube
-            </a>{" "}
-            for tutorials on using this template
-          </p>
-        </div>
-      </footer>
-    </div>
   );
 }

src/components/site-footer.tsx

@@ -0,0 +1,24 @@
+import { GitHubStars } from "./ui/github-stars";
+
+export function SiteFooter() {
+  return (
+    <footer className="border-t py-6 text-center text-sm text-muted-foreground">
+      <div className="container mx-auto px-4">
+        <div className="flex flex-col items-center space-y-3">
+          <GitHubStars repo="leonvanzyl/nextjs-better-auth-postgresql-starter-kit" />
+          <p>
+            Built using Boilerplate Template by{" "}
+            <a
+              href="https://youtube.com/@leonvanzyl"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:underline"
+            >
+              Leon van Zyl
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/components/site-header.tsx

@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { UserProfile } from "@/components/auth/user-profile";
 import { ModeToggle } from "./ui/mode-toggle";
-import { GitHubStars } from "./ui/github-stars";
 
 export function SiteHeader() {
   return (
@@ -17,7 +16,6 @@ export function SiteHeader() {
         </h1>
         <div className="flex items-center gap-4">
           <UserProfile />
-          <GitHubStars repo="leonvanzyl/nextjs-better-auth-postgresql-starter-kit" />
           <ModeToggle />
         </div>
       </div>