diff --git a/app/page.tsx b/app/page.tsx
index 1a56d97..2b7c1bc 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,138 +2,268 @@
 import React, { useState } from 'react';
 import '@/app/ui/global.css';
 import Link from 'next/link';
-// import VulnerabilityList from '@/components/CveList';
 import { message } from 'antd';
 import Image from 'next/image';
 import SignIn from '@/components/sign-in';
 import { SessionProvider } from "next-auth/react"
 
-
 const HomePage: React.FC = () => {
     const [searchQuery, setSearchQuery] = useState('');
-    const [messageApi, contextHolder] = message.useMessage();//antd-message的hooks调用
+    const [messageApi, contextHolder] = message.useMessage();
+    const [activeSlide, setActiveSlide] = useState(0);
+
+    const features = [
+        {
+            title: "AI-Powered Multi-Dimensional Analysis",
+            description: "CratesPro leverages advanced AI models to provide in-depth, multi-dimensional analysis of Rust crates. By analyzing a variety of data points—including code structure, dependencies, and historical vulnerability patterns—the platform offers intelligent recommendations to optimize crates, enhance security, and reduce the risk of bugs or inefficiencies in your code.",
+            icon: "/images/homepage/ai-powered.png"
+        },
+        {
+            title: "Vulnerability Detection and Risk Assessment",
+            description: "CratesPro automatically detects potential vulnerabilities in the crates, including logic flaws, security risks, and performance bottlenecks. Using intelligent pattern recognition, it scans crate code and their dependencies to identify possible threats or weaknesses. These findings are presented with suggested fixes and recommendations.",
+            icon: "/images/homepage/vulnerability-detection.png"
+        },
+        {
+            title: "CVE Tracking and Vulnerability Propagation",
+            description: "CratesPro tracks CVE (Common Vulnerabilities and Exposures) related to Rust crates and their dependencies. The platform monitors crate versions and their updates, correlating them with known CVE databases to provide real-time updates on newly discovered vulnerabilities. This helps developers stay informed about potential threats to their projects and take proactive measures.",
+            icon: "/images/homepage/cve-tracking.png"
+        }
+    ];
+
     const handleKeyPress = (e: { key: string; }) => {
-        // 检查是否按下了回车键
         if (e.key === 'Enter') {
-            // 如果是回车键，执行搜索
             performSearch();
         }
     };
 
     const performSearch = () => {
         if (!searchQuery || searchQuery.trim() === '') {
-
             messageApi.warning('请输入搜索内容');
-            //test for review
-            //alert("请输入搜索内容"); // 可选：提示用户输入内容
         }
         if (searchQuery.trim()) {
-            // 使用 Link 跳转到搜索页面
             window.location.href = `/search?crate_name=${searchQuery}`;
         }
     };
-    console.log("test for build 1111111111111");
 
+    const nextSlide = () => {
+        setActiveSlide((prev) => (prev === features.length - 1 ? 0 : prev + 1));
+    };
+
+    const prevSlide = () => {
+        setActiveSlide((prev) => (prev === 0 ? features.length - 1 : prev - 1));
+    };
 
     return (
-        //绿色渐变
         <>
             {contextHolder}
-            < div className=" min-h-screen bg-gray-900 text-white" >
-                <header className="flex bg-teal-500 p-4 flex justify-between items-center">
-                    <Link href="/">
-                        <div className="flex items-center space-x-1">  {/* items-center 确保垂直居中，space-x-4 添加间距 */}
-                            <div className="text-3xl font-bold">CratesPro</div>
-                            <div className="flex justify-center">
-                                <Image className="w-20 object-contain" src="/rust.svg" alt="Rust Logo"
-                                    width={200}
-                                    height={200} />
-                                {/* <img className="w-20 object-contain" src="/rust.svg" alt="Rust Logo" /> */}
-                            </div>
-                        </div>
-                    </Link>
-
-                    <nav className="flex items-center gap-6">
-                        <ul className="flex space-x-5">
-                            <li><a href="#" className="hover:underline">About</a></li>
-                            <li><a href="#" className="hover:underline">Documentation</a></li>
-                            <li><a href="#" className="hover:underline">Blog</a></li>
-                        </ul>
+            <div className="min-h-screen bg-[#f0f0ff]">
+                {/* 导航栏 */}
+                <header className=" p-4 flex justify-between items-center">
+
+                    <nav className="flex items-center space-x-10 flex-1 justify-center">
+                        <Link href="#" className="text-[#003153] font-['HarmonyOS_Sans_SC'] text-base font-bold leading-normal capitalize">About</Link>
+                        <Link href="#" className="text-[#003153] font-['HarmonyOS_Sans_SC'] text-base font-bold leading-normal capitalize">Documentation</Link>
+                        <Link href="#" className="text-[#003153] font-['HarmonyOS_Sans_SC'] text-base font-bold leading-normal capitalize">Blog</Link>
+                    </nav>
+                    <div className="flex-1 flex justify-end">
                         <SessionProvider>
                             <SignIn />
                         </SessionProvider>
-                    </nav>
+                    </div>
                 </header>
-                {/* 搜索部分 */}
-                <div className="flex flex-col items-center justify-center h-80 bg-gradient-to-b from-teal-500 to-gray-800">
-                    <h1 className="text-4xl font-bold mb-4 ">CratesPro - Rust Crate Analysis and Recommendation Platform</h1>
-                    <p className="text-center mb-4">CratesPro is a sophisticated platform designed to analyze and evaluate Rust crates.</p>
-                    <div className="flex items-center mb-4">
+
+                {/* 英雄区 */}
+                <div className="flex flex-col items-center justify-center pt-16 pb-20 px-4 text-center">
+                    <div className="mb-8">
+                        <Image
+                            src="/images/homepage/logo-top.png"
+                            alt="CratesPro Logo"
+                            width={200}
+                            height={100}
+                            className="mx-auto"
+                        />
+                    </div>
+                    <h1 className="text-[#003153] text-[36px] font-['HarmonyOS_Sans_SC'] font-bold leading-normal tracking-[0.72px] ">
+                        CratesPro - Rust Crate Analysis and Recommendation Platform
+                    </h1>
+                    <p className="text-[#003153] text-[22px] font-['HarmonyOS_Sans_Condensed'] font-medium leading-normal tracking-[2.64px] ">
+                        CratesPro is a sophisticated platform designed to analyze and evaluate Rust crates.
+                    </p>
+
+                    {/* 搜索框 */}
+                    <div className="mx-auto mt-8 w-[775px] flex-shrink-0 flex items-center justify-between">
                         <input
                             type="text"
-                            placeholder="Search for open source crates"
-                            className="p-2 border-none rounded-md text-gray-800 w-80 max-w-2xl"
+                            placeholder="Search For Open Source Crates"
+                            className="w-[600px] h-[60px] p-4 rounded-[30px] focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800"
                             value={searchQuery}
-                            onChange={(e) => setSearchQuery(e.target.value)} // 更新搜索内容
+                            onChange={(e) => setSearchQuery(e.target.value)}
                             onKeyDown={handleKeyPress}
                         />
-                        {/* <Link href={{
-                        pathname: '/homepage/search',
-                        query: {
-                            crate_name: searchQuery, // 将搜索内容作为参数传递给新页面
-                        },
-                    }}> */}
-                        <button className="bg-teal-600 text-white rounded-md p-2 ml-2 hover:bg-teal-700 "
+                        <button
+                            className="
+                                w-[130px] 
+                                h-[60px] 
+                                bg-[#002851] 
+                                text-white 
+                                text-[30px] 
+                                font-['HarmonyOS_Sans_SC'] 
+                                font-bold 
+                                capitalize 
+                                rounded-[30px] 
+                                ml-2 
+                                hover:bg-blue-800 
+                                transition
+                            "
                             onClick={performSearch}
                         >
-                            Search</button>
-                        {/* </Link> */}
+                            Search
+                        </button>
                     </div>
                 </div>
 
+                {/* 彩色分隔线 */}
+                <div className="flex justify-center my-0">
+                    <svg
+                        width="1953.5"
+                        height="4"
+                        className="flex-shrink-0"
+                        viewBox="0 0 1953.5 4"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <line
+                            x1="0"
+                            y1="2"
+                            x2="1953.5"
+                            y2="2"
+                            stroke="#A5FFED"
+                            strokeWidth="4"
+                        />
+                    </svg>
+                </div>
 
-                {/* 分割线部分 */}
-                <div className="flex border-t-4 border-green-500 h-1/4"></div>
+                {/* 为什么选择我们 */}
+                <div className="py-16 px-4 bg-[#F6FCFF]">
+                    <h2 className="text-2xl md:text-3xl font-bold text-center text-[#002851] mb-16">
+                        Why Choose Us
+                    </h2>
 
-                {/* <VulnerabilityList /> */}
+                    <div className="relative max-w-6xl mx-auto flex items-center justify-center">
+                        {/* 左箭头 */}
+                        <button
+                            onClick={prevSlide}
+                            className="absolute left-0 top-1/2 -translate-y-1/2 z-10"
+                            aria-label="Previous slide"
+                        >
+                            <Image
+                                src="/images/homepage/left-normal.png"
+                                alt="Previous"
+                                width={24}
+                                height={24}
+                            />
+                        </button>
 
+                        {/* 轮播内容 */}
+                        <div className="flex overflow-hidden">
+                            <div className="flex transition-transform duration-500" style={{ transform: `translateX(-${activeSlide * 100}%)` }}>
+                                {features.map((feature, index) => (
+                                    <div key={index} className="w-[320px] flex-shrink-0 px-4">
+                                        <div className="
+                                                h-[430px] 
+                                                rounded-[46px]
+                                                bg-gradient-to-b from-[#CED4FF] to-[#F6FCFF]
+                                                shadow-[0_0_20px_0_rgba(43,88,221,0.16)]
+                                                p-8 
+                                                flex 
+                                                flex-col 
+                                                items-center
+                                                mx-auto
+                                            ">
+                                            <div className="mb-6">
+                                                <Image
+                                                    src={feature.icon}
+                                                    alt={feature.title}
+                                                    width={150}
+                                                    height={150}
+                                                />
+                                            </div>
+                                            <h3 className="text-xl font-semibold mb-4 text-center text-[#002851]">
+                                                {feature.title}
+                                            </h3>
+                                            <p className="text-gray-600 text-center">
+                                                {feature.description}
+                                            </p>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
 
-                {/* 一些介绍 */}
-                <div className="relative container mx-auto p-10">
-                    <div className="flex justify-center">
-                        {/* <img className="w-1/2 object-cover rounded-t" src="/image.png" alt="Overview" /> */}
-                    </div>
-                    <div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
-                        <h2 className="text-2xl font-semibold">AI-Powered Multi-Dimensional Analysis</h2>
-                        <p className="mt-2">CratesPro leverages advanced AI models to provide in-depth, multi-dimensional analysis of Rust crates. By analyzing a variety of data points—including code structure, dependencies, and historical vulnerability patterns—the platform offers intelligent recommendations to optimize crates, enhance security, and reduce the risk of bugs or inefficiencies in your code.</p>
-                        {/* <p className="mt-2">Learn more about the new features on our blog, or get started with the API documentation, and code examples.</p> */}
+                        {/* 右箭头 */}
+                        <button
+                            onClick={nextSlide}
+                            className="absolute right-0 top-1/2 -translate-y-1/2 z-10"
+                            aria-label="Next slide"
+                        >
+                            <svg className="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                            </svg>
+                        </button>
                     </div>
+                </div>
 
+                {/* 页脚 */}
+                <footer className="bg-[#002851] text-white py-12">
+                    <div className="max-w-6xl mx-auto px-4">
+                        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+                            <div>
+                                <Image
+                                    src="/images/homepage/logo-footer.png"
+                                    alt="CratesPro Logo"
+                                    width={180}
+                                    height={60}
+                                    className="mb-4"
+                                />
+                            </div>
 
-                    <div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
-                        <h2 className="text-2xl font-semibold">Vulnerability Detection and Risk Assessment</h2>
-                        <p className="mt-2">CratesPro automatically detects potential vulnerabilities in the crates, including logic flaws, security risks, and performance bottlenecks. Using intelligent pattern recognition, it scans crate code and their dependencies to identify possible threats or weaknesses. These findings are presented with suggested fixes and recommendations.</p>
-                        {/* <p className="mt-2">With Open Source Insights, you can actually see the dependency graph for a package, then isolate the paths to a particular dependency. Or see whether a vulnerability in a dependency might affect your code. Or compare two versions of a package to see how the dependencies have changed in a new release.</p> */}
-                    </div>
+                            <div>
+                                <h4 className="text-lg font-semibold mb-4">Resources</h4>
+                                <ul className="space-y-2">
+                                    <li><Link href="#" className="hover:text-blue-300">Documentation</Link></li>
+                                    <li><Link href="#" className="hover:text-blue-300">About</Link></li>
+                                    <li><Link href="#" className="hover:text-blue-300">Blog</Link></li>
+                                    <li><Link href="#" className="hover:text-blue-300">FAQ</Link></li>
+                                </ul>
+                            </div>
 
-                    <div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
-                        <h2 className="text-2xl font-semibold">CVE Tracking and Vulnerability Propagation</h2>
-                        <p className="mt-2">CratesPro tracks CVE (Common Vulnerabilities and Exposures) related to Rust crates and their dependencies. The platform monitors crate versions and their updates, correlating them with known CVE databases to provide real-time updates on newly discovered vulnerabilities. This helps developers stay informed about potential threats to their projects and take proactive measures.</p>
-                    </div>
+                            <div>
+                                <h4 className="text-lg font-semibold mb-4">API</h4>
+                                <ul className="space-y-2">
+                                    <li><Link href="#" className="hover:text-blue-300">API</Link></li>
+                                    <li><Link href="#" className="hover:text-blue-300">BigQuery Dataset</Link></li>
+                                    <li><Link href="#" className="hover:text-blue-300">GitHub</Link></li>
+                                </ul>
+                            </div>
 
-                    <div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
-                        <h2 className="text-2xl font-semibold">User-Uploaded Crates for Comprehensive Analysis</h2>
-                        <p className="mt-2">CratesPro supports users who wish to upload their custom crates for comprehensive analysis. After uploading, CratesPro performs a full evaluation of the crate, analyzing dependencies, potential vulnerabilities, and even compatibility with other crates in the Rust ecosystem. This feature empowers developers to ensure the security and reliability of their own creations before publication.</p>
-                    </div>
+                            <div>
+                                <h4 className="text-lg font-semibold mb-4">Legal</h4>
+                                <ul className="space-y-2">
+                                    <li><Link href="#" className="hover:text-blue-300">Legal</Link></li>
+                                    <li><Link href="#" className="hover:text-blue-300">Privacy</Link></li>
+                                    <li><Link href="#" className="hover:text-blue-300">Terms</Link></li>
+                                </ul>
+                            </div>
+                        </div>
 
-                    <div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
-                        <h2 className="text-2xl font-semibold">Dependency Tracking and Visualization</h2>
-                        <p className="mt-2">CratesPro offers detailed tracking of crate dependencies, visualizing the relationships between crates and how vulnerabilities propagate across them. By modeling dependencies and interactions, developers can see how a vulnerability in one crate may affect others in the ecosystem, offering a clearer understanding of potential risks.</p>
+                        <div className="border-t border-gray-700 mt-8 pt-8 text-center text-sm">
+                            <p>Copyright © 2023 jp21.com.cn All Rights Reserved(@ICPBH180237号)</p>
+                        </div>
                     </div>
-                </div>
+                </footer>
             </div >
         </>
     );
 }
 
-export default HomePage;
+export default HomePage;
\ No newline at end of file
diff --git a/app/ui/global.css b/app/ui/global.css
index 8a291b5..22eaf6d 100644
--- a/app/ui/global.css
+++ b/app/ui/global.css
@@ -20,4 +20,11 @@ input[type='number']::-webkit-outer-spin-button {
 .custom-margin-left {
   margin-left: 500px;
   /* 自定义的左边距 */
+}
+
+@font-face {
+  font-family: 'HarmonyOS Sans SC';
+  src: url('/fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
 }
\ No newline at end of file
diff --git a/components/sign-in.tsx b/components/sign-in.tsx
index 6160670..f248601 100644
--- a/components/sign-in.tsx
+++ b/components/sign-in.tsx
@@ -128,7 +128,7 @@ export default function SignInButton() {
                     clipRule="evenodd"
                 />
             </svg>
-            登录
+            Login With GitHub
         </button>
     );
 }
\ No newline at end of file
diff --git a/images/demo.png b/images/demo.png
deleted file mode 100644
index 5c5a2ca..0000000
Binary files a/images/demo.png and /dev/null differ
diff --git a/images/main.png b/images/main.png
deleted file mode 100644
index 5550bf8..0000000
Binary files a/images/main.png and /dev/null differ
diff --git a/public/images/homepage/Frame.png b/public/images/homepage/Frame.png
new file mode 100644
index 0000000..fb66e92
Binary files /dev/null and b/public/images/homepage/Frame.png differ
diff --git a/public/images/homepage/ai-powered.png b/public/images/homepage/ai-powered.png
new file mode 100644
index 0000000..57d819f
Binary files /dev/null and b/public/images/homepage/ai-powered.png differ
diff --git a/public/images/homepage/cve-tracking.png b/public/images/homepage/cve-tracking.png
new file mode 100644
index 0000000..cad4725
Binary files /dev/null and b/public/images/homepage/cve-tracking.png differ
diff --git a/public/images/homepage/left-normal.png b/public/images/homepage/left-normal.png
new file mode 100644
index 0000000..8ae306a
Binary files /dev/null and b/public/images/homepage/left-normal.png differ
diff --git a/public/images/homepage/logo-footer.png b/public/images/homepage/logo-footer.png
new file mode 100644
index 0000000..899d69f
Binary files /dev/null and b/public/images/homepage/logo-footer.png differ
diff --git a/public/images/homepage/logo-top.png b/public/images/homepage/logo-top.png
new file mode 100644
index 0000000..893c677
Binary files /dev/null and b/public/images/homepage/logo-top.png differ
diff --git a/public/images/homepage/right-hover.png b/public/images/homepage/right-hover.png
new file mode 100644
index 0000000..f0d4944
Binary files /dev/null and b/public/images/homepage/right-hover.png differ
diff --git a/public/images/homepage/vulnerability-detection.png b/public/images/homepage/vulnerability-detection.png
new file mode 100644
index 0000000..a558453
Binary files /dev/null and b/public/images/homepage/vulnerability-detection.png differ
diff --git "a/public/images/homepage/web-\351\246\226\351\241\265-\346\234\252\347\231\273\345\275\225.png" "b/public/images/homepage/web-\351\246\226\351\241\265-\346\234\252\347\231\273\345\275\225.png"
new file mode 100644
index 0000000..4219d74
Binary files /dev/null and "b/public/images/homepage/web-\351\246\226\351\241\265-\346\234\252\347\231\273\345\275\225.png" differ