From c15c10a442635056b9bd1693853b0cc90646b56f Mon Sep 17 00:00:00 2001
From: Mahek Gupta <guptamahek761@gmail.com>
Date: Mon, 23 Feb 2026 19:24:25 +0530
Subject: [PATCH] Improve footer visual hierarchy and space usage (#278)

---
 landing/src/components/layout/Footer.tsx | 139 +++++++++++++++++------
 1 file changed, 106 insertions(+), 33 deletions(-)

diff --git a/landing/src/components/layout/Footer.tsx b/landing/src/components/layout/Footer.tsx
index 4d54c4d1..678452ba 100644
--- a/landing/src/components/layout/Footer.tsx
+++ b/landing/src/components/layout/Footer.tsx
@@ -9,6 +9,7 @@ const Footer: React.FC = () => {
 
     return (
         <footer className="relative bg-gradient-to-br from-dark via-dark-lighter to-gray-900 py-12 overflow-hidden">
+            
             {/* Background gradient overlays */}
             <div className="absolute inset-0 pointer-events-none">
                 <div className="absolute top-0 left-0 w-96 h-96 rounded-full bg-green-500/5 blur-2xl -translate-x-1/2 -translate-y-1/2"></div>
@@ -17,58 +18,130 @@ const Footer: React.FC = () => {
             </div>
 
             <div className="container mx-auto px-6 relative z-10">
-                <div className="flex flex-col md:flex-row justify-between items-start mb-8">
-                    <div className="mb-6 md:mb-0">
-                        <h3 className="text-2xl font-bold gradient-text mb-2">Devr.AI</h3>
+                
+                {/* Main Footer Grid */}
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
+
+                    {/* Brand Section */}
+                    <div>
+                        <h3 className="text-2xl font-bold gradient-text mb-3">
+                            Devr.AI
+                        </h3>
                         <p className="text-gray-300 text-sm max-w-xs leading-relaxed">
                             Revolutionizing developer relations with AI-powered community management.
                         </p>
                     </div>
-                    <div className="flex flex-row gap-12">
-                        <div>
-                            <h4 className="font-semibold mb-4 text-white bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">Links</h4>
-                            <ul className="space-y-3">
-                                <li><a href={isHomePage ? "#features" : "/#features"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Features</a></li>
-                                <li><a href={isHomePage ? "#how-it-works" : "/#how-it-works"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">How It Works</a></li>
-                                <li><a href={isHomePage ? "#integrations" : "/#integrations"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Integrations</a></li>
-                                <li><a href={isHomePage ? "#waitlist" : "/#waitlist"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Join Waitlist</a></li>
-                            </ul>
-                        </div>
-                        <div>
-                            <h4 className="font-semibold mb-4 text-white bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">Legal</h4>
-                            <ul className="space-y-3">
-                                <li><Link to="/privacy-policy" className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Privacy Policy</Link></li>
-                                <li><Link to="/terms-of-service" className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Terms of Service</Link></li>
-                            </ul>
-                        </div>
+
+                    {/* Links Section */}
+                    <div>
+                        <h4 className="font-semibold mb-4 text-white bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">
+                            Links
+                        </h4>
+                        <ul className="space-y-3">
+                            <li>
+                                <a
+                                    href={isHomePage ? "#features" : "/#features"}
+                                    className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out"
+                                >
+                                    Features
+                                </a>
+                            </li>
+                            <li>
+                                <a
+                                    href={isHomePage ? "#how-it-works" : "/#how-it-works"}
+                                    className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out"
+                                >
+                                    How It Works
+                                </a>
+                            </li>
+                            <li>
+                                <a
+                                    href={isHomePage ? "#integrations" : "/#integrations"}
+                                    className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out"
+                                >
+                                    Integrations
+                                </a>
+                            </li>
+                            <li>
+                                <a
+                                    href={isHomePage ? "#waitlist" : "/#waitlist"}
+                                    className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out"
+                                >
+                                    Join Waitlist
+                                </a>
+                            </li>
+                        </ul>
                     </div>
+
+                    {/* Legal Section */}
+                    <div>
+                        <h4 className="font-semibold mb-4 text-white bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">
+                            Legal
+                        </h4>
+                        <ul className="space-y-3">
+                            <li>
+                                <Link
+                                    to="/privacy-policy"
+                                    className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out"
+                                >
+                                    Privacy Policy
+                                </Link>
+                            </li>
+                            <li>
+                                <Link
+                                    to="/terms-of-service"
+                                    className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out"
+                                >
+                                    Terms of Service
+                                </Link>
+                            </li>
+                        </ul>
+                    </div>
+
                 </div>
 
-                <div className="border-t border-gradient-to-r from-green-500/20 via-blue-500/20 to-green-500/20 pt-8 flex flex-col md:flex-row justify-between items-center" style={{borderImage: 'linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(59, 130, 246, 0.2), rgba(34, 197, 94, 0.2)) 1'}}>
+                {/* Bottom Section */}
+                <div
+                    className="border-t pt-8 flex flex-col md:flex-row justify-between items-center"
+                    style={{
+                        borderImage:
+                            'linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(59, 130, 246, 0.2), rgba(34, 197, 94, 0.2)) 1'
+                    }}
+                >
                     <p className="text-gray-400 text-sm mb-4 md:mb-0">
                         &copy; {currentYear} Devr.AI. All rights reserved.
                     </p>
+
                     <div className="flex space-x-6">
-                        <a href="https://github.com/AOSSIE-Org/Devr.AI/" 
-                           className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-green-500/20" 
-                           target='_blank' 
-                           rel="noreferrer">
+                        <a
+                            href="https://github.com/AOSSIE-Org/Devr.AI/"
+                            className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-green-500/20"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
                             <Github size={20} />
                         </a>
-                        <a href="https://x.com/aossie_org?lang=en" 
-                           className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-blue-500/20" 
-                           target='_blank'
-                           rel="noreferrer">
+
+                        <a
+                            href="https://x.com/aossie_org?lang=en"
+                            className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-blue-500/20"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
                             <Twitter size={20} />
                         </a>
-                        <a href="https://www.linkedin.com/company/aossie/?originalSubdomain=au" 
-                           className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-green-500/20" 
-                           target='_blank'
-                           rel="noreferrer">
+
+                        <a
+                            href="https://www.linkedin.com/company/aossie/?originalSubdomain=au"
+                            className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-green-500/20"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
                             <Linkedin size={20} />
                         </a>
                     </div>
                 </div>
+
             </div>
         </footer>
     );