From 7fb3fb23bb1640eb1de557e31d27909e8d7160d2 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 2 Feb 2026 17:11:06 +0100
Subject: [PATCH] dynamic Footer

---
 src/app/layout.tsx            |  4 +--
 src/components/app/Footer.tsx | 65 +++++++++++++++++++++++++++--------
 2 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 51c2923..87e856d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -31,9 +31,7 @@ export default function RootLayout({
       >
         <div className="min-h-screen flex flex-col">
           <Navbar />
-          <main className="flex-1">
-            {children}
-          </main>
+          <main className="flex-1">{children}</main>
           <Footer />
         </div>
       </body>
diff --git a/src/components/app/Footer.tsx b/src/components/app/Footer.tsx
index 5729fdb..6b944c8 100644
--- a/src/components/app/Footer.tsx
+++ b/src/components/app/Footer.tsx
@@ -1,6 +1,13 @@
+"use client";
+
 import { Timer, Github, Twitter, MessageCircle } from "lucide-react";
+import { usePathname } from "next/navigation";
 
 const Footer = () => {
+  const pathname = usePathname();
+
+  if (pathname !== "/") return null;
+
   return (
     <footer className="border-t border-border bg-card/50 mt-auto">
       <div className="container mx-auto px-6 py-12">
@@ -8,13 +15,18 @@ const Footer = () => {
           {/* Brand */}
           <div className="md:col-span-1">
             <div className="flex items-center gap-2 mb-4">
-              <img alt="Logo" src="/dev-run.svg" className="h-8 w-8 text-primary transition-transform duration-300 group-hover:scale-110" />
+              <img
+                alt="Logo"
+                src="/dev-run.svg"
+                className="h-8 w-8 text-primary transition-transform duration-300 group-hover:scale-110"
+              />
               <span className="text-lg font-bold">
                 Dev<span className="text-primary">Run</span>
               </span>
             </div>
             <p className="text-sm text-muted-foreground leading-relaxed">
-              The competitive programming platform for speedrunners. Race the clock, not the grind.
+              The competitive programming platform for speedrunners. Race the
+              clock, not the grind.
             </p>
           </div>
 
@@ -22,13 +34,18 @@ const Footer = () => {
           <div>
             <h4 className="font-semibold text-foreground mb-4">Quick Links</h4>
             <ul className="space-y-2">
-              {["Problems", "Leaderboards", "Categories", "Rules"].map((link) => (
-                <li key={link}>
-                  <a href="#" className="text-sm text-muted-foreground hover:text-primary transition-colors hover-underline">
-                    {link}
-                  </a>
-                </li>
-              ))}
+              {["Problems", "Leaderboards", "Categories", "Rules"].map(
+                (link) => (
+                  <li key={link}>
+                    <a
+                      href="#"
+                      className="text-sm text-muted-foreground hover:text-primary transition-colors hover-underline"
+                    >
+                      {link}
+                    </a>
+                  </li>
+                ),
+              )}
             </ul>
           </div>
 
@@ -38,7 +55,10 @@ const Footer = () => {
             <ul className="space-y-2">
               {["Discord", "Reddit", "Twitter", "GitHub"].map((link) => (
                 <li key={link}>
-                  <a href="#" className="text-sm text-muted-foreground hover:text-primary transition-colors hover-underline">
+                  <a
+                    href="#"
+                    className="text-sm text-muted-foreground hover:text-primary transition-colors hover-underline"
+                  >
                     {link}
                   </a>
                 </li>
@@ -50,13 +70,22 @@ const Footer = () => {
           <div>
             <h4 className="font-semibold text-foreground mb-4">Connect</h4>
             <div className="flex gap-3">
-              <a href="#" className="p-2 rounded-lg bg-secondary text-muted-foreground hover:text-primary hover:bg-secondary/80 transition-all">
+              <a
+                href="#"
+                className="p-2 rounded-lg bg-secondary text-muted-foreground hover:text-primary hover:bg-secondary/80 transition-all"
+              >
                 <Github className="h-5 w-5" />
               </a>
-              <a href="#" className="p-2 rounded-lg bg-secondary text-muted-foreground hover:text-primary hover:bg-secondary/80 transition-all">
+              <a
+                href="#"
+                className="p-2 rounded-lg bg-secondary text-muted-foreground hover:text-primary hover:bg-secondary/80 transition-all"
+              >
                 <Twitter className="h-5 w-5" />
               </a>
-              <a href="#" className="p-2 rounded-lg bg-secondary text-muted-foreground hover:text-primary hover:bg-secondary/80 transition-all">
+              <a
+                href="#"
+                className="p-2 rounded-lg bg-secondary text-muted-foreground hover:text-primary hover:bg-secondary/80 transition-all"
+              >
                 <MessageCircle className="h-5 w-5" />
               </a>
             </div>
@@ -68,10 +97,16 @@ const Footer = () => {
             © 2026 DevRun. Made with ⚡ by runners, for runners.
           </p>
           <div className="flex gap-6">
-            <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <a
+              href="#"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
               Privacy
             </a>
-            <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <a
+              href="#"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
               Terms
             </a>
           </div>