Skip to content

footer section improvement #189

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
Vidhi-Ajmera16355 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

footer section improvement #189

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
242d4c2
footer section improvement
Vidhi-Ajmera16355 Aug 12, 2025
062c502
changes in padding and margin
Vidhi-Ajmera16355 Aug 12, 2025
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
89 changes: 69 additions & 20 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,83 @@
import { FaGithub } from 'react-icons/fa';
import { Link } from 'react-router-dom';
import React from 'react';
import { Github, Mail, Info } from 'lucide-react';

function Footer() {
return (
<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
<footer className="relative bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 transition-all duration-300">
{/* Gradient overlay */}
<div className="absolute inset-0 bg-gradient-to-r from-blue-50/50 via-transparent to-purple-50/50 dark:from-blue-900/10 dark:via-transparent dark:to-purple-900/10"></div>
Comment on lines +7 to +8
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 12, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Mark decorative overlay as non-interactive and hidden from assistive tech.

Prevents accidental click interception and reduces SR noise.

-      <div className="absolute inset-0 bg-gradient-to-r from-blue-50/50 via-transparent to-purple-50/50 dark:from-blue-900/10 dark:via-transparent dark:to-purple-900/10"></div>
+      <div
+        className="absolute inset-0 pointer-events-none bg-gradient-to-r from-blue-50/50 via-transparent to-purple-50/50 dark:from-blue-900/10 dark:via-transparent dark:to-purple-900/10"
+        aria-hidden="true"
+      ></div>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{/* Gradient overlay */}
<div className="absolute inset-0 bg-gradient-to-r from-blue-50/50 via-transparent to-purple-50/50 dark:from-blue-900/10 dark:via-transparent dark:to-purple-900/10"></div>
{/* Gradient overlay */}
<div
className="absolute inset-0 pointer-events-none bg-gradient-to-r from-blue-50/50 via-transparent to-purple-50/50 dark:from-blue-900/10 dark:via-transparent dark:to-purple-900/10"
aria-hidden="true"
></div>
🤖 Prompt for AI Agents 
In src/components/Footer.tsx around lines 7 to 8, the decorative gradient
overlay should be made non-interactive and hidden from assistive tech: add
aria-hidden="true" and role="presentation" to the overlay div, ensure it cannot
receive pointer events by adding the Tailwind class pointer-events-none, and
make it unfocusable by setting tabIndex={-1}; keep it purely decorative with no
meaningful DOM change otherwise.


<div className="relative w-full max-w-7xl mx-auto px-4 py-6 md:py-8">
{/* Main Footer Content */}
<div className="grid grid-cols-1 md:grid-cols-[1.5fr_1fr] gap-8 mb-6 items-start">
Comment on lines +10 to +12
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 12, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Apply reviewer feedback: tighten vertical rhythm (padding/gap).

Reduces excessive whitespace per feedback while keeping clarity.

-      <div className="relative w-full max-w-7xl mx-auto px-4 py-6 md:py-8">
+      <div className="relative w-full max-w-7xl mx-auto px-4 py-4 md:py-6">
         {/* Main Footer Content */}
-        <div className="grid grid-cols-1 md:grid-cols-[1.5fr_1fr] gap-8 mb-6 items-start">
+        <div className="grid grid-cols-1 md:grid-cols-[1.5fr_1fr] gap-6 mb-4 items-start">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="relative w-full max-w-7xl mx-auto px-4 py-6 md:py-8">
{/* Main Footer Content */}
<div className="grid grid-cols-1 md:grid-cols-[1.5fr_1fr] gap-8 mb-6 items-start">
<div className="relative w-full max-w-7xl mx-auto px-4 py-4 md:py-6">
{/* Main Footer Content */}
<div className="grid grid-cols-1 md:grid-cols-[1.5fr_1fr] gap-6 mb-4 items-start">
🤖 Prompt for AI Agents 
In src/components/Footer.tsx around lines 10 to 12, the footer vertical spacing
is too large; reduce padding and grid gap to tighten the vertical rhythm: change
the container padding from px-4 py-6 md:py-8 to something smaller (for example
px-4 py-4 md:py-6) and reduce the grid gap from gap-8 mb-6 to gap-6 mb-4 so the
footer keeps clarity but with less vertical whitespace.


{/* Brand Section */}
<div className="space-y-3">
<div className="group">
<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
</a>
className="inline-flex items-center space-x-3 text-lg font-bold text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-300"
>
<Github className="h-7 w-7" />
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
GitHub Tracker
</span>
</a>
Comment on lines +21 to +27
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 12, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Add focus-visible styles to external link for keyboard accessibility.

-                className="inline-flex items-center space-x-3 text-lg font-bold text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-300"
+                className="inline-flex items-center space-x-3 text-lg font-bold text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900 rounded"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
className="inline-flex items-center space-x-3 text-lg font-bold text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-300"
>
<Github className="h-7 w-7" />
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
GitHub Tracker
</span>
</a>
className="inline-flex items-center space-x-3 text-lg font-bold text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900 rounded"
>
<Github className="h-7 w-7" />
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
GitHub Tracker
</span>
</a>
🤖 Prompt for AI Agents 
In src/components/Footer.tsx around lines 21 to 27, the external anchor lacks
focus-visible styles making it hard to navigate by keyboard; add keyboard-focus
styles to the anchor (e.g., focus:outline-none plus focus-visible:ring-2,
focus-visible:ring-offset-2, a visible ring color that works in both light/dark
like focus-visible:ring-blue-500 and dark:focus-visible:ring-blue-400, and an
appropriate focus-visible:rounded class) so keyboard users see a clear focus
indicator while preserving existing hover styles.

</div>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed max-w-md">
Track, analyze, and optimize your GitHub repositories with powerful insights and metrics.
</p>
</div>
<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>

{/* Quick Links */}
<div className="space-y-3">
<h3 className="font-semibold tracking-wide text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-1">
Quick Links
</h3>
<div className="space-y-1">
{[
{ href: '/about', icon: Info, text: 'About Us' },
{ href: '/contact', icon: Mail, text: 'Contact' },
].map((link, index) => (
<a
key={index}
href={link.href}
className="flex items-center space-x-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300"
>
<link.icon className="h-4 w-4" />
<span>{link.text}</span>
</a>
))}
</div>
</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>

{/* Divider */}
<div className="relative mb-4">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-200 dark:border-gray-700"></div>
</div>
<div className="relative flex justify-center">
<div className="w-12 h-0.5 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"></div>
</div>
</div>

{/* Copyright */}
<div className="text-center">
<p className="text-xs text-gray-600 dark:text-gray-400 font-medium">
© {new Date().getFullYear()}{' '}
<span className="font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
GitHub Tracker
</span>
. All rights reserved.
</p>
</div>
</div>

{/* Bottom gradient bar */}
<div className="h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 opacity-60"></div>
</footer>
);
}
Expand Down