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="near/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> );