hipo-web3

.gitignore

@@ -28,12 +28,14 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
 
 # env files (can opt-in for committing if needed)
 .env*
 
 # vercel
 .vercel
+.next
 
 # typescript
 *.tsbuildinfo

next.config.mjs

@@ -0,0 +1,15 @@
+// import type { NextConfig } from "next";
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "hi-po.oss-cn-beijing.aliyuncs.com",
+      },
+    ],
+  },
+};
+
+export default nextConfig;

next.config.ts

@@ -1,7 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  /* config options here */
-};
-
-export default nextConfig;

package-lock.json

@@ -4476,6 +4476,21 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.20",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.20.tgz",
+      "integrity": "sha512-igQW/JWciTGJwj3G1ipalD2V20Xfx3ywQy17IV0ciOUBbFhNfyU1DILWsTi32c8KmqgIDviUEulW/yPb2FF90w==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "hipo-web",
+  "name": "hipo-web333",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,16 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.0.4"
+    "@ant-design/pro-components": "^2.8.2",
+    "antd": "^5.22.4",
+    "next": "14.2.20",
+    "react": "^18.0.0",
+    "react-device-detect": "^2.2.3",
+    "react-dom": "^18.0.0",
+    "react-icons": "^5.4.0",
+    "swiper": "^10.3.1"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "15.0.4"
+    "eslint-config-next": "15.0.4",
+    "typescript": "^5"
   }
 }

public/file.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

src/app/(home)/components/Consultant/consultant.module.css

@@ -0,0 +1,389 @@
+.consultant {
+  position: relative;
+  height: 671px;
+  background: #ffffff;
+
+  .consultant-container {
+    position: absolute;
+    top: 0px;
+    left: calc(50% - 1050px / 2);
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    gap: 80px;
+    align-items: center;
+    width: 1050px;
+    height: 671px;
+    padding: 80px 0px;
+
+    .consultant-content {
+      /* Auto layout */
+
+      display: flex;
+
+      /* Inside auto layout */
+
+      flex: none;
+      flex-direction: column;
+      flex-grow: 0;
+      gap: 10px;
+      align-items: center;
+      order: 0;
+
+      width: 864px;
+      height: 87px;
+      padding: 0px;
+
+      .content1 {
+        /* Inside auto layout */
+
+        flex: none;
+        flex-grow: 0;
+        order: 0;
+        width: 180px;
+        height: 57px;
+
+        /* text-color */
+
+        color: #252b42;
+        font-weight: 700;
+        font-size: 40px;
+
+        /* h2 */
+
+        font-family: "Montserrat";
+        font-style: normal;
+        line-height: 57px;
+        /* identical to box height, or 142% */
+
+        letter-spacing: 0.2px;
+        text-align: center;
+      }
+
+      .content2 {
+        /* Inside auto layout */
+
+        flex: none;
+        flex-grow: 0;
+        order: 1;
+        width: 400px;
+        height: 20px;
+
+        /* second-text-color */
+
+        color: #737373;
+        font-weight: 500;
+        font-size: 14px;
+
+        /* paragraph */
+
+        font-family: "Montserrat";
+        font-style: normal;
+        line-height: 20px;
+        letter-spacing: 0.2px;
+        /* identical to box height, or 143% */
+
+        text-align: center;
+      }
+    }
+
+    .consultant-details {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: 1120px;
+      height: 340px;
+      padding: 0px;
+
+      .content-nav {
+        width: 28px;
+        height: 28px;
+        margin-right: 16px;
+        margin-left: 16px;
+        color: grey;
+        font-size: 28px;
+      }
+
+      .swiper-wrapper {
+        width: 1080px;
+        height: 316px;
+
+        .col-md-4 {
+          display: flex;
+          flex: none;
+          flex-direction: column;
+          flex-grow: 0;
+          align-items: center;
+          order: 0;
+          box-sizing: border-box;
+
+          width: 250px;
+          height: 316px;
+          padding: 0px;
+
+          background: #ffffff;
+          border: 1px solid #eeeeee;
+          transition: transform 0.3s ease;
+
+          &:hover {
+            transform: scale(1.1);
+          }
+
+          .media {
+            /* Inside auto layout */
+
+            flex: none;
+            flex-grow: 0;
+            align-self: stretch;
+            order: 0;
+            width: 250px;
+            height: 194px;
+          }
+
+          .media img {
+            width: 250px;
+            height: 194px;
+          }
+
+          .card-content {
+            display: flex;
+
+            /* Inside auto layout */
+
+            flex: none;
+            flex-direction: column;
+            flex-grow: 0;
+            gap: 5px;
+            align-items: center;
+            order: 1;
+
+            height: 113px;
+            padding: 30px;
+
+            .content3 {
+              /* Inside auto layout */
+
+              flex: none;
+              flex-grow: 0;
+              order: 0;
+              width: 96px;
+              height: 24px;
+
+              /* text-color */
+
+              color: #252b42;
+              font-weight: 700;
+              font-size: 16px;
+
+              /* h5 */
+
+              font-family: "Montserrat";
+              font-style: normal;
+              line-height: 24px;
+              letter-spacing: 0.1px;
+              /* identical to box height, or 150% */
+
+              text-align: center;
+            }
+
+            .content4 {
+              /* Inside auto layout */
+
+              flex: none;
+              flex-grow: 0;
+              order: 1;
+              height: 24px;
+
+              /* second-text-color */
+
+              color: #737373;
+              font-weight: 600;
+              font-size: 14px;
+
+              /* h6 */
+
+              font-family: "Montserrat";
+              font-style: normal;
+              line-height: 24px;
+              letter-spacing: 0.2px;
+              /* identical to box height, or 171% */
+
+              text-align: center;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .consultant {
+    position: relative;
+    width: 100%;
+    height: 671px;
+    background: #ffffff;
+
+    .consultant-container {
+      left: 0;
+      /* Auto layout */
+      display: flex;
+      flex-direction: column;
+      gap: 40px;
+      align-items: center;
+      width: 100%;
+      height: 671px;
+
+      .consultant-content {
+        /* Auto layout */
+
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        align-items: center;
+        width: 100%;
+        height: 87px;
+
+        .content2 {
+          width: 100%;
+          height: 20px;
+          padding-right: 50px;
+          padding-left: 50px;
+
+          /* second-text-color */
+
+          color: #737373;
+          font-weight: 500;
+          font-size: 16px;
+          /* paragraph */
+
+          font-family: "Montserrat";
+          font-style: normal;
+          line-height: 20px;
+          letter-spacing: 0.2px;
+          /* identical to box height, or 143% */
+
+          text-align: center;
+        }
+      }
+
+      .consultant-details {
+        /* Auto layout */
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        height: 360px;
+
+        .content-nav {
+          width: 0;
+          height: 0;
+          margin-right: 0;
+          margin-left: 0;
+          font-size: 0;
+        }
+
+        .swiper-wrapper {
+          width: 100%;
+          height: 360px;
+          margin-right: 50px;
+          margin-left: 50px;
+          text-align: center;
+
+          .col-md-4 {
+            display: flex;
+
+            /* Inside auto layout */
+
+            flex: none;
+            flex-direction: column;
+            flex-grow: 0;
+            align-items: center;
+            order: 0;
+            box-sizing: border-box;
+            width: calc(100vw - 100px);
+            height: 360px;
+            margin-right: 0;
+            margin-left: 0;
+
+            background: #ffffff;
+            border: 1px solid #eeeeee;
+
+            .media {
+              flex: none;
+              flex-grow: 0;
+              align-self: stretch;
+              order: 0;
+              width: 100%;
+              height: 250px;
+            }
+
+            .media img {
+              width: 100%;
+              height: 250px;
+              object-fit: cover;
+            }
+
+            .card-content {
+              display: flex;
+              flex-direction: column;
+              gap: 5px;
+              align-items: center;
+              height: 100px;
+
+              .content3 {
+                /* Inside auto layout */
+
+                flex: none;
+                flex-grow: 0;
+                order: 0;
+                width: 96px;
+                height: 24px;
+
+                /* text-color */
+
+                color: #252b42;
+                font-weight: 700;
+                font-size: 16px;
+
+                font-family: "Montserrat";
+                font-style: normal;
+                line-height: 24px;
+                letter-spacing: 0.1px;
+                /* identical to box height, or 150% */
+
+                text-align: center;
+              }
+
+              .content4 {
+                /* Inside auto layout */
+
+                flex: none;
+                flex-grow: 0;
+                order: 1;
+                height: 24px;
+
+                /* second-text-color */
+
+                color: #737373;
+                font-weight: 600;
+                font-size: 14px;
+
+                /* h6 */
+
+                font-family: "Montserrat";
+                font-style: normal;
+                line-height: 24px;
+                letter-spacing: 0.2px;
+                /* identical to box height, or 171% */
+
+                text-align: center;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/app/(home)/components/Consultant/index.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { isMobile } from "react-device-detect";
+// import Image from "next/image";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import styles from "./consultant.module.css";
+import { GoChevronLeft, GoChevronRight } from "react-icons/go";
+import { fetchConsultants } from "@/lib/cms";
+
+const Consultant: React.FC = () => {
+  const [consulantList, setConsulantList] = useState(null);
+  useEffect(() => {
+    fetchConsultants().then(({ data: list }) => {
+      setConsulantList(list);
+    });
+  }, []);
+  const [swiper, setSwiper] = useState<Swiper>();
+
+  return (
+    <div className={styles.consultant}>
+      <div className={styles["consultant-container"]}>
+        <div className={styles["consultant-content"]}>
+          <div className={styles.content1}>高潜顾问</div>
+        </div>
+        <div className={styles["consultant-details"]}>
+          <span
+            className={styles["content-nav"]}
+            onClick={() => {
+              swiper?.slidePrev();
+            }}
+          >
+            <GoChevronLeft />
+          </span>
+          <div className={styles["swiper-wrapper"]}>
+            <Swiper
+              spaceBetween={30}
+              initialSlide={0}
+              loop={true}
+              slidesPerView={isMobile ? 1 : 4}
+              onSlideChange={() => console.log("slide change")}
+              onSwiper={(swiper) => {
+                setSwiper(swiper);
+              }}
+            >
+              {consulantList?.records?.map((item, index) => {
+                return (
+                  <SwiperSlide key={index}>
+                    <a href={`/partner?id=${item.id}`} className={styles["col-md-4"]}>
+                      <div className={styles.media}>
+                        <img src={item.photo}></img>
+                      </div>
+
+                      <div className={styles["card-content"]}>
+                        <div className={styles.content3}>{item.cnName}</div>
+                        <div className={styles.content4}>{item.title}</div>
+                      </div>
+                    </a>
+                  </SwiperSlide>
+                );
+              })}
+            </Swiper>
+          </div>
+          <span
+            className={styles["content-nav"]}
+            onClick={() => {
+              swiper?.slideNext();
+            }}
+          >
+            <GoChevronRight />
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Consultant;

src/app/(home)/components/Contact/contact.module.css

@@ -0,0 +1,262 @@
+.influence {
+  position: relative;
+  width: 100%;
+
+  .influence-container {
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    background: #fafafa;
+
+    .title {
+      flex: none;
+      flex-grow: 0;
+      order: 0;
+      height: 57px;
+      margin-top: 80px;
+
+      color: #252b42;
+      font-weight: 700;
+      font-size: 40px;
+
+      font-family: "Montserrat";
+      font-style: normal;
+      line-height: 57px;
+
+      letter-spacing: 0.2px;
+    }
+
+    .logo-tab-wrapper {
+      display: flex;
+      flex-direction: row;
+      margin-top: 60px;
+
+      .logo-tab-checked {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 46px;
+        margin-right: 16px;
+        margin-left: 16px;
+        color: #1773c8;
+        line-height: 46px;
+        text-align: center;
+        border-radius: 23px;
+        user-select: none;
+      }
+
+      .logo-tab-normal {
+        height: 46px;
+        margin-right: 16px;
+        margin-left: 16px;
+        color: #333;
+        line-height: 46px;
+        text-align: center;
+        border-radius: 23px;
+        user-select: none;
+      }
+
+      .line {
+        width: 30px;
+        border-bottom: 3px solid #1773c8;
+      }
+    }
+
+    .logo-list {
+      margin-top: 50px;
+      margin-bottom: 50px;
+
+      .logo-list-img {
+      }
+    }
+  }
+
+  .contact-container {
+    z-index: 2;
+    display: flex;
+
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+
+    .title {
+      flex: none;
+      flex-grow: 0;
+      order: 0;
+      height: 57px;
+      margin-top: 80px;
+
+      color: #252b42;
+      font-weight: 700;
+      font-size: 40px;
+
+      font-family: "Montserrat";
+      font-style: normal;
+      line-height: 57px;
+
+      letter-spacing: 0.2px;
+    }
+
+    .map {
+      margin-top: 50px;
+      margin-bottom: 26px;
+    }
+
+    .contact {
+      display: flex;
+      flex-direction: row;
+      gap: 80px;
+      align-items: center;
+      justify-content: center;
+      width: 1200px;
+      margin-top: 32px;
+      margin-bottom: 80px;
+      color: #333;
+      font-size: 16px;
+
+      .item {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        align-items: center;
+        text-align: center;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .influence {
+    position: relative;
+    width: 100%;
+    height: 940px;
+
+    .influence-container {
+      z-index: 2;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      background: #fafafa;
+
+      .title {
+        flex: none;
+        flex-grow: 0;
+        order: 0;
+        height: 57px;
+        margin-top: 80px;
+
+        color: #252b42;
+        font-weight: 700;
+        font-size: 40px;
+
+        font-family: "Montserrat";
+        font-style: normal;
+        line-height: 57px;
+
+        letter-spacing: 0.2px;
+      }
+
+      .logo-tab-wrapper {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        margin-top: 40px;
+        row-gap: 10px;
+
+        .logo-tab-checked {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          height: 46px;
+          margin-right: 16px;
+          margin-left: 16px;
+          color: #1773c8;
+          line-height: 46px;
+          text-align: center;
+          border-radius: 23px;
+          user-select: none;
+        }
+
+        .logo-tab-normal {
+          height: 46px;
+          margin-right: 16px;
+          margin-left: 16px;
+          color: #333;
+          line-height: 46px;
+          text-align: center;
+          border-radius: 23px;
+          user-select: none;
+        }
+
+        .line {
+          width: 30px;
+          margin-bottom: 40px;
+          border-bottom: 3px solid #1773c8;
+        }
+      }
+
+      .logo-list {
+        margin-bottom: 40px;
+
+        .logo-list-img {
+          width: 100%;
+        }
+      }
+    }
+
+    .contact-container {
+      z-index: 2;
+      display: flex;
+
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+
+      .title {
+        flex: none;
+        flex-grow: 0;
+        order: 0;
+        height: 57px;
+        margin-top: 80px;
+
+        color: #252b42;
+        font-weight: 700;
+        font-size: 40px;
+
+        font-family: "Montserrat";
+        font-style: normal;
+        line-height: 57px;
+
+        letter-spacing: 0.2px;
+      }
+
+      .map {
+        width: 90%;
+        margin-top: 50px;
+        margin-bottom: 26px;
+      }
+
+      .contact {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        align-items: center;
+        width: 100%;
+        color: #333;
+        font-size: 16px;
+
+        .item {
+          display: flex;
+          flex-direction: row;
+          gap: 10px;
+          align-items: center;
+        }
+      }
+    }
+  }
+}

src/app/(home)/components/Contact/index.tsx

@@ -0,0 +1,93 @@
+"use client";
+import React, { useState } from "react";
+import styles from "./contact.module.css";
+
+const Contact: React.FC = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const logoTabData = [
+    {
+      title: "生产制造",
+      logoList: "/asset/logo1.png",
+    },
+    {
+      title: "IT通信",
+      logoList: "/asset/logo2.png",
+    },
+    {
+      title: "工程/地产/基础设施",
+      logoList: "/asset/logo3.png",
+    },
+    {
+      title: "消费品",
+      logoList: "/asset/logo4.png",
+    },
+    {
+      title: "金融/保险",
+      logoList: "/asset/logo5.png",
+    },
+    {
+      title: "医疗/医药",
+      logoList: "/asset/logo6.png",
+    },
+    {
+      title: "航空/物流",
+      logoList: "/asset/logo7.png",
+    },
+    {
+      title: "多元化集团",
+      logoList: "/asset/logo8.png",
+    },
+    {
+      title: "创新创业型公司",
+      logoList: "/asset/logo9.png",
+    },
+  ];
+
+  return (
+    <div className={styles.influence}>
+      <div className={styles["influence-container"]}>
+        <div className={styles.title}>高潜影响力</div>
+        <div className={styles["logo-tab-wrapper"]}>
+          {logoTabData.map((item, index) => {
+            return (
+              <div
+                key={index}
+                className={currentIndex == index ? styles["logo-tab-checked"] : styles["logo-tab-normal"]}
+                onClick={() => {
+                  setCurrentIndex(index);
+                }}
+              >
+                <div>{item.title}</div>
+                <div className={styles.line} hidden={currentIndex != index}></div>
+              </div>
+            );
+          })}
+        </div>
+        <div className={styles["logo-list"]}>
+          <img className={styles["logo-list-img"]} src={logoTabData[currentIndex].logoList} />
+        </div>
+      </div>
+      <a id={styles.contactUs} />
+      <div className={styles["contact-container"]}>
+        <div className={styles.title}>联系我们</div>
+        <div className={styles.contact}>
+          <div className={styles.item}>
+            <img src="/asset/ic_address.png" />
+            地址: 北京市朝阳区东三环富力双子座A座601
+          </div>
+          <div className={styles.item}>
+            <img src="/asset/ic_phone.png" />
+            联系电话: 李女士 13810542631
+          </div>
+          <div className={styles.item}>
+            <img src="/asset/ic_email.png" />
+            联系邮箱: hipo@hi-po.com.cn
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Contact;

src/app/(home)/components/Customer/customer.module.css

@@ -0,0 +1,509 @@
+.customer {
+  background: #f3f3f3;
+  width: 100%;
+  position: relative;
+
+  .customer-container {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+    padding: 80px 0px;
+    gap: 50px;
+
+    width: 1410px;
+    height: 658px;
+    left: calc(50% - 1410px / 2);
+    top: 0px;
+
+    .main-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 0px;
+      gap: 10px;
+
+      width: 864px;
+      height: 87px;
+
+      /* Inside auto layout */
+
+      flex: none;
+      order: 0;
+      flex-grow: 0;
+
+      .content1 {
+        height: 57px;
+
+        /* h2 */
+
+        font-family: "Montserrat";
+        font-style: normal;
+        font-weight: 700;
+        font-size: 40px;
+        line-height: 57px;
+        /* identical to box height, or 142% */
+
+        letter-spacing: 0.2px;
+
+        color: #252b42;
+
+        /* Inside auto layout */
+
+        flex: none;
+        order: 0;
+        flex-grow: 0;
+      }
+
+      .content2 {
+        width: 500px;
+        height: 20px;
+
+        /* paragraph */
+
+        font-family: "Montserrat";
+        font-style: normal;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        /* identical to box height, or 143% */
+
+        text-align: center;
+        letter-spacing: 0.2px;
+
+        color: #737373;
+
+        /* Inside auto layout */
+
+        flex: none;
+        order: 1;
+        flex-grow: 0;
+      }
+    }
+
+    .main-details {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-top: -40px;
+      padding: 0px;
+      gap: 30px;
+
+      width: 1120px;
+      height: 361px;
+
+      flex: none;
+      order: 1;
+      flex-grow: 0;
+
+      .content-nav-left {
+        width: 40px;
+        height: 40px;
+        font-size: 30px;
+        margin-left: 16px;
+        margin-right: 16px;
+        color: grey;
+        cursor: pointer;
+      }
+
+      .content-nav-right {
+        width: 40px;
+        height: 40px;
+        font-size: 30px;
+        margin-left: 16px;
+        margin-right: 16px;
+        color: grey;
+        cursor: pointer;
+      }
+
+      .swiper-wrapper {
+        width: 1000px;
+        height: 361px;
+
+        .col-md-5 {
+          /* Auto layout */
+
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: 0px;
+
+          width: 428px;
+          height: 361px;
+
+          /* Inside auto layout */
+
+          flex: none;
+          order: 1;
+          flex-grow: 0;
+
+          .card-item {
+            position: relative;
+            width: 390px;
+            height: 361px;
+
+            border-radius: 5px;
+
+            /* Inside auto layout */
+
+            flex: none;
+            order: 0;
+            flex-grow: 0;
+
+            .circle-box {
+              position: absolute;
+              width: 96px;
+              height: 96px;
+              left: 25px;
+              top: 68px;
+
+              border-radius: 48px;
+              z-index: 1;
+
+              .img {
+                width: 96px;
+                height: 96px;
+                border-radius: 48px;
+              }
+            }
+
+            .card-content {
+              /* Auto layout */
+
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
+              padding: 30px 60px;
+              gap: 15px;
+
+              position: absolute;
+              width: 300px;
+              height: 268px;
+              left: calc(50% - 309px / 2 + 33px);
+              top: 40px;
+
+              /* light-background-color */
+
+              .group {
+                width: 97px;
+                height: 56px;
+
+                /* Inside auto layout */
+
+                flex: none;
+                order: 0;
+                flex-grow: 0;
+
+                .card-content1 {
+                  position: absolute;
+                  width: 97px;
+                  height: 32px;
+                  left: 62px;
+                  top: 30px;
+
+                  /* h3 */
+
+                  font-family: "Montserrat";
+                  font-style: normal;
+                  font-weight: 700;
+                  font-size: 24px;
+                  line-height: 32px;
+                  /* identical to box height, or 133% */
+
+                  letter-spacing: 0.1px;
+
+                  /* text-color */
+
+                  color: #252b42;
+                }
+
+                .card-content2 {
+                  position: absolute;
+                  width: 350px;
+                  height: 24px;
+                  left: 62px;
+                  //left: calc(50% - 71px / 2 - 149px);
+                  top: 70px;
+
+                  /* h6 */
+
+                  font-family: "Montserrat";
+                  font-style: normal;
+                  font-weight: 600;
+                  font-size: 14px;
+                  line-height: 24px;
+                  /* identical to box height, or 171% */
+
+                  letter-spacing: 0.2px;
+
+                  /* second-text-color */
+
+                  color: #737373;
+                }
+              }
+
+              .grade {
+                width: 110.07px;
+                height: 22px;
+                /* Inside auto layout */
+
+                flex: none;
+                order: 1;
+                flex-grow: 0;
+              }
+
+              .card-content3 {
+                width: 300px;
+                height: 100px;
+
+                /* paragraph */
+
+                font-family: "Montserrat";
+                font-style: normal;
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 20px;
+                margin-left: 2px;
+                /* or 143% */
+
+                letter-spacing: 0.2px;
+
+                /* second-text-color */
+
+                color: #737373;
+
+                /* Inside auto layout */
+
+                flex: none;
+                order: 2;
+                flex-grow: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .customer {
+    background: #17213c;
+    position: relative;
+    height: 800px;
+    width: 100%;
+
+    .customer-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 80px 0px;
+      gap: 50px;
+
+      width: 100%;
+
+      .main-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 0px;
+        gap: 10px;
+
+        width: 100%;
+
+        flex: none;
+        order: 0;
+        flex-grow: 0;
+        background: #17213c;
+
+        .content1 {
+          width: 100%;
+          text-align: center;
+
+          font-family: "Montserrat";
+          font-style: normal;
+          font-weight: 700;
+          font-size: 40px;
+          line-height: 57px;
+
+          letter-spacing: 0.2px;
+
+          color: #fff;
+          flex: none;
+          order: 0;
+          flex-grow: 0;
+        }
+
+        .content2 {
+          width: 100%;
+          font-family: "Montserrat";
+          font-style: normal;
+          font-weight: 500;
+          font-size: 16px;
+          line-height: 20px;
+          padding-left: 50px;
+          padding-right: 50px;
+          height: 100px;
+          text-align: center;
+          letter-spacing: 0.2px;
+          color: #737373;
+        }
+      }
+
+      .main-details {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 0;
+        width: 100%;
+        margin-top: 0;
+        height: 480px;
+        background: #17213c;
+
+        .content-nav-left {
+          width: 0;
+          height: 0;
+          font-size: 0;
+          margin-left: 0;
+          margin-right: 0;
+        }
+
+        .content-nav-right {
+          width: 0;
+          height: 0;
+          font-size: 0;
+          margin-left: 0;
+          margin-right: 0;
+        }
+
+        .swiper-wrapper {
+          width: 100%;
+          height: 480px;
+          text-align: center;
+
+          .col-md-5 {
+            /* Auto layout */
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 0;
+            height: 480px;
+            margin: 0 auto;
+            width: 100%;
+
+            .card-item {
+              position: relative;
+              width: 100vw;
+              height: 480px;
+              background: #17213c;
+              border-radius: 0;
+
+              .circle-box {
+                position: absolute;
+                width: 96px;
+                height: 96px;
+                left: 22px;
+                top: 68px;
+                border-radius: 50px;
+                z-index: 1;
+              }
+
+              .card-content {
+                /* Auto layout */
+                width: 300px;
+                height: 480px;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 15px;
+                padding: 0;
+                position: absolute;
+                overflow: hidden;
+                left: calc(50vw - 300px / 2 + 16px);
+                top: 40px;
+                background: #fff;
+
+                .group {
+                  height: 56px;
+
+                  flex: none;
+                  order: 0;
+                  flex-grow: 0;
+
+                  .card-content1 {
+                    position: absolute;
+                    width: 240px;
+                    height: 32px;
+                    top: 30px;
+                    left: 80px;
+                    text-align: left;
+
+                    /* h3 */
+
+                    font-family: "Montserrat";
+                    font-style: normal;
+                    font-weight: 700;
+                    font-size: 24px;
+                    line-height: 32px;
+                    /* identical to box height, or 133% */
+
+                    letter-spacing: 0.1px;
+
+                    /* text-color */
+
+                    color: #252b42;
+                  }
+
+                  .card-content2 {
+                    position: absolute;
+                    width: 200px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    height: 24px;
+                    left: 80px;
+                    top: 66px;
+
+                    /* h6 */
+
+                    font-family: "Montserrat";
+                    font-style: normal;
+                    font-weight: 600;
+                    font-size: 14px;
+                    line-height: 24px;
+                    /* identical to box height, or 171% */
+
+                    letter-spacing: 0.2px;
+
+                    /* second-text-color */
+
+                    color: #737373;
+                  }
+                }
+
+                .card-content3 {
+                  margin-top: 25px;
+                  width: 200px;
+                  margin-left: 80px;
+                  font-family: "Montserrat";
+                  font-style: normal;
+                  font-weight: 500;
+                  font-size: 14px;
+                  line-height: 20px;
+                  letter-spacing: 0.2px;
+                  overflow: hidden;
+                  height: 350px;
+                  color: #737373;
+                  flex: none;
+                  order: 2;
+                  flex-grow: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/app/(home)/components/Customer/index.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Image from "next/image";
+import { isMobile } from "react-device-detect";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+// import "swiper/css/navigation";
+import { Navigation } from "swiper/modules";
+import { GoChevronLeft, GoChevronRight } from "react-icons/go";
+import styles from "./customer.module.css";
+import { fetchCustomers } from "@/lib/cms";
+
+export default function Services() {
+  const [swiper, setSwiper] = useState();
+  const [customerList, setCustomerList] = useState(null);
+
+  useEffect(() => {
+    fetchCustomers().then(({ data: list }) => {
+      setCustomerList(list);
+    });
+  }, []);
+
+  return (
+    <div className={styles.customer}>
+      <div className={styles["customer-container"]}>
+        <div className={styles["main-content"]}>
+          <div className={styles.content1}>客户声音</div>
+          <div className={styles.content2}>10余年来，高潜服务并长期陪伴了多家大型集团及中小型企业，他们如是说...</div>
+        </div>
+        <div className={styles["main-details"]}>
+          {/* <span
+            className={styles["turn-left"]}
+            onClick={() => {
+              console.log("prev");
+              swiper?.slidePrev();
+            }}
+          >
+            <GoChevronLeft />
+          </span> */}
+          <div className={styles["swiper-wrapper"]}>
+            <Swiper
+              spaceBetween={30}
+              initialSlide={0}
+              loop={true}
+              slidesPerGroup={isMobile ? 1 : 2}
+              slidesPerView={isMobile ? 1 : 2}
+              onSwiper={(swiper) => {
+                setSwiper(swiper);
+              }}
+            >
+              {customerList?.records?.map((item, index) => {
+                return (
+                  <SwiperSlide key={index}>
+                    <div className={styles["col-md-5"]}>
+                      <div className={styles["card-item"]}>
+                        <div className={styles["circle-box"]}>
+                          <Image alt="avatar" width={96} height={96} className={styles.img} src={item.avatar} />
+                        </div>
+                        <div className={styles["card-content"]}>
+                          <div className={styles.group}>
+                            <div className={styles["card-content1"]}>{item.name}</div>
+                            <div className={styles["card-content2"]}>{item.title}</div>
+                          </div>
+                          <div className={styles["card-content3"]}>{item.content}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </SwiperSlide>
+                );
+              })}
+            </Swiper>
+          </div>
+          <span
+            className={styles["content-nav-right"]}
+            onClick={() => {
+              swiper?.slideNext();
+            }}
+          >
+            <GoChevronRight />
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(home)/components/Services/index.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import Image from "next/image";
+import styles from "./services.module.css";
+import { fetchServiceProducts } from "@/lib/cms";
+
+export default async function Services() {
+  const { data: servicesList } = await fetchServiceProducts();
+
+  return (
+    <div className={styles.services}>
+      <div className={styles["services-container"]}>
+        <div className={styles["service-title"]}>
+          <div className={styles["title-content"]}>
+            <div className={styles.content1}>服务与产品</div>
+            <div className={styles.content2}>以战略为牵引，以组织、人才为支撑，助力实现卓越经营，打造幸福企业</div>
+          </div>
+        </div>
+        <div className={styles["service-details"]}>
+          <div className={styles.row}>
+            {servicesList?.records?.map((item, index) => {
+              return (
+                <div className={styles["col-md-4"]} key={index}>
+                  <a href={item.fileUrl}>
+                    <div className={styles["card-item"]}>
+                      <div className={styles["flex-row"]}>
+                        <Image alt="product-image" width={80} height={80} src={item.icon} className={styles.icon} />
+                        <div className={styles.content3}>{item.title}</div>
+                      </div>
+                      <div className={styles.content4}>{item.desc}</div>
+                    </div>
+                  </a>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(home)/components/Services/services.module.css

@@ -0,0 +1,396 @@
+.services {
+  background: #ffffff;
+
+  .services-container {
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 1050px;
+    padding: 100px 0px;
+
+    .service-title {
+      /* Auto layout */
+
+      display: flex;
+
+      /* Inside auto layout */
+
+      flex: none;
+      flex-direction: column;
+      flex-grow: 0;
+      align-items: center;
+      order: 0;
+      margin-top: 40px;
+
+      width: 1050px;
+      height: 177px;
+      padding: 45px 0px;
+
+      .title-content {
+        display: flex;
+
+        /* Inside auto layout */
+
+        flex: none;
+        flex-direction: column;
+        flex-grow: 0;
+        gap: 10px;
+        align-items: center;
+        order: 0;
+
+        width: 864px;
+        height: 87px;
+        padding: 0px;
+
+        .content1 {
+          /* Inside auto layout */
+
+          flex: none;
+          flex-grow: 0;
+          order: 0;
+          width: 201px;
+          height: 57px;
+
+          /* text-color */
+
+          color: #252b42;
+          font-weight: 700;
+          font-size: 40px;
+
+          /* h2 */
+
+          font-family: "Montserrat";
+          font-style: normal;
+          line-height: 57px;
+          /* identical to box height, or 142% */
+
+          letter-spacing: 0.2px;
+        }
+
+        .content2 {
+          /* Inside auto layout */
+
+          flex: none;
+          flex-grow: 0;
+          order: 1;
+          width: 696px;
+          height: 20px;
+
+          /* second-text-color */
+
+          color: #737373;
+          font-size: 14px;
+
+          /* paragraph */
+
+          font-family: "Montserrat";
+          font-style: normal;
+          line-height: 20px;
+          letter-spacing: 0.2px;
+          /* identical to box height, or 143% */
+
+          text-align: center;
+        }
+      }
+    }
+
+    .service-details {
+      /* Auto layout */
+
+      display: flex;
+
+      /* Inside auto layout */
+
+      flex: none;
+      flex-direction: column;
+      flex-grow: 0;
+      gap: 30px;
+      align-items: center;
+      order: 1;
+      width: 1210px;
+      padding: 0px;
+
+      .row {
+        /* Auto layout */
+
+        display: flex;
+
+        /* Inside auto layout */
+
+        flex: none;
+        flex-direction: row;
+        flex-grow: 0;
+        gap: 30px;
+        align-items: center;
+        order: 0;
+
+        width: 100%;
+        height: 320px;
+        padding: 0px;
+
+        .col-md-4 {
+          /* Auto layout */
+
+          display: flex;
+
+          /* Inside auto layout */
+
+          flex: none;
+          flex-direction: column;
+          flex-grow: 0;
+          align-items: flex-start;
+          order: 0;
+
+          width: 280px;
+          height: 320px;
+          padding: 0px;
+
+          .card-item {
+            /* Auto layout */
+
+            display: flex;
+
+            /* Inside auto layout */
+
+            flex: none;
+            flex-direction: column;
+            flex-grow: 0;
+            align-items: center;
+            order: 0;
+            box-sizing: border-box;
+
+            width: 280px;
+            height: 320px;
+            padding: 32px;
+
+            background: #ffffff;
+            box-shadow: 0 0 20px #ddd;
+            border-radius: 12px;
+
+            .icon {
+              flex: none;
+              flex-grow: 0;
+              order: 0;
+              width: 80px;
+              width: 80px;
+            }
+
+            .content3 {
+              /* Inside auto layout */
+
+              flex: none;
+              flex-grow: 0;
+              text-align: center;
+              order: 1;
+              height: 24px;
+
+              /* text-color */
+
+              color: #252b42;
+              font-weight: 700;
+              font-size: 16px;
+              margin-top: 22px;
+              margin-bottom: 26px;
+
+              /* h5 */
+
+              font-family: "Montserrat";
+              font-style: normal;
+              line-height: 24px;
+              /* identical to box height, or 150% */
+
+              letter-spacing: 0.1px;
+            }
+
+            .content4 {
+              /* Inside auto layout */
+
+              flex: none;
+              flex-grow: 0;
+              order: 1;
+
+              color: #737373;
+              font-weight: 500;
+              font-size: 14px;
+
+              font-family: "Montserrat";
+              font-style: normal;
+              line-height: 28px;
+              letter-spacing: 0.2px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .services {
+    position: relative;
+    width: 100%;
+    background: #ffffff;
+
+    .services-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      /* Auto layout */
+      width: 100%;
+      height: 1710px;
+      margin-top: 50px;
+      padding: 0 0;
+
+      .service-title {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        /* Auto layout */
+        width: 100%;
+        margin-top: 0px;
+
+        .title-content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          width: 100%;
+
+          .content1 {
+            width: 100%;
+            color: #252b42;
+            font-weight: 700;
+            font-size: 40px;
+            font-family: "Montserrat";
+            font-style: normal;
+            line-height: 57px;
+            letter-spacing: 0.2px;
+            text-align: center;
+          }
+
+          .content2 {
+            width: 100%;
+            padding-right: 54px;
+            padding-left: 54px;
+            color: #737373;
+            font-size: 16px;
+            font-family: "Montserrat";
+            font-style: normal;
+            line-height: 22px;
+            letter-spacing: 0.2px;
+            text-align: center;
+          }
+        }
+      }
+
+      .service-details {
+        /* Auto layout */
+        display: flex;
+        flex-direction: column;
+        gap: 30px;
+        align-items: center;
+        width: 100%;
+        margin-top: 80px;
+        padding: 0px;
+
+        .row {
+          /* Auto layout */
+
+          display: flex;
+          flex-direction: column;
+          gap: 30px;
+          align-items: center;
+          width: 100%;
+          height: 640px;
+          padding: 0px;
+
+          .col-md-4 {
+            /* Auto layout */
+
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            margin-right: 43px;
+            margin-left: 43px;
+            padding: 0px;
+
+            .card-item {
+              /* Auto layout */
+
+              display: flex;
+
+              /* Inside auto layout */
+
+              flex: none;
+              flex-direction: column;
+              flex-grow: 0;
+              align-items: center;
+              order: 0;
+              box-sizing: border-box;
+
+              width: 280px;
+              height: 320px;
+              padding: 32px;
+
+              background: #ffffff;
+              box-shadow: 0 0 20px #ddd;
+              border-radius: 12px;
+
+              .icon {
+                flex: none;
+                flex-grow: 0;
+                order: 0;
+                width: 80px;
+                width: 80px;
+              }
+
+              .content3 {
+                /* Inside auto layout */
+
+                flex: none;
+                flex-grow: 0;
+                text-align: center;
+                order: 1;
+                height: 24px;
+
+                /* text-color */
+
+                color: #252b42;
+                font-weight: 700;
+                font-size: 16px;
+                margin-top: 22px;
+                margin-bottom: 26px;
+
+                /* h5 */
+
+                font-family: "Montserrat";
+                font-style: normal;
+                line-height: 24px;
+                /* identical to box height, or 150% */
+
+                letter-spacing: 0.1px;
+              }
+
+              .content4 {
+                /* Inside auto layout */
+
+                flex: none;
+                flex-grow: 0;
+                order: 1;
+
+                color: #737373;
+                font-weight: 500;
+                font-size: 14px;
+
+                font-family: "Montserrat";
+                font-style: normal;
+                line-height: 28px;
+                letter-spacing: 0.2px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/app/(home)/components/Show/index.tsx

@@ -0,0 +1,106 @@
+"use client";
+import React, { useRef, useState, useEffect } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import SwiperCore, { Controller, EffectCoverflow, Navigation } from "swiper";
+SwiperCore.use([EffectCoverflow]);
+import "swiper/css";
+import "swiper/css/effect-coverflow";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import styles from "./show.module.css";
+import { fetchVideos } from "@/lib/cms";
+
+export default function Show() {
+  const [currentIndex, setCurrentIndex] = useState(2);
+  const [videoUrlList, setVideoUrlList] = useState(null);
+  useEffect(() => {
+    fetchVideos().then(({ data: list }) => {
+      console.log(list);
+      setCurrentIndex(list.total - 1);
+      setVideoUrlList(list);
+    });
+  }, []);
+
+  const videosRef = useRef([]);
+  const [swiper, setSwiper] = useState<Swiper>();
+  const pauseOtherVideos = () => {
+    const video = document.getElementsByClassName("video");
+    const elementsArray = Array.from(video);
+    if (elementsArray) {
+      elementsArray.forEach((element) => {
+        element.pause();
+      });
+    }
+  };
+
+  const handleVideoRef = (video: any, index: number) => {
+    videosRef.current[index] = video;
+  };
+
+  return (
+    <div className={styles["company-show"]}>
+      <div className={styles["show-container"]}>
+        <div className={styles["show-content"]}>
+          <div className={styles["show-title"]}>走近高潜</div>
+        </div>
+        <div className={styles["video-wrapper"]}>
+          <LeftOutlined
+            className={styles["video-nav"]}
+            onClick={() => {
+              swiper?.slidePrev();
+            }}
+          />
+
+          <div className={styles["show-videos"]}>
+            <Swiper
+              effect={"coverflow"}
+              loop={true}
+              coverflowEffect={{
+                rotate: 0,
+                stretch: 0,
+                depth: 100,
+                modifier: 1,
+                slideShadows: false,
+              }}
+              initialSlide={1}
+              slidesPerView={1.5}
+              centeredSlides={true}
+              onSlideChange={(swiper) => {
+                setCurrentIndex(swiper.realIndex);
+                pauseOtherVideos();
+              }}
+              onSwiper={(swiper) => {
+                setSwiper(swiper);
+              }}
+            >
+              {videoUrlList?.records
+                ?.sort((b, c) => {
+                  return Date.parse(b.createTime) - Date.parse(c.createTime);
+                })
+                .map((item, index) => {
+                  return (
+                    <SwiperSlide key={index}>
+                      <video
+                        ref={(video) => handleVideoRef(video, index)}
+                        className={styles.video}
+                        src={item.url}
+                        controls={currentIndex == index}
+                        poster={`${item.url}?x-oss-process=video/snapshot,t_5000,m_fast`}
+                        autoPlay={false}
+                      ></video>
+                    </SwiperSlide>
+                  );
+                })}
+            </Swiper>
+          </div>
+          <RightOutlined
+            className={styles["video-nav"]}
+            onClick={() => {
+              swiper?.slideNext();
+            }}
+          />
+        </div>
+      </div>
+      <div className={styles["show-background"]}></div>
+    </div>
+  );
+}

src/app/(home)/components/Show/show.module.css

@@ -0,0 +1,224 @@
+.company-show {
+  position: relative;
+  width: 100%;
+  text-align: center;
+  background: #f3f3f3;
+
+  .show-container {
+    position: relative;
+    top: 0;
+    z-index: 2;
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+    align-items: center;
+    width: 1050px;
+    height: 400px;
+    margin: 0 auto;
+    padding: 80px 0;
+
+    .show-content {
+      /* Auto layout */
+      display: flex;
+
+      /* Inside auto layout */
+
+      flex: none;
+      flex-direction: column;
+      flex-grow: 0;
+      align-items: center;
+      order: 0;
+      width: 864px;
+      height: 87px;
+      padding: 0;
+
+      .show-title {
+        /* Inside auto layout */
+
+        flex: none;
+        flex-grow: 0;
+        order: 0;
+        height: 57px;
+        color: #252b42;
+        font-weight: 700;
+        font-size: 40px;
+        font-family: "Montserrat";
+        font-style: normal;
+        line-height: 57px;
+        letter-spacing: 0.2px;
+      }
+
+      .show-description {
+        /* Inside auto layout */
+
+        flex: none;
+        flex-grow: 0;
+        order: 1;
+        width: 625px;
+        height: 20px;
+
+        /* second-text-color */
+
+        color: #737373;
+        font-weight: 500;
+        font-size: 14px;
+
+        /* paragraph */
+
+        font-family: "Montserrat";
+        font-style: normal;
+        line-height: 20px;
+        letter-spacing: 0.2px;
+
+        /* identical to box height, or 143% */
+
+        text-align: center;
+      }
+    }
+
+    .video-wrapper {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .video-nav {
+      width: 28px;
+      height: 28px;
+      margin-right: 16px;
+      margin-left: 16px;
+      color: #252b42;
+      font-size: 28px;
+    }
+
+    .show-videos {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      width: 1150px;
+      height: 450px;
+
+      /* light background */
+
+      border-radius: 5px;
+
+      /* Inside auto layout */
+
+      .video {
+        width: 800px;
+        height: 450px;
+      }
+    }
+  }
+
+  .show-background {
+    position: absolute;
+    top: 400px;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 350px;
+    background: #f3f3f3;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .company-show {
+    width: 100%;
+    height: 500px;
+    text-align: center;
+    background: #f3f3f3;
+
+    .show-background {
+      position: static;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 350px;
+      background: #f3f3f3;
+    }
+
+    .show-container {
+      position: relative;
+      top: 0;
+      z-index: 2;
+      /* Auto layout */
+      display: flex;
+      flex-direction: column;
+      gap: 0px;
+      align-items: center;
+      width: 100%;
+      height: 200px;
+      margin: 0 auto;
+      padding: 30px 0;
+
+      .show-content {
+        /* Auto layout */
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        height: 200px;
+        padding: 0;
+
+        .show-title {
+          width: 100%;
+          margin-top: 50px;
+          font-weight: 700;
+          font-size: 40px;
+          font-family: "Montserrat";
+          font-style: normal;
+          line-height: 57px;
+          letter-spacing: 0.2px;
+          background: #f3f3f3;
+        }
+
+        .show-description {
+          width: 100%;
+          height: 20px;
+          margin-top: 20px;
+          padding-right: 50px;
+          padding-left: 50px;
+          color: #737373;
+          font-weight: 500;
+          font-size: 16px;
+          font-family: "Montserrat";
+          font-style: normal;
+          line-height: 20px;
+          letter-spacing: 0.2px;
+          text-align: center;
+        }
+      }
+
+      .video-wrapper {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+      }
+
+      .video-nav {
+        width: 0;
+        height: 0;
+        margin-right: 0;
+        margin-left: 0;
+        font-size: 0;
+      }
+
+      .show-videos {
+        box-sizing: border-box;
+        width: 100%;
+        height: 145px;
+
+        .video {
+          width: 100%;
+          height: 145px;
+        }
+      }
+    }
+  }
+}

src/app/(home)/page.module.css

@@ -0,0 +1,5 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

src/app/(home)/page.tsx

@@ -0,0 +1,35 @@
+import styles from "./page.module.css";
+import Nav from "@/components/Header";
+import Footer from "@/components/Footer";
+import Services from "./components/Services";
+import Customer from "./components/Customer";
+import Consultant from "./components/Consultant";
+import Contact from "./components/Contact";
+import Show from "./components/Show";
+
+export default function Home() {
+  return (
+    <>
+      <div className={styles.main}>
+        <Nav />
+        <Services />
+        <Customer />
+        <Consultant />
+        <Contact />
+        <Show />
+        {/* <a id="home" />
+
+        <Services />
+        <Customer />
+        <Consultant />
+        <Contact />
+        <Show />
+        <Footer /> */}
+        <Footer />
+      </div>
+    </>
+    // <div className={styles.page}>
+
+    // </div>
+  );
+}

src/app/(laws)/agreement/agreement.module.css

@@ -0,0 +1,79 @@
+/*
+  ul {
+    margin: 0;
+    padding: 0;
+    outline: none;
+  }
+
+  li {
+    margin: 0;
+    padding: 0;
+    outline: none;
+  }
+
+  p {
+    margin: 0;
+    padding: 0;
+    outline: none;
+  }
+*/
+
+.article {
+  margin: 50px auto;
+}
+
+.article-bt {
+  text-align: center;
+  font-size: 26px;
+  font-weight: bold;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 30px;
+}
+
+.article-bt span {
+  display: block;
+  font-size: 14px;
+  color: #777;
+  font-weight: 200;
+}
+
+.article-nr {
+  line-height: 38px;
+  font-size: 16px;
+  margin: 30px auto 0;
+}
+
+.article-nr img {
+  width: auto;
+  max-width: 80%;
+  margin: 10px auto;
+  display: block;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  min-height: 100%;
+  width: 1200px;
+  margin: 0 auto;
+  padding-top: 60px;
+}
+
+.container p {
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+
+@media screen and (max-width: 767px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    min-height: 100%;
+    width: 90%;
+    margin: 0 auto;
+    padding-top: 60px;
+  }
+}

src/app/(laws)/agreement/page.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+import styles from "./agreement.module.css";
+
+const Agreement: React.FC = () => {
+  return (
+    <>
+      <div className={styles.container}>
+        <div className={styles["article-bt"]}>
+          用户协议<span>发布日期：2022-08-30 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 作者：高潜（北京）咨询有限公司</span>
+        </div>
+        <div className={styles["article-nr"]}>
+          <div id={styles.container}>
+            <h1>用户协议</h1>
+            <p>
+              <i>高潜（北京）咨询有限公司</i>（以下简称”我们“）依据本协议为用户（以下简称“你”）提供
+              <i>HIPO-高潜咨询官网</i>服务。本协议对你和我们均具有法律约束力。
+            </p>
+            <h4>一、本服务的功能</h4>
+            <p>你可以使用本服务提供的全部功能。</p>
+            <h4>二、责任范围及限制</h4>
+            <p>你使用本服务得到的结果仅供参考，实际情况以官方为准。</p>
+            <h4>三、隐私保护</h4>
+            <p>我们重视对你隐私的保护，你的个人隐私信息将根据《隐私政策》受到保护与规范，详情请参阅《隐私政策》。</p>
+            <h4>四、其他条款</h4>
+            <p>4.1 本协议所有条款的标题仅为阅读方便，本身并无实际涵义，不能作为本协议涵义解释的依据。</p>
+            <p>4.2 本协议条款无论因何种原因部分无效或不可执行，其余条款仍有效，对双方具有约束力。</p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+export default Agreement;

src/app/(laws)/privacy/privacy.module.css

@@ -0,0 +1,71 @@
+.article {
+  margin: 50px auto;
+}
+
+.article-bt {
+  text-align: center;
+  font-size: 26px;
+  font-weight: bold;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 30px;
+}
+
+.article-bt span {
+  display: block;
+  font-size: 14px;
+  color: #777;
+  font-weight: 200;
+}
+
+.article-nr {
+  line-height: 38px;
+  font-size: 16px;
+  margin: 30px auto 0;
+}
+
+.article-nr img {
+  width: auto;
+  max-width: 80%;
+  margin: 10px auto;
+  display: block;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  min-height: 100%;
+  width: 1200px;
+  margin: 0 auto;
+  padding-top: 60px;
+}
+
+.container ul {
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+
+.container li {
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+
+.container p {
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+
+@media screen and (max-width: 767px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    min-height: 100%;
+    width: 90%;
+    margin: 0 auto;
+    padding-top: 60px;
+  }
+}

src/app/about/about.module.css

@@ -0,0 +1,214 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: white;
+
+  .content {
+    margin-top: 50px;
+    width: 1160px;
+    text-align: left;
+    font-weight: 600;
+
+    .topContent {
+      display: flex;
+      flex-direction: row;
+
+      .topContentLeft {
+        width: 648px;
+
+        .aboutEn {
+          font-size: 22px;
+          color: #666;
+        }
+
+        .aboutCn {
+          color: #333;
+          font-size: 28px;
+        }
+
+        .line {
+          height: 5px;
+          width: 54px;
+          margin-top: 6px;
+          background: #1773c8;
+          margin-left: 56px;
+        }
+
+        .textWrapper {
+          color: #333;
+          font-size: 16px;
+          line-height: 26px;
+          margin-top: 30px;
+          margin-right: 80px;
+          font-weight: 400;
+
+          .text {
+            margin-top: 12px;
+          }
+        }
+      }
+
+      .topContentRight {
+        width: 512px;
+        height: 348px;
+        object-fit: fill;
+      }
+    }
+
+    .bottomContent {
+      border: #eee 1px solid;
+      margin-top: 50px;
+      padding-top: 36px;
+      padding-bottom: 36px;
+
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .line {
+        width: 1px;
+        background: #eee;
+        height: 110px;
+      }
+
+      .item {
+        flex: 1;
+        padding-left: 30px;
+        padding-right: 30px;
+        text-align: center;
+
+        .icon {
+          width: 44px;
+        }
+
+        .title {
+          margin-top: 12px;
+          margin-bottom: 10px;
+          color: #333;
+          font-size: 15px;
+          font-weight: 500;
+        }
+
+        .text {
+          text-align: left;
+          color: #666;
+          font-size: 14px;
+          line-height: 26px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: white;
+
+    .content {
+      margin-top: 100px;
+      width: 100%;
+      text-align: left;
+
+      .topContent {
+        display: flex;
+        flex-direction: row;
+        margin-left: 32px;
+        margin-right: 32px;
+
+        .topContentLeft {
+          width: 100%;
+
+          .aboutEn {
+            font-size: 22px;
+            color: #666;
+          }
+
+          .aboutCn {
+            color: #333;
+            font-size: 28px;
+          }
+
+          .line {
+            height: 5px;
+            width: 54px;
+            margin-top: 6px;
+            background: #1773c8;
+            margin-left: 56px;
+          }
+
+          .textWrapper {
+            color: #333;
+            font-size: 16px;
+            line-height: 26px;
+            margin-top: 30px;
+            margin-right: 0px;
+            margin-left: 0px;
+            font-weight: 400;
+
+            .text {
+              margin-top: 12px;
+            }
+          }
+        }
+
+        .topContentRight {
+          width: 0px;
+          height: 0px;
+          object-fit: fill;
+        }
+      }
+
+      .bottomContent {
+        border: #eee 1px solid;
+        margin-left: 32px;
+        margin-right: 32px;
+        margin-top: 50px;
+        padding-top: 36px;
+        padding-bottom: 36px;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 32px;
+
+        .line {
+          width: 0;
+          background: #eee;
+          height: 0;
+        }
+
+        .item {
+          flex: 1;
+          padding-left: 30px;
+          padding-right: 30px;
+          text-align: center;
+
+          .icon {
+            width: 44px;
+          }
+
+          .title {
+            margin-top: 12px;
+            margin-bottom: 10px;
+            color: #333;
+            font-size: 15px;
+            font-weight: 500;
+          }
+
+          .text {
+            text-align: left;
+            color: #666;
+            font-size: 14px;
+            line-height: 26px;
+            font-weight: 400;
+          }
+        }
+      }
+    }
+  }
+}

src/app/about/page.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import Image from "next/image";
+import Nav from "@/components/Nav";
+import Footer from "@/components/Footer";
+import styles from "./about.module.css";
+import about from "./asset/about.png";
+import aboutIcon1 from "./asset/about_icon1.png";
+import aboutIcon2 from "./asset/about_icon2.png";
+import aboutIcon3 from "./asset/about_icon3.png";
+import aboutIcon4 from "./asset/about_icon4.png";
+
+const AboutDetail: React.FC = () => {
+  return (
+    <>
+      <div className={styles.container}>
+        <Nav title={"关于我们"} />
+        <div className={styles.content}>
+          <div className={styles.topContent}>
+            <div className={styles.topContentLeft}>
+              <div className={styles.aboutEn}>ABOUT US</div>
+              <div className={styles.aboutCn}>关于我们</div>
+              <div className={styles.line}></div>
+              <div className={styles.textWrapper}>
+                <div className={styles.text}>高潜（北京）咨询有限公司于2012年在北京成立</div>
+                <div className={styles.text}>
+                  公司拥有数十位专家顾问，以助力中国高潜力企业快速发展为己任，提供从战略形成到战略落地的一揽子解决方案，通过战略管理、业务运营、组织建设、人才文化的有机连接，助力企业战略有效落地。
+                </div>
+                <div className={styles.text}>
+                  拥有成熟的理论基础、丰富的实践案例、强大的定制解决能力。通过专注、极致、高效的服务，获得客户的一致认可。
+                </div>
+                <div className={styles.text}>是中国优秀咨询公司的杰出代表，拥有全球视野、本土实践。</div>
+              </div>
+            </div>
+            <div className={styles.topContentRight}>
+              <Image alt="right" width={512} height={348} src={about} />
+            </div>
+          </div>
+          <div className={styles.bottomContent}>
+            <div className={styles.item}>
+              <Image alt="icon" width={44} src={aboutIcon1} />
+              <div className={styles.title}>中西合璧，本土实践</div>
+              <div className={styles.text}>
+                兼具国际顶尖咨询公司顾问经验，及知名领先企业核心高管或管理专家经历，重视理论与实践相结合。
+              </div>
+            </div>
+            <div className={styles.line}></div>
+            <div className={styles.item}>
+              <Image alt="icon" width={44} src={aboutIcon2} />
+              <div className={styles.title}>定制方案，个性服务</div>
+              <div className={styles.text}>
+                为企业量身定制解决方案，提供端到端的服务，注重上下衔接、左右协同，以解决实际问题为己任。
+              </div>
+            </div>
+            <div className={styles.line}></div>
+            <div className={styles.item}>
+              <Image alt="icon" width={44} src={aboutIcon3} />
+              <div className={styles.title}>长期陪伴，忠于客户</div>
+              <div className={styles.text}>
+                极度关注客户口碑，保持长期合作关系，助力企业持久发展;顾问热爱咨询行业，稳定性高，客户互动频繁。
+              </div>
+            </div>
+            <div className={styles.line}></div>
+            <div className={styles.item}>
+              <Image alt="icon" width={44} src={aboutIcon4} />
+              <div className={styles.title}>赋能客户，共同成长</div>
+              <div className={styles.text}>
+                咨询过程中帮助客户发现人才、培养人才，通过与客户方团队共创的方式，相互汲取能量，激发创新活力。
+              </div>
+            </div>
+          </div>
+        </div>
+        <Footer />
+      </div>
+    </>
+  );
+};
+export default AboutDetail;

src/app/articleDetail/[slug]/articleDetail.module.css

@@ -0,0 +1,98 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: white;
+
+  .content {
+    margin-top: 30px;
+    width: 1160px;
+    text-align: left;
+    font-weight: 600;
+
+    .breadcrumb-item {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      color: rgba(0, 0, 0, 0.45);
+      font-variant: tabular-nums;
+      line-height: 1.5715;
+      list-style: none;
+      font-size: 14px;
+
+      .breadcrumb-last {
+        color: #1773c8;
+      }
+    }
+
+    .breadcrumb-seperator {
+      box-sizing: border-box;
+      margin-left: 10px;
+      margin-right: 10px;
+      padding: 0;
+      color: rgba(0, 0, 0, 0.45);
+      font-variant: tabular-nums;
+      line-height: 1.5715;
+      list-style: none;
+      font-size: 14px;
+    }
+
+    .title {
+      font-size: 20px;
+      color: #333;
+      margin-top: 30px;
+    }
+
+    .author {
+      font-size: 14px;
+      color: #999;
+      margin-top: 12px;
+    }
+
+    .line {
+      height: 1px;
+      width: 100%;
+      background-color: #eee;
+      margin-top: 12px;
+      margin-bottom: 24px;
+    }
+
+    .digest {
+      background: #f0f0f0;
+      padding: 16px;
+      border-radius: 8px;
+      margin-top: 12px;
+      color: #888;
+      line-height: 24px;
+    }
+
+    .articleContent {
+      color: #666;
+    }
+
+    .articleContent img {
+      display: block;
+      max-width: 60%;
+      margin: 0 auto;
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: white;
+
+    .content {
+      margin-top: 100px;
+      width: 90%;
+
+      .articleContent img {
+        width: 100%;
+        max-width: 100%;
+      }
+    }
+  }
+}

src/app/articleDetail/[slug]/page.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import Nav from "@/components/Nav";
+import Footer from "@/components/Footer";
+import styles from "./articleDetail.module.css";
+import { fetchArticleDetail } from "@/lib/cms";
+
+export default async function ArticleDetail({ params }: { params: { slug: string } }) {
+  let articleId = params.slug.replace(".html", "");
+  const { data: info } = await fetchArticleDetail(parseInt(articleId as string));
+
+  const getTitle = () => {
+    if (info?.type == 1) {
+      return "经典案例";
+    } else if (info?.type == 2) {
+      return "行业咨询";
+    } else if (info?.type == 3) {
+      return "服务产品";
+    } else {
+      return "文章列表";
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.container}>
+        <Nav title={getTitle()} />
+        <div className={styles.content}>
+          <div>
+            <span className={styles["breadcrumb-item"]}>
+              <a href="/home">首页</a>
+            </span>
+            <span className={styles["breadcrumb-seperator"]}>/</span>
+            <span className={styles["breadcrumb-item"]}>
+              <a href="/caseList">{getTitle()}</a>
+            </span>
+            <span className={styles["breadcrumb-seperator"]}>/</span>
+            <span className={styles["breadcrumb-item"]}>
+              <span className={styles["breadcrumb-last"]}>{info?.title}</span>
+            </span>
+          </div>
+          <div className={styles.title}>{info?.title}</div>
+          <div className={styles.author}>
+            {info?.author} {info?.createTime}
+          </div>
+          <div className={styles.line}></div>
+          <div className={styles.articleContent} dangerouslySetInnerHTML={{ __html: info?.content }}></div>
+        </div>
+        <Footer />
+      </div>
+    </>
+  );
+}

src/app/caseList/caseList.module.css

@@ -0,0 +1,113 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: white;
+
+  .content {
+    margin-top: 20px;
+
+    .articleTitle {
+      font-size: 18px;
+      color: #333333;
+      font-weight: 600;
+    }
+
+    .articleContent {
+      font-size: 16px;
+      line-height: 30px;
+      margin-top: 12px;
+      color: #555555;
+      text-align: justify;
+    }
+
+    .articleList {
+      width: 1160px;
+      margin-top: 40px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 20px;
+
+      .articleItem {
+        display: flex;
+        flex-direction: row;
+        border-radius: 4px;
+        overflow: hidden;
+
+        .articleText {
+          padding: 24px;
+          background: white;
+          height: 220px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        .articleImg {
+          width: 315px;
+          height: 212px;
+          margin-right: 20px;
+          object-fit: cover;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: white;
+
+    .content {
+      margin-top: 50px;
+
+      .articleTitle {
+        font-size: 18px;
+        color: #333333;
+        font-weight: 600;
+      }
+
+      .articleContent {
+        font-size: 16px;
+        line-height: 30px;
+        margin-top: 12px;
+        color: #555555;
+        text-align: justify;
+      }
+
+      .articleList {
+        width: 90%;
+        margin-top: 40px;
+        display: flex;
+        margin-left: 5%;
+        flex-direction: column;
+        align-items: center;
+        flex-grow: 1;
+        background: #ffffff;
+
+        .articleItem {
+          display: flex;
+          flex-direction: column;
+          border: #eeeeee 1px solid;
+          border-radius: 4px;
+
+          .articleText {
+            padding: 20px;
+            background: white;
+            height: 310px;
+          }
+
+          .articleImg {
+            width: 100%;
+            height: 220px;
+            object-fit: cover;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+}

src/app/caseList/page.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import Nav from "@/components/Nav";
+import Footer from "@/components/Footer";
+import styles from "./caseList.module.css";
+import { fetchArticleList } from "@/lib/cms";
+
+export default async function CaseList() {
+  const { data: list } = await fetchArticleList(1, 1, 100);
+  return (
+    <>
+      <div className={styles.container}>
+        <Nav title={"经典案例"} />
+        <div className={styles.content}>
+          <div className={styles.articleList}>
+            {list?.records?.map((item, index) => {
+              return (
+                <a href={`/articleDetail/${item.id}.html`}>
+                  <div className={styles.articleItem}>
+                    <img className={styles.articleImg} src={item?.cover} />
+
+                    <div className={styles.articleText}>
+                      <div className={styles.articleTitle}>{item?.title}</div>
+                      <div className={styles.articleContent}>{item?.digest}</div>
+                    </div>
+                  </div>
+                </a>
+              );
+            })}
+          </div>
+        </div>
+        <Footer />
+      </div>
+    </>
+  );
+}

src/app/contact/contact.module.css

@@ -0,0 +1,131 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: white;
+
+  .title {
+    font-size: 24px;
+    color: #333;
+    margin-top: 50px;
+  }
+
+  .subTitle {
+    font-size: 16px;
+    color: #999;
+    margin-top: 12px;
+  }
+
+  .form {
+    width: 700px;
+    margin-top: 52px;
+
+    .formItemInput {
+      box-sizing: border-box;
+      height: 40px;
+      top: -2px;
+      font-size: 16px;
+      border: 1px solid #bdbdbd;
+      border-radius: 4px;
+    }
+
+    .formItemInputArea {
+      box-sizing: border-box;
+      height: 124px;
+      padding: 8px;
+      font-size: 16px;
+      top: -2px;
+      border: 1px solid #bdbdbd;
+      border-radius: 4px;
+    }
+
+    .formItemLabel {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+    }
+
+    .submit {
+      width: 125px;
+      height: 46px;
+      border-radius: 23px;
+      color: white;
+      background: #1773c8;
+      margin-left: 84px;
+      text-align: center;
+      line-height: 46px;
+      font-size: 18px;
+    }
+
+    .submit:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: white;
+
+    .title {
+      font-size: 24px;
+      color: #333;
+      margin-top: 90px;
+    }
+
+    .subTitle {
+      font-size: 16px;
+      color: #999;
+      margin-top: 12px;
+    }
+
+    .form {
+      width: 90%;
+      margin-top: 52px;
+
+      .formItemInput {
+        box-sizing: border-box;
+        height: 40px;
+        top: -2px;
+        font-size: 16px;
+        border: 1px solid #bdbdbd;
+        border-radius: 4px;
+      }
+
+      .formItemInputArea {
+        box-sizing: border-box;
+        height: 124px;
+        padding: 8px;
+        font-size: 16px;
+        top: -2px;
+        border: 1px solid #bdbdbd;
+        border-radius: 4px;
+      }
+
+      .formItemLabel {
+        font-size: 16px;
+        font-weight: bold;
+        color: #333;
+      }
+
+      .submit {
+        width: 125px;
+        height: 46px;
+        border-radius: 23px;
+        color: white;
+        background: #1773c8;
+        text-align: center;
+        margin-left: calc(50% - 62px);
+        line-height: 46px;
+        font-size: 18px;
+      }
+
+      .submit:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}

src/app/contact/page.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import React, { useState, useRef } from "react";
+import Nav from "@/components/Nav";
+import Footer from "@/components/Footer";
+import styles from "./contact.module.css";
+import { addContact } from "@/lib/contact";
+import { ProForm, ProFormInstance } from "@ant-design/pro-components";
+import { Form, Input, message, Modal } from "antd";
+
+const Contact: React.FC = () => {
+  const formRef = useRef<ProFormInstance>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
+  const formItemLayout = {
+    labelCol: { span: 3 },
+    wrapperCol: { span: 21 },
+  };
+
+  const { TextArea } = Input;
+
+  return (
+    <div className={styles.container}>
+      <Nav title={"联系我们"} />
+      <div className={styles.title}>与咨询顾问沟通</div>
+      <div className={styles.subTitle}>我们如何帮助您的组织，填写表格以联系顾问</div>
+      <ProForm
+        formRef={formRef}
+        className={styles.form}
+        layout={"horizontal"}
+        {...formItemLayout}
+        submitter={{
+          render: (props, doms) => {
+            return <></>;
+          },
+        }}
+        onFinish={async (values) => {
+          addContact({ ...values }).then((response) => {
+            if (response.code == 200) {
+              showModal();
+              formRef?.current?.resetFields();
+            }
+          });
+        }}
+      >
+        <Form.Item
+          label={<span className={styles.formItemLabel}>姓名</span>}
+          name="name"
+          rules={[{ required: true, message: "请输入姓名" }, { max: 20 }]}
+        >
+          <Input className={styles.formItemInput} placeholder="请输入姓名" />
+        </Form.Item>
+
+        <Form.Item
+          label={<span className={styles.formItemLabel}>公司邮箱</span>}
+          name="email"
+          rules={[
+            {
+              required: true,
+              message: "请输入公司邮箱",
+            },
+            { max: 100 },
+            {
+              pattern: /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/,
+              message: "邮箱格式错误",
+            },
+          ]}
+        >
+          <Input className={styles.formItemInput} placeholder="请输入公司邮箱" />
+        </Form.Item>
+        <Form.Item
+          label={<span className={styles.formItemLabel}>公司名称</span>}
+          name="company"
+          rules={[{ required: true, message: "请输入公司名称" }, { max: 100 }]}
+        >
+          <Input className={styles.formItemInput} placeholder="请输入公司名称" />
+        </Form.Item>
+
+        <Form.Item
+          label={<span className={styles.formItemLabel}>职位</span>}
+          name="position"
+          rules={[{ required: true, message: "请输入职位" }, { max: 20 }]}
+        >
+          <Input className={styles.formItemInput} placeholder="请输入职位" />
+        </Form.Item>
+
+        <Form.Item
+          label={<span className={styles.formItemLabel}>电话号码</span>}
+          name="phone"
+          rules={[{ required: true, message: "请输入电话号码" }, { max: 20 }]}
+        >
+          <Input className={styles.formItemInput} placeholder="请输入电话号码" />
+        </Form.Item>
+
+        <Form.Item
+          label={<span className={styles.formItemLabel}>地区</span>}
+          name="erea"
+          rules={[{ required: true, message: "请输入地区" }, { max: 20 }]}
+        >
+          <Input className={styles.formItemInput} placeholder="请输入地区" />
+        </Form.Item>
+
+        <Form.Item
+          label={<span className={styles.formItemLabel}>城市</span>}
+          name="city"
+          rules={[{ required: true, message: "请输入城市" }, { max: 20 }]}
+        >
+          <Input className={styles.formItemInput} placeholder="请输入城市" />
+        </Form.Item>
+
+        <Form.Item
+          label={<span className={styles.formItemLabel}>需求</span>}
+          name="userRemark"
+          rules={[{ required: true, message: "请输入需求" }, { max: 255 }]}
+        >
+          <TextArea className={styles.formItemInputArea} placeholder="请输入需求" />
+        </Form.Item>
+
+        <div
+          className={styles.submit}
+          onClick={() => {
+            formRef.current?.submit();
+          }}
+        >
+          提交
+        </div>
+      </ProForm>
+      <Modal title="提交成功" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}></Modal>
+      <Footer />
+    </div>
+  );
+};
+export default Contact;

src/app/globals.css

@@ -1,4 +1,4 @@
-:root {
+/* :root {
   --background: #ffffff;
   --foreground: #171717;
 }
@@ -8,17 +8,18 @@
     --background: #0a0a0a;
     --foreground: #ededed;
   }
-}
+} */
 
 html,
 body {
   max-width: 100vw;
-  overflow-x: hidden;
 }
 
 body {
-  color: var(--foreground);
-  background: var(--background);
+  /* color: var(--foreground);
+  background: var(--background); */
+  font-size: 14px;
+  line-height: 1.5715;
   font-family: Arial, Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -35,8 +36,13 @@ a {
   text-decoration: none;
 }
 
-@media (prefers-color-scheme: dark) {
+p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+/* @media (prefers-color-scheme: dark) {
   html {
     color-scheme: dark;
   }
-}
+} */

src/app/layout.tsx

@@ -1,21 +1,34 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
+// import localFont from "next/font/local";
 import "./globals.css";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
+// const geistSans = localFont({
+//   src: "./fonts/GeistVF.woff",
+//   variable: "--font-geist-sans",
+//   weight: "100 900",
+// });
+// const geistMono = localFont({
+//   src: "./fonts/GeistMonoVF.woff",
+//   variable: "--font-geist-mono",
+//   weight: "100 900",
+// });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "高潜咨询-战略闭环管理-公司战略咨询-助力中国高潜企业加速发展",
+  description:
+    "高潜咨询-提供战略解码,战略咨询,战略闭环管理,战略研讨会,战略澄清会,战略解码引导,高潜组织解码,RIDER模型,胜任力模型,战略有效性调研服务,助力中国高潜企业加速发展",
+  keywords: [
+    "战略解码",
+    "战略咨询",
+    "战略闭环管理",
+    "战略研讨会",
+    "战略澄清会",
+    "战略解码引导",
+    "高潜组织解码",
+    "RIDER模型",
+    "胜任力模型",
+    "战略有效性调研",
+  ],
 };
 
 export default function RootLayout({
@@ -25,9 +38,8 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        {children}
-      </body>
+      {/* <body className={`${geistSans.variable} ${geistMono.variable}`}>{children}</body> */}
+      <body>{children}</body>
     </html>
   );
 }

src/app/page.module.css

@@ -1,168 +0,0 @@
-.page {
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
-
-  display: grid;
-  grid-template-rows: 20px 1fr 20px;
-  align-items: center;
-  justify-items: center;
-  min-height: 100svh;
-  padding: 80px;
-  gap: 64px;
-  font-family: var(--font-geist-sans);
-}
-
-@media (prefers-color-scheme: dark) {
-  .page {
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
-  }
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-  grid-row-start: 2;
-}
-
-.main ol {
-  font-family: var(--font-geist-mono);
-  padding-left: 0;
-  margin: 0;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: -0.01em;
-  list-style-position: inside;
-}
-
-.main li:not(:last-of-type) {
-  margin-bottom: 8px;
-}
-
-.main code {
-  font-family: inherit;
-  background: var(--gray-alpha-100);
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-weight: 600;
-}
-
-.ctas {
-  display: flex;
-  gap: 16px;
-}
-
-.ctas a {
-  appearance: none;
-  border-radius: 128px;
-  height: 48px;
-  padding: 0 20px;
-  border: none;
-  border: 1px solid transparent;
-  transition:
-    background 0.2s,
-    color 0.2s,
-    border-color 0.2s;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 500;
-}
-
-a.primary {
-  background: var(--foreground);
-  color: var(--background);
-  gap: 8px;
-}
-
-a.secondary {
-  border-color: var(--gray-alpha-200);
-  min-width: 180px;
-}
-
-.footer {
-  grid-row-start: 3;
-  display: flex;
-  gap: 24px;
-}
-
-.footer a {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.footer img {
-  flex-shrink: 0;
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  a.primary:hover {
-    background: var(--button-primary-hover);
-    border-color: transparent;
-  }
-
-  a.secondary:hover {
-    background: var(--button-secondary-hover);
-    border-color: transparent;
-  }
-
-  .footer a:hover {
-    text-decoration: underline;
-    text-underline-offset: 4px;
-  }
-}
-
-@media (max-width: 600px) {
-  .page {
-    padding: 32px;
-    padding-bottom: 80px;
-  }
-
-  .main {
-    align-items: center;
-  }
-
-  .main ol {
-    text-align: center;
-  }
-
-  .ctas {
-    flex-direction: column;
-  }
-
-  .ctas a {
-    font-size: 14px;
-    height: 40px;
-    padding: 0 16px;
-  }
-
-  a.secondary {
-    min-width: auto;
-  }
-
-  .footer {
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .logo {
-    filter: invert();
-  }
-}

src/app/page.tsx

@@ -1,95 +0,0 @@
-import Image from "next/image";
-import styles from "./page.module.css";
-
-export default function Home() {
-  return (
-    <div className={styles.page}>
-      <main className={styles.main}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol>
-          <li>
-            Get started by editing <code>src/app/page.tsx</code>.
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className={styles.ctas}>
-          <a
-            className={styles.primary}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className={styles.logo}
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.secondary}
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className={styles.footer}>
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
-}

src/components/Footer/footer.module.css

@@ -0,0 +1,401 @@
+.footer {
+  position: relative;
+  width: 100%;
+  margin-top: 60px;
+  background: #fafafa;
+
+  .footer-top {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 360px;
+
+    /* dark-background-color */
+
+    background: #252b42;
+
+    .footer-container {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 80px;
+      align-items: center;
+      height: 360px;
+      margin: 0 auto;
+      padding: 80px 0 20px;
+
+      .container-row {
+        display: flex;
+
+        /* Inside auto layout */
+
+        flex: none;
+        flex-direction: row;
+        flex-grow: 0;
+        gap: 30px;
+        align-items: flex-start;
+        order: 0;
+        width: 1000px;
+        height: 110px;
+        padding: 0;
+
+        .col-md-3 {
+          display: flex;
+
+          /* Inside auto layout */
+
+          flex: none;
+          flex-direction: column;
+          flex-grow: 0;
+          gap: 20px;
+          align-items: flex-start;
+          order: 0;
+          width: 241px;
+          height: 110px;
+          padding: 0;
+
+          .content1 {
+            /* Inside auto layout */
+
+            flex: none;
+            flex-grow: 0;
+            order: 0;
+            width: 97px;
+            height: 32px;
+
+            /* light-text-color */
+
+            color: #fff;
+            font-weight: 700;
+            font-size: 24px;
+
+            /* h3 */
+
+            font-family: "Montserrat";
+            font-style: normal;
+            line-height: 32px;
+
+            /* identical to box height, or 133% */
+
+            letter-spacing: 0.1px;
+          }
+
+          .detail {
+            display: flex;
+
+            /* Inside auto layout */
+
+            flex: none;
+            flex-direction: column;
+            flex-grow: 0;
+            gap: 10px;
+            align-items: flex-start;
+            order: 1;
+            width: 240px;
+            height: 58px;
+            padding: 0;
+
+            .link1 {
+              /* Inside auto layout */
+
+              flex: none;
+              flex-grow: 0;
+              order: 0;
+              width: 320px;
+              height: 24px;
+
+              /* light-text-color */
+
+              color: #fff;
+              font-weight: 600;
+              font-size: 14px;
+
+              /* link */
+
+              font-family: "Montserrat";
+              font-style: normal;
+              line-height: 24px;
+
+              /* identical to box height, or 171% */
+
+              letter-spacing: 0.2px;
+            }
+
+            .link2 {
+              /* Inside auto layout */
+
+              flex: none;
+              flex-grow: 0;
+              order: 1;
+              width: 200px;
+              height: 24px;
+
+              /* light-text-color */
+
+              color: #fff;
+              font-weight: 600;
+              font-size: 14px;
+
+              /* link */
+
+              font-family: "Montserrat";
+              font-style: normal;
+              line-height: 24px;
+
+              /* identical to box height, or 171% */
+
+              letter-spacing: 0.2px;
+            }
+
+            .img {
+              width: 100px;
+              height: 100px;
+              margin-top: 12px;
+              margin-right: 16px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .footer-bottom {
+    position: absolute;
+    top: 360px;
+    right: 0;
+    left: 0;
+    height: 76px;
+    background: #384163;
+
+    .footer-row {
+      position: absolute;
+      top: 0;
+      left: calc(50% - 1050px / 2);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 1050px;
+      height: 74px;
+      padding: 25px 0;
+
+      .col-md-6 {
+        display: flex;
+
+        /* Inside auto layout */
+
+        flex: none;
+        flex-direction: column;
+        flex-grow: 0;
+        align-items: center;
+        order: 0;
+        width: 513px;
+        height: 24px;
+        padding: 0;
+
+        .content1 {
+          /* Inside auto layout */
+
+          flex: none;
+          flex-grow: 0;
+          order: 0;
+          width: 347px;
+          height: 24px;
+
+          /* muted-color */
+
+          color: #bdbdbd;
+          font-weight: 600;
+          font-size: 14px;
+
+          /* h6 */
+
+          font-family: "Montserrat";
+          font-style: normal;
+          line-height: 24px;
+
+          /* identical to box height, or 171% */
+
+          letter-spacing: 0.2px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .footer {
+    position: relative;
+    width: 100%;
+    margin-top: 0;
+    background: #fafafa;
+
+    .footer-top {
+      top: 0;
+      right: 0;
+      left: 0;
+      width: 100%;
+      height: 800px;
+      background: #252b42;
+
+      .footer-container {
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+
+        .container-row {
+          display: flex;
+          flex-direction: column;
+          gap: 30px;
+          align-items: flex-start;
+          width: 100% - 40px;
+          padding: 0;
+
+          .col-md-3 {
+            display: flex;
+
+            /* Inside auto layout */
+
+            flex: none;
+            flex-direction: column;
+            flex-grow: 0;
+            align-items: center;
+            order: 0;
+            width: 100%;
+            height: 110px;
+            margin-left: 40px;
+            padding: 0;
+
+            .content1 {
+              width: 100%;
+              height: 32px;
+              padding: 0;
+              color: #fff;
+              font-weight: 700;
+              font-size: 24px;
+              font-family: "Montserrat";
+              font-style: normal;
+              line-height: 32px;
+            }
+
+            .detail {
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
+              width: 100%;
+              height: 58px;
+              padding: 0;
+
+              .link1 {
+                width: 100%;
+                height: 24px;
+
+                /* light-text-color */
+
+                color: #fff;
+                font-weight: 600;
+                font-size: 14px;
+                font-family: "Montserrat";
+                font-style: normal;
+                line-height: 24px;
+
+                /* identical to box height, or 171% */
+
+                letter-spacing: 0.2px;
+              }
+
+              .link2 {
+                width: 200px;
+                height: 24px;
+                font-weight: 600;
+                font-size: 14px;
+
+                /* link */
+
+                font-family: "Montserrat";
+                font-style: normal;
+                line-height: 24px;
+
+                /* identical to box height, or 171% */
+
+                letter-spacing: 0.2px;
+              }
+
+              .img {
+                width: 100px;
+                height: 100px;
+                margin-top: 32px;
+                margin-right: 16px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .footer-bottom {
+      top: 800px;
+      width: 100%;
+      height: 76px;
+      text-align: center;
+      background: #384163;
+
+      .footer-row {
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        height: 74px;
+        margin: 0 auto;
+        padding: 25px 0;
+
+        .col-md-6 {
+          display: flex;
+
+          /* Inside auto layout */
+
+          flex: none;
+          flex-direction: column;
+          flex-grow: 0;
+          align-items: center;
+          order: 0;
+          width: 100%;
+          height: 24px;
+          padding: 0;
+
+          .content1 {
+            /* Inside auto layout */
+
+            flex: none;
+            flex-grow: 0;
+            order: 0;
+            width: 347px;
+            height: 24px;
+
+            /* muted-color */
+
+            color: #bdbdbd;
+            font-weight: 600;
+            font-size: 14px;
+
+            /* h6 */
+
+            font-family: "Montserrat";
+            font-style: normal;
+            line-height: 24px;
+
+            /* identical to box height, or 171% */
+
+            letter-spacing: 0.2px;
+          }
+        }
+      }
+    }
+  }
+}

src/components/Footer/index.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import Image from "next/image";
+import styles from "./footer.module.css";
+
+const Footer: React.FC = () => {
+  return (
+    <div className={styles.footer}>
+      <div className={styles["footer-top"]}>
+        <div className={styles["footer-container"]}>
+          <div className={styles["container-row"]}>
+            <div className={styles["col-md-3"]}>
+              <div className={styles.content1}>公司信息</div>
+              <div className={styles.detail}>
+                <div>
+                  <a className={styles.link1} href="/about">
+                    关于我们
+                  </a>
+                </div>
+                <div>
+                  <a className={styles.link2} href="/contact">
+                    联系我们
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div className={styles["col-md-3"]}>
+              <div className={styles.content1}>法律条款</div>
+              <div className={styles.detail}>
+                <div>
+                  <a className={styles.link1} href="/privacy">
+                    隐私政策
+                  </a>
+                </div>
+                <div>
+                  <a className={styles.link2}>产品使用条款</a>
+                </div>
+              </div>
+            </div>
+            <div className={styles["col-md-3"]}>
+              <div className={styles.content1}>备案信息</div>
+              <div className={styles.detail}>
+                <div>
+                  <a className={styles.link1}>京ICP备1805770号</a>
+                </div>
+              </div>
+            </div>
+            <div className={styles["col-md-3"]}>
+              <div className={styles.content1}>联系方式</div>
+              <div className={styles.detail}>
+                <div className={styles.link1}>李女士 13810542631</div>
+                <div className={styles.link1}>北京市朝阳区东三环富力双子座A座601</div>
+                <div>
+                  <Image
+                    alt="qrcode"
+                    width={100}
+                    height={100}
+                    className={styles.img}
+                    src={"https://hi-po.oss-cn-beijing.aliyuncs.com/img/web/qrcode2.jpg"}
+                  ></Image>
+                  <Image
+                    alt="qrcode"
+                    width={100}
+                    height={100}
+                    className={styles.img}
+                    src={"https://hi-po.oss-cn-beijing.aliyuncs.com/img/web/qrcode.jpg"}
+                  ></Image>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={styles["footer-bottom"]}>
+        <div className={styles["footer-row"]}>
+          <div className={styles["col-md-6"]}>
+            <div className={styles["content1"]}>Copyright © 2022 HIPO, Inc. All rights reserved.</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

src/components/Header/header.module.css

@@ -0,0 +1,507 @@
+.nav {
+  position: relative;
+  width: 100%;
+  background: #252b42;
+
+  .nav-bar {
+    position: absolute;
+    top: 0px;
+    left: calc(50% - 1322px / 2);
+    z-index: 5;
+    width: 1322px;
+    height: 104px;
+
+    .navbar-brand {
+      position: absolute;
+      top: calc(50% - 58px / 2);
+      left: calc(50% - 187px / 2 - 488.5px);
+      width: 187px;
+      height: 58px;
+
+      .logo {
+        /* HIPO 高潜 */
+        position: absolute;
+        top: 13px;
+        left: 0px;
+        width: 121px;
+        height: 32px;
+
+        /* light-text-color */
+
+        color: #ffffff;
+        font-weight: 700;
+        font-size: 24px;
+
+        /* h3 */
+
+        font-family: "Montserrat";
+        font-style: normal;
+        line-height: 32px;
+        /* identical to box height, or 133% */
+
+        letter-spacing: 0.1px;
+      }
+    }
+
+    .navbar-collapse {
+      position: absolute;
+      top: 40px;
+      left: calc(50% - 373px / 2 + 310.5px);
+      width: 373px;
+      height: 24px;
+
+      .navbar-content {
+        position: absolute;
+        top: calc(50% - 24px / 2);
+        left: calc(50% - 660px / 2 - 46.5px);
+        /* Auto layout */
+        display: flex;
+        flex-direction: row;
+        gap: 21px;
+        align-items: center;
+        width: 660px;
+        height: 24px;
+        padding: 0px;
+      }
+
+      .navbar-login {
+        position: absolute;
+        top: 0px;
+        left: 255px;
+        width: 65px;
+        height: 24px;
+      }
+
+      .navbar-register {
+        position: absolute;
+        top: 0px;
+        left: 313px;
+        width: 65px;
+        height: 24px;
+      }
+
+      .link {
+        /* light-text-color */
+
+        color: #ffffff;
+        font-weight: 600;
+        font-size: 14px;
+        /* link */
+        font-family: "Montserrat";
+        font-style: normal;
+        line-height: 24px;
+        letter-spacing: 0.2px;
+        /* identical to box height, or 171% */
+
+        text-align: center;
+      }
+    }
+  }
+
+  .nav-container {
+    position: relative;
+    left: calc(50% - 1160px / 2);
+    z-index: 3;
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    gap: 80px;
+    align-items: flex-start;
+    width: 1160px;
+    height: 679px;
+    padding: 80px 0px;
+
+    .main-content {
+      /* Auto layout */
+      display: flex;
+
+      flex: none;
+      flex-direction: column;
+      flex-grow: 0;
+      order: 0;
+      width: 860px;
+      height: 411px;
+      padding: 180px 0px;
+
+      .content1 {
+        flex: none;
+        flex-grow: 0;
+        order: 0;
+        width: 800px;
+        color: #ffffff;
+        font-weight: 800;
+        font-size: 60px;
+        font-family: "SourceHanSansCN-Bold";
+        font-style: normal;
+        letter-spacing: 0.2px;
+      }
+
+      .line {
+        width: 110px;
+        margin-top: 6px;
+        margin-bottom: 8px;
+        border-bottom: 4px solid white;
+      }
+
+      .content2 {
+        flex: none;
+        flex-grow: 0;
+        order: 0;
+        width: 800px;
+        color: #ffffff;
+        font-weight: 400;
+        font-size: 46px;
+        font-family: "SourceHanSansCN-Bold";
+        font-style: normal;
+        letter-spacing: 0.2px;
+      }
+
+      .content4 {
+        flex: none;
+        flex-grow: 0;
+        order: 1;
+        width: 600px;
+        height: 60px;
+        color: #ffffff;
+        font-weight: 500;
+        font-size: 20px;
+        font-family: "SourceHanSansCN-Bold";
+        font-style: normal;
+        line-height: 36px;
+        letter-spacing: 0.2px;
+      }
+
+      .buttons {
+        /* Auto layout */
+        display: flex;
+
+        /* Inside auto layout */
+
+        flex: none;
+        flex-direction: row;
+        flex-grow: 0;
+        gap: 10px;
+        align-items: flex-start;
+        order: 2;
+
+        width: 268px;
+        height: 48px;
+        margin-top: 40px;
+        padding: 0px;
+
+        .button-a {
+          /* Auto layout */
+          display: flex;
+
+          /* Inside auto layout */
+
+          flex: none;
+          flex-direction: column;
+          flex-grow: 0;
+          gap: 10px;
+          align-items: center;
+          order: 0;
+
+          width: 129px;
+          height: 48px;
+          padding: 10px 36px;
+
+          /* primary-color */
+
+          background: #ff7b47;
+          border-radius: 37px;
+        }
+
+        .button-b {
+          /* Auto layout */
+
+          display: flex;
+
+          /* Inside auto layout */
+
+          flex: none;
+          flex-direction: column;
+          flex-grow: 0;
+          gap: 10px;
+          align-items: center;
+          order: 1;
+          box-sizing: border-box;
+
+          width: 129px;
+          height: 48px;
+          padding: 10px 36px;
+
+          /* light-background-color */
+
+          border: 1px solid #ffffff;
+          border-radius: 37px;
+        }
+
+        .button-text {
+          /* Inside auto layout */
+
+          flex: none;
+          flex-grow: 0;
+          order: 0;
+          width: 57px;
+          height: 28px;
+
+          /* light-text-color */
+
+          color: #ffffff;
+          font-weight: 700;
+          font-size: 14px;
+
+          /* btn-text */
+
+          font-family: "Montserrat";
+          font-style: normal;
+          line-height: 28px;
+          letter-spacing: 0.2px;
+          /* identical to box height, or 200% */
+
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .nav-background {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    left: 0px;
+    z-index: 1;
+    height: 793px;
+
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .nav-cover {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 793px;
+    object-fit: cover;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .nav-fixed {
+    position: fixed;
+    z-index: 999;
+    width: 100%;
+    color: white;
+    background: #252b42;
+
+    .header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-top: 18px;
+      margin-bottom: 18px;
+
+      .logo {
+        display: inline-block;
+        flex: 1;
+        margin-left: 24px;
+        font-weight: 600;
+        font-size: 18px;
+        font-family: "Montserrat";
+        font-style: normal;
+        line-height: 32px;
+      }
+
+      .menu {
+        width: 24px;
+        height: 15px;
+        margin-right: 24px;
+      }
+    }
+
+    .hide {
+      animation: hide-keyframes 200ms ease-in forwards;
+    }
+
+    .show {
+      animation: show-keyframes 200ms ease-in forwards;
+    }
+
+    @keyframes hide-keyframes {
+      0% {
+        height: 450px;
+      }
+
+      100% {
+        height: 0;
+      }
+    }
+
+    @keyframes show-keyframes {
+      0% {
+        height: 0;
+      }
+
+      100% {
+        height: 450px;
+      }
+    }
+
+    .nav-sub {
+      height: 450px;
+      padding-top: 25px;
+      padding-bottom: 25px;
+      text-align: center;
+
+      .item {
+        height: 50px;
+        color: white;
+        font-size: 20px;
+        font-family: "Montserrat";
+        font-style: normal;
+      }
+    }
+  }
+
+  .nav {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-top: 68px;
+    color: white;
+    font-size: 22px;
+    background: #252b42;
+
+    .content {
+      position: relative;
+      height: 600px;
+
+      .nav-cover {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 600px;
+        object-fit: cover;
+      }
+
+      .nav-bg {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 600px;
+        background: rgba(0, 0, 0, 0.5);
+      }
+
+      .text-content {
+        position: absolute;
+        top: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+
+        .content1 {
+          margin-top: 140px;
+          color: #fff;
+          font-weight: 700;
+          font-size: 30px;
+          font-family: "SourceHanSansCN-Bold";
+          font-style: normal;
+          line-height: 60px;
+          text-align: center;
+        }
+
+        .content2 {
+          flex: none;
+          flex-grow: 0;
+          order: 0;
+          width: 100%;
+          color: #ffffff;
+          font-weight: 400;
+          font-family: "SourceHanSansCN-Bold";
+          font-style: normal;
+          letter-spacing: 0.2px;
+          text-align: center;
+        }
+
+        .content4 {
+          margin-top: 30px;
+          margin-right: 40px;
+          margin-left: 40px;
+          color: #fff;
+          font-weight: 400;
+          font-size: 18px;
+          font-family: "SourceHanSansCN-Bold";
+          font-style: normal;
+          line-height: 32px;
+          text-align: center;
+        }
+
+        .buttons {
+          /* Auto layout */
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          margin-top: 40px;
+
+          .button-a {
+            /* Auto layout */
+            display: flex;
+
+            /* Inside auto layout */
+
+            flex: none;
+            flex-direction: column;
+            flex-grow: 0;
+            gap: 10px;
+            align-items: center;
+            order: 0;
+
+            width: 129px;
+            height: 48px;
+            padding: 10px 36px;
+
+            /* primary-color */
+
+            background: #ff7b47;
+            border-radius: 37px;
+          }
+
+          .button-b {
+            display: flex;
+            flex: none;
+            flex-direction: column;
+            flex-grow: 0;
+            gap: 10px;
+            align-items: center;
+            order: 1;
+            box-sizing: border-box;
+
+            width: 129px;
+            height: 48px;
+            padding: 10px 36px;
+
+            border: 1px solid #ffffff;
+            border-radius: 37px;
+          }
+
+          .button-text {
+            flex: none;
+            flex-grow: 0;
+            order: 0;
+            width: 100px;
+            height: 28px;
+            color: #ffffff;
+            font-weight: 700;
+            font-size: 14px;
+            font-family: "Montserrat";
+            font-style: normal;
+            line-height: 28px;
+            letter-spacing: 0.2px;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}

src/components/Header/index.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+// import {scroller} from "react-scroll";
+import Image from "next/image";
+import styles from "./header.module.css";
+
+const Header: React.FC = () => {
+  return (
+    <div className={styles.nav}>
+      <div className={styles["nav-bar"]}>
+        <div className={styles["navbar-brand"]}>
+          <div className={styles.logo}>HIPO 高潜</div>
+        </div>
+        <div className={styles["navbar-collapse"]}>
+          <div className={styles["navbar-content"]}>
+            <a className={styles.link}>首页</a>
+            <a className={styles.link} href="/about">
+              关于我们
+            </a>
+            {/* <a className={styles.link} onClick={() => {
+              scroller.scrollTo("service", {
+                smooth: false,
+              });
+            }}>
+              业务介绍
+            </a>
+            <a className={styles.link} onClick={() => {
+              scroller.scrollTo("consultant", {
+                smooth: false,
+              });
+            }}>
+              顾问介绍
+            </a> */}
+            <a className={styles.link} href="/caseList">
+              经典案例
+            </a>
+            <a className={styles.link} href="/contact">
+              联系我们
+            </a>
+          </div>
+          {/* <div className={styles["navbar-login"]}>
+            <a className={styles.link} href={"/user/login"}>
+              登录
+            </a>
+          </div>
+          <div className={styles["navbar-register"]}>
+            <a className={styles.link} href={"/user/register"}>
+              注册
+            </a>
+          </div> */}
+        </div>
+      </div>
+      <div className={styles["nav-container"]}>
+        <div className={styles["main-content"]}>
+          <div className={styles.content1}>高潜咨询</div>
+          <div className={styles.content2}>助力中国高潜企业加速发展</div>
+          <div className={styles.line}></div>
+          <br />
+          <div className={styles.content4}>
+            聚焦战略、组织、人才，提供定制化的、可落地的解决方案，帮助高潜力的企业及个人加速成长
+          </div>
+        </div>
+      </div>
+      <div>
+        <div className={styles["nav-background"]}></div>
+        <img src="https://hi-po.oss-cn-beijing.aliyuncs.com/img/web/cover2.jpg" className={styles["nav-cover"]} />
+      </div>
+    </div>
+  );
+};
+
+export default Header;

src/components/Nav/index.tsx

@@ -0,0 +1,156 @@
+"use client";
+import React, { useState } from "react";
+import { isMobile } from "react-device-detect";
+import styles from "./nav.module.css";
+
+const Nav: React.FC = (props) => {
+  const [showMenu, setShowMenu] = useState("");
+
+  const isCurrent = (title: string) => {
+    return title == props.title;
+  };
+
+  return isMobile ? (
+    <div className={styles["nav-fixed"]}>
+      <div
+        className={styles.header}
+        onClick={() => {
+          if (showMenu == "" || showMenu == "hide") {
+            setShowMenu("show");
+          } else {
+            setShowMenu("hide");
+          }
+        }}
+      >
+        <div className={styles.logo}>HIPO 高潜</div>
+        <img src="/asset/ic_menu.png" className={styles.menu} />
+      </div>
+      <div className={styles["nav-line"]} />
+      <div className={showMenu} style={{ overflow: "hidden", height: 0 }}>
+        <div className={styles["nav-sub"]}>
+          <a href="/">
+            <div
+              className={styles.item}
+              onClick={() => {
+                setShowMenu("hide");
+              }}
+            >
+              首页
+            </div>
+          </a>
+          <a href="/about">
+            <div
+              className={styles.item}
+              onClick={() => {
+                setShowMenu("hide");
+              }}
+            >
+              关于我们
+            </div>
+          </a>
+          <a href="/#service">
+            <div
+              className={styles.item}
+              onClick={() => {
+                setShowMenu("hide");
+              }}
+            >
+              业务介绍
+            </div>
+          </a>
+          <a href="/#consultant">
+            <div
+              className={styles.item}
+              onClick={() => {
+                setShowMenu("hide");
+              }}
+            >
+              顾问介绍
+            </div>
+          </a>
+          <a href="/caseList">
+            <div
+              className={styles.item}
+              onClick={() => {
+                setShowMenu("hide");
+              }}
+            >
+              经典案例
+            </div>
+          </a>
+          <a href="/contactUs">
+            <div
+              className={styles.item}
+              onClick={() => {
+                setShowMenu("hide");
+              }}
+            >
+              联系我们
+            </div>
+          </a>
+          <a href={"/user/login"}>
+            <div
+              className={styles.item}
+              onClick={() => {
+                setShowMenu("hide");
+              }}
+            >
+              登录
+            </div>
+          </a>
+          <a href={"/user/register"}>
+            <div
+              className={styles.item}
+              onClick={() => {
+                setShowMenu("hide");
+              }}
+            >
+              注册
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div className={styles.nav}>
+      <div className={styles["nav-bar"]}>
+        <div className={styles["navbar-brand"]}>
+          <a href={"/"}>
+            <div className={styles.logo}>HIPO 高潜</div>
+          </a>
+        </div>
+        <div className={styles["navbar-collapse"]}>
+          <div className={styles["navbar-content"]}>
+            <a className={styles.link} href="/">
+              首页
+            </a>
+            <a className={isCurrent("关于我们") ? styles.linkChecked : styles.link} href="/about">
+              关于我们
+            </a>
+            <a className={styles.link} href="/#service">
+              业务介绍
+            </a>
+            <a className={isCurrent("顾问介绍") ? styles.linkChecked : styles.link} href="/#consultant">
+              顾问介绍
+            </a>
+            <a className={isCurrent("经典案例") ? styles.linkChecked : styles.link} href="/caseList">
+              经典案例
+            </a>
+            <a className={isCurrent("联系我们") ? styles.linkChecked : styles.link} href="/contactUs">
+              联系我们
+            </a>
+            <a className={styles.link} href={"/user/login"}>
+              登录
+            </a>
+            <a className={styles.link} href={"/user/register"}>
+              注册
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className={styles["nav-line"]} />
+    </div>
+  );
+};
+
+export default Nav;

src/components/Nav/nav.module.css

@@ -0,0 +1,188 @@
+.nav {
+  background: white;
+  width: 100%;
+  position: relative;
+
+  .nav-line {
+    height: 1px;
+    width: 100%;
+    background-color: #eee;
+    margin-top: 80px;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+  }
+
+  .nav-bar {
+    position: absolute;
+    width: 1322px;
+    height: 80px;
+    left: calc(50% - 1322px / 2);
+    top: 0px;
+    z-index: 5;
+
+    .navbar-brand {
+      position: absolute;
+      width: 187px;
+      height: 80px;
+      left: calc(50% - 187px / 2 - 488.5px);
+
+      .logo {
+        /* HIPO 高潜 */
+        position: absolute;
+        width: 121px;
+        height: 32px;
+        top: 24px;
+        left: 0px;
+        /* h3 */
+
+        font-family: "Montserrat";
+        font-style: normal;
+        font-weight: 700;
+        font-size: 24px;
+        line-height: 32px;
+        /* identical to box height, or 133% */
+
+        letter-spacing: 0.1px;
+
+        /* light-text-color */
+
+        color: #333333;
+      }
+    }
+
+    .navbar-collapse {
+      position: absolute;
+      width: 600px;
+      height: 80px;
+      right: 0;
+
+      .navbar-content {
+        /* Auto layout */
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 0;
+        gap: 21px;
+
+        position: absolute;
+        height: 24px;
+        top: calc(50% - 24px / 2);
+      }
+
+      .link {
+        /* link */
+        font-family: "Montserrat";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 24px;
+        /* identical to box height, or 171% */
+
+        text-align: center;
+        letter-spacing: 0.2px;
+
+        /* light-text-color */
+
+        color: #333333;
+      }
+
+      .linkChecked {
+        /* link */
+        font-family: "Montserrat";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 24px;
+        text-align: center;
+        letter-spacing: 0.2px;
+
+        color: #1773c8;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .nav-fixed {
+    position: fixed;
+    background: white;
+    width: 100%;
+    z-index: 999;
+    color: white;
+
+    .nav-line {
+      height: 1px;
+      width: 100%;
+      background-color: #eee;
+      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+    }
+
+    .header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-top: 18px;
+      margin-bottom: 18px;
+
+      .logo {
+        font-family: "Montserrat";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 18px;
+        flex: 1;
+        color: #333333;
+        line-height: 32px;
+        display: inline-block;
+        margin-left: 24px;
+      }
+
+      .menu {
+        width: 24px;
+        height: 15px;
+        margin-right: 24px;
+      }
+    }
+
+    .hide {
+      animation: hide-keyframes 200ms ease-in forwards;
+    }
+
+    .show {
+      animation: show-keyframes 200ms ease-in forwards;
+    }
+
+    @keyframes hide-keyframes {
+      0% {
+        height: 450px;
+      }
+
+      100% {
+        height: 0;
+      }
+    }
+
+    @keyframes show-keyframes {
+      0% {
+        height: 0;
+      }
+
+      100% {
+        height: 450px;
+      }
+    }
+
+    .nav-sub {
+      text-align: center;
+      height: 450px;
+      padding-top: 25px;
+      padding-bottom: 25px;
+
+      .item {
+        height: 50px;
+        font-family: "Montserrat";
+        font-style: normal;
+        font-size: 20px;
+        color: #333333;
+      }
+    }
+  }
+}

src/lib/cms.ts

@@ -0,0 +1,91 @@
+const host = "https://hi-po.com.cn";
+
+export async function fetchConsultants() {
+  const formData = new FormData();
+  formData.append("page", "1");
+  formData.append("size", "100");
+
+  const result = await fetch(`${host}/api/v1/cms/listConsultant`, {
+    method: "POST",
+    body: formData,
+  });
+  const json = await result.json();
+  return json;
+}
+
+export async function fetchConsultantDetail(id: number) {
+  const formData = new FormData();
+  formData.append("id", id.toString());
+
+  const result = await fetch(`${host}/api/v1/cms/consultantDetail`, {
+    method: "POST",
+    body: formData,
+  });
+  const json = await result.json();
+  return json;
+}
+
+export async function fetchArticleList(type: number, page: number, size: number) {
+  const formData = new FormData();
+  formData.append("type", type.toString());
+  formData.append("page", page.toString());
+  formData.append("size", size.toString());
+
+  const result = await fetch(`${host}/api/v1/cms/listArticle`, {
+    method: "POST",
+    body: formData,
+  });
+  const json = await result.json();
+  return json;
+}
+
+export async function fetchArticleDetail(id: number) {
+  const formData = new FormData();
+  formData.append("id", id.toString());
+
+  const result = await fetch(`${host}/api/v1/cms/articleDetail`, {
+    method: "POST",
+    body: formData,
+  });
+  const json = await result.json();
+  return json;
+}
+
+export async function fetchServiceProducts() {
+  const formData = new FormData();
+  formData.append("page", "1");
+  formData.append("size", "100");
+
+  const result = await fetch(`${host}/api/v1/cms/listServiceProduct`, {
+    method: "POST",
+    body: formData,
+  });
+  const json = await result.json();
+  return json;
+}
+
+export async function fetchCustomers() {
+  const formData = new FormData();
+  formData.append("page", "1");
+  formData.append("size", "100");
+
+  const result = await fetch(`${host}/api/v1/cms/listCustomer`, {
+    method: "POST",
+    body: formData,
+  });
+  const json = await result.json();
+  return json;
+}
+
+export async function fetchVideos() {
+  const formData = new FormData();
+  formData.append("page", "1");
+  formData.append("size", "100");
+
+  const result = await fetch(`${host}/api/v1/cms/listVideo`, {
+    method: "POST",
+    body: formData,
+  });
+  const json = await result.json();
+  return json;
+}

src/lib/contact.ts

@@ -0,0 +1,30 @@
+// const host = "http://test.admin.hi-po.com.cn";
+const host = "https://hi-po.com.cn";
+
+type AddContactParam = {
+  name?: string;
+  company?: string;
+  email?: string;
+  userRemark?: string;
+  position?: string;
+  phone?: string;
+  area?: string;
+  city?: string;
+};
+
+export async function addContact(params: AddContactParam) {
+  const formData = new FormData();
+  Object.keys(params).forEach((key) => {
+    const value = params[key as keyof AddContactParam];
+    if (value !== undefined && value !== null) {
+      formData.append(key, value.toString());
+    }
+  });
+
+  const result = await fetch(`${host}/api/v1/contact/add`, {
+    method: "POST",
+    body: formData,
+  });
+  const json = await result.json();
+  return json;
+}