上线

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# vscode
+.vscode

.prettierrc

@@ -0,0 +1,11 @@
+{
+    "singleQuote": true,
+    "printWidth": 100,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "jsxSingleQuote": false,
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "endOfLine": "lf"
+}

README.md

@@ -0,0 +1,25 @@
+# Onlook Starter Template
+
+<p align="center">
+  <img src="app/favicon.ico" />
+</p>
+
+This is an [Onlook](https://onlook.com/) project set up with
+[Next.js](https://nextjs.org/), [TailwindCSS](https://tailwindcss.com/) and
+[ShadCN](https://ui.shadcn.com).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in Onlook to see the result.

app/[...slug]/page.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import HomePage from '../../components/HomePage';
+
+export default function DynamicPage() {
+    const params = useParams();
+    const router = useRouter();
+    const [language, setLanguage] = useState('en');
+
+    useEffect(() => {
+        const slug = params.slug as string[];
+        let detectedLanguage = 'en';
+
+        // Check if the first segment is a language code
+        if (slug && slug.length > 0) {
+            const firstSegment = slug[0];
+            if (['zh-CN', 'zh-TW'].includes(firstSegment)) {
+                detectedLanguage = firstSegment;
+
+                // If it's just the language root (e.g., /zh-CN), show the homepage
+                if (slug.length === 1) {
+                    setLanguage(detectedLanguage);
+                    return;
+                }
+
+                // For other pages like /zh-CN/products, redirect to main site with language preference
+                localStorage.setItem('preferred-language', detectedLanguage);
+                const remainingPath = slug.slice(1).join('/');
+                router.replace(`/${remainingPath}`);
+                return;
+            }
+        }
+
+        // Check localStorage for saved preference
+        const savedLanguage = localStorage.getItem('preferred-language');
+        if (savedLanguage && ['en', 'zh-CN', 'zh-TW'].includes(savedLanguage)) {
+            detectedLanguage = savedLanguage;
+        }
+
+        setLanguage(detectedLanguage);
+    }, [params, router]);
+
+    return <HomePage initialLanguage={language} data-oid="mzpq2zv" />;
+}

app/globals.css

@@ -0,0 +1,114 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    --foreground-rgb: 0, 0, 0;
+    --background-start-rgb: 214, 219, 220;
+    --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --foreground-rgb: 255, 255, 255;
+        --background-start-rgb: 0, 0, 0;
+        --background-end-rgb: 0, 0, 0;
+    }
+}
+
+@layer utilities {
+    .text-balance {
+        text-wrap: balance;
+    }
+}
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 0 0% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 0 0% 3.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 0 0% 3.9%;
+        --primary: 0 0% 9%;
+        --primary-foreground: 0 0% 98%;
+        --secondary: 0 0% 96.1%;
+        --secondary-foreground: 0 0% 9%;
+        --muted: 0 0% 96.1%;
+        --muted-foreground: 0 0% 45.1%;
+        --accent: 0 0% 96.1%;
+        --accent-foreground: 0 0% 9%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 89.8%;
+        --input: 0 0% 89.8%;
+        --ring: 0 0% 3.9%;
+        --chart-1: 12 76% 61%;
+        --chart-2: 173 58% 39%;
+        --chart-3: 197 37% 24%;
+        --chart-4: 43 74% 66%;
+        --chart-5: 27 87% 67%;
+        --radius: 0.5rem;
+    }
+    .dark {
+        --background: 0 0% 3.9%;
+        --foreground: 0 0% 98%;
+        --card: 0 0% 3.9%;
+        --card-foreground: 0 0% 98%;
+        --popover: 0 0% 3.9%;
+        --popover-foreground: 0 0% 98%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 0 0% 9%;
+        --secondary: 0 0% 14.9%;
+        --secondary-foreground: 0 0% 98%;
+        --muted: 0 0% 14.9%;
+        --muted-foreground: 0 0% 63.9%;
+        --accent: 0 0% 14.9%;
+        --accent-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 14.9%;
+        --input: 0 0% 14.9%;
+        --ring: 0 0% 83.1%;
+        --chart-1: 220 70% 50%;
+        --chart-2: 160 60% 45%;
+        --chart-3: 30 80% 55%;
+        --chart-4: 280 65% 60%;
+        --chart-5: 340 75% 55%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+/* Animation styles */
+@keyframes fade-in-up {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-fade-in-up {
+    animation: fade-in-up 0.8s ease-out forwards;
+}
+
+.animation-delay-200 {
+    animation-delay: 0.2s;
+    opacity: 0;
+}
+
+.animation-delay-400 {
+    animation-delay: 0.4s;
+    opacity: 0;
+}

app/layout.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from 'next';
+import './globals.css';
+export const metadata: Metadata = {
+    title: 'My New App',
+    description: 'Generated by Onlook',
+};
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+    return (
+        <html lang="en" data-oid="pzs4:js">
+            <body className="" data-oid="a_u5:u3">
+                {children}
+            </body>
+        </html>
+    );
+}

app/news/[id]/page.tsx

@@ -0,0 +1,90 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { remark } from 'remark';
+import html from 'remark-html';
+import { notFound } from 'next/navigation';
+import { useTranslation } from '../../../lib/i18n/useTranslation';
+import { languages } from '../../../lib/i18n/config';
+
+const NEWS_DIR = path.join(process.cwd(), 'content/news');
+
+export async function generateStaticParams() {
+    const files = fs.readdirSync(NEWS_DIR);
+    return files.map((file) => ({ id: file.replace(/\.md$/, '') }));
+}
+
+async function getNewsData(id: string) {
+    const filePath = path.join(NEWS_DIR, `${id}.md`);
+    if (!fs.existsSync(filePath)) return null;
+    const fileContent = fs.readFileSync(filePath, 'utf-8');
+    const { data, content } = matter(fileContent);
+
+    // 提取多语言正文
+    const langSections: Record<string, string> = {};
+    let currentLang = '';
+    let buffer: string[] = [];
+    for (const line of content.split('\n')) {
+        const langMatch = line.match(/^##\s*(\w[\w-]*)/);
+        if (langMatch) {
+            if (currentLang && buffer.length) {
+                langSections[currentLang] = buffer.join('\n').trim();
+            }
+            currentLang = langMatch[1];
+            buffer = [];
+        } else if (currentLang) {
+            buffer.push(line);
+        }
+    }
+    if (currentLang && buffer.length) {
+        langSections[currentLang] = buffer.join('\n').trim();
+    }
+
+    return { frontmatter: data, langSections };
+}
+
+export default async function NewsDetailPage({ params }: { params: { id: string } }) {
+    const { id } = params;
+    const news = await getNewsData(id);
+    if (!news) return notFound();
+
+    // 默认语言优先级
+    const langOrder = ['en', 'zh-CN', 'zh-TW'];
+    // 这里假设 SSR 时用 Accept-Language 或默认 en
+    let lang = langOrder.find((l) => news.langSections[l]);
+    let htmlContent = '';
+    if (lang) {
+        htmlContent = (await remark().use(html).process(news.langSections[lang])).toString();
+    }
+
+    // 渲染页面
+    return (
+        <div
+            className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50"
+            data-oid="7k5q43s"
+        >
+            <div className="max-w-4xl mx-auto py-16 px-4" data-oid="7y520yg">
+                <h1 className="text-4xl font-bold mb-4" data-oid="pj.he2s">
+                    {news.frontmatter[`title_${lang}`] || news.frontmatter.title}
+                </h1>
+                <div className="text-gray-500 mb-2" data-oid="rgvpuvi">
+                    {news.frontmatter.date} · {news.frontmatter.readTime} ·{' '}
+                    {news.frontmatter.category}
+                </div>
+                <div className="mb-6" data-oid="dwkw1qu">
+                    <img
+                        src={news.frontmatter.image}
+                        alt={news.frontmatter.title}
+                        className="rounded-xl w-full h-80 object-cover"
+                        data-oid="qdo4b98"
+                    />
+                </div>
+                <div
+                    className="prose prose-lg max-w-none"
+                    dangerouslySetInnerHTML={{ __html: htmlContent }}
+                    data-oid="by0i9t7"
+                />
+            </div>
+        </div>
+    );
+}

app/news/page.tsx

@@ -0,0 +1,20 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import NewsPage from '../../components/NewsPage';
+import { isValidLanguage } from '../../lib/i18n/config';
+
+const NEWS_DIR = path.join(process.cwd(), 'content/news');
+
+export default function News({ searchParams }: { searchParams?: { lang?: string } }) {
+    const files = fs.readdirSync(NEWS_DIR).filter((f) => f.endsWith('.md'));
+    const newsList = files.map((file) => {
+        const id = file.replace(/\\.md$/, '');
+        const fileContent = fs.readFileSync(path.join(NEWS_DIR, file), 'utf-8');
+        const { data } = matter(fileContent);
+        return { id, ...data };
+    });
+    const lang = searchParams?.lang;
+    const initialLanguage = lang && isValidLanguage(lang) ? lang : undefined;
+    return <NewsPage initialLanguage={initialLanguage} newsList={newsList} data-oid="84zot4q" />;
+}

app/page.tsx

@@ -0,0 +1,9 @@
+import HomePage from '../components/HomePage';
+import { isValidLanguage } from '../lib/i18n/config';
+
+export default function Page({ searchParams }: { searchParams?: { lang?: string } }) {
+    // 校验 lang 参数
+    const lang = searchParams?.lang;
+    const initialLanguage = lang && isValidLanguage(lang) ? lang : undefined;
+    return <HomePage initialLanguage={initialLanguage} data-oid="8gwj:9s" />;
+}

app/products/page.tsx

@@ -0,0 +1,9 @@
+import ProductsPage from '../../components/ProductsPage';
+import { isValidLanguage } from '../../lib/i18n/config';
+
+export default function Products({ searchParams }: { searchParams?: { lang?: string } }) {
+    // 校验 lang 参数
+    const lang = searchParams?.lang;
+    const initialLanguage = lang && isValidLanguage(lang) ? lang : undefined;
+    return <ProductsPage initialLanguage={initialLanguage} data-oid="o5k42_h" />;
+}

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

components/HomePage.tsx

@@ -0,0 +1,524 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { languages } from '../lib/i18n/config';
+import { useTranslation } from '../lib/i18n/useTranslation';
+
+const bannerImages = [
+    'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&h=1080&fit=crop',
+    'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=1920&h=1080&fit=crop',
+    'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1920&h=1080&fit=crop',
+];
+
+export default function HomePage({ initialLanguage }: { initialLanguage?: string }) {
+    const { language, t, changeLanguage, getLocalizedPath, isInitialized } =
+        useTranslation(initialLanguage);
+    const [currentSlide, setCurrentSlide] = useState(0);
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+    // Auto-advance carousel
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setCurrentSlide((prev) => (prev + 1) % t.banner.slides.length);
+        }, 5000);
+        return () => clearInterval(timer);
+    }, [t.banner.slides.length]);
+
+    // 防抖的语言切换处理
+    const handleLanguageChange = useCallback(
+        (newLanguage: string) => {
+            changeLanguage(newLanguage as any);
+        },
+        [changeLanguage],
+    );
+
+    // Navigation items
+    const navItems = [
+        { key: 'home', label: t.nav.home, href: getLocalizedPath('/') },
+        { key: 'products', label: t.nav.products, href: getLocalizedPath('/products') },
+        { key: 'news', label: t.nav.news, href: getLocalizedPath('/news') },
+        { key: 'support', label: t.nav.support, href: getLocalizedPath('/support') },
+        { key: 'about', label: t.nav.about, href: getLocalizedPath('/about') },
+    ];
+
+    if (!isInitialized) {
+        return (
+            <div
+                className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 flex items-center justify-center"
+                data-oid="oapni0f"
+            >
+                <div className="text-center" data-oid="dt7:7lh">
+                    <div
+                        className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"
+                        data-oid="p3:w.cy"
+                    ></div>
+                    <p className="text-gray-600" data-oid=".qjvo16">
+                        Loading...
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50"
+            data-oid="kdmy.k-"
+        >
+            {/* Navigation */}
+            <nav
+                className="fixed top-0 left-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-white/20 shadow-sm"
+                data-oid="2145_w8"
+            >
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="p.qa9un">
+                    <div className="flex justify-between items-center h-16" data-oid="svakdep">
+                        {/* Logo */}
+                        <div className="flex items-center" data-oid="leblynm">
+                            <div className="flex-shrink-0" data-oid="e2mc7xv">
+                                <div
+                                    className="w-10 h-10 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center"
+                                    data-oid="y43tpc4"
+                                >
+                                    <span
+                                        className="text-white font-bold text-lg"
+                                        data-oid="tbe-k8q"
+                                    >
+                                        T
+                                    </span>
+                                </div>
+                            </div>
+                            <div className="ml-3" data-oid="g4jhxrf">
+                                <span
+                                    className="text-xl font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
+                                    data-oid="0sgze_e"
+                                >
+                                    TechCorp
+                                </span>
+                            </div>
+                        </div>
+
+                        {/* Desktop Navigation */}
+                        <div className="hidden md:block" data-oid="umt6j0n">
+                            <div className="ml-10 flex items-baseline space-x-8" data-oid="r2bawsb">
+                                {navItems.map((item) => (
+                                    <a
+                                        key={item.key}
+                                        href={item.href}
+                                        className="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors duration-200 hover:bg-blue-50 rounded-md"
+                                        data-oid="usc29ud"
+                                    >
+                                        {item.label}
+                                    </a>
+                                ))}
+                            </div>
+                        </div>
+
+                        {/* Language Selector & Mobile Menu */}
+                        <div className="flex items-center space-x-4" data-oid="7:cj.hr">
+                            {/* Language Selector */}
+                            <div className="relative" data-oid="ecc0ugm">
+                                <select
+                                    value={language}
+                                    onChange={(e) => handleLanguageChange(e.target.value)}
+                                    className="appearance-none bg-white/80 border border-gray-200 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                    data-oid="c8yzx8s"
+                                >
+                                    {languages.map((lang) => (
+                                        <option
+                                            key={lang.code}
+                                            value={lang.code}
+                                            data-oid="0wqfdk_"
+                                        >
+                                            {lang.flag} {lang.label}
+                                        </option>
+                                    ))}
+                                </select>
+                            </div>
+
+                            {/* Mobile menu button */}
+                            <div className="md:hidden" data-oid="_6uyhfa">
+                                <button
+                                    onClick={() => setIsMenuOpen(!isMenuOpen)}
+                                    className="text-gray-700 hover:text-blue-600 p-2"
+                                    data-oid="bk0-sc_"
+                                >
+                                    <svg
+                                        className="h-6 w-6"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                        stroke="currentColor"
+                                        data-oid=":zv7-8-"
+                                    >
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth={2}
+                                            d="M4 6h16M4 12h16M4 18h16"
+                                            data-oid="l9-fwrm"
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Mobile Navigation */}
+                    {isMenuOpen && (
+                        <div className="md:hidden" data-oid="dltgnv4">
+                            <div
+                                className="px-2 pt-2 pb-3 space-y-1 bg-white/90 backdrop-blur-md rounded-lg mt-2"
+                                data-oid="e9nd4qt"
+                            >
+                                {navItems.map((item) => (
+                                    <a
+                                        key={item.key}
+                                        href={item.href}
+                                        className="text-gray-700 hover:text-blue-600 block px-3 py-2 text-base font-medium transition-colors duration-200"
+                                        data-oid="o:e-:da"
+                                    >
+                                        {item.label}
+                                    </a>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </nav>
+
+            {/* Banner Carousel */}
+            <section className="relative min-h-screen" data-oid="tjo4goy">
+                <div className="pt-16" data-oid="zx.628s">
+                    <div className="absolute inset-0" data-oid="j3300l3">
+                        {t.banner.slides.map((slide, index) => (
+                            <div
+                                key={index}
+                                className={`absolute inset-0 transition-opacity duration-1000 ${
+                                    index === currentSlide ? 'opacity-100' : 'opacity-0'
+                                }`}
+                                data-oid="01ekuuk"
+                            >
+                                <div
+                                    className="w-full h-full bg-cover bg-center relative"
+                                    style={{ backgroundImage: `url(${bannerImages[index]})` }}
+                                    data-oid="fc96k-h"
+                                >
+                                    <div
+                                        className="absolute inset-0 bg-gradient-to-r from-black/60 to-black/30"
+                                        data-oid="_:7czli"
+                                    ></div>
+                                    <div
+                                        className="relative z-10 flex items-center justify-center h-full text-center text-white px-4"
+                                        data-oid="my37fw0"
+                                    >
+                                        <div className="max-w-4xl" data-oid="bf69mr-">
+                                            <h1
+                                                className="text-4xl md:text-6xl font-bold mb-4 animate-fade-in-up"
+                                                data-oid="u8::6-a"
+                                            >
+                                                {slide.title}
+                                            </h1>
+                                            <p
+                                                className="text-xl md:text-2xl mb-8 animate-fade-in-up animation-delay-200"
+                                                data-oid="it2j9h6"
+                                            >
+                                                {slide.subtitle}
+                                            </p>
+                                            <button
+                                                className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-8 py-3 rounded-full text-lg font-semibold transition-all duration-300 transform hover:scale-105 animate-fade-in-up animation-delay-400"
+                                                data-oid="lwjte.q"
+                                            >
+                                                {slide.cta}
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Carousel Indicators */}
+                    <div
+                        className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2"
+                        data-oid="m3sdak1"
+                    >
+                        {t.banner.slides.map((_, index) => (
+                            <button
+                                key={index}
+                                onClick={() => setCurrentSlide(index)}
+                                className={`w-3 h-3 rounded-full transition-all duration-300 ${
+                                    index === currentSlide ? 'bg-white' : 'bg-white/50'
+                                }`}
+                                data-oid="rha.867"
+                            />
+                        ))}
+                    </div>
+
+                    {/* Carousel Navigation */}
+                    <button
+                        onClick={() =>
+                            setCurrentSlide(
+                                (prev) =>
+                                    (prev - 1 + t.banner.slides.length) % t.banner.slides.length,
+                            )
+                        }
+                        className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 text-white p-2 rounded-full transition-all duration-300"
+                        data-oid="2j3q4ly"
+                    >
+                        <svg
+                            className="w-6 h-6"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            data-oid="rob:qv1"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M15 19l-7-7 7-7"
+                                data-oid="05m8kfe"
+                            />
+                        </svg>
+                    </button>
+                    <button
+                        onClick={() =>
+                            setCurrentSlide((prev) => (prev + 1) % t.banner.slides.length)
+                        }
+                        className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 text-white p-2 rounded-full transition-all duration-300"
+                        data-oid="erli9o6"
+                    >
+                        <svg
+                            className="w-6 h-6"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            data-oid="s-y9c2e"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M9 5l7 7-7 7"
+                                data-oid="iq32:kc"
+                            />
+                        </svg>
+                    </button>
+                </div>
+            </section>
+
+            {/* Features Section */}
+            <section className="py-20 px-4 sm:px-6 lg:px-8" data-oid="mujfnk2">
+                <div className="max-w-7xl mx-auto" data-oid="389x5r.">
+                    <div className="text-center mb-16" data-oid="-2y286k">
+                        <h2
+                            className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
+                            data-oid="15bp_6x"
+                        >
+                            {t.features.title}
+                        </h2>
+                        <p className="text-xl text-gray-600 max-w-3xl mx-auto" data-oid="uk3vhjw">
+                            {t.features.subtitle}
+                        </p>
+                    </div>
+
+                    <div
+                        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
+                        data-oid="-vpsmcc"
+                    >
+                        {t.features.items.map((feature, index) => (
+                            <div
+                                key={index}
+                                className="bg-white/60 backdrop-blur-sm rounded-xl p-6 text-center hover:bg-white/80 transition-all duration-300 transform hover:-translate-y-2 hover:shadow-xl border border-white/20"
+                                data-oid="i89e7vc"
+                            >
+                                <div className="text-4xl mb-4" data-oid="7l0o8m:">
+                                    {feature.icon}
+                                </div>
+                                <h3
+                                    className="text-xl font-semibold text-gray-900 mb-3"
+                                    data-oid="dekqh_y"
+                                >
+                                    {feature.title}
+                                </h3>
+                                <p className="text-gray-600" data-oid="q5hh.fn">
+                                    {feature.description}
+                                </p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </section>
+
+            {/* CTA Section */}
+            <section
+                className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-blue-600 to-purple-600"
+                data-oid="cic0dnw"
+            >
+                <div className="max-w-4xl mx-auto text-center text-white" data-oid="rz6-1jd">
+                    <h2 className="text-3xl md:text-4xl font-bold mb-6" data-oid="9yq2-y.">
+                        {t.cta.title}
+                    </h2>
+                    <p className="text-xl mb-8 opacity-90" data-oid="knn1269">
+                        {t.cta.subtitle}
+                    </p>
+                    <div
+                        className="flex flex-col sm:flex-row gap-4 justify-center"
+                        data-oid=".hh3g7b"
+                    >
+                        <button
+                            className="bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105"
+                            data-oid="cwhn47p"
+                        >
+                            {t.cta.primaryButton}
+                        </button>
+                        <button
+                            className="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-blue-600 transition-all duration-300 transform hover:scale-105"
+                            data-oid="h49zy3d"
+                        >
+                            {t.cta.secondaryButton}
+                        </button>
+                    </div>
+                </div>
+            </section>
+
+            {/* Footer */}
+            <footer
+                className="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8"
+                data-oid="jjefhwi"
+            >
+                <div className="max-w-7xl mx-auto" data-oid="16lwyf1">
+                    <div className="grid grid-cols-1 md:grid-cols-4 gap-8" data-oid="68g0ztx">
+                        <div data-oid="7azoht:">
+                            <div className="flex items-center mb-4" data-oid="jj1osko">
+                                <div
+                                    className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center mr-3"
+                                    data-oid="f1aryiu"
+                                >
+                                    <span className="text-white font-bold" data-oid="beg519q">
+                                        T
+                                    </span>
+                                </div>
+                                <span className="text-xl font-semibold" data-oid="i55qean">
+                                    TechCorp
+                                </span>
+                            </div>
+                            <p className="text-gray-400" data-oid="0ihfh.y">
+                                {t.footer.description}
+                            </p>
+                        </div>
+
+                        <div data-oid="j7:4_ux">
+                            <h3 className="text-lg font-semibold mb-4" data-oid="2up_jf-">
+                                {t.footer.sections.products.title}
+                            </h3>
+                            <ul className="space-y-2 text-gray-400" data-oid="n1o3z54">
+                                {t.footer.sections.products.items.map((item, index) => (
+                                    <li key={index} data-oid="7mkp03q">
+                                        <a
+                                            href={getLocalizedPath(item.href)}
+                                            className="hover:text-white transition-colors"
+                                            data-oid="u6laexv"
+                                        >
+                                            {item.label}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+
+                        <div data-oid="gjz7b5p">
+                            <h3 className="text-lg font-semibold mb-4" data-oid="35ue2a5">
+                                {t.footer.sections.support.title}
+                            </h3>
+                            <ul className="space-y-2 text-gray-400" data-oid="9klm-d8">
+                                {t.footer.sections.support.items.map((item, index) => (
+                                    <li key={index} data-oid=".nlrc2t">
+                                        <a
+                                            href={getLocalizedPath(item.href)}
+                                            className="hover:text-white transition-colors"
+                                            data-oid="k5.xeeh"
+                                        >
+                                            {item.label}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+
+                        <div data-oid="i3emobr">
+                            <h3 className="text-lg font-semibold mb-4" data-oid="m8sylzh">
+                                {t.footer.sections.social.title}
+                            </h3>
+                            <div className="flex space-x-4" data-oid="6aov0kj">
+                                <a
+                                    href="#"
+                                    className="text-gray-400 hover:text-white transition-colors"
+                                    data-oid="oc_6.hw"
+                                >
+                                    <span className="sr-only" data-oid="2t1m41k">
+                                        微信
+                                    </span>
+                                    💬
+                                </a>
+                                <a
+                                    href="#"
+                                    className="text-gray-400 hover:text-white transition-colors"
+                                    data-oid="jxjb8z2"
+                                >
+                                    <span className="sr-only" data-oid="-ng0r68">
+                                        微博
+                                    </span>
+                                    📱
+                                </a>
+                                <a
+                                    href="#"
+                                    className="text-gray-400 hover:text-white transition-colors"
+                                    data-oid="_jnybdz"
+                                >
+                                    <span className="sr-only" data-oid="5qm_goh">
+                                        邮箱
+                                    </span>
+                                    📧
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"
+                        data-oid="k951feh"
+                    >
+                        <p data-oid="6mm3mnm">&copy; 2024 TechCorp. {t.footer.copyright}</p>
+                    </div>
+                </div>
+            </footer>
+
+            <style jsx data-oid="fj9q-8j">{`
+                @keyframes fade-in-up {
+                    from {
+                        opacity: 0;
+                        transform: translateY(30px);
+                    }
+                    to {
+                        opacity: 1;
+                        transform: translateY(0);
+                    }
+                }
+
+                .animate-fade-in-up {
+                    animation: fade-in-up 0.8s ease-out forwards;
+                }
+
+                .animation-delay-200 {
+                    animation-delay: 0.2s;
+                    opacity: 0;
+                }
+
+                .animation-delay-400 {
+                    animation-delay: 0.4s;
+                    opacity: 0;
+                }
+            `}</style>
+        </div>
+    );
+}

components/NewsDetailPage.tsx

@@ -0,0 +1,649 @@
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+import { useTranslation } from '../lib/i18n/useTranslation';
+import { languages } from '../lib/i18n/config';
+import { getNewsById, getAllNews, parseMarkdownContent, type NewsItem } from '../lib/news';
+
+interface NewsDetailPageProps {
+    initialLanguage?: string;
+    newsId: string;
+}
+
+// 只保留元信息，正文内容已迁移到 md 文件
+interface NewsArticleMeta {
+    id: number;
+    category: string;
+    date: string;
+    readTime: string;
+    image: string;
+}
+
+// 仅示例，实际内容请从 md 文件读取
+const newsArticles: NewsArticleMeta[] = [
+    {
+        id: 1,
+        category: 'product',
+        date: '2024-01-15',
+        readTime: '5 min',
+        image: 'https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=800&h=600&fit=crop',
+    },
+    {
+        id: 2,
+        category: 'industry',
+        date: '2024-01-12',
+        readTime: '8 min',
+        image: 'https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=800&h=600&fit=crop',
+    },
+    {
+        id: 3,
+        category: 'company',
+        date: '2024-01-10',
+        readTime: '3 min',
+        image: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop',
+    },
+];
+
+// 分类图标映射
+const categoryIcons = {
+    company: '🏢',
+    product: '📦',
+    industry: '🏭',
+    technology: '💻',
+};
+
+export default function NewsDetailPage({ initialLanguage, newsId }: NewsDetailPageProps) {
+    const { language, t, changeLanguage, getLocalizedPath, isInitialized } =
+        useTranslation(initialLanguage);
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [showScrollTop, setShowScrollTop] = useState(false);
+
+    const handleLanguageChange = useCallback(
+        (newLanguage: string) => {
+            changeLanguage(newLanguage as any);
+        },
+        [changeLanguage],
+    );
+
+    // 获取新闻元信息
+    const article = newsArticles.find((article) => article.id.toString() === newsId);
+
+    // 滚动到顶部功能
+    const scrollToTop = () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+
+    // 监听滚动事件
+    useEffect(() => {
+        const handleScroll = () => {
+            setShowScrollTop(window.scrollY > 300);
+        };
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+
+    // 格式化日期
+    const formatDate = (dateString: string) => {
+        const date = new Date(dateString);
+        if (language === 'en') {
+            return date.toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+            });
+        } else {
+            return date.toLocaleDateString('zh-CN', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+            });
+        }
+    };
+
+    // 在语言初始化完成前显示加载状态
+    if (!isInitialized) {
+        return (
+            <div
+                className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 flex items-center justify-center"
+                data-oid="0ta7hzw"
+            >
+                <div className="text-center" data-oid="08wl8cy">
+                    <div
+                        className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"
+                        data-oid="vl74wbo"
+                    ></div>
+                    <p className="text-gray-600" data-oid="gfr0.6-">
+                        Loading...
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    // 如果找不到文章，显示404页面
+    if (!article) {
+        return (
+            <div
+                className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 flex items-center justify-center"
+                data-oid="dv3f8p5"
+            >
+                <div className="text-center" data-oid="oea:fzl">
+                    <div className="text-8xl mb-4" data-oid="s2xkcxo">
+                        📰
+                    </div>
+                    <h1 className="text-4xl font-bold text-gray-900 mb-4" data-oid="ef93e0s">
+                        {language === 'en'
+                            ? 'Article Not Found'
+                            : language === 'zh-CN'
+                              ? '文章未找到'
+                              : '文章未找到'}
+                    </h1>
+                    <p className="text-lg text-gray-600 mb-8" data-oid="2irbjo7">
+                        {language === 'en'
+                            ? 'The article you are looking for does not exist or has been moved.'
+                            : language === 'zh-CN'
+                              ? '您查找的文章不存在或已被移动。'
+                              : '您查找的文章不存在或已被移動。'}
+                    </p>
+                    <a
+                        href={getLocalizedPath('/news')}
+                        className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-3 rounded-full font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl"
+                        data-oid="w.k9kpi"
+                    >
+                        {language === 'en'
+                            ? 'Back to News'
+                            : language === 'zh-CN'
+                              ? '返回新闻'
+                              : '返回新聞'}
+                    </a>
+                </div>
+            </div>
+        );
+    }
+
+    // Navigation items
+    const navItems = [
+        { key: 'home', label: t.nav.home, href: getLocalizedPath('/') },
+        { key: 'products', label: t.nav.products, href: getLocalizedPath('/products') },
+        { key: 'news', label: t.nav.news, href: getLocalizedPath('/news') },
+        { key: 'support', label: t.nav.support, href: getLocalizedPath('/support') },
+        { key: 'about', label: t.nav.about, href: getLocalizedPath('/about') },
+    ];
+
+    return (
+        <div
+            className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50"
+            data-oid="pzoby69"
+        >
+            {/* Navigation */}
+            <nav
+                className="fixed top-0 left-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-white/20 shadow-sm"
+                data-oid="q6axiuz"
+            >
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="6.7qdqy">
+                    <div className="flex justify-between items-center h-16" data-oid="wwgkjio">
+                        {/* Logo */}
+                        <div className="flex items-center" data-oid="or0niw4">
+                            <div className="flex-shrink-0" data-oid="xb9n7.m">
+                                <div
+                                    className="w-10 h-10 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center"
+                                    data-oid=":ps6kar"
+                                >
+                                    <span
+                                        className="text-white font-bold text-lg"
+                                        data-oid="3.i-xlz"
+                                    >
+                                        T
+                                    </span>
+                                </div>
+                            </div>
+                            <div className="ml-3" data-oid="mo0ialc">
+                                <span
+                                    className="text-xl font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
+                                    data-oid="6zwerlx"
+                                >
+                                    TechCorp
+                                </span>
+                            </div>
+                        </div>
+
+                        {/* Desktop Navigation */}
+                        <div className="hidden md:block" data-oid="u5chrs:">
+                            <div className="ml-10 flex items-baseline space-x-8" data-oid="8lji8:h">
+                                {navItems.map((item) => (
+                                    <a
+                                        key={item.key}
+                                        href={item.href}
+                                        className={`px-3 py-2 text-sm font-medium transition-colors duration-200 rounded-md ${
+                                            item.key === 'news'
+                                                ? 'text-blue-600 bg-blue-50'
+                                                : 'text-gray-700 hover:text-blue-600 hover:bg-blue-50'
+                                        }`}
+                                        data-oid="xdfk9k7"
+                                    >
+                                        {item.label}
+                                    </a>
+                                ))}
+                            </div>
+                        </div>
+
+                        {/* Language Selector & Mobile Menu */}
+                        <div className="flex items-center space-x-4" data-oid="jes62r1">
+                            {/* Language Selector */}
+                            <div className="relative" data-oid="6xi2mpu">
+                                <select
+                                    value={language}
+                                    onChange={(e) => handleLanguageChange(e.target.value)}
+                                    className="appearance-none bg-white/80 border border-gray-200 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                    data-oid="28q4bda"
+                                >
+                                    {languages.map((lang) => (
+                                        <option
+                                            key={lang.code}
+                                            value={lang.code}
+                                            data-oid="3qqkghq"
+                                        >
+                                            {lang.flag} {lang.label}
+                                        </option>
+                                    ))}
+                                </select>
+                            </div>
+
+                            {/* Mobile menu button */}
+                            <div className="md:hidden" data-oid="vei0onh">
+                                <button
+                                    onClick={() => setIsMenuOpen(!isMenuOpen)}
+                                    className="text-gray-700 hover:text-blue-600 p-2"
+                                    data-oid="l_mhpyq"
+                                >
+                                    <svg
+                                        className="h-6 w-6"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                        stroke="currentColor"
+                                        data-oid=".ma02zl"
+                                    >
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth={2}
+                                            d="M4 6h16M4 12h16M4 18h16"
+                                            data-oid="zrh6s9r"
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Mobile Navigation */}
+                    {isMenuOpen && (
+                        <div className="md:hidden" data-oid="ve3l6d_">
+                            <div
+                                className="px-2 pt-2 pb-3 space-y-1 bg-white/90 backdrop-blur-md rounded-lg mt-2"
+                                data-oid="ii7_x3z"
+                            >
+                                {navItems.map((item) => (
+                                    <a
+                                        key={item.key}
+                                        href={item.href}
+                                        className={`block px-3 py-2 text-base font-medium transition-colors duration-200 ${
+                                            item.key === 'news'
+                                                ? 'text-blue-600 bg-blue-50'
+                                                : 'text-gray-700 hover:text-blue-600'
+                                        }`}
+                                        data-oid="86wr5.a"
+                                    >
+                                        {item.label}
+                                    </a>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </nav>
+
+            {/* Breadcrumb */}
+            <section className="pt-20 pb-4 px-4 sm:px-6 lg:px-8" data-oid="8un-lq5">
+                <div className="max-w-4xl mx-auto" data-oid="zv4e73a">
+                    <nav className="flex" data-oid="e3wvxn5">
+                        <ol className="flex items-center space-x-2" data-oid="6wbmmil">
+                            <li data-oid="e.aqwn.">
+                                <a
+                                    href={getLocalizedPath('/')}
+                                    className="text-gray-500 hover:text-blue-600 transition-colors"
+                                    data-oid="pq4wa-o"
+                                >
+                                    {t.nav.home}
+                                </a>
+                            </li>
+                            <li data-oid="kdh1f8_">
+                                <span className="text-gray-400" data-oid="86.6cka">
+                                    /
+                                </span>
+                            </li>
+                            <li data-oid="2qz7txu">
+                                <a
+                                    href={getLocalizedPath('/news')}
+                                    className="text-gray-500 hover:text-blue-600 transition-colors"
+                                    data-oid="ebn1xz1"
+                                >
+                                    {t.nav.news}
+                                </a>
+                            </li>
+                            <li data-oid="nd.e71w">
+                                <span className="text-gray-400" data-oid="vjkez4f">
+                                    /
+                                </span>
+                            </li>
+                            <li data-oid="3aru9ik">
+                                <span className="text-gray-900 font-medium" data-oid="3th0wam">
+                                    {article.category.charAt(0).toUpperCase() +
+                                        article.category.slice(1)}
+                                </span>
+                            </li>
+                        </ol>
+                    </nav>
+                </div>
+            </section>
+
+            {/* Article Header */}
+            <section className="pb-8 px-4 sm:px-6 lg:px-8" data-oid="r21fm2p">
+                <div className="max-w-4xl mx-auto" data-oid="x8knt6x">
+                    {/* Category Badge */}
+                    <div className="mb-6" data-oid="5ku0o66">
+                        <span
+                            className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-4 py-2 rounded-full text-sm font-bold flex items-center gap-2 w-fit"
+                            data-oid="6ih0cbm"
+                        >
+                            <span data-oid="6yhe.t9">
+                                {categoryIcons[article.category as keyof typeof categoryIcons]}
+                            </span>
+                            {language === 'en'
+                                ? article.category.charAt(0).toUpperCase() +
+                                  article.category.slice(1)
+                                : article.category === 'company'
+                                  ? language === 'zh-CN'
+                                      ? '公司'
+                                      : '公司'
+                                  : article.category === 'product'
+                                    ? language === 'zh-CN'
+                                        ? '产品'
+                                        : '產品'
+                                    : article.category === 'industry'
+                                      ? language === 'zh-CN'
+                                          ? '行业'
+                                          : '行業'
+                                      : article.category === 'technology'
+                                        ? language === 'zh-CN'
+                                            ? '技术'
+                                            : '技術'
+                                        : article.category}
+                        </span>
+                    </div>
+
+                    {/* Title */}
+                    <h1
+                        className="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight"
+                        data-oid="x7.cek."
+                    >
+                        {article.category.charAt(0).toUpperCase() + article.category.slice(1)}
+                    </h1>
+
+                    {/* Meta Information */}
+                    <div
+                        className="flex flex-wrap items-center gap-6 text-gray-500 mb-8"
+                        data-oid="jq69m::"
+                    >
+                        <div className="flex items-center gap-2" data-oid="ai7go_s">
+                            <svg
+                                className="w-5 h-5"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                                data-oid="6:hpmxn"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                                    data-oid="p.4qqp."
+                                />
+                            </svg>
+                            <span data-oid="el170nw">{formatDate(article.date)}</span>
+                        </div>
+                        <div className="flex items-center gap-2" data-oid=":o1248:">
+                            <svg
+                                className="w-5 h-5"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                                data-oid="365g9tj"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                                    data-oid="2tabb-7"
+                                />
+                            </svg>
+                            <span data-oid="rlt9gvp">{article.readTime}</span>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Featured Image */}
+            <section className="pb-12 px-4 sm:px-6 lg:px-8" data-oid="1ocsoa4">
+                <div className="max-w-4xl mx-auto" data-oid="28vuu78">
+                    <div
+                        className="relative h-64 md:h-96 rounded-2xl overflow-hidden shadow-2xl"
+                        data-oid="ml734h9"
+                    >
+                        <img
+                            src={article.image}
+                            alt={
+                                article.category.charAt(0).toUpperCase() + article.category.slice(1)
+                            }
+                            className="w-full h-full object-cover"
+                            data-oid="-rq1me-"
+                        />
+
+                        <div
+                            className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"
+                            data-oid="q_a28lv"
+                        ></div>
+                    </div>
+                </div>
+            </section>
+
+            {/* CTA Section */}
+            <section
+                className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-blue-600 to-purple-600"
+                data-oid="0knjf6d"
+            >
+                <div className="max-w-4xl mx-auto text-center text-white" data-oid="vodcka5">
+                    <h2 className="text-3xl md:text-4xl font-bold mb-6" data-oid="egkl-38">
+                        {language === 'en'
+                            ? 'Stay Updated'
+                            : language === 'zh-CN'
+                              ? '保持更新'
+                              : '保持更新'}
+                    </h2>
+                    <p className="text-xl mb-8 opacity-90" data-oid="p2emj--">
+                        {language === 'en'
+                            ? 'Subscribe to our newsletter and never miss important updates and insights.'
+                            : language === 'zh-CN'
+                              ? '订阅我们的新闻通讯，不要错过重要的更新和见解。'
+                              : '訂閱我們的新聞通訊，不要錯過重要的更新和見解。'}
+                    </p>
+                    <div
+                        className="flex flex-col sm:flex-row gap-4 justify-center"
+                        data-oid="w6xf7ts"
+                    >
+                        <button
+                            className="bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105"
+                            data-oid="olut2he"
+                        >
+                            {language === 'en'
+                                ? 'Subscribe Newsletter'
+                                : language === 'zh-CN'
+                                  ? '订阅新闻'
+                                  : '訂閱新聞'}
+                        </button>
+                        <a
+                            href={getLocalizedPath('/news')}
+                            className="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-blue-600 transition-all duration-300 transform hover:scale-105"
+                            data-oid="6031.q."
+                        >
+                            {language === 'en'
+                                ? 'View All News'
+                                : language === 'zh-CN'
+                                  ? '查看所有新闻'
+                                  : '查看所有新聞'}
+                        </a>
+                    </div>
+                </div>
+            </section>
+
+            {/* 回到顶部按钮 */}
+            {showScrollTop && (
+                <button
+                    onClick={scrollToTop}
+                    className="fixed bottom-8 right-8 bg-gradient-to-r from-blue-600 to-purple-600 text-white p-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110 z-40"
+                    data-oid=".40.c6-"
+                >
+                    <svg
+                        className="w-6 h-6"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        data-oid="4jvjf0_"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M5 10l7-7m0 0l7 7m-7-7v18"
+                            data-oid="1sjnnat"
+                        />
+                    </svg>
+                </button>
+            )}
+
+            {/* Footer */}
+            <footer
+                className="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8"
+                data-oid="aih53pj"
+            >
+                <div className="max-w-7xl mx-auto" data-oid="_3wnlza">
+                    <div className="grid grid-cols-1 md:grid-cols-4 gap-8" data-oid="semd9fj">
+                        <div data-oid="w2ea2vq">
+                            <div className="flex items-center mb-4" data-oid="5r3e-.m">
+                                <div
+                                    className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center mr-3"
+                                    data-oid="y61zy4v"
+                                >
+                                    <span className="text-white font-bold" data-oid="gzv54a4">
+                                        T
+                                    </span>
+                                </div>
+                                <span className="text-xl font-semibold" data-oid="mdz4l:t">
+                                    TechCorp
+                                </span>
+                            </div>
+                            <p className="text-gray-400" data-oid="k_hh1je">
+                                {t.footer.description}
+                            </p>
+                        </div>
+
+                        <div data-oid="hnn:udv">
+                            <h3 className="text-lg font-semibold mb-4" data-oid="v:lbw9d">
+                                {t.footer.sections.products.title}
+                            </h3>
+                            <ul className="space-y-2 text-gray-400" data-oid="j2l0lrl">
+                                {t.footer.sections.products.items.map((item, index) => (
+                                    <li key={index} data-oid="ao37a-1">
+                                        <a
+                                            href={getLocalizedPath(item.href)}
+                                            className="hover:text-white transition-colors"
+                                            data-oid="hgpri.7"
+                                        >
+                                            {item.label}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+
+                        <div data-oid="sn.6b00">
+                            <h3 className="text-lg font-semibold mb-4" data-oid="iq1::4w">
+                                {t.footer.sections.support.title}
+                            </h3>
+                            <ul className="space-y-2 text-gray-400" data-oid="71if07s">
+                                {t.footer.sections.support.items.map((item, index) => (
+                                    <li key={index} data-oid="1wgkl5.">
+                                        <a
+                                            href={getLocalizedPath(item.href)}
+                                            className="hover:text-white transition-colors"
+                                            data-oid="66z6wpf"
+                                        >
+                                            {item.label}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+
+                        <div data-oid="mynso0l">
+                            <h3 className="text-lg font-semibold mb-4" data-oid="4i0ne5n">
+                                {t.footer.sections.social.title}
+                            </h3>
+                            <div className="flex space-x-4" data-oid="uiklr52">
+                                <a
+                                    href="#"
+                                    className="text-gray-400 hover:text-white transition-colors"
+                                    data-oid="ybqhlhb"
+                                >
+                                    <span className="sr-only" data-oid="lzigd2.">
+                                        微信
+                                    </span>
+                                    💬
+                                </a>
+                                <a
+                                    href="#"
+                                    className="text-gray-400 hover:text-white transition-colors"
+                                    data-oid=".8.:jx6"
+                                >
+                                    <span className="sr-only" data-oid="y-1a.hk">
+                                        微博
+                                    </span>
+                                    📱
+                                </a>
+                                <a
+                                    href="#"
+                                    className="text-gray-400 hover:text-white transition-colors"
+                                    data-oid="a45p3p6"
+                                >
+                                    <span className="sr-only" data-oid="rai9kgq">
+                                        邮箱
+                                    </span>
+                                    📧
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"
+                        data-oid="n9w-8pe"
+                    >
+                        <p data-oid="8g0j82x">&copy; 2024 TechCorp. {t.footer.copyright}</p>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    );
+}

content/news/digital-transformation-trends-2024.md

@@ -0,0 +1,183 @@
+---
+title: "Industry Report Digital Transformation Trends 2024"
+title_zh_CN: 行业报告：2024年数字化转型趋势
+title_zh_TW: 行業報告：2024年數位化轉型趨勢
+summary: Comprehensive analysis of emerging trends in digital transformation across various industries.
+summary_zh_CN: 全面分析各行业数字化转型的新兴趋势。
+summary_zh_TW: 全面分析各行業數位化轉型的新興趨勢。
+category: industry
+date: 2024-01-12
+readTime: 8 min
+tags:
+  - Digital Transformation
+  - Trends
+  - Report
+tags_zh_CN:
+  - 数字化转型
+  - 趋势
+  - 报告
+tags_zh_TW:
+  - 數位化轉型
+  - 趨勢
+  - 報告
+author: Research Team
+author_zh_CN: 研究团队
+author_zh_TW: 研究團隊
+image: https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=800&h=600&fit=crop
+---
+## en
+
+As we advance through 2024, digital transformation continues to reshape industries worldwide. Our comprehensive research reveals key trends that are defining the future of business operations, customer experiences, and technological innovation.
+
+### Executive Summary
+
+Digital transformation is no longer a choice but a necessity for businesses seeking to remain competitive. Our analysis of over 500 companies across 15 industries reveals that organizations investing in digital transformation are experiencing:
+
+- **35% increase** in operational efficiency
+- **42% improvement** in customer satisfaction
+- **28% growth** in revenue
+- **50% reduction** in time-to-market for new products
+
+### Key Trends Shaping 2024
+
+#### 1. AI-First Approach
+
+Organizations are moving beyond pilot projects to full-scale AI implementation:
+
+**Adoption Statistics:**
+
+- 78% of enterprises have AI initiatives in production
+- 65% report significant ROI from AI investments
+- 89% plan to increase AI spending in 2024
+
+**Key Applications:**
+
+- Customer service automation
+- Predictive maintenance
+- Supply chain optimization
+- Fraud detection and prevention
+
+#### 2. Cloud-Native Architecture
+
+The shift to cloud-native solutions accelerates:
+
+**Market Insights:**
+
+- 92% of organizations have a multi-cloud strategy
+- 67% are adopting containerization technologies
+- 54% are implementing microservices architecture
+
+**Benefits Realized:**
+
+- Improved scalability and flexibility
+- Reduced infrastructure costs
+- Enhanced security and compliance
+- Faster deployment cycles
+
+This comprehensive report provides insights into the digital transformation landscape and helps organizations navigate the evolving technology ecosystem.
+
+---
+
+## zh-CN
+
+随着我们进入2024年，数字化转型继续重塑全球各行各业。我们的综合研究揭示了定义商业运营、客户体验和技术创新未来的关键趋势。
+
+### 执行摘要
+
+数字化转型不再是选择，而是企业保持竞争力的必需品。我们对15个行业500多家公司的分析显示，投资数字化转型的组织正在经历：
+
+- **运营效率提升35%**
+- **客户满意度改善42%**
+- **收入增长28%**
+- **新产品上市时间缩短50%**
+
+### 塑造2024年的关键趋势
+
+#### 1. AI优先方法
+
+组织正从试点项目转向全面的AI实施：
+
+**采用统计：**
+
+- 78%的企业在生产中有AI计划
+- 65%报告AI投资有显著ROI
+- 89%计划在2024年增加AI支出
+
+**关键应用：**
+
+- 客户服务自动化
+- 预测性维护
+- 供应链优化
+- 欺诈检测和预防
+
+#### 2. 云原生架构
+
+向云原生解决方案的转变加速：
+
+**市场洞察：**
+
+- 92%的组织有多云策略
+- 67%正在采用容器化技术
+- 54%正在实施微服务架构
+
+**实现的好处：**
+
+- 改善可扩展性和灵活性
+- 降低基础设施成本
+- 增强安全性和合规性
+- 更快的部署周期
+
+这份综合报告提供了对数字化转型格局的洞察，帮助组织导航不断发展的技术生态系统。
+
+---
+
+## zh-TW
+
+隨著我們進入2024年，數位化轉型繼續重塑全球各行各業。我們的綜合研究揭示了定義商業運營、客戶體驗和技術創新未來的關鍵趨勢。
+
+### 執行摘要
+
+數位化轉型不再是選擇，而是企業保持競爭力的必需品。我們對15個行業500多家公司的分析顯示，投資數位化轉型的組織正在經歷：
+
+- **運營效率提升35%**
+- **客戶滿意度改善42%**
+- **收入增長28%**
+- **新產品上市時間縮短50%**
+
+### 塑造2024年的關鍵趨勢
+
+#### 1. AI優先方法
+
+組織正從試點項目轉向全面的AI實施：
+
+**採用統計：**
+
+- 78%的企業在生產中有AI計劃
+- 65%報告AI投資有顯著ROI
+- 89%計劃在2024年增加AI支出
+
+**關鍵應用：**
+
+- 客戶服務自動化
+- 預測性維護
+- 供應鏈優化
+- 欺詐檢測和預防
+
+#### 2. 雲原生架構
+
+向雲原生解決方案的轉變加速：
+
+**市場洞察：**
+
+- 92%的組織有多雲策略
+- 67%正在採用容器化技術
+- 54%正在實施微服務架構
+
+**實現的好處：**
+
+- 改善可擴展性和靈活性
+- 降低基礎設施成本
+- 增強安全性和合規性
+- 更快的部署週期
+
+這份綜合報告提供了對數位化轉型格局的洞察，幫助組織導航不斷發展的技術生態系統。

content/news/techcorp-expands-global-operations.md

@@ -0,0 +1,466 @@
+---
+title: TechCorp Expands Global Operations
+title_zh_CN: TechCorp 扩展全球业务
+title_zh_TW: TechCorp 擴展全球業務
+summary: We are excited to announce the opening of new offices in three major international markets.
+summary_zh_CN: 我们很高兴地宣布在三个主要国际市场开设新办事处。
+summary_zh_TW: 我們很高興地宣布在三個主要國際市場開設新辦事處。
+category: company
+date: 2024-01-10
+readTime: 3 min
+tags:
+  - Expansion
+  - Global
+  - Growth
+tags_zh_CN:
+  - 扩张
+  - 全球
+  - 增长
+tags_zh_TW:
+  - 擴張
+  - 全球
+  - 增長
+author: Corporate Communications
+author_zh_CN: 企业传播部
+author_zh_TW: 企業傳播部
+image: https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop
+---
+
+# TechCorp Expands Global Operations
+
+_Published on January 10, 2024 | 3 min read_
+
+We are thrilled to announce a significant milestone in TechCorp's growth journey - the expansion of our global operations with new offices in Singapore, London, and São Paulo. This strategic expansion represents our commitment to serving customers worldwide and bringing our innovative solutions closer to international markets.
+
+## Strategic Locations
+
+### Singapore - Asia-Pacific Hub
+
+Our new Singapore office will serve as the regional headquarters for the Asia-Pacific market, providing:
+
+- Local customer support in multiple languages
+- Faster deployment and implementation services
+- Regional partnerships and integrations
+- Compliance with local data protection regulations
+
+### London - European Operations Center
+
+The London office will anchor our European operations, offering:
+
+- EU-compliant cloud infrastructure
+- Local sales and technical teams
+- Partnership with European technology providers
+- Support for GDPR and other regulatory requirements
+
+### São Paulo - Latin American Gateway
+
+Our São Paulo location will serve the growing Latin American market with:
+
+- Portuguese and Spanish language support
+- Local payment processing capabilities
+- Regional business partnerships
+- Customized solutions for emerging markets
+
+## Investment and Growth
+
+This expansion represents a $50 million investment in international operations, including:
+
+- **150 new jobs** across all three locations
+- **State-of-the-art facilities** with modern technology infrastructure
+- **Local data centers** for improved performance and compliance
+- **Regional R&D capabilities** for market-specific innovations
+
+## Market Opportunity
+
+Our research indicates significant growth potential in these markets:
+
+- Asia-Pacific digital transformation market expected to reach $2.8 trillion by 2025
+- European cloud services market growing at 22% annually
+- Latin American enterprise software market expanding by 15% year-over-year
+
+## Local Leadership
+
+We've appointed experienced regional leaders to drive our expansion:
+
+**Dr. Sarah Chen** - Asia-Pacific Regional Director
+
+- Former VP of Technology at leading Singapore fintech company
+- 15 years of experience in enterprise software
+- Expertise in regional market dynamics
+
+**James Morrison** - European Operations Director
+
+- Previously led European expansion for major SaaS provider
+- Deep understanding of EU regulatory landscape
+- Strong network of technology partnerships
+
+**Maria Rodriguez** - Latin American Regional Manager
+
+- Former country manager for international software company
+- Bilingual expertise in Portuguese and Spanish markets
+- Proven track record in emerging market development
+
+## Customer Benefits
+
+This expansion will provide immediate benefits to our global customers:
+
+### Enhanced Support
+
+- 24/7 customer support across all time zones
+- Local language support in 12 additional languages
+- Faster response times for technical issues
+- Regional account management teams
+
+### Improved Performance
+
+- Reduced latency through local data centers
+- Faster content delivery and application performance
+- Local backup and disaster recovery capabilities
+- Compliance with regional data residency requirements
+
+### Market-Specific Solutions
+
+- Customized features for local business practices
+- Integration with regional payment systems
+- Support for local compliance requirements
+- Partnerships with regional technology providers
+
+## Sustainability Commitment
+
+All new offices are designed with sustainability in mind:
+
+- LEED Gold certification targets
+- 100% renewable energy usage
+- Carbon-neutral operations by 2025
+- Green building technologies and practices
+
+## Future Plans
+
+This expansion is just the beginning of our global growth strategy:
+
+- Additional offices planned for Tokyo and Mumbai in 2025
+- Investment in local talent development programs
+- Expansion of regional partnership networks
+- Development of market-specific product offerings
+
+## Community Engagement
+
+We're committed to being good corporate citizens in our new markets:
+
+- Local hiring initiatives with focus on diversity
+- Partnerships with universities and technical schools
+- Support for local technology communities
+- Charitable giving and volunteer programs
+
+## Technology Infrastructure
+
+Each new office features cutting-edge technology:
+
+- High-speed fiber connectivity
+- Advanced security systems
+- Modern collaboration tools
+- Flexible workspace designs
+
+## Conclusion
+
+This global expansion marks an exciting new chapter for TechCorp. By establishing a strong international presence, we're better positioned to serve our customers worldwide and drive innovation in the global technology landscape.
+
+We look forward to building lasting relationships with customers, partners, and communities in these new markets while continuing to deliver the exceptional service and innovative solutions that define TechCorp.
+
+---
+
+_For more information about our global expansion, contact our international business development team._
+
+---
+
+# TechCorp 扩展全球业务
+
+_发布于 2024年1月10日 | 3分钟阅读_
+
+我们很高兴地宣布 TechCorp 成长历程中的一个重要里程碑——通过在新加坡、伦敦和圣保罗开设新办事处来扩展我们的全球业务。这一战略扩张体现了我们为全球客户服务的承诺，并将我们的创新解决方案带到更接近国际市场的地方。
+
+## 战略位置
+
+### 新加坡 - 亚太地区中心
+
+我们的新加坡新办事处将作为亚太市场的区域总部，提供：
+
+- 多语言本地客户支持
+- 更快的部署和实施服务
+- 区域合作伙伴关系和集成
+- 符合当地数据保护法规
+
+### 伦敦 - 欧洲运营中心
+
+伦敦办事处将成为我们欧洲业务的支点，提供：
+
+- 符合欧盟标准的云基础设施
+- 本地销售和技术团队
+- 与欧洲技术提供商的合作伙伴关系
+- 对GDPR和其他监管要求的支持
+
+### 圣保罗 - 拉丁美洲门户
+
+我们的圣保罗办事处将为不断增长的拉丁美洲市场提供服务：
+
+- 葡萄牙语和西班牙语支持
+- 本地支付处理能力
+- 区域商业合作伙伴关系
+- 为新兴市场定制的解决方案
+
+## 投资和增长
+
+这次扩张代表了对国际业务5000万美元的投资，包括：
+
+- **在所有三个地点创造150个新工作岗位**
+- **配备现代技术基础设施的最先进设施**
+- **本地数据中心**以提高性能和合规性
+- **区域研发能力**用于特定市场的创新
+
+## 市场机会
+
+我们的研究表明这些市场具有巨大的增长潜力：
+
+- 亚太地区数字化转型市场预计到2025年将达到2.8万亿美元
+- 欧洲云服务市场年增长率为22%
+- 拉丁美洲企业软件市场年增长率为15%
+
+## 本地领导团队
+
+我们已任命经验丰富的区域领导者来推动我们的扩张：
+
+**陈莎拉博士** - 亚太地区总监
+
+- 前新加坡领先金融科技公司技术副总裁
+- 15年企业软件经验
+- 在区域市场动态方面的专业知识
+
+**詹姆斯·莫里森** - 欧洲运营总监
+
+- 曾领导主要SaaS提供商的欧洲扩张
+- 对欧盟监管环境的深入了解
+- 强大的技术合作伙伴网络
+
+**玛丽亚·罗德里格斯** - 拉丁美洲区域经理
+
+- 前国际软件公司国家经理
+- 在葡萄牙语和西班牙语市场的双语专业知识
+- 在新兴市场发展方面的成功记录
+
+## 客户受益
+
+这次扩张将为我们的全球客户提供即时好处：
+
+### 增强支持
+
+- 跨所有时区的24/7客户支持
+- 12种额外语言的本地语言支持
+- 更快的技术问题响应时间
+- 区域客户管理团队
+
+### 改善性能
+
+- 通过本地数据中心减少延迟
+- 更快的内容交付和应用程序性能
+- 本地备份和灾难恢复能力
+- 符合区域数据驻留要求
+
+### 特定市场解决方案
+
+- 为本地商业实践定制的功能
+- 与区域支付系统的集成
+- 对本地合规要求的支持
+- 与区域技术提供商的合作伙伴关系
+
+## 可持续发展承诺
+
+所有新办事处都以可持续发展为设计理念：
+
+- LEED金级认证目标
+- 100%可再生能源使用
+- 到2025年实现碳中和运营
+- 绿色建筑技术和实践
+
+## 未来计划
+
+这次扩张只是我们全球增长战略的开始：
+
+- 计划在2025年在东京和孟买开设更多办事处
+- 投资本地人才发展计划
+- 扩展区域合作伙伴网络
+- 开发特定市场的产品供应
+
+## 社区参与
+
+我们致力于在新市场中成为良好的企业公民：
+
+- 注重多样性的本地招聘计划
+- 与大学和技术学校的合作伙伴关系
+- 对本地技术社区的支持
+- 慈善捐赠和志愿者计划
+
+## 技术基础设施
+
+每个新办事处都配备了尖端技术：
+
+- 高速光纤连接
+- 先进的安全系统
+- 现代协作工具
+- 灵活的工作空间设计
+
+## 结论
+
+这次全球扩张标志着TechCorp激动人心的新篇章。通过建立强大的国际存在，我们能够更好地为全球客户服务，并推动全球技术领域的创新。
+
+我们期待在这些新市场中与客户、合作伙伴和社区建立持久的关系，同时继续提供定义TechCorp的卓越服务和创新解决方案。
+
+---
+
+_有关我们全球扩张的更多信息，请联系我们的国际业务发展团队。_
+
+---
+
+# TechCorp 擴展全球業務
+
+_發布於 2024年1月10日 | 3分鐘閱讀_
+
+我們很高興地宣布 TechCorp 成長歷程中的一個重要里程碑——通過在新加坡、倫敦和聖保羅開設新辦事處來擴展我們的全球業務。這一戰略擴張體現了我們為全球客戶服務的承諾，並將我們的創新解決方案帶到更接近國際市場的地方。
+
+## 戰略位置
+
+### 新加坡 - 亞太地區中心
+
+我們的新加坡新辦事處將作為亞太市場的區域總部，提供：
+
+- 多語言本地客戶支援
+- 更快的部署和實施服務
+- 區域合作夥伴關係和集成
+- 符合當地數據保護法規
+
+### 倫敦 - 歐洲運營中心
+
+倫敦辦事處將成為我們歐洲業務的支點，提供：
+
+- 符合歐盟標準的雲基礎設施
+- 本地銷售和技術團隊
+- 與歐洲技術提供商的合作夥伴關係
+- 對GDPR和其他監管要求的支援
+
+### 聖保羅 - 拉丁美洲門戶
+
+我們的聖保羅辦事處將為不斷增長的拉丁美洲市場提供服務：
+
+- 葡萄牙語和西班牙語支援
+- 本地支付處理能力
+- 區域商業合作夥伴關係
+- 為新興市場定制的解決方案
+
+## 投資和增長
+
+這次擴張代表了對國際業務5000萬美元的投資，包括：
+
+- **在所有三個地點創造150個新工作崗位**
+- **配備現代技術基礎設施的最先進設施**
+- **本地數據中心**以提高性能和合規性
+- **區域研發能力**用於特定市場的創新
+
+## 市場機會
+
+我們的研究表明這些市場具有巨大的增長潛力：
+
+- 亞太地區數位化轉型市場預計到2025年將達到2.8萬億美元
+- 歐洲雲服務市場年增長率為22%
+- 拉丁美洲企業軟體市場年增長率為15%
+
+## 本地領導團隊
+
+我們已任命經驗豐富的區域領導者來推動我們的擴張：
+
+**陳莎拉博士** - 亞太地區總監
+
+- 前新加坡領先金融科技公司技術副總裁
+- 15年企業軟體經驗
+- 在區域市場動態方面的專業知識
+
+**詹姆斯·莫里森** - 歐洲運營總監
+
+- 曾領導主要SaaS提供商的歐洲擴張
+- 對歐盟監管環境的深入了解
+- 強大的技術合作夥伴網絡
+
+**瑪麗亞·羅德里格斯** - 拉丁美洲區域經理
+
+- 前國際軟體公司國家經理
+- 在葡萄牙語和西班牙語市場的雙語專業知識
+- 在新興市場發展方面的成功記錄
+
+## 客戶受益
+
+這次擴張將為我們的全球客戶提供即時好處：
+
+### 增強支援
+
+- 跨所有時區的24/7客戶支援
+- 12種額外語言的本地語言支援
+- 更快的技術問題響應時間
+- 區域客戶管理團隊
+
+### 改善性能
+
+- 通過本地數據中心減少延遲
+- 更快的內容交付和應用程式性能
+- 本地備份和災難恢復能力
+- 符合區域數據駐留要求
+
+### 特定市場解決方案
+
+- 為本地商業實踐定制的功能
+- 與區域支付系統的集成
+- 對本地合規要求的支援
+- 與區域技術提供商的合作夥伴關係
+
+## 可持續發展承諾
+
+所有新辦事處都以可持續發展為設計理念：
+
+- LEED金級認證目標
+- 100%可再生能源使用
+- 到2025年實現碳中和運營
+- 綠色建築技術和實踐
+
+## 未來計劃
+
+這次擴張只是我們全球增長戰略的開始：
+
+- 計劃在2025年在東京和孟買開設更多辦事處
+- 投資本地人才發展計劃
+- 擴展區域合作夥伴網絡
+- 開發特定市場的產品供應
+
+## 社區參與
+
+我們致力於在新市場中成為良好的企業公民：
+
+- 注重多樣性的本地招聘計劃
+- 與大學和技術學校的合作夥伴關係
+- 對本地技術社區的支援
+- 慈善捐贈和志願者計劃
+
+## 技術基礎設施
+
+每個新辦事處都配備了尖端技術：
+
+- 高速光纖連接
+- 先進的安全系統
+- 現代協作工具
+- 靈活的工作空間設計
+
+## 結論
+
+這次全球擴張標誌著TechCorp激動人心的新篇章。通過建立強大的國際存在，我們能夠更好地為全球客戶服務，並推動全球技術領域的創新。
+
+我們期待在這些新市場中與客戶、合作夥伴和社區建立持久的關係，同時繼續提供定義TechCorp的卓越服務和創新解決方案。
+
+---
+
+_有關我們全球擴張的更多信息，請聯繫我們的國際業務發展團隊。_

content/news/techcorp-launches-ai-platform.md

@@ -0,0 +1,238 @@
+---
+title: Industry Report Digital Transformation Trends 2024
+title_zh_CN: 行业报告：2024年数字化转型趋势
+title_zh_TW: 行業報告：2024年數位化轉型趨勢
+summary: Comprehensive analysis of emerging trends in digital transformation across various industries.
+summary_zh_CN: 全面分析各行业数字化转型的新兴趋势。
+summary_zh_TW: 全面分析各行業數位化轉型的新興趨勢。
+category: industry
+date: 2024-01-12
+readTime: 8 min
+tags:
+  - Digital Transformation
+  - Trends
+  - Report
+tags_zh_CN:
+  - 数字化转型
+  - 趋势
+  - 报告
+tags_zh_TW:
+  - 數位化轉型
+  - 趨勢
+  - 報告
+author: Research Team
+author_zh_CN: 研究团队
+author_zh_TW: 研究團隊
+image: https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=800&h=600&fit=crop
+---
+
+## en
+
+We are excited to announce the launch of our groundbreaking AI platform that will transform how enterprises approach automation and decision-making. This revolutionary solution represents years of research and development, bringing together cutting-edge machine learning algorithms with intuitive user interfaces.
+
+### Key Features
+
+#### Advanced Machine Learning Capabilities
+
+Our platform leverages state-of-the-art neural networks and deep learning models to provide:
+
+- **Predictive Analytics**: Forecast business trends with 95% accuracy
+- **Natural Language Processing**: Understand and process human language in real-time
+- **Computer Vision**: Analyze images and videos for actionable insights
+- **Automated Decision Making**: Make complex decisions based on data patterns
+
+#### Enterprise-Grade Security
+
+Security is at the core of our platform design:
+
+- End-to-end encryption for all data transmissions
+- Multi-factor authentication and role-based access control
+- Compliance with GDPR, HIPAA, and SOC 2 standards
+- Regular security audits and penetration testing
+
+#### Seamless Integration
+
+The platform is designed to work with your existing infrastructure:
+
+- RESTful APIs for easy integration
+- Support for popular databases and cloud platforms
+- Pre-built connectors for major enterprise software
+- Flexible deployment options (cloud, on-premise, hybrid)
+
+### Industry Impact
+
+This AI platform addresses critical challenges across multiple industries:
+
+#### Healthcare
+
+- Accelerate drug discovery processes
+- Improve diagnostic accuracy
+- Optimize patient care workflows
+- Reduce administrative overhead
+
+#### Finance
+
+- Enhance fraud detection capabilities
+- Automate risk assessment
+- Improve customer service with AI chatbots
+- Optimize trading strategies
+
+#### Manufacturing
+
+- Predictive maintenance for equipment
+- Quality control automation
+- Supply chain optimization
+- Energy efficiency improvements
+
+### Getting Started
+
+Ready to transform your business with AI? Our platform offers:
+
+1. **Free Trial**: 30-day trial with full feature access
+2. **Consultation**: Free strategy session with our AI experts
+3. **Custom Implementation**: Tailored deployment for your specific needs
+4. **Training & Support**: Comprehensive training programs and 24/7 support
+
+Contact our team today to learn how our AI platform can transform your business operations and unlock new opportunities for growth.
+
+---
+
+## zh-CN
+
+我们很高兴地宣布推出突破性的 AI 平台，它将改变企业处理自动化和决策制定的方式。这一革命性解决方案代表了多年的研发成果，将尖端的机器学习算法与直观的用户界面相结合。
+
+### 主要功能
+
+#### 先进的机器学习能力
+
+我们的平台利用最先进的神经网络和深度学习模型提供：
+
+- **预测分析**：以95%的准确率预测业务趋势
+- **自然语言处理**：实时理解和处理人类语言
+- **计算机视觉**：分析图像和视频以获得可操作的见解
+- **自动决策制定**：基于数据模式做出复杂决策
+
+#### 企业级安全性
+
+安全性是我们平台设计的核心：
+
+- 所有数据传输的端到端加密
+- 多因素身份验证和基于角色的访问控制
+- 符合 GDPR、HIPAA 和 SOC 2 标准
+- 定期安全审计和渗透测试
+
+#### 无缝集成
+
+该平台旨在与您现有的基础设施协同工作：
+
+- 用于轻松集成的 RESTful API
+- 支持流行的数据库和云平台
+- 为主要企业软件预构建连接器
+- 灵活的部署选项（云端、本地、混合）
+
+### 行业影响
+
+这个 AI 平台解决了多个行业的关键挑战：
+
+#### 医疗保健
+
+- 加速药物发现过程
+- 提高诊断准确性
+- 优化患者护理工作流程
+- 减少管理开销
+
+#### 金融
+
+- 增强欺诈检测能力
+- 自动化风险评估
+- 通过 AI 聊天机器人改善客户服务
+- 优化交易策略
+
+#### 制造业
+
+- 设备预测性维护
+- 质量控制自动化
+- 供应链优化
+- 能效改进
+
+### 开始使用
+
+准备用 AI 改变您的业务？我们的平台提供：
+
+1. **免费试用**：30天试用，完整功能访问
+2. **咨询**：与我们的 AI 专家免费策略会议
+3. **定制实施**：针对您特定需求的定制部署
+4. **培训和支持**：全面的培训计划和24/7支持
+
+立即联系我们的团队，了解我们的 AI 平台如何改变您的业务运营并释放新的增长机会。
+
+---
+
+## zh-TW
+
+我們很高興地宣布推出突破性的 AI 平台，它將改變企業處理自動化和決策制定的方式。這一革命性解決方案代表了多年的研發成果，將尖端的機器學習算法與直觀的用戶界面相結合。
+
+### 主要功能
+
+#### 先進的機器學習能力
+
+我們的平台利用最先進的神經網絡和深度學習模型提供：
+
+- **預測分析**：以95%的準確率預測業務趨勢
+- **自然語言處理**：實時理解和處理人類語言
+- **計算機視覺**：分析圖像和視頻以獲得可操作的見解
+- **自動決策制定**：基於數據模式做出複雜決策
+
+#### 企業級安全性
+
+安全性是我們平台設計的核心：
+
+- 所有數據傳輸的端到端加密
+- 多因素身份驗證和基於角色的訪問控制
+- 符合 GDPR、HIPAA 和 SOC 2 標準
+- 定期安全審計和滲透測試
+
+#### 無縫集成
+
+該平台旨在與您現有的基礎設施協同工作：
+
+- 用於輕鬆集成的 RESTful API
+- 支持流行的數據庫和雲平台
+- 為主要企業軟件預構建連接器
+- 靈活的部署選項（雲端、本地、混合）
+
+### 行業影響
+
+這個 AI 平台解決了多個行業的關鍵挑戰：
+
+#### 醫療保健
+
+- 加速藥物發現過程
+- 提高診斷準確性
+- 優化患者護理工作流程
+- 減少管理開銷
+
+#### 金融
+
+- 增強欺詐檢測能力
+- 自動化風險評估
+- 通過 AI 聊天機器人改善客戶服務
+- 優化交易策略
+
+#### 製造業
+
+- 設備預測性維護
+- 質量控制自動化
+- 供應鏈優化
+- 能效改進
+
+### 開始使用
+
+準備用 AI 改變您的業務？我們的平台提供：
+
+1. **免費試用**：30天試用，完整功能訪問
+2. **諮詢**：與我們的 AI 專家免費策略會議
+3. **定制實施**：針對您特定需求的定制部署
+4. **培訓和支持**：全面的培訓計劃和24/7支持
+
+立即聯繫我們的團隊，了解我們的 AI 平台如何改變您的業務運營並釋放新的增長機會。

lib/i18n/config.ts

@@ -0,0 +1,32 @@
+export const defaultLanguage = 'en';
+
+export const languages = [
+    {
+        code: 'en',
+        label: 'English',
+        flag: '🇺🇸',
+        dir: 'ltr',
+    },
+    {
+        code: 'zh-CN',
+        label: '简体中文',
+        flag: '🇨🇳',
+        dir: 'ltr',
+    },
+    {
+        code: 'zh-TW',
+        label: '繁體中文',
+        flag: '🇹🇼',
+        dir: 'ltr',
+    },
+];
+
+export type Language = (typeof languages)[number]['code'];
+
+export const isValidLanguage = (lang: string): lang is Language => {
+    return languages.some((l) => l.code === lang);
+};
+
+export const getLanguageConfig = (lang: Language) => {
+    return languages.find((l) => l.code === lang) || languages[0];
+};

lib/i18n/translations.ts

@@ -0,0 +1,345 @@
+import { Language } from './config';
+
+export interface Translation {
+    nav: {
+        home: string;
+        products: string;
+        news: string;
+        support: string;
+        about: string;
+    };
+    banner: {
+        slides: Array<{
+            title: string;
+            subtitle: string;
+            cta: string;
+        }>;
+    };
+    features: {
+        title: string;
+        subtitle: string;
+        items: Array<{
+            icon: string;
+            title: string;
+            description: string;
+        }>;
+    };
+    products: {
+        hero: {
+            title: string;
+            subtitle: string;
+        };
+        categories: {
+            all: string;
+            software: string;
+            hardware: string;
+            consulting: string;
+            integration: string;
+        };
+        items: Array<{
+            name: string;
+            description: string;
+            category: string;
+            price: string;
+            features: string[];
+        }>;
+        learnMore: string;
+        cta: {
+            title: string;
+            subtitle: string;
+            primaryButton: string;
+            secondaryButton: string;
+        };
+    };
+    cta: {
+        title: string;
+        subtitle: string;
+        primaryButton: string;
+        secondaryButton: string;
+    };
+    footer: {
+        description: string;
+        sections: {
+            products: {
+                title: string;
+                items: Array<{
+                    label: string;
+                    href: string;
+                }>;
+            };
+            support: {
+                title: string;
+                items: Array<{
+                    label: string;
+                    href: string;
+                }>;
+            };
+            social: {
+                title: string;
+            };
+        };
+        copyright: string;
+    };
+}
+
+export const translations: Record<Language, Translation> = {
+    en: {
+        nav: {
+            home: 'Home',
+            products: 'Products & Services',
+            news: 'News',
+            support: 'Support',
+            about: 'About Us',
+        },
+        banner: {
+            slides: [
+                { title: 'Innovative Technology Solutions', subtitle: 'Leading the future, creating unlimited possibilities', cta: 'Learn More', },
+                { title: 'Professional Service Team', subtitle: 'Providing comprehensive technical support', cta: 'Contact Us', },
+                { title: 'Intelligent Product Experience', subtitle: 'Simplifying processes, improving efficiency', cta: 'Try Now', },
+            ],
+        },
+        features: {
+            title: 'Why Choose Us',
+            subtitle: 'We are committed to providing customers with the highest quality products and services, driving business development with innovative technology',
+            items: [
+                { icon: '🚀', title: 'High Performance Solutions', description: 'Using the latest technology architecture to ensure stable and efficient system operation', },
+                { icon: '🔒', title: 'Secure & Reliable', description: 'Multi-layer security protection to ensure your data security', },
+                { icon: '⚡', title: 'Fast Response', description: '7x24 hours technical support to quickly solve your problems', },
+                { icon: '🎯', title: 'Precise Customization', description: 'Tailor-made exclusive solutions according to your needs', },
+            ],
+        },
+        products: {
+            hero: {
+                title: 'Products & Services',
+                subtitle: 'Comprehensive technology solutions to drive your business forward',
+            },
+            categories: {
+                all: 'All Products',
+                software: 'Software Solutions',
+                hardware: 'Hardware Products',
+                consulting: 'Consulting Services',
+                integration: 'System Integration',
+            },
+            items: [
+                { name: 'Enterprise Management System', description: 'Comprehensive enterprise resource planning solution with advanced analytics and reporting capabilities.', category: 'software', price: 'From $999/month', features: [ 'Real-time Analytics', 'Cloud-based', 'Multi-platform', '24/7 Support', ], },
+                { name: 'AI-Powered Analytics Platform', description: 'Advanced machine learning platform for business intelligence and predictive analytics.', category: 'software', price: 'From $1,499/month', features: [ 'Machine Learning', 'Predictive Analytics', 'Custom Dashboards', 'API Integration', ], },
+                { name: 'High-Performance Server', description: 'Enterprise-grade server solutions with exceptional performance and reliability.', category: 'hardware', price: 'From $4,999', features: [ 'High Performance', 'Scalable', 'Energy Efficient', '5-year Warranty', ], },
+                { name: 'Digital Transformation Consulting', description: 'Expert consulting services to guide your digital transformation journey.', category: 'consulting', price: 'Custom Quote', features: [ 'Strategy Planning', 'Implementation Support', 'Training', 'Ongoing Support', ], },
+                { name: 'Cloud Infrastructure Setup', description: 'Complete cloud infrastructure design and implementation services.', category: 'integration', price: 'From $2,999', features: [ 'Cloud Migration', 'Security Setup', 'Performance Optimization', 'Monitoring', ], },
+                { name: 'IoT Device Management', description: 'Comprehensive IoT device management and monitoring solution.', category: 'software', price: 'From $799/month', features: [ 'Device Monitoring', 'Remote Control', 'Data Analytics', 'Security Management', ], },
+            ],
+            learnMore: 'Learn More',
+            cta: {
+                title: 'Need a Custom Solution?',
+                subtitle: 'Our experts are ready to help you find the perfect solution for your business needs.',
+                primaryButton: 'Get Quote',
+                secondaryButton: 'Schedule Demo',
+            },
+        },
+        cta: {
+            title: 'Ready to Start Your Digital Transformation Journey?',
+            subtitle: 'Contact our professional team for customized solutions',
+            primaryButton: 'Free Consultation',
+            secondaryButton: 'View Cases',
+        },
+        footer: {
+            description: 'Professional technology solution provider, committed to creating value for customers.',
+            sections: {
+                products: {
+                    title: 'Products & Services',
+                    items: [
+                        { label: 'Solutions', href: '/products' },
+                        { label: 'Technical Consulting', href: '/products' },
+                        { label: 'System Integration', href: '/products' },
+                    ],
+                },
+                support: {
+                    title: 'Support',
+                    items: [
+                        { label: 'Technical Support', href: '/support' },
+                        { label: 'Documentation', href: '/support' },
+                        { label: 'Contact Us', href: '/support' },
+                    ],
+                },
+                social: {
+                    title: 'Follow Us',
+                },
+            },
+            copyright: 'All rights reserved.',
+        },
+    },
+    'zh-CN': {
+        nav: {
+            home: '首页',
+            products: '产品与服务',
+            news: '新闻资讯',
+            support: '客户支持',
+            about: '关于我们',
+        },
+        banner: {
+            slides: [
+                { title: '创新科技解决方案', subtitle: '引领未来，创造无限可能', cta: '了解更多', },
+                { title: '专业服务团队', subtitle: '为您提供全方位技术支持', cta: '联系我们', },
+                { title: '智能化产品体验', subtitle: '简化流程，提升效率', cta: '立即体验', },
+            ],
+        },
+        features: {
+            title: '为什么选择我们',
+            subtitle: '我们致力于为客户提供最优质的产品和服务，以创新技术驱动业务发展',
+            items: [
+                { icon: '🚀', title: '高性能解决方案', description: '采用最新技术架构，确保系统稳定高效运行', },
+                { icon: '🔒', title: '安全可靠', description: '多层安全防护，保障您的数据安全无忧', },
+                { icon: '⚡', title: '快速响应', description: '7x24小时技术支持，快速解决您的问题', },
+                { icon: '🎯', title: '精准定制', description: '根据您的需求量身定制专属解决方案', },
+            ],
+        },
+        products: {
+            hero: {
+                title: '产品与服务',
+                subtitle: '全面的技术解决方案，推动您的业务向前发展',
+            },
+            categories: {
+                all: '全部产品',
+                software: '软件解决方案',
+                hardware: '硬件产品',
+                consulting: '咨询服务',
+                integration: '系统集成',
+            },
+            items: [
+                { name: '企业管理系统', description: '全面的企业资源规划解决方案，具备先进的分析和报告功能。', category: 'software', price: '起价 ¥6,999/月', features: ['实时分析', '云端部署', '多平台支持', '24/7支持'], },
+                { name: 'AI智能分析平台', description: '先进的机器学习平台，用于商业智能和预测分析。', category: 'software', price: '起价 ¥10,499/月', features: ['机器学习', '预测分析', '自定义仪表板', 'API集成'], },
+                { name: '高性能服务器', description: '企业级服务器解决方案，具有卓越的性能和可靠性。', category: 'hardware', price: '起价 ¥34,999', features: ['高性能', '可扩展', '节能环保', '5年保修'], },
+                { name: '数字化转型咨询', description: '专业咨询服务，指导您的数字化转型之旅。', category: 'consulting', price: '定制报价', features: ['战略规划', '实施支持', '培训服务', '持续支持'], },
+                { name: '云基础设施搭建', description: '完整的云基础设施设计和实施服务。', category: 'integration', price: '起价 ¥20,999', features: ['云迁移', '安全配置', '性能优化', '监控服务'], },
+                { name: '物联网设备管理', description: '全面的物联网设备管理和监控解决方案。', category: 'software', price: '起价 ¥5,599/月', features: ['设备监控', '远程控制', '数据分析', '安全管理'], },
+            ],
+            learnMore: '了解更多',
+            cta: {
+                title: '需要定制解决方案？',
+                subtitle: '我们的专家随时准备帮助您找到适合您业务需求的完美解决方案。',
+                primaryButton: '获取报价',
+                secondaryButton: '预约演示',
+            },
+        },
+        cta: {
+            title: '准备开始您的数字化转型之旅？',
+            subtitle: '联系我们的专业团队，获取定制化解决方案',
+            primaryButton: '免费咨询',
+            secondaryButton: '查看案例',
+        },
+        footer: {
+            description: '专业的技术解决方案提供商，致力于为客户创造价值。',
+            sections: {
+                products: {
+                    title: '产品服务',
+                    items: [
+                        { label: '解决方案', href: '/products' },
+                        { label: '技术咨询', href: '/products' },
+                        { label: '系统集成', href: '/products' },
+                    ],
+                },
+                support: {
+                    title: '支持',
+                    items: [
+                        { label: '技术支持', href: '/support' },
+                        { label: '文档中心', href: '/support' },
+                        { label: '联系我们', href: '/support' },
+                    ],
+                },
+                social: {
+                    title: '关注我们',
+                },
+            },
+            copyright: '保留所有权利。',
+        },
+    },
+    'zh-TW': {
+        nav: {
+            home: '首頁',
+            products: '產品與服務',
+            news: '新聞資訊',
+            support: '客戶支持',
+            about: '關於我們',
+        },
+        banner: {
+            slides: [
+                { title: '創新科技解決方案', subtitle: '引領未來，創造無限可能', cta: '了解更多', },
+                { title: '專業服務團隊', subtitle: '為您提供全方位技術支持', cta: '聯繫我們', },
+                { title: '智能化產品體驗', subtitle: '簡化流程，提升效率', cta: '立即體驗', },
+            ],
+        },
+        features: {
+            title: '為什麼選擇我們',
+            subtitle: '我們致力於為客戶提供最優質的產品和服務，以創新技術驅動業務發展',
+            items: [
+                { icon: '🚀', title: '高性能解決方案', description: '採用最新技術架構，確保系統穩定高效運行', },
+                { icon: '🔒', title: '安全可靠', description: '多層安全防護，保障您的數據安全無憂', },
+                { icon: '⚡', title: '快速響應', description: '7x24小時技術支持，快速解決您的問題', },
+                { icon: '🎯', title: '精準定制', description: '根據您的需求量身定制專屬解決方案', },
+            ],
+        },
+        products: {
+            hero: {
+                title: '產品與服務',
+                subtitle: '全面的技術解決方案，推動您的業務向前發展',
+            },
+            categories: {
+                all: '全部產品',
+                software: '軟體解決方案',
+                hardware: '硬體產品',
+                consulting: '諮詢服務',
+                integration: '系統整合',
+            },
+            items: [
+                { name: '企業管理系統', description: '全面的企業資源規劃解決方案，具備先進的分析和報告功能。', category: 'software', price: '起價 NT$29,999/月', features: ['即時分析', '雲端部署', '多平台支援', '24/7支援'], },
+                { name: 'AI智能分析平台', description: '先進的機器學習平台，用於商業智能和預測分析。', category: 'software', price: '起價 NT$44,999/月', features: ['機器學習', '預測分析', '自訂儀表板', 'API整合'], },
+                { name: '高性能伺服器', description: '企業級伺服器解決方案，具有卓越的性能和可靠性。', category: 'hardware', price: '起價 NT$149,999', features: ['高性能', '可擴展', '節能環保', '5年保固'], },
+                { name: '數位化轉型諮詢', description: '專業諮詢服務，指導您的數位化轉型之旅。', category: 'consulting', price: '客製報價', features: ['策略規劃', '實施支援', '培訓服務', '持續支援'], },
+                { name: '雲端基礎設施建置', description: '完整的雲端基礎設施設計和實施服務。', category: 'integration', price: '起價 NT$89,999', features: ['雲端遷移', '安全配置', '性能優化', '監控服務'], },
+                { name: '物聯網設備管理', description: '全面的物聯網設備管理和監控解決方案。', category: 'software', price: '起價 NT$23,999/月', features: ['設備監控', '遠端控制', '數據分析', '安全管理'], },
+            ],
+            learnMore: '了解更多',
+            cta: {
+                title: '需要客製解決方案？',
+                subtitle: '我們的專家隨時準備幫助您找到適合您業務需求的完美解決方案。',
+                primaryButton: '獲取報價',
+                secondaryButton: '預約展示',
+            },
+        },
+        cta: {
+            title: '準備開始您的數字化轉型之旅？',
+            subtitle: '聯繫我們的專業團隊，獲取定制化解決方案',
+            primaryButton: '免費諮詢',
+            secondaryButton: '查看案例',
+        },
+        footer: {
+            description: '專業的技術解決方案提供商，致力於為客戶創造價值。',
+            sections: {
+                products: {
+                    title: '產品服務',
+                    items: [
+                        { label: '解決方案', href: '/products' },
+                        { label: '技術諮詢', href: '/products' },
+                        { label: '系統集成', href: '/products' },
+                    ],
+                },
+                support: {
+                    title: '支持',
+                    items: [
+                        { label: '技術支持', href: '/support' },
+                        { label: '文檔中心', href: '/support' },
+                        { label: '聯繫我們', href: '/support' },
+                    ],
+                },
+                social: {
+                    title: '關注我們',
+                },
+            },
+            copyright: '保留所有權利。',
+        },
+    },
+};
+
+export const getTranslation = (language: Language): Translation => {
+    return translations[language] || translations.en;
+};

lib/i18n/useTranslation.ts

@@ -0,0 +1,138 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import { Language, defaultLanguage } from './config';
+import { getTranslation } from './translations';
+import {
+    getLanguageFromPath,
+    removeLanguageFromPath,
+    addLanguageToPath,
+    getStoredLanguage,
+    setStoredLanguage,
+    getBrowserLanguage,
+} from './utils';
+
+export const useTranslation = (initialLanguage?: Language) => {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const isChangingLanguage = useRef(false);
+
+    const [language, setLanguage] = useState<Language>(() => {
+        if (initialLanguage) return initialLanguage;
+        return defaultLanguage;
+    });
+
+    const [isInitialized, setIsInitialized] = useState(false);
+
+    const t = getTranslation(language);
+
+    const changeLanguage = useCallback(
+        (newLanguage: Language) => {
+            if (isChangingLanguage.current) return;
+
+            isChangingLanguage.current = true;
+            setLanguage(newLanguage);
+            setStoredLanguage(newLanguage);
+
+            // 使用 setTimeout 来避免状态更新冲突
+            setTimeout(() => {
+                // 首页特殊处理，切换语言时加上 ?lang=xx
+                if (pathname === '/' || pathname === '') {
+                    const url = newLanguage === defaultLanguage ? '/' : `/?lang=${newLanguage}`;
+                    router.push(url);
+                }
+                // 产品页面特殊处理
+                else if (pathname === '/products') {
+                    const url =
+                        newLanguage === defaultLanguage
+                            ? '/products'
+                            : `/products?lang=${newLanguage}`;
+                    router.push(url);
+                }
+                // 新闻页面特殊处理
+                else if (pathname === '/news') {
+                    const url =
+                        newLanguage === defaultLanguage ? '/news' : `/news?lang=${newLanguage}`;
+                    router.push(url);
+                }
+                // 其他页面保持原有逻辑
+                else {
+                    const currentPath = removeLanguageFromPath(pathname);
+                    const newPath = addLanguageToPath(currentPath, newLanguage);
+                    if (newPath !== pathname) {
+                        router.push(newPath);
+                    }
+                }
+
+                // 重置标志
+                setTimeout(() => {
+                    isChangingLanguage.current = false;
+                }, 100);
+            }, 0);
+        },
+        [pathname, router],
+    );
+
+    const getLocalizedPath = useCallback(
+        (path: string) => {
+            return addLanguageToPath(path, language);
+        },
+        [language],
+    );
+
+    // 初始化语言设置
+    useEffect(() => {
+        if (isInitialized || isChangingLanguage.current) return;
+
+        let detectedLanguage = defaultLanguage;
+
+        if (initialLanguage) {
+            detectedLanguage = initialLanguage;
+        } else {
+            // 首页和产品页面支持 ?lang=xx
+            const search = searchParams ? `?${searchParams.toString()}` : '';
+            const urlLanguage = getLanguageFromPath(pathname, search);
+
+            if (urlLanguage !== defaultLanguage) {
+                detectedLanguage = urlLanguage;
+            } else {
+                // 尝试从存储中获取语言
+                const storedLanguage = getStoredLanguage();
+                if (storedLanguage !== defaultLanguage) {
+                    detectedLanguage = storedLanguage;
+                } else {
+                    // 最后尝试浏览器语言
+                    detectedLanguage = getBrowserLanguage();
+                }
+            }
+        }
+
+        if (detectedLanguage !== language) {
+            setLanguage(detectedLanguage);
+        }
+
+        setIsInitialized(true);
+    }, [initialLanguage, pathname, searchParams, language, isInitialized]);
+
+    // 监听URL变化，但避免在语言切换过程中触发
+    useEffect(() => {
+        if (!isInitialized || isChangingLanguage.current) return;
+
+        const search = searchParams ? `?${searchParams.toString()}` : '';
+        const urlLanguage = getLanguageFromPath(pathname, search);
+
+        if (urlLanguage !== language) {
+            setLanguage(urlLanguage);
+        }
+    }, [pathname, searchParams, language, isInitialized]);
+
+    return {
+        language,
+        t,
+        changeLanguage,
+        getLocalizedPath,
+        isInitialized,
+    };
+};

lib/i18n/utils.ts

@@ -0,0 +1,75 @@
+import { Language, defaultLanguage, isValidLanguage } from './config';
+
+export const getLanguageFromPath = (pathname: string, search?: string): Language => {
+    // 首页、产品页面和新闻页面支持 ?lang=xx
+    if (
+        (pathname === '/' || pathname === '' || pathname === '/products' || pathname === '/news') &&
+        search
+    ) {
+        const params = new URLSearchParams(search);
+        const lang = params.get('lang');
+        if (lang && isValidLanguage(lang)) {
+            return lang as Language;
+        }
+    }
+    const segments = pathname.split('/').filter(Boolean);
+    const firstSegment = segments[0];
+    if (firstSegment && isValidLanguage(firstSegment)) {
+        return firstSegment;
+    }
+    return defaultLanguage;
+};
+
+export const removeLanguageFromPath = (pathname: string): string => {
+    const segments = pathname.split('/').filter(Boolean);
+    const firstSegment = segments[0];
+
+    if (firstSegment && isValidLanguage(firstSegment)) {
+        return '/' + segments.slice(1).join('/');
+    }
+
+    return pathname;
+};
+
+export const addLanguageToPath = (pathname: string, language: Language): string => {
+    if (language === defaultLanguage) {
+        return pathname;
+    }
+
+    const cleanPath = removeLanguageFromPath(pathname);
+    return `/${language}${cleanPath === '/' ? '' : cleanPath}`;
+};
+
+export const getStoredLanguage = (): Language => {
+    if (typeof window === 'undefined') return defaultLanguage;
+
+    const stored = localStorage.getItem('preferred-language');
+    if (stored && isValidLanguage(stored)) {
+        return stored;
+    }
+
+    return defaultLanguage;
+};
+
+export const setStoredLanguage = (language: Language): void => {
+    if (typeof window === 'undefined') return;
+    localStorage.setItem('preferred-language', language);
+};
+
+export const getBrowserLanguage = (): Language => {
+    if (typeof window === 'undefined') return defaultLanguage;
+
+    const browserLang = navigator.language.toLowerCase();
+
+    if (browserLang.startsWith('zh-cn') || browserLang.startsWith('zh-hans')) {
+        return 'zh-CN';
+    }
+    if (browserLang.startsWith('zh-tw') || browserLang.startsWith('zh-hant')) {
+        return 'zh-TW';
+    }
+    if (browserLang.startsWith('en')) {
+        return 'en';
+    }
+
+    return defaultLanguage;
+};

lib/news.ts

@@ -0,0 +1,90 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+
+const newsDirectory = path.join(process.cwd(), 'content/news');
+
+export interface NewsItem {
+    id: string;
+    title: string;
+    title_zh_CN: string;
+    title_zh_TW: string;
+    summary: string;
+    summary_zh_CN: string;
+    summary_zh_TW: string;
+    category: string;
+    date: string;
+    readTime: string;
+    tags: string[];
+    tags_zh_CN: string[];
+    tags_zh_TW: string[];
+    author: string;
+    author_zh_CN: string;
+    author_zh_TW: string;
+    image: string;
+    content: string;
+}
+
+export function getAllNews(): NewsItem[] {
+    const fileNames = fs.readdirSync(newsDirectory);
+    const allNewsData = fileNames
+        .filter((fileName) => fileName.endsWith('.md'))
+        .map((fileName) => {
+            const id = fileName.replace(/\.md$/, '');
+            const fullPath = path.join(newsDirectory, fileName);
+            const fileContents = fs.readFileSync(fullPath, 'utf8');
+            const matterResult = matter(fileContents);
+
+            return {
+                id,
+                content: matterResult.content,
+                ...matterResult.data,
+            } as NewsItem;
+        });
+
+    return allNewsData.sort((a, b) => {
+        if (a.date < b.date) {
+            return 1;
+        } else {
+            return -1;
+        }
+    });
+}
+
+export function getNewsById(id: string): NewsItem | undefined {
+    const allNews = getAllNews();
+    return allNews.find((news) => news.id === id);
+}
+
+// 简单的 markdown 解析器，用于提取特定语言的内容
+export function parseMarkdownContent(content: string, language: string): string {
+    const sections = content.split(/^## (en|zh-CN|zh-TW)$/m);
+
+    // 如果没有语言分节，返回原内容
+    if (sections.length === 1) {
+        return content;
+    }
+
+    // 查找对应语言的内容
+    for (let i = 1; i < sections.length; i += 2) {
+        const sectionLang = sections[i];
+        const sectionContent = sections[i + 1];
+
+        if (sectionLang === language) {
+            return sectionContent.trim();
+        }
+    }
+
+    // 如果没找到对应语言，返回英文内容或第一个内容
+    for (let i = 1; i < sections.length; i += 2) {
+        const sectionLang = sections[i];
+        const sectionContent = sections[i + 1];
+
+        if (sectionLang === 'en') {
+            return sectionContent.trim();
+        }
+    }
+
+    // 如果都没有，返回第一个可用的内容
+    return sections[2] ? sections[2].trim() : content;
+}

lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

next.config.mjs

@@ -0,0 +1,6 @@
+import path from 'path';
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    output: 'standalone',
+};
+export default nextConfig;

package.json

@@ -0,0 +1,37 @@
+{
+    "name": "@onlook/next-template",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint",
+        "format": "prettier --write ."
+    },
+    "dependencies": {
+        "@radix-ui/react-slot": "^1.1.0",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
+        "gray-matter": "^4.0.3",
+        "lucide-react": "^0.438.0",
+        "next": "14.2.23",
+        "react": "^18",
+        "react-dom": "^18",
+        "remark": "^15.0.1",
+        "remark-html": "^16.0.1",
+        "tailwind-merge": "^2.5.2",
+        "tailwindcss-animate": "^1.0.7"
+    },
+    "devDependencies": {
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "eslint": "^8",
+        "eslint-config-next": "^15.1.6",
+        "postcss": "^8",
+        "prettier": "^3.3.3",
+        "tailwindcss": "^3.4.1",
+        "typescript": "^5"
+    }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

tailwind.config.ts

@@ -0,0 +1,67 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+  	extend: {
+  		backgroundImage: {
+  			'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+  			'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		colors: {
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		}
+  	}
+  },
+  plugins: [require("tailwindcss-animate")],
+};
+export default config;

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}