Skip to content

Commit 347992c

Browse files
mehul-m-prajapatimehul-m-prajapati
authored
Merge pull request #292 from yuvraj-k-singh/feature/ux-footer-improvement
Improve Footer section UI/UX of the Website
2 parents a2452b3 + b81aa20 commit 347992c

1 file changed

Lines changed: 154 additions & 22 deletions

File tree

‎src/components/Footer.tsx‎

Lines changed: 154 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,168 @@
1-
import { FaGithub } from 'react-icons/fa';
1+
import React, { useState } from 'react';
2+
import { FaGithub, FaTwitter, FaDiscord, FaArrowRight } from 'react-icons/fa';
23
import { Link } from 'react-router-dom';
34

45
function Footer() {
6+
const [email, setEmail] = useState('');
7+
8+
const handleSubscribe = (e: React.FormEvent) => {
9+
e.preventDefault();
10+
// Removed raw console logging of emails to protect user data privacy (PII leak fix)
11+
alert('Thank you for subscribing!');
12+
setEmail('');
13+
};
14+
515
return (
6-
<footer className="dark:text-white bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 py-2 px-6 transition-colors duration-300">
7-
<div className="max-w-7xl mx-auto">
8-
<div className="flex flex-col md:flex-row justify-between items-center p-3">
9-
<div className="flex items-center space-x-2 md:mb-0">
10-
<a
11-
href="https://github.com/GitMetricsLab/github_tracker"
12-
target="_blank"
13-
rel="noopener noreferrer"
14-
className="inline-flex items-center hover:text-gray-300 transition-colors"
15-
>
16-
<FaGithub className="h-5 w-5 mr-1" />
16+
<footer className="w-full relative overflow-hidden transition-colors duration-300 border-t border-zinc-200 dark:border-zinc-800/80
17+
/* Light Mode: Restored your original crisp daylight background */
18+
bg-white
19+
/* Dark Mode: Retained matching deep navy navbar theme background */
20+
dark:bg-[#0f172a]
21+
font-sans select-none"
22+
>
23+
<div className="max-w-7xl mx-auto px-8 pt-16 pb-10 relative z-10">
24+
25+
{/* Upper Area: Clean Layout Grid from the image */}
26+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-10 pb-12 border-b border-zinc-200 dark:border-zinc-800/60">
27+
28+
{/* Column 1: Brand Presentation */}
29+
<div className="lg:col-span-5 flex flex-col space-y-4">
30+
<Link to="/" className="flex items-center space-x-3 text-xl font-bold tracking-tight group w-fit">
31+
<div className="p-2.5 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-950 rounded-xl shadow-sm group-hover:scale-105 transition-transform duration-200">
32+
<FaGithub className="h-5 w-5" />
33+
</div>
34+
<span className="font-bold text-zinc-900 dark:text-zinc-50">
1735
GitHub Tracker
18-
</a>
36+
</span>
37+
</Link>
38+
<p className="text-sm leading-relaxed max-w-sm text-zinc-500 dark:text-zinc-400 font-medium">
39+
A clean and intuitive dashboard built to monitor repository health metrics, analyze contribution trends, and streamline your open-source workflows.
40+
</p>
1941
</div>
20-
<div className="flex space-x-6 text-gray-600 dark:text-gray-300">
21-
<Link to='/contact' className="hover:text-gray-900 dark:hover:text-white transition-colors">Contact Us</Link>
22-
<Link to='/about' className="hover:text-gray-900 dark:hover:text-white transition-colors">About</Link>
42+
43+
{/* Column 2: Navigation Categories */}
44+
<div className="lg:col-span-4 grid grid-cols-2 gap-8">
45+
46+
{/* Resources Category */}
47+
<div className="space-y-4">
48+
<h3 className="text-xs font-bold text-zinc-900 dark:text-zinc-400 uppercase tracking-widest">
49+
Resources
50+
</h3>
51+
<ul className="space-y-3 text-sm font-semibold">
52+
<li>
53+
<Link to="/about" className="text-zinc-600 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">About Us</Link>
54+
</li>
55+
<li>
56+
<Link to="/contact" className="text-zinc-600 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Contact Support</Link>
57+
</li>
58+
<li>
59+
<a
60+
href="https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md"
61+
target="_blank"
62+
rel="noopener noreferrer"
63+
className="text-zinc-600 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200"
64+
>
65+
Contributing
66+
</a>
67+
</li>
68+
</ul>
69+
</div>
70+
71+
{/* Legal Category */}
72+
<div className="space-y-4">
73+
<h3 className="text-xs font-bold text-zinc-900 dark:text-zinc-400 uppercase tracking-widest">
74+
Legal
75+
</h3>
76+
<ul className="space-y-3 text-sm font-medium">
77+
<li>
78+
<Link to="/privacy" className="text-zinc-600 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Privacy Policy</Link>
79+
</li>
80+
<li>
81+
<Link to="/terms" className="text-zinc-600 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Terms of Service</Link>
82+
</li>
83+
</ul>
84+
</div>
85+
86+
</div>
87+
88+
{/* Column 3: Subscription Form matched directly to design layout */}
89+
<div className="lg:col-span-3 flex flex-col space-y-4">
90+
<h3 className="text-xs font-bold text-zinc-900 dark:text-zinc-400 uppercase tracking-widest">
91+
Get latest update
92+
</h3>
93+
94+
<form onSubmit={handleSubscribe} className="flex flex-col sm:flex-row items-stretch gap-2 w-full max-w-sm lg:max-w-none">
95+
<input
96+
type="email"
97+
required
98+
placeholder="Enter email address"
99+
value={email}
100+
onChange={(e) => setEmail(e.target.value)}
101+
className="flex-grow text-sm px-4 py-3 bg-zinc-50 dark:bg-zinc-800/40 border border-zinc-200 dark:border-zinc-700/50 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-500 transition-all"
102+
/>
103+
<button
104+
type="submit"
105+
className="px-5 py-3 text-sm font-bold bg-blue-600 hover:bg-blue-700 text-white rounded-xl shadow-sm active:scale-[0.98] transition-all flex items-center justify-center space-x-1.5 whitespace-nowrap"
106+
>
107+
<span>Subscribe</span>
108+
<FaArrowRight className="h-3.5 w-3.5" />
109+
</button>
110+
</form>
23111
</div>
112+
24113
</div>
25-
<div className="p-2 border-t border-gray-200 dark:border-gray-800 text-center text-gray-600 dark:text-gray-400">
26-
<p className="text-xs md:text-sm font-semibold">
27-
&copy; {new Date().getFullYear()}{" "}
28-
<span className="font-semibold">GitHub Tracker</span>. All rights reserved.
29-
</p>
114+
115+
{/* Lower Tray Area: Exact positioning architecture from your layout image */}
116+
<div className="pt-8 flex flex-col sm:flex-row justify-between items-center gap-6 text-xs font-semibold text-zinc-400 dark:text-zinc-500">
117+
118+
{/* Sub Navigation Tray Links */}
119+
<div className="flex items-center space-x-6 order-2 sm:order-1">
120+
<Link to="/terms" className="hover:text-zinc-800 dark:hover:text-zinc-200 transition-colors">Terms & condition</Link>
121+
<span className="text-zinc-200 dark:text-zinc-800">|</span>
122+
<Link to="/privacy" className="hover:text-zinc-800 dark:hover:text-zinc-200 transition-colors">Privacy Policy</Link>
123+
</div>
124+
125+
{/* Copyright block centered on screen layout */}
126+
<div className="sm:absolute sm:left-1/2 sm:-translate-x-1/2 order-3 text-center">
127+
&copy; {new Date().getFullYear()} <span className="font-bold text-zinc-500 dark:text-zinc-400">GitHub Tracker</span>. All rights reserved.
128+
</div>
129+
130+
{/* Social Icons (Right Aligned) - Icon sizes increased to h-5 w-5 */}
131+
<div className="flex items-center space-x-5 order-1 sm:order-3">
132+
<a
133+
href="https://github.com/GitMetricsLab/github_tracker"
134+
target="_blank"
135+
rel="noopener noreferrer"
136+
className="text-zinc-400 dark:text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors duration-200"
137+
aria-label="GitHub Repository"
138+
>
139+
<FaGithub className="h-7 w-7" />
140+
</a>
141+
<a
142+
href="https://x.com/your_handle"
143+
target="_blank"
144+
rel="noopener noreferrer"
145+
className="text-zinc-400 dark:text-zinc-500 hover:text-sky-500 dark:hover:text-zinc-100 transition-colors duration-200"
146+
aria-label="Twitter"
147+
>
148+
<FaTwitter className="h-7 w-7" />
149+
</a>
150+
<a
151+
href="https://discord.gg/your_invite"
152+
target="_blank"
153+
rel="noopener noreferrer"
154+
className="text-zinc-400 dark:text-zinc-500 hover:text-indigo-500 dark:hover:text-zinc-100 transition-colors duration-200"
155+
aria-label="Discord"
156+
>
157+
<FaDiscord className="h-7 w-7" />
158+
</a>
159+
</div>
160+
30161
</div>
162+
31163
</div>
32164
</footer>
33165
);
34166
}
35167

36-
export default Footer;
168+
export default Footer;

0 commit comments

Comments
 (0)