diff --git a/public/arrow.svg b/public/arrow.svg
new file mode 100644
index 0000000..3cc2dc2
--- /dev/null
+++ b/public/arrow.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150.87 98.66">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke-dasharray: 0 0 12.01 6.01;
+      }
+
+      .cls-1, .cls-2 {
+        fill: none;
+        stroke: #fff;
+        stroke-miterlimit: 10;
+        stroke-width: .5px;
+      }
+
+      .cls-3 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="cls-2" d="m16.28.15s-1.35,1.85-3.26,5.03"/>
+  <path class="cls-1" d="m10.08,10.41C5.57,18.99.25,31.91.25,45.17c0,15.81,9.42,31.28,28.9,31.28,34.63.26,33.05-34.52,68.94-36.04,36.21-1.54,52.62,16.45,52.53,25.4-.14,13.29-18.65,22.22-31.6,18.9-18.19-5.09-23.45-13.2-33.4-14.21-8.31-.85-15.31,1.65-14.47,10.49.37,3.91,5.04,5.56,8.24,8.92"/>
+  <path class="cls-2" d="m81.17,92.31c.84,1.54,1.32,3.41,1.18,5.81"/>
+  <polygon class="cls-3" points="80.33 96.4 80.7 96.07 82.33 97.93 84.06 96.17 84.41 96.52 82.31 98.66 80.33 96.4"/>
+</svg>
\ No newline at end of file
diff --git a/public/images/home.png b/public/images/home.png
new file mode 100644
index 0000000..60a4dea
Binary files /dev/null and b/public/images/home.png differ
diff --git a/public/images/step-1.png b/public/images/step-1.png
new file mode 100644
index 0000000..bf909df
Binary files /dev/null and b/public/images/step-1.png differ
diff --git a/public/images/step-2.png b/public/images/step-2.png
new file mode 100644
index 0000000..16bcf4e
Binary files /dev/null and b/public/images/step-2.png differ
diff --git a/public/images/step-3.png b/public/images/step-3.png
new file mode 100644
index 0000000..77248f6
Binary files /dev/null and b/public/images/step-3.png differ
diff --git a/public/preact.svg b/public/preact.svg
new file mode 100644
index 0000000..2227c94
--- /dev/null
+++ b/public/preact.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#673AB8">
+  <path d="m8 0 6.93 4v8L8 16l-6.93-4V4L8 0Z"></path>
+  <path d="M2.99 11.91c.92 1.18 3.84.28 6.6-1.87 2.76-2.16 4.34-4.78 3.42-5.95-.92-1.18-3.84-.28-6.6 1.87-2.76 2.16-4.34 4.78-3.42 5.95Zm.4-.3c-.31-.4-.18-1.16.4-2.12a12.31 12.31 0 0 1 2.92-3.14C8 5.36 9.33 4.62 10.46 4.28c1.08-.33 1.85-.28 2.16.11.3.4.17 1.16-.41 2.12a12.31 12.31 0 0 1-2.92 3.14 12.3 12.3 0 0 1-3.75 2.07c-1.08.33-1.85.28-2.16-.11Zm9.62.3c.92-1.17-.66-3.8-3.42-5.95C6.83 3.81 3.91 2.91 3 4.1c-.92 1.17.66 3.8 3.42 5.95 2.76 2.15 5.68 3.05 6.6 1.87Zm-.4-.3c-.3.39-1.07.44-2.15.11A12.3 12.3 0 0 1 6.7 9.65c-1.27-1-2.3-2.12-2.92-3.14-.58-.96-.71-1.73-.4-2.12.3-.39 1.07-.44 2.15-.11 1.13.34 2.47 1.08 3.75 2.07 1.27 1 2.3 2.12 2.92 3.14.58.96.71 1.73.4 2.12ZM8 9.06a1.06 1.06 0 1 0 0-2.12 1.06 1.06 0 0 0 0 2.12Z" fill="#fff"></path>
+</svg>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index aefeab9..e12ec29 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,50 +3,62 @@ import Head from 'next/head';
 import Link from 'next/link';
 import { FaGithub } from 'react-icons/fa';
 import { RiTwitterXFill, RiRocketLine } from 'react-icons/ri';
-import { PiAcorn } from 'react-icons/pi';
 
 import { Header } from '@/components/home/header';
 import { HoverEffect } from '@/components/home/card-hover-effect';
 import { ContainerScroll } from '@/components/home/container-scroll-animation';
 import { BackgroundBeams } from '@/components/home/background-beams';
 import { Footer } from '@/components/home/footer';
+import { UseSteps } from '@/components/home/useSteps';
 import { PROJECT_Name, PATHS } from '@/utils';
 
 const projects = [
   {
-    icon: <PiAcorn className="w-8 h-8" />,
-    title: 'title1',
-    description: 'desc1!',
+    icon: '/react.svg',
+    title: 'React',
+    description: 'JavaScript',
     link: '/a',
   },
   {
-    icon: <PiAcorn className="w-8 h-8" />,
-    title: 'title2',
-    description: 'desc2',
+    icon: '/react.svg',
+    title: 'React',
+    description: 'TypeScript',
     link: '/b',
   },
   {
-    icon: <PiAcorn className="w-8 h-8" />,
-    title: 'title3',
-    description: 'desc3',
+    icon: '/vue.svg',
+    title: 'Vue',
+    description: 'JavaScript',
     link: '/c',
   },
   {
-    icon: <PiAcorn className="w-8 h-8" />,
-    title: 'title4',
-    description: 'desc4',
+    icon: '/vue.svg',
+    title: 'Vue',
+    description: 'TypeScript',
     link: '/d',
   },
   {
-    icon: <PiAcorn className="w-8 h-8" />,
-    title: 'title5',
-    description: 'desc5',
+    icon: '/preact.svg',
+    title: 'Preact',
+    description: 'JavaScript',
     link: '/e',
   },
   {
-    icon: <PiAcorn className="w-8 h-8" />,
-    title: 'title6',
-    description: 'desc6',
+    icon: '/preact.svg',
+    title: 'Preact',
+    description: 'TypeScript',
+    link: '/f',
+  },
+  {
+    icon: '/node.svg',
+    title: 'Vanilla',
+    description: 'JavaScript',
+    link: '/f',
+  },
+  {
+    icon: '/node.svg',
+    title: 'Vanilla',
+    description: 'TypeScript',
     link: '/f',
   },
 ];
@@ -64,11 +76,11 @@ const socialIcons = [
 
 const router = [
   {
-    title: 'page1',
+    title: 'Docs',
     link: '/a',
   },
   {
-    title: 'page2',
+    title: 'Blog',
     link: '/b',
   },
 ];
@@ -112,7 +124,7 @@ const Home: NextPage = () => {
                     '0 2px 15px -3px var(--next-devtools-widget-shadow), 0 4px 6px -4px var(--next-devtools-widget-shadow)',
                 }}
               >
-                <img alt="preview" className="object-contain" src="/images/preview.png" />
+                <img alt="preview" className="object-contain" src="/images/home.png" />
               </div>
             }
             titleComponent={
@@ -131,13 +143,21 @@ const Home: NextPage = () => {
         </header>
 
         <main className="container mt-12 mx-auto bg-[#111111]">
+          <h3 className="text-white mx-auto text-center text-3xl">
+            Boot a shareable environment in <strong className="text-[#1779ff]">milliseconds</strong>
+          </h3>
           <HoverEffect items={projects} />
         </main>
-
+        <section className="container relative mx-auto mb-20 space-y-6">
+          <hr className="border-t border-gray-300 h-px top-[-1em] absolute w-full border-dashed" />
+          <div className="flex ">
+            <UseSteps />
+          </div>
+        </section>
         <div className="container mx-auto mt-20 mb-20 space-y-6">
           <div className="text-center">{getStartedButton}</div>
         </div>
-        <Footer />
+        <Footer icons={socialIcons} />
       </div>
     </>
   );
diff --git a/src/components/home/card-hover-effect/index.tsx b/src/components/home/card-hover-effect/index.tsx
index 1dc271e..779c1f4 100644
--- a/src/components/home/card-hover-effect/index.tsx
+++ b/src/components/home/card-hover-effect/index.tsx
@@ -16,7 +16,7 @@ export function Card({ className, children }: { className?: string; children: Re
       )}
     >
       <div className="relative z-50">
-        <div className="p-4">{children}</div>
+        <div className="p-4 flex space-x-4">{children}</div>
       </div>
     </div>
   );
@@ -29,9 +29,7 @@ export function CardTitle({
   className?: string;
   children: React.ReactNode;
 }) {
-  return (
-    <h4 className={cn('text-zinc-100 font-bold tracking-wide mt-4', className)}>{children}</h4>
-  );
+  return <h4 className={cn('text-zinc-100 font-bold tracking-wide', className)}>{children}</h4>;
 }
 
 export function CardDescription({
@@ -55,7 +53,7 @@ export function HoverEffect({
   items: {
     title: ReactNode;
     description: ReactNode;
-    icon: ReactNode;
+    icon: string;
     link: string;
   }[];
   className?: string;
@@ -63,7 +61,7 @@ export function HoverEffect({
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
 
   return (
-    <div className={cn('grid grid-cols-1 md:grid-cols-2  lg:grid-cols-3  py-10', className)}>
+    <div className={cn('grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4  py-10', className)}>
       {items.map((item, idx) => (
         <Link
           key={item?.link}
@@ -90,11 +88,11 @@ export function HoverEffect({
             )}
           </AnimatePresence>
           <Card>
-            <CardTitle className="flex flex-col space-y-4">
-              {item.icon}
-              <span>{item.title}</span>
-            </CardTitle>
-            <CardDescription>{item.description}</CardDescription>
+            <img className="rounded-[6px] w-1/4" src={item.icon} />
+            <div className="flex flex-col justify-center w-3/4">
+              <CardTitle>{item.title}</CardTitle>
+              <CardDescription>{item.description}</CardDescription>
+            </div>
           </Card>
         </Link>
       ))}
diff --git a/src/components/home/footer/index.tsx b/src/components/home/footer/index.tsx
index 56ee2b4..8f6b977 100644
--- a/src/components/home/footer/index.tsx
+++ b/src/components/home/footer/index.tsx
@@ -1,13 +1,152 @@
 import React from 'react';
 import Link from 'next/link';
+interface Icon {
+  icon: React.ReactNode;
+  link: string;
+}
+interface LinkProps {
+  name: string;
+  link: string;
+}
+interface FooterProps {
+  icons: Icon[];
+}
 
-export const Footer: React.FC = () => {
+const Product: LinkProps[] = [
+  {
+    name: 'Features',
+    link: '/',
+  },
+  {
+    name: 'Pricing',
+    link: '/',
+  },
+  {
+    name: 'Documentation',
+    link: '/',
+  },
+  {
+    name: 'Changelog',
+    link: '/',
+  },
+];
+const Resources: LinkProps[] = [
+  {
+    name: 'Blog',
+    link: '/',
+  },
+  {
+    name: 'Tutorials',
+    link: '/',
+  },
+  {
+    name: 'Community',
+    link: '/',
+  },
+  {
+    name: 'FAQ',
+    link: '/',
+  },
+];
+const About: LinkProps[] = [
+  {
+    name: 'Company',
+    link: '/',
+  },
+  {
+    name: 'Team',
+    link: '/',
+  },
+  {
+    name: 'Careers',
+    link: '/',
+  },
+  {
+    name: 'Contact Us',
+    link: '/',
+  },
+];
+const Partners: LinkProps[] = [
+  {
+    name: 'GitHub',
+    link: '/',
+  },
+  {
+    name: 'Stack Overflow',
+    link: '/',
+  },
+  {
+    name: 'Careers',
+    link: '/',
+  },
+  {
+    name: 'VS Code',
+    link: '/',
+  },
+];
+// 渲染链接
+const renderLink = (products: LinkProps[]) =>
+  products.map((item) => (
+    <li>
+      <Link href={item.link}>{item.name}</Link>
+    </li>
+  ));
+
+const renderIcon = (icons: Icon[]) =>
+  icons.map((icon) => (
+    <a
+      href={icon.link}
+      key={icon.link}
+      className="p-2 rounded-md text-white border border-white/30 hover:bg-white/10 transition-colors"
+    >
+      {icon.icon}
+    </a>
+  ));
+
+export const Footer: React.FC<FooterProps> = ({ icons }) => {
   return (
-    <footer className="flex items-center justify-between py-16 px-10 mx-auto border-t border-t-[#e5e5e5]/10">
-      <Link href="https://github.com/xun082/online-edit-web" className="text-white">
-        online edit
-      </Link>
-      <span className="text-white opacity-50">Published under MIT License</span>
+    <footer className="py-16 px-10 mx-auto border-t border-t-[#e5e5e5]/10">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex">
+          {/* 左侧: 信息相关内容 (占1/3宽度) */}
+          <div className="w-1/3 pr-8">
+            <div className="flex flex-col mb-4">
+              <h2 className="text-white font-bold text-3xl mb-2">Online Edit</h2>
+              <p className="text-white opacity-70">Made with ❤️ by Coder</p>
+              <div className="flex mt-3 space-x-3">{renderIcon(icons)}</div>
+            </div>
+            <p className="text-white opacity-50">
+              2024 © All Rights Reserved
+              {/* 一个简单易用的在线代码编辑器，提供高效便捷的编程体验。无论您是初学者还是专业人士，我们都能满足您的所有需求。 */}
+            </p>
+          </div>
+
+          {/* 右侧: 四个内容块 (占2/3宽度) */}
+          <div className="w-2/3 flex space-x-8">
+            <div className="flex-1">
+              <h4 className="text-white font-semibold mb-4">Product</h4>
+              <ul className="text-white opacity-70 space-y-2">{renderLink(Product)}</ul>
+            </div>
+            <div className="flex-1">
+              <h4 className="text-white font-semibold mb-4">Resources</h4>
+              <ul className="text-white opacity-70 space-y-2">{renderLink(Resources)}</ul>
+            </div>
+
+            <div className="flex-1">
+              <h4 className="text-white font-semibold mb-4">About Us</h4>
+              <ul className="text-white opacity-70 space-y-2">{renderLink(About)}</ul>
+            </div>
+            <div className="flex-1">
+              <h4 className="text-white font-semibold mb-4">Partners</h4>
+              <ul className="text-white opacity-70 space-y-2">{renderLink(Partners)}</ul>
+            </div>
+          </div>
+        </div>
+
+        {/* <div className="mt-12 text-center text-white opacity-50">
+          <p>© 2024 Online Editor. Published under MIT License.</p>
+        </div> */}
+      </div>
     </footer>
   );
 };
diff --git a/src/components/home/useSteps/index.tsx b/src/components/home/useSteps/index.tsx
new file mode 100644
index 0000000..08f75aa
--- /dev/null
+++ b/src/components/home/useSteps/index.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+
+const steps = [
+  {
+    title: 'Select or create a project',
+    image: '/images/step-1.png',
+    description1: 'Choose the right technology stack for your needs. ',
+    description2: 'If available, open an existing project.',
+  },
+  {
+    title: 'Code writing',
+    image: '/images/step-2.png',
+    description1: 'Write your code in the editor. ',
+    description2: 'Make necessary edits to the code.',
+  },
+  {
+    title: 'Run and Debug',
+    image: '/images/step-3.png',
+    description1: 'Execute the code to view the output. ',
+    description2: 'Utilize debugging tools to identify and fix issues.',
+  },
+];
+
+export const UseSteps: React.FC = () => {
+  return (
+    <div className="relative z-20 py-24 mx-auto col max-w-7xl px-0 flex flex-col items-center gap-24">
+      {steps.map((item, index) => (
+        <div
+          key={index}
+          className="w-full sm:w-3/4 gap-4 px-12 flex flex-col items-center lg:flex-row md:gap-16 relative"
+        >
+          <div className="relative col gap-4 basis-2/3 justify-center text-center md:text-start">
+            {index !== steps.length - 1 && (
+              <img
+                src="/arrow.svg"
+                alt="arrow"
+                className="absolute -left-20 top-36 xl:top-24 lg:block hidden"
+              />
+            )}
+            <h2 className="font-semibold tracking-tight text-[1.8rem] mb-4">
+              <span className="bg-text bg-gradient-to-r pb-1">{item.title}</span>
+            </h2>
+            <div className="flex flex-col gap-3">
+              <p className="body-md text-light " style={{ lineHeight: '1.5rem' }}>
+                {item.description1}
+              </p>
+              <p className="body-md text-light " style={{ lineHeight: '1.5rem' }}>
+                {item.description2}
+              </p>
+            </div>
+
+            <p className="absolute -left-16 text-5xl font-bold top-0 hidden md:block bg-hashed-text text-transparent bg-clip-text [-webkit-text-stroke:1px_#fafafa]">
+              {index + 1}
+            </p>
+          </div>
+          <div className="relative basis-4/5">
+            <div className="w-full h-full rounded-xl basis-2/5 absolute -right-6 -bottom-6 bg-gradient-to-r from-white/20 to-white"></div>
+            <div className="relative col justify-center overflow-hidden shadow-lg round-rect w-full border border-gray-400">
+              <img src={item.image} alt={item.title} />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0cae5da..404bf46 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -52,6 +52,8 @@ const config: Config = {
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        'hashed-text':
+          'repeating-linear-gradient(45deg,#fafafa,#fafafa 1px,transparent 0,transparent 6px)',
       },
       keyframes: {
         spotlight: {