const Wrapper = styled.div` --section-gap: 162px; --large-gap: 82px; --medium-gap: 48px; margin: calc(var(--body-top-padding) * -1) calc(var(--bs-gutter-x) * -0.5) 0; padding: calc(var(--section-gap) / 2) 0 0; position: relative; @media (max-width: 900px) { --section-gap: 60px; --large-gap: 24px; --medium-gap: 16px; padding-top: 0; } `; const H1 = styled.h1` font: var(--text-hero); text-align: center; letter-spacing: -0.015em; color: var(--sand12); margin: 0; @media (max-width: 900px) { font: var(--text-2xl); font-weight: 600; } `; const Text = styled.p` font: var(--${(p) => p.size ?? "text-base"}); font-weight: ${(p) => p.fontWeight}; color: var(--${(p) => p.color ?? "sand10"}); margin: 0; text-align: ${(p) => p.align}; [href] { color: var(--violet8); &:hover { color: var(--violet11); text-decoration: none; } &:focus { text-decoration: underline; outline: none; } } ${(p) => p.flex && ` display: flex; align-items: center; gap: 16px; `} `; 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; gap: var(--section-gap); } `} `; const Section = styled.div` display: flex; padding: calc(var(--section-gap) / 2) 16px; gap: ${(p) => p.gap ?? "var(--medium-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)}; background: ${(p) => p.background}; `; const Card = styled.div` display: flex; flex-direction: ${(p) => p.direction ?? "column"}; gap: ${(p) => p.gap ?? "24px"}; width: 100%; padding: ${(p) => p.padding ?? "32px"}; border-radius: 8px; border: ${(p) => p.border ?? "1px solid var(--sand4)"}; align-items: ${(p) => (p.center ? "center" : "flex-star")}; justify-content: ${(p) => (p.center ? "center" : undefined)}; text-align: ${(p) => (p.center ? "center" : undefined)}; background: ${(p) => p.background ?? "var(--sand1)"}; `; const SocialIcon = styled.i` font-size: ${(p) => p.size ?? "30px"}; text-align: ${(p) => p.align}; color: ${(p) => p.color}; `; function returnIpfsImage(cfid) { return { ipfs_cid: cfid, }; } const ipfsImages = { logoCreatebase: "bafkreignv7fxrwquqr66wsow76amhghyrdd3k3ecb7up6dzem6vhz2cgki", logoCypherpunkGuild: "bafkreie25aa7gfb5u3p7bouxc6xknismfgtdtlt3yi7pqau3nqtksvvnsm", logo4NTSGuild: "bafkreifrjw7dyg7ff3jrvzq35napmpiwcxdt2wrmo4hkysma7scr3jwake", }; const involvedCards = [ { iconClassName: "ph ph-binoculars", iconColor: "violet7", title: "Find your Tribe", content: "Make friends and connections pursuing a mission you’re passionate about.", }, { iconClassName: "ph ph-chart-pie-slice", iconColor: "red7", title: "Make an Impact", content: "Help give power (money, data, and governance) back to the people.", }, { iconClassName: "ph ph-hand-heart", iconColor: "cyan7", title: "Give Back", content: "When you contribute to building a better future, good things happen.", }, { iconClassName: "ph ph-chart-line-up", iconColor: "green7", title: "Make a Living", content: "Work when you want, how you want, and get paid based on your contribution.", }, ]; const getStartedCards = [ { iconClassName: "ph ph-graduation-cap", iconColor: "violet7", title: "Education", content: "Learn the basics, explore the ecosystem, or dive deep into the tech.", href: "https://near.org/learn/learn-more", hrefText: "See all Learn Resources", internal: false, }, { iconClassName: "ph ph-chats", iconColor: "cyan7", title: "Join our Discord", content: "Join ongoing topical conversations about all things NEAR.", href: "https://near.chat", hrefText: "Go to Discord", internal: true, }, { iconClassName: "ph ph-check-square-offset", iconColor: "red7", title: "Community Events", content: "Worldwide opportunities to attend, participate, connect and more.", href: "https://near.events", hrefText: "Go to Events Site", internal: true, }, ]; const featuredGuildsCards = [ { ipfsImage: ipfsImages.logoCreatebase, title: "Createbase", content: "A community for Creators/Projects launching on Mintbase. Get support/funding and connect with other creatives!", }, { ipfsImage: ipfsImages.logoCypherpunkGuild, title: "Cypherpunk Guild", content: "A guild focussed on incentivizing builders to create privacy-enhancing technologies on NEAR.", }, { ipfsImage: ipfsImages.logo4NTSGuild, title: "4NTS Guild", content: "A community building and marketing-focused guild.", }, ]; const connectChannelsLinks = [ { key: "discord", href: "http://near.chat", hrefText: "Discord", internal: true, }, { key: "governance_forum", href: "https://gov.near.org", hrefText: "Governance Forum", internal: true, }, { key: "twitter", href: "https://twitter.com/nearprotocol", hrefText: "Twitter", internal: true, }, { key: "reddit", href: "https://www.reddit.com/r/nearprotocol", hrefText: "Reddit", internal: true, }, { key: "telegram", href: "https://t.me/cryptonear", hrefText: "Telegram", internal: true, }, { key: "github", href: "https://github.com/near", hrefText: "Github", internal: true, }, { key: "we_chat", href: "https://near.org/ecosystem/community/wechat", hrefText: "WeChat", internal: false, }, ]; return ( <Wrapper> <Section> <Flex gap="16px" direction="column" alignItems="start"> <H1>Community</H1> <Text size="text-xl" color="sand12" style={{ maxWidth: "662px" }}> The NEAR community is a globally distributed home to innovators, developers, and contributors supporting the protocol’s platform, ecosystem, and applications. We’re all here to build a stronger ecosystem. </Text> </Flex> </Section> <Section background="linear-gradient(to right, hsla(0, 0%, 100%, 0), var(--sand3), hsla(0, 0%, 100%, 0))"> <Text size="text-3xl" color="sand12"> Why get involved? </Text> <div class="row row-cols-lg-4 row-cols-md-2 row-cols-1 g-4"> {involvedCards.map((item) => ( <div class="col"> <Card center> <SocialIcon className={item.iconClassName} color={`var(--${item.iconColor})`} /> <Text size="text-xl" color="sand12" fontWeight="600"> {item.title} </Text> <Text size="text-m" color="sand12"> {item.content} </Text> </Card> </div> ))} </div> </Section> <Section> <Text size="text-3xl" color="sand12"> Get Started </Text> <Text size="text-m" color="sand12"> The NEAR Community provides a number of ways for you to start learning, earning, and growing. </Text> <div class="row row-cols-lg-3 row-cols-md-2 row-cols-1 g-4"> {getStartedCards.map((item) => ( <div class="col"> <Card center style={{ height: "100%" }}> <SocialIcon className={item.iconClassName} color={`var(--${item.iconColor})`} /> <Text size="text-xl" color="sand12" fontWeight="600"> {item.title} </Text> <Text size="text-m" color="sand12"> {item.content} </Text> {item.internal ? ( <Widget src="near/widget/DIG.Button" props={{ href: item.href, iconRight: "ph-bold ph-arrow-up-right", label: item.hrefText, variant: "primary", fill: "outline", size: "large", as: "a", target: "_blank", }} /> ) : ( <Widget src="near/widget/DIG.Button" props={{ href: item.href, iconRight: "ph-bold ph-arrow-right", label: item.hrefText, variant: "primary", fill: "outline", size: "large", }} /> )} </Card> </div> ))} </div> </Section> <Section> <Text size="text-3xl" color="sand12" style={{ maxWidth: "662px" }}> Guilds: Opening the web through community initiatives. </Text> <Text size="text-m" color="sand12" style={{ maxWidth: "662px" }}> Guilds are collectives that make up the greater NEAR community. Each guild shares a specific vision and mission related to driving a more open, interconnected, and consumer-empowered world. </Text> <Text size="text-l" color="sand12" style={{ maxWidth: "662px" }}> Featured Guilds </Text> <div class="row row-cols-lg-3 row-cols-md-2 row-cols-1 g-4"> {featuredGuildsCards.map((item) => ( <div class="col"> <Card style={{ height: "100%" }}> <Widget src="mob.near/widget/Image" props={{ image: returnIpfsImage(item.ipfsImage), style: { width: "52px", height: "52px" }, }} /> <Text size="text-xl" color="sand12" fontWeight="600"> {item.title} </Text> <Text size="text-m" color="sand12"> {item.content} </Text> </Card> </div> ))} </div> </Section> <Section background="linear-gradient(to right, hsla(0, 0%, 100%, 0), var(--sand3), hsla(0, 0%, 100%, 0))"> <div class="row row-cols-md-3 row-cols-1 g-4"> <div class="col"> <Card background="transparent" border="none" padding="32px 0" style={{ height: "100%" }} > <SocialIcon className="ph ph-video" color="var(--red7)" /> <Text size="text-xl" color="sand12" fontWeight="600"> Watch </Text> <div> <Widget src="near/widget/DIG.Button" props={{ href: "https://www.youtube.com/channel/UCuKdIYVN8iE3fv8alyk1aMw", iconRight: "ph-bold ph-arrow-up-right", label: "NEAR YouTube Channel", variant: "primary", fill: "outline", size: "small", as: "a", target: "_blank", }} /> </div> </Card> </div> <div class="col"> <Card background="transparent" border="none" padding="32px 0" style={{ height: "100%" }} > <SocialIcon className="ph ph-lightbulb" color="var(--violet7)" /> <Text size="text-xl" color="sand12" fontWeight="600"> Read </Text> <Flex gap="24px" direction="column" alignItems="start"> <Widget src="near/widget/DIG.Button" props={{ href: "https://near.org/blog", iconRight: "ph-bold ph-arrow-right", label: "NEAR Blog", variant: "primary", fill: "outline", size: "small", }} /> <Widget src="near/widget/DIG.Button" props={{ href: "https://medium.com/nearprotocol", iconRight: "ph-bold ph-arrow-up-right", label: "Community Blog", variant: "primary", fill: "outline", size: "small", as: "a", target: "_blank", }} /> </Flex> </Card> </div> <div class="col"> <Card background="transparent" border="none" padding="32px 0" style={{ height: "100%" }} > <SocialIcon className="ph ph-chats" color="var(--cyan7)" /> <Text size="text-xl" color="sand12" fontWeight="600"> Connect </Text> <div class="row row-cols-md-2 row-cols-1 g-4"> {connectChannelsLinks.map((item) => ( <div key={item.key} class="col"> {item.internal ? ( <Widget src="near/widget/DIG.Button" props={{ href: item.href, iconRight: "ph-bold ph-arrow-up-right", label: item.hrefText, variant: "primary", fill: "outline", size: "small", as: "a", target: "_blank", }} /> ) : ( <Widget src="near/widget/DIG.Button" props={{ href: item.href, iconRight: "ph-bold ph-arrow-right", label: item.hrefText, variant: "primary", fill: "outline", size: "small", }} /> )} </div> ))} </div> </Card> </div> </div> </Section> <Widget src="near/widget/NearOrg.Footer" /> </Wrapper> );