From 7a799db78dcbd357e8c9ac948ae81b426ada37a8 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Tue, 5 Aug 2025 22:58:58 +0000
Subject: [PATCH] Enhance footer with animations

cgen-7b586ee4b3884429b757a8d3f6b53598
---
 client/components/Layout.tsx | 54 ++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/client/components/Layout.tsx b/client/components/Layout.tsx
index 2848261b..b4c5e3ff 100644
--- a/client/components/Layout.tsx
+++ b/client/components/Layout.tsx
@@ -66,64 +66,64 @@ export default function Layout({ children }: LayoutProps) {
 
       <main className="flex-1">{children}</main>
 
-      <footer className="border-t border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <footer className="border-t border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 animate-slide-up">
         <div className="container mx-auto px-4 py-12">
           <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
             {/* Company Info */}
-            <div className="space-y-4">
-              <div className="flex items-center space-x-2">
-                <div className="h-6 w-6 rounded bg-gradient-to-br from-aethex-400 to-neon-blue flex items-center justify-center">
+            <div className="space-y-4 animate-fade-in">
+              <div className="flex items-center space-x-2 group">
+                <div className="h-6 w-6 rounded bg-gradient-to-br from-aethex-400 to-neon-blue flex items-center justify-center transition-all duration-300 group-hover:scale-110 group-hover:glow-blue">
                   <span className="text-xs font-bold text-white">Ae</span>
                 </div>
-                <span className="font-bold text-gradient">AeThex</span>
+                <span className="font-bold text-gradient group-hover:animate-pulse">AeThex</span>
               </div>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-sm text-muted-foreground hover:text-muted-foreground/80 transition-colors">
                 Pushing the boundaries of technology through cutting-edge research and breakthrough discoveries.
               </p>
             </div>
 
             {/* Services */}
-            <div className="space-y-4">
-              <h3 className="font-semibold text-foreground">Services</h3>
+            <div className="space-y-4 animate-slide-up" style={{ animationDelay: '0.1s' }}>
+              <h3 className="font-semibold text-foreground hover:text-gradient transition-all duration-300">Services</h3>
               <ul className="space-y-2 text-sm text-muted-foreground">
-                <li><Link to="/game-development" className="hover:text-aethex-400 transition-colors">Game Development</Link></li>
-                <li><Link to="/consulting" className="hover:text-aethex-400 transition-colors">Development Consulting</Link></li>
-                <li><Link to="/mentorship" className="hover:text-aethex-400 transition-colors">Mentorship Programs</Link></li>
-                <li><Link to="/research" className="hover:text-aethex-400 transition-colors">Research & Labs</Link></li>
+                <li><Link to="/game-development" className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Game Development</Link></li>
+                <li><Link to="/consulting" className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Development Consulting</Link></li>
+                <li><Link to="/mentorship" className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Mentorship Programs</Link></li>
+                <li><Link to="/research" className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Research & Labs</Link></li>
               </ul>
             </div>
 
             {/* Resources */}
-            <div className="space-y-4">
-              <h3 className="font-semibold text-foreground">Resources</h3>
+            <div className="space-y-4 animate-slide-up" style={{ animationDelay: '0.2s' }}>
+              <h3 className="font-semibold text-foreground hover:text-gradient transition-all duration-300">Resources</h3>
               <ul className="space-y-2 text-sm text-muted-foreground">
-                <li><Link to="/docs" className="hover:text-aethex-400 transition-colors">Documentation</Link></li>
-                <li><Link to="/blog" className="hover:text-aethex-400 transition-colors">Blog</Link></li>
-                <li><Link to="/community" className="hover:text-aethex-400 transition-colors">Community</Link></li>
-                <li><Link to="/support" className="hover:text-aethex-400 transition-colors">Support</Link></li>
+                <li><Link to="/docs" className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Documentation</Link></li>
+                <li><Link to="/blog" className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Blog</Link></li>
+                <li><Link to="/community" className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Community</Link></li>
+                <li><Link to="/support" className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Support</Link></li>
               </ul>
             </div>
 
             {/* Contact */}
-            <div className="space-y-4">
-              <h3 className="font-semibold text-foreground">Contact</h3>
+            <div className="space-y-4 animate-slide-up" style={{ animationDelay: '0.3s' }}>
+              <h3 className="font-semibold text-foreground hover:text-gradient transition-all duration-300">Contact</h3>
               <ul className="space-y-2 text-sm text-muted-foreground">
-                <li>Queen Creek, Arizona</li>
-                <li>info@aethex.biz</li>
-                <li>(530) 784-1287</li>
+                <li className="hover:text-aethex-400 transition-colors">Queen Creek, Arizona</li>
+                <li className="hover:text-aethex-400 transition-colors">info@aethex.biz</li>
+                <li className="hover:text-aethex-400 transition-colors">(530) 784-1287</li>
               </ul>
             </div>
           </div>
 
-          <div className="mt-8 pt-8 border-t border-border/40 flex flex-col sm:flex-row justify-between items-center">
-            <p className="text-xs text-muted-foreground">
+          <div className="mt-8 pt-8 border-t border-border/40 flex flex-col sm:flex-row justify-between items-center animate-fade-in" style={{ animationDelay: '0.4s' }}>
+            <p className="text-xs text-muted-foreground hover:text-aethex-400 transition-colors">
               © 2024 AeThex Corporation. All rights reserved.
             </p>
             <div className="flex items-center space-x-4 mt-4 sm:mt-0">
-              <Link to="/privacy" className="text-xs text-muted-foreground hover:text-aethex-400 transition-colors">
+              <Link to="/privacy" className="text-xs text-muted-foreground hover:text-aethex-400 transition-all duration-300 hover:scale-105">
                 Privacy Policy
               </Link>
-              <Link to="/terms" className="text-xs text-muted-foreground hover:text-aethex-400 transition-colors">
+              <Link to="/terms" className="text-xs text-muted-foreground hover:text-aethex-400 transition-all duration-300 hover:scale-105">
                 Terms of Service
               </Link>
             </div>