-
Notifications
You must be signed in to change notification settings - Fork 187
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
784 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| --- | ||
| import SectionHeader from "~/components/SectionHeader/index.astro" | ||
| import LinkArrowSvg from "~/assets/svgs/home/home-link-arrow.svg?raw" | ||
| import DiscordSvg from "~/assets/svgs/home/Discord.svg?raw" | ||
| import ForumSvg from "~/assets/svgs/home/Forum.svg?raw" | ||
| import ContributeSvg from "~/assets/svgs/home/Contribute.svg?raw" | ||
| const mediaList = [ | ||
| { | ||
| icon: DiscordSvg, | ||
| name: "Join our Discord", | ||
| content: "Connect with other Scroll developers and users.", | ||
| link: "https://discord.gg/scroll", | ||
| }, | ||
| { | ||
| icon: ForumSvg, | ||
| name: "Community Forum", | ||
| content: "Discuss and propose changes to Scroll’s core protocols.", | ||
| link: "http://community.scroll.io/", | ||
| }, | ||
| { | ||
| icon: ContributeSvg, | ||
| name: "Contribute to Scroll", | ||
| content: "Build with other developers.", | ||
| link: "https://github.com/scroll-tech/contribute-to-scroll", | ||
| }, | ||
| ] | ||
| --- | ||
|
|
||
| <div class="connect-us"> | ||
| <SectionHeader | ||
| title="Connect with us" | ||
| content="Keep up to date with the latest news and developments from the Scroll Community." | ||
| /> | ||
| <div class="medias"> | ||
| { | ||
| mediaList.map(({ icon, name, content, link }) => ( | ||
| <a class="media-item" href={link} target="_blank"> | ||
| <div class="media-item-header"> | ||
| <span class="media-item-link"> | ||
| <Fragment set:html={LinkArrowSvg} /> | ||
| </span> | ||
| <span class="media-item-icon"> | ||
| <Fragment set:html={icon} /> | ||
| </span> | ||
| </div> | ||
|
|
||
| <span class="media-item-title">{name}</span> | ||
| <span class="media-item-content">{content}</span> | ||
| </a> | ||
| )) | ||
| } | ||
| </div> | ||
| </div> | ||
|
|
||
| <style> | ||
| .connect-us { | ||
| margin-top: 155px; | ||
| } | ||
|
|
||
| .medias { | ||
| display: flex; | ||
| gap: 3rem; | ||
| margin-top: 90px; | ||
| } | ||
| .media-item { | ||
| width: 325px; | ||
| height: 325px; | ||
| padding: 30px; | ||
| border-radius: 25px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| @apply bg-normal dark:bg-dark-normal; | ||
| } | ||
|
|
||
| .media-item:hover { | ||
| @apply bg-highlight dark:bg-dark-highlight; | ||
| } | ||
|
|
||
| .media-item-header { | ||
| flex: 1; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .media-item-link { | ||
| width: 23px; | ||
| height: 23px; | ||
| background-size: contain; | ||
| align-self: flex-end; | ||
| @apply text-black dark:text-white; | ||
| } | ||
|
|
||
| .media-item-icon { | ||
| display: inline-flex; | ||
| width: 35px; | ||
| height: 35px; | ||
| align-items: center; | ||
| } | ||
| .media-item-title { | ||
| font-size: 22px; | ||
| font-weight: 600; | ||
| margin-top: 22px; | ||
| line-height: normal; | ||
| margin-bottom: 6px; | ||
| } | ||
| .media-item-content { | ||
| font-size: 20px; | ||
| line-height: normal; | ||
| height: 56px; | ||
| } | ||
|
|
||
| @media screen and (max-width: 50em) { | ||
| .connect-us { | ||
| margin-top: 112px; | ||
| } | ||
| .medias { | ||
| flex-direction: column; | ||
| gap: 3rem; | ||
| } | ||
| .media-item { | ||
| width: 100%; | ||
| height: 150px; | ||
| padding: 20px; | ||
| } | ||
| .media-item-header { | ||
| flex-direction: row-reverse; | ||
| flex: unset; | ||
| } | ||
| .media-item-link { | ||
| width: 13px; | ||
| height: 13px; | ||
| align-self: flex-start; | ||
| } | ||
| .media-item-icon { | ||
| width: 26px; | ||
| height: 26px; | ||
| } | ||
| .media-item-title { | ||
| font-size: 20px; | ||
| margin-top: 8px; | ||
| margin-bottom: 0px; | ||
| } | ||
| .media-item-content { | ||
| font-size: 16px; | ||
| height: auto; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| --- | ||
| import NavCard from "~/components/NavCard.astro" | ||
| import StartSvg from "~/assets/svgs/home/home-start.svg?raw" | ||
| import DevelopSvg from "~/assets/svgs/home/home-develop.svg?raw" | ||
| import TechnologySvg from "~/assets/svgs/home/home-technology.svg?raw" | ||
| import LearnSvg from "~/assets/svgs/home/home-learn.svg?raw" | ||
| import SectionHeader from "~/components/SectionHeader/index.astro" | ||
| const navList = [ | ||
| { | ||
| icon: StartSvg, | ||
| name: "Getting started", | ||
| content: "Bridge into Scroll and explore our dApp Ecosystem.", | ||
| link: "/en/getting-started/overview", | ||
| }, | ||
| { | ||
| icon: DevelopSvg, | ||
| name: "Developers", | ||
| content: "Dive into Scroll’s developer documentation.", | ||
| link: "/en/developers", | ||
| }, | ||
| { | ||
| icon: TechnologySvg, | ||
| name: "Technology", | ||
| content: "An overview of Scroll’s zkEVM Architecture.", | ||
| link: "/en/technology", | ||
| }, | ||
| { | ||
| icon: LearnSvg, | ||
| name: "Learn", | ||
| content: "An introduction to the world of ZK and Scalability.", | ||
| link: "/en/learn", | ||
| }, | ||
| ] | ||
| --- | ||
|
|
||
| <div class="navigate"> | ||
| <SectionHeader title="Navigate the Docs" content="Start developing on Scroll today." /> | ||
| <div class="navs"> | ||
| {navList.map(({ icon, name, content, link }) => <NavCard icon={icon} name={name} content={content} link={link} />)} | ||
| </div> | ||
| </div> | ||
|
|
||
| <style> | ||
| .navigate { | ||
| margin-top: 146px; | ||
| } | ||
|
|
||
| .navs { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| @media screen and (max-width: 50em) { | ||
| .navigate { | ||
| margin-top: 106px; | ||
| } | ||
| .navs { | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.