Add footer to website.

app/components/marketing/Footer.tsx

@@ -0,0 +1,32 @@
+import { Link } from "react-router";
+
+const FOOTER_LINKS = [
+  { label: "Home", to: "/" },
+  { label: "Rules", to: "/rules" },
+  { label: "How to Play", to: "/how-to-play" },
+  { label: "Support", to: "/support" },
+  { label: "Privacy Policy", to: "/privacy-policy" },
+];
+
+export function Footer() {
+  return (
+    <footer
+      className="flex flex-col items-start gap-3 border-t px-10 py-5 text-xs sm:flex-row sm:items-center sm:justify-between"
+      style={{ color: "rgb(255 255 255 / 28%)" }}
+    >
+      <span>© 2026 Brackt. All rights reserved.</span>
+      <nav className="flex gap-5">
+        {FOOTER_LINKS.map(({ label, to }) => (
+          <Link
+            key={label}
+            to={to}
+            className="transition-colors hover:text-muted-foreground"
+            style={{ color: "inherit" }}
+          >
+            {label}
+          </Link>
+        ))}
+      </nav>
+    </footer>
+  );
+}

app/components/marketing/LandingPage.tsx

@@ -300,14 +300,6 @@ const FEATURES = [
   },
 ];
 
-const FOOTER_LINKS = [
-  { label: "Home", to: "/" },
-  { label: "Rules", to: "/rules" },
-  { label: "How to Play", to: "/how-to-play" },
-  { label: "Support", to: "/support" },
-  { label: "Privacy Policy", to: "/privacy-policy" },
-];
-
 // ─── Main Landing Page ────────────────────────────────────────────────────────
 
 export function LandingPage() {
@@ -442,26 +434,6 @@ export function LandingPage() {
           </Button>
         </div>
       </section>
-
-      {/* ── Footer ── */}
-      <footer
-        className="flex flex-col items-start gap-3 border-t px-10 py-5 text-xs sm:flex-row sm:items-center sm:justify-between"
-        style={{ color: "rgb(255 255 255 / 28%)" }}
-      >
-        <span>© 2026 Brackt. All rights reserved.</span>
-        <nav className="flex gap-5">
-          {FOOTER_LINKS.map(({ label, to }) => (
-            <Link
-              key={label}
-              to={to}
-              className="transition-colors hover:text-muted-foreground"
-              style={{ color: "inherit" }}
-            >
-              {label}
-            </Link>
-          ))}
-        </nav>
-      </footer>
     </div>
   );
 }

app/root.tsx

@@ -17,6 +17,7 @@ import { ClerkProvider } from "@clerk/react-router";
 import { dark } from "@clerk/themes";
 import { Toaster } from "~/components/ui/sonner";
 import { BracktGradients } from "~/components/ui/BracktGradients";
+import { Footer } from "~/components/marketing/Footer";
 import { isUserAdminByClerkId } from "~/models/user";
 import { AlertCircle, FileQuestion, Lock, ShieldOff, ServerCrash } from "lucide-react";
 
@@ -83,9 +84,12 @@ export default function App({ loaderData }: Route.ComponentProps) {
       {isDraftRoute ? (
         <Outlet />
       ) : (
-        <main>
+        <>
-          <Outlet />
+          <main>
-        </main>
+            <Outlet />
+          </main>
+          <Footer />
+        </>
       )}
       <Toaster />
     </ClerkProvider>