From f687529b335baaf8972390bda5727e44a628385e Mon Sep 17 00:00:00 2001
From: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com>
Date: Wed, 8 Feb 2023 17:04:10 -0500
Subject: [PATCH 1/4] update button

---
 packages/website/components/Hero.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/website/components/Hero.tsx b/packages/website/components/Hero.tsx
index 8a1a6e44725..d59f24c7950 100644
--- a/packages/website/components/Hero.tsx
+++ b/packages/website/components/Hero.tsx
@@ -53,7 +53,7 @@ export default function Hero() {
                   href="/docs/testnet-guide"
                   className="inline-flex items-center rounded-md border border-transparent bg-[#e30ead] px-5 py-3 text-base font-semibold text-white dark:text-neutral-100 hover:bg-[#bd0b90] hover:no-underline hover:text-white"
                 >
-                  Explore Snæfellsjökull Testnet 🌋
+                  Get started 🥁
                 </a>
               </div>
             </div>

From 45c6132255eadeaea7a25faffee9debba5eef446 Mon Sep 17 00:00:00 2001
From: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com>
Date: Wed, 8 Feb 2023 17:15:37 -0500
Subject: [PATCH 2/4] center the footer

---
 packages/website/components/Footer.tsx | 235 ++++++++++++-------------
 packages/website/theme.config.tsx      |  12 ++
 2 files changed, 124 insertions(+), 123 deletions(-)

diff --git a/packages/website/components/Footer.tsx b/packages/website/components/Footer.tsx
index 84c68d874f0..7b0ee7f352f 100644
--- a/packages/website/components/Footer.tsx
+++ b/packages/website/components/Footer.tsx
@@ -1,131 +1,120 @@
-import { ThemeSwitch, useConfig } from "nextra-theme-docs";
-
-export default function Footer({ menu }) {
-  const config = useConfig();
-
+export default function Footer() {
   return (
     <footer className="bg-neutral-100 dark:bg-neutral-900">
-      <div
-        className={`nx-mx-auto nx-flex nx-py-2 px-8 nx-border dark:nx-border-neutral-800 contrast-more:nx-border-neutral-400
-          ${menu && (config.darkMode)
-            ? 'nx-flex'
-            : 'nx-hidden'
-          }`}
-      >
-        {config.darkMode && <ThemeSwitch />}
-      </div>
-      <div className="grid grid-cols-2 gap-8 px-6 py-8 md:grid-cols-3 md:px-44">
-        <div>
-          <h2 className="mb-6 text-sm font-semibold text-neutral-500 uppercase dark:text-neutral-300">
-            About
-          </h2>
-          <ul className="text-neutral-500 dark:text-neutral-400">
-            <li className="mb-4">
-              <a
-                href="https://mirror.xyz/labs.taiko.eth"
-                className="hover:underline"
-                target={"_blank"}
-              >
-                Blog
-              </a>
-            </li>
-            <li className="mb-4">
-              <a
-                href="https://www.notion.so/taikoxyz/Taiko-Jobs-828fd7232d2c4150a11e10c8baa910a2"
-                className="hover:underline"
-                target={"_blank"}
-              >
-                Careers
-              </a>
-            </li>
-            <li className="mb-4">
-              <a
-                href="https://github.com/taikoxyz/taiko-mono/tree/main/packages/branding/"
-                className="hover:underline"
-                target={"_blank"}
-              >
-                Media kit
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div>
-          <h2 className="mb-6 text-sm font-semibold text-neutral-500 uppercase dark:text-neutral-300">
-            Developers
-          </h2>
-          <ul className="text-neutral-500 dark:text-neutral-400">
-            <li className="mb-4">
-              <a href="/docs" className="hover:underline">
-                Get started
-              </a>
-            </li>
-            <li className="mb-4">
-              <a
-                href="https://github.com/taikoxyz"
-                className="hover:underline"
-                target={"_blank"}
-              >
-                GitHub
-              </a>
-            </li>
-            <li className="mb-4">
-              <a
-                href="https://taikoxyz.github.io/taiko-mono/taiko-whitepaper.pdf"
-                className="hover:underline"
-                target={"_blank"}
-              >
-                Whitepaper
-              </a>
-            </li>
-          </ul>
+      <div className="nx-mx-auto nx-max-w-[90rem]">
+        <div className="grid grid-cols-2 gap-8 px-6 py-8 md:grid-cols-3 md:px-44">
+          <div>
+            <h2 className="mb-6 text-sm font-semibold text-neutral-500 uppercase dark:text-neutral-300">
+              About
+            </h2>
+            <ul className="text-neutral-500 dark:text-neutral-400">
+              <li className="mb-4">
+                <a
+                  href="https://mirror.xyz/labs.taiko.eth"
+                  className="hover:underline"
+                  target={"_blank"}
+                >
+                  Blog
+                </a>
+              </li>
+              <li className="mb-4">
+                <a
+                  href="https://www.notion.so/taikoxyz/Taiko-Jobs-828fd7232d2c4150a11e10c8baa910a2"
+                  className="hover:underline"
+                  target={"_blank"}
+                >
+                  Careers
+                </a>
+              </li>
+              <li className="mb-4">
+                <a
+                  href="https://github.com/taikoxyz/taiko-mono/tree/main/packages/branding/"
+                  className="hover:underline"
+                  target={"_blank"}
+                >
+                  Media kit
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h2 className="mb-6 text-sm font-semibold text-neutral-500 uppercase dark:text-neutral-300">
+              Developers
+            </h2>
+            <ul className="text-neutral-500 dark:text-neutral-400">
+              <li className="mb-4">
+                <a href="/docs" className="hover:underline">
+                  Get started
+                </a>
+              </li>
+              <li className="mb-4">
+                <a
+                  href="https://github.com/taikoxyz"
+                  className="hover:underline"
+                  target={"_blank"}
+                >
+                  GitHub
+                </a>
+              </li>
+              <li className="mb-4">
+                <a
+                  href="https://taikoxyz.github.io/taiko-mono/taiko-whitepaper.pdf"
+                  className="hover:underline"
+                  target={"_blank"}
+                >
+                  Whitepaper
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h2 className="mb-6 text-sm font-semibold text-neutral-500 uppercase dark:text-neutral-300">
+              Follow us
+            </h2>
+            <ul className="text-neutral-500 dark:text-neutral-400">
+              <li className="mb-4">
+                <a
+                  href="https://discord.gg/taikoxyz"
+                  className="hover:underline"
+                  target={"_blank"}
+                >
+                  Discord
+                </a>
+              </li>
+              <li className="mb-4">
+                <a
+                  href="https://www.reddit.com/r/taiko_xyz/"
+                  className="hover:underline"
+                  target={"_blank"}
+                >
+                  Reddit
+                </a>
+              </li>
+              <li className="mb-4">
+                <a
+                  href="https://twitter.com/taikoxyz"
+                  className="hover:underline"
+                  target={"_blank"}
+                >
+                  Twitter
+                </a>
+              </li>
+              <li className="mb-4">
+                <a
+                  href="https://www.youtube.com/@taikoxyz"
+                  className="hover:underline"
+                  target={"_blank"}
+                >
+                  YouTube
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
-        <div>
-          <h2 className="mb-6 text-sm font-semibold text-neutral-500 uppercase dark:text-neutral-300">
-            Follow us
-          </h2>
-          <ul className="text-neutral-500 dark:text-neutral-400">
-            <li className="mb-4">
-              <a
-                href="https://discord.gg/taikoxyz"
-                className="hover:underline"
-                target={"_blank"}
-              >
-                Discord
-              </a>
-            </li>
-            <li className="mb-4">
-              <a
-                href="https://www.reddit.com/r/taiko_xyz/"
-                className="hover:underline"
-                target={"_blank"}
-              >
-                Reddit
-              </a>
-            </li>
-            <li className="mb-4">
-              <a
-                href="https://twitter.com/taikoxyz"
-                className="hover:underline"
-                target={"_blank"}
-              >
-                Twitter
-              </a>
-            </li>
-            <li className="mb-4">
-              <a
-                href="https://www.youtube.com/@taikoxyz"
-                className="hover:underline"
-                target={"_blank"}
-              >
-                YouTube
-              </a>
-            </li>
-          </ul>
+        <div className="text-md text-center text-neutral-500 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-900 px-4 py-6">
+          © {new Date().getFullYear()} Taiko Labs
         </div>
       </div>
-      <div className="text-md text-center text-neutral-500 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-900 px-4 py-6">
-        © {new Date().getFullYear()} Taiko Labs
-      </div>
     </footer>
   );
 }
diff --git a/packages/website/theme.config.tsx b/packages/website/theme.config.tsx
index b0cf3dec507..c6f1d9cb5c6 100644
--- a/packages/website/theme.config.tsx
+++ b/packages/website/theme.config.tsx
@@ -4,6 +4,18 @@ import Footer from "./components/Footer";
 import ThemedImage from "./components/ThemedImage";
 
 export default {
+  banner: {
+    key: "banner",
+    text: (
+      <a
+        href="https://twitter.com/taikoxyz/status/1623338218505793536?s=20&t=YL1BSjeBUDlOzQftyhCKeQ"
+        target="_blank"
+      >
+        📌 The alpha-1 testnet (Snæfellsjökull) will be deprecated on February
+        15th, around 14:00UTC. Read more →
+      </a>
+    ),
+  },
   chat: {
     link: "https://discord.gg/taikoxyz",
   },

From bff4be77a5f7da5b41f2691e87368cf722e8a450 Mon Sep 17 00:00:00 2001
From: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com>
Date: Wed, 8 Feb 2023 17:47:16 -0500
Subject: [PATCH 3/4] cleanup footer and refactor docs

---
 packages/website/components/Footer.tsx        |  2 +-
 packages/website/components/Hero.tsx          |  2 +-
 packages/website/pages/_meta.json             |  4 +-
 packages/website/pages/docs/_meta.json        |  4 +-
 packages/website/pages/docs/index.md          | 41 +++++++++++++++++--
 packages/website/pages/docs/learn/_meta.json  |  4 +-
 ....md => block-proposal-and-verification.md} |  2 +-
 .../website/pages/docs/resources/_meta.json   |  3 ++
 .../{testnet-guide => resources}/get-help.md  |  4 +-
 .../pages/docs/testnet-guide/_meta.json       | 16 +++-----
 .../website/pages/docs/testnet-guide/index.md | 29 -------------
 11 files changed, 57 insertions(+), 54 deletions(-)
 rename packages/website/pages/docs/learn/{overview.md => block-proposal-and-verification.md} (98%)
 rename packages/website/pages/docs/{testnet-guide => resources}/get-help.md (68%)
 delete mode 100644 packages/website/pages/docs/testnet-guide/index.md

diff --git a/packages/website/components/Footer.tsx b/packages/website/components/Footer.tsx
index 7b0ee7f352f..228d3a77803 100644
--- a/packages/website/components/Footer.tsx
+++ b/packages/website/components/Footer.tsx
@@ -2,7 +2,7 @@ export default function Footer() {
   return (
     <footer className="bg-neutral-100 dark:bg-neutral-900">
       <div className="nx-mx-auto nx-max-w-[90rem]">
-        <div className="grid grid-cols-2 gap-8 px-6 py-8 md:grid-cols-3 md:px-44">
+        <div className="grid grid-cols-2 nx-pl-[max(env(safe-area-inset-left),1.5rem)] nx-pr-[max(env(safe-area-inset-right),1.5rem)] py-8 md:grid-cols-3 ">
           <div>
             <h2 className="mb-6 text-sm font-semibold text-neutral-500 uppercase dark:text-neutral-300">
               About
diff --git a/packages/website/components/Hero.tsx b/packages/website/components/Hero.tsx
index d59f24c7950..2c60cdac10b 100644
--- a/packages/website/components/Hero.tsx
+++ b/packages/website/components/Hero.tsx
@@ -50,7 +50,7 @@ export default function Hero() {
             <div className="mt-10 flex md:justify-left">
               <div className="inline-flex rounded-md shadow">
                 <a
-                  href="/docs/testnet-guide"
+                  href="/docs/"
                   className="inline-flex items-center rounded-md border border-transparent bg-[#e30ead] px-5 py-3 text-base font-semibold text-white dark:text-neutral-100 hover:bg-[#bd0b90] hover:no-underline hover:text-white"
                 >
                   Get started 🥁
diff --git a/packages/website/pages/_meta.json b/packages/website/pages/_meta.json
index 8a62f9c79ed..75e7d644345 100644
--- a/packages/website/pages/_meta.json
+++ b/packages/website/pages/_meta.json
@@ -17,8 +17,8 @@
     "href": "https://mirror.xyz/labs.taiko.eth",
     "newWindow": true
   },
-  "Snæfellsjökull": {
-    "title": "Snæfellsjökull Testnet",
+  "testnet-links-dropdown": {
+    "title": "Testnet Links",
     "type": "menu",
     "items": {
       "status": {
diff --git a/packages/website/pages/docs/_meta.json b/packages/website/pages/docs/_meta.json
index 7ac6c63155e..3d9d896c02a 100644
--- a/packages/website/pages/docs/_meta.json
+++ b/packages/website/pages/docs/_meta.json
@@ -1,12 +1,12 @@
 {
   "index": {
-    "title": "Introduction"
+    "title": "Introduction 👋"
   },
   "learn": {
     "title": "Learn"
   },
   "testnet-guide": {
-    "title": "Alpha-1 Testnet Guide"
+    "title": "Guides"
   },
   "reference": {
     "title": "Reference"
diff --git a/packages/website/pages/docs/index.md b/packages/website/pages/docs/index.md
index 0741481928b..3af024f4155 100644
--- a/packages/website/pages/docs/index.md
+++ b/packages/website/pages/docs/index.md
@@ -2,11 +2,46 @@
 
 Taiko is a fully decentralized, Ethereum-equivalent ZK-Rollup. This is also referred to as a [Type 1 ZK-EVM](https://mirror.xyz/labs.taiko.eth/w7NSKDeKfJoEy0p89I9feixKfdK-20JgWF9HZzxfeBo).
 
-### Testnet guide
+And welcome to the official Taiko documentation! This is your one-stop shop for all things Taiko. You will finds:
 
-Follow the [Alpha-1 testnet guide](/docs/testnet-guide/) to get started with using Taiko.
+- **Learn**: Learn about how Taiko works
+- **Guides**: Easy to follow guides to build on and use Taiko
+- **Reference**: Quick reference documentation about the network (e.g., contract addresses, protocol configurations)
+- **Resources**: Additional resources for your knowledge
 
-### Learn more
+## The Alpha-1 (Snæfellsjökull) Testnet
+
+There are two networks involved in the alpha-1 testnet:
+
+- **Taiko A1** is the Alpha-1 testnet release of Taiko: A fully decentralized, Ethereum-equivalent ZK-Rollup.
+- **Ethereum A1** is Taiko's privately deployed Ethereum network, which serves as the L1 for Taiko's Alpha-1 testnet.
+
+The testnet consists of L1 / L2 nodes with all of the Taiko protocol contracts deployed. The mining interval of the L1 node is set to 12 seconds. There is also a cron job service that proposes empty blocks every two minutes.
+
+### Use the testnet
+
+In this testnet, you can:
+
+- 🌉 Bridge tokens between Ethereum A1 and Taiko A1.
+- 🤝 Send transactions (e.g., deploy a dapp, interact with a contract).
+- 🌐 Run a node—this makes **you** a part of Taiko!
+
+Check out the guides in the left sidebar to use the testnet!
+
+### Navigate the testnet
+
+All the relevant links can be found in this site's navigation bar at the top. The relevant links are:
+
+| Link                                            | Purpose                                            |
+| ----------------------------------------------- | -------------------------------------------------- |
+| [Status](https://status.a1.taiko.xyz/)          | Taiko protocol status                              |
+| [Bridge](https://bridge.a1.taiko.xyz/)          | Bridge ETH/tokens between Ethereum A1 and Taiko A1 |
+| [L1 faucet](https://l1faucet.a1.taiko.xyz/)     | For receiving ETH on Ethereum A1                   |
+| [L2 faucet](https://l2faucet.a1.taiko.xyz/)     | For receiving ETH on Taiko A1                      |
+| [L1 explorer](https://l1explorer.a1.taiko.xyz/) | Explore blocks on Ethereum A1                      |
+| [L2 explorer](https://l2explorer.a1.taiko.xyz/) | Explore blocks on Taiko A1                         |
+
+## Learn more about Taiko
 
 This documentation website is currently under construction 🚧. In the meantime, you can check out these resources:
 
diff --git a/packages/website/pages/docs/learn/_meta.json b/packages/website/pages/docs/learn/_meta.json
index b9780edad4f..2d9f4821405 100644
--- a/packages/website/pages/docs/learn/_meta.json
+++ b/packages/website/pages/docs/learn/_meta.json
@@ -1,6 +1,6 @@
 {
-  "overview": {
-    "title": "Overview"
+  "block-proposal-and-verification": {
+    "title": "Block proposal & verification"
   },
   "bridge": {
     "title": "Bridge"
diff --git a/packages/website/pages/docs/learn/overview.md b/packages/website/pages/docs/learn/block-proposal-and-verification.md
similarity index 98%
rename from packages/website/pages/docs/learn/overview.md
rename to packages/website/pages/docs/learn/block-proposal-and-verification.md
index 68f0304c176..7820002f1f6 100644
--- a/packages/website/pages/docs/learn/overview.md
+++ b/packages/website/pages/docs/learn/block-proposal-and-verification.md
@@ -1,4 +1,4 @@
-# Overview
+# Block proposal & verification
 
 Taiko aims to build a secure, decentralized, and permissionless rollup on Ethereum. These requirements dictate the following properties:
 
diff --git a/packages/website/pages/docs/resources/_meta.json b/packages/website/pages/docs/resources/_meta.json
index 6f92dc28f4f..9a453ad3591 100644
--- a/packages/website/pages/docs/resources/_meta.json
+++ b/packages/website/pages/docs/resources/_meta.json
@@ -5,6 +5,9 @@
   "faqs": {
     "title": "FAQs"
   },
+  "get-help": {
+    "title": "Get help"
+  },
   "presentations": {
     "title": "Presentations"
   },
diff --git a/packages/website/pages/docs/testnet-guide/get-help.md b/packages/website/pages/docs/resources/get-help.md
similarity index 68%
rename from packages/website/pages/docs/testnet-guide/get-help.md
rename to packages/website/pages/docs/resources/get-help.md
index 9bd5dd33fe9..465e8b2cea9 100644
--- a/packages/website/pages/docs/testnet-guide/get-help.md
+++ b/packages/website/pages/docs/resources/get-help.md
@@ -1,3 +1,3 @@
-# ❓ Get help
+# Get help
 
-Reach out to the community on [Discord](https://discord.gg/taikoxyz) for help.
+Reach out to the community on [Discord](https://discord.gg/taikoxyz) for help!
diff --git a/packages/website/pages/docs/testnet-guide/_meta.json b/packages/website/pages/docs/testnet-guide/_meta.json
index 6aa5c79df65..0988d776c57 100644
--- a/packages/website/pages/docs/testnet-guide/_meta.json
+++ b/packages/website/pages/docs/testnet-guide/_meta.json
@@ -1,23 +1,17 @@
 {
-  "index": {
-    "title": "👋 Start here"
-  },
   "configure-wallet": {
-    "title": "⚙️ Configure your wallet"
+    "title": "Configure your wallet"
   },
   "request-from-faucet": {
-    "title": "💧 Request from faucet"
+    "title": "Request from faucet"
   },
   "use-the-bridge": {
-    "title": "🌉 Use the bridge"
+    "title": "Use the bridge"
   },
   "deploy-a-contract": {
-    "title": "🚀 Deploy a contract"
+    "title": "Deploy a basic contract"
   },
   "run-a-node": {
-    "title": "🌐 Run a Taiko node"
-  },
-  "get-help": {
-    "title": "❓ Get help"
+    "title": "Run a Taiko node"
   }
 }
diff --git a/packages/website/pages/docs/testnet-guide/index.md b/packages/website/pages/docs/testnet-guide/index.md
deleted file mode 100644
index e0398dd7224..00000000000
--- a/packages/website/pages/docs/testnet-guide/index.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# Start here
-
-Welcome to Taiko's Alpha-1 testnet, **Snæfellsjökull**. There are two networks involved in the testnet:
-
-- **Taiko A1** is the Alpha-1 testnet release of Taiko: A fully decentralized, Ethereum-equivalent ZK-Rollup.
-- **Ethereum A1** is Taiko's privately deployed Ethereum network, which serves as the L1 for Taiko's Alpha-1 testnet.
-
-The testnet consists of L1 / L2 nodes with all of the Taiko protocol contracts deployed. The mining interval of the L1 node is set to 12 seconds. There is also a cron job service that proposes empty blocks every two minutes.
-
-## Use the testnet
-
-In this testnet, you can:
-
-- 🌉 Bridge tokens between Ethereum A1 and Taiko A1.
-- 🤝 Send transactions (e.g., deploy a dapp, interact with a contract).
-- 🌐 Run a node—this makes **you** a part of Taiko!
-
-## Navigate the testnet
-
-All the relevant links can be found in this site's navigation. The relevant links are:
-
-| Link                                            | Purpose                                            |
-| ----------------------------------------------- | -------------------------------------------------- |
-| [Status](https://status.a1.taiko.xyz/)          | Taiko protocol status                              |
-| [Bridge](https://bridge.a1.taiko.xyz/)          | Bridge ETH/tokens between Ethereum A1 and Taiko A1 |
-| [L1 faucet](https://l1faucet.a1.taiko.xyz/)     | For receiving ETH on Ethereum A1                   |
-| [L2 faucet](https://l2faucet.a1.taiko.xyz/)     | For receiving ETH on Taiko A1                      |
-| [L1 explorer](https://l1explorer.a1.taiko.xyz/) | Explore blocks on Ethereum A1                      |
-| [L2 explorer](https://l2explorer.a1.taiko.xyz/) | Explore blocks on Taiko A1                         |

From e1c0f1517beb149043bab6504dfc378b73a95b4a Mon Sep 17 00:00:00 2001
From: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com>
Date: Wed, 8 Feb 2023 18:04:36 -0500
Subject: [PATCH 4/4] make homepage more centered on large screen

---
 packages/website/components/Footer.tsx |  4 +-
 packages/website/components/Hero.tsx   | 64 +++++++++++++-------------
 2 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/packages/website/components/Footer.tsx b/packages/website/components/Footer.tsx
index 228d3a77803..21b0716d0c2 100644
--- a/packages/website/components/Footer.tsx
+++ b/packages/website/components/Footer.tsx
@@ -1,8 +1,8 @@
 export default function Footer() {
   return (
     <footer className="bg-neutral-100 dark:bg-neutral-900">
-      <div className="nx-mx-auto nx-max-w-[90rem]">
-        <div className="grid grid-cols-2 nx-pl-[max(env(safe-area-inset-left),1.5rem)] nx-pr-[max(env(safe-area-inset-right),1.5rem)] py-8 md:grid-cols-3 ">
+      <div className="mx-auto max-w-[90rem]">
+        <div className="grid grid-cols-2 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] py-8 md:grid-cols-3 ">
           <div>
             <h2 className="mb-6 text-sm font-semibold text-neutral-500 uppercase dark:text-neutral-300">
               About
diff --git a/packages/website/components/Hero.tsx b/packages/website/components/Hero.tsx
index 2c60cdac10b..5158ea24eaf 100644
--- a/packages/website/components/Hero.tsx
+++ b/packages/website/components/Hero.tsx
@@ -37,41 +37,43 @@ export default function Hero() {
   }
 
   return (
-    <div className="relative bg-neutral-50 dark:bg-neutral-900">
-      <main className="lg:relative">
-        <div className="relative z-10 w-3/4 pt-16 pb-20 text-left lg:py-48">
-          <div className="px-12 xl:px-32 lg:px-24 md:px-16 lg:w-full xl:pr-16 ">
-            <h1 className="font-oxanium text-4xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
-              A <span className="text-[#e30ead]">Type 1</span> ZK-EVM
-            </h1>
-            <p className="font-oxanium mt-3 text-lg text-neutral-600 sm:text-xl md:mt-5 dark:text-neutral-100">
-              Fully decentralized, Ethereum-equivalent ZK-Rollup.
-            </p>
-            <div className="mt-10 flex md:justify-left">
-              <div className="inline-flex rounded-md shadow">
-                <a
-                  href="/docs/"
-                  className="inline-flex items-center rounded-md border border-transparent bg-[#e30ead] px-5 py-3 text-base font-semibold text-white dark:text-neutral-100 hover:bg-[#bd0b90] hover:no-underline hover:text-white"
-                >
-                  Get started 🥁
-                </a>
+    <div className="mx-auto max-w-[90rem]">
+      <div className="relative bg-neutral-50 dark:bg-neutral-900">
+        <main className="lg:relative">
+          <div className="relative z-10 w-3/4 pt-16 pb-20 text-left lg:py-48">
+            <div className="pl-[max(env(safe-area-inset-left),1.5rem)]">
+              <h1 className="font-oxanium text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100">
+                A <span className="text-[#e30ead]">Type 1</span> ZK-EVM
+              </h1>
+              <p className="font-oxanium mt-3 text-lg text-neutral-600 sm:text-xl md:mt-5 dark:text-neutral-100">
+                Fully decentralized, Ethereum-equivalent ZK-Rollup.
+              </p>
+              <div className="mt-10 flex md:justify-left">
+                <div className="inline-flex rounded-md shadow">
+                  <a
+                    href="/docs/"
+                    className="inline-flex items-center rounded-md border border-transparent bg-[#e30ead] px-5 py-3 text-base font-semibold text-white dark:text-neutral-100 hover:bg-[#bd0b90] hover:no-underline hover:text-white"
+                  >
+                    Get started
+                  </a>
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        <div
-          id="taikoGeomParent"
-          className="absolute inset-y-0 right-0 overflow-hidden h-full w-11/12 lg:absolute lg:inset-y-0 lg:right-0 lg:h-full lg:w-1/2"
-        >
-          <img
-            id="taikoGeom"
-            className="absolute z-0 -right-6 overflow-visible h-full w-full object-cover max-w-none"
-            src="/images/Taiko_GEOM_1_Fluo_Sliced.svg"
-            alt=""
-          />
-        </div>
-      </main>
+          <div
+            id="taikoGeomParent"
+            className="absolute inset-y-0 right-0 overflow-hidden h-full w-11/12 lg:absolute lg:inset-y-0 lg:right-0 lg:h-full lg:w-1/2"
+          >
+            <img
+              id="taikoGeom"
+              className="absolute z-0 -right-6 overflow-visible h-full w-full object-cover max-w-none"
+              src="/images/Taiko_GEOM_1_Fluo_Sliced.svg"
+              alt=""
+            />
+          </div>
+        </main>
+      </div>
     </div>
   );
 }