Skip to content

Added Responsive Footer for Navigation and Accessibility (#441) #445

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

Added Responsive Footer for Navigation and Accessibility (#441) #445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3fc495a
Updated the footer component (#441)
Anshuu-Sharma Mar 16, 2025
41cec40
Removed self test file
Anshuu-Sharma Mar 16, 2025
e3e9c9b
Updated to original code
Anshuu-Sharma Mar 17, 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
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

80 changes: 64 additions & 16 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,65 @@ function NavLink({ href, children }) {

export function Footer() {
return (
<footer className="mt-16">
<footer className="mt-16 py-10">
<Container.Outer>
<div className="pt-10 pb-10">
<Container.Inner>
<div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
<div className="flex gap-5 text-md font-semibold font-mono text-zinc-800 dark:text-zinc-200">
<NavLink href="/about">About</NavLink>
<NavLink href="/projects">Projects</NavLink>
<NavLink href="/ideas">Ideas</NavLink>
<NavLink href="/apply">Apply</NavLink>
<Container.Inner>
<div className="flex flex-wrap font-mono justify-between text-center md:text-left items-start gap-8 md:gap-12">

{/* Logo Section */}
<div className="flex justify-center md:justify-start w-full md:w-auto">
<img
alt="AOSSIE Logo"
loading="lazy"
width="120"
height="100"
className="w-32 h-auto"
src="/logo1.png"
/>
</div>

<div className="flex flex-wrap justify-between md:gap-20 gap-8 w-full md:w-auto">
{/* Navigation Section */}
<div className="w-full sm:w-auto text-left max-sm:text-center x-12">
<h3 className="text-lg font-semibold font-mono text-zinc-800 dark:text-zinc-200">
Quick Links
</h3>
<div className="text-md mt-3 flex flex-col gap-2 text-left max-sm:text-center font-mono text-zinc-600 dark:text-zinc-400">
<NavLink href="/">Home</NavLink>
<NavLink href="/about">About</NavLink>
<NavLink href="/projects">Projects</NavLink>
<NavLink href="/ideas">Ideas</NavLink>
<NavLink href="/apply">Apply</NavLink>
{/* Place the policy page here */}
<NavLink href="/privacy-policy">Privacy Policy</NavLink>
</div>
</div>

{/* Contact Section */}
<div className="w-full sm:w-auto text-center">
<h3 className="text-lg font-semibold text-zinc-800 dark:text-zinc-200">
Contact Us
</h3>
<div className="text-md mt-3 font-mono text-zinc-800 dark:text-zinc-200">
<p>
<a
href="mailto:aossie.oss@gmail.com"
className="hover:text-[#00843D] dark:hover:text-yellow-400 text-zinc-600 dark:text-zinc-400"
>
aossie.oss@gmail.com
</a>
</p>
</div>
</div>
<p className="text-sm text-zinc-400 dark:text-zinc-500 font-mono">
&copy; 2016-2025 AOSSIE. All rights reserved.
</p>
<div className="flex gap-6">
<Link aria-label="Contact by Mail" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='mailto:aossie.oss@gmail.com'>
</div>

{/* Social Media Section */}
<div className="w-full sm:w-auto text-center">
<h3 className="text-lg font-semibold text-zinc-800 dark:text-zinc-200">
Follow Us
</h3>
<div className="mt-3 flex gap-6 justify-center">
<Link aria-label="Contact by Mail" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='mailto:aossie.oss@gmail.com'>
<FontAwesomeIcon icon={faEnvelope} size='xl' />
</Link>
<Link aria-label="Follow on GitLab" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://gitlab.com/aossie'>
Expand All @@ -50,8 +93,13 @@ export function Footer() {
</Link>
</div>
</div>
</Container.Inner>
</div>
</div>

{/* Copyright */}
<div className="mt-10 text-center font-mono text-sm text-zinc-400 dark:text-zinc-500">
&copy; 2016-2025 AOSSIE. All rights reserved.
</div>
</Container.Inner>
</Container.Outer>
</footer>
)
Expand Down