feat: 更新项目代码

InfoGenie-frontend/src/components/Footer.js

@@ -1,74 +1,33 @@
 import React from 'react';
-import styled from 'styled-components';
-
-const FooterContainer = styled.footer`
-  background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
-  color: white;
-  padding: 40px 0 80px; /* 底部留出导航栏空间 */
-  margin-top: 60px;
-  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
-  
-  @media (min-width: 769px) {
-    padding: 40px 0 20px;
-  }
-`;
-
-const FooterContent = styled.div`
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 16px;
-`;
-
-const FooterInfo = styled.div`
-  text-align: center;
-  margin-bottom: 24px;
-`;
-
-const FooterTitle = styled.h3`
-  color: white;
-  margin-bottom: 12px;
-  font-size: 20px;
-  font-weight: bold;
-`;
-
-const FooterDivider = styled.div`
-  height: 1px;
-  background: rgba(255, 255, 255, 0.2);
-  margin: 24px 0;
-`;
-
-const FooterBottom = styled.div`
-  text-align: center;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.8);
-  line-height: 1.5;
-`;
-
-const Copyright = styled.p`
-  margin-bottom: 8px;
-`;
 
 const Footer = () => {
   const currentYear = new Date().getFullYear();
 
   return (
-    <FooterContainer>
-      <FooterContent>
-        <FooterInfo>
-          <FooterTitle>万象口袋</FooterTitle>
-        </FooterInfo>
+    <footer
+      className={[
+        'text-white mt-[60px]',
+        'bg-[linear-gradient(135deg,rgba(129,199,132,0.62)_0%,rgba(102,187,106,0.62)_100%)]',
+        'backdrop-blur-[16px] [backdrop-filter:blur(16px)_saturate(125%)]',
+        'shadow-[0_-2px_16px_rgba(0,0,0,0.08)]',
+        'border-t border-white/35',
+        'pt-10 pb-20 md:pb-5',
+      ].join(' ')}
+    >
+      <div className="max-w-[1200px] mx-auto px-4">
+        <div className="text-center mb-6">
+          <h3 className="text-white text-xl font-bold mb-3">万象口袋</h3>
+        </div>
 
+        <div className="h-px bg-white/20 my-6" />
 
-
-        <FooterDivider />
-
-        <FooterBottom>
-          <Copyright>
-    <strong>蜀ICP备2025151694号 | Copyright © 2025-{currentYear}</strong>
-          </Copyright>
-        </FooterBottom>
-      </FooterContent>
-    </FooterContainer>
+        <div className="text-center text-xs text-white/80 leading-relaxed">
+          <p className="mb-2">
+            <strong>蜀ICP备2025151694号 | Copyright © 2025-{currentYear}</strong>
+          </p>
+        </div>
+      </div>
+    </footer>
   );
 };