ncrease the tracking area for top-selling products

src/components/home.jsx

@@ -15,6 +15,7 @@ import {
 } from "antd";
 import { DownOutlined } from "@ant-design/icons";
 import logoWhite from "../assets/images/logo-white2.png";
+import adsItemImage from "../assets/images/f89fdab0.webp";
 import "../css/home.css";
 
 const { Header, Content } = Layout;
@@ -138,66 +139,17 @@ export default function Home() {
         </section>
 
         <section className="home-section">
+          <div className="home-section-inner">
             <div className="home-section-header">
               <span className="home-section-number">01</span>
-            <Title level={2}>爆品追踪</Title>
+              <span>爆品追踪</span>
             </div>
-          <Card className="home-section-card" bordered={false}>
+            <img
-            <Row gutter={24}>
+              className="home-section-header-image"
-              <Col xs={24} lg={6} className="home-section-sidebar">
+              src={adsItemImage}
-                <Text className="home-section-filter-title">筛选</Text>
+              alt="ads item preview"
-                <Space direction="vertical" size={8} className="home-filter-list">
-                  <Text className="home-section-filter-item">日期</Text>
-                  <Text className="home-section-filter-item">类目</Text>
-                  <Text className="home-section-filter-item">价格</Text>
-                </Space>
-              </Col>
-              <Col xs={24} lg={18}>
-                <Row gutter={20}>
-                  <Col xs={24} lg={14}>
-                    <Table
-                      className="home-section-table"
-                      columns={tableColumns}
-                      dataSource={tableData}
-                      pagination={false}
-                      size="small"
             />
-                  </Col>
+          </div>
-                  <Col xs={24} lg={10}>
-                    <Card
-                      className="home-section-preview-card"
-                      bordered={false}
-                    >
-                      <div className="home-section-preview-image" />
-                      <Row gutter={[12, 12]}>
-                        <Col span={8}>
-                          <Statistic value="¥920.18k" title="成交金额" />
-                        </Col>
-                        <Col span={8}>
-                          <Statistic value="9276" title="销量" />
-                        </Col>
-                        <Col span={8}>
-                          <Statistic value="¥99.20" title="成交均价" />
-                        </Col>
-                      </Row>
-                      <Divider />
-                      <Row gutter={[12, 12]}>
-                        <Col span={8}>
-                          <Statistic value="¥64.47k" title="直播" />
-                        </Col>
-                        <Col span={8}>
-                          <Statistic value="¥0.00" title="短视频" />
-                        </Col>
-                        <Col span={8}>
-                          <Statistic value="¥225.71k" title="商城" />
-                        </Col>
-                      </Row>
-                    </Card>
-                  </Col>
-                </Row>
-              </Col>
-            </Row>
-          </Card>
         </section>
       </Content>
     </Layout>

src/css/home.css

@@ -217,7 +217,15 @@ body {
 }
 
 .home-section {
+  background-color: rgb(243, 247, 252);
+  width: 100%;
+}
+
+.home-section-inner {
+  width: 1200px;
+  height: 700px;
   padding: 32px 48px 64px;
+  margin: 0 auto;
 }
 
 .home-section-header {
@@ -225,10 +233,25 @@ body {
   align-items: baseline;
   gap: 16px;
   margin-bottom: 20px;
+  height: 100px;
+  justify-content: center;
+  align-items: center;
+  font-size: 36px;
+  font-family: "TencentW7", "PingFang SC", "Segoe UI", sans-serif;
+}
+
+.home-section-header-image {
+  width: 1200px;
+  height: 600px;
+  display: block;
+  margin: 0 auto;
+  object-fit: cover;
+  object-position: center -100px;
+  border-radius: 24px;
 }
 
 .home-section-number {
-  font-size: 48px;
+  font-size: 100px;
   color: #e4edf8;
   font-weight: 700;
 }

webpack.config.js

@@ -27,7 +27,7 @@ module.exports = {
         use: ["style-loader", "css-loader"]
       },
       {
-        test: /\.(png|jpe?g|gif|svg)$/i,
+        test: /\.(png|jpe?g|gif|svg|webp)$/i,
         type: "asset/resource"
       },
       {