Skip to content

style(footer): update footer layout and responsive styling #297

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

Merged
codeunia-dev merged 1 commit into from
Nov 10, 2025
Merged

style(footer): update footer layout and responsive styling #297

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
171 changes: 87 additions & 84 deletions components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,125 +54,128 @@ export default function Footer() {
}
return (
<footer className="border-t border-border/40 bg-gradient-to-b from-background/95 via-background to-background/95">
<div className="container px-4 pl-8 md:pl-12 py-16">
<div className="grid grid-cols-1 md:grid-cols-4 gap-12">
<div className="container px-4 md:pl-12 py-12 md:py-16">
<div className="grid grid-cols-1 md:grid-cols-4 gap-10 md:gap-12">
{/* codeunia branding */}
<div className="space-y-6">
<div className="space-y-4 md:space-y-6">
<CodeuniaLogo size="lg" showText={true} instanceId="footer" />
<p className="text-foreground/80 leading-relaxed">
<p className="text-foreground/80 leading-relaxed text-sm md:text-base">
Empowering the next generation of coders through real-world projects, vibrant community, and continuous
learning.
</p>
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-3 md:space-x-4">
<Link
href="https://github.com/Codeunia"
target="_blank"
rel="noopener noreferrer"
className="w-10 h-10 bg-gradient-to-br from-gray-800 to-gray-900 dark:from-gray-700 dark:to-gray-800 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
className="w-9 h-9 md:w-10 md:h-10 bg-gradient-to-br from-gray-800 to-gray-900 dark:from-gray-700 dark:to-gray-800 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
>
<Github className="h-5 w-5" />
<Github className="h-4 w-4 md:h-5 md:w-5" />
</Link>
<Link
href="https://www.instagram.com/codeunia"
target="_blank"
rel="noopener noreferrer"
className="w-10 h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
className="w-9 h-9 md:w-10 md:h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
>
<Instagram className="h-5 w-5" />
<Instagram className="h-4 w-4 md:h-5 md:w-5" />
</Link>
<Link
href="https://x.com/codeunia"
target="_blank"
rel="noopener noreferrer"
className="w-10 h-10 bg-gradient-to-br from-sky-500 to-sky-600 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
className="w-9 h-9 md:w-10 md:h-10 bg-gradient-to-br from-sky-500 to-sky-600 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
>
<Twitter className="h-5 w-5" />
<Twitter className="h-4 w-4 md:h-5 md:w-5" />
</Link>
<Link
href="https://www.linkedin.com/company/codeunia"
target="_blank"
rel="noopener noreferrer"
className="w-10 h-10 bg-gradient-to-br from-blue-700 to-blue-800 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
className="w-9 h-9 md:w-10 md:h-10 bg-gradient-to-br from-blue-700 to-blue-800 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
>
<Linkedin className="h-5 w-5" />
<Linkedin className="h-4 w-4 md:h-5 md:w-5" />
</Link>
</div>
</div>

{/* quick links of codeunia */}
<div className="space-y-6">
<h4 className="text-lg font-bold text-foreground">Quick Links</h4>
<div className="space-y-3">
<Link
href="/about"
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
About Us
</Link>
<Link
href="/hackathons"
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
Events & Hackathons
</Link>
<Link
href="/blog"
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
Developer Blog
</Link>
<Link
href="/contact"
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
Contact Support
</Link>
{/* quick links and community - 2 column layout on mobile */}
<div className="grid grid-cols-2 md:grid-cols-2 gap-8 md:gap-0 md:contents">
{/* quick links of codeunia */}
<div className="space-y-4 md:space-y-6">
<h4 className="text-base md:text-lg font-bold text-foreground">Quick Links</h4>
<div className="space-y-3">
<Link
href="/about"
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
About Us
</Link>
<Link
href="/hackathons"
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
Events & Hackathons
</Link>
<Link
href="/blog"
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
Developer Blog
</Link>
<Link
href="/contact"
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
Contact Support
</Link>
</div>
</div>
</div>

{/* community section of codeunia */}
<div className="space-y-6">
<h4 className="text-lg font-bold text-foreground">Community</h4>
<div className="space-y-3">
<Link
href="https://github.com/Codeunia"
target="_blank"
rel="noopener noreferrer"
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
GitHub Projects
</Link>
<Link
href="https://discord.gg/Mhn3tXnJ"
target="_blank"
rel="noopener noreferrer"
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
Discord Server
</Link>
<Link
href="https://x.com/codeunia"
target="_blank"
rel="noopener noreferrer"
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
Twitter Community
</Link>
<Link
href="https://www.linkedin.com/company/codeunia"
target="_blank"
rel="noopener noreferrer"
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
LinkedIn Network
</Link>
{/* community section of codeunia */}
<div className="space-y-4 md:space-y-6">
<h4 className="text-base md:text-lg font-bold text-foreground">Community</h4>
<div className="space-y-3">
<Link
href="https://github.com/Codeunia"
target="_blank"
rel="noopener noreferrer"
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
GitHub Projects
</Link>
<Link
href="https://discord.gg/Mhn3tXnJ"
target="_blank"
rel="noopener noreferrer"
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
Discord Server
</Link>
<Link
href="https://x.com/codeunia"
target="_blank"
rel="noopener noreferrer"
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
Twitter Community
</Link>
<Link
href="https://www.linkedin.com/company/codeunia"
target="_blank"
rel="noopener noreferrer"
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
>
LinkedIn Network
</Link>
</div>
</div>
</div>

{/* codeunia newsletter */}
<div className="space-y-6">
<h4 className="text-lg font-bold text-foreground">Stay Updated</h4>
<p className="text-foreground/80">
<div className="space-y-4 md:space-y-6 md:col-start-4">
<h4 className="text-base md:text-lg font-bold text-foreground">Stay Updated</h4>
<p className="text-foreground/80 text-sm md:text-base">
Get the latest updates on events, new features, and community highlights.
</p>
<form onSubmit={handleNewsletterSubmit} className="space-y-3">
Expand Down Expand Up @@ -213,11 +216,11 @@ export default function Footer() {
</div>
</div>

<div className="mt-12 pt-8 border-t border-border/40 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<p className="text-sm text-foreground/80">
<div className="mt-8 md:mt-12 pt-6 md:pt-8 border-t border-border/40 flex flex-col md:flex-row justify-between items-center space-y-3 md:space-y-0">
<p className="text-xs md:text-sm text-foreground/80">
© {new Date().getFullYear()} Codeunia. All rights reserved. Built with ❤️ for developers.
</p>
<div className="flex items-center space-x-6 text-sm text-foreground/80">
<div className="flex items-center space-x-4 md:space-x-6 text-xs md:text-sm text-foreground/80">
<Link href="/privacy" className="hover:text-primary transition-colors">
Privacy Policy
</Link>
Expand Down
Loading