From bb2b051979a917d9d9593fea08004b2dd5fe23bc Mon Sep 17 00:00:00 2001
From: yoma <yingwaizhiying@gmail.com>
Date: Wed, 15 Jul 2026 22:59:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E5=AE=98=E7=BD=91=E6=8A=80=E6=9C=AF?=
 =?UTF-8?q?=E6=A0=88=E5=9B=BE=E6=A0=87=E8=A1=A5=E5=85=85=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/site/src/components/logos.astro | 37 ++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/apps/site/src/components/logos.astro b/apps/site/src/components/logos.astro
index 0c70083d..f0bf000d 100644
--- a/apps/site/src/components/logos.astro
+++ b/apps/site/src/components/logos.astro
@@ -2,18 +2,41 @@
 // @ts-ignore
 import { Icon } from "astro-icon/components";
 import { Marquee } from "@/components/magicui/marquee";
+
+const isEnglish = Astro.url.pathname === "/en" || Astro.url.pathname.startsWith("/en/");
+const heading = isEnglish
+  ? "Built with a modern, efficient technology stack"
+  : "基于现代且高效的技术栈构建";
+
+const technologies = [
+  { name: "React", icon: "simple-icons:react", hoverClass: "group-hover:text-indigo-600" },
+  { name: "Cloudflare", icon: "simple-icons:cloudflare", hoverClass: "group-hover:text-orange-500" },
+  { name: "Bun", icon: "simple-icons:bun", hoverClass: "group-hover:text-yellow-600" },
+  { name: "Tailwind CSS", icon: "simple-icons:tailwindcss", hoverClass: "group-hover:text-teal-500" },
+  { name: "SQLite", icon: "simple-icons:sqlite", hoverClass: "group-hover:text-blue-500" },
+  { name: "Hono", icon: "simple-icons:hono", hoverClass: "group-hover:text-red-500" },
+] as const;
 ---
 
 <div class="mt-24">
-  <h2 class="text-center text-slate-500 mb-10">基于现代且高效的技术栈构建</h2>
+  <h2 class="mb-10 text-center text-slate-500">{heading}</h2>
   <div class="relative flex w-full flex-col items-center justify-center overflow-hidden">
     <Marquee pauseOnHover className="[--duration:20s]" client:visible>
-      <Icon class="size-8 md:size-12 text-slate-400 hover:text-indigo-600 transition mx-8" name="simple-icons:react" title="React" />
-      <Icon class="size-8 md:size-12 text-slate-400 hover:text-orange-500 transition mx-8" name="simple-icons:cloudflare" title="Cloudflare" />
-      <Icon class="size-8 md:size-12 text-slate-400 hover:text-yellow-600 transition mx-8" name="simple-icons:bun" title="Bun" />
-      <Icon class="size-8 md:size-12 text-slate-400 hover:text-teal-500 transition mx-8" name="simple-icons:tailwindcss" title="Tailwind CSS" />
-      <Icon class="size-8 md:size-12 text-slate-400 hover:text-blue-500 transition mx-8" name="simple-icons:sqlite" title="SQLite" />
-      <Icon class="size-8 md:size-12 text-slate-400 hover:text-red-500 transition mx-8" name="simple-icons:hono" title="Hono" />
+      {technologies.map((technology) => (
+        <div class="group mx-4 flex min-w-24 flex-col items-center gap-2 md:mx-6">
+          <Icon
+            class:list={[
+              "size-8 text-slate-400 transition-colors md:size-12",
+              technology.hoverClass,
+            ]}
+            name={technology.icon}
+            title={technology.name}
+          />
+          <span class="whitespace-nowrap text-xs font-medium text-slate-500 transition-colors group-hover:text-slate-700 md:text-sm dark:group-hover:text-slate-300">
+            {technology.name}
+          </span>
+        </div>
+      ))}
     </Marquee>
     <!-- Left/Right Mask Gradients for smooth fade out -->
     <div class="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-background"></div>