From 9cf968b26bc67bf5fa87365587f2641adfbaced7 Mon Sep 17 00:00:00 2001
From: Chris Parsons <chrisparsons1127@gmail.com>
Date: Wed, 22 Apr 2026 22:20:19 -0700
Subject: [PATCH] Add footer to website.

---
 app/components/marketing/Footer.tsx      | 32 ++++++++++++++++++++++++
 app/components/marketing/LandingPage.tsx | 28 ---------------------
 app/root.tsx                             | 10 +++++---
 3 files changed, 39 insertions(+), 31 deletions(-)
 create mode 100644 app/components/marketing/Footer.tsx

diff --git a/app/components/marketing/Footer.tsx b/app/components/marketing/Footer.tsx
new file mode 100644
index 0000000..a50f889
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/components/marketing/LandingPage.tsx b/app/components/marketing/LandingPage.tsx
index 9e5984b..a6082c3 100644
--- a/app/components/marketing/LandingPage.tsx
+++ b/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>
   );
 }
diff --git a/app/root.tsx b/app/root.tsx
index a61ab0b..2040ee1 100644
--- a/app/root.tsx
+++ b/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>