feat: 支持多语言能力

src/app/page.tsx

@@ -16,99 +16,94 @@ import {
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { useTranslation } from "@/lib/i18n";
 
-const features = [
-  {
-    icon: Video,
-    title: "Video to Frames",
-    description: "Extract frames from videos with customizable frame rates and formats. Perfect for sprite animations.",
-    href: "/tools/video-frames",
-  },
-  {
-    icon: Image,
-    title: "Image Compression",
-    description: "Optimize images for web and mobile without quality loss. Support for batch processing.",
-    href: "/tools/image-compress",
-  },
-  {
-    icon: Music,
-    title: "Audio Compression",
-    description: "Compress and convert audio files to various formats. Adjust bitrate and sample rate.",
-    href: "/tools/audio-compress",
-  },
-  {
-    icon: Sparkles,
-    title: "AI-Powered Tools",
-    description: "Enhance your assets with AI. Upscale images, remove backgrounds, and more.",
-    href: "/tools/ai-tools",
-  },
-];
+function useFeatures() {
+  const { t } = useTranslation();
+  return [
+    {
+      icon: Video,
+      title: t("home.tools.videoToFrames.title"),
+      description: t("home.tools.videoToFrames.description"),
+      href: "/tools/video-frames",
+    },
+    {
+      icon: Image,
+      title: t("home.tools.imageCompression.title"),
+      description: t("home.tools.imageCompression.description"),
+      href: "/tools/image-compress",
+    },
+    {
+      icon: Music,
+      title: t("home.tools.audioCompression.title"),
+      description: t("home.tools.audioCompression.description"),
+      href: "/tools/audio-compress",
+    },
+    {
+      icon: Sparkles,
+      title: t("home.tools.aiTools.title"),
+      description: t("home.tools.aiTools.description"),
+      href: "/tools/ai-tools",
+    },
+  ];
+}
 
-const benefits = [
-  {
-    icon: Zap,
-    title: "Lightning Fast",
-    description: "Process files in seconds with our optimized infrastructure.",
-  },
-  {
-    icon: Shield,
-    title: "Secure & Private",
-    description: "Your files are encrypted and automatically deleted after processing.",
-  },
-  {
-    icon: Users,
-    title: "Built for Developers",
-    description: "API access, batch processing, and tools designed for game development workflows.",
-  },
-];
+function useBenefits() {
+  const { t } = useTranslation();
+  return [
+    {
+      icon: Zap,
+      title: t("home.benefits.lightningFast.title"),
+      description: t("home.benefits.lightningFast.description"),
+    },
+    {
+      icon: Shield,
+      title: t("home.benefits.secure.title"),
+      description: t("home.benefits.secure.description"),
+    },
+    {
+      icon: Users,
+      title: t("home.benefits.forDevelopers.title"),
+      description: t("home.benefits.forDevelopers.description"),
+    },
+  ];
+}
 
-const pricingPlans = [
-  {
-    name: "Free",
-    price: "$0",
-    description: "Perfect for trying out",
-    features: [
-      "10 processes per day",
-      "50MB max file size",
-      "Basic tools",
-      "Community support",
-    ],
-    cta: "Get Started",
-    href: "/register",
-  },
-  {
-    name: "Pro",
-    price: "$19",
-    period: "/month",
-    description: "For serious developers",
-    features: [
-      "Unlimited processes",
-      "500MB max file size",
-      "All tools including AI",
-      "Priority support",
-      "API access",
-    ],
-    cta: "Start Free Trial",
-    href: "/pricing",
-    popular: true,
-  },
-  {
-    name: "Enterprise",
-    price: "Custom",
-    description: "For teams and businesses",
-    features: [
-      "Everything in Pro",
-      "Unlimited file size",
-      "Custom integrations",
-      "Dedicated support",
-      "SLA guarantee",
-    ],
-    cta: "Contact Sales",
-    href: "/contact",
-  },
-];
+function usePricingPlans() {
+  const { t } = useTranslation();
+  return [
+    {
+      name: t("home.pricing.plans.free.name"),
+      price: t("home.pricing.plans.free.price"),
+      description: t("home.pricing.plans.free.description"),
+      features: t("home.pricing.plans.free.features") as unknown as string[],
+      cta: t("home.pricing.plans.free.cta"),
+      href: "/register",
+    },
+    {
+      name: t("home.pricing.plans.pro.name"),
+      price: t("home.pricing.plans.pro.price"),
+      period: t("home.pricing.plans.pro.period"),
+      description: t("home.pricing.plans.pro.description"),
+      features: t("home.pricing.plans.pro.features") as unknown as string[],
+      cta: t("home.pricing.plans.pro.cta"),
+      href: "/pricing",
+      popular: t("home.pricing.plans.pro.popular") as string,
+    },
+    {
+      name: t("home.pricing.plans.enterprise.name"),
+      price: t("home.pricing.plans.enterprise.price"),
+      description: t("home.pricing.plans.enterprise.description"),
+      features: t("home.pricing.plans.enterprise.features") as unknown as string[],
+      cta: t("home.pricing.plans.enterprise.cta"),
+      href: "/contact",
+    },
+  ];
+}
 
 function HeroSection() {
+  const { t } = useTranslation();
+
   return (
     <section className="relative overflow-hidden">
       {/* Background gradient */}
@@ -126,26 +121,22 @@ function HeroSection() {
         >
           <Badge className="mb-4" variant="secondary">
             <Sparkles className="mr-1 h-3 w-3" />
-            AI-Powered Tools
+            {t("home.hero.badge")}
           </Badge>
           <h1 className="mb-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl">
-            Build Games{" "}
-            <span className="bg-gradient-to-r from-purple-400 via-pink-500 to-blue-500 bg-clip-text text-transparent">
-              Faster
-            </span>
+            {t("home.hero.title", { speed: t("home.hero.speed") })}
           </h1>
           <p className="mb-8 text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
-            Transform your game development workflow with powerful AI tools. Video to frames,
-            image compression, audio processing, and more.
+            {t("home.hero.description")}
           </p>
           <div className="flex flex-col items-center justify-center gap-4 sm:flex-row xl:gap-6">
             <Button size="lg" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
               <Link href="/tools">
-                Start Building <ArrowRight className="ml-2 h-4 w-4" />
+                {t("home.hero.startBuilding")} <ArrowRight className="ml-2 h-4 w-4" />
               </Link>
             </Button>
             <Button size="lg" variant="outline" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
-              <Link href="/pricing">View Pricing</Link>
+              <Link href="/pricing">{t("common.viewPricing")}</Link>
             </Button>
           </div>
 
@@ -158,15 +149,15 @@ function HeroSection() {
           >
             <div>
               <div className="text-3xl font-bold md:text-4xl xl:text-5xl 2xl:text-6xl">10K+</div>
-              <div className="text-sm text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">Developers</div>
+              <div className="text-sm text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">{t("home.hero.stats.developers")}</div>
             </div>
             <div>
               <div className="text-3xl font-bold md:text-4xl xl:text-5xl 2xl:text-6xl">1M+</div>
-              <div className="text-sm text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">Files Processed</div>
+              <div className="text-sm text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">{t("home.hero.stats.filesProcessed")}</div>
             </div>
             <div>
               <div className="text-3xl font-bold md:text-4xl xl:text-5xl 2xl:text-6xl">99.9%</div>
-              <div className="text-sm text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">Uptime</div>
+              <div className="text-sm text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">{t("home.hero.stats.uptime")}</div>
             </div>
           </motion.div>
         </motion.div>
@@ -176,6 +167,9 @@ function HeroSection() {
 }
 
 function FeaturesSection() {
+  const { t } = useTranslation();
+  const features = useFeatures();
+
   return (
     <section className="border-t border-border/40 bg-background/50 py-24 xl:py-32 2xl:py-40">
       <div className="container">
@@ -187,10 +181,10 @@ function FeaturesSection() {
           className="mb-16 text-center xl:mb-20 2xl:mb-24"
         >
           <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
-            Everything You Need
+            {t("home.featuresSection.title")}
           </h2>
           <p className="text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
-            Powerful tools designed specifically for game developers
+            {t("home.featuresSection.description")}
           </p>
         </motion.div>
 
@@ -214,7 +208,7 @@ function FeaturesSection() {
                   </CardHeader>
                   <CardContent>
                     <Button variant="ghost" size="sm" className="w-full xl:text-base 2xl:text-lg">
-                      Try it now <ArrowRight className="ml-2 h-4 w-4" />
+                      {t("common.tryNow")} <ArrowRight className="ml-2 h-4 w-4" />
                     </Button>
                   </CardContent>
                 </Card>
@@ -228,6 +222,9 @@ function FeaturesSection() {
 }
 
 function BenefitsSection() {
+  const { t } = useTranslation();
+  const benefits = useBenefits();
+
   return (
     <section className="py-24 xl:py-32 2xl:py-40">
       <div className="container">
@@ -239,14 +236,13 @@ function BenefitsSection() {
             transition={{ duration: 0.5 }}
           >
             <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
-              Why Choose Mini Game AI?
+              {t("home.benefits.title")}
             </h2>
             <p className="mb-8 text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
-              We understand the unique challenges of game development. Our tools are built to help
-              you work faster and smarter.
+              {t("home.benefits.description")}
             </p>
             <Button size="lg" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
-              <Link href="/about">Learn More About Us</Link>
+              <Link href="/about">{t("common.learnMore")}</Link>
             </Button>
           </motion.div>
 
@@ -280,6 +276,9 @@ function BenefitsSection() {
 }
 
 function PricingSection() {
+  const { t } = useTranslation();
+  const pricingPlans = usePricingPlans();
+
   return (
     <section className="border-t border-border/40 bg-background/50 py-24 xl:py-32 2xl:py-40">
       <div className="container">
@@ -291,10 +290,10 @@ function PricingSection() {
           className="mb-16 text-center xl:mb-20 2xl:mb-24"
         >
           <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
-            Simple, Transparent Pricing
+            {t("home.pricing.title")}
           </h2>
           <p className="text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
-            Start free, scale as you grow. No hidden fees.
+            {t("home.pricing.description")}
           </p>
         </motion.div>
 
@@ -310,7 +309,7 @@ function PricingSection() {
               <Card className={`relative h-full ${plan.popular ? "border-primary" : ""} xl:p-8 2xl:p-10`}>
                 {plan.popular && (
                   <Badge className="absolute -top-3 left-1/2 -translate-x-1/2 xl:text-base 2xl:text-lg">
-                    Most Popular
+                    {plan.popular}
                   </Badge>
                 )}
                 <CardHeader>
@@ -346,6 +345,8 @@ function PricingSection() {
 }
 
 function CTASection() {
+  const { t } = useTranslation();
+
   return (
     <section className="py-24 xl:py-32 2xl:py-40">
       <div className="container">
@@ -358,17 +359,17 @@ function CTASection() {
         >
           <div className="relative z-10">
             <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
-              Ready to Level Up?
+              {t("home.cta.title")}
             </h2>
             <p className="mb-8 text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
-              Join thousands of game developers building amazing games with our tools.
+              {t("home.cta.description")}
             </p>
             <div className="flex flex-col items-center justify-center gap-4 sm:flex-row xl:gap-6">
               <Button size="lg" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
-                <Link href="/register">Get Started for Free</Link>
+                <Link href="/register">{t("home.cta.getStarted")}</Link>
               </Button>
               <Button size="lg" variant="outline" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
-                <Link href="/contact">Contact Sales</Link>
+                <Link href="/contact">{t("common.contactSales")}</Link>
               </Button>
             </div>
           </div>