From c61da9b73849308b3f0ff48f1da2ad255e7ae5a6 Mon Sep 17 00:00:00 2001
From: yezhen <jiushu147669@163.com>
Date: Sun, 1 Feb 2026 17:01:24 +0800
Subject: [PATCH] Add the scrolling area for "Home"

---
 src/components/home.jsx | 28 +++++++++++----------------
 src/css/home.css        | 42 +++++++++++++++++++++++++++++++++--------
 2 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/src/components/home.jsx b/src/components/home.jsx
index 87522d9..c065c20 100644
--- a/src/components/home.jsx
+++ b/src/components/home.jsx
@@ -27,17 +27,11 @@ const stats = [
   { value: "5亿+", label: "直播与短视频数据" },
   { value: "1000天", label: "历史数据" }
 ];
-const logos = [
-  "Jet Commerce",
-  "eCommerce Ninja",
-  "desty",
-  "BUZZOHERO",
-  "KOLAN",
-  "SCI GROUP",
-  "周大福",
-  "PONGO",
-  "MADAME GIE"
-];
+const logos = Array.from({ length: 20 }, (_, index) => ({
+  id: `logo-${index + 1}`,
+  src: logoWhite,
+  alt: `Partner ${index + 1}`
+}));
 
 const langItems = [
   { key: "zh", label: "中文(简体)" },
@@ -134,13 +128,13 @@ export default function Home() {
         </div>
 
         <section className="home-logos">
-          <Row gutter={[8, 8]}>
-            {logos.map((logo) => (
-              <Col key={logo} xs={8} md={4} lg>
-                <Text className="home-logo-item">{logo}</Text>
-              </Col>
+          <div className="home-logos-track">
+            {[...logos, ...logos].map((logo, index) => (
+              <div key={`${logo.id}-${index}`} className="home-logo-item">
+                <img src={logo.src} alt={logo.alt} />
+              </div>
             ))}
-          </Row>
+          </div>
         </section>
 
         <section className="home-section">
diff --git a/src/css/home.css b/src/css/home.css
index 976d443..c428ef4 100644
--- a/src/css/home.css
+++ b/src/css/home.css
@@ -175,19 +175,45 @@ body {
 }
 
 .home-logos {
-  display: grid;
-  grid-template-columns: repeat(9, minmax(0, 1fr));
-  gap: 8px;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
   background: #fff;
-  padding: 16px 48px;
   border-top: 1px solid #e6edf7;
   border-bottom: 1px solid #e6edf7;
 }
 
+.home-logos-track {
+  display: flex;
+  align-items: center;
+  gap: 40px;
+  height: 100%;
+  animation: home-logo-scroll 30s linear infinite;
+  will-change: transform;
+}
+
 .home-logo-item {
-  text-align: center;
-  color: #94a3b8;
-  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 120px;
+  height: 100%;
+}
+
+.home-logo-item img {
+  height: 100%;
+  width: auto;
+  display: block;
+}
+
+@keyframes home-logo-scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
 }
 
 .home-section {
@@ -278,7 +304,7 @@ body {
   }
 
   .home-logos {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    padding: 12px 24px;
   }
 }