Skip to content

Commit

Permalink
feat: create a new component for papers page (#648)
Browse files Browse the repository at this point in the history 
* feat: create a new component for `papers` page

* chore: load pdf files from props
  • Loading branch information
@shelegdmitriy
shelegdmitriy authored Feb 14, 2024
1 parent 6e41ecb commit e96779f
Showing 1 changed file with 231 additions and 0 deletions.
231 changes: 231 additions & 0 deletions src/NearOrg/PapersPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,231 @@
let { docs } = props;

const papersDocs = [
{
name: "The NEAR White Paper",
description:
"This document describes the approach NEAR takes to designing and implementing the core technology of its system.",
icon: "ph-file-doc",
url: docs.whitePaperNearProtocol,
target: "_blank",
},
{
name: "Nightshade",
description:
"This document outlines the general approach to blockchain sharding, the major problems that need to be overcome, including state validity and data availability problems, and presents Nightshade, the solution NEAR Protocol is built upon that addresses those issues.",
icon: "ph-file-doc",
url: docs.nightshade,
target: "_blank",
},
{
name: "Doomslug",
description:
"Doomslug: block confirmation with single round of communication, and a finality gadget with guaranteed liveness",
icon: "ph-file-doc",
url: docs.doomslug,
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;
}
`;

console.log("papersDocs", props);

return (
<Wrapper>
<Section backgroundColor="#61E5E2" style={{ padding: "72px 0" }}>
<Container center>
<Pattern>
<PatternContent>
<Flex gap="32px" direction="column" alignItems="center">
<H1>Papers</H1>

<Text size="text-l" mobileSize="text-base">
Join us as we dive deep into our technology.
</Text>
</Flex>
</PatternContent>
</Pattern>
</Container>
</Section>

<Section backgroundColor="#F2F1EA">
<Container>
<Grid columns="1fr 1fr 1fr" gap="24px">
{papersDocs.map((item) => (
<Widget
src="${REPL_ACCOUNT}/widget/NearOrg.Card"
key={item.name}
props={{
as: "a",
href: item.url,
target: item.target,
rel: "noopener noreferrer",
alt: item.name,
children: (
<>
<IconCircle>
<i className={`ph-duotone ${item.icon}`} />
</IconCircle>

<Flex direction="column" gap="16px">
<Text size="text-l" fontWeight="500">
{item.name}
</Text>
<Text size="text-s">{item.description}</Text>
</Flex>
</>
),
}}
/>
))}
</Grid>
</Container>
</Section>
</Wrapper>
);

0 comments on commit e96779f

Please sign in to comment.