Skip to content

updated footer with better ui/ux #295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ArshiBansal wants to merge 2 commits into
base: main
Choose a base branch
from
+46 −139
Open

updated footer with better ui/ux #295

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b2fce9e
updated footer with better ui/ux
ArshiBansal May 17, 2026
0c9b844
Merge remote-tracking branch 'upstream/main' into Update_footer
ArshiBansal May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 46 additions & 139 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { useState } from 'react';
import { FaGithub, FaTwitter, FaDiscord, FaArrowRight } from 'react-icons/fa';
import { FaGithub } from 'react-icons/fa';
import { Link } from 'react-router-dom';
Comment on lines +1 to 2
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILE="$(fd -i 'Footer.tsx' | head -n 1)"
echo "Inspecting: $FILE"

echo "== Imports =="
rg -n '^\s*import\s' "$FILE"

echo "== Referenced symbols that require imports =="
rg -n '\buseState\b|React\.FormEvent|<FaEnvelope\b|<FaInfoCircle\b' "$FILE"

Repository: GitMetricsLab/github_tracker

Length of output: 474

Add missing React and icon symbol imports to fix unresolved references.

Lines 5 (useState), 7 (React.FormEvent), 46 (FaEnvelope), and 54 (FaInfoCircle) reference symbols without corresponding imports.

Proposed fix 
+import { type FormEvent, useState } from 'react';
-import { FaGithub } from 'react-icons/fa';
+import { FaEnvelope, FaGithub, FaInfoCircle } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
@@
-  const handleSubscribe = (e: React.FormEvent) => {
+  const handleSubscribe = (e: FormEvent) => {
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Footer.tsx` around lines 1 - 2, The file is missing imports
for React, useState, and two icon symbols causing unresolved references; add an
import for React and useState (so React.FormEvent and useState are available)
and include FaEnvelope and FaInfoCircle with the existing FaGithub import from
'react-icons/fa' (ensure the import statement now provides FaGithub, FaEnvelope,
FaInfoCircle), leaving the existing Link import intact.


function Footer() {
Expand All @@ -13,153 +12,61 @@ function Footer() {
};

return (
<footer className="w-full relative overflow-hidden transition-colors duration-300 border-t border-zinc-200 dark:border-zinc-800/80
/* Light Mode: Restored your original crisp daylight background */
bg-white
/* Dark Mode: Retained matching deep navy navbar theme background */
dark:bg-[#0f172a]
font-sans select-none"
>
<div className="max-w-7xl mx-auto px-8 pt-16 pb-10 relative z-10">

{/* Upper Area: Clean Layout Grid from the image */}
<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">

{/* Column 1: Brand Presentation */}
<div className="lg:col-span-5 flex flex-col space-y-4">
<Link to="/" className="flex items-center space-x-3 text-xl font-bold tracking-tight group w-fit">
<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">
<FaGithub className="h-5 w-5" />
</div>
<span className="font-bold text-zinc-900 dark:text-zinc-50">
<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">
<div className="max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row justify-between items-center p-3">
<div className="flex items-center space-x-2 md:mb-0">
<a
href="https://github.com/GitMetricsLab/github_tracker"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center hover:text-gray-300 transition-colors"
>
<FaGithub className="h-5 w-5 mr-1" />
GitHub Tracker
</span>
</Link>
<p className="text-sm leading-relaxed max-w-sm text-zinc-500 dark:text-zinc-400 font-medium">
A clean and intuitive dashboard built to monitor repository health metrics, analyze contribution trends, and streamline your open-source workflows.
</p>
</div>

{/* Column 2: Navigation Categories */}
<div className="lg:col-span-4 grid grid-cols-2 gap-8">

{/* Resources Category */}
<div className="space-y-4">
<h3 className="text-xs font-bold text-zinc-900 dark:text-zinc-400 uppercase tracking-widest">
Resources
</h3>
<ul className="space-y-3 text-sm font-semibold">
<li>
<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>
</li>
<li>
<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>
</li>
<li>
<a
href="https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md"
target="_blank"
rel="noopener noreferrer"
className="text-zinc-600 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200"
>
Contributing
</a>
</li>
</ul>
</div>

{/* Legal Category */}
<div className="space-y-4">
<h3 className="text-xs font-bold text-zinc-900 dark:text-zinc-400 uppercase tracking-widest">
Legal
</h3>
<ul className="space-y-3 text-sm font-medium">
<li>
<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>
</li>
<li>
<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>
</li>
</ul>
</div>
</a>

<p className="text-sm leading-6 text-gray-600 dark:text-gray-400 max-w-sm">
Track repositories, analyze contributions, and explore GitHub
insights with a clean and intuitive interface.
</p>
</div>

{/* Column 3: Subscription Form matched directly to design layout */}
<div className="lg:col-span-3 flex flex-col space-y-4">
<h3 className="text-xs font-bold text-zinc-900 dark:text-zinc-400 uppercase tracking-widest">
Get latest update
{/* Navigation Links */}
<div className="space-y-3">
<h3 className="text-sm font-semibold uppercase tracking-wider text-gray-900 dark:text-white">
Quick Links
</h3>

<form onSubmit={handleSubscribe} className="flex flex-col sm:flex-row items-stretch gap-2 w-full max-w-sm lg:max-w-none">
<input
type="email"
required
placeholder="Enter email address"
value={email}
onChange={(e) => setEmail(e.target.value)}
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"
/>
<button
type="submit"
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"
>
<span>Subscribe</span>
<FaArrowRight className="h-3.5 w-3.5" />
</button>
</form>
</div>

</div>

{/* Lower Tray Area: Exact positioning architecture from your layout image */}
<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">

{/* Sub Navigation Tray Links */}
<div className="flex items-center space-x-6 order-2 sm:order-1">
<Link to="/terms" className="hover:text-zinc-800 dark:hover:text-zinc-200 transition-colors">Terms & condition</Link>
<span className="text-zinc-200 dark:text-zinc-800">|</span>
<Link to="/privacy" className="hover:text-zinc-800 dark:hover:text-zinc-200 transition-colors">Privacy Policy</Link>
</div>
<div className="flex flex-col space-y-2">
<Link
to="/contact"
className="inline-flex items-center gap-2 text-sm hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
>
<FaEnvelope className="h-3.5 w-3.5" />
Contact Us
</Link>

{/* Copyright block centered on screen layout */}
<div className="sm:absolute sm:left-1/2 sm:-translate-x-1/2 order-3 text-center">
&copy; {new Date().getFullYear()} <span className="font-bold text-zinc-500 dark:text-zinc-400">GitHub Tracker</span>. All rights reserved.
<Link
to="/about"
className="inline-flex items-center gap-2 text-sm hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
>
<FaInfoCircle className="h-3.5 w-3.5" />
About
</Link>
</div>
</div>

{/* Social Icons (Right Aligned) - Icon sizes increased to h-5 w-5 */}
<div className="flex items-center space-x-5 order-1 sm:order-3">
<a
href="https://github.com/GitMetricsLab/github_tracker"
target="_blank"
rel="noopener noreferrer"
className="text-zinc-400 dark:text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors duration-200"
aria-label="GitHub Repository"
>
<FaGithub className="h-7 w-7" />
</a>
<a
href="https://x.com/your_handle"
target="_blank"
rel="noopener noreferrer"
className="text-zinc-400 dark:text-zinc-500 hover:text-sky-500 dark:hover:text-zinc-100 transition-colors duration-200"
aria-label="Twitter"
>
<FaTwitter className="h-7 w-7" />
</a>
<a
href="https://discord.gg/your_invite"
target="_blank"
rel="noopener noreferrer"
className="text-zinc-400 dark:text-zinc-500 hover:text-indigo-500 dark:hover:text-zinc-100 transition-colors duration-200"
aria-label="Discord"
>
<FaDiscord className="h-7 w-7" />
</a>
<div className="flex space-x-6 text-gray-600 dark:text-gray-300">
<Link to='/contact' className="hover:text-gray-900 dark:hover:text-white transition-colors">Contact Us</Link>
<Link to='/about' className="hover:text-gray-900 dark:hover:text-white transition-colors">About</Link>
</div>

</div>

<div className="p-2 border-t border-gray-200 dark:border-gray-800 text-center text-gray-600 dark:text-gray-400">
<p className="text-xs md:text-sm font-semibold">
&copy; {new Date().getFullYear()}{" "}
<span className="font-semibold">GitHub Tracker</span>. All rights reserved.
</p>
</div>
</div>
</footer>
);
Expand Down