feat(components): 添加服务客户组件和子标题组件

- 新增 ServerClient 组件，用于展示服务客户 logos
- 新增 SubTitle组件，用于展示带有下划线的子标题
- 添加 Tailwind CSS 配置文件

src/components/serverClient.tsx

@@ -0,0 +1,58 @@
+import MainTitle from "@/components/MainTitle";
+import Image from "next/image";
+
+export default function ServerClient() {
+  // Array of colored blocks to represent different company logos
+  const logoBlocks = [
+    // Row 1
+    { color: "bg-red-500", name: "Huawei" ,url:"/assets/home/clientIcon/1.png"},
+    { color: "bg-red-600", name: "China Citic Bank" ,url:"/assets/home/clientIcon/2.png"},
+    { color: "bg-orange-500", name: "Dahan Group" ,url:"/assets/home/clientIcon/3.png"},
+    { color: "bg-blue-600", name: "Central South University" ,url:"/assets/home/clientIcon/4.png"},
+    { color: "bg-red-500", name: "CBN" ,url:"/assets/home/clientIcon/5.png"},
+
+    // Row 2
+    { color: "bg-red-700", name: "China Comservice" ,url:"/assets/home/clientIcon/6.png"},
+    { color: "bg-blue-500", name: "GRG Banking" ,url:"/assets/home/clientIcon/7.png"},
+    { color: "bg-purple-600", name: "Changsha Metro" ,url:"/assets/home/clientIcon/8.png"},
+    { color: "bg-blue-700", name: "Inspur" ,url:"/assets/home/clientIcon/9.png"},
+    { color: "bg-red-600", name: "Dahua Technology" ,url:"/assets/home/clientIcon/10.png"},
+
+    // Row 3
+    { color: "bg-blue-600", name: "Creator" ,url:"/assets/home/clientIcon/11.png"},
+    { color: "bg-green-600", name: "Zhongda Victory" ,url:"/assets/home/clientIcon/12.png"},
+    { color: "bg-blue-500", name: "China Mobile 5G" ,url:"/assets/home/clientIcon/13.png"},
+    { color: "bg-blue-600", name: "Baidu" ,url:"/assets/home/clientIcon/14.png"},
+    { color: "bg-red-500", name: "China Tower" ,url:"/assets/home/clientIcon/15.png"},
+
+    // Row 4
+    { color: "bg-blue-600", name: "China Telecom" ,url:"/assets/home/clientIcon/16.png"},
+    { color: "bg-red-600", name: "China Unicom" ,url:"/assets/home/clientIcon/17.png"},
+    { color: "bg-blue-500", name: "Tencent" ,url:"/assets/home/clientIcon/18.png"},
+    { color: "bg-gray-800", name: "Ship" ,url:"/assets/home/clientIcon/19.png"},
+    { color: "bg-red-600", name: "Red Seal" ,url:"/assets/home/clientIcon/20.png"},
+  ]
+
+  return (
+    <>
+      <div className="bg-[url('/assets/home/24.png')] bg-cover">
+        <div className={"pt-20"}>
+          <MainTitle title="服务客户" titleLetter="SERVICE_CUSTOMER"/>
+        </div>
+        <div className="bg-gray-100/30 backdrop-blur-sm p-8">
+          <div className="max-w-7xl mx-auto">
+            <div className="grid grid-cols-3 sm:grid-cols-5 gap-6 p-5 sm:p-10 bg-gray-200 rounded-lg">
+              {logoBlocks.map((logo, index) => (
+                <div key={index} className="rounded-lg shadow-sm flex items-center justify-center">
+                  <div className={`w-full h-full rounded flex items-center justify-center`}>
+                    <Image src={logo.url} alt={logo.name} width={1920} height={1920}/>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/subTitle.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import React from "react"
+
+interface SubTitleProps {
+  title: string
+  color?: string
+  customStyle?: React.CSSProperties
+}
+
+export default function SubTitle({ title, color = "#2378FF", customStyle }: SubTitleProps) {
+  return (
+    <div
+      className="w-full mx-auto text-2xl shuheiti"
+      style={{ color, ...customStyle }}
+    >
+      <p
+        className="inline-block border-b-4 border-solid"
+        style={{ borderColor: color }}
+      >
+        {title}
+      </p>
+    </div>
+  )
+}

tailwind.config.ts

@@ -0,0 +1,16 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+    },
+  },
+  plugins: [],
+};
+
+export default config;