Updated Frontend

2026-02-21 15:02:57 +05:30
parent a8a756457f
commit 29fc82c104
12 changed files with 3767 additions and 72 deletions
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -0,0 +1,111 @@
+"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>
+  );
+}