Detect locale with is-china-user and show English copy for non-Chinese visitors.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/sections/hero.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { ChevronRight } from "lucide-react";
 import { ENTRY_CARDS } from "~/lib/data";
+import { useLocale } from "~/components/locale-provider";
 
 const CARD_STYLE = {
   blue: {
@@ -23,6 +24,8 @@ const CARD_STYLE = {
 } as const;
 
 export function Hero() {
+  const { t } = useLocale();
+
   return (
     <section
       className="flex flex-1 flex-col justify-center px-5 pb-8"
@@ -32,25 +35,29 @@ export function Hero() {
       }}
     >
       <div className="mx-auto w-full max-w-md sm:max-w-lg">
-        {/* 标题 */}
         <div className="text-center">
           <h1 className="text-[2rem] font-bold leading-tight sm:text-5xl">
-            <span className="text-gradient">数字游民</span>
+            <span className="text-gradient">{t.brandSubtitle}</span>
           </h1>
           <p className="mt-2 text-lg font-medium tracking-[0.2em] text-neutral-400 sm:text-xl">
             nomadro
           </p>
           <p className="mx-auto mt-4 max-w-xs text-[13px] leading-relaxed text-neutral-500 sm:max-w-sm sm:text-sm">
-            游民导航 · 地理套利 · 直播工具箱
+            {t.heroTagline}
             <br />
-            一站开启自由生活
+            {t.heroTaglineLine2}
           </p>
         </div>
 
-        {/* 入口卡片 */}
         <div className="mt-10 flex flex-col gap-3">
           {ENTRY_CARDS.map((card) => {
             const style = CARD_STYLE[card.accent];
+            const copy = t.entryCards[card.id] ?? {
+              label: card.label,
+              title: card.title,
+              description: card.description,
+            };
+
             return (
               <Link
                 key={card.id}
@@ -72,19 +79,19 @@ export function Hero() {
                 <div className="min-w-0 flex-1 pr-1">
                   <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
                     <h2 className="text-[15px] font-semibold text-neutral-900 sm:text-base">
-                      {card.label}
+                      {copy.label}
                     </h2>
                     {card.id === "live" && (
                       <span className="rounded bg-rose-500 px-1.5 py-px text-[10px] font-semibold leading-4 text-white">
-                        LIVE
+                        {t.liveBadge}
                       </span>
                     )}
                   </div>
                   <p className="mt-0.5 text-sm font-medium text-neutral-700">
-                    {card.title}
+                    {copy.title}
                   </p>
                   <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-neutral-400">
-                    {card.description}
+                    {copy.description}
                   </p>
                 </div>