112 lines
3.9 KiB
TypeScript
112 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Diamond, Mail, Instagram, Twitter } from "lucide-react";
|
|
|
|
const footerLinks = {
|
|
competition: [
|
|
{ href: "/register", label: "Register" },
|
|
{ href: "/submit", label: "Submit Art" },
|
|
{ href: "/gallery", label: "Gallery" },
|
|
{ href: "/rules", label: "Rules" },
|
|
],
|
|
information: [
|
|
{ href: "/about", label: "About" },
|
|
{ href: "/faq", label: "FAQ" },
|
|
{ href: "/contact", label: "Contact" },
|
|
],
|
|
};
|
|
|
|
export default function Footer() {
|
|
return (
|
|
<footer className="bg-black text-white">
|
|
{/* Main Footer */}
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
|
{/* Brand */}
|
|
<div className="lg:col-span-2">
|
|
<Link href="/" className="flex items-center gap-2 mb-6">
|
|
<Diamond className="w-8 h-8 text-lime-400" />
|
|
<span className="text-2xl font-black tracking-tight">ARTSPLASH</span>
|
|
</Link>
|
|
<p className="text-zinc-400 max-w-md mb-6 leading-relaxed">
|
|
ArtSplash is SJEC's premier art competition celebrating creativity
|
|
across Digital Art, Paintings, and Poster Making. Join us in this
|
|
vibrant celebration of artistic expression.
|
|
</p>
|
|
<div className="flex gap-4">
|
|
<a
|
|
href="#"
|
|
className="w-10 h-10 rounded-full bg-zinc-800 flex items-center justify-center hover:bg-lime-400 hover:text-black transition-colors"
|
|
>
|
|
<Instagram className="w-5 h-5" />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="w-10 h-10 rounded-full bg-zinc-800 flex items-center justify-center hover:bg-lime-400 hover:text-black transition-colors"
|
|
>
|
|
<Twitter className="w-5 h-5" />
|
|
</a>
|
|
<a
|
|
href="mailto:artsplash@sjec.ac.in"
|
|
className="w-10 h-10 rounded-full bg-zinc-800 flex items-center justify-center hover:bg-lime-400 hover:text-black transition-colors"
|
|
>
|
|
<Mail className="w-5 h-5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Competition Links */}
|
|
<div>
|
|
<h3 className="text-lg font-bold mb-4">Competition</h3>
|
|
<ul className="space-y-3">
|
|
{footerLinks.competition.map((link) => (
|
|
<li key={link.href}>
|
|
<Link
|
|
href={link.href}
|
|
className="text-zinc-400 hover:text-lime-400 transition-colors"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Information Links */}
|
|
<div>
|
|
<h3 className="text-lg font-bold mb-4">Information</h3>
|
|
<ul className="space-y-3">
|
|
{footerLinks.information.map((link) => (
|
|
<li key={link.href}>
|
|
<Link
|
|
href={link.href}
|
|
className="text-zinc-400 hover:text-lime-400 transition-colors"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Bar */}
|
|
<div className="border-t border-zinc-800">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div className="flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<p className="text-zinc-500 text-sm">
|
|
© 2026 ArtSplash. All rights reserved.
|
|
</p>
|
|
<div className="flex items-center gap-2 text-zinc-500 text-sm">
|
|
<span>Powered by</span>
|
|
<span className="text-lime-400 font-bold">Sceptix</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|