Change the basic layout of the home page

pages/index.js

@@ -1,67 +1,82 @@
 import styles from "../styles/Home.module.css";
 import Link from "next/link";
 import { Button } from "@web3uikit/core";
+import { style } from "@mui/system";
+import { STATEMENT_TYPES } from "@babel/types";
+import { StyleSheetManager } from "styled-components";
 
 export default function Home() {
   return (
-    <div className={styles.container}>
-      <div className={styles.main}>
-        <div className="flex flex-row">
-          <div className="flex m-4">
+
+    <div className={styles.main}>
+      <div className={styles.headerCenter}>
+        <div className={styles.headerLogo}>
+          <a>
+            <img src="symbol.png" className={styles.headerLogoImg}></img> 
+          </a>
+        </div>
+
+        <nav>
+          <ul id="main-nav" className={styles.nav} >
+          <li>
             <a
               href="http://discord.gg/hWyBHrUDAk"
               target="_blank"
-              rel="noopener noreferrer"
-            >
-              [discord
-            </a>
-          </div>
-          <div className="flex m-4">
+              rel="noopener noreferrer">
+            Discord
+          </a>
+          </li>
+          <li>
             <a
               href="https://twitter.com/lenftapp"
               target="_blank"
               rel="noopener noreferrer"
             >
-              twitter
+            Twitter
             </a>
-          </div>
-          <div className="flex m-4">
-            <a
-              href="https://github.com/leNFT"
+          </li>
+          <li>
+          <a
+            href="https://github.com/leNFT"
               target="_blank"
               rel="noopener noreferrer"
             >
-              github
+            Github
             </a>
-          </div>
-          <div className="flex m-4">
-            <a
-              href="https://lenft.gitbook.io/lenft-docs/"
-              target="_blank"
-              rel="noopener noreferrer"
+          </li>
+          <li>
+          <a
+            href="https://lenft.gitbook.io/lenft-docs/"
+            target="_blank"
+            rel="noopener noreferrer"
             >
-              docs]
+            Docs
             </a>
-          </div>
-        </div>
-        <div className="flex flex-row mt-48">
+          </li>
+          <li>
           <Link href="/app">
             <a>
               <Button
                 onClick={function noRefCheck() {}}
-                size="xl"
                 color="blue"
                 theme="colored"
-                text="go to app"
+                text="Launch App"
               />
             </a>
           </Link>
-        </div>
-        <div className="flex flex-row m-16 max-w-lg text-center">
-          leNFT is a peer-to-pool NFT lending market. it allows you to get
-          instant liquidity using your NFTs as collateral
-        </div>
+          </li>
+        </ul>
+        </nav>
+      </div>
+
+      <div className={styles.main}>
+        <div className={styles.indexDescribe}>
+          <p className={styles.indexProtocolDescribe}>
+            leNFT is a Peer-To-Pool NFT Liquidity Protocol </p>
+          <p className={styles.indexProtocolDescribe2}>
+            Borrow using only your NFTs Gain interest on your ETH </p>
+       </div>
       </div>
-    </div>
+    </div>    
   );
 }

styles/Home.module.css

@@ -32,7 +32,7 @@
 }
 
 .title a {
-  color: #0070f3;
+  color: red;
   text-decoration: none;
 }
 
@@ -111,6 +111,70 @@
   margin-left: 0.5rem;
 }
 
+.headerCenter {
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  padding: 28px;
+  left: 0;
+  right: 0;
+}
+
+.headerLogo {
+  width: 100%;
+  max-width: 1600px;
+  display: flex;
+  flex-direction: row;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+}
+
+.headerLogoImg {
+  width: 4em;
+  height: 4em;
+}
+
+.nav {
+  display: flex;
+  justify-content: flex-end;
+  -webkit-box-align: center;
+  align-items: center;
+  margin-left: 50px;
+}
+
+.nav li {
+  margin-left: 80px;
+}
+
+.nav a {
+  text-align: center;
+  position: relative;
+}
+
+.nav button {
+  height: 56px;
+  min-width: 180px;
+}
+
+.indexDescribe {
+  display: flex;
+  flex-direction: column;
+}
+
+.indexProtocolDescribe {
+  padding: 20px;
+  font-size: 2rem;
+}
+
+.indexProtocolDescribe2 {
+  padding: 20px;
+  font-size: 1.5rem;
+  max-width: 350px;
+  font-size: 1.5rem;
+}
+
 @media (max-width: 600px) {
   .grid {
     width: 100%;