85 lines
3.3 KiB
TypeScript
85 lines
3.3 KiB
TypeScript
import { Timer, Github, Twitter, MessageCircle } from "lucide-react";
|
|
|
|
const Footer = () => {
|
|
return (
|
|
<footer className="border-t border-border bg-card/50 mt-auto">
|
|
<div className="container mx-auto px-6 py-12">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
{/* Brand */}
|
|
<div className="md:col-span-1">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Timer className="h-6 w-6 text-primary" />
|
|
<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.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Quick Links */}
|
|
<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>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Community */}
|
|
<div>
|
|
<h4 className="font-semibold text-foreground mb-4">Community</h4>
|
|
<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">
|
|
{link}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Social */}
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<MessageCircle className="h-5 w-5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-12 pt-8 border-t border-border flex flex-col sm:flex-row justify-between items-center gap-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
© 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">
|
|
Privacy
|
|
</a>
|
|
<a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
|
Terms
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|