diff --git a/public/assets/github-white.svg b/public/assets/github-white.svg
new file mode 100644
index 000000000..1f2347801
--- /dev/null
+++ b/public/assets/github-white.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/public/scroll-white.svg b/public/scroll-white.svg
index 4dbfc4c20..2fa605bfc 100644
--- a/public/scroll-white.svg
+++ b/public/scroll-white.svg
@@ -1,6 +1,6 @@
diff --git a/public/svgs/Brownie.svg b/public/svgs/Brownie.svg
new file mode 100644
index 000000000..35d25790f
--- /dev/null
+++ b/public/svgs/Brownie.svg
@@ -0,0 +1,229 @@
+
diff --git a/public/svgs/Contribute.svg b/public/svgs/Contribute.svg
new file mode 100644
index 000000000..800f46c24
--- /dev/null
+++ b/public/svgs/Contribute.svg
@@ -0,0 +1,10 @@
+
diff --git a/public/svgs/Discord.svg b/public/svgs/Discord.svg
new file mode 100644
index 000000000..bacb0fa41
--- /dev/null
+++ b/public/svgs/Discord.svg
@@ -0,0 +1,8 @@
+
diff --git a/public/svgs/EthersJS.svg b/public/svgs/EthersJS.svg
new file mode 100644
index 000000000..ce96f60b9
--- /dev/null
+++ b/public/svgs/EthersJS.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/svgs/Forum.svg b/public/svgs/Forum.svg
new file mode 100644
index 000000000..af16e21de
--- /dev/null
+++ b/public/svgs/Forum.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/svgs/Foundry.svg b/public/svgs/Foundry.svg
new file mode 100644
index 000000000..e9bf9381a
--- /dev/null
+++ b/public/svgs/Foundry.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/svgs/Hardhat.svg b/public/svgs/Hardhat.svg
new file mode 100644
index 000000000..865d8e5f1
--- /dev/null
+++ b/public/svgs/Hardhat.svg
@@ -0,0 +1,28 @@
+
diff --git a/public/svgs/Remix.svg b/public/svgs/Remix.svg
new file mode 100644
index 000000000..d48cc19c2
--- /dev/null
+++ b/public/svgs/Remix.svg
@@ -0,0 +1,5 @@
+
diff --git a/public/svgs/Truffle.svg b/public/svgs/Truffle.svg
new file mode 100644
index 000000000..3e53f70d4
--- /dev/null
+++ b/public/svgs/Truffle.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/svgs/home-develop.svg b/public/svgs/home-develop.svg
new file mode 100644
index 000000000..4a3e57090
--- /dev/null
+++ b/public/svgs/home-develop.svg
@@ -0,0 +1,6 @@
+
diff --git a/public/svgs/home-learn.svg b/public/svgs/home-learn.svg
new file mode 100644
index 000000000..005a03d7b
--- /dev/null
+++ b/public/svgs/home-learn.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/svgs/home-link-arrow.svg b/public/svgs/home-link-arrow.svg
new file mode 100644
index 000000000..e87c0359d
--- /dev/null
+++ b/public/svgs/home-link-arrow.svg
@@ -0,0 +1,10 @@
+
diff --git a/public/svgs/home-link.svg b/public/svgs/home-link.svg
new file mode 100644
index 000000000..c6edbf8d2
--- /dev/null
+++ b/public/svgs/home-link.svg
@@ -0,0 +1,10 @@
+
diff --git a/public/svgs/home-start.svg b/public/svgs/home-start.svg
new file mode 100644
index 000000000..ef7bbeaee
--- /dev/null
+++ b/public/svgs/home-start.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/svgs/home-technology.svg b/public/svgs/home-technology.svg
new file mode 100644
index 000000000..fff50c2de
--- /dev/null
+++ b/public/svgs/home-technology.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/svgs/search.svg b/public/svgs/search.svg
new file mode 100644
index 000000000..788b0bb55
--- /dev/null
+++ b/public/svgs/search.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
index d97a717c8..0a3a026a0 100644
--- a/src/components/Header/Header.astro
+++ b/src/components/Header/Header.astro
@@ -14,8 +14,13 @@ import NotificationBanner from "~/features/notifications/components/Notification
export type Props = {
frontmatter?: Frontmatter
+ dark?: boolean
}
-const { frontmatter } = Astro.props
+const { frontmatter, dark } = Astro.props
+
+const backgroundColor = dark ? "#101010" : "#ffffff"
+
+const textColor = dark ? "#FFF8F3" : "#101010"
const section = frontmatter?.section ?? ""
---
@@ -30,7 +35,7 @@ const section = frontmatter?.section ?? ""
-
diff --git a/src/layouts/HomeLayout.astro b/src/layouts/HomeLayout.astro
new file mode 100644
index 000000000..45412982b
--- /dev/null
+++ b/src/layouts/HomeLayout.astro
@@ -0,0 +1,74 @@
+---
+import HeadCommon from "../components/HeadCommon.astro"
+import HeadSEO from "../components/HeadSEO.astro"
+import Header from "../components/Header/Header.astro"
+import * as CONFIG from "../config"
+import Footer from "~/components/Footer/Footer"
+import LeftSidebar from "../components/LeftSidebar/LeftSidebar.astro"
+
+const { content = {}, dark } = Astro.props
+const currentPage = new URL(Astro.request.url).pathname
+const formattedContentTitle = content.title
+ ? `${content.title} | ${CONFIG.SITE.title}`
+ : `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.title}`
+const canonicalURL = new URL(Astro.url.pathname, Astro.site)
+---
+
+
+
+
+
+ {formattedContentTitle}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/LandingLayout.astro b/src/layouts/LandingLayout.astro
index 60c917c0e..6d322e7a7 100644
--- a/src/layouts/LandingLayout.astro
+++ b/src/layouts/LandingLayout.astro
@@ -88,6 +88,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
.mobile-sidebar-toggle #grid-left {
display: block;
top: 2rem;
+ padding: 0 20px;
}
/** This is done to hide the search box in the homepage. CSSModules styles are taking precedence over other styles so !important was needed **/
@media (min-width: 50em) {
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 3c201ead7..ff20a5615 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -64,6 +64,7 @@ changeLanguage(content.lang)
}
.grid-sidebar {
+ width: 100%;
height: 100vh;
position: sticky;
top: 0;
diff --git a/src/pages/en/home/ConnectUs.astro b/src/pages/en/home/ConnectUs.astro
new file mode 100644
index 000000000..c6e729326
--- /dev/null
+++ b/src/pages/en/home/ConnectUs.astro
@@ -0,0 +1,147 @@
+---
+import SectionHeader from "~/components/SectionHeader/index.astro"
+
+const mediaList = [
+ {
+ icon: "/svgs/Discord.svg",
+ name: "Join our Discord",
+ content: "Connect with other Scroll developers and users.",
+ link: "https://discord.gg/scroll",
+ },
+ {
+ icon: "/svgs/Forum.svg",
+ name: "Community Forum",
+ content: "Discuss and propose changes to Scroll’s core protocols.",
+ link: "http://community.scroll.io/",
+ },
+ {
+ icon: "/svgs/Contribute.svg",
+ name: "Contribute to Scroll",
+ content: "Build with other developers.",
+ link: "https://github.com/scroll-tech/contribute-to-scroll",
+ },
+]
+---
+
+
+
+
diff --git a/src/pages/en/home/Navigate.astro b/src/pages/en/home/Navigate.astro
new file mode 100644
index 000000000..d52cf12c4
--- /dev/null
+++ b/src/pages/en/home/Navigate.astro
@@ -0,0 +1,132 @@
+---
+import SectionHeader from "~/components/SectionHeader/index.astro"
+
+const navList = [
+ {
+ icon: "/svgs/home-start.svg",
+ name: "Getting started",
+ content: "Bridge into Scroll and explore our dApp Ecosystem.",
+ link: "/en/getting-started/overview",
+ },
+ {
+ icon: "/svgs/home-develop.svg",
+ name: "Developers",
+ content: "Dive into Scroll’s developer documentation.",
+ link: "/en/developers",
+ },
+ {
+ icon: "/svgs/home-technology.svg",
+ name: "Technology",
+ content: "An overview of Scroll’s zkEVM Architecture.",
+ link: "/en/technology",
+ },
+ {
+ icon: "/svgs/home-learn.svg",
+ name: "Learn",
+ content: "An introduction to the world of ZK and Scalability.",
+ link: "/en/learn",
+ },
+]
+---
+
+
+
+
+ {
+ navList.map(({ icon, name, content, link }) => (
+
+ ))
+ }
+
+
+
+
diff --git a/src/pages/en/home/QuickStart.astro b/src/pages/en/home/QuickStart.astro
new file mode 100644
index 000000000..01cdff4a9
--- /dev/null
+++ b/src/pages/en/home/QuickStart.astro
@@ -0,0 +1,79 @@
+---
+import SectionHeader from "~/components/SectionHeader/index.astro"
+const toolList = [
+ { icon: "/svgs/Hardhat.svg", name: "Hardhat", link: "https://hardhat.org/" },
+ { icon: "/svgs/Foundry.svg", name: "Foundry", link: "https://getfoundry.sh/" },
+ { icon: "/svgs/Remix.svg", name: "Remix", link: "https://remix-project.org/" },
+ { icon: "/svgs/EthersJS.svg", name: "EthersJS", link: "https://ethers.org/" },
+ { icon: "/svgs/Brownie.svg", name: "Brownie", link: "https://github.com/eth-brownie" },
+ { icon: "/svgs/Truffle.svg", name: "Truffle", link: "https://trufflesuite.com/" },
+]
+---
+
+
+
+
diff --git a/src/pages/en/home/index.astro b/src/pages/en/home/index.astro
new file mode 100644
index 000000000..dcab34786
--- /dev/null
+++ b/src/pages/en/home/index.astro
@@ -0,0 +1,56 @@
+---
+import { changeLanguage } from "i18next"
+import HomeLayout from "../../../layouts/HomeLayout.astro"
+import Search from "../../../components/HomeSearch"
+import QuickStart from "./QuickStart.astro"
+import Navigate from "./Navigate.astro"
+import ConnectUs from "./ConnectUs.astro"
+
+changeLanguage("en")
+---
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
index b5819fb48..40a4740da 100644
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -3,4 +3,4 @@ import i18next, { changeLanguage } from "i18next"
changeLanguage("en")
---
-
+