From 75824ea78c59a4e0cebeea2a84778ea2a4c02772 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Mon, 10 Nov 2025 15:53:46 +0530
Subject: [PATCH] style(footer): update footer layout and responsive styling

- Adjust container padding and grid gaps for better spacing
- Modify Codeunia branding spacing and font sizes responsively
- Resize social media icon buttons and icons for improved consistency
- Change quick links and community to a two-column layout on mobile
- Update typography for headings and links to use responsive text sizes
- Refine newsletter section spacing and column positioning
- Adjust bottom footer bar spacing and font sizes for mobile and desktop
- Ensure all interactive links have hover and transition effects maintained
---
 components/footer.tsx | 171 +++++++++++++++++++++---------------------
 1 file changed, 87 insertions(+), 84 deletions(-)

diff --git a/components/footer.tsx b/components/footer.tsx
index f5ee8337..f6e9f85c 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -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">
@@ -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>