feature: add about us

src/App.jsx

@@ -8,7 +8,7 @@ import NotFound from './pages/NotFound';
 const JsonFormatter = lazy(() => import('./components/JsonFormatter'));
 const TextToImage = lazy(() => import('./components/TextToImage'));
 const UrlDecode = lazy(() => import('./components/UrlDecode'));
-
+const About = lazy(() => import('./pages/About'));
 function App() {
   return (
     <div className="app-container">
@@ -21,6 +21,7 @@ function App() {
               <Route path="/text2image" element={<TextToImage />} />
               <Route path="/json-formatter" element={<JsonFormatter />} />
               <Route path="/url-decode" element={<UrlDecode />} />
+              <Route path="/about" element={<About />} />
               <Route path="*" element={<NotFound />} />
             </Routes>
           </Suspense>

src/components/Footer.jsx

 import React from 'react';
+import { Link } from 'react-router-dom';
 import { useTranslation } from '../js/i18n';
 
-function Footer() {
+const Footer = React.memo(() => {
   const { t } = useTranslation();
 
   return (
-    <footer>
-      <p>&copy; 2024 {t('footer.copyRight')}</p>
+    <footer className="footer">
+      <p>
+        &copy; {new Date().getFullYear()} {t('footer.copyRight')}
+        <span className="footer-separator" />
+        <Link to="/about" className="footer-link">
+          {t('navigation.about')}
+        </Link>
+      </p>
     </footer>
   );
-}
+});
 
 export default Footer;
\ No newline at end of file

src/js/i18n.js

@@ -36,7 +36,19 @@ const i18n = {
     },
     footer: {
       copyRight: 'AI Toolbox. All rights reserved.'
-    }
+    },
+    about: {
+      title: 'About Us',
+      description: 'AI Toolbox is a comprehensive web application that integrates various AI tools to provide users with a one-stop AI solution.',
+      mission: 'Our Mission',
+      missionDescription: 'To empower users with easy access to powerful AI tools, enhancing productivity and creativity.',
+      team: 'Our Team',
+      teamDescription: 'We are a dedicated team of AI enthusiasts and developers committed to building innovative solutions.',
+      contact: 'Contact Us',
+    },
+    navigation: {
+      about: 'About Us'
+    },
   },
   zh: {
     title: 'AI 工具箱',
@@ -73,7 +85,19 @@ const i18n = {
     },
     footer: {
       copyRight: 'AI 工具箱. 保留所有权利。'
-    }
+    },
+    about: {
+      title: '关于我们',
+      description: 'AI 工具箱是一个集成多种人工智能工具的综合Web应用程序，旨在为用户提供一站式AI解决方案。',
+      mission: '我们的使命',
+      missionDescription: '通过提供强大的AI工具，赋能用户，提高生产力和创造力。',
+      team: '我们的团队',
+      teamDescription: '我们是一支由AI爱好者和开发人员组成的专注团队，致力于构建创新的解决方案。',
+      contact: '联系我们',
+    },
+    navigation: {
+      about: '关于我们'
+    },
   },
   ja: {
     title: 'AIツールボックス',
@@ -110,7 +134,19 @@ const i18n = {
     },
     footer: {
       copyRight: 'AIツールボックス. すべての権利を保有します。'
-    }
+    },
+    about: {
+      title: '私たちについて',
+      description: 'AIツールボックスは、さまざまなAIツールを統合した包括的なWebアプリケーションであり、ユーザーにワンストップのAIソリューションを提供します。',
+      mission: '私たちの使命',
+      missionDescription: '強力なAIツールへの簡単なアクセスを提供し、ユーザーの生産性と創造性を高めること。',
+      team: '私たちのチーム',
+      teamDescription: '私たちは革新的なソリューションの構築に専念するAI愛好家と開発者の献身的なチームです。',
+      contact: 'お問い合わせ',
+    },
+    navigation: {
+      about: '私たちについて'
+    },
   },
   ko: {
     title: 'AI 도구 상자',
@@ -147,7 +183,19 @@ const i18n = {
     },
     footer: {
       copyRight: 'AI 도구 상자. 모든 권리 보유.'
-    }
+    },
+    about: {
+      title: '회사 소개',
+      description: 'AI 도구 상자는 다양한 AI 도구를 통합한 종합 웹 애플리케이션으로, 사용자에게 원스톱 AI 솔루션을 제공합니다.',
+      mission: '우리의 사명',
+      missionDescription: '강력한 AI 도구에 쉽게 접근할 수 있도록 하여 생산성과 창의성을 향상시키는 것.',
+      team: '우리 팀',
+      teamDescription: '우리는 혁신적인 솔루션을 구축하는 데 전념하는 AI 애호가 및 개발자 팀입니다.',
+      contact: '문의하기',
+    },
+    navigation: {
+      about: '회사 소개'
+    },
   },
 };
 

src/pages/About.jsx

+import React from 'react';
+import SEO from '../components/SEO';
+import { useTranslation } from '../js/i18n';
+import '../styles/About.css'; // 新增的样式文件
+
+const About = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <SEO
+        title={t('about.title')}
+        description={t('about.description')}
+      />
+      <main>
+        <section className="about-section">
+          <h1>{t('about.title')}</h1>
+          <p>{t('about.description')}</p>
+          <h2>{t('about.mission')}</h2>
+          <p>{t('about.missionDescription')}</p>
+          <h2>{t('about.team')}</h2>
+          <p>{t('about.teamDescription')}</p>
+          <h2>{t('about.contact')}</h2>
+          <div className="social-links">
+            <a href="https://x.com/fun000001" target="_blank" rel="noopener noreferrer" className="social-link">
+              <i className="fab fa-twitter"></i> Twitter
+            </a>
+            <a href="https://fisherdaddy.com" target="_blank" rel="noopener noreferrer" className="social-link">
+              <i className="fas fa-blog"></i> Blog
+            </a>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+};
+
+export default About;
\ No newline at end of file

src/pages/Home.jsx

@@ -24,7 +24,6 @@ const Home = () => {
           <p className="slogan">{t('slogan')}</p>
         </section>
         <section className="tools-section">
-          <h2>工具</h2>
           <div className="tools-grid">
             {tools.map(tool => (
               <Link to={tool.path} key={tool.id} className="tool-card">

src/styles/About.css

+.about-section {
+    padding: 2rem;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  
+  .about-section h1,
+  .about-section h2 {
+    color: #333;
+  }
+  
+  .about-section p {
+    line-height: 1.6;
+    color: #555;
+  }
+  
+  .social-links {
+    display: flex;
+    gap: 1.5rem;
+    margin-top: 1rem;
+  }
+  
+  .social-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: #6366F1; /* 与现有主题颜色一致 */
+    font-size: 1.1rem;
+    transition: color 0.3s ease;
+  }
+  
+  .social-link i {
+    margin-right: 0.5rem;
+    font-size: 1.5rem;
+  }
+  
+  .social-link:hover {
+    color: #4F46E5; /* 悬停时颜色加深 */
+  }
\ No newline at end of file

src/styles/main.css

@@ -201,3 +201,30 @@ footer {
   }
 }
 
+.footer-separator {
+  display: inline-block;
+  width: 1px;
+  height: 1em;
+  background-color: #ccc;
+  margin: 0 8px;
+  vertical-align: middle;
+}
+
+.footer-link {
+  text-decoration: none;
+  color: inherit; /* 保持与父元素相同的颜色，可以根据需要调整 */
+}
+
+.footer-link:hover {
+  text-decoration: none; /* 悬停时也不显示下划线 */
+}
+
+/* 如果需要进一步去除所有链接的下划线，可以添加以下全局样式 */
+.footer a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.footer a:hover {
+  text-decoration: none;
+}
\ No newline at end of file