Skip to content

Commit d3faa7a

Browse files
Kunwar ShauryaKunwar Shaurya
Kunwar Shaurya
authored and
Kunwar Shaurya
committed
footer ui updated
1 parent de74dbf commit d3faa7a

File tree

1 file changed

+125
-71
lines changed

1 file changed

+125
-71
lines changed

‎components/Footer.tsx‎

Lines changed: 125 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,145 @@
11
"use client";
22

3+
import Hero3D from "./Hero3D";
34
import Image from "next/image";
4-
import {
5-
FaInstagram,
6-
FaLinkedin,
7-
FaTwitter,
8-
FaYoutube,
9-
FaGithub,
10-
FaEnvelope,
11-
} from "react-icons/fa";
5+
6+
// NOTE: replace these with the official IEEE CS VIT handles if different.
7+
const SOCIAL_LINKS = {
8+
instagram: "https://www.instagram.com/ieeecs_vit/",
9+
linkedin: "https://www.linkedin.com/company/ieee-cs-vit/posts/?feedView=all",
10+
youtube: "https://www.youtube.com/@ieeecomputersociety-vitcha2386",
11+
x: "https://x.com/ieeecsvit",
12+
github: "https://x.com/ieeecsvit",
13+
medium: "https://medium.com/@IEEE_Computer_Society_VIT",
14+
};
1215

1316
export default function Footer() {
1417
return (
15-
<footer className="bg-neutral-900 text-white px-12 py-10">
16-
<div className="mx-auto max-w-7xl flex flex-col md:flex-row items-center justify-between gap-6">
18+
<footer className="relative bg-black text-white px-6 py-16 overflow-hidden">
1719

18-
{/* Logo */}
19-
<div className="flex items-center gap-3">
20-
<div>
21-
<div className="w-32 md:w-40 lg:w-48">
22-
<Image
23-
src="/hero/logo.png"
24-
alt="Logo"
25-
width={200}
26-
height={200}
27-
className="w-full h-auto object-contain"
28-
/>
29-
</div>
20+
{/* subtle top border */}
21+
<div className="absolute inset-x-0 top-0 h-0.5 bg-white/5" />
3022

31-
</div>
23+
{/* TOP GRID */}
24+
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-10 items-start md:divide-x md:divide-[1px] md:divide-gray-800/40 py-7 md:min-h-[260px]">
25+
26+
{/* LEFT — DIRECTORY */}
27+
<div className="px-4 md:px-8">
28+
<h3 className="font-mono text-[#CCFF00] text-lg tracking-widest mb-4">Directory</h3>
29+
<ul className="space-y-3 font-mono text-base text-white/70">
30+
<li>
31+
<a href="#" className="flex items-center gap-3 hover:text-white">
32+
<span className="text-[#CCFF00]">&gt;</span>
33+
<span>Home</span>
34+
</a>
35+
</li>
36+
<li>
37+
<a href="#about" className="flex items-center gap-3 hover:text-white">
38+
<span className="text-[#CCFF00]">&gt;</span>
39+
<span>About</span>
40+
</a>
41+
</li>
42+
<li>
43+
<a href="#faq" className="flex items-center gap-3 hover:text-white">
44+
<span className="text-[#CCFF00]">&gt;</span>
45+
<span>FAQs</span>
46+
</a>
47+
</li>
48+
<li>
49+
<a href="#timeline" className="flex items-center gap-3 hover:text-white">
50+
<span className="text-[#CCFF00]">&gt;</span>
51+
<span>Timeline</span>
52+
</a>
53+
</li>
54+
</ul>
3255
</div>
3356

34-
{/* Social Links */}
35-
<div className="flex gap-6 text-xl">
36-
<a
37-
href="https://instagram.com"
38-
target="_blank"
39-
rel="noopener noreferrer"
40-
className="hover:text-orange-500 transition"
41-
>
42-
<FaInstagram />
43-
</a>
57+
{/* CENTER — 3D + STATUS */}
58+
<div className="flex flex-col items-center justify-center gap-6 px-4 md:px-8">
59+
<div className="w-52 h-52 rounded-lg flex items-center justify-center ring-1 ring-white/6 p-4 bg-black">
60+
<Hero3D />
61+
</div>
4462

45-
<a
46-
href="https://linkedin.com"
47-
target="_blank"
48-
rel="noopener noreferrer"
49-
className="hover:text-orange-500 transition"
50-
>
51-
<FaLinkedin />
52-
</a>
63+
<p className="font-mono tracking-widest text-base text-white/80">
64+
SYSTEM STATUS: <span className="text-[#CCFF00] ml-2">ONLINE</span>
65+
</p>
66+
</div>
5367

54-
<a
55-
href="https://twitter.com"
56-
target="_blank"
57-
rel="noopener noreferrer"
58-
className="hover:text-orange-500 transition"
59-
>
60-
<FaTwitter />
61-
</a>
68+
{/* RIGHT — CONNECT */}
69+
<div className="px-4 md:px-8">
70+
<h3 className="font-mono text-[#CCFF00] text-lg tracking-widest mb-4 text-left md:text-left">Connect</h3>
71+
<div className="grid grid-cols-2 gap-x-8 gap-y-3 font-mono text-base text-white/70">
72+
{/* left column */}
73+
<div className="space-y-3">
74+
<a href={SOCIAL_LINKS.instagram} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 hover:text-white">
75+
<span className="text-[#CCFF00]">&gt;</span>
76+
<span>Instagram</span>
77+
</a>
78+
<a href={SOCIAL_LINKS.linkedin} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 hover:text-white">
79+
<span className="text-[#CCFF00]">&gt;</span>
80+
<span>LinkedIn</span>
81+
</a>
82+
<a href={SOCIAL_LINKS.youtube} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 hover:text-white">
83+
<span className="text-[#CCFF00]">&gt;</span>
84+
<span>YouTube</span>
85+
</a>
86+
<a href={SOCIAL_LINKS.x} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 hover:text-white">
87+
<span className="text-[#CCFF00]">&gt;</span>
88+
<span>X</span>
89+
</a>
90+
</div>
6291

63-
<a
64-
href="https://youtube.com"
65-
target="_blank"
66-
rel="noopener noreferrer"
67-
className="hover:text-orange-500 transition"
68-
>
69-
<FaYoutube />
70-
</a>
92+
{/* right column */}
93+
<div className="space-y-3">
94+
<a href={SOCIAL_LINKS.github} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 hover:text-white">
95+
<span className="text-[#CCFF00]">&gt;</span>
96+
<span>GitHub</span>
97+
</a>
98+
<a href={SOCIAL_LINKS.medium} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 hover:text-white">
99+
<span className="text-[#CCFF00]">&gt;</span>
100+
<span>Medium</span>
101+
</a>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
71106

72-
<a
73-
href="https://github.com"
74-
target="_blank"
75-
rel="noopener noreferrer"
76-
className="hover:text-orange-500 transition"
77-
>
78-
<FaGithub />
79-
</a>
107+
{/* DIVIDER */}
108+
<div className="my-8 h-px bg-white/6" />
80109

81-
<a
82-
href="mailto:modelarena@gmail.com"
83-
className="hover:text-orange-500 transition"
84-
>
85-
<FaEnvelope />
86-
</a>
110+
{/* SCROLLING COMMAND STRIP (marquee) */}
111+
<div className="overflow-hidden">
112+
<div className="marquee text-sm font-mono text-white/40 py-3">
113+
<div className="inline-flex items-center space-x-8 opacity-75">
114+
{Array.from({ length: 12 }).map((_, i) => (
115+
<span key={i} className={`mx-4 ${i % 5 === 0 ? 'text-purple-300' : i % 5 === 1 ? 'text-green-300' : i % 5 === 2 ? 'text-yellow-300' : i % 5 === 3 ? 'text-blue-300' : 'text-red-300'}`}>
116+
[COMPUTE] • [TRAIN] • [EVALUATE] • [DEPLOY] • [BUILD]
117+
</span>
118+
))}
119+
</div>
87120
</div>
88121
</div>
122+
123+
{/* BOTTOM CENTER LOGO */}
124+
<div className="mt-8 flex justify-center">
125+
<Image
126+
src="/hero/logo.png"
127+
alt="IEEE Computer Society"
128+
width={140}
129+
height={48}
130+
className="opacity-90"
131+
/>
132+
</div>
133+
134+
{/* local marquee styles (scoped) */}
135+
<style jsx>{`
136+
.marquee { display: block; white-space: nowrap; }
137+
.marquee > div { display: inline-block; padding-left: 100%; animation: marquee 40s linear infinite; }
138+
@keyframes marquee {
139+
0% { transform: translateX(0%); }
140+
100% { transform: translateX(-50%); }
141+
}
142+
`}</style>
89143
</footer>
90144
);
91145
}

0 commit comments

Comments
 (0)