new project

src/components/home.jsx

@@ -14,12 +14,22 @@ import {
   Typography
 } from "antd";
 import { DownOutlined } from "@ant-design/icons";
-import logoWhite from "../assets/images/logo-white2.png";
-import adsItemImage from "../assets/images/f89fdab0.webp";
+import logoWhite from "../assets/images/redhare.png";
+import googleLogo from "../assets/images/google.png";
+import appleLogo from "../assets/images/apple.png";
+import microsoftLogo from "../assets/images/microsoft.png";
+import amazonLogo from "../assets/images/amazon.png";
+import metaLogo from "../assets/images/meta.png";
+import netflixLogo from "../assets/images/netflix.png";
+import adobeLogo from "../assets/images/adobe.png";
+import intelLogo from "../assets/images/intel.png";
+import ciscoLogo from "../assets/images/cisco.png";
+import salesforceLogo from "../assets/images/salesforce.png";
+import adsItemImage from "../assets/images/kalodata.webp";
 import "../css/home.css";
 
 const { Header, Content } = Layout;
-const { Title, Paragraph, Text } = Typography;
+const { Title, Paragraph, Text, Link } = Typography;
 
 const navItems = ["探索", "类目", "店铺", "达人", "商品", "视频与广告", "直播"];
 const stats = [
@@ -28,11 +38,18 @@ const stats = [
   { value: "5亿+", label: "直播与短视频数据" },
   { value: "1000天", label: "历史数据" }
 ];
-const logos = Array.from({ length: 20 }, (_, index) => ({
-  id: `logo-${index + 1}`,
-  src: logoWhite,
-  alt: `Partner ${index + 1}`
-}));
+const logos = [
+  { id: "google", src: googleLogo, alt: "Google" },
+  { id: "apple", src: appleLogo, alt: "Apple" },
+  { id: "microsoft", src: microsoftLogo, alt: "Microsoft" },
+  { id: "amazon", src: amazonLogo, alt: "Amazon" },
+  { id: "meta", src: metaLogo, alt: "Meta" },
+  { id: "netflix", src: netflixLogo, alt: "Netflix" },
+  { id: "adobe", src: adobeLogo, alt: "Adobe" },
+  { id: "salesforce", src: salesforceLogo, alt: "Salesforce" },
+  { id: "cisco", src: ciscoLogo, alt: "Cisco" },
+  { id: "intel", src: intelLogo, alt: "Intel" }
+];
 
 const langItems = [
   { key: "zh", label: "中文(简体)" },
@@ -64,13 +81,47 @@ const tableData = [1, 2, 3].map((item) => ({
   sales: "9276"
 }));
 
+const faqs = [
+  {
+    q: "Rhdata是什么？使用Rhdata有什么好处？",
+    a:
+      "Rhdata 是行业用户规模最大、市场占有率第一的 TikTok 电商数据分析工具，已服务全球 300 万+品牌、卖家、达人与机构。作为行业首家同时覆盖 TikTok 全球 15 站点、Amazon 与 Shopee 的一站式跨平台数据分析工具，Rhdata 利用 AI 与大数据赋能，帮助你高效完成爆品挖掘、竞品分析、达人筛选与内容优化，以精准数据驱动决策，全面提升跨境电商运营效率！"
+  },
+  {
+    q: "Rhdata的数据是怎么获得的？准确度如何？",
+    a:
+      "TikTok 电商数据由我们的技术团队通过采集公开渠道的数据，再结合先进的 AI 算法模型和数据处理技术加工得出。部分数据（如成交金额、广告消耗）会与真实数据存在一定误差。随着模型每天训练与升级，数据准确度也在不断提升。我们的核心宗旨是帮助用户更深入了解、学习并借鉴商品、店铺与内容，用于形成更科学的经营策略。请勿将该数据用于合作分佣结算、绩效考核等高精度要求场景。"
+  },
+  {
+    q: "Rhdata团队的背景？",
+    a:
+      "我们的团队拥有丰富的行业经验与数据分析能力，能够快速识别并分析数据中的关键洞察。我们不仅提供基础的数据统计，还能进行深度的数据挖掘与趋势预测，帮助用户更好地理解市场与用户需求，制定更有效的选品与营销策略。"
+  },
+  {
+    q: "Rhdata的费用是多少？",
+    a: (
+      <>
+        您可以在我们的付费页面查看更多和详细了解套餐价格和功能：
+        <Link href="https://www.Rhdata.com/pricing" target="_blank">
+          https://www.Rhdata.com/pricing
+        </Link>
+        。
+      </>
+    )
+  },
+  {
+    q: "如果向他人推介Rhdata，可以得到佣金吗？",
+    a: "是的，我们有代理合作计划，请您联系官方客服。"
+  }
+];
+
 export default function Home() {
   return (
     <Layout className="home">
       <Header className="home-header">
         <div className="home-brand">
           <span className="home-logo-wrap">
-            <img className="home-logo" src={logoWhite} alt="Kalodata" />
+            <img className="home-logo" src={logoWhite} alt="Rhdata" />
           </span>
         </div>
         <Menu
@@ -151,6 +202,63 @@ export default function Home() {
             />
           </div>
         </section>
+        <section className="home-section">
+          <div className="home-section-inner">
+            <div className="home-section-header">
+              <span className="home-section-number">02</span>
+              <span>达人建联</span>
+            </div>
+            <img
+              className="home-section-header-image"
+              src={adsItemImage}
+              alt="creator connect preview"
+            />
+          </div>
+        </section>
+        <section className="home-section">
+          <div className="home-section-inner">
+            <div className="home-section-header">
+              <span className="home-section-number">03</span>
+              <span>广告优化</span>
+            </div>
+            <img
+              className="home-section-header-image"
+              src={adsItemImage}
+              alt="creator connect preview"
+            />
+          </div>
+        </section>
+        <section className="home-section">
+          <div className="home-section-inner">
+            <div className="home-section-header">
+              <span className="home-section-number">04</span>
+              <span>竞对洞察</span>
+            </div>
+            <img
+              className="home-section-header-image"
+              src={adsItemImage}
+              alt="creator connect preview"
+            />
+          </div>
+        </section>
+        <section className="home-faqs">
+          <div className="home-faqs-inner">
+            <Title level={2} className="home-faqs-title">
+              FAQs
+            </Title>
+            <Card className="home-faqs-card" bordered={false}>
+              <div className="home-faq-pin" aria-hidden="true" />
+              {faqs.map((item) => (
+                <div key={item.q} className="home-faq-item">
+                  <Title level={4} className="home-faq-question">
+                    {item.q}
+                  </Title>
+                  <Paragraph className="home-faq-answer">{item.a}</Paragraph>
+                </div>
+              ))}
+            </Card>
+          </div>
+        </section>
       </Content>
     </Layout>
   );

src/css/home.css

@@ -177,6 +177,7 @@ body {
 .home-logos {
   height: 120px;
   display: flex;
+  padding: 20px 48px;
   align-items: center;
   overflow: hidden;
   background: #fff;
@@ -347,3 +348,55 @@ body {
     padding: 16px 24px 32px;
   }
 }
+
+.home-faqs {
+  width: 100%;
+  background: #f5f7fb;
+  padding: 40px 0 80px;
+}
+
+.home-faqs-inner {
+  width: 1200px;
+  margin: 0 auto;
+}
+
+.home-faqs-title {
+  text-align: center;
+  font-size: 32px;
+  margin-bottom: 24px;
+}
+
+.home-faqs-card {
+  position: relative;
+  border-radius: 16px;
+  padding: 20px 28px;
+  background: #fff;
+}
+
+.home-faq-pin {
+  position: absolute;
+  right: 28px;
+  top: -12px;
+  width: 18px;
+  height: 18px;
+  background: #2f7cff;
+  border-radius: 0 50% 50% 50%;
+  transform: rotate(45deg);
+}
+
+.home-faq-item + .home-faq-item {
+  margin-top: 18px;
+}
+
+.home-faq-question.ant-typography {
+  margin: 0 0 8px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f2a37;
+}
+
+.home-faq-answer {
+  margin: 0;
+  color: #5f6b7c;
+  line-height: 1.7;
+}