sudo-rsingh/ML4E
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updating the footerr

Browse Source
This commit is contained in:
Shoaib1M
2026-01-14 23:13:00 +05:30
parent aa905c7fd5
commit 95e6a57fd8
1 changed files with 107 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/app/components/Footer.jsx
View File

@@ -1,5 +1,6 @@
"use client";
import React from "react";
import { Linkedin, Instagram, Mail, Phone } from "lucide-react";
const Glow = ({ className = "" }) => (
<div
@@ -12,69 +13,123 @@ export default function Footer() {
const year = new Date().getFullYear();
return (
<footer
className="
relative z-30 w-full overflow-hidden
bg-[#0b1117] text-slate-200 isolate flex flex-col items-center
"
>
{/* <Glow /> */}
<footer className="relative z-30 w-full overflow-hidden bg-[#0b1117] text-slate-200 border-t border-cyan-500/20 font-sans">
<Glow />
{/* Container */}
<div className="relative w-full max-w-4xl px-4 py-12 sm:px-8 text-center">
{/* Title */}
<h2 className="mb-8 text-3xl font-extrabold tracking-wide text-cyan-200 drop-shadow-[0_0_18px_rgba(0,255,255,.45)]">
<div className="relative w-full max-w-7xl mx-auto px-4 py-16 sm:px-8 flex flex-col items-center">
<h2 className="mb-12 text-4xl md:text-6xl font-extrabold tracking-widest font-[Orbitron] text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-400 to-purple-400 drop-shadow-[0_0_15px_rgba(34,211,238,0.5)]">
ML4E
</h2>
{/* Cards */}
<div className="grid gap-8 md:grid-cols-2 place-items-center">
{/* Faculty Advisor */}
<div className="w-full max-w-sm rounded-2xl bg-white/5 p-6 ring-1 ring-white/10 backdrop-blur text-left sm:text-center md:text-left">
<h3 className="mb-2 text-2xl font-bold text-cyan-200 drop-shadow-[0_0_12px_rgba(0,255,255,.4)]">
Faculty Advisor
</h3>
<p className="text-base leading-6 text-slate-300">
Prof. Khalid Mirza <br />
Assistant Professor, BM-BT Department
</p>
<p className="mt-2 text-sm text-slate-400">
Phone: 0661-26462458
</p>
<a
href="mailto:swaina@nitrkl.ac.in"
className="mt-3 inline-flex items-center justify-center rounded-md bg-cyan-900/30 px-3 py-2 text-cyan-200 hover:bg-cyan-800/40 transition"
>
✉️ baigm@nitrkl.ac.in
</a>
<div className="grid gap-6 md:gap-8 md:grid-cols-2 w-full max-w-4xl mb-16">
<div className="group relative w-full h-full p-1 rounded-2xl bg-gradient-to-b from-white/10 to-white/5 hover:from-cyan-500/50 hover:to-blue-600/50 transition-all duration-500">
<div className="relative h-full flex flex-col items-start p-8 rounded-xl bg-[#0b1117]/90 backdrop-blur-xl border border-white/10 group-hover:border-cyan-500/30 transition-all duration-300">
<div className="absolute inset-0 bg-cyan-500/5 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<h3 className="relative z-10 mb-4 text-2xl font-bold text-cyan-200 font-[Orbitron] tracking-wide group-hover:text-cyan-100 transition-colors">
Faculty Advisor
</h3>
<div className="relative z-10 space-y-3 flex-grow text-left">
<div>
<p className="text-lg font-semibold text-slate-100">
Prof. Khalid Mirza
</p>
<p className="text-sm text-cyan-400/80 font-medium">
Assistant Professor, BM-BT Department
</p>
</div>
<div className="flex items-center gap-2 text-slate-400 text-sm group-hover:text-slate-300 transition-colors">
<Phone size={14} /> <span>0661-26462458</span>
</div>
</div>
<a
href="mailto:swaina@nitrkl.ac.in"
className="relative z-10 mt-6 w-full flex items-center justify-center gap-2 rounded-lg bg-cyan-950/50 border border-cyan-500/20 px-4 py-3 text-sm text-cyan-300 hover:bg-cyan-500/20 hover:border-cyan-400/50 hover:text-white hover:shadow-[0_0_15px_rgba(34,211,238,0.2)] transition-all duration-300"
>
<Mail size={16} /> baigm@nitrkl.ac.in
</a>
</div>
</div>
{/* President */}
<div className="w-full max-w-sm rounded-2xl bg-white/5 p-6 ring-1 ring-white/10 backdrop-blur text-left sm:text-center md:text-left">
<h3 className="mb-2 text-2xl font-bold text-cyan-200 drop-shadow-[0_0_12px_rgba(0,255,255,.4)]">
President
</h3>
<p className="text-base leading-6 text-slate-300">
Kunal Kushwaha
</p>
<p className="mt-2 text-sm text-slate-400">Phone: +91 70676 21946</p>
<a
href="mailto:122me0896@nitrkl.ac.in"
className="mt-3 inline-flex items-center justify-center rounded-md bg-cyan-900/30 px-3 py-2 text-cyan-200 hover:bg-cyan-800/40 transition"
>
✉️ 123ee0291@nitrkl.ac.in
</a>
<div className="group relative w-full h-full p-1 rounded-2xl bg-gradient-to-b from-white/10 to-white/5 hover:from-purple-500/50 hover:to-pink-600/50 transition-all duration-500">
<div className="relative h-full flex flex-col items-start p-8 rounded-xl bg-[#0b1117]/90 backdrop-blur-xl border border-white/10 group-hover:border-purple-500/30 transition-all duration-300">
<div className="absolute inset-0 bg-purple-500/5 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<h3 className="relative z-10 mb-4 text-2xl font-bold text-purple-200 font-[Orbitron] tracking-wide group-hover:text-purple-100 transition-colors">
President
</h3>
<div className="relative z-10 space-y-3 flex-grow text-left">
<div>
<p className="text-lg font-semibold text-slate-100">
Kunal Kushwaha
</p>
<p className="text-sm text-purple-400/80 font-medium">
Club President
</p>
</div>
<div className="flex items-center gap-2 text-slate-400 text-sm group-hover:text-slate-300 transition-colors">
<Phone size={14} /> <span>+91 70676 21946</span>
</div>
</div>
<a
href="mailto:122me0896@nitrkl.ac.in"
className="relative z-10 mt-6 w-full flex items-center justify-center gap-2 rounded-lg bg-purple-950/30 border border-purple-500/20 px-4 py-3 text-sm text-purple-300 hover:bg-purple-500/20 hover:border-purple-400/50 hover:text-white hover:shadow-[0_0_15px_rgba(168,85,247,0.2)] transition-all duration-300"
>
<Mail size={16} /> 123ee0291@nitrkl.ac.in
</a>
</div>
</div>
</div>
{/* Bottom line */}
<div className="mt-12 rounded-2xl bg-white/5 p-5 text-center ring-1 ring-white/10 backdrop-blur">
<p className="text-base font-semibold tracking-wide text-cyan-200 drop-shadow-[0_0_10px_rgba(0,255,255,.4)]">
Made with ❤️ by Team ML4E
<div className="w-full max-w-4xl flex items-center gap-4 mb-8">
<div className="h-px flex-1 bg-gradient-to-r from-transparent via-cyan-500/30 to-transparent"></div>
<span className="text-xs font-[Orbitron] tracking-[0.2em] text-cyan-500/60 uppercase">
Connect With Us
</span>
<div className="h-px flex-1 bg-gradient-to-r from-transparent via-cyan-500/30 to-transparent"></div>
</div>
<div className="flex gap-8 mb-12">
<a
href="https://www.linkedin.com/company/machine-learning-for-everyone-ml4e/?originalSubdomain=in"
target="_blank"
rel="noreferrer"
className="group relative p-4"
>
<div className="absolute inset-0 bg-blue-500/20 rounded-full blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative bg-white/5 border border-white/10 p-3 rounded-full group-hover:border-blue-400/50 group-hover:scale-110 transition-all duration-300">
<Linkedin className="w-6 h-6 text-slate-400 group-hover:text-blue-400 transition-colors" />
</div>
</a>
<a
href="https://www.instagram.com/ml4e_nitr/"
target="_blank"
rel="noreferrer"
className="group relative p-4"
>
<div className="absolute inset-0 bg-pink-500/20 rounded-full blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative bg-white/5 border border-white/10 p-3 rounded-full group-hover:border-pink-400/50 group-hover:scale-110 transition-all duration-300">
<Instagram className="w-6 h-6 text-slate-400 group-hover:text-pink-400 transition-colors" />
</div>
</a>
</div>
<div className="w-full max-w-2xl text-center border-t border-white/5 pt-8">
<p className="text-base font-medium text-slate-300 mb-2">
Made with{" "}
<span className="inline-block animate-pulse text-red-500">❤️</span>{" "}
by Team ML4E
</p>
<p className="text-xs text-slate-600 font-[Orbitron] tracking-wider">
© {year} ALL RIGHTS RESERVED
</p>
<p className="mt-2 text-xs text-slate-400">© {year}</p>
</div>
</div>
</footer>
);
}
}