orus-dev/dev-run
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dynamic Footer

Browse Source
This commit is contained in:
selimaj-dev
2026-02-02 17:11:06 +01:00
parent a14f7c6685
commit 7fb3fb23bb
2 changed files with 51 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/layout.tsx
+1 -3
View File
@@ -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>
src/components/app/Footer.tsx
+50 -15
View File
@@ -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>