From 211f46b89cc48640a08dcd7c80ac491cacbca336 Mon Sep 17 00:00:00 2001
From: shenlan <manbuzhe2009@qq.com>
Date: Thu, 19 Jun 2025 17:06:56 +0800
Subject: [PATCH] Add bilingual terms and contact sections

---
 ui/homepage/app/page.tsx           |  4 ++++
 ui/homepage/components/Contact.tsx | 17 ++++++++++++++
 ui/homepage/components/NavBar.tsx  | 20 +++++++++-------
 ui/homepage/components/Terms.tsx   | 23 +++++++++++++++++++
 ui/homepage/i18n/translations.ts   | 37 ++++++++++++++++++++++++++++++
 5 files changed, 93 insertions(+), 8 deletions(-)
 create mode 100644 ui/homepage/components/Contact.tsx
 create mode 100644 ui/homepage/components/Terms.tsx

diff --git a/ui/homepage/app/page.tsx b/ui/homepage/app/page.tsx
index b969f22..0f60fad 100644
--- a/ui/homepage/app/page.tsx
+++ b/ui/homepage/app/page.tsx
@@ -2,6 +2,8 @@ import Hero from '@components/Hero'
 import Features from '@components/Features'
 import OpenSource from '@components/OpenSource'
 import DownloadSection from '@components/DownloadSection'
+import Terms from '@components/Terms'
+import Contact from '@components/Contact'
 import Footer from '@components/Footer'
 import NavBar from '@components/NavBar'
 
@@ -14,6 +16,8 @@ export default function Page() {
         <Features />
         <OpenSource />
         <DownloadSection />
+        <Terms />
+        <Contact />
       </main>
       <Footer />
     </>
diff --git a/ui/homepage/components/Contact.tsx b/ui/homepage/components/Contact.tsx
new file mode 100644
index 0000000..a4d7351
--- /dev/null
+++ b/ui/homepage/components/Contact.tsx
@@ -0,0 +1,17 @@
+'use client'
+import { useLanguage } from '../i18n/LanguageProvider'
+import { translations } from '../i18n/translations'
+
+export default function Contact() {
+  const { language } = useLanguage()
+  const t = translations[language]
+
+  return (
+    <section id="contact" className="py-20 bg-gray-900 text-white">
+      <div className="max-w-3xl mx-auto px-4 text-center">
+        <h2 className="text-3xl font-bold mb-6">{t.contactTitle}</h2>
+        <p className="text-xl">manbuzhe2008@gmail.com</p>
+      </div>
+    </section>
+  )
+}
diff --git a/ui/homepage/components/NavBar.tsx b/ui/homepage/components/NavBar.tsx
index af71abb..5863aa8 100644
--- a/ui/homepage/components/NavBar.tsx
+++ b/ui/homepage/components/NavBar.tsx
@@ -1,9 +1,13 @@
 'use client'
 import { useState } from 'react'
 import LanguageToggle from './LanguageToggle'
+import { useLanguage } from '../i18n/LanguageProvider'
+import { translations } from '../i18n/translations'
 
 export default function NavBar() {
   const [menuOpen, setMenuOpen] = useState(false)
+  const { language } = useLanguage()
+  const nav = translations[language].nav
 
   return (
     <nav className="fixed top-0 w-full z-50 bg-black/30 backdrop-blur border-b border-white/10">
@@ -15,10 +19,10 @@ export default function NavBar() {
 
         {/* 桌面导航 */}
         <div className="hidden md:flex items-center gap-6 text-sm text-white">
-          <a href="#features" className="hover:text-purple-300">Features</a>
-          <a href="#open-sources" className="hover:text-purple-300">Open Source</a>
-          <a href="#download" className="hover:text-purple-300">Download</a>
-          <a href="#contact" className="hover:text-purple-300">Contact</a>
+          <a href="#features" className="hover:text-purple-300">{nav.features}</a>
+          <a href="#open-sources" className="hover:text-purple-300">{nav.openSource}</a>
+          <a href="#download" className="hover:text-purple-300">{nav.download}</a>
+          <a href="#contact" className="hover:text-purple-300">{nav.contact}</a>
           <LanguageToggle />
         </div>
 
@@ -54,28 +58,28 @@ export default function NavBar() {
             onClick={() => setMenuOpen(false)}
             className="block py-2 text-white hover:text-purple-300"
           >
-            Features
+            {nav.features}
           </a>
           <a
             href="#open-sources"
             onClick={() => setMenuOpen(false)}
             className="block py-2 text-white hover:text-purple-300"
           >
-            Open Source
+            {nav.openSource}
           </a>
           <a
             href="#download"
             onClick={() => setMenuOpen(false)}
             className="block py-2 text-white hover:text-purple-300"
           >
-            Download
+            {nav.download}
           </a>
           <a
             href="#contact"
             onClick={() => setMenuOpen(false)}
             className="block py-2 text-white hover:text-purple-300"
           >
-            Contact
+            {nav.contact}
           </a>
           <div className="pt-2">
             <LanguageToggle />
diff --git a/ui/homepage/components/Terms.tsx b/ui/homepage/components/Terms.tsx
new file mode 100644
index 0000000..4ae602a
--- /dev/null
+++ b/ui/homepage/components/Terms.tsx
@@ -0,0 +1,23 @@
+'use client'
+import { useLanguage } from '../i18n/LanguageProvider'
+import { translations } from '../i18n/translations'
+
+export default function Terms() {
+  const { language } = useLanguage()
+  const t = translations[language]
+
+  return (
+    <section id="terms" className="py-20 bg-gray-950 text-white">
+      <div className="max-w-3xl mx-auto px-4">
+        <h2 className="text-3xl font-bold mb-6">{t.termsTitle}</h2>
+        <ul className="list-disc pl-5 space-y-2">
+          {t.termsPoints.map((p, idx) => (
+            <li key={idx} className="text-gray-300">
+              {p}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}
diff --git a/ui/homepage/i18n/translations.ts b/ui/homepage/i18n/translations.ts
index 006151a..e7f3099 100644
--- a/ui/homepage/i18n/translations.ts
+++ b/ui/homepage/i18n/translations.ts
@@ -11,6 +11,15 @@ export type Translation = {
   downloadTitle: string
   downloadSubtitle: string
   footerLinks: [string, string, string]
+  nav: {
+    features: string
+    openSource: string
+    download: string
+    contact: string
+  }
+  termsTitle: string
+  termsPoints: string[]
+  contactTitle: string
 }
 
 export const translations: Record<'en' | 'zh', Translation> = {
@@ -27,6 +36,20 @@ export const translations: Record<'en' | 'zh', Translation> = {
     downloadTitle: 'Download',
     downloadSubtitle: 'Select your platform',
     footerLinks: ['Privacy Policy', 'Terms of Service', 'Contact Us'],
+    nav: {
+      features: 'Features',
+      openSource: 'Open Source',
+      download: 'Download',
+      contact: 'Contact',
+    },
+    termsTitle: 'Terms of Service',
+    termsPoints: [
+      'A free, open-source version for self-hosting on Windows, Linux, and macOS',
+      'Affordable 1-on-1 consulting for technical setup',
+      'A premium plan with cloud sync, mobile support, and device linking',
+      'A future SaaS version for users who want one-click deployment with no setup required',
+    ],
+    contactTitle: 'Contact Us',
   },
   zh: {
     hero: {
@@ -41,5 +64,19 @@ export const translations: Record<'en' | 'zh', Translation> = {
     downloadTitle: '下载',
     downloadSubtitle: '选择适合的平台',
     footerLinks: ['隐私政策', '服务条款', '联系我们'],
+    nav: {
+      features: '功能特性',
+      openSource: '开源项目',
+      download: '下载',
+      contact: '联系我们',
+    },
+    termsTitle: '服务条款',
+    termsPoints: [
+      '提供在 Windows、Linux 和 macOS 上可自托管的免费开源版本',
+      '提供经济实惠的 1 对 1 技术部署咨询服务',
+      '提供带云同步、移动端支持和设备绑定的高级版计划',
+      '未来将推出无需设置、一键部署的 SaaS 版本',
+    ],
+    contactTitle: '联系我们',
   },
 }