Skip to content

Add underline styling to footer headings for consistency #155

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
nikhil-2040 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add underline styling to footer headings for consistency #155

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
222 changes: 118 additions & 104 deletions frontend/src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,55 +61,62 @@ const Footer = () => {
aria-label="Footer navigation"

@suryaprakash0010 suryaprakash0010 Feb 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Consider wrapping this section inside a semantic

element instead of only using aria-label. This improves accessibility and screen-reader navigation.

>
{/* Company Info */}
<div className="flex flex-col items-center sm:items-start">
<h3 className="text-xl sm:text-2xl font-semibold mb-4 sm:mb-6 text-white inline-flex items-center">
<span className="text-primary-500 font-bold">Smart</span>
<span className="font-light">RentSystem</span>
</h3>
<p className="text-neutral-400 mb-6 leading-relaxed max-w-sm">
{descriptionText}
</p>
<div className="flex space-x-4">
<a
href="https://facebook.com"
target="_blank"
rel="noopener noreferrer"
className="bg-neutral-800/80 hover:bg-primary-600 text-white h-9 w-9 sm:h-10 sm:w-10 rounded-full
flex items-center justify-center
transition-all duration-300
hover:scale-110 active:scale-95
shadow-lg hover:shadow-primary-500/20
hover:rotate-[360deg]"
aria-label="Follow us on Facebook"
>
<i className="fab fa-facebook-f"></i>
</a>
<a
href="https://twitter.com"
target="_blank"
rel="noopener noreferrer"
className="bg-neutral-800 hover:bg-primary-600 text-white h-10 w-10 rounded-full flex items-center justify-center transition duration-300"
>
<i className="fab fa-twitter"></i>
</a>
<a
href="https://instagram.com"
target="_blank"
rel="noopener noreferrer"
className="bg-neutral-800 hover:bg-primary-600 text-white h-10 w-10 rounded-full flex items-center justify-center transition duration-300"
>
<i className="fab fa-instagram"></i>
</a>
<a
href="https://linkedin.com"
target="_blank"
rel="noopener noreferrer"
className="bg-neutral-800 hover:bg-primary-600 text-white h-10 w-10 rounded-full flex items-center justify-center transition duration-300"
>
<i className="fab fa-linkedin-in"></i>
</a>
</div>
</div>
{/* Company Info */}

@suryaprakash0010 suryaprakash0010 Feb 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Duplicate comment detected. One of the {/* Company Info */} comments can be safely removed to avoid redundancy and improve readability.

<div className="flex flex-col items-center sm:items-start">
<h3 className="text-xl sm:text-2xl font-semibold mb-4 sm:mb-6 text-white inline-block border-b-2 border-primary-500 pb-1">
<span className="text-primary-500 font-bold">Smart</span>
<span className="font-light">RentSystem</span>
</h3>

<p className="text-neutral-400 mb-6 leading-relaxed max-w-sm">
{descriptionText}
</p>

<div className="flex space-x-4">
<a
href="https://facebook.com"
target="_blank"
rel="noopener noreferrer"
className="bg-neutral-800/80 hover:bg-primary-600 text-white h-9 w-9 sm:h-10 sm:w-10 rounded-full

@suryaprakash0010 suryaprakash0010 Feb 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

For consistency and maintainability, consider extracting a shared class or reusable component for social icons.

flex items-center justify-center
transition-all duration-300
hover:scale-110 active:scale-95
shadow-lg hover:shadow-primary-500/20
hover:rotate-[360deg]"
aria-label="Follow us on Facebook"
>
<i className="fab fa-facebook-f"></i>

@suryaprakash0010 suryaprakash0010 Feb 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Icons inside anchor tags should include aria-hidden="true" or be wrapped with visually hidden text to improve screen-reader accessibility.

</a>

<a
href="https://twitter.com"
target="_blank"
rel="noopener noreferrer"
className="bg-neutral-800 hover:bg-primary-600 text-white h-10 w-10 rounded-full flex items-center justify-center transition duration-300"
>
<i className="fab fa-twitter"></i>
</a>

<a
href="https://instagram.com"
target="_blank"
rel="noopener noreferrer"
className="bg-neutral-800 hover:bg-primary-600 text-white h-10 w-10 rounded-full flex items-center justify-center transition duration-300"
>
<i className="fab fa-instagram"></i>
</a>

<a
href="https://linkedin.com"
target="_blank"
rel="noopener noreferrer"
className="bg-neutral-800 hover:bg-primary-600 text-white h-10 w-10 rounded-full flex items-center justify-center transition duration-300"
>
<i className="fab fa-linkedin-in"></i>
</a>
</div>
</div>


{/* Quick Links */}
<div className="mt-4 sm:mt-0">
Expand Down Expand Up @@ -161,61 +168,68 @@ const Footer = () => {
</div>

{/* Support */}
<div>
<h3 className="text-lg font-semibold mb-6 text-white">{supportText}</h3>
<ul className="space-y-3">
<li>
<Link
to="/help"
className="text-neutral-400 hover:text-primary-400 transition duration-300 inline-flex items-center"
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{helpText}
</Link>
</li>
<li>
<Link
to="/safety"
className="text-neutral-400 hover:text-primary-400 transition duration-300 inline-flex items-center"
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{safetyText}
</Link>
</li>
<li>
<Link
to="/cancellation"
className="text-neutral-400 hover:text-primary-400 transition duration-300 inline-flex items-center"
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{cancellationText}
</Link>
</li>
<li>
<Link
to="/report-concern"
className="text-neutral-400 hover:text-primary-400 transition duration-300 inline-flex items-center"
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{ReportText}
</Link>
</li>
<li>
<Link
to="/faq"
className="text-neutral-400 hover:text-primary-400 transition duration-300 inline-flex items-center"
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{FAQText}
</Link>
</li>
</ul>
</div>
<div>
<h3 className="text-lg font-semibold mb-6 text-white inline-block border-b-2 border-primary-500 pb-1">
{supportText}
</h3>

<ul className="space-y-3">
<li>
<Link
to="/help"
className="text-neutral-400 hover:text-primary-400 transition duration-300 inline-flex items-center"
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{helpText}
</Link>
</li>

<li>
<Link
to="/safety"
className="text-neutral-400 hover:text-primary-400 transition duration-300 inline-flex items-center"
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{safetyText}
</Link>
</li>

<li>
<Link
to="/cancellation"
className="text-neutral-400 hover:text-primary-400 transition duration-300 inline-flex items-center"
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{cancellationText}
</Link>
</li>

<li>
<Link
to="/report-concern"
className="text-neutral-400 hover:text-primary-400 transition duration-300 inline-flex items-center"
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{ReportText}
</Link>
</li>

<li>
<Link
to="/faq"

@suryaprakash0010 suryaprakash0010 Feb 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Route paths are hardcoded in multiple places. Defining route constants can improve scalability and reduce the risk of future routing inconsistencies.

className="text-neutral-400 hover:text-primary-400 transition duration-300 inline-flex items-center"
onClick={() => window.scrollTo(0, 0)}
>
<i className="fas fa-chevron-right text-xs mr-2 text-primary-500"></i>
{FAQText}
</Link>
</li>
</ul>
</div>

{/* Contact */}
<div className="mt-4 sm:mt-0">
Expand Down