diff --git a/src/NearOrg/BosCtaSection.jsx b/src/NearOrg/BosCtaSection.jsx new file mode 100644 index 00000000..0c38bfff --- /dev/null +++ b/src/NearOrg/BosCtaSection.jsx @@ -0,0 +1,104 @@ +const { backgroundColor } = props; + +const Text = styled.p` + font: var(--${(p) => p.size ?? "text-base"}); + font-weight: ${(p) => p.fontWeight} !important; + color: var(--${(p) => p.color ?? "sand12"}); + margin: 0; + + @media (max-width: 900px) { + font: var(--${(p) => p.mobileSize ?? p.size ?? "text-base"}); + } +`; + +const Flex = styled.div` + display: flex; + gap: ${(p) => p.gap}; + align-items: ${(p) => p.alignItems}; + justify-content: ${(p) => p.justifyContent}; + flex-direction: ${(p) => p.direction ?? "row"}; + flex-wrap: ${(p) => p.wrap ?? "nowrap"}; + text-align: center; + + ${(p) => + p.mobileStack && + ` + @media (max-width: 900px) { + flex-direction: column; + } + `} + + @media (max-width: 900px) { + gap: ${(p) => p.mobileGap ?? p.gap}; + align-items: ${(p) => p.mobileAlignItems ?? p.alignItems}; + } +`; + +const Section = styled.div` + background-color: ${backgroundColor}; + position: relative; + padding: 160px 24px; + overflow: hidden; + + @media (max-width: 900px) { + padding: var(--section-gap) 24px; + } +`; + +const Container = styled.div` + display: flex; + max-width: 600px; + margin: 0 auto; + gap: ${(p) => p.gap ?? "var(--section-gap)"}; + flex-direction: column; + align-items: ${(p) => (p.center ? "center" : undefined)}; + justify-content: ${(p) => (p.center ? "center" : undefined)}; + text-align: ${(p) => (p.center ? "center" : undefined)}; +`; + +return ( +
+ + + + + The OS for an open web + + + + Effortlessly create and distribute decentralized apps on any + blockchain with the Blockchain Operating System. + + + + + + + + + + +
+); diff --git a/src/NearOrg/Card.jsx b/src/NearOrg/Card.jsx index a9d13cae..9a49eb4e 100644 --- a/src/NearOrg/Card.jsx +++ b/src/NearOrg/Card.jsx @@ -5,7 +5,7 @@ const isClickable = as === "a" || as === "button"; const Wrapper = styled.div` padding: 32px; border-radius: 8px; - border: 1px solid var(--sand12); + border: 1px solid var(--sand11); display: flex; flex-direction: column; gap: 32px; @@ -14,7 +14,7 @@ const Wrapper = styled.div` box-shadow: 0 0 0 0px var(--violet4); &[data-dark="true"] { - border-color: var(--sand9); + border-color: #717069; } &[data-clickable="true"] { diff --git a/src/NearOrg/Ecosystem/CommunityPage.jsx b/src/NearOrg/Ecosystem/CommunityPage.jsx index 4f9cef3e..d3f93610 100644 --- a/src/NearOrg/Ecosystem/CommunityPage.jsx +++ b/src/NearOrg/Ecosystem/CommunityPage.jsx @@ -43,14 +43,6 @@ const Text = styled.p` outline: none; } } - - ${(p) => - p.flex && - ` - display: flex; - align-items: center; - gap: 16px; - `} `; const Flex = styled.div` display: flex; @@ -60,15 +52,15 @@ const Flex = styled.div` flex-direction: ${(p) => p.direction ?? "row"}; flex-wrap: ${(p) => p.wrap ?? "nowrap"}; - ${(p) => - p.mobileStack && - ` - @media (max-width: 900px) { - flex-direction: column; - gap: ${(p) => - p.mobileStack === true ? "var(--section-gap)" : p.mobileStack}; - } - `} + @media (max-width: 900px) { + flex-direction: ${(p) => (p.mobileStack ? "column" : p.direction ?? "row")}; + gap: ${(p) => + p.mobileStack === true + ? "var(--section-gap)" + : p.mobileStack + ? p.mobileStack + : p.gap}; + } `; const Section = styled.div` display: flex; diff --git a/src/NearOrg/Ecosystem/GetFundingPage.jsx b/src/NearOrg/Ecosystem/GetFundingPage.jsx index 1628fa8b..7508c15d 100644 --- a/src/NearOrg/Ecosystem/GetFundingPage.jsx +++ b/src/NearOrg/Ecosystem/GetFundingPage.jsx @@ -43,14 +43,6 @@ const Text = styled.p` outline: none; } } - - ${(p) => - p.flex && - ` - display: flex; - align-items: center; - gap: 16px; - `} `; const Flex = styled.div` display: flex; @@ -60,15 +52,15 @@ const Flex = styled.div` flex-direction: ${(p) => p.direction ?? "row"}; flex-wrap: ${(p) => p.wrap ?? "nowrap"}; - ${(p) => - p.mobileStack && - ` - @media (max-width: 900px) { - flex-direction: column; - gap: ${(p) => - p.mobileStack === true ? "var(--section-gap)" : p.mobileStack}; - } - `} + @media (max-width: 900px) { + flex-direction: ${(p) => (p.mobileStack ? "column" : p.direction ?? "row")}; + gap: ${(p) => + p.mobileStack === true + ? "var(--section-gap)" + : p.mobileStack + ? p.mobileStack + : p.gap}; + } `; const Section = styled.div` display: flex; diff --git a/src/NearOrg/Ecosystem/OverviewPage.jsx b/src/NearOrg/Ecosystem/OverviewPage.jsx index a2aaf008..cf4d2062 100644 --- a/src/NearOrg/Ecosystem/OverviewPage.jsx +++ b/src/NearOrg/Ecosystem/OverviewPage.jsx @@ -49,14 +49,6 @@ const Text = styled.p` outline: none; } } - - ${(p) => - p.flex && - ` - display: flex; - align-items: center; - gap: 16px; - `} `; const Small = styled.span` font: inherit; @@ -72,15 +64,15 @@ const Flex = styled.div` flex-direction: ${(p) => p.direction ?? "row"}; flex-wrap: ${(p) => p.wrap ?? "nowrap"}; - ${(p) => - p.mobileStack && - ` - @media (max-width: 900px) { - flex-direction: column; - gap: ${(p) => - p.mobileStack === true ? "var(--section-gap)" : p.mobileStack}; - } - `} + @media (max-width: 900px) { + flex-direction: ${(p) => (p.mobileStack ? "column" : p.direction ?? "row")}; + gap: ${(p) => + p.mobileStack === true + ? "var(--section-gap)" + : p.mobileStack + ? p.mobileStack + : p.gap}; + } `; const Section = styled.div` display: flex; @@ -161,10 +153,6 @@ const navLinks = [ name: "Web3 career", href: "anker_web3_career", }, - { - name: "Web3 career", - href: "anker_web3_career", - }, ]; function returnIpfsImage(cfid) { diff --git a/src/NearOrg/Ecosystem/WorkAndEarnPage.jsx b/src/NearOrg/Ecosystem/WorkAndEarnPage.jsx index bb80b40e..f3a6e97c 100644 --- a/src/NearOrg/Ecosystem/WorkAndEarnPage.jsx +++ b/src/NearOrg/Ecosystem/WorkAndEarnPage.jsx @@ -47,14 +47,6 @@ const Text = styled.p` outline: none; } } - - ${(p) => - p.flex && - ` - display: flex; - align-items: center; - gap: 16px; - `} `; const Flex = styled.div` display: flex; @@ -64,15 +56,15 @@ const Flex = styled.div` flex-direction: ${(p) => p.direction ?? "row"}; flex-wrap: ${(p) => p.wrap ?? "nowrap"}; - ${(p) => - p.mobileStack && - ` - @media (max-width: 900px) { - flex-direction: column; - gap: ${(p) => - p.mobileStack === true ? "var(--section-gap)" : p.mobileStack}; - } - `} + @media (max-width: 900px) { + flex-direction: ${(p) => (p.mobileStack ? "column" : p.direction ?? "row")}; + gap: ${(p) => + p.mobileStack === true + ? "var(--section-gap)" + : p.mobileStack + ? p.mobileStack + : p.gap}; + } `; const Section = styled.div` display: flex; diff --git a/src/NearOrg/EcosystemPage.jsx b/src/NearOrg/EcosystemPage.jsx new file mode 100644 index 00000000..c8fbe999 --- /dev/null +++ b/src/NearOrg/EcosystemPage.jsx @@ -0,0 +1,295 @@ +const ipfsImages = { + illustrations: { + devHub: "bafkreia5igkmp2pjnnxddpyz5sp6et7uowm6r3fk2ycxwca3aflzop2odq", + horizon: "bafkreihcolnwvwigzerbvweyg5ygeuxgo5fngfrowogytjst2v3qchujne", + ndc: "bafkreidx3swoxdm5t2gmibpheg5fuhjkgezacpn6u7iehkim3gcgemnsqi", + }, +}; + +function returnIpfsImage(cfid) { + return { + ipfs_cid: cfid, + }; +} + +const Wrapper = styled.div` + --section-gap: 120px; + --text-hero: 500 72px/1 "FK Grotesk", "Mona Sans", sans-serif; + margin-top: calc(var(--body-top-padding) * -1); + + @media (max-width: 900px) { + --section-gap: 80px; + } +`; + +const H1 = styled.h1` + font: var(--text-hero); + letter-spacing: -3px; + text-align: center; + color: var(--black); + margin: 0; + max-width: 600px; + + @media (max-width: 900px) { + font-size: 48px; + } +`; + +const H2 = styled.h2` + font: var(--text-hero); + font-size: 56px; + line-height: 1.3; + color: var(--black); + margin: 0; + + @media (max-width: 900px) { + font-size: 36px; + } +`; + +const Text = styled.p` + font: var(--${(p) => p.size ?? "text-base"}); + font-weight: ${(p) => p.fontWeight} !important; + color: var(--${(p) => p.color ?? "sand12"}); + margin: 0; + + @media (max-width: 900px) { + font: var(--${(p) => p.mobileSize ?? p.size ?? "text-base"}); + } +`; + +const Flex = styled.div` + display: flex; + gap: ${(p) => p.gap}; + align-items: ${(p) => p.alignItems}; + justify-content: ${(p) => p.justifyContent}; + flex-direction: ${(p) => p.direction ?? "row"}; + flex-wrap: ${(p) => p.wrap ?? "nowrap"}; + + ${(p) => + p.mobileStack && + ` + @media (max-width: 900px) { + flex-direction: column; + } + `} + + @media (max-width: 900px) { + gap: ${(p) => p.mobileGap ?? p.gap}; + align-items: ${(p) => p.mobileAlignItems ?? p.alignItems}; + } +`; + +const Section = styled.div` + --background-color: ${(p) => p.backgroundColor}; + background-color: var(--background-color); + position: relative; + padding: 160px 24px; + overflow: hidden; + + @media (max-width: 900px) { + padding: var(--section-gap) 24px; + } +`; + +const Container = styled.div` + display: flex; + max-width: 1224px; + margin: 0 auto; + gap: ${(p) => p.gap ?? "var(--section-gap)"}; + flex-direction: column; + align-items: ${(p) => (p.center ? "center" : undefined)}; + justify-content: ${(p) => (p.center ? "center" : undefined)}; + text-align: ${(p) => (p.center ? "center" : undefined)}; +`; + +const Pattern = styled.div` + width: 100%; + min-height: 540px; + display: flex; + align-items: center; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGeSURBVHgB7doxTisxEAbgeY/mvQro6NiSDo6QkpJbcA2OwjWooKQMJ2DpKENJBV7FEYoBeQSIZr9PGk2cItWvsdfZnSBjKHVf6rnUbdD1N8g4K7VX6jhIEaycofaTIEWwcoam0yFYOYe179WiQ7Byhk8+8wnB6munlHNWgmD1tUGyFSYIVl8bJFcOCYLV106s/aBrJ2hNE+qo1GmpRanz2J5aB6X+x/oQv/l+FWz5E/O1iHU4pom0W/u0/uoZahnrgN2VGuv6Jpidl1+o2T5BznkrfKj9MdZT6l9836r+3k2pq1KXMVNz3gpbU7hOmj49AQ7x/lJ0WWsK5xhv2+AYkHQR29vbddDluqFvbNZPQZdg9S07az4gWH3tHZVgJQhW3xjb4XIZyo+Z3nffHN79CZ1gYuXc1b4KEytFsHLGptMhWDlj7Q9BimDlbJ4Ex4AftggHdwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIpXoUVLSWulnzoAAAAASUVORK5CYII="); + background-size: 75px 75px; + background-repeat: repeat; + background-position: center top; + + @media (max-width: 900px) { + min-height: 390px; + } +`; + +const PatternContent = styled.div` + padding: 1rem; + max-width: 496px; + margin: 0 auto; + background-color: var(--background-color); + display: flex; + align-items: center; + min-height: 260px; + + @media (max-width: 900px) { + min-height: 0px; + } +`; + +const IconCircle = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 64px; + height: 64px; + border-radius: 100%; + border: 1px solid var(--sand11); + + i { + color: var(--sand11); + font-size: 32px; + } +`; + +return ( + +
+ + + + +

Ecosystem

+ + + Explore a vibrant ecosystem that supports developers, founders, + and contributors. + + + + + +
+ +
+ + +

Building the open web together

+ + Developers and Founders building on the B.O.S are at the center. The + Ecosystem is supporting them with everything they need to succeed. + + + + + + DevHub: The community for developers. + + + DevHub is a decentralized community where NEAR developers can + share ideas, match solutions, and access support and funding. + +
+ +
+ + ), + image: returnIpfsImage(ipfsImages.illustrations.devHub), + imageSide: "right", + alt: "The DevHub logo, the characters / d / h .", + }} + /> + + + + Horizon: The launchpad for founders. + + + Horizons is an early stage accelerator for Web3 founders to + build, connect, and grow. + +
+ +
+ + ), + image: returnIpfsImage(ipfsImages.illustrations.horizon), + imageSide: "left", + alt: "The Near Horizon logo, a blue sunrise and the wordmark for Horizon", + }} + /> + + + + NEAR Digital Collective (NDC): Decentralized Grassroots + Governance + + + The NDC is a grassroots, community-led movement to build + decentralized governance on NEAR. + +
+ +
+ + ), + image: returnIpfsImage(ipfsImages.illustrations.ndc), + imageSide: "right", + alt: "The NDC logo, the letters N, D, and C interconnected", + }} + /> + +
+ + + + + +); diff --git a/src/NearOrg/Footer.jsx b/src/NearOrg/Footer.jsx index 7a431967..2337183c 100644 --- a/src/NearOrg/Footer.jsx +++ b/src/NearOrg/Footer.jsx @@ -1,6 +1,10 @@ const Wrapper = styled.div` background: var(--white); padding: 100px 24px; + + @media (max-width: 1024px) { + padding: 80px 24px 24px; + } `; const Text = styled.p` @@ -15,14 +19,14 @@ const Text = styled.p` const Container = styled.div` display: grid; gap: 100px; - max-width: 1040px; + max-width: 1224px; margin: 0 auto; `; const LinkGrid = styled.div` display: grid; grid-template-columns: repeat(6, 1fr); - gap: 34px; + gap: 24px; div { display: flex; @@ -55,12 +59,8 @@ const LinkGrid = styled.div` } } - @media (max-width: 1100px) { - grid-template-columns: repeat(3, 1fr); - } - - @media (max-width: 650px) { - grid-template-columns: 1fr; + @media (max-width: 1024px) { + display: none; } `; @@ -75,9 +75,9 @@ const Bottom = styled.div` display: flex; align-items: flex-end; justify-content: space-between; - padding-right: 2.85rem; + padding-right: 5.55rem; - @media (max-width: 1100px) { + @media (max-width: 1024px) { padding-right: 0; } `; @@ -167,12 +167,20 @@ const sections = [ }, { title: "News", - url: "https://near.org/nearweekapp.near/widget/nearweek-news", + url: "/nearweekapp.near/widget/nearweek-news", }, { title: "Events", url: "/events", }, + { + title: "People", + url: "/people", + }, + { + title: "Founders", + url: "/horizon", + }, ], }, { diff --git a/src/NearOrg/HomePage.jsx b/src/NearOrg/HomePage.jsx index 709a9473..c957f7ce 100644 --- a/src/NearOrg/HomePage.jsx +++ b/src/NearOrg/HomePage.jsx @@ -5,9 +5,9 @@ const ipfsImages = { nui: "bafkreiefq7qqug2f657fdb5fyuaf5uesybwn7qu3ebxvmo47dhcsxu27vm", }, community: { - devHub: "bafkreifnk4tpvk5uvdm6gwun5hflgn2f4uh6m6qmnhcitzqhyh67jdspae", + devHub: "bafkreifdsmtvi7mpovau5asmaabibk6cvtqvujuunjjlazqov32wng34q4", horizon: "bafkreiguqynoybtr6esvnyetcaayke5gsh5ex7lk4efjgunnyw6unszin4", - ndc: "bafkreiafoftreo2t7hutdbtbehyvh3imwg2opxp6dzsjfen7jxu5a5yqpi", + ndc: "bafkreigqrtvkwu4uzjzg7nrv3ivsb2uthvcozici34loxumkpekz7weyly", }, illustrations: { betterWayToBuild: @@ -255,8 +255,9 @@ const Grid = styled.div` `; const Section = styled.div` + --background-color: ${(p) => p.backgroundColor}; + background-color: var(--background-color); position: relative; - background-color: ${(p) => p.backgroundColor}; padding: 160px 24px; overflow: hidden; @@ -278,7 +279,7 @@ const Container = styled.div` const Pattern = styled.div` width: 100%; - height: 540px; + min-height: 540px; display: flex; align-items: center; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGeSURBVHgB7doxTisxEAbgeY/mvQro6NiSDo6QkpJbcA2OwjWooKQMJ2DpKENJBV7FEYoBeQSIZr9PGk2cItWvsdfZnSBjKHVf6rnUbdD1N8g4K7VX6jhIEaycofaTIEWwcoam0yFYOYe179WiQ7Byhk8+8wnB6munlHNWgmD1tUGyFSYIVl8bJFcOCYLV106s/aBrJ2hNE+qo1GmpRanz2J5aB6X+x/oQv/l+FWz5E/O1iHU4pom0W/u0/uoZahnrgN2VGuv6Jpidl1+o2T5BznkrfKj9MdZT6l9836r+3k2pq1KXMVNz3gpbU7hOmj49AQ7x/lJ0WWsK5xhv2+AYkHQR29vbddDluqFvbNZPQZdg9S07az4gWH3tHZVgJQhW3xjb4XIZyo+Z3nffHN79CZ1gYuXc1b4KEytFsHLGptMhWDlj7Q9BimDlbJ4Ex4AftggHdwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIpXoUVLSWulnzoAAAAASUVORK5CYII="); @@ -289,9 +290,12 @@ const Pattern = styled.div` const PatternContent = styled.div` padding: 1rem; - max-width: 496px; + max-width: 648px; margin: 0 auto; - background: var(--white); + background-color: var(--background-color); + display: flex; + align-items: center; + min-height: 260px; `; const Teams = styled.div` @@ -376,14 +380,13 @@ const CardThumbnail = styled.div` `; const Stats = styled.div` - display: flex; - justify-content: space-between; + display: grid; + grid-template-columns: 1fr 1fr 1fr; gap: 80px; div { - text-align: center; - p:first-child { + font-family: "FK Grotesk"; font-size: 100px; font-weight: 500; line-height: 100%; @@ -398,7 +401,8 @@ const Stats = styled.div` } @media (max-width: 900px) { - flex-direction: column; + grid-template-columns: 1fr; + gap: 80px; } `; @@ -409,7 +413,7 @@ const IconCircle = styled.div` width: 64px; height: 64px; border-radius: 100%; - border: 1px solid var(--sand9); + border: 1px solid var(--sand11); i { color: var(--sand11); @@ -429,6 +433,12 @@ const Article = styled.a` h3 { text-decoration: underline; } + + div:first-child { + &::before { + opacity: 1; + } + } } &:focus { @@ -445,21 +455,35 @@ const ArticleImage = styled.div` height: 220px; transition: all 200ms; margin-bottom: 10px; + position: relative; img { display: block; width: 100%; height: 100%; object-fit: cover; + position: relative; + z-index: 5; + } + + &::before { + content: ""; + display: block; + inset: 0; + background: var(--whiteA6); + z-index: 10; + position: absolute; + opacity: 0; + transition: all 200ms; } `; return ( -
+
- +

The OS for an @@ -660,6 +684,7 @@ return ( props={{ as: "a", href: app.url, + style: { borderColor: "var(--sand12)" }, children: ( <> @@ -882,7 +907,7 @@ return ( ), image: returnIpfsImage(ipfsImages.illustrations.gateways), - imageSide: "right", + imageSide: "left", alt: "Illustration of a search bar above two buttons for GitHub and Deploy", }} /> @@ -915,7 +940,7 @@ return ( ), image: returnIpfsImage(ipfsImages.illustrations.fastAuth), - imageSide: "left", + imageSide: "right", alt: "Illustration of the FastAuth UI showing the stage allowing user to connect their account to a dApp.", }} /> @@ -954,7 +979,7 @@ return (

-
+

@@ -971,30 +996,32 @@ return ( - - - - - Learn - - + + + + + + Learn + + - - - Everything you need to know about NEAR from ongoing developments - to the latest updates. - + + Everything you need to know about NEAR from ongoing developments + to the latest updates. + + @@ -1029,41 +1056,43 @@ return ( - - - - - Community - - + + + + + + Community + + - - - Connect with people to help you on your journey across the open - web. - + + Connect with people to help you on your journey across the open + web. + - + + @@ -1104,44 +1133,46 @@ return ( - - - - - News - - + + + + + + News + + - - - Catch up on the latest news and announcements from around the - ecosystem. - + + Catch up on the latest news and announcements from around the + ecosystem. + - + + - + {post.title} @@ -1176,44 +1214,46 @@ return ( - - - - - Events - - + + + + + + Events + + - - - Join us at conferences, meetups, and more as we gather across the - globe. - + + Join us at conferences, meetups, and more as we gather across + the globe. + - + + - + @@ -1236,22 +1277,43 @@ return ( > {event.title} - + - + {event.date} - + - + {event.location} diff --git a/src/NearOrg/LearnPage.jsx b/src/NearOrg/LearnPage.jsx new file mode 100644 index 00000000..c2755399 --- /dev/null +++ b/src/NearOrg/LearnPage.jsx @@ -0,0 +1,484 @@ +const webThreeItems = [ + { + name: "Why Web3 is needed now more than ever", + description: + "An article written by the Near Foundation describing the need for Web3 in the context of the world’s growing problems.", + icon: "ph-file-doc", + url: "https://pages.near.org/blog/why-web3-is-needed-more-than-ever/", + target: "_blank", + }, + { + name: "The Latecomers guide to crypto", + description: + "Author and technology columnist for The New York Times, Kevin Rose, wrote a series of essays on blockchain innovations.", + icon: "ph-article-ny-times", + url: "https://www.nytimes.com/interactive/2022/03/18/technology/cryptocurrency-crypto-guide.html", + target: "_blank", + }, + { + name: "Intro for Web2 developers", + description: + "A guideline written to demonstrate how to bring a traditional Web 2 application into a Web 3 world using NEAR Protocol.", + icon: "ph-file-doc", + url: "https://docs.near.org/concepts/web3/intro", + target: "_blank", + }, + { + name: "How to open the web", + description: + "NEAR’s co-founder Illia Polosukhin presents the core thesis for NEAR’s vision to build the open web.", + icon: "ph-file-doc", + url: "https://www.youtube.com/watch?v=s3lhhyNCRwU", + target: "_blank", + }, + { + name: "Transitioning a Web2 App to Web3", + description: + "A guideline written to show how to bring a traditional Web 2 application into a Web 3 world using NEAR Protocol.", + icon: "ph-file-doc", + url: "https://docs.near.org/concepts/web3/intro", + target: "_blank", + }, + { + name: "Blockchain Basics", + description: + "A guideline that tells compares Web 1 and Web 2 development practices versus how Web 3 technology differs with blockchain at its’ core.", + icon: "ph-file-doc", + url: "https://docs.near.org/concepts/web3/basics", + target: "_blank", + }, +]; + +const bosItems = [ + { + name: "B.O.S Documentation", + description: + "The one-stop shop for all developer documentation related to the Blockchain Operating System.", + icon: "ph-file-doc", + url: "https://docs.near.org/", + target: "_blank", + }, + { + name: "NEAR B.O.S Wiki", + description: + "NEAR’s open-source, collaborative wiki provides valuable context and information on the Blockchain Operating System.", + icon: "ph-file-doc", + url: "https://wiki.near.org/overview/BOS/overall-bos", + target: "_blank", + }, + { + name: "Illia Introduces the B.O.S", + description: + "NEAR’s co-founder, Illia Polosukhin announces the Blockchain Operating System at ETH Denver 2023.", + icon: "ph-article", + url: "https://www.youtube.com/watch?v=zpkkhCESPU4", + target: "_blank", + }, + { + name: "NEAR Announces the Blockchain Operating System", + description: + "An article written by the NEAR foundation that announces the launch of the Blockchain Operating System.", + icon: "ph-article", + url: "https://near.org/blog/near-announces-the-blockchain-operating-system", + target: "_blank", + }, + { + name: "NEAR is the B.O.S", + description: + "An article written by blockchain research group, Messari, discussing the Blockchain Operating System enhancements for applications in crypto while maintaining a user-friendly experience.", + icon: "ph-article", + url: "https://messari.io/report/near-is-the-bos", + target: "_blank", + }, + { + name: "The Blockchain Operating System Explained", + description: + "David Weinstein (Chief of Staff at NEAR Foundation) discusses NEAR's Blockchain Operating System.", + icon: "ph-article", + url: "https://www.youtube.com/watch?v=eQbuS1Xb5dc", + target: "_blank", + }, +]; + +const nearItems = [ + { + name: "The NEAR White Paper", + description: + "Read the original white paper that was the origin of the NEAR Protocol.", + icon: "ph-article", + url: "https://pages.near.org/papers/the-official-near-white-paper/", + target: "_blank", + }, + { + name: "Videos explaining NEAR", + description: + "Visit the NEAR Protocol YouTube channel to watch a series of videos explaining the details of the blockchain.", + icon: "ph-video", + url: "https://www.youtube.com/watch?v=aS_zb5Je4NI&list=PL9tzQn_TEuFWonmMVb6Ze49BfOZjE7yC5", + target: "_blank", + }, + { + name: "NEAR Protocol Docs", + description: "Read the technical documents for the NEAR Protocol.", + icon: "ph-file-doc", + url: "https://docs.near.org/concepts/web3/near", + target: "_blank", + }, + { + name: "Deep Dive into Sharding", + description: + "Read the white paper on NEAR’s innovating solution to scale transaction throughput, Nightshade Sharding.", + icon: "ph-article", + url: "https://near.org/papers/nightshade", + target: "_blank", + }, + { + name: "NEAR Whiteboard Series", + description: + "The Whiteboard Series with NEAR is a set of video interviews with Founders who are building scalable solutions for Blockchain.", + icon: "ph-video", + url: "https://www.youtube.com/watch?v=GqmEhiDX21I&list=PL9tzQn_TEuFWweVbfTbaedFdwVrvaYPq4&index=1", + target: "_blank", + }, + { + name: "Smart Contracts on NEAR", + description: + "Get started with documentation for building JavaScript and Rust Smart Contracts on NEAR Protocol.", + icon: "ph-file-doc", + url: "https://docs.near.org/concepts/basics/accounts/smartcontract", + target: "_blank", + }, +]; + +const Wrapper = styled.div` + --section-gap: 120px; + --text-hero: 500 72px/1 "FK Grotesk", "Mona Sans", sans-serif; + margin-top: calc(var(--body-top-padding) * -1); + + @media (max-width: 900px) { + --section-gap: 80px; + } +`; + +const H1 = styled.h1` + font: var(--text-hero); + letter-spacing: -3px; + text-align: center; + color: var(--black); + margin: 0; + max-width: 600px; + + @media (max-width: 900px) { + font-size: 48px; + } +`; + +const H2 = styled.h2` + font: var(--text-hero); + font-size: 56px; + line-height: 1.3; + color: var(--black); + margin: 0; + + @media (max-width: 900px) { + font-size: 36px; + } +`; + +const Text = styled.p` + font: var(--${(p) => p.size ?? "text-base"}); + font-weight: ${(p) => p.fontWeight} !important; + color: var(--${(p) => p.color ?? "sand12"}); + margin: 0; + + @media (max-width: 900px) { + font: var(--${(p) => p.mobileSize ?? p.size ?? "text-base"}); + } +`; + +const Flex = styled.div` + display: flex; + gap: ${(p) => p.gap}; + align-items: ${(p) => p.alignItems}; + justify-content: ${(p) => p.justifyContent}; + flex-direction: ${(p) => p.direction ?? "row"}; + flex-wrap: ${(p) => p.wrap ?? "nowrap"}; + + ${(p) => + p.mobileStack && + ` + @media (max-width: 900px) { + flex-direction: column; + } + `} + + @media (max-width: 900px) { + gap: ${(p) => p.mobileGap ?? p.gap}; + align-items: ${(p) => p.mobileAlignItems ?? p.alignItems}; + } +`; + +const Grid = styled.div` + display: grid; + gap: ${(p) => p.gap}; + grid-template-columns: ${(p) => p.columns}; + align-items: ${(p) => p.alignItems}; + + @media (max-width: 900px) { + grid-template-columns: 1fr; + gap: ${(p) => p.mobileGap ?? p.gap}; + } +`; + +const Section = styled.div` + --background-color: ${(p) => p.backgroundColor}; + background-color: var(--background-color); + position: relative; + padding: 160px 24px; + overflow: hidden; + + @media (max-width: 900px) { + padding: var(--section-gap) 24px; + } +`; + +const Container = styled.div` + display: flex; + max-width: 1224px; + margin: 0 auto; + gap: ${(p) => p.gap ?? "var(--section-gap)"}; + flex-direction: column; + align-items: ${(p) => (p.center ? "center" : undefined)}; + justify-content: ${(p) => (p.center ? "center" : undefined)}; + text-align: ${(p) => (p.center ? "center" : undefined)}; +`; + +const Pattern = styled.div` + width: 100%; + min-height: 540px; + display: flex; + align-items: center; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGeSURBVHgB7doxTisxEAbgeY/mvQro6NiSDo6QkpJbcA2OwjWooKQMJ2DpKENJBV7FEYoBeQSIZr9PGk2cItWvsdfZnSBjKHVf6rnUbdD1N8g4K7VX6jhIEaycofaTIEWwcoam0yFYOYe179WiQ7Byhk8+8wnB6munlHNWgmD1tUGyFSYIVl8bJFcOCYLV106s/aBrJ2hNE+qo1GmpRanz2J5aB6X+x/oQv/l+FWz5E/O1iHU4pom0W/u0/uoZahnrgN2VGuv6Jpidl1+o2T5BznkrfKj9MdZT6l9836r+3k2pq1KXMVNz3gpbU7hOmj49AQ7x/lJ0WWsK5xhv2+AYkHQR29vbddDluqFvbNZPQZdg9S07az4gWH3tHZVgJQhW3xjb4XIZyo+Z3nffHN79CZ1gYuXc1b4KEytFsHLGptMhWDlj7Q9BimDlbJ4Ex4AftggHdwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIpXoUVLSWulnzoAAAAASUVORK5CYII="); + background-size: 75px 75px; + background-repeat: repeat; + background-position: center top; + + @media (max-width: 900px) { + min-height: 390px; + } +`; + +const PatternContent = styled.div` + padding: 1rem; + max-width: 496px; + margin: 0 auto; + background-color: var(--background-color); + display: flex; + align-items: center; + min-height: 260px; + + @media (max-width: 900px) { + min-height: 0px; + } +`; + +const IconCircle = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 64px; + height: 64px; + border-radius: 100%; + border: 1px solid var(--sand11); + + i { + color: var(--sand11); + font-size: 32px; + } +`; + +return ( + +
+ + + + +

Learn

+ + + Gain an understanding of the open web and the role of NEAR in + that vision. + + + + + +
+ +
+ + + What is Web3? + + +

Users have all the power in Web3

+ + The next iteration of the internet will give users more autonomy + over their data, assets, and creative license. + + + + + + {webThreeItems.map((item) => ( + + + + + + + + {item.name} + + {item.description} + + + ), + }} + /> + ))} + + +
+ +
+ + + + What is the Blockchain Operating System (B.O.S)? + + + +

+ The operating system for an open web +

+ + The B.O.S is an open-source platform that gives developers the + ability to build on any blockchain using familiar languages and a + broad set of components. + + + + + + {bosItems.map((item) => ( + + + + + + + + {item.name} + + + {item.description} + + + + ), + }} + /> + ))} + + +
+ +
+ + + What is NEAR? + + +

+ NEAR is the next generation of blockchains +

+ + NEAR is a a layer 1 blockchain that uses a Proof-of-Stake (PoS) + consensus mechanism and sharded architecture to scale transaction + throughput. + + + + + + {nearItems.map((item) => ( + + + + + + + + {item.name} + + {item.description} + + + ), + }} + /> + ))} + + +
+ + + + + +);