diff --git a/.eslintrc.json b/.eslintrc.json
index ca4b8e9..c7458b8 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,6 +1,10 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"],
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript"
+  ],
   "rules": {
-    "@next/next/no-img-element": "off" // 或者 "error"，取决于你希望是警告还是错误
+    "@next/next/no-img-element": "off", // 或者 "error"，取决于你希望是警告还是错误
+    "react-hooks/rules-of-hooks": "off"
   }
-}
+}
\ No newline at end of file
diff --git a/example.json b/example.json
new file mode 100644
index 0000000..8b0aa07
--- /dev/null
+++ b/example.json
@@ -0,0 +1,42 @@
+[
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "http://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "http://preview.soyootech.com/temp/B.html"
+    },
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "http://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "http://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "http://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "http://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "http://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "http://preview.soyootech.com/temp/A.html"
+    }
+]
\ No newline at end of file
diff --git a/postcss.config.mjs b/postcss.config.mjs
index 482f85b..f734f43 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,4 +1,3 @@
-import postcssPxtorem from 'postcss-pxtorem';
 
 /** @type {import('postcss-load-config').Config} */
 const config = {
diff --git a/src/app/[[...lang]]/components/more.tsx b/src/app/[[...lang]]/components/more.tsx
deleted file mode 100644
index c1f415a..0000000
--- a/src/app/[[...lang]]/components/more.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Link from "next/link"
-
-export default function More(props: {dict: Record<string, string>, lang: string[]}) {
-    const { dict } = props
-    return <>
-    <Link href="#contact">
-    
-        <div className="flex flex-col justify-center items-center 
-        text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] w-[280px] h-[280px]"
-        style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)' }}>
-            <div>{ dict.seeMore }</div> 
-            <div>{ dict.contactUs1 }</div>
-        </div>
-    </Link>
-        </>
-    
-}
\ No newline at end of file
diff --git a/src/app/[[...lang]]/page.tsx b/src/app/[[...lang]]/page.tsx
index 4c9ba8b..59aabbd 100644
--- a/src/app/[[...lang]]/page.tsx
+++ b/src/app/[[...lang]]/page.tsx
@@ -1,219 +1,124 @@
-
-
-
-
-
-import { getDictionary } from '@/dictionaries';
+import { getDictionary } from "@/dictionaries";
 import Form from "./components/form";
 import Header from "@/app/components/header";
 import Footer from "@/app/components/footer";
-import More from './components/more';
+
+import Examples from "../components/Examples";
 
 type CaseType = {
-    img: string
-}
+  img: string;
+};
 export type PropsType = {
-    params: {
-      lang: string[];
-    };
-}
+  params: {
+    lang: string[];
+    caseList: CaseType[];
+  };
+};
 
+export default async function Home(props: { params: { lang: string[] }; caseList: CaseType[] }) {
+  const lang = props.params.lang || ["zh"];
 
+  const dict = await getDictionary(lang[0]);
 
-export default async function Home (props: PropsType) {
-    const lang = props.params.lang || ['zh'];
-    const dict = await getDictionary(lang[0]);
-    const caseList: CaseType[] = [
-        { img: '/home/case_1.png' },
-        { img: '/home/case_2.png' },
-        { img: '/home/case_3.png' },
-        { img: '/home/case_3.png' },
-        { img: '/home/case_1.png' },
-        { img: '/home/case_2.png' },
-        { img: '/home/case_3.png' },
-        { img: '/home/case_3.png' },
-        { img: '/home/case_1.png' },
-        { img: '/home/case_2.png' },
-        { img: '/home/case_3.png' },
-        { img: '/home/case_3.png' },
-        { img: '/home/case_1.png' },
-        { img: '/home/case_2.png' },
-        { img: '/home/case_3.png' },
-    ]
-    return <>
-        <div className='w-full flex flex-col items-center'>
-            <Header dict={dict} lang={lang} />
-            <div className="w-[1440px] relative pt-[80px]" 
-            >
-                <div className='main'>
-                    <div className="w-full h-[770px] pl-[72px] relative" id="home">
-                        <img
-                            className="absolute right-[-40px] w-[1520px] h-[770px]"
-                            src="/home/img_header.png"
-                            alt=""
-                        
-                        />
-                        <div 
-                            className="text-[46px] leading-[62px] w-[639px] text-center pt-[279px]"
-                        >
-                            <div 
-                            className="font-black"
-                            style={{
-                                'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)',
-                                'backgroundClip': 'text',
-                                'WebkitTextFillColor': 'transparent',
-                                'backgroundSize': 'contain'
-                            }}>
-                                {dict.FocusingOnPlayableAds}
-                            </div>
-                            <div 
-                            className="font-black"
-                            style={{
-                                'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)',
-                                'backgroundClip': 'text',
-                                'WebkitTextFillColor': 'transparent'
-                            }}>
-                                {dict.goOverseas}
-                            </div>
-                        </div>
-                    </div>
-                    <div className="w-full h-[428px] relative" id="service">
-                        <img
-                            className="absolute left-[-214px] w-[969px] h-[428px]"
-                            src="/home/img_bg2.png"
-                            alt=""
-                        
-                        />
-                        <div className="absolute w-[770px] text-[32px] top-[184px] right-[95px] text-[#333333] text-right font-semibold">
-                        { dict.customized }
-                        </div>
-                    </div>
-                
-                    <div className="w-full h-[403px] relative">
-                        <img
-                            className="absolute right-[-100px] w-[888px] h-[403px]"
-                            src="/home/img_AB.png"
-                            alt=""
-                        
-                        />
-                        <div className="absolute w-[662px] text-[32px] top-[160px] left-[105px] text-[#333333] text-left font-semibold">
-                        { dict.ABTesting}
-                        </div>
-                        <div className="absolute w-[680px] text-[32px] top-[204px] left-[105px] text-[#333333] text-left font-semibold">
-                        { dict.iterateGameplay }
-                        </div>
-                    </div>
-                    <div className="w-full h-[392px] relative">
-                        <img
-                            className="absolute w-[731px] h-[392px] left-[-33px]"
-                            src="/home/img_mutilan.png"
-                            alt=""
-                        
-                        />
-                        <div className="absolute w-[520px] text-[32px] top-[197px] right-[95px] text-[#333333] text-right font-semibold">
-                        { dict.multiLanguage }
-                        </div>
-                        <div className="absolute w-[520px] text-[32px] top-[242px] right-[95px] text-[#333333] text-right font-semibold">
-                        { dict.breakingGeographical }
-                        </div>
-                    </div>
-                    <div className="w-full h-[317px] relative mt-[83px]">
-                        <img
-                            className="absolute right-0 w-[742px] h-[317px]"
-                            src="/home/img_Omnichannel.png"
-                            alt=""
-                        
-                        />
-                        <div className="absolute w-[680px] text-[32px] top-[124px] left-[105px] text-[#333333] text-left font-semibold">
-                        { dict.allChannel }
-                        </div>
-                        <div className="absolute w-[680px] text-[32px] top-[169px] left-[105px] text-[#333333] text-left font-semibold">
-                        { dict.expandInfluence }
-                        </div>
-                    </div>      
-                
-                    <div className="w-full h-[317px] relative mt-[83px]">
-                        <img
-                            className="absolute left-[-329px] w-[1250px] h-[357px]"
-                            src="/home/img_3.png"
-                            alt=""
-                        
-                        />
-                        <div className="absolute w-[691px] text-[32px] top-[100px] right-[95px] text-[#333333] text-right font-semibold">
-                        { dict.lightweightDeployment }
-                        </div>
-                        
-                        <div className="absolute w-[712px] text-[32px] top-[145px] right-[95px] text-[#333333] text-right font-semibold">
-                        { dict.simplifyProcess }
-                        </div>
-                    </div>
-                        <div className="w-full flex flex-col justify-center items-center mt-[98px]" id="case">
-                        
-                            <div 
-                                className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
-                                style={{
-                                    background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
-                                    backgroundClip: 'text',
-                                    WebkitTextFillColor: 'transparent'
-                                }}
-                            >{ dict.caseGallery }</div>
-                            {/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */}
-                                
-                        </div>
-                    
-                    <div className="w-full px-[40px] flex flex-wrap justify-between mt-[34px] mb-[83px]">
-                        {
-                            caseList.map((item: CaseType, index: number) => {
-                                return <div key={'key'+index} className="cursor-pointer relative group mb-[60px]">
-                                    <div className='hover:scale-[1.25] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] w-[280px] h-[280px]'>
-                                        <img
-                                            className="rounded-[60px] w-full
-                                            transition ease-in-out duration-300 w-[280px] h-[280px]"
-                                            src={item.img}
-                                            alt=""
-                                        />
-                                        <div className='absolute bottom-0 w-full h-[81px] bg-[#002653] text-center 
-                                        text-white text-[30px] hidden group-hover:block '
-                                        style={{borderRadius: '0px 0px 60px 60px', lineHeight: '81px'}}
-                                        >
-                                            {dict.clickToPlay}
-                                        </div>
-                                    </div>
-                                
-                                </div>
-                            })
-                        }
-                        <div className="flex flex-col justify-center items-center 
-                        text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] mb-[50px] w-[280px] h-[280px]"
-                        style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)' }}>
-                            <More dict={dict} lang={lang} />
-                        </div>
-                    </div>  
-                    
-            
-                    <div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]" id="contact">
-                        <div 
-                            className="leading-[34px] text-[36px] font-black w-[300px] mb-[11px] text-center"
-                            style={{
-                                background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
-                                backgroundClip: 'text',
-                                WebkitTextFillColor: 'transparent'
-                            }}
-                        >{ dict.contactUs }</div>
-                    </div>  
-                    <div className="w-full mb-[60px]">
-                        <Form />
-                    </div>
-                    <div className="w-full flex justify-center text-[19px] text-[#59676C] pb-[52px] mb-[47px] border-b-1 border-solid border-[#D8D8D8]"
-                        style={{ borderBottom: '1px solid #D8D8D8' }}
-                    >
-                    { dict.businessCooperation }info@soyootech.com
-                    </div>
-                <div>
-                    <Footer dict={dict} />
+  return (
+    <>
+      <div className="w-full flex flex-col items-center">
+        <Header dict={dict} lang={lang} />
+        <div className="w-[1440px] relative pt-[80px]">
+          <div className="main">
+            <div className="w-full h-[770px] pl-[72px] relative" id="home">
+              <img className="absolute right-[-40px] w-[1520px] h-[770px]" src="/home/img_header.png" alt="" />
+              <div className="text-[46px] leading-[62px] w-[639px] text-center pt-[279px]">
+                <div
+                  className="font-black"
+                  style={{
+                    background: "linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)",
+                    backgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                    backgroundSize: "contain",
+                  }}
+                >
+                  {dict.FocusingOnPlayableAds}
                 </div>
+                <div
+                  className="font-black"
+                  style={{
+                    background: "linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)",
+                    backgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                  }}
+                >
+                  {dict.goOverseas}
                 </div>
+              </div>
             </div>
+            <div className="w-full h-[428px] relative" id="service">
+              <img className="absolute left-[-214px] w-[969px] h-[428px]" src="/home/img_bg2.png" alt="" />
+              <div className="absolute w-[770px] text-[32px] top-[184px] right-[95px] text-[#333333] text-right font-semibold">{dict.customized}</div>
+            </div>
+
+            <div className="w-full h-[403px] relative">
+              <img className="absolute right-[-100px] w-[888px] h-[403px]" src="/home/img_AB.png" alt="" />
+              <div className="absolute w-[662px] text-[32px] top-[160px] left-[105px] text-[#333333] text-left font-semibold">{dict.ABTesting}</div>
+              <div className="absolute w-[680px] text-[32px] top-[204px] left-[105px] text-[#333333] text-left font-semibold">{dict.iterateGameplay}</div>
+            </div>
+            <div className="w-full h-[392px] relative">
+              <img className="absolute w-[731px] h-[392px] left-[-33px]" src="/home/img_mutilan.png" alt="" />
+              <div className="absolute w-[520px] text-[32px] top-[197px] right-[95px] text-[#333333] text-right font-semibold">{dict.multiLanguage}</div>
+              <div className="absolute w-[520px] text-[32px] top-[242px] right-[95px] text-[#333333] text-right font-semibold">{dict.breakingGeographical}</div>
+            </div>
+            <div className="w-full h-[317px] relative mt-[83px]">
+              <img className="absolute right-0 w-[742px] h-[317px]" src="/home/img_Omnichannel.png" alt="" />
+              <div className="absolute w-[680px] text-[32px] top-[124px] left-[105px] text-[#333333] text-left font-semibold">{dict.allChannel}</div>
+              <div className="absolute w-[680px] text-[32px] top-[169px] left-[105px] text-[#333333] text-left font-semibold">{dict.expandInfluence}</div>
+            </div>
+
+            <div className="w-full h-[317px] relative mt-[83px]">
+              <img className="absolute left-[-329px] w-[1250px] h-[357px]" src="/home/img_3.png" alt="" />
+              <div className="absolute w-[691px] text-[32px] top-[100px] right-[95px] text-[#333333] text-right font-semibold">{dict.lightweightDeployment}</div>
+
+              <div className="absolute w-[712px] text-[32px] top-[145px] right-[95px] text-[#333333] text-right font-semibold">{dict.simplifyProcess}</div>
+            </div>
+            <div className="w-full flex flex-col justify-center items-center mt-[98px]" id="case">
+              <div
+                className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
+                style={{
+                  background: "linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)",
+                  backgroundClip: "text",
+                  WebkitTextFillColor: "transparent",
+                }}
+              >
+                {dict.caseGallery}
+              </div>
+              {/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */}
+            </div>
+
+            <Examples dict={dict} lang={lang} />
+
+            <div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]" id="contact">
+              <div
+                className="leading-[34px] text-[36px] font-black w-[300px] mb-[11px] text-center"
+                style={{
+                  background: "linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)",
+                  backgroundClip: "text",
+                  WebkitTextFillColor: "transparent",
+                }}
+              >
+                {dict.contactUs}
+              </div>
+            </div>
+            <div className="w-full mb-[60px]">
+              <Form />
+            </div>
+            <div className="w-full flex justify-center text-[19px] text-[#59676C] pb-[52px] mb-[47px] border-b-1 border-solid border-[#D8D8D8]" style={{ borderBottom: "1px solid #D8D8D8" }}>
+              {dict.businessCooperation}info@soyootech.com
+            </div>
+            <div>
+              <Footer dict={dict} />
+            </div>
+          </div>
         </div>
+      </div>
     </>
-}
\ No newline at end of file
+  );
+}
diff --git a/src/app/components/Examples.tsx b/src/app/components/Examples.tsx
new file mode 100644
index 0000000..d655510
--- /dev/null
+++ b/src/app/components/Examples.tsx
@@ -0,0 +1,103 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import More from "./more";
+
+export default function Examples(props: { dict: Record<string, string>; lang: string[] }) {
+  const [previewInfo, setPreviewInfo] = useState({
+    url: "",
+    preview: false,
+  });
+
+  const [examples, setExamples] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const res = await fetch(`https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/example.json`);
+      const dataSource = await res.json();
+      setExamples(dataSource);
+    };
+
+    fetchData();
+  }, []);
+
+  const [progress, setProgress] = useState(0);
+
+  const timer = useRef<NodeJS.Timeout>();
+  useEffect(() => {
+    if (previewInfo.preview) {
+      setProgress(0);
+      timer.current = setInterval(() => {
+        if (progress === 100) {
+          clearInterval(timer.current);
+          return;
+        }
+        setProgress((prevProgress) => {
+          if (prevProgress >= 90) {
+            clearInterval(timer.current);
+            return 90;
+          }
+          return prevProgress + 10;
+        });
+      }, 1000);
+    }
+  }, [previewInfo.preview]);
+
+  return (
+    <>
+      <div className="w-[96%] flex flex-wrap mt-[34px] mb-[83px] mx-auto">
+        {examples.map((item: { icon: string | undefined; url: string }, index: number) => {
+          return (
+            <div key={"key" + index} className="cursor-pointer relative group mb-[60px] w-1/4 flex justify-center">
+              <div className="hover:scale-[1.15] transition ease-in-out duration-300 hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] w-[280px] h-[280px]">
+                <img className="rounded-[60px] w-[280px] h-[280px]" src={item.icon} alt="" />
+                <div
+                  className="absolute bottom-0 w-full h-[81px] bg-[#002653] text-center text-white text-[30px] hidden group-hover:block "
+                  style={{ borderRadius: "0px 0px 60px 60px", lineHeight: "81px" }}
+                  onClick={() => {
+                    document.body.style.overflow = "hidden";
+                    setPreviewInfo({
+                      preview: true,
+                      url: item.url,
+                    });
+                  }}
+                >
+                  {props.dict.clickToPlay}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+        <div
+          className="flex flex-col justify-center items-center 
+                        text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] mb-[50px] w-[280px] h-[280px]"
+          style={{ background: "radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)" }}
+        >
+          <More dict={props.dict} lang={props.lang} />
+        </div>
+      </div>
+
+      {previewInfo.preview && (
+        <div
+          className="fixed left-0 right-0 top-0 bottom-0 bg-black/60 z-[2000]"
+          onClick={() => {
+            document.body.style.overflow = "auto";
+            setPreviewInfo({
+              preview: false,
+              url: "",
+            });
+          }}
+        >
+          <div
+            className="flex justify-center w-[370px] h-[610px] items-center fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] mx-auto border rounded-lg p-4 bg-white"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            {progress < 90 && <div className="text-red-500 font-bold text-3xl text-center absolute z-[30]">{progress}%</div>}
+            <iframe src={previewInfo.url} className="w-full h-full" />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx
index 8a3d83b..2fce33c 100644
--- a/src/app/components/header.tsx
+++ b/src/app/components/header.tsx
@@ -1,146 +1,123 @@
-'use client'
+"use client";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
-
-
-
 type NavType = {
   name: string;
   href: string;
-}
+};
 
-
-export default function Header(props: { dict: Record<string, string>, lang: string[] }) {
-  const { dict, lang } = props
-  const [activeTab, setActiveTab] = useState(dict.home)
-  const [show, setShow] = useState(false)
-  const [hash, setHash] = useState('#home')
+export default function Header(props: { dict: Record<string, string>; lang: string[] }) {
+  const { dict, lang } = props;
+  const [activeTab, setActiveTab] = useState(dict.home);
+  const [show, setShow] = useState(false);
+  const [hash, setHash] = useState("#home");
   useEffect(() => {
     const designWidth = 1440;
-    const deviceWidth = document.documentElement.clientWidth
-    let scale = 1
-    console.log('designWidth', deviceWidth)
+    const deviceWidth = document.documentElement.clientWidth;
+    let scale = 1;
+    console.log("designWidth", deviceWidth);
     if (deviceWidth <= 1440) {
       scale = deviceWidth / designWidth;
     }
-    console.log('scale', scale)
+    console.log("scale", scale);
     document.documentElement.style.fontSize = `${scale * 14.4}px`;
     switch (hash) {
-      case '#home':
-        const home = document.getElementById('home')
+      case "#home":
+        const home = document.getElementById("home");
         document.documentElement.scrollTo({
           top: home!.offsetTop - 80,
-          behavior: 'smooth'
+          behavior: "smooth",
         });
         break;
-      case '#service':
-        const service = document.getElementById('service')
+      case "#service":
+        const service = document.getElementById("service");
         document.documentElement.scrollTo({
           top: service!.offsetTop - 80,
-          behavior: 'smooth'
+          behavior: "smooth",
         });
         break;
-      case '#case':
-        const caseDom = document.getElementById('case')
+      case "#case":
+        const caseDom = document.getElementById("case");
         document.documentElement.scrollTo({
           top: caseDom!.offsetTop - 110,
-          behavior: 'smooth'
+          behavior: "smooth",
         });
         break;
-      case '#contact':
-          const contact = document.getElementById('contact')
-          document.documentElement.scrollTo({
-            top: contact!.offsetTop - 80,
-            behavior: 'smooth'
-          });
+      case "#contact":
+        const contact = document.getElementById("contact");
+        document.documentElement.scrollTo({
+          top: contact!.offsetTop - 80,
+          behavior: "smooth",
+        });
         break;
     }
-    
-
-
-  }, [hash])
+  }, [hash]);
 
   const navList: NavType[] = [
     {
       name: dict.home,
-      href: "#home"
+      href: "#home",
     },
     {
       name: dict.services,
-      href: "#service"
+      href: "#service",
     },
     {
       name: dict.caseGallery,
-      href: "#case"
+      href: "#case",
     },
     {
       name: dict.contactUs,
-      href: "#contact"
+      href: "#contact",
     },
-  ]
-  return (<>
-    <div className={`flex items-center px-[40px] h-[80px] border-b-1 border-solid 
-        border-[#D8D8D8] fixed bg-white z-[900] w-[1440px] justify-between`}
-      style={{ borderBottom: '1px solid #D8D8D8' }}
-    >
-      <div className="cursor-pointer">
-        <img
-          className="w-[180px] h-[47px]"
-          src="/common/logo.png"
-          alt="logo"
-          onClick={() => setHash('#home')}
-        />
-      </div>
-      <div className={"flex flex-1 items-end h-[80px] mx-[13px]"}
+  ];
+  return (
+    <>
+      <div
+        className={`flex items-center px-[40px] h-[80px] border-b-1 border-solid 
+        border-[#D8D8D8] fixed bg-white z-[100] w-[1440px] justify-between]`}
+        style={{ borderBottom: "1px solid #D8D8D8" }}
       >
-        {
-          navList.map((item: NavType) => (
+        <div className="cursor-pointer">
+          <img className="w-[180px] h-[47px]" src="/common/logo.png" alt="logo" onClick={() => setHash("#home")} />
+        </div>
+        <div className={"flex flex-1 items-end h-[80px] mx-[13px]"}>
+          {navList.map((item: NavType) => (
             <div onClick={() => setHash(item.href)} key={item.name}>
               <div className="text-center cursor-pointer" onClick={() => setActiveTab(item.name)}>
                 <div className="my-[10px] w-[144px] text-[18px]">{item.name}</div>
-                {
-                  activeTab === item.name ?
-                    <img src="/common/tab_checked.png" className="w-[144px] h-[8px]" alt="" /> :
-                    <div className="h-[8px]"></div>
-                }
+                {activeTab === item.name ? <img src="/common/tab_checked.png" className="w-[144px] h-[8px]" alt="" /> : <div className="h-[8px]"></div>}
               </div>
             </div>
-          ))
-        }
-      </div>
-      <div className="w-[129px]">
-          <div className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6] 
+          ))}
+        </div>
+        <div className="w-[129px]">
+          <div
+            className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6] 
         border-[1px] border-[#eeeeee] rounded-[3px] px-[10px] mt-[18px] cursor-pointer"
-            onClick={() => setShow(!show)}>
-            <img
-              src="/common/earth.png"
-              className="w-[16.5px] h-[16.5px]"
-              alt="logo"
-            />
+            onClick={() => setShow(!show)}
+          >
+            <img src="/common/earth.png" className="w-[16.5px] h-[16.5px]" alt="logo" />
             <div className="flex-1 text-[14px] text-[#333333] mx-[9px]">{dict?.lang}</div>
-            <img
-              className={`transition-transform duration-300 transform rotate-0 ${show && 'rotate-180'} w-[10px] h-[5px]`}
-              src="/common/arrow.png"
-              alt="logo"
-            />
+            <img className={`transition-transform duration-300 transform rotate-0 ${show && "rotate-180"} w-[10px] h-[5px]`} src="/common/arrow.png" alt="logo" />
           </div>
           {
-
-            <div className={`absolute ${!show && 'hidden'} left-0 right-0 top-0 bottom-0 left-0 top-0 z-[10000]`} onClick={() => setShow(false)}>
-              <Link href={lang[0] === 'zh' ? '/en' : '/'}>
-                <div className={`absolute right-[40px] top-[68px] w-[129px] h-[28px] leading-[28px]
-                  bg-[#EEF1F6] text-center transition-all duration-300 origin-top group-hover:block`}>
+            <div className={`absolute ${!show && "hidden"} left-0 right-0 top-0 bottom-0 left-0 top-0 z-[10000]`} onClick={() => setShow(false)}>
+              <Link href={lang[0] === "zh" ? "/en" : "/"}>
+                <div
+                  className={`absolute right-[40px] top-[68px] w-[129px] h-[28px] leading-[28px]
+                  bg-[#EEF1F6] text-center transition-all duration-300 origin-top group-hover:block`}
+                >
                   <div className="text-[14px] text-[#333333]">{dict?.lang1}</div>
                 </div>
               </Link>
             </div>
-
           }
+        </div>
       </div>
-    </div>
-    <div className={`${!show && 'hidden'} fixed bg-[#000000] opacity-[0] left-0 top-0 bottom-0 right-0 z-[899]`} onClick={() => setShow(false)}></div>
-    {/* <div className="h-[80px] container"></div> */}
-  </>
-  )
-}
\ No newline at end of file
+      <div className={`${!show && "hidden"} fixed bg-[#000000] opacity-[0] left-0 top-0 bottom-0 right-0 z-[899]`} onClick={() => setShow(false)}></div>
+      {/* <div className="h-[80px] container"></div> */}
+    </>
+  );
+}
diff --git a/src/app/components/more.tsx b/src/app/components/more.tsx
new file mode 100644
index 0000000..94bb672
--- /dev/null
+++ b/src/app/components/more.tsx
@@ -0,0 +1,19 @@
+import Link from "next/link";
+
+export default function More(props: { dict: Record<string, string>; lang: string[] }) {
+  const { dict } = props;
+  return (
+    <>
+      <Link href="#contact">
+        <div
+          className="flex flex-col justify-center items-center 
+        text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] w-[280px] h-[280px]"
+          style={{ background: "radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)" }}
+        >
+          <div>{dict.seeMore}</div>
+          <div>{dict.contactUs1}</div>
+        </div>
+      </Link>
+    </>
+  );
+}