From ee6eecf7c9e40f1240eb9c6b65098723ddd27b40 Mon Sep 17 00:00:00 2001
From: Ember <197652334@qq.com>
Date: Sun, 2 Nov 2025 01:42:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E6=81=A2=E5=A4=8D=20LandingPage?=
 =?UTF-8?q?=20=E9=A1=B5=E8=84=9A=EF=BC=88FooterSection=EF=BC=89=EF=BC=8C?=
 =?UTF-8?q?=E5=A4=8D=E7=94=A8=20App=20=E7=9A=84=20Footer=20=E6=96=87?=
 =?UTF-8?q?=E6=A1=88=E4=B8=8E=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/landing/FooterSection.tsx | 39 ++++++++++++++++++++
 web/src/pages/LandingPage.tsx                |  2 +
 2 files changed, 41 insertions(+)
 create mode 100644 web/src/components/landing/FooterSection.tsx

diff --git a/web/src/components/landing/FooterSection.tsx b/web/src/components/landing/FooterSection.tsx
new file mode 100644
index 00000000..d29a1a3e
--- /dev/null
+++ b/web/src/components/landing/FooterSection.tsx
@@ -0,0 +1,39 @@
+import { useLanguage } from '../../contexts/LanguageContext'
+import { t } from '../../i18n/translations'
+
+export default function FooterSection() {
+  const { language } = useLanguage()
+  return (
+    <footer style={{ borderTop: '1px solid #2B3139', background: '#181A20' }}>
+      <div className="max-w-[1920px] mx-auto px-6 py-6 text-center text-sm" style={{ color: '#5E6673' }}>
+        <p>{t('footerTitle', language)}</p>
+        <p className="mt-1">{t('footerWarning', language)}</p>
+        <div className="mt-4">
+          <a
+            href="https://github.com/tinkle-community/nofx"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-3 py-2 rounded text-sm font-semibold transition-all hover:scale-105"
+            style={{ background: '#1E2329', color: '#848E9C', border: '1px solid #2B3139' }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = '#2B3139'
+              e.currentTarget.style.color = '#EAECEF'
+              e.currentTarget.style.borderColor = '#F0B90B'
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = '#1E2329'
+              e.currentTarget.style.color = '#848E9C'
+              e.currentTarget.style.borderColor = '#2B3139'
+            }}
+          >
+            <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+            </svg>
+            GitHub
+          </a>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
diff --git a/web/src/pages/LandingPage.tsx b/web/src/pages/LandingPage.tsx
index fdbad26e..206e2b3b 100644
--- a/web/src/pages/LandingPage.tsx
+++ b/web/src/pages/LandingPage.tsx
@@ -9,6 +9,7 @@ import HowItWorksSection from '../components/landing/HowItWorksSection'
 import CommunitySection from '../components/landing/CommunitySection'
 import AnimatedSection from '../components/landing/AnimatedSection'
 import LoginModal from '../components/landing/LoginModal'
+import FooterSection from '../components/landing/FooterSection'
 
 export function LandingPage() {
   const [showLoginModal, setShowLoginModal] = useState(false)
@@ -45,6 +46,7 @@ export function LandingPage() {
       </AnimatedSection>
 
       {showLoginModal && <LoginModal onClose={() => setShowLoginModal(false)} />}
+      <FooterSection />
     </div>
   )
 }