Transaction: BjBLXhD...4sMg

{ "data": { "near": { "widget": { "NearOrg.Ecosystem.OverviewPage": { "": "const nearOrgLinks = {\n getFundingPage: \"/near/widget/NearOrg.Ecosystem.GetFundingPage\",\n communityPage: \"/near/widget/NearOrg.Ecosystem.CommunityPage\",\n workAndEarnPage: \"/near/widget/NearOrg.Ecosystem.WorkAndEarnPage\",\n};\n\nconst Wrapper = styled.div`\n --section-gap: 162px;\n --large-gap: 82px;\n --medium-gap: 48px;\n padding: calc(var(--section-gap) / 2) 0 0;\n position: relative;\n\n @media (max-width: 900px) {\n --section-gap: 60px;\n --large-gap: 48px;\n --medium-gap: 24px;\n }\n`;\nconst H1 = styled.h1`\n font: var(--text-hero);\n text-align: center;\n letter-spacing: -0.015em;\n color: var(--sand12);\n margin: 0;\n max-width: 960px;\n\n @media (max-width: 900px) {\n font: var(--text-2xl);\n font-weight: 600;\n }\n`;\n\nconst Text = styled.p`\n font: var(--${(p) => p.size ?? \"text-base\"});\n font-weight: ${(p) => p.fontWeight};\n color: var(--${(p) => p.color ?? \"sand10\"});\n margin: 0;\n text-align: ${(p) => p.align};\n`;\n\nconst TextLink = styled(\"Link\")`\n font: var(--${(p) => p.size ?? \"text-base\"});\n font-weight: ${(p) => p.fontWeight};\n margin: 0;\n text-align: ${(p) => p.align};\n color: var(--violet8);\n\n &:hover {\n color: var(--violet11);\n text-decoration: none;\n }\n &:focus {\n text-decoration: underline;\n outline: none;\n }\n`;\n\nconst Small = styled.span`\n font: inherit;\n color: inherit;\n margin: 0;\n font-size: ${(p) => p.size};\n`;\nconst Flex = styled.div`\n display: flex;\n gap: ${(p) => p.gap};\n align-items: ${(p) => p.alignItems};\n justify-content: ${(p) => p.justifyContent};\n flex-direction: ${(p) => p.direction ?? \"row\"};\n flex-wrap: ${(p) => p.wrap ?? \"nowrap\"};\n\n @media (max-width: 900px) {\n flex-direction: ${(p) => (p.mobileStack ? \"column\" : p.direction ?? \"row\")};\n gap: ${(p) => (p.mobileStack === true ? \"var(--section-gap)\" : p.mobileStack ? p.mobileStack : p.gap)};\n }\n`;\nconst Section = styled.div`\n display: flex;\n padding: calc(var(--section-gap) / 2);\n gap: ${(p) => p.gap ?? \"var(--medium-gap)\"};\n flex-direction: column;\n align-items: ${(p) => (p.center ? \"center\" : undefined)};\n justify-content: ${(p) => (p.center ? \"center\" : undefined)};\n text-align: ${(p) => (p.center ? \"center\" : undefined)};\n background: ${(p) => p.background};\n\n @media (max-width: 900px) {\n padding-left: var(--medium-gap);\n padding-right: var(--medium-gap);\n }\n`;\nconst Card = styled.div`\n display: flex;\n flex-direction: ${(p) => p.direction ?? \"column\"};\n gap: ${(p) => p.gap ?? \"24px\"};\n width: 100%;\n padding: ${(p) => p.padding ?? \"32px\"};\n border-radius: 8px;\n border: ${(p) => p.border ?? \"1px solid var(--sand4)\"};\n align-items: ${(p) => (p.center ? \"center\" : \"flex-star\")};\n justify-content: ${(p) => (p.center ? \"center\" : undefined)};\n text-align: ${(p) => (p.center ? \"center\" : undefined)};\n background: ${(p) => p.background ?? \"var(--sand1)\"};\n`;\nconst NumericLabel = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 14px 21px 14px 21px;\n border-radius: 10px;\n background-color: ${(p) => p.backgroundColor ?? \"var(--white)\"};\n`;\nconst StickyNav = styled.div`\n position: sticky;\n top: 10px;\n`;\nconst SocialLink = styled(\"Link\")`\n color: var(--sand12);\n text-decoration: none;\n transition: all 200ms;\n &:hover {\n color: var(--sand10);\n }\n`;\nconst SocialIcon = styled.i`\n font-size: ${(p) => p.size ?? \"30px\"};\n text-align: ${(p) => p.align};\n color: ${(p) => p.color};\n`;\n\nconst navLinks = [\n {\n name: \"Projects & DAOs\",\n href: \"anker_projects_daos\",\n },\n {\n name: \"Community\",\n href: \"anker_community\",\n },\n {\n name: \"Venture support\",\n href: \"anker_venture_support\",\n },\n {\n name: \"Tech base\",\n href: \"anker_tech_base\",\n },\n {\n name: \"Regional hubs\",\n href: \"anker_regional_hubs\",\n },\n {\n name: \"Web3 career\",\n href: \"anker_web3_career\",\n },\n];\n\nfunction returnIpfsImage(cfid) {\n return {\n ipfs_cid: cfid,\n };\n}\n\nconst ipfsImages = {\n headerImage: \"bafkreifzci2sberaa2xixrvmziefyankzeydqesv662e6egpea6gd3tedu\",\n projectDAOs: \"bafkreibj5poz4hg4acprnn4mo4ohn6hpku256gs2mvewo2nthzy65fvwiu\",\n homepageApps: \"bafkreihmam4sppi5p3jpzynzh5gjx6zgr2gbp5kmutbwywjj5le4tvohvu\",\n nearWeek: \"bafkreidcxi2e77yqguht7csjxsn42uk7f7rlxqvryrxog5m2y7acffgnli\",\n humanGuild: \"bafkreia2q267cf7apo6r3o3uw35lpbrp43jb3c5udfgquee2clbkdbks4e\",\n tenkDao: \"bafkreiajzdfp6vwyfn27dfvplczqrp24ncuppt7qlvgpvvraks6vx234wu\",\n unchainLogo: \"bafkreiath5t7igknmarvotq7u6ly7gd6yfqygbuhueo6q4vwjdgc7vg32m\",\n ecosystemCommunity: \"bafkreih4l27eegfkvkr4t4hqvnwq2bsxw4rx6o74sty62mhyao2o6waiia\",\n ecosystemBanner: \"bafkreicbkkhc52wxqcrsva7d4rmg4zt2k4mcqcb2bax552yzk6zy37z2da\",\n ecosystemBlog: \"bafkreighn22rod4goppcqn4etb3ss27wg2o6xwjoi5i2rdidgtrwa6cyim\",\n ecosystemVenue: \"bafkreiavzhz2qks4rvucj5nkttv5izkvldirlhhsfvcs3vmpw22hjaqhfu\",\n ecosystemOwcLogo: \"bafkreiczr4ykowwpw46pilg5wuldpq6d7o6mlxydqr3p2vi5betdfs54wa\",\n fundingArrows: \"bafkreict6kdekqm6u4nnneewrmnffr656uxvkv2vjkruyx4gl34w46fjxi\",\n logoAurora: \"bafkreieoq7wpdctcx42uywfdaoi4k3uq6rgodbjjz6mhz3qesrmaben2ju\",\n logoCreativeDao: \"bafkreictzvvz2irr7tr7fhkdne2i7xpr4mf7x5b5i2vhgoqdswb73lbyyu\",\n logoDevDao: \"bafkreibvh3qys5z7qbekqqhmgump4iy32nw5wfvcyegejfs4gckrbqp7pq\",\n logoMarketingDao: \"bafkreifnwvfi7x5bzzxrjjvp7xbfqd3xpojtlohcgzrowtvyygogrt2emq\",\n logoProximity: \"bafkreiazqis67kprs5ofbdruktmtvtun4g4bb2nbrqpwxzocuz77io6vyy\",\n logoOctopus: \"bafkreibzcnifufde5ft6hx3qkwzxhzq66avfbholirvrmaf5jbojwqggey\",\n logoFlux: \"bafkreifqjofqj5v4a4cl5ycdpphgyna2qdzedrvxyrdivc2mpcwlgckqsy\",\n ecosystemTechnicalBase: \"bafkreifn5tsqnornzex2ezgretfgmqmv7y2f5faypzxk7pgzbuhsw4wrrq\",\n ecosystemCareer: \"bafkreiei3xbvnmjiwfffso7hp333uud3gto6x7ug7namypifq375mr63am\",\n jsIcon: \"bafkreih7lfumu4zbnwir5qcfzon3nam5oylsknialxei3udk3y56s4ogxu\",\n rustIcon: \"bafkreigxguerx7ifrt6homkapurh2apreyhhraubpyx4ilyupzzezjikfq\",\n logoBitgo: \"bafkreib7vssn35gqk3spmf26adnvjanw7r2q6b7fsxdgocrgihm7zc6jyi\",\n logoFireblocks: \"bafkreif52a6b7xl2rgurr4t7jvam2evwb6sqensdvqs5wdb4mb4e2fapmu\",\n logoFinoa: \"bafkreiehh6s4z6bfd5qxfr3jwoa2lr5dvezictwojrjtfqqi6grshsz6yi\",\n sectionAnkerRegionalHubs: \"bafkreigdpe6rddrtrym6dzmuen4jjei7fvuitf2wrnehpllopto7obgjfu\",\n logoSankore: \"bafkreidkhx655kdwmtb4mhqrs36ynbp4xgu2jlysyddsro6cnf3nilxgey\",\n nearLogoKorea: \"bafkreigljspwl7cuqy54hbdcpxhabcgdy7ebmpmdaw7zvsjpa3t5karwci\",\n nearLogoBalkans: \"bafkreidbhhztr4z7u3oxt453jb5qt2x3ccwdrvoe656e4i75olsvrexp3u\",\n nearLogoVietnam: \"bafkreiaokaifsncqmq7ob6o7zgue2c6ao6a2e227ey4soa6daam6zzmcou\",\n nearLogoIndia: \"bafkreignqxbsg7c4up2g56mxksqlm2pt5ilwfi75jng2h7kxfjnhnn3eym\",\n};\nconst fundingRows = {\n firstRow: [\n {\n ipfsImage: ipfsImages.logoProximity,\n title: \"Proximity Labs\",\n content:\n \"Proximity works to support the NEAR and Aurora DeFi ecosytems through grants, advisory services, as well as publishing open-source software for developers.\",\n href: \"https://www.proximity.dev\",\n },\n {\n ipfsImage: ipfsImages.humanGuild,\n title: \"Human Guild\",\n content:\n \"The Human Guild is an open group of founders and creators who believe everyone should be able to earn what they need in order to do what they love.\",\n href: \"https://humanguild.io\",\n },\n {\n ipfsImage: ipfsImages.logoAurora,\n title: \"Aurora\",\n content:\n \"Grow your Ethereum project on Aurora! Access funding, dedicated technical support, recruiting assistance, and more.\",\n href: \"https://aurora.dev/grants\",\n },\n ],\n secondRow: [\n {\n ipfsImage: ipfsImages.logoMarketingDao,\n title: \"Marketing DAO\",\n content:\n \"The MarketingDAO is a NEAR Community-run organization, which engage with the NEAR Community to facilitate the allocation of Community funds for marketing activities under $10,000.\",\n href: \"https://gov.near.org/c/marketing/marketingdao/91\",\n },\n {\n ipfsImage: ipfsImages.logoCreativeDao,\n title: \"Creative DAO\",\n content:\n \"The Creatives DAO will focus on enabling and supporting artists, makers, and creative projects building on NEAR.\",\n href: \"https://gov.near.org/c/creatives/creatives-dao/61\",\n },\n {\n ipfsImage: ipfsImages.logoDevDao,\n title: \"Developer DAO\",\n content:\n \"Developer DAO will cover everything development related, from a ZK working group to security audits, fixing bugs in the APIs to sourcing the next SDK to meet community needs.\",\n href: \"https://www.neardevgov.org\",\n },\n ],\n};\nconst ventureCards = [\n {\n ipfsImage: \"bafkreiggouknmgvowdtfvtzg22p7gajl4gbfcz7tyqdcraaesfcp2von6m\",\n title: \"Orderly Network raised $20M Series A\",\n content: \"Key investors: Pantera Capital, Dragonfly Captial, MetaWeb\",\n hrefText: \"Read on CoinDesk\",\n href: \"https://www.coindesk.com/business/2022/06/09/orderly-network-raises-20m-for-defi-infrastructure-on-near-protocol\",\n },\n {\n ipfsImage: \"bafkreichhms4aeb7psmwcaxg3ofcqyhrhzrjyqgl4fqopm5suk5hyvtbge\",\n title: \"Sweat Economy raised $13M\",\n content: \"Key investors: Spartan Capital, Electric Capital, OKX Blockdream Ventures, Goodwater Capital\",\n hrefText: \"Read on CoinDesk\",\n href: \"https://www.coindesk.com/business/2022/07/28/health-and-fitness-app-sweat-economy-raises-13m-in-private-token-sale-to-move-to-web3\",\n },\n {\n ipfsImage: \"bafkreiewpsaoremj5vxmnbernptcarrvfvsr3tbue3wbf67mpockou3dlm\",\n title: \"Connect3 raised a strategic round\",\n content: \"Key investors: MetaWeb\",\n hrefText: \"Read on Medium\",\n href: \"https://medium.com/metaweb-vc/connect3-announces-strategic-investment-from-metaweb-ventures-c1a1ddb48294\",\n },\n {\n ipfsImage: \"bafkreibie3umc2jdsdwk5pemo6vty2imc57dlmjywzy62xqvaefkv3asfq\",\n title: \"Request Finance raised $5.5M seed round\",\n content: \"Key investors: Animoca Brands, Balderton Capital, XAnge\",\n hrefText: \"Read on yahoo finance\",\n href: \"https://finance.yahoo.com/news/request-finance-raises-5-5m-044500764.html\",\n },\n];\nconst rpcCards = [\n {\n ipfsImage: \"bafkreiffcutd2yya4sejyojcb6f3h4lje7rno4gdfwh3672phybriwtj3q\",\n title: \"Infura\",\n content: \"NEAR and Aurora\",\n href: \"https://docs.infura.io/infura/networks/near\",\n },\n {\n ipfsImage: \"bafkreibmoqhmmo4apt3to4tmfoer6g3fst4looifzbpnh4inlxr7pcccvm\",\n title: \"Ankr\",\n content: \"NEAR\",\n href: \"https://www.ankr.com/docs/build-blockchain/chains/v2/near\",\n },\n {\n ipfsImage: \"bafkreifhhjluhhqzoyakw3bvex64s3th23g7duitlddnlutlq3sfciuory\",\n title: \"Alchemy\",\n content: \"NEAR and Aurora\",\n href: \"https://docs.alchemy.com/docs/how-to-add-near-aurora-to-metamask#what-is-aurora\",\n },\n];\nconst storageCards = [\n {\n ipfsImage: \"bafkreidszx6usrvjvlqd6jlrqd5fwuv5hsix5nsnvzmrwqtzxnkjlq5osa\",\n title: \"IPFS\",\n content: \"NEAR and Aurora\",\n href: \"https://docs.near.org/concepts/storage/storage-solutions#ipfs\",\n hrefText: \"How to integrate\",\n internal: true,\n },\n {\n ipfsImage: \"bafkreigin7ctsgww36didndjzppvq34qajk4ajhmlfuo4s6cr46lzvn7ee\",\n title: \"Arweave\",\n content: \"NEAR\",\n href: \"https://docs.near.org/concepts/storage/storage-solutions#arweave\",\n hrefText: \"How to integrate\",\n internal: true,\n },\n {\n ipfsImage: \"bafkreiexs6yxjpcq4fe2p55a6ft5wf46fcvzfgkgu4zatqrtsf4eqssope\",\n title: \"SIA\",\n content: \"NEAR and Aurora\",\n href: \"https://docs.near.org/concepts/storage/storage-solutions#sia\",\n hrefText: \"How to integrate\",\n internal: true,\n },\n {\n ipfsImage: \"bafkreifsxwd3svdzqcegfsultrlg5xixuyzamd5t77unjmmqmedavh3cw4\",\n title: \"Machina\",\n content: \"Coming soon\",\n href: \"https://machina.storage\",\n hrefText: \"Learn more\",\n internal: true,\n },\n {\n ipfsImage: \"bafkreibn2jk7bzazc7dzzxles7oib56nfwqnvwecqgr7mw7wioievt6e2m\",\n title: \"Ceramic\",\n content: null,\n href: \"https://near.org/blog/near-partners-with-ceramic\",\n hrefText: \"Read announcement\",\n internal: false,\n },\n];\nconst oracleCards = [\n {\n ipfsImage: ipfsImages.logoFlux,\n title: \"Flux Protocol\",\n content: \"Coming soon\",\n href: \"https://docs.fluxprotocol.org/docs\",\n },\n {\n ipfsImage: ipfsImages.logoProximity,\n title: \"Proximity\",\n content: null,\n href: \"https://docs.near.org/develop/relevant-contracts/oracles\",\n },\n];\nconst assetsCards = [\n {\n ipfsImage: ipfsImages.logoBitgo,\n title: \"BitGo\",\n content: \"Coming soon\",\n href: \"https://www.bitgo.com\",\n },\n {\n ipfsImage: ipfsImages.logoFireblocks,\n title: \"Fireblocks\",\n content: null,\n href: \"https://www.fireblocks.com\",\n },\n {\n ipfsImage: ipfsImages.logoFinoa,\n title: \"Fiona\",\n content: null,\n href: \"https://www.finoa.io\",\n },\n];\nconst nearHubsCards = [\n {\n ipfsImage: ipfsImages.logoSankore,\n title: \"Kenya Regional Hub: Sankore 2.0\",\n content: \"Started in May 2022, the African-focused hub organizes events, meetups and local educational activities.\",\n href: \"https://www.sankore2.com\",\n hrefText: \"Visit Sankore 2.0\",\n },\n {\n ipfsImage: ipfsImages.nearLogoKorea,\n title: \"NEAR Korea\",\n content:\n \"The Korea Hub is dedicated to driving Web3 innovation through business development and education initiatives throughout South Korea.\",\n href: \"https://nearkorea.org\",\n hrefText: \"Visit NEAR Korea\",\n },\n {\n ipfsImage: ipfsImages.nearLogoBalkans,\n title: \"NEAR Balkans Hub\",\n content:\n \"NEAR Balkans is the regional hub open for everyone interested in learning about, using or building on the NEAR protocol in the Balkan countries.\",\n href: \"https://nearbalkans.org\",\n hrefText: \"Visit NEAR Balkans\",\n },\n {\n ipfsImage: ipfsImages.nearLogoVietnam,\n title: \"NEAR Vietnam\",\n content:\n \"NEAR Vietnam Hub is the regional hub open for everyone interested in learning about, using or building on the NEAR protocol in Vietnam.\",\n href: \"https://nearvietnamhub.org\",\n hrefText: \"Visit NEAR Vietman\",\n },\n];\n\nreturn (\n <>\n <Wrapper className=\"gateway-page-container\">\n <Section center style={{ position: \"relative\" }}>\n <Flex gap=\"16px\" direction=\"column\" alignItems=\"center\">\n <H1>Building the Open Web together</H1>\n <Text size=\"text-xl\" color=\"sand12\" style={{ maxWidth: \"662px\" }}>\n Projects building on NEAR are at the center. The Ecosystem is supporting them with everything they need to\n succeed.\n </Text>\n </Flex>\n <Flex gap=\"16px\" alignItems=\"center\" wrap=\"wrap\" justifyContent=\"center\">\n {navLinks.map((nav) => (\n <TextLink key={nav.href} href={`#${nav.href}`}>\n {nav.name}\n </TextLink>\n ))}\n </Flex>\n </Section>\n <Section center>\n <Flex gap=\"var(--large-gap)\" wrap=\"wrap\" justifyContent=\"center\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.headerImage),\n className: \"img-fluid\",\n }}\n />\n </Flex>\n </Section>\n <Section background=\"linear-gradient(to right, hsla(0, 0%, 100%, 0), var(--sand3), hsla(0, 0%, 100%, 0))\">\n <div className=\"row row-cols-md-2 row-cols-1 g-4 text-md-start text-center\">\n <div className=\"col order-md-0 order-1\">\n <Flex gap=\"16px\" direction=\"column\">\n <Text size=\"text-3xl\" color=\"sand12\">\n Hundreds of Projects and DAOs\n </Text>\n <Text size=\"text-xl\" color=\"sand12\">\n Projects and DAOs bring value to users, and change to the world.\n </Text>\n <Flex gap=\"32px\" className=\"justify-content-md-start justify-content-center\">\n <NumericLabel>\n <Text size=\"text-3xl\" color=\"cyan8\" fontWeight=\"600\">\n 750\n </Text>\n <Text size=\"text-l\" color=\"sand12\">\n Active projects\n </Text>\n </NumericLabel>\n <NumericLabel>\n <Text size=\"text-3xl\" color=\"cyan8\" fontWeight=\"600\">\n 125\n </Text>\n <Text size=\"text-l\" color=\"sand12\">\n DAOs\n </Text>\n </NumericLabel>\n </Flex>\n </Flex>\n </div>\n <div className=\"col order-md-1 order-0\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.projectDAOs),\n className: \"img-fluid\",\n }}\n />\n </div>\n </div>\n\n <Section center id=\"anker_projects_daos\">\n <Text size=\"text-3xl\" color=\"sand12\">\n Projects: Building the future on NEAR\n </Text>\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.homepageApps),\n className: \"img-fluid px-5\",\n }}\n />\n <Text size=\"text-3xl\" color=\"sand12\">\n Explore hundreds of dApps already built on NEAR\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://near.org/applications\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Visit Near Catalog\",\n variant: \"affirmative\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Section>\n\n <Section center>\n <Text size=\"text-3xl\" color=\"sand12\">\n DAOs: A new way to organize, fund, and empower communities\n </Text>\n <Text size=\"text-xl\" color=\"sand12\">\n DAOs offer a new way for communities to collaborate. Members own the organization and receive rewards in\n proportion to their contributions. There are no bosses and no hierarchy. Instead, a common purpose unites\n the participants. One way to think of a DAO is a Facebook group with its own bank account.\n </Text>\n </Section>\n\n <Section center>\n <Text size=\"text-3xl\" color=\"sand12\">\n Explore DAOs, participate or get funding\n </Text>\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card center>\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.nearWeek),\n className: \"img-fluid\",\n }}\n />\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n NEARWEEK\n </Text>\n <Text>\n NEARWEEK is a Web3 news & community platform. Community members earn rewards by submitting news items\n to the NEARWEEK DAO.\n </Text>\n </Flex>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://nearweek.com/\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Learn more\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Card>\n\n <Card center>\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.humanGuild),\n className: \"img-fluid\",\n }}\n />\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Human Guild\n </Text>\n <Text>\n Human Guild awards grants to promising gaming projects building on NEAR and supports them in an\n advisory role along with other services.\n </Text>\n </Flex>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://humanguild.io/\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Learn more\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Card>\n\n <Card center>\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.tenkDao),\n className: \"img-fluid\",\n }}\n />\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n TenK DAO\n </Text>\n <Text>\n TenK DAO offers professional services to help artists build generative art projects. The DAO is\n compensated with a percentage of sales and royalties.\n </Text>\n </Flex>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://tenk.dev/\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Learn more\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Card>\n </Flex>\n <Flex gap=\"32px\" mobileStack=\"32px\">\n <Card center direction=\"row\" className=\"flex-md-nowrap flex-wrap\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.unchainLogo),\n className: \"img-fluid me-4\",\n }}\n />\n <Flex\n direction=\"column\"\n gap=\"16px\"\n className=\"align-items-center align-items-md-start justify-content-center justify-content-md-start\"\n >\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n How crypto became a major source of relief for embattled Ukraine\n </Text>\n <Text className=\"text-center text-md-start\">\n Created on AstroDAO, a DAO-launching platform built on NEAR, Unchain Fund raises funds for\n humanitarian efforts in in Ukraine, including evacuation, shelter, food, and more. In under a month,\n Unchain has collected over $7 million USD and counting across a range of cryptocurrencies including,\n BSC, ETH, Harmony, NEAR, and Polygon.\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://unchain.fund/\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Learn more\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Flex>\n </Card>\n </Flex>\n <Flex gap=\"32px\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://astrodao.com/\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Browse DAOs on AstroDAO\",\n variant: \"affirmative\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Flex>\n </Section>\n <Section gap=\"24px\">\n <Card>\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\" align=\"left\">\n Looking for funding to start a project or DAO?\n </Text>\n <Text align=\"left\">\n The NEAR ecosystem has plenty of options available to fund promising projects or initiatives that bring\n the ecosystem forward.\n </Text>\n <div>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: nearOrgLinks.getFundingPage,\n iconRight: \"ph-bold ph-arrow-right\",\n label: \"Explore funding options\",\n variant: \"affirmative\",\n size: \"large\",\n }}\n />\n </div>\n </Card>\n\n <Card>\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\" align=\"left\">\n Thinking about starting a DAO?\n </Text>\n <Text align=\"left\">\n Whether you want to organize your annual tailgate party so you can enjoy it more or manage the budget of\n your first film, you can set up a DAO that supports your needs. Platforms like SputnikDAO and AstroDAO are\n ways for organizations around the world to represent membership, facilitate governance, make decisions,\n and interact with other DAOs. Create your own DAO today!\n </Text>\n <div>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://app.astrodao.com/all/daos\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Create a new DAO\",\n variant: \"affirmative\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </div>\n </Card>\n </Section>\n </Section>\n\n <Section gap=\"32px\" id=\"anker_community\">\n <div className=\"row row-cols-md-2 row-cols-1 g-4 text-md-start text-center\">\n <div className=\"col order-md-0 order-1\">\n <Flex gap=\"16px\" direction=\"column\">\n <Text size=\"text-3xl\" color=\"sand12\">\n A vibrant, welcoming community\n </Text>\n <Text size=\"text-xl\" color=\"sand12\">\n NEAR’s vibrant community is a globally distributed home for developers, token holders, validators, and\n members supporting the protocol’s platform, ecosystem, and applications.\n </Text>\n <Flex gap=\"32px\" wrap=\"wrap\" className=\"justify-content-md-start justify-content-center\">\n <NumericLabel backgroundColor=\"var(--sand3)\">\n <Text size=\"text-3xl\" color=\"cyan8\" fontWeight=\"600\">\n 550<Small size=\"20px\">k</Small>\n </Text>\n <Text size=\"text-l\" color=\"sand12\">\n Members\n </Text>\n </NumericLabel>\n <NumericLabel backgroundColor=\"var(--sand3)\">\n <Text size=\"text-3xl\" color=\"cyan8\" fontWeight=\"600\">\n 4<Small size=\"20px\">k</Small>\n </Text>\n <Text size=\"text-l\" color=\"sand12\">\n Developers\n </Text>\n </NumericLabel>\n <NumericLabel backgroundColor=\"var(--sand3)\">\n <Text size=\"text-3xl\" color=\"cyan8\" fontWeight=\"600\">\n 120\n </Text>\n <Text size=\"text-l\" color=\"sand12\">\n Guilds\n </Text>\n </NumericLabel>\n </Flex>\n </Flex>\n </div>\n <div className=\"col order-md-1 order-0\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.ecosystemCommunity),\n className: \"img-fluid mx-auto\",\n }}\n />\n </div>\n </div>\n <Flex className=\"justify-content-md-start justify-content-center\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: nearOrgLinks.communityPage,\n iconRight: \"ph-bold ph-arrow-right\",\n label: \"Explore all parts of the Community\",\n variant: \"affirmative\",\n size: \"large\",\n }}\n />\n </Flex>\n </Section>\n\n <Section className=\"mx-auto\" style={{ maxWidth: \"1000px\" }}>\n <Text size=\"text-3xl\" color=\"sand12\" align=\"center\">\n Join the NEAR community\n </Text>\n <Card gap=\"0\" padding=\"0\" direction=\"row\" background=\"var(--violet3)\" style={{ overflow: \"hidden\" }}>\n <div className=\"row\">\n <div className=\"col-12 col-sm-6\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.ecosystemBanner),\n className: \"img-fluid\",\n style: {\n objectFit: \"cover\",\n width: \"100%\",\n height: \"calc(100% + 1px)\",\n },\n }}\n />\n </div>\n <div className=\"col-12 col-sm-6 p-4\">\n <Flex gap=\"24px\" direction=\"column\">\n <Text size=\"text-2xl\" color=\"sand12\">\n Join the NEAR Governance Forum\n </Text>\n <Text size=\"text-xl\" color=\"sand12\">\n Here, NEAR Community members, developers, and the NEAR Foundation team come together to build\n something great and expand the NEAR ecosystem.\n </Text>\n <div>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://gov.near.org/\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Browse Governance Forum\",\n variant: \"affirmative\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </div>\n </Flex>\n </div>\n </div>\n </Card>\n\n <Card gap=\"0\" padding=\"0\" direction=\"row\" background=\"var(--red3)\" style={{ overflow: \"hidden\" }}>\n <div className=\"row\">\n <div className=\"col-12 col-sm-6\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.ecosystemBlog),\n className: \"img-fluid\",\n style: {\n objectFit: \"cover\",\n width: \"100%\",\n height: \"calc(100% + 1px)\",\n },\n }}\n />\n </div>\n <div className=\"col-12 col-sm-6 p-4\">\n <Flex gap=\"24px\" direction=\"column\">\n <Text size=\"text-2xl\" color=\"sand12\">\n Explore the NEAR Community Blog\n </Text>\n <Text size=\"text-xl\" color=\"sand12\">\n Read articles from all across the ecosystem, easily accessible through Medium.\n </Text>\n <div>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://medium.com/nearprotocol\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Read on Medium\",\n variant: \"destructive\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </div>\n </Flex>\n </div>\n </div>\n </Card>\n <Flex gap=\"24px\" justifyContent=\"center\">\n <SocialLink title=\"Official Discord server\" href=\"http://near.chat\" target=\"_blank\">\n <SocialIcon className=\"bi bi-discord\" />\n </SocialLink>\n <SocialLink title=\"Official Twitter account\" href=\"https://twitter.com/nearprotocol\" target=\"_blank\">\n <SocialIcon className=\"bi bi-twitter\" />\n </SocialLink>\n <SocialLink\n title=\"Official YouTube channel\"\n href=\"https://www.youtube.com/channel/UCuKdIYVN8iE3fv8alyk1aMw\"\n target=\"_blank\"\n >\n <SocialIcon className=\"bi bi-youtube\" />\n </SocialLink>\n <SocialLink title=\"Main reddit\" href=\"https://www.reddit.com/r/nearprotocol\" target=\"_blank\">\n <SocialIcon className=\"bi bi-reddit\" />\n </SocialLink>\n </Flex>\n <Flex justifyContent=\"center\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: nearOrgLinks.communityPage,\n iconRight: \"ph-bold ph-arrow-right\",\n label: \"Explore all parts of the Community\",\n variant: \"affirmative\",\n size: \"large\",\n }}\n />\n </Flex>\n </Section>\n\n <Section\n id=\"anker_venture_support\"\n background=\"linear-gradient(to right, hsla(0, 0%, 100%, 0), var(--sand3), hsla(0, 0%, 100%, 0))\"\n gap=\"32px\"\n >\n <div className=\"row row-cols-md-2 row-cols-1 g-4 text-md-start text-center\">\n <div className=\"col order-md-0 order-1\">\n <Flex gap=\"16px\" direction=\"column\">\n <Text size=\"text-3xl\" color=\"sand12\">\n Strong venture support\n </Text>\n <Text size=\"text-xl\" color=\"sand12\">\n The ecosystem offers financial support, advice and networking to projects to help them become thriving\n businesses.\n </Text>\n <Flex gap=\"32px\" className=\"justify-content-md-start justify-content-center\">\n <NumericLabel>\n <Text size=\"text-3xl\" color=\"cyan8\" fontWeight=\"600\">\n $120<Small size=\"20px\">M+</Small>\n </Text>\n <Text size=\"text-l\" color=\"sand12\">\n Awarded\n </Text>\n </NumericLabel>\n <NumericLabel>\n <Text size=\"text-3xl\" color=\"cyan8\" fontWeight=\"600\">\n 2000<Small size=\"20px\">+</Small>\n </Text>\n <Text size=\"text-l\" color=\"sand12\">\n Projects funded\n </Text>\n </NumericLabel>\n </Flex>\n </Flex>\n </div>\n <div className=\"col order-md-1 order-0\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.ecosystemVenue),\n className: \"img-fluid\",\n }}\n />\n </div>\n </div>\n <Flex className=\"justify-content-md-start justify-content-center\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: nearOrgLinks.getFundingPage,\n iconRight: \"ph-bold ph-arrow-right\",\n label: \"Learn more about funding\",\n variant: \"affirmative\",\n size: \"large\",\n }}\n />\n </Flex>\n </Section>\n\n <Section>\n <Text size=\"text-3xl\" color=\"sand12\" align=\"center\">\n Funding\n </Text>\n <Text size=\"text-xl\" color=\"sand12\" align=\"center\">\n There are several options to get financial support for your idea\n </Text>\n <Flex gap=\"var(--large-gap)\" justifyContent=\"center\" className=\"d-none d-md-flex\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.fundingArrows),\n className: \"img-fluid\",\n style: { padding: \"0 10%\" },\n }}\n />\n </Flex>\n <div className=\"row justify-content-center text-center\">\n <div className=\"col-md-3 col-12 align-items-center\">\n <SocialIcon className=\"ph ph-circles-three-plus\" color=\"var(--red7)\" />\n <Text size=\"text-m\" color=\"sand12\">\n Ecosystem Grants\n </Text>\n </div>\n <div className=\"col-md-3 col-12\">\n <SocialIcon className=\"ph ph-trend-up\" color=\"var(--red7)\" />\n <Text size=\"text-m\" color=\"sand12\">\n Accelerators & Incubators\n </Text>\n </div>\n <div className=\"col-md-3 col-12\">\n <SocialIcon className=\"ph ph-users-four\" color=\"var(--red7)\" />\n <Text size=\"text-m\" color=\"sand12\">\n Community-led DAOs\n </Text>\n </div>\n <div className=\"col-md-3 col-12\">\n <SocialIcon className=\"ph ph-planet\" color=\"var(--red7)\" />\n <Text size=\"text-m\" color=\"sand12\">\n Regional hubs\n </Text>\n </div>\n </div>\n </Section>\n <Section>\n <Flex gap=\"24px\" mobileStack=\"24px\">\n {fundingRows.firstRow.map((item) => (\n <Card key={item.ipfsImage} direction=\"row\" padding=\"32px 0\" background=\"transparent\" border=\"none\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(item.ipfsImage),\n style: { width: \"80px\", height: \"80px\" },\n }}\n />\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\" align=\"left\">\n {item.title}\n </Text>\n <Text color=\"sand12\" align=\"left\">\n {item.content}\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: item.href,\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Learn more\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Flex>\n </Card>\n ))}\n </Flex>\n <Flex gap=\"24px\" mobileStack=\"24px\">\n {fundingRows.secondRow.map((item) => (\n <Card key={item.ipfsImage} direction=\"row\" padding=\"32px 0\" background=\"transparent\" border=\"none\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(item.ipfsImage),\n style: { width: \"80px\", height: \"80px\" },\n }}\n />\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\" align=\"left\">\n {item.title}\n </Text>\n <Text color=\"sand12\" align=\"left\">\n {item.content}\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: item.href,\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Learn more\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Flex>\n </Card>\n ))}\n </Flex>\n <Flex justifyContent=\"center\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: nearOrgLinks.getFundingPage,\n iconRight: \"ph-bold ph-arrow-right\",\n label: \"See all funding options\",\n variant: \"affirmative\",\n size: \"large\",\n }}\n />\n </Flex>\n </Section>\n\n <Section background=\"linear-gradient(to right, hsla(0, 0%, 100%, 0), var(--sand3), hsla(0, 0%, 100%, 0))\">\n <Text size=\"text-3xl\" color=\"sand12\" align=\"center\">\n Company builders\n </Text>\n <Text size=\"text-xl\" color=\"sand12\" align=\"center\">\n Join a company builder to get all the support you need from experienced startup founders and other experts.\n </Text>\n <Flex gap=\"32px\" mobileStack=\"32px\">\n <Card center direction=\"row\" background=\"var(--black)\" className=\"flex-md-nowrap flex-wrap\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.ecosystemOwcLogo),\n className: \"img-fluid me-4\",\n }}\n />\n <Flex\n direction=\"column\"\n gap=\"16px\"\n className=\"align-items-center align-items-md-start justify-content-center justify-content-md-start\"\n >\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"white\" className=\"text-center text-md-start\">\n Boost your project with OWC\n </Text>\n <Text color=\"white\" className=\"text-center text-md-start\">\n Open Web Collective is a blockchain accelerator program supporting entrepreneurs building the\n decentralized web. By bringing together capital and seasoned advisors, OWC helps founders de-risk,\n accelerate, and advance Web 3.0.\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://www.openwebcollective.com/\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Contact OWC\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Flex>\n </Card>\n </Flex>\n\n <Section className=\"mx-auto\" style={{ maxWidth: \"1020px\" }}>\n <Text size=\"text-3xl\" color=\"sand12\" align=\"center\">\n Venture capital\n </Text>\n <Text size=\"text-xl\" color=\"sand12\" align=\"center\">\n Many VCs are investing in projects building on NEAR. Recent examples include:\n </Text>\n <div className=\"row row-cols-lg-2 row-cols-1 g-4\">\n {ventureCards.map((item) => (\n <div className=\"col\" key={item.ipfsImage}>\n <Card gap=\"12px\" direction=\"row\" style={{ height: \"100%\" }}>\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(item.ipfsImage),\n style: { width: \"80px\", height: \"80px\" },\n }}\n />\n <Flex direction=\"column\" gap=\"16px\" alignItems=\"start\" justifyContent=\"start\">\n <Text size=\"text-l\" fontWeight=\"600\" align=\"left\" fontWeight=\"600\" color=\"sand12\">\n {item.title}\n </Text>\n <Text align=\"left\" color=\"sand12\" size=\"text-m\">\n {item.content}\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: item.href,\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: item.hrefText,\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Flex>\n </Card>\n </div>\n ))}\n </div>\n </Section>\n </Section>\n\n <Section id=\"anker_tech_base\">\n <div className=\"row row-cols-md-2 row-cols-1 g-4 text-md-start text-center\">\n <div className=\"col order-md-0 order-1\">\n <Flex gap=\"16px\" direction=\"column\">\n <Text size=\"text-3xl\" color=\"sand12\">\n NEAR’s strong technical base\n </Text>\n <Text size=\"text-xl\" color=\"sand12\">\n Everything a developer needs to build amazing dApps.\n </Text>\n </Flex>\n </div>\n <div className=\"col order-md-1 order-0\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.ecosystemTechnicalBase),\n className: \"img-fluid\",\n }}\n />\n </div>\n </div>\n </Section>\n\n <Section gap=\"24px\" center className=\"mx-auto\" style={{ maxWidth: \"1000px\" }}>\n <Text size=\"text-3xl\" color=\"sand12\">\n NEAR’s core platform\n </Text>\n <Text size=\"text-xl\" color=\"sand12\">\n The simple, yet powerful base to build on\n </Text>\n <Flex gap=\"24px\">\n <Card>\n <Text size=\"text-3xl\" color=\"sand12\">\n Use familiar Programming Languages\n </Text>\n <Text size=\"text-l\" color=\"sand12\">\n Write your smart contracts in the most used or most loved language. No need to wrestle with Solidity or\n Vyper.\n </Text>\n <Section>\n <Flex gap=\"48px\" mobileStack=\"32px\" justifyContent=\"center\">\n <Flex gap=\"24px\" alignItems=\"center\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.jsIcon),\n className: \"img-fluid\",\n }}\n />\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://docs.near.org/develop/quickstart-guide\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Start building\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Flex>\n <Flex gap=\"24px\" alignItems=\"center\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.rustIcon),\n className: \"img-fluid\",\n }}\n />\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://www.near-sdk.io\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Start building\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Flex>\n </Flex>\n <div>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://docs.near.org\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Just take me to the docs\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </div>\n </Section>\n </Card>\n </Flex>\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card>\n <SocialIcon className=\"ph ph-lightning\" />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n Be super-productive with our dev-tools\n </Text>\n <Text size=\"text-m\" color=\"sand12\">\n We have all you need – powerful CLI, easy-to-use SDKs, and more\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://near.org/developers/tools\",\n iconRight: \"ph-bold ph-arrow-right\",\n label: \"Get started with our dev tools\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n }}\n />\n </Card>\n <Card>\n <SocialIcon className=\"ph ph-lightbulb\" />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n Help yourself with excellent documentations\n </Text>\n <Text size=\"text-m\" color=\"sand12\">\n Docs that answer almost any question. Loads of tutorials and examples\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://near.org/developers/documentation\",\n iconRight: \"ph-bold ph-arrow-right\",\n label: \"Explore all documentations\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n }}\n />\n </Card>\n </Flex>\n </Section>\n\n <Section center className=\"mx-auto\" style={{ maxWidth: \"1000px\" }}>\n <Text size=\"text-3xl\" color=\"sand12\">\n Bridges and emulators\n </Text>\n <Text size=\"text-xl\" color=\"sand12\">\n Highly interoperable for a multi-chain world\n </Text>\n\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card center>\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.logoAurora),\n style: { width: \"80px\", height: \"80px\" },\n }}\n />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n Ethereum & EVM\n </Text>\n <Text size=\"text-m\" color=\"sand12\">\n Easily migrate your Solidity contracts to the Aurora EVM. Use the Rainbow Bridge to transfer assets\n between Ethereum, NEAR and Aurora EVM. EVM.\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://aurora.dev\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Go to Aurora\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Card>\n <Card center>\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.logoOctopus),\n style: { width: \"80px\", height: \"80px\" },\n }}\n />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n AppChains on Substrate\n </Text>\n <Text size=\"text-m\" color=\"sand12\">\n Build app-specific chains with substrate on the Octopus network.\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://oct.network\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Go to Octopus\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Card>\n </Flex>\n </Section>\n\n <Section center>\n <Text size=\"text-3xl\" color=\"sand12\">\n Infrastructure providers\n </Text>\n <Text size=\"text-xl\" color=\"sand12\">\n Connecting NEAR to the outside world\n </Text>\n </Section>\n\n <Section center gap=\"24px\" className=\"mx-auto\" style={{ maxWidth: \"1000px\" }}>\n <Text size=\"text-3xl\" color=\"sand12\">\n RPC-Providers\n </Text>\n <Flex gap=\"24px\" mobileStack=\"24px\" style={{ width: \"100%\" }}>\n {rpcCards.map((item) => (\n <Card center key={item.ipfsImage}>\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(item.ipfsImage),\n style: { width: \"80px\", height: \"80px\" },\n }}\n />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n {item.title}\n </Text>\n <Text size=\"text-l\" color=\"sand12\">\n {item.content}\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: item.href,\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"How to use\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Card>\n ))}\n </Flex>\n </Section>\n\n <Section center gap=\"24px\" className=\"mx-auto\" style={{ maxWidth: \"1000px\" }}>\n <Text size=\"text-3xl\" color=\"sand12\">\n Storage\n </Text>\n\n <div className=\"row row-cols-md-3 row-cols-1 g-4\">\n {storageCards.map((item) => (\n <div className=\"col\" key={item.ipfsImage}>\n <Card center>\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(item.ipfsImage),\n style: { width: \"80px\", height: \"80px\" },\n }}\n />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n {item.title}\n </Text>\n <Text size=\"text-l\" color=\"sand12\">\n {item.content ?? <span className=\"invisible\">&nbsp;</span>}\n </Text>\n {item.internal ? (\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: item.href,\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: item.hrefText,\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n ) : (\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: item.href,\n iconRight: \"ph-bold ph-arrow-right\",\n label: item.hrefText,\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n }}\n />\n )}\n </Card>\n </div>\n ))}\n </div>\n </Section>\n\n <Section center gap=\"24px\" className=\"mx-auto\" style={{ maxWidth: \"1000px\" }}>\n <Text size=\"text-3xl\" color=\"sand12\">\n Oracles\n </Text>\n <Flex gap=\"24px\" mobileStack=\"24px\" style={{ width: \"100%\" }}>\n {oracleCards.map((item) => (\n <Card center key={item.ipfsImage}>\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(item.ipfsImage),\n style: { width: \"80px\", height: \"80px\" },\n }}\n />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n {item.title}\n </Text>\n <Text size=\"text-l\" color=\"sand12\">\n {item.content ?? <span className=\"invisible\">&nbsp;</span>}\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: item.href,\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"How to integrate\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Card>\n ))}\n </Flex>\n </Section>\n\n <Section center gap=\"24px\" className=\"mx-auto\" style={{ maxWidth: \"1000px\" }}>\n <Text size=\"text-3xl\" color=\"sand12\" fontWeight=\"600\">\n Institutional custodians\n </Text>\n <Text size=\"text-xl\" color=\"sand12\">\n Safely storing the NEAR-token and other assets\n </Text>\n <Flex gap=\"24px\" mobileStack=\"24px\" style={{ width: \"100%\" }}>\n {assetsCards.map((item) => (\n <Card center key={item.ipfsImage}>\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(item.ipfsImage),\n style: { width: \"80px\", height: \"80px\" },\n }}\n />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n {item.title}\n </Text>\n <Text size=\"text-l\" color=\"sand12\">\n {item.content ?? <span className=\"invisible\">&nbsp;</span>}\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: item.href,\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Visit website\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Card>\n ))}\n </Flex>\n </Section>\n\n <Section\n id=\"anker_regional_hubs\"\n background=\"linear-gradient(to right, hsla(0, 0%, 100%, 0), var(--sand3), hsla(0, 0%, 100%, 0))\"\n >\n <div className=\"row row-cols-md-2 row-cols-1 g-4 text-md-start text-center\">\n <div className=\"col order-md-0 order-1\">\n <Flex gap=\"16px\" direction=\"column\">\n <Text size=\"text-3xl\" color=\"sand12\">\n Local presence: Regional Hubs\n </Text>\n <Text size=\"text-xl\" color=\"sand12\">\n Regional Hubs organize and foster a local community of builders, entrepreneurs, and users.\n </Text>\n </Flex>\n </div>\n <div className=\"col order-md-1 order-0\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.sectionAnkerRegionalHubs),\n className: \"img-fluid\",\n }}\n />\n </div>\n </div>\n\n <Section center gap=\"24px\" className=\"mx-auto\" style={{ maxWidth: \"1020px\" }}>\n <Text size=\"text-3xl\" color=\"sand12\">\n NEAR hubs around the world\n </Text>\n\n <div className=\"row row-cols-lg-3 row-cols-md-2 row-cols-1 g-4\">\n {nearHubsCards.map((item) => (\n <div className=\"col\" key={item.ipfsImage}>\n <Card center>\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(item.ipfsImage),\n style: { height: \"92px\" },\n }}\n />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n {item.title}\n </Text>\n <Text size=\"text-m\" color=\"sand12\">\n {item.content}\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: item.href,\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: item.hrefText,\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </Card>\n </div>\n ))}\n </div>\n </Section>\n </Section>\n\n <Section id=\"anker_web3_career\">\n <div className=\"row row-cols-md-2 row-cols-1 g-4 text-md-start text-center\">\n <div className=\"col order-md-0 order-1\">\n <Flex gap=\"16px\" direction=\"column\">\n <Text size=\"text-3xl\" color=\"sand12\">\n Start your web3 сareer with NEAR\n </Text>\n <Text size=\"text-xl\" color=\"sand12\">\n Regardless of your background or experience, there is ample opportunity to participate in this rapidly\n evolving space.\n </Text>\n <Flex gap=\"32px\" className=\"justify-content-md-start justify-content-center\">\n <NumericLabel backgroundColor=\"var(--sand3)\">\n <Text size=\"text-3xl\" color=\"cyan8\" fontWeight=\"600\">\n 150<Small size=\"20px\">+</Small>\n </Text>\n <Text size=\"text-l\" color=\"sand12\">\n Active openings\n </Text>\n </NumericLabel>\n </Flex>\n </Flex>\n </div>\n <div className=\"col order-md-1 order-0\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.ecosystemCareer),\n className: \"img-fluid\",\n }}\n />\n </div>\n </div>\n </Section>\n\n <Section gap=\"24px\" center className=\"mx-auto\" style={{ maxWidth: \"1000px\" }}>\n <Text size=\"text-3xl\" color=\"sand12\">\n Career and earning opportunities\n </Text>\n\n <Flex gap=\"24px\" mobileStack=\"24px\" style={{ width: \"100%\" }}>\n <Card>\n <SocialIcon className=\"ph ph-binoculars\" />\n <Text size=\"text-l\" color=\"sand12\" fontWeight=\"600\">\n Find a web3-job\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://careers.near.org/jobs\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"See open positions\",\n variant: \"primary\",\n fill: \"outline\",\n }}\n />\n </Card>\n <Card>\n <SocialIcon className=\"ph ph-read-cv-logo\" />\n <Text size=\"text-l\" color=\"sand12\" fontWeight=\"600\">\n Get a grant for your project\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://near.org/ecosystem/get-funding\",\n iconRight: \"ph-bold ph-arrow-right\",\n label: \"Explore funding options\",\n variant: \"primary\",\n fill: \"outline\",\n }}\n />\n </Card>\n <Card>\n <SocialIcon className=\"ph ph-crosshair\" />\n <Text size=\"text-l\" color=\"sand12\" fontWeight=\"600\">\n Complete a bounty\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://gitcoin.co/near/active\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"See active bounties\",\n variant: \"primary\",\n fill: \"outline\",\n }}\n />\n </Card>\n </Flex>\n <Flex gap=\"24px\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: nearOrgLinks.workAndEarnPage,\n iconRight: \"ph-bold ph-arrow-right\",\n label: \"Explore all earning opportunities\",\n variant: \"affirmative\",\n size: \"large\",\n }}\n />\n </Flex>\n </Section>\n\n <Section\n center\n background=\"linear-gradient(to right, hsla(0, 0%, 100%, 0), var(--sand3), hsla(0, 0%, 100%, 0))\"\n className=\"mx-auto\"\n style={{ maxWidth: \"1000px\" }}\n >\n <Text size=\"text-3xl\" color=\"sand12\">\n Need help?\n <br />\n There are many ways!\n </Text>\n\n <Flex gap=\"24px\" mobileStack=\"24px\" style={{ width: \"100%\" }}>\n <Card>\n <SocialIcon className=\"ph ph-check-square-offset\" />\n <Text size=\"text-l\" color=\"sand12\" fontWeight=\"600\">\n DevRel Office Hours\n </Text>\n </Card>\n <Card>\n <SocialIcon className=\"ph ph-chats\" />\n <Text size=\"text-l\" color=\"sand12\" fontWeight=\"600\">\n Active Community\n </Text>\n </Card>\n <Card>\n <SocialIcon className=\"ph ph-users-three\" />\n <Text size=\"text-l\" color=\"sand12\" fontWeight=\"600\">\n Forum & Wiki\n </Text>\n </Card>\n </Flex>\n <Flex gap=\"24px\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://near.org/developers/get-help/\",\n iconRight: \"ph-bold ph-arrow-right\",\n label: \"See all ways to get help\",\n variant: \"affirmative\",\n size: \"large\",\n }}\n />\n </Flex>\n <Section style={{ width: \"100%\" }}>\n <Widget src=\"near/widget/NearOrg.LearningLinks\" />\n </Section>\n </Section>\n </Wrapper>\n\n <Widget src=\"near/widget/NearOrg.Footer\" />\n </>\n);\n" }, "ActivityPage": { "": "const [selectedTab, setSelectedTab] = useState(props.tab ?? \"posts\");\nconst activityUrl = `/near/widget/ActivityPage`;\n\nconst Wrapper = styled.div`\n padding-top: 0;\n\n @media (max-width: 1024px) {\n padding-left: 0;\n padding-right: 0;\n }\n`;\n\nconst Main = styled.div`\n display: grid;\n grid-template-columns: 290px minmax(0, 1fr) 290px;\n grid-gap: 16px;\n\n @media (max-width: 1024px) {\n display: block;\n }\n`;\n\nconst Section = styled.div`\n padding-top: 24px;\n border-left: ${(p) => (p.$primary ? \"1px solid #ECEEF0\" : \"none\")};\n border-right: ${(p) => (p.$primary ? \"1px solid #ECEEF0\" : \"none\")};\n\n > div {\n padding-bottom: 24px;\n margin-bottom: 24px;\n border-bottom: 1px solid #eceef0;\n\n &:last-child {\n padding-bottom: 0;\n margin-bottom: 0;\n border-bottom: none;\n }\n }\n\n @media (max-width: 1024px) {\n padding-top: 0px;\n border-left: none;\n border-right: none;\n display: ${(p) => (p.$active ? \"block\" : \"none\")};\n padding: ${(p) => p.$smallScreenPadding};\n }\n`;\n\nconst Tabs = styled.div`\n display: none;\n height: 48px;\n background: #f8f9fa;\n border-bottom: 1px solid #eceef0;\n overflow: auto;\n scroll-behavior: smooth;\n\n @media (max-width: 1024px) {\n display: flex;\n\n > * {\n flex: 1;\n }\n }\n`;\n\nconst TabsButton = styled(\"Link\")`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-weight: 600;\n font-size: 12px;\n padding: 0 12px;\n position: relative;\n color: ${(p) => (p.$selected ? \"#11181C\" : \"#687076\")};\n background: none;\n border: none;\n outline: none;\n text-align: center;\n text-decoration: none !important;\n\n &:hover {\n color: #11181c;\n }\n\n &::after {\n content: \"\";\n display: ${(p) => (p.$selected ? \"block\" : \"none\")};\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: #59e692;\n }\n`;\n\nreturn (\n <Wrapper className=\"gateway-page-container\">\n <Tabs>\n <TabsButton\n href={`${activityUrl}?tab=posts`}\n $selected={selectedTab === \"posts\"}\n onClick={() => setSelectedTab(\"posts\")}\n >\n Posts\n </TabsButton>\n\n <TabsButton\n href={`${activityUrl}?tab=apps`}\n $selected={selectedTab === \"apps\"}\n onClick={() => setSelectedTab(\"apps\")}\n >\n Components\n </TabsButton>\n\n <TabsButton\n href={`${activityUrl}?tab=explore`}\n $selected={selectedTab === \"explore\"}\n onClick={() => setSelectedTab(\"explore\")}\n >\n Explore\n </TabsButton>\n </Tabs>\n\n <Main>\n <Section $smallScreenPadding=\"1rem\" $active={selectedTab === \"apps\"}>\n <Widget src=\"near/widget/FeaturedComponents\" />\n <Widget src=\"near/widget/LatestComponents\" />\n </Section>\n\n <Section $smallScreenPadding=\"0\" $primary $active={selectedTab === \"posts\"}>\n <Widget src={`near/widget/ActivityFeeds.DetermineActivityFeed`} />\n </Section>\n\n <Section $smallScreenPadding=\"1rem\" $active={selectedTab === \"explore\"}>\n <Widget src=\"near/widget/ExploreWidgets\" />\n </Section>\n </Main>\n </Wrapper>\n);\n" }, "PeoplePage": { "": "const limitPerPage = 21;\nlet people = [];\nconst peopleUrl = \"/near/widget/PeoplePage\";\nlet followingData = null;\nlet followersData = null;\nconst fromContext = props;\n\nState.init({\n currentPage: 0,\n selectedTab: props.tab ?? \"trending\",\n});\n\nif (props.tab && props.tab !== state.selectedTab) {\n State.update({\n selectedTab: props.tab,\n });\n}\n\nif (context.accountId) {\n followingData = Social.keys(`${context.accountId}/graph/follow/*`, \"final\");\n followersData = Social.keys(`*/graph/follow/${context.accountId}`, \"final\");\n}\n\n// This data includes all accounts with or without profiles:\nconst accountsData = Social.keys(\"*\", \"final\", {\n return_type: \"BlockHeight\",\n});\nconst totalAccounts = Object.keys(accountsData || {}).length;\n\n// This data only includes accounts that have set up a profile:\nconst data = Social.keys(\"*/profile\", \"final\", {\n return_type: \"BlockHeight\",\n});\n\nif (data) {\n const result = [];\n\n Object.keys(data).forEach((accountId) => {\n const isFollowing = followingData && followingData[context.accountId]?.graph?.follow[accountId] === true;\n\n const isFollower = followersData && followersData[accountId]?.graph?.follow[context.accountId] === true;\n\n if (\n state.selectedTab === \"everyone\" ||\n (state.selectedTab === \"following\" && isFollowing) ||\n (state.selectedTab === \"followers\" && isFollower) ||\n state.selectedTab === \"trending\" ||\n state.selectedTab === \"recommended\"\n ) {\n result.push({\n accountId,\n blockHeight: data[accountId].profile,\n });\n }\n });\n\n result.sort((a, b) => b.blockHeight - a.blockHeight);\n people = result.slice(0, state.currentPage * limitPerPage + limitPerPage);\n}\n\nfunction onSearchChange({ result, term }) {\n if (term.trim()) {\n State.update({ searchResults: result || [] });\n } else {\n State.update({ searchResults: null });\n }\n}\n\nconst items = state.searchResults || people;\nconst showLoadMoreButton = !state.searchResults && people.length % limitPerPage === 0;\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 48px;\n`;\n\nconst Header = styled.div`\n display: flex;\n flex-direction: column;\n gap: 12px;\n`;\n\nconst Search = styled.div`\n width: 246px;\n\n @media (max-width: 500px) {\n width: 100%;\n }\n`;\n\nconst H1 = styled.h1`\n font-weight: 600;\n font-size: 32px;\n line-height: 39px;\n color: #11181c;\n margin: 0;\n`;\n\nconst H2 = styled.h2`\n font-weight: 400;\n font-size: 20px;\n line-height: 24px;\n color: #687076;\n margin: 0;\n`;\n\nconst Text = styled.p`\n margin: 0;\n line-height: 1.5rem;\n color: ${(p) => (p.bold ? \"#11181C\" : \"#687076\")} !important;\n font-weight: ${(p) => (p.bold ? \"600\" : \"400\")};\n font-size: ${(p) => (p.small ? \"12px\" : \"14px\")};\n overflow: ${(p) => (p.ellipsis ? \"hidden\" : \"\")};\n text-overflow: ${(p) => (p.ellipsis ? \"ellipsis\" : \"\")};\n white-space: ${(p) => (p.ellipsis ? \"nowrap\" : \"\")};\n overflow-wrap: anywhere;\n\n b {\n font-weight: 600;\n color: #11181c;\n }\n`;\n\nconst Items = styled.div`\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 24px;\n\n @media (max-width: 1024px) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n @media (max-width: 800px) {\n grid-template-columns: minmax(0, 1fr);\n }\n`;\n\nconst Item = styled.div``;\n\nconst Button = styled.button`\n display: block;\n width: 100%;\n padding: 8px;\n height: 32px;\n background: #fbfcfd;\n border: 1px solid #d7dbdf;\n border-radius: 50px;\n font-weight: 600;\n font-size: 12px;\n line-height: 15px;\n text-align: center;\n cursor: pointer;\n color: #11181c !important;\n margin: 0;\n\n &:hover,\n &:focus {\n background: #ecedee;\n text-decoration: none;\n outline: none;\n }\n\n span {\n color: #687076 !important;\n }\n`;\n\nconst Tabs = styled.div`\n display: flex;\n height: 48px;\n border-bottom: 1px solid #eceef0;\n margin-bottom: -24px;\n overflow: auto;\n scroll-behavior: smooth;\n\n @media (max-width: 1024px) {\n background: #f8f9fa;\n border-top: 1px solid #eceef0;\n margin-left: -12px;\n margin-right: -12px;\n\n > * {\n flex: 1;\n }\n }\n`;\n\nconst TabsButton = styled(\"Link\")`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-weight: 600;\n font-size: 12px;\n padding: 0 12px;\n position: relative;\n color: ${(p) => (p.selected ? \"#11181C\" : \"#687076\")};\n background: none;\n border: none;\n outline: none;\n text-align: center;\n text-decoration: none !important;\n\n &:hover {\n color: #11181c;\n }\n\n &::after {\n content: \"\";\n display: ${(p) => (p.selected ? \"block\" : \"none\")};\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: #59e692;\n }\n`;\n\nreturn (\n <Wrapper className=\"gateway-page-container\">\n <Header>\n <H1>{totalAccounts} People</H1>\n <H2>Connect with the NEAR community.</H2>\n </Header>\n\n <Search>\n <Widget\n src=\"near/widget/ProfileSearch\"\n props={{\n limit: 21,\n onChange: onSearchChange,\n }}\n />\n </Search>\n\n {!state.searchResults && (\n <Tabs>\n <TabsButton href={`${peopleUrl}?tab=everyone`} selected={state.selectedTab === \"everyone\"}>\n Everyone\n </TabsButton>\n\n {context.accountId && (\n <TabsButton href={`${peopleUrl}?tab=following`} selected={state.selectedTab === \"following\"}>\n Following\n </TabsButton>\n )}\n\n {context.accountId && (\n <TabsButton href={`${peopleUrl}?tab=followers`} selected={state.selectedTab === \"followers\"}>\n Followers\n </TabsButton>\n )}\n <TabsButton href={`${peopleUrl}?tab=trending`} selected={state.selectedTab === \"trending\"}>\n Trending\n </TabsButton>\n {context.accountId && (\n <TabsButton href={`${peopleUrl}?tab=recommended`} selected={state.selectedTab === \"recommended\"}>\n Recommended\n </TabsButton>\n )}\n </Tabs>\n )}\n\n {state.searchResults?.length === 0 && <Text>No people matched your search.</Text>}\n\n {(state.selectedTab == \"everyone\" || state.selectedTab == \"following\" || state.selectedTab == \"followers\") &&\n items.length > 0 && (\n <Items>\n {items.map((person, i) => (\n <Item key={person.accountId}>\n <Widget\n src=\"near/widget/AccountProfileCard\"\n props={{\n accountId: person.accountId,\n blockHeight: person.blockHeight,\n }}\n />\n </Item>\n ))}\n </Items>\n )}\n\n {!context.accountId && state.selectedTab == \"trending\" && (\n <Widget\n src=\"near/widget/Recommender.Views.TrendingUsersView\"\n props={{ currentPage: state.currentPage, fromContext: fromContext }}\n />\n )}\n\n {context.accountId && state.selectedTab == \"trending\" && (\n <Widget\n src=\"near/widget/Recommender.Views.TrendingUsersView\"\n props={{ currentPage: state.currentPage, fromContext: fromContext }}\n />\n )}\n\n {context.accountId && state.selectedTab == \"recommended\" && (\n <Widget\n src=\"near/widget/Recommender.Views.RecommendedUsersView\"\n props={{\n currentPage: state.currentPage,\n fromContext: fromContext,\n accountId: context.accountId,\n }}\n />\n )}\n\n {(state.selectedTab == \"everyone\" || state.selectedTab == \"following\" || state.selectedTab == \"followers\") &&\n showLoadMoreButton && (\n <Button type=\"button\" onClick={() => State.update({ currentPage: state.currentPage + 1 })}>\n Load More\n </Button>\n )}\n </Wrapper>\n);\n" }, "Settings.Index": { "": "let { idosConnected, ...forwardedProps } = props;\n\nconst activeTab = Storage.get(\"settings-tab\") ?? \"identity\";\n// tab names: account, content, news, identity, notifications\n\n// Uncomment this when we have implement more then one tab.\nconst Wrapper = styled.div`\n // display: grid;\n // gap: 40px;\n // grid-template-columns: 264px minmax(0, 1fr);\n // align-items: start;\n // height: 100%;\n\n // @media (max-width: 1024px) {\n // grid-template-columns: minmax(0, 1fr);\n // }\n`;\n\nconst SettingsContent = () => {\n switch (activeTab) {\n case \"account\":\n case \"content\":\n case \"news\":\n case \"notifications\":\n return <div>Not implemented yet</div>;\n case \"identity\":\n default:\n return (\n <Widget src=\"near/widget/Settings.Identity.Index\" props={{ idosConnected, ...forwardedProps }} />\n );\n }\n};\n\nconst handleMenuClick = (value) => {\n Storage.set(\"settings-tab\", value);\n};\n\n// So far we have only implemented the identity tab. That's why we don't want to show Sidebar yet.\nconst Sidebar = () => (\n <Widget\n src=\"near/widget/Settings.Sidebar\"\n props={{\n onClick: handleMenuClick,\n activeTab,\n }}\n />\n);\n\nreturn (\n <Wrapper className=\"gateway-page-container\">\n <SettingsContent />\n </Wrapper>\n);\n" }, "NearOrg.Ecosystem.WorkAndEarnPage": { "": "const nearOrgLinks = {\n getFundingPage: \"/near/widget/NearOrg.Ecosystem.GetFundingPage\",\n};\n\nconst Wrapper = styled.div`\n --section-gap: 162px;\n --large-gap: 82px;\n --medium-gap: 48px;\n padding: calc(var(--section-gap) / 2) 0 0;\n position: relative;\n\n @media (max-width: 900px) {\n --section-gap: 60px;\n --large-gap: 48px;\n --medium-gap: 24px;\n }\n`;\nconst H1 = styled.h1`\n font: var(--text-hero);\n text-align: center;\n letter-spacing: -0.015em;\n color: var(--sand12);\n margin: 0;\n max-width: 960px;\n\n @media (max-width: 900px) {\n font: var(--text-2xl);\n font-weight: 600;\n }\n`;\n\nconst Text = styled.p`\n font: var(--${(p) => p.size ?? \"text-base\"});\n font-weight: ${(p) => p.fontWeight};\n color: var(--${(p) => p.color ?? \"sand10\"});\n margin: 0;\n text-align: ${(p) => p.align};\n`;\nconst Flex = styled.div`\n display: flex;\n gap: ${(p) => p.gap};\n align-items: ${(p) => p.alignItems};\n justify-content: ${(p) => p.justifyContent};\n flex-direction: ${(p) => p.direction ?? \"row\"};\n flex-wrap: ${(p) => p.wrap ?? \"nowrap\"};\n\n @media (max-width: 900px) {\n flex-direction: ${(p) => (p.mobileStack ? \"column\" : p.direction ?? \"row\")};\n gap: ${(p) => (p.mobileStack === true ? \"var(--section-gap)\" : p.mobileStack ? p.mobileStack : p.gap)};\n }\n`;\nconst Section = styled.div`\n display: flex;\n padding: calc(var(--section-gap) / 2);\n gap: ${(p) => p.gap ?? \"var(--medium-gap)\"};\n flex-direction: column;\n align-items: ${(p) => (p.center ? \"center\" : undefined)};\n justify-content: ${(p) => (p.center ? \"center\" : undefined)};\n text-align: ${(p) => (p.center ? \"center\" : undefined)};\n background: ${(p) => p.background};\n\n @media (max-width: 900px) {\n padding-left: var(--medium-gap);\n padding-right: var(--medium-gap);\n }\n`;\nconst Card = styled.div`\n display: flex;\n flex-direction: ${(p) => p.direction ?? \"column\"};\n gap: ${(p) => p.gap ?? \"24px\"};\n width: 100%;\n padding: ${(p) => p.padding ?? \"32px\"};\n border-radius: 8px;\n border: ${(p) => p.border ?? \"1px solid var(--sand4)\"};\n align-items: ${(p) => (p.center ? \"center\" : \"flex-star\")};\n justify-content: ${(p) => (p.center ? \"center\" : undefined)};\n text-align: ${(p) => (p.center ? \"center\" : undefined)};\n background: ${(p) => p.background ?? \"var(--sand1)\"};\n`;\nconst SocialIcon = styled.i`\n font-size: ${(p) => p.size ?? \"30px\"};\n text-align: ${(p) => p.align};\n color: ${(p) => p.color};\n`;\n\nreturn (\n <>\n <Wrapper className=\"gateway-page-container\">\n <Section>\n <Flex gap=\"16px\" direction=\"column\" alignItems=\"start\">\n <H1>Work & Earn</H1>\n <Text size=\"text-xl\" color=\"sand12\">\n If Web3 and blockchain are the future then NEAR is the vehicle to take you there. Jump in!\n </Text>\n </Flex>\n </Section>\n\n <Section>\n <Text size=\"text-3xl\" color=\"sand12\">\n Explore opportunities\n </Text>\n\n <div className=\"row row-cols-lg-3 row-cols-md-2 row-cols-1 g-4\">\n <div className=\"col\">\n <Card background=\"transparent\" border=\"none\">\n <SocialIcon className=\"ph ph-list-magnifying-glass\" color=\"var(--cyan7)\" />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n Find a job\n </Text>\n <Text size=\"text-m\" color=\"sand12\">\n Entities across the NEAR Collective are actively looking for individuals to fill technical and\n non-technical roles. Click below to find a full-time job aimed at professionals and students or become\n an ambassador.\n </Text>\n <Flex gap=\"24px\" alignItems=\"start\" direction=\"column\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://careers.near.org/jobs\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Full-time Jobs across the Ecosystem\",\n variant: \"primary\",\n fill: \"outline\",\n target: \"_blank\",\n }}\n />\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://www.near.university/#earn\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Become an ambassador or teacher\",\n variant: \"primary\",\n fill: \"outline\",\n target: \"_blank\",\n }}\n />\n </Flex>\n </Card>\n </div>\n <div className=\"col\">\n <Card background=\"transparent\" border=\"none\">\n <SocialIcon className=\"ph ph-globe-stand\" color=\"var(--green7)\" />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n Get a grant for your project\n </Text>\n <Text size=\"text-m\" color=\"sand12\">\n Want to build on NEAR? Our foundation has grants to help you get started.\n </Text>\n <Flex gap=\"24px\" alignItems=\"start\" direction=\"column\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: nearOrgLinks.getFundingPage,\n iconRight: \"ph-bold ph-arrow-right\",\n label: \"Learn more about Grants\",\n variant: \"primary\",\n fill: \"outline\",\n }}\n />\n </Flex>\n </Card>\n </div>\n <div className=\"col\">\n <Card background=\"transparent\" border=\"none\">\n <SocialIcon className=\"ph ph-chart-polar\" color=\"var(--violet7)\" />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n Complete a bounty\n </Text>\n <Text size=\"text-m\" color=\"sand12\">\n Want to help improve the NEAR ecosystem? Join our bounties program. Collaborate with others in the\n community to solve problems and earn rewards.\n </Text>\n <Flex gap=\"24px\" alignItems=\"start\" direction=\"column\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://gitcoin.co/near/active\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"View Bounties\",\n variant: \"primary\",\n fill: \"outline\",\n target: \"_blank\",\n }}\n />\n </Flex>\n </Card>\n </div>\n </div>\n </Section>\n </Wrapper>\n\n <Widget src=\"near/widget/NearOrg.Footer\" />\n </>\n);\n" }, "NearOrg.UsePage": { "": "const ipfsImages = {};\n\nfunction returnIpfsImage(cfid) {\n return {\n ipfs_cid: cfid,\n };\n}\n\nconst Wrapper = styled.div`\n --section-gap: 162px;\n --large-gap: 82px;\n --medium-gap: 48px;\n\n @media (max-width: 900px) {\n --section-gap: 60px;\n --large-gap: 48px;\n --medium-gap: 24px;\n }\n`;\n\nconst H1 = styled.h1`\n font: var(--text-hero);\n text-align: center;\n letter-spacing: -0.015em;\n color: var(--sand12);\n margin: 0;\n max-width: 960px;\n\n @media (max-width: 900px) {\n font: var(--text-2xl);\n font-weight: 600;\n }\n`;\n\nconst Text = styled.p`\n font: var(--${(p) => p.size ?? \"text-base\"});\n font-weight: ${(p) => p.fontWeight};\n color: var(--${(p) => p.color ?? \"sand10\"});\n margin: 0;\n\n ${(p) =>\n p.flex &&\n `\n display: flex;\n align-items: center;\n gap: 16px;\n `}\n`;\n\nconst TextLink = styled(\"Link\")`\n font: var(--${(p) => p.size ?? \"text-base\"});\n font-weight: ${(p) => p.fontWeight};\n margin: 0;\n color: var(--violet8);\n\n &:hover {\n color: var(--violet11);\n text-decoration: none;\n }\n &:focus {\n text-decoration: underline;\n outline: none;\n }\n`;\n\nconst HR = styled.div`\n width: 100%;\n height: 1px;\n background: var(--sand5);\n margin: var(--medium-gap) 0;\n`;\n\nconst Flex = styled.div`\n display: flex;\n gap: ${(p) => p.gap};\n align-items: ${(p) => p.alignItems};\n justify-content: ${(p) => p.justifyContent};\n flex-direction: ${(p) => p.direction ?? \"row\"};\n flex-wrap: ${(p) => p.wrap ?? \"nowrap\"};\n\n ${(p) =>\n p.mobileStack &&\n `\n @media (max-width: 900px) {\n flex-direction: column;\n gap: ${(p) => (p.mobileStack === true ? \"var(--section-gap)\" : p.mobileStack)};\n }\n `}\n\n ${(p) =>\n p.tabletStack &&\n `\n @media (max-width: 1050px) {\n flex-direction: column;\n gap: ${(p) => (p.tabletStack === true ? \"var(--section-gap)\" : p.tabletStack)};\n }\n `}\n`;\n\nconst Section = styled.div`\n display: flex;\n padding: calc(var(--section-gap) / 2);\n gap: ${(p) => p.gap ?? \"var(--medium-gap)\"};\n flex-direction: column;\n align-items: ${(p) => (p.center ? \"center\" : undefined)};\n justify-content: ${(p) => (p.center ? \"center\" : undefined)};\n text-align: ${(p) => (p.center ? \"center\" : undefined)};\n background: ${(p) => p.background};\n\n @media (max-width: 900px) {\n padding-left: var(--medium-gap);\n padding-right: var(--medium-gap);\n }\n`;\n\nconst Icon = styled.div`\n display: inline-flex;\n width: 64px;\n height: 64px;\n border-radius: 100%;\n align-items: center;\n justify-content: center;\n color: ${(p) => `var(--${p.color})` ?? \"var(--sand10)\"};\n background: ${(p) => `var(--${p.backgroundColor})` ?? \"var(--sand3)\"};\n border: 1px solid ${(p) => `var(--${p.borderColor})` ?? \"var(--sand5)\"};\n\n i {\n font-size: 28px;\n line-height: 28px;\n }\n`;\n\nconst ContentWithImage = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--large-gap);\n\n &:nth-child(odd) {\n flex-direction: ${(p) => (p.alternate ? \"row-reverse\" : undefined)};\n }\n\n @media (max-width: 900px) {\n flex-direction: column !important;\n }\n`;\n\nconst ContentWithImage_Image = styled.div`\n overflow: hidden;\n border-radius: 6px;\n border: 1px solid var(--sand5);\n width: 100%;\n\n img {\n object-fit: cover;\n width: 100%;\n height: 100%;\n }\n`;\n\nconst ContentBlock = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--medium-gap);\n width: 100%;\n`;\n\nconst ContentBlock_Text = styled.div`\n display: flex;\n flex-direction: column;\n gap: 16px;\n`;\n\nconst Card = styled.div`\n display: flex;\n flex-direction: column;\n gap: ${(p) => p.gap ?? \"24px\"};\n width: 100%;\n padding: 32px;\n border-radius: 8px;\n border: 1px solid var(--sand4);\n align-items: ${(p) => (p.center ? \"center\" : \"flex-star\")};\n justify-content: ${(p) => (p.center ? \"center\" : undefined)};\n text-align: ${(p) => (p.center ? \"center\" : \"left\")};\n background: var(--sand1);\n`;\n\nconst CircleImg = styled.img`\n display: block;\n width: 40px;\n height: 40px;\n border-radius: 100%;\n`;\n\nconst UseCase = styled.div`\n display: grid;\n grid-template-columns: 200px 1fr;\n gap: 32px;\n text-align: left;\n\n @media (max-width: 800px) {\n grid-template-columns: 1fr;\n }\n`;\n\nreturn (\n <>\n <Wrapper className=\"gateway-page-container\">\n <Section center>\n <H1>Your first steps to becoming a Web3 citizen</H1>\n </Section>\n\n <Section background=\"linear-gradient(to right, hsla(0, 0%, 100%, 0), var(--sand3), hsla(0, 0%, 100%, 0))\">\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card center>\n <i className=\"ph-duotone ph-user-circle-plus\" style={{ color: \"var(--violet8)\", fontSize: \"32px\" }} />\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Your Account\n </Text>\n <Text>The account is your web3 identity and keeps all your assets</Text>\n </Flex>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"#set-up-account\",\n iconRight: \"ph-bold ph-arrow-down\",\n label: \"Start Setup\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n }}\n />\n </Card>\n\n <Card center>\n <i className=\"ph-duotone ph-squares-four\" style={{ color: \"var(--violet8)\", fontSize: \"32px\" }} />\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Explore dApps\n </Text>\n <Text>dApps are decentralized applications that use the blockchain</Text>\n </Flex>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"#explore-dapps\",\n iconRight: \"ph-bold ph-arrow-down\",\n label: \"Explore Now\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n }}\n />\n </Card>\n\n <Card center>\n <i className=\"ph-duotone ph-globe-hemisphere-west\" style={{ color: \"var(--violet8)\", fontSize: \"32px\" }} />\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Understand\n </Text>\n <Text>Become a web3 citizen and help build a better world</Text>\n </Flex>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"#why-it-matters\",\n iconRight: \"ph-bold ph-arrow-down\",\n label: \"Learn More\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n }}\n />\n </Card>\n </Flex>\n </Section>\n\n <Section id=\"set-up-account\" center>\n <Flex direction=\"column\" gap=\"16px\">\n <Text as=\"h2\" size=\"text-3xl\" fontWeight=\"600\" color=\"sand12\">\n Set up your account\n </Text>\n <Text size=\"text-l\">You need a wallet to use the web3. Choose a wallet that fits your needs.</Text>\n </Flex>\n\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card center gap=\"12px\">\n <i className=\"ph-duotone ph-wallet\" style={{ color: \"var(--sand10)\", fontSize: \"32px\" }} />\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n 1. Choose a wallet\n </Text>\n <Text>You need a wallet to create an account and use dApps</Text>\n </Card>\n\n <Card center gap=\"12px\">\n <i className=\"ph-duotone ph-user-circle-plus\" style={{ color: \"var(--sand10)\", fontSize: \"32px\" }} />\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n 2. Create your account\n </Text>\n <Text>Use your wallet to create the account, and create a backup to keep it safe</Text>\n </Card>\n\n <Card center gap=\"12px\">\n <i className=\"ph-duotone ph-coins\" style={{ color: \"var(--sand10)\", fontSize: \"32px\" }} />\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n 3. Fund your account\n </Text>\n <Text>You need some $NEAR tokens in your account for most dApps to work</Text>\n </Card>\n </Flex>\n\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://pages.near.org/use/set-up-account/\",\n target: \"_blank\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Set up your account\",\n variant: \"affirmative\",\n size: \"large\",\n }}\n />\n </Section>\n\n <Section\n background=\"linear-gradient(to right, hsla(0, 0%, 100%, 0), var(--sand3), hsla(0, 0%, 100%, 0))\"\n id=\"explore-dapps\"\n center\n >\n <Flex direction=\"column\" gap=\"16px\">\n <Text as=\"h2\" size=\"text-3xl\" color=\"sand12\" fontWeight=\"600\">\n Explore dApps built on NEAR\n </Text>\n <Text size=\"text-l\">\n All these new paradigms are enabled and ensured by the core properties of the blockchain.\n </Text>\n </Flex>\n\n <HR />\n\n <UseCase>\n <Text size=\"text-l\" color=\"red10\">\n use case\n <br />\n <Text as=\"span\" size=\"text-3xl\" fontWeight=\"600\" color=\"red10\">\n DeFi\n </Text>\n </Text>\n\n <Text>\n <b>Decentralized Finance, of DeFi,</b> lies at the core of the Web3 movement. This sector leverages how\n tokens are valued and exchanged without the barriers to access as with traditional finance. It illustrates\n the power of ownership by giving token holders complete control of their assets, and allowing them\n pseudo-anonymity in how they participate.\n </Text>\n </UseCase>\n\n <Card center>\n <a href=\"https://www.ref.finance/\" target=\"_blank\">\n <CircleImg src=\"https://awesomenear-spaces.fra1.digitaloceanspaces.com/production/projects/ref-finance/ref-finance.jpg\" />\n </a>\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Putting community first in DeFi\n </Text>\n <Text>\n <TextLink href=\"https://www.ref.finance/\" target=\"_blank\">\n Ref.Finance\n </TextLink>{\" \"}\n is a community-led, multi-purpose DeFi platform built on NEAR Protocol.\n </Text>\n </Flex>\n </Card>\n\n <Flex gap=\"16px\" wrap=\"wrap\" justifyContent=\"center\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://pages.near.org/use-cases/defi\",\n target: \"_blank\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Learn about DeFi\",\n variant: \"primary\",\n size: \"large\",\n }}\n />\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://awesomenear.com/categories/defi\",\n target: \"_blank\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Explore DeFi dApps\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n }}\n />\n </Flex>\n\n <HR />\n\n <UseCase>\n <Text size=\"text-l\" color=\"violet10\">\n use case\n <br />\n <Text as=\"span\" size=\"text-3xl\" fontWeight=\"600\" color=\"violet10\">\n NFTs\n </Text>\n </Text>\n\n <Text>\n <b>Non-Fungible Tokens</b> are unique digital assets that are fundamental to the idea of ownership in Web3.\n The assets you own are recorded on the blockchain and are easily verifiable from anyone in the world at any\n time. More importantly, they are immutable–no authority can seize them. This powerful combination of\n transparency and permanence, make NFTs a remarkable tool for various use cases surrounding identity and\n ownership.\n </Text>\n </UseCase>\n\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card>\n <a href=\"https://www.seatlabnft.com/\" target=\"_blank\">\n <CircleImg src=\"https://awesomenear-spaces.fra1.digitaloceanspaces.com/production/projects/seatlab-nft/seatlab-nft.jpg\" />\n </a>\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n New, Fairer Ticketing with NFTs\n </Text>\n <Text>\n <TextLink href=\"https://www.seatlabnft.com/\" target=\"_blank\">\n Seatlab\n </TextLink>{\" \"}\n is an NFT event ticketing marketplace helping artists foster closer connections with fans, eliminating\n fraud and reducing the impact of scalping.\n </Text>\n </Flex>\n </Card>\n\n <Card>\n <a href=\"https://www.tamastream.io/\" target=\"_blank\">\n <CircleImg src=\"https://awesomenear-spaces.fra1.digitaloceanspaces.com/production/projects/tamago/tamago.jpg\" />\n </a>\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Artists, Creators and Fans First. No Gatekeeping. No Advertising.\n </Text>\n <Text>\n <TextLink href=\"https://www.tamastream.io/\" target=\"_blank\">\n Tamago\n </TextLink>{\" \"}\n offers a platform for decentralized audio streaming.\n </Text>\n </Flex>\n </Card>\n </Flex>\n\n <Flex gap=\"16px\" wrap=\"wrap\" justifyContent=\"center\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://pages.near.org/use-cases/nft\",\n target: \"_blank\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Learn about NFTs\",\n variant: \"primary\",\n size: \"large\",\n }}\n />\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://awesomenear.com/categories/nft\",\n target: \"_blank\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Explore NFT dApps\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n }}\n />\n </Flex>\n\n <HR />\n\n <UseCase>\n <Text size=\"text-l\" color=\"cyan10\">\n use case\n <br />\n <Text as=\"span\" size=\"text-3xl\" fontWeight=\"600\" color=\"cyan10\">\n Social\n </Text>\n </Text>\n\n <Text>\n <b>Community thrives in Web3,</b> and the projects helping users freely interact and share information while\n maintaining ownership of their data give a glimpse of how connection will evolve in the open web.\n </Text>\n </UseCase>\n\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card>\n <a href=\"https://sweatco.in/\" target=\"_blank\">\n <CircleImg src=\"https://awesomenear-spaces.fra1.digitaloceanspaces.com/production/projects/sweat-economy/sweat-economy.jpg\" />\n </a>\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Healthier planet. Healthier, wealthier you\n </Text>\n <Text>\n <TextLink href=\"https://sweatco.in/\" target=\"_blank\">\n Sweatcoin\n </TextLink>{\" \"}\n is a free app which rewards your daily steps with a new-generation currency you can spend on cool\n products, donate to charity or convert into SWEAT.\n </Text>\n </Flex>\n </Card>\n\n <Card>\n <a href=\"https://blogchain.app/home\" target=\"_blank\">\n <CircleImg src=\"https://awesomenear-spaces.fra1.digitaloceanspaces.com/production/projects/blogchain/blogchain.jpg\" />\n </a>\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Empowering writers both creatively and economically through decentralization\n </Text>\n <Text>\n <TextLink href=\"https://blogchain.app/home\" target=\"_blank\">\n Blogchain App\n </TextLink>{\" \"}\n is a publishing platform created for independent writers, providing them with a decentralized,\n censorship-resistant, and user-friendly space to engage and grow their audience.\n </Text>\n </Flex>\n </Card>\n </Flex>\n\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://awesomenear.com/categories/social\",\n target: \"_blank\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Explore Social dApps\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n }}\n />\n </Section>\n\n <Section\n id=\"why-it-matters\"\n background=\"linear-gradient( 132.69deg, #02042f 39.58%, #dc5656 76.56%, #dca656 99.48% );\"\n style={{\n padding: \"var(--section-gap) var(--large-gap)\",\n }}\n gap=\"var(--section-gap)\"\n >\n <Flex direction=\"column\" gap=\"12px\" style={{ textAlign: \"center\" }}>\n <Text as=\"h2\" size=\"text-3xl\" fontWeight=\"600\" color=\"white\">\n Why it matters\n </Text>\n <Text size=\"text-l\" color=\"white\">\n Our world is in urgent need of change\n </Text>\n </Flex>\n\n <Flex gap=\"var(--large-gap)\" tabletStack=\"var(--large-gap)\" alignItems=\"center\">\n <Flex gap=\"12px\" direction=\"column\" alignItems=\"flex-start\" style={{ width: \"100%\" }}>\n <Text size=\"text-l\" fontWeight=\"600\" color=\"white\">\n Today, our world is in crisis\n </Text>\n <Text color=\"white\">\n From climate change, to the increasing centralisation of power, the existential threat of a global\n collapse demands global action in every sector of society.\n </Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://pages.near.org/blog/why-web3-is-needed-more-than-ever/\",\n target: \"_blank\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Learn More\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"small\",\n }}\n />\n </Flex>\n\n <img\n src=\"https://near.org/wp-content/themes/near-21/assets/img/relaunch/use-world.png\"\n style={{\n display: \"block\",\n width: \"300px\",\n }}\n />\n\n <Flex gap=\"12px\" direction=\"column\" style={{ width: \"100%\" }}>\n <Text size=\"text-l\" fontWeight=\"600\" color=\"white\">\n We need a more inclusive, open and fair future\n </Text>\n <Text color=\"white\">You can be part of this change. Become a Web3 citizen.</Text>\n </Flex>\n </Flex>\n </Section>\n\n <Section>\n <Flex direction=\"column\" gap=\"16px\" style={{ textAlign: \"center\" }}>\n <Text as=\"h2\" size=\"text-3xl\" fontWeight=\"600\" color=\"sand12\">\n How Web3 on NEAR empowers you\n </Text>\n <Text size=\"text-l\">The basis for an inclusive, fair and open world</Text>\n </Flex>\n\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card gap=\"12px\" center>\n <i className=\"ph-duotone ph-user-circle\" style={{ color: \"var(--violet8)\", fontSize: \"32px\" }} />\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n Regain ownership\n </Text>\n <Text>Your assets, your data, your identity</Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"#regain-ownership\",\n iconRight: \"ph-bold ph-arrow-down\",\n label: \"Learn More\",\n variant: \"primary\",\n fill: \"outline\",\n }}\n />\n </Card>\n\n <Card gap=\"12px\" center>\n <i className=\"ph-duotone ph-graph\" style={{ color: \"var(--cyan10)\", fontSize: \"32px\" }} />\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n Interact freely\n </Text>\n <Text>Free flow of values and information</Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"#interact-freely\",\n iconRight: \"ph-bold ph-arrow-down\",\n label: \"Learn More\",\n variant: \"primary\",\n fill: \"outline\",\n }}\n />\n </Card>\n\n <Card gap=\"12px\" center>\n <i className=\"ph-duotone ph-circles-three-plus\" style={{ color: \"var(--red8)\", fontSize: \"32px\" }} />\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n Participate in fair economies\n </Text>\n <Text>Value is distributed through transparent and fair rules</Text>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"#fair-economies\",\n iconRight: \"ph-bold ph-arrow-down\",\n label: \"Learn More\",\n variant: \"primary\",\n fill: \"outline\",\n }}\n />\n </Card>\n </Flex>\n </Section>\n\n <Section\n id=\"regain-ownership\"\n background=\"linear-gradient(to right, hsla(0, 0%, 100%, 0), var(--sand3), hsla(0, 0%, 100%, 0))\"\n center\n >\n <Flex direction=\"column\" gap=\"16px\" alignItems=\"center\">\n <Icon color=\"violet11\" backgroundColor=\"violet3\" borderColor=\"violet5\">\n <i className=\"ph-duotone ph-user-circle\" />\n </Icon>\n\n <Text as=\"h2\" size=\"text-3xl\" fontWeight=\"600\" color=\"sand12\">\n Regain Ownership\n </Text>\n <Text size=\"text-l\">Take control of your assets, data and identity</Text>\n </Flex>\n\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card gap=\"12px\">\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n The Problem\n </Text>\n <Text>\n On web2 platforms like Facebook, you need to hand over control of your data and identity to these\n platforms. And they can harvest all this data any way they like. They manipulate you to maximize\n monetization. They control what content is on top of your feed and what content gets silenced/censored.\n You don’t really own assets on the platform, as they can arbitrarily decide to change the rules etc. –\n Whether it is a blue checkmark on a social network or a precious armor in an online game.\n </Text>\n </Card>\n\n <Card gap=\"12px\">\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n The Solution\n </Text>\n <Text>\n In web3, you can stay in full control of your assets while using dApps – nobody can suddenly take them\n away from you. Blockchain-based apps are completely transparent, you can see what happens with your data\n and how the assets you give control over will be used. Nobody has the power to suddenly change the rules,\n censor data or take assets away.\n </Text>\n </Card>\n </Flex>\n\n <Flex direction=\"column\" gap=\"8px\" alignItems=\"center\">\n <Text as=\"h3\" size=\"text-2xl\" fontWeight=\"600\" color=\"sand12\">\n How you can regain Ownership…\n </Text>\n <Text size=\"text-l\">…with dApps available today</Text>\n </Flex>\n\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card>\n <CircleImg src=\"https://awesomenear-spaces.fra1.digitaloceanspaces.com/production/projects/mynearwallet/mynearwallet.jpg\" />\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Non-custodial Wallets\n </Text>\n <Text>\n Wallets (like MyNearWallet) give you (and only you) complete control over your tokens, NFTs and other\n assets you own on the NEAR network\n </Text>\n </Flex>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://pages.near.org/learn/tools/\",\n target: \"_blank\",\n iconRight: \"ph-bold ph-arrow-right\",\n label: \"Choose a Wallet\",\n variant: \"primary\",\n fill: \"outline\",\n }}\n />\n </Card>\n\n <Card>\n <a href=\"https://fewfar.com/\" target=\"_blank\">\n <CircleImg src=\"https://awesomenear-spaces.fra1.digitaloceanspaces.com/production/projects/few-and-far/few-and-far.jpg\" />\n </a>\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Few & Far\n </Text>\n <Text>\n Few and Far enables creators to launch and monetize NFTs and for buyers and sellers to securely custody\n assets and hold self-sovereign identities.\n </Text>\n </Flex>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://fewfar.com/\",\n target: \"_blank\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Explore Few & Far\",\n variant: \"primary\",\n fill: \"outline\",\n }}\n />\n </Card>\n </Flex>\n\n <Text as=\"h3\" size=\"text-2xl\" fontWeight=\"600\" color=\"sand12\">\n …once Web3 is fully built out\n </Text>\n\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card gap=\"12px\">\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n Self-sovereign identity\n </Text>\n <Text>\n You will only need to reveal what is necessary about your information to use a certain service. You\n control all aspects of your identity and who gets access to which part of it when\n </Text>\n </Card>\n\n <Card gap=\"12px\">\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n Blockchain-based registries of real-world assets\n </Text>\n <Text>\n Will enable the owner to exercise full control of their ownership. Selling a real estate for instance\n would not require a notary or any other legal process.\n </Text>\n </Card>\n </Flex>\n </Section>\n\n <Section id=\"interact-freely\" center>\n <Flex direction=\"column\" gap=\"16px\" alignItems=\"center\">\n <Icon color=\"cyan10\" backgroundColor=\"cyan4\" borderColor=\"cyan5\">\n <i className=\"ph-duotone ph-graph\" />\n </Icon>\n\n <Text as=\"h2\" size=\"text-3xl\" fontWeight=\"600\" color=\"sand12\">\n Interact freely\n </Text>\n <Text size=\"text-l\">Exchange information and values without being manipulated or controlled</Text>\n </Flex>\n\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card gap=\"12px\">\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n The Problem\n </Text>\n <Text>\n Our interactions and relationships are increasingly surveilled. Content can get censored and money\n transfers blocked. The big social media platforms have total control over your interactions. The result:\n Censorship of messages, nontransparent filtering/prioritization of content, lock-in (you cannot take your\n social graph with you). Current financial systems disenfranchise the poorest and most vulnerable in the\n world.\n </Text>\n </Card>\n\n <Card gap=\"12px\">\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n The Solution\n </Text>\n <Text>\n In Web3, all interactions and value transfers can happen permissionlessly and cannot be censored or\n manipulated. With the blockchain, we can create financial and social platforms that are open to everyone.\n This enables freedom of speech in social communities as well as providing financial sovereignty.\n </Text>\n </Card>\n </Flex>\n\n <Flex direction=\"column\" gap=\"8px\" alignItems=\"center\">\n <Text as=\"h3\" size=\"text-2xl\" fontWeight=\"600\" color=\"sand12\">\n How you can interact freely…\n </Text>\n <Text size=\"text-l\">…with dApps available today</Text>\n </Flex>\n\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card>\n <a href=\"https://youminter.com/\" target=\"_blank\">\n <CircleImg src=\"https://awesomenear-spaces.fra1.digitaloceanspaces.com/production/projects/youminter/youminter.jpg\" />\n </a>\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n YouMinter\n </Text>\n <Text>\n Community-owned social platform delivering NFTs feeds to your mobile device, and rewards users who\n actively participate.\n </Text>\n </Flex>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://youminter.com/\",\n target: \"_blank\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Explore YouMinter\",\n variant: \"primary\",\n fill: \"outline\",\n }}\n />\n </Card>\n\n <Card>\n <a href=\"https://www.niche.club/\" target=\"_blank\">\n <CircleImg src=\"https://awesomenear-spaces.fra1.digitaloceanspaces.com/production/projects/niche/niche.jpg\" />\n </a>\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Niche\n </Text>\n <Text>\n A social app like Instagram that leverages web3. Take a photo and mint it as NFT with one click, share\n and sell it however you like.\n </Text>\n </Flex>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://www.niche.club/\",\n target: \"_blank\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Explore Niche\",\n variant: \"primary\",\n fill: \"outline\",\n }}\n />\n </Card>\n </Flex>\n\n <Text as=\"h3\" size=\"text-2xl\" fontWeight=\"600\" color=\"sand12\">\n …once Web3 is fully built out\n </Text>\n\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card gap=\"12px\">\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n One global social network, many clients\n </Text>\n <Text>\n Imagine having your own universal social graph that you can use for identity verification, apps, loans,\n credit scoring, and more.\n </Text>\n </Card>\n\n <Card gap=\"12px\">\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n New ways to get support for your passion\n </Text>\n <Text>\n Rather than donating to the causes you champion, allow others to invest in your efforts. The better you\n do, the better they do.\n </Text>\n </Card>\n </Flex>\n </Section>\n\n <Section\n id=\"fair-economies\"\n background=\"linear-gradient(to right, hsla(0, 0%, 100%, 0), var(--sand3), hsla(0, 0%, 100%, 0))\"\n center\n >\n <Flex direction=\"column\" gap=\"16px\" alignItems=\"center\">\n <Icon color=\"red8\" backgroundColor=\"red3\" borderColor=\"red5\">\n <i className=\"ph-duotone ph-circles-three-plus\" />\n </Icon>\n\n <Text as=\"h2\" size=\"text-3xl\" fontWeight=\"600\" color=\"sand12\">\n Participate in fair economies\n </Text>\n <Text size=\"text-l\">New models distribute value and incentivize positive behavior</Text>\n </Flex>\n\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card gap=\"12px\">\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n The Problem\n </Text>\n <Text>\n Today, social media shows us content that “keeps us on the hook” to maximize their ad revenues. Many say\n this is a large contributor to the increased divide in our society. Web2 services are usually free for\n users – but real product on these platforms are the users’ data, behavior and attention that is sold,\n usually to advertising companies. The platform owner as middlemen is reaping large profits from this,\n users do not get a share of the value created besides the free service itself.\n </Text>\n </Card>\n\n <Card gap=\"12px\">\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n The Solution\n </Text>\n <Text>\n In Web3 economies, everyone gets their fair share, and incentives are fully transparent. Thereby, any\n collective can build its own functioning economy, and any person with internet access has the ability to\n participate. When the value creation and transfer within an economy is determined by rules on the\n blockchain, this cuts out the middleman that is controlling and monetizing today’s centralized platform.\n The result is an economic model (a.k.a. Tokenomics) that the community of users agree on.\n </Text>\n </Card>\n </Flex>\n\n <Card gap=\"12px\">\n <Text size=\"text-l\" fontWeight=\"600\" color=\"red8\" flex>\n <i className=\"ph-duotone ph-warning\"></i>A word of caution: Do your own research\n </Text>\n <Text>\n Not all economic models are sustainable: Some Web3 projects misuse incentives to maximize growth of their\n platform, and this can lead to unstable systems that result in crashes like the Terra/Luna/Anker case. Be\n diligent and careful before putting your money into projects.\n </Text>\n </Card>\n\n <Flex direction=\"column\" gap=\"8px\" alignItems=\"center\">\n <Text as=\"h3\" size=\"text-2xl\" fontWeight=\"600\" color=\"sand12\">\n How you can participate in fair economies…\n </Text>\n <Text size=\"text-l\">…with dApps available today</Text>\n </Flex>\n\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card>\n <a href=\"https://nearweek.com/\" target=\"_blank\">\n <CircleImg src=\"https://awesomenear-spaces.fra1.digitaloceanspaces.com/production/projects/nearweek/nearweek.jpg\" />\n </a>\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n NEARWEEK\n </Text>\n <Text>\n Anyone can suggest news articles on the blockchain, there is a voting process to select the articles to\n be published and the authors of the articles get compensated when published\n </Text>\n </Flex>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://nearweek.com/\",\n target: \"_blank\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Read crowd-sourced news\",\n variant: \"primary\",\n fill: \"outline\",\n }}\n />\n </Card>\n\n <Card>\n <a href=\"https://sweateconomy.com/\" target=\"_blank\">\n <CircleImg src=\"https://awesomenear-spaces.fra1.digitaloceanspaces.com/production/projects/sweat-economy/sweat-economy.jpg\" />\n </a>\n <Flex direction=\"column\" gap=\"8px\">\n <Text size=\"text-xl\" fontWeight=\"600\" color=\"sand12\">\n Sweat Economy\n </Text>\n <Text>\n The SweatCoin app rewards your daily steps with a new-generation currency you can spend on cool\n products, donate to charity or convert into SWEAT.\n </Text>\n </Flex>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://sweateconomy.com/\",\n target: \"_blank\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Explore Sweat Economy\",\n variant: \"primary\",\n fill: \"outline\",\n }}\n />\n </Card>\n </Flex>\n\n <Text as=\"h3\" size=\"text-2xl\" fontWeight=\"600\" color=\"sand12\">\n …once Web3 is fully built out\n </Text>\n\n <Flex gap=\"24px\" mobileStack=\"24px\">\n <Card gap=\"12px\">\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n Gig economies without the corporate middlemen\n </Text>\n <Text>\n Web3 rideshare apps and the gig economy will give service providers the lion share of the revenue they\n created and more flexibility, while passengers pay less for those services.\n </Text>\n </Card>\n\n <Card gap=\"12px\">\n <Text size=\"text-l\" fontWeight=\"600\" color=\"sand12\">\n Education revolution\n </Text>\n <Text>\n Accredited education and the Learn2Earn economy will be available to everyone, giving educators more\n autonomy and better pay while providing students with high-quality education without a mountain of debt.\n </Text>\n </Card>\n </Flex>\n </Section>\n\n <Section>\n <Widget src=\"near/widget/NearOrg.LearningLinks\" />\n </Section>\n </Wrapper>\n\n <Widget src=\"near/widget/NearOrg.Footer\" />\n </>\n);\n" }, "NearOrg.PrivacyPage": { "": "let { privacyDomainName, compact } = props;\n\ncompact = compact ?? false;\n\nconst [privacy, setPrivacy] = useState(null);\n\nconst fetchPrivacy = useCallback(() => {\n try {\n asyncFetch(privacyDomainName).then((res) => {\n setPrivacy(res.body);\n });\n } catch (error) {\n console.error(`Error on fetching privacy from ${privacyDomainName}: `, error);\n }\n}, [privacyDomainName]);\n\nuseEffect(() => {\n fetchPrivacy();\n}, [privacyDomainName]);\n\nif (!privacy) {\n return <div>Loading...</div>;\n}\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: ${(p) => (p.$compact ? 0 : \"18px\")};\n padding-bottom: ${(p) => (p.$compact ? 0 : undefined)};\n padding-top: ${(p) => (p.$compact ? 0 : undefined)};\n`;\n\nreturn (\n <Wrapper className=\"gateway-page-container\" $compact={compact}>\n <Markdown text={privacy} />\n </Wrapper>\n);\n" }, "NearOrg.Ecosystem.CommunityPage": { "": "const Wrapper = styled.div`\n --section-gap: 162px;\n --large-gap: 82px;\n --medium-gap: 48px;\n padding: calc(var(--section-gap) / 2) 0 0;\n position: relative;\n\n @media (max-width: 900px) {\n --section-gap: 60px;\n --large-gap: 48px;\n --medium-gap: 24px;\n }\n`;\nconst H1 = styled.h1`\n font: var(--text-hero);\n text-align: center;\n letter-spacing: -0.015em;\n color: var(--sand12);\n margin: 0;\n max-width: 960px;\n\n @media (max-width: 900px) {\n font: var(--text-2xl);\n font-weight: 600;\n }\n`;\n\nconst Text = styled.p`\n font: var(--${(p) => p.size ?? \"text-base\"});\n font-weight: ${(p) => p.fontWeight};\n color: var(--${(p) => p.color ?? \"sand10\"});\n margin: 0;\n text-align: ${(p) => p.align};\n`;\nconst Flex = styled.div`\n display: flex;\n gap: ${(p) => p.gap};\n align-items: ${(p) => p.alignItems};\n justify-content: ${(p) => p.justifyContent};\n flex-direction: ${(p) => p.direction ?? \"row\"};\n flex-wrap: ${(p) => p.wrap ?? \"nowrap\"};\n\n @media (max-width: 900px) {\n flex-direction: ${(p) => (p.mobileStack ? \"column\" : p.direction ?? \"row\")};\n gap: ${(p) => (p.mobileStack === true ? \"var(--section-gap)\" : p.mobileStack ? p.mobileStack : p.gap)};\n }\n`;\nconst Section = styled.div`\n display: flex;\n padding: calc(var(--section-gap) / 2);\n gap: ${(p) => p.gap ?? \"var(--medium-gap)\"};\n flex-direction: column;\n align-items: ${(p) => (p.center ? \"center\" : undefined)};\n justify-content: ${(p) => (p.center ? \"center\" : undefined)};\n text-align: ${(p) => (p.center ? \"center\" : undefined)};\n background: ${(p) => p.background};\n\n @media (max-width: 900px) {\n padding-left: var(--medium-gap);\n padding-right: var(--medium-gap);\n }\n`;\nconst Card = styled.div`\n display: flex;\n flex-direction: ${(p) => p.direction ?? \"column\"};\n gap: ${(p) => p.gap ?? \"24px\"};\n width: 100%;\n padding: ${(p) => p.padding ?? \"32px\"};\n border-radius: 8px;\n border: ${(p) => p.border ?? \"1px solid var(--sand4)\"};\n align-items: ${(p) => (p.center ? \"center\" : \"flex-star\")};\n justify-content: ${(p) => (p.center ? \"center\" : undefined)};\n text-align: ${(p) => (p.center ? \"center\" : undefined)};\n background: ${(p) => p.background ?? \"var(--sand1)\"};\n`;\nconst SocialIcon = styled.i`\n font-size: ${(p) => p.size ?? \"30px\"};\n text-align: ${(p) => p.align};\n color: ${(p) => p.color};\n`;\n\nfunction returnIpfsImage(cfid) {\n return {\n ipfs_cid: cfid,\n };\n}\n\nconst ipfsImages = {\n logoCreatebase: \"bafkreignv7fxrwquqr66wsow76amhghyrdd3k3ecb7up6dzem6vhz2cgki\",\n logoCypherpunkGuild: \"bafkreie25aa7gfb5u3p7bouxc6xknismfgtdtlt3yi7pqau3nqtksvvnsm\",\n logo4NTSGuild: \"bafkreifrjw7dyg7ff3jrvzq35napmpiwcxdt2wrmo4hkysma7scr3jwake\",\n};\n\nconst involvedCards = [\n {\n iconClassName: \"ph ph-binoculars\",\n iconColor: \"violet7\",\n title: \"Find your Tribe\",\n content: \"Make friends and connections pursuing a mission you’re passionate about.\",\n },\n {\n iconClassName: \"ph ph-chart-pie-slice\",\n iconColor: \"red7\",\n title: \"Make an Impact\",\n content: \"Help give power (money, data, and governance) back to the people.\",\n },\n {\n iconClassName: \"ph ph-hand-heart\",\n iconColor: \"cyan7\",\n title: \"Give Back\",\n content: \"When you contribute to building a better future, good things happen.\",\n },\n {\n iconClassName: \"ph ph-chart-line-up\",\n iconColor: \"green7\",\n title: \"Make a Living\",\n content: \"Work when you want, how you want, and get paid based on your contribution.\",\n },\n];\nconst getStartedCards = [\n {\n iconClassName: \"ph ph-graduation-cap\",\n iconColor: \"violet7\",\n title: \"Education\",\n content: \"Learn the basics, explore the ecosystem, or dive deep into the tech.\",\n href: \"https://near.org/learn/learn-more\",\n hrefText: \"See all Learn Resources\",\n internal: false,\n },\n {\n iconClassName: \"ph ph-chats\",\n iconColor: \"cyan7\",\n title: \"Join our Discord\",\n content: \"Join ongoing topical conversations about all things NEAR.\",\n href: \"https://near.chat\",\n hrefText: \"Go to Discord\",\n internal: true,\n },\n {\n iconClassName: \"ph ph-check-square-offset\",\n iconColor: \"red7\",\n title: \"Community Events\",\n content: \"Worldwide opportunities to attend, participate, connect and more.\",\n href: \"https://near.events\",\n hrefText: \"Go to Events Site\",\n internal: true,\n },\n];\nconst featuredGuildsCards = [\n {\n ipfsImage: ipfsImages.logoCreatebase,\n title: \"Createbase\",\n content:\n \"A community for Creators/Projects launching on Mintbase. Get support/funding and connect with other creatives!\",\n },\n {\n ipfsImage: ipfsImages.logoCypherpunkGuild,\n title: \"Cypherpunk Guild\",\n content: \"A guild focussed on incentivizing builders to create privacy-enhancing technologies on NEAR.\",\n },\n {\n ipfsImage: ipfsImages.logo4NTSGuild,\n title: \"4NTS Guild\",\n content: \"A community building and marketing-focused guild.\",\n },\n];\nconst connectChannelsLinks = [\n {\n key: \"discord\",\n href: \"http://near.chat\",\n hrefText: \"Discord\",\n internal: true,\n },\n {\n key: \"governance_forum\",\n href: \"https://gov.near.org\",\n hrefText: \"Governance Forum\",\n internal: true,\n },\n {\n key: \"twitter\",\n href: \"https://twitter.com/nearprotocol\",\n hrefText: \"Twitter\",\n internal: true,\n },\n {\n key: \"reddit\",\n href: \"https://www.reddit.com/r/nearprotocol\",\n hrefText: \"Reddit\",\n internal: true,\n },\n {\n key: \"telegram\",\n href: \"https://t.me/cryptonear\",\n hrefText: \"Telegram\",\n internal: true,\n },\n {\n key: \"github\",\n href: \"https://github.com/near\",\n hrefText: \"Github\",\n internal: true,\n },\n {\n key: \"we_chat\",\n href: \"https://near.org/ecosystem/community/wechat\",\n hrefText: \"WeChat\",\n internal: false,\n },\n];\n\nreturn (\n <>\n <Wrapper className=\"gateway-page-container\">\n <Section>\n <Flex gap=\"16px\" direction=\"column\" alignItems=\"start\">\n <H1>Community</H1>\n <Text size=\"text-xl\" color=\"sand12\" style={{ maxWidth: \"662px\" }}>\n The NEAR community is a globally distributed home to innovators, developers, and contributors supporting the\n protocol’s platform, ecosystem, and applications. We’re all here to build a stronger ecosystem.\n </Text>\n </Flex>\n </Section>\n\n <Section background=\"linear-gradient(to right, hsla(0, 0%, 100%, 0), var(--sand3), hsla(0, 0%, 100%, 0))\">\n <Text size=\"text-3xl\" color=\"sand12\">\n Why get involved?\n </Text>\n\n <div className=\"row row-cols-lg-4 row-cols-md-2 row-cols-1 g-4\">\n {involvedCards.map((item) => (\n <div className=\"col\">\n <Card center>\n <SocialIcon className={item.iconClassName} color={`var(--${item.iconColor})`} />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n {item.title}\n </Text>\n <Text size=\"text-m\" color=\"sand12\">\n {item.content}\n </Text>\n </Card>\n </div>\n ))}\n </div>\n </Section>\n\n <Section>\n <Text size=\"text-3xl\" color=\"sand12\">\n Get Started\n </Text>\n <Text size=\"text-m\" color=\"sand12\">\n The NEAR Community provides a number of ways for you to start learning, earning, and growing.\n </Text>\n\n <div className=\"row row-cols-lg-3 row-cols-md-2 row-cols-1 g-4\">\n {getStartedCards.map((item) => (\n <div className=\"col\">\n <Card center style={{ height: \"100%\" }}>\n <SocialIcon className={item.iconClassName} color={`var(--${item.iconColor})`} />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n {item.title}\n </Text>\n <Text size=\"text-m\" color=\"sand12\">\n {item.content}\n </Text>\n {item.internal ? (\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: item.href,\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: item.hrefText,\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n ) : (\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: item.href,\n iconRight: \"ph-bold ph-arrow-right\",\n label: item.hrefText,\n variant: \"primary\",\n fill: \"outline\",\n size: \"large\",\n }}\n />\n )}\n </Card>\n </div>\n ))}\n </div>\n </Section>\n\n <Section>\n <Text size=\"text-3xl\" color=\"sand12\" style={{ maxWidth: \"662px\" }}>\n Guilds: Opening the web through community initiatives.\n </Text>\n <Text size=\"text-m\" color=\"sand12\" style={{ maxWidth: \"662px\" }}>\n Guilds are collectives that make up the greater NEAR community. Each guild shares a specific vision and\n mission related to driving a more open, interconnected, and consumer-empowered world.\n </Text>\n <Text size=\"text-l\" color=\"sand12\" style={{ maxWidth: \"662px\" }}>\n Featured Guilds\n </Text>\n\n <div className=\"row row-cols-lg-3 row-cols-md-2 row-cols-1 g-4\">\n {featuredGuildsCards.map((item) => (\n <div className=\"col\">\n <Card style={{ height: \"100%\" }}>\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(item.ipfsImage),\n style: { width: \"52px\", height: \"52px\" },\n }}\n />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n {item.title}\n </Text>\n <Text size=\"text-m\" color=\"sand12\">\n {item.content}\n </Text>\n </Card>\n </div>\n ))}\n </div>\n </Section>\n\n <Section background=\"linear-gradient(to right, hsla(0, 0%, 100%, 0), var(--sand3), hsla(0, 0%, 100%, 0))\">\n <div className=\"row row-cols-md-3 row-cols-1 g-4\">\n <div className=\"col\">\n <Card background=\"transparent\" border=\"none\" padding=\"32px 0\" style={{ height: \"100%\" }}>\n <SocialIcon className=\"ph ph-video\" color=\"var(--red7)\" />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n Watch\n </Text>\n <div>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://www.youtube.com/channel/UCuKdIYVN8iE3fv8alyk1aMw\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"NEAR YouTube Channel\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"small\",\n target: \"_blank\",\n }}\n />\n </div>\n </Card>\n </div>\n\n <div className=\"col\">\n <Card background=\"transparent\" border=\"none\" padding=\"32px 0\" style={{ height: \"100%\" }}>\n <SocialIcon className=\"ph ph-lightbulb\" color=\"var(--violet7)\" />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n Read\n </Text>\n <Flex gap=\"24px\" direction=\"column\" alignItems=\"start\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://near.org/blog\",\n iconRight: \"ph-bold ph-arrow-right\",\n label: \"NEAR Blog\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"small\",\n }}\n />\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"https://medium.com/nearprotocol\",\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Community Blog\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"small\",\n target: \"_blank\",\n }}\n />\n </Flex>\n </Card>\n </div>\n\n <div className=\"col\">\n <Card background=\"transparent\" border=\"none\" padding=\"32px 0\" style={{ height: \"100%\" }}>\n <SocialIcon className=\"ph ph-chats\" color=\"var(--cyan7)\" />\n <Text size=\"text-xl\" color=\"sand12\" fontWeight=\"600\">\n Connect\n </Text>\n <div className=\"row row-cols-md-2 row-cols-1 g-4\">\n {connectChannelsLinks.map((item) => (\n <div key={item.key} className=\"col\">\n {item.internal ? (\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: item.href,\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: item.hrefText,\n variant: \"primary\",\n fill: \"outline\",\n size: \"small\",\n target: \"_blank\",\n }}\n />\n ) : (\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: item.href,\n iconRight: \"ph-bold ph-arrow-right\",\n label: item.hrefText,\n variant: \"primary\",\n fill: \"outline\",\n size: \"small\",\n }}\n />\n )}\n </div>\n ))}\n </div>\n </Card>\n </div>\n </div>\n </Section>\n </Wrapper>\n <Widget src=\"near/widget/NearOrg.Footer\" />\n </>\n);\n" }, "NearOrg.TermsPage": { "": "let { termsDomainName, compact } = props;\n\ncompact = compact ?? false;\n\nconst [terms, setTerms] = useState(null);\n\nconst fetchTerms = useCallback(() => {\n try {\n asyncFetch(termsDomainName).then((res) => {\n setTerms(res.body);\n });\n } catch (error) {\n console.error(`Error on fetching terms from ${termsDomainName}: `, error);\n }\n}, [termsDomainName]);\n\nuseEffect(() => {\n fetchTerms();\n}, [termsDomainName]);\n\nif (!terms) {\n return <div>Loading...</div>;\n}\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: ${(p) => (p.$compact ? 0 : \"18px\")};\n padding-bottom: ${(p) => (p.$compact ? 0 : undefined)};\n padding-top: ${(p) => (p.$compact ? 0 : undefined)};\n`;\n\nreturn (\n <Wrapper className=\"gateway-page-container\" $compact={compact}>\n <Markdown text={terms} />\n </Wrapper>\n);\n" }, "NearOrg.Ecosystem.GetFundingPage": { "": "const Wrapper = styled.div`\n --section-gap: 162px;\n --large-gap: 82px;\n --medium-gap: 48px;\n padding: calc(var(--section-gap) / 2) 0 0;\n position: relative;\n\n @media (max-width: 900px) {\n --section-gap: 60px;\n --large-gap: 48px;\n --medium-gap: 24px;\n }\n`;\nconst H1 = styled.h1`\n font: var(--text-hero);\n text-align: center;\n letter-spacing: -0.015em;\n color: var(--sand12);\n margin: 0;\n max-width: 960px;\n\n @media (max-width: 900px) {\n font: var(--text-2xl);\n font-weight: 600;\n }\n`;\n\nconst Text = styled.p`\n font: var(--${(p) => p.size ?? \"text-base\"});\n font-weight: ${(p) => p.fontWeight};\n color: var(--${(p) => p.color ?? \"sand10\"});\n margin: 0;\n text-align: ${(p) => p.align};\n`;\nconst Flex = styled.div`\n display: flex;\n gap: ${(p) => p.gap};\n align-items: ${(p) => p.alignItems};\n justify-content: ${(p) => p.justifyContent};\n flex-direction: ${(p) => p.direction ?? \"row\"};\n flex-wrap: ${(p) => p.wrap ?? \"nowrap\"};\n\n @media (max-width: 900px) {\n flex-direction: ${(p) => (p.mobileStack ? \"column\" : p.direction ?? \"row\")};\n gap: ${(p) => (p.mobileStack === true ? \"var(--section-gap)\" : p.mobileStack ? p.mobileStack : p.gap)};\n }\n`;\nconst Section = styled.div`\n display: flex;\n padding: calc(var(--section-gap) / 2);\n gap: ${(p) => p.gap ?? \"var(--medium-gap)\"};\n flex-direction: column;\n align-items: ${(p) => (p.center ? \"center\" : undefined)};\n justify-content: ${(p) => (p.center ? \"center\" : undefined)};\n text-align: ${(p) => (p.center ? \"center\" : undefined)};\n background: ${(p) => p.background};\n\n @media (max-width: 900px) {\n padding-left: var(--medium-gap);\n padding-right: var(--medium-gap);\n }\n`;\nconst Card = styled.div`\n display: flex;\n flex-direction: ${(p) => p.direction ?? \"column\"};\n gap: ${(p) => p.gap ?? \"24px\"};\n width: 100%;\n padding: ${(p) => p.padding ?? \"32px\"};\n border-radius: 8px;\n border: ${(p) => p.border ?? \"1px solid var(--sand4)\"};\n align-items: ${(p) => (p.center ? \"center\" : \"flex-star\")};\n justify-content: ${(p) => (p.center ? \"center\" : undefined)};\n text-align: ${(p) => (p.center ? \"center\" : undefined)};\n background: ${(p) => p.background ?? \"var(--sand1)\"};\n`;\nconst SocialIcon = styled.i`\n font-size: ${(p) => p.size ?? \"30px\"};\n text-align: ${(p) => p.align};\n color: ${(p) => p.color};\n`;\n\nfunction returnIpfsImage(cfid) {\n return {\n ipfs_cid: cfid,\n };\n}\n\nconst ipfsImages = {\n arrows: \"bafkreifdzknpkboed3jmm4rgtbg3mqaocziagtjbznfp6o3hvgd5ix6brm\",\n logoAurora: \"bafkreieoq7wpdctcx42uywfdaoi4k3uq6rgodbjjz6mhz3qesrmaben2ju\",\n logoDevHub: \"bafkreif4i3opjuumiq3djbyta74somrjsjzhlvd3zgrhknmh32iv4qgcgi\",\n logoHorizon: \"bafkreietp2ohevk7v3w6bb66u5rrgstfnqgx75w7xal5foraimv4jxijh4\",\n logoGlobeDao: \"bafkreih6n3ukibgnb4cge3u44aorabmfvejzlpqjrjl6cnbht5rlegc2cu\",\n logoMetaPool: \"bafkreicj5zrz2oj2apb5balxtepk32nzxm5t5gywcznr6w2azxkpfd3uye\",\n logoNearGamingDAO: \"bafkreicpwgvxgjzifbci2omgtlbdail5a7rjpdyrjbpiwfklpwlgvuog7m\",\n logoNearWeek: \"bafkreiblac35httjgnc2dmn2ym67fb3emwlsvmwp4ky6xvo4fmtreb2dei\",\n logoOnboardDao: \"bafkreicf2rsgrxi76icaxbegjnxc62uumeqqc23rfxfr67boaht3faoz4i\",\n logoPotlock: \"bafkreie7kmpb2urjargjp3wh2kkoah26zfa7y52j6s5rnftwuqtm4garkm\",\n logoProximity: \"bafkreiazqis67kprs5ofbdruktmtvtun4g4bb2nbrqpwxzocuz77io6vyy\",\n logoSheNear: \"bafkreidlrjnin7ikyepbaontctigs7f6nrltph7jspeavyutbviouj66ua\",\n logoHumanGuild: \"bafkreia2q267cf7apo6r3o3uw35lpbrp43jb3c5udfgquee2clbkdbks4e\",\n logoCypherpunkGuild: \"bafkreie25aa7gfb5u3p7bouxc6xknismfgtdtlt3yi7pqau3nqtksvvnsm\",\n logoMintBase: \"bafkreia3zulk3xrmwc6grqcpxavzug6odwgkwzd5magctxvq4jvalbnkcy\",\n logoNDC: \"bafkreihmznoqcsq2ivkjck2iqpyaojmmrusma2pqapjwlvop2i7oyoebyu\",\n logoOctopus: \"bafkreibzcnifufde5ft6hx3qkwzxhzq66avfbholirvrmaf5jbojwqggey\",\n logoMetaWeb: \"bafkreigalzrrkjyq755e45ryvrpragroneda3373assctbrnwjmgb4fzwe\",\n logoOWC: \"bafkreiarz2ffdpkuaoz6g7tvbp66lyoqqgwpvxtq3u4won46sjtuds6hqa\",\n logoStealthCapital: \"bafkreiac7dkdapj6bhiyusqs576is3b36ypbz6dimhugnrrhhv63i7pe6m\",\n logoLyric: \"bafkreicjhngar5ybinywhql3msk6tqi5cckngaf2zywjeuw65umkoqtq34\",\n logoCreativeDao: \"bafkreictzvvz2irr7tr7fhkdne2i7xpr4mf7x5b5i2vhgoqdswb73lbyyu\",\n logoDevDao: \"bafkreibvh3qys5z7qbekqqhmgump4iy32nw5wfvcyegejfs4gckrbqp7pq\",\n logoMarketingDao: \"bafybeigtcsnc4s5qyrzqm2qmuffaezeyheaetqn5w3nvlzi4syltedmzqm\",\n logoToronto: \"bafkreiftfra7wwdwivl2w4v6or6dwycjpswhpjnxxdr7nuhrfnlippxc34\",\n logoAfrica: \"bafkreiblt2ydxlgfywigkpsl2uon24fhayozfcbdlzcokkf57eaehpqehu\",\n logoBrasil: \"bafkreifa7pytkthujigpqlgsw2bxgvgpfpvm2jhrext3hetihglgwurjiq\",\n logoKorea: \"bafkreifvp5gfpxmavmmcdh7ni2e7zpmggs7xdltiuwbhbsvrxoqn4hm7oi\",\n flagKenia: \"bafkreib4flzpg3emzmsyw2dro5hcnsnqqfrfk7gd2dvvsjks2xcvo5rbxa\",\n logoIndia: \"bafkreifn2vipi5tq43z5mmbbplrhedeuoh7c2w6d73kfxbdlzbzu4waava\",\n flagBalcans: \"bafkreicz6eqbngpv44endjeddfudaaooyw63iuzgmlog4stzrnpdkje4vi\",\n logoVietnam: \"bafkreibbtoqgmygctqgx4n4ofqhm635p7km4f3q5mwb6w2pj3j3l5l3dkq\",\n flagSouthKorea: \"bafkreifirmndyjemruy56lgitls4c2tpee5rkx6t26u7lyuatyuywmevki\",\n flagUSA: \"bafkreicsmgaejlbmzvfbawdayiqljbxzi62tmvvktoveubuljijib6ezd4\",\n longImage: \"bafkreic7dun4novdzgca54pwisa6otg3yut45jbnfyof2bop4xsnl22bo4\",\n};\n\nconst fundingCards = [\n {\n key: \"ecosystem_grants\",\n iconClassName: \"ph ph-circles-three-plus\",\n iconColor: \"violet7\",\n content: \"Ecosystem Funding Outlets\",\n },\n {\n key: \"accelerators_and_incubators\",\n iconClassName: \"ph ph-trend-up\",\n iconColor: \"violet8\",\n content: \"Accelerators & Incubators\",\n },\n {\n key: \"community_led_dao\",\n iconClassName: \"ph ph-users-four\",\n iconColor: \"red7\",\n content: \"Community-led DAOs\",\n },\n {\n key: \"regional_hubs\",\n iconClassName: \"ph ph-planet\",\n iconColor: \"cyan7\",\n content: \"Regional hubs\",\n },\n];\nconst ecosystemGrantCards = [\n {\n ipfsImage: ipfsImages.logoNDC,\n title: \"Near Digital Collective\",\n content: \"The NDC empowers builders to create sustainable impact in Web3\",\n href: \"https://app.neardc.org/\",\n },\n {\n ipfsImage: ipfsImages.logoDevHub,\n title: \"DevHub\",\n content: \"Funding & support for developers & builders\",\n href: \"https://near.org/devhub.near/widget/app\",\n },\n {\n ipfsImage: ipfsImages.logoPotlock,\n title: \"Potlock\",\n content: \"Decentralized public goods funding\",\n href: \"https://app.potlock.org/\",\n },\n {\n ipfsImage: ipfsImages.logoMetaPool,\n title: \"MetaPool Grants\",\n content: \"For MetaPool growth initiatives focused on Defi, Education, TVL Generation, and Brand Awareness\",\n href: \"https://docs.metapool.app/master/meta-pool-ecosystem/vote/grants\",\n },\n {\n ipfsImage: ipfsImages.logoSheNear,\n title: \"She is Near\",\n content: \"Comprehensive support for women-led projects and Web3 influencers\",\n href: \"https://gov.near.org/c/community/she-is-near/145\",\n },\n {\n ipfsImage: ipfsImages.logoGlobeDao,\n title: \"Globe DAO\",\n content: \"Supports regional projects and communities with resources and collaboration\",\n href: \"https://gov.near.org/c/community/globe/112\",\n },\n {\n ipfsImage: ipfsImages.logoMintBase,\n title: \"Mintbase\",\n content: \"Aimed at supporting projects building in NFTs\",\n href: \"https://github.com/mintbase/Grants-Program#1-application\",\n },\n];\nconst acceleratorsCards = [\n {\n ipfsImage: ipfsImages.logoHorizon,\n title: \"HZN Accelerator Application\",\n content:\n \"Join the 8-week equity-free accelerator that provides multi-faceted support for early stage web3 projects.\",\n href: \"https://www.hzn.xyz/hzn\",\n },\n {\n ipfsImage: ipfsImages.logoLyric,\n title: \"Lyric Ventures\",\n content: \"An incubator focused on B2B projects\",\n href: \"https://lyrik.ventures\",\n },\n {\n ipfsImage: ipfsImages.logoMetaWeb,\n title: \"MetaWeb\",\n content: \"Venture capital and Incubator\",\n href: \"https://www.metaweb.vc\",\n },\n {\n ipfsImage: ipfsImages.logoNearWeek,\n title: \"NEARWEEK\",\n content: \"Amplification of twitter posts, newsletters, marketing campaigns, etc.\",\n href: \"https://nearweek.com/\",\n },\n];\nconst communityDaoCards = [\n {\n ipfsImage: ipfsImages.logoNearGamingDAO,\n title: \"Near Gaming DAO\",\n content: \"Focused on the development of the NEAR gaming ecosystem\",\n href: \"https://gov.near.org/c/community/gaming/146\",\n },\n {\n ipfsImage: ipfsImages.logoOnboardDao,\n title: \"Onboard DAO\",\n content: \"Supporting collaboration & development of wallet and onboarding infrastructure\",\n href: \"https://onboarddao.super.site/funding-guide-onboard-dao\",\n },\n {\n ipfsImage: ipfsImages.logoMarketingDao,\n title: \"Marketing DAO\",\n content:\n \"Grants for marketing support initiatives providing comprehensive founders support via PR agency, influencers, working hours, building marketing strategies and more\",\n href: \"https://near.org/ndcdev.near/widget/MDAO.App?page=home\",\n },\n {\n ipfsImage: ipfsImages.logoCreativeDao,\n title: \"Creative DAO\",\n content: \"Funding for creative projects, guilds and DAOs\",\n href: \"https://gov.near.org/c/creatives/creatives-dao/61?_gl=1*1fhalxr*_ga*OTkzODQ3NDEwLjE2NzI4MjM3NjE.*_ga_9GWCXQJ62J*MTY3MjkxMDg2My40LjAuMTY3MjkxMDg2My4wLjAuMA..\",\n },\n {\n ipfsImage: ipfsImages.logoDevHub,\n title: \"DevHub\",\n content: \"The decentralized home base for NEAR builders\",\n href: \"https://near.org/devhub.near/widget/app\",\n },\n];\nconst regionalHubCards = [\n {\n ipfsImage: ipfsImages.logoAfrica,\n title: \"Africa\",\n href: \"https://twitter.com/nearafrica_\",\n },\n {\n ipfsImage: ipfsImages.flagBalcans,\n title: \"Balkans\",\n href: \"https://nearbalkans.org\",\n },\n {\n ipfsImage: ipfsImages.flagUSA,\n title: \"Banyan\",\n href: \"https://twitter.com/Banyan_NEAR\",\n },\n {\n ipfsImage: ipfsImages.logoBrasil,\n title: \"Brasil\",\n href: \"https://twitter.com/near_brazil\",\n },\n {\n ipfsImage: ipfsImages.logoIndia,\n title: \"India\",\n href: \"https://twitter.com/NearIndia\",\n },\n {\n ipfsImage: ipfsImages.flagKenia,\n title: \"Kenya\",\n href: \"https://sankore2.com\",\n },\n {\n ipfsImage: ipfsImages.logoKorea,\n title: \"Korea\",\n href: \"https://twitter.com/NearKoreaHub\",\n },\n {\n ipfsImage: ipfsImages.logoToronto,\n title: \"Toronto\",\n href: \"https://twitter.com/NEAR_Toronto\",\n },\n {\n ipfsImage: ipfsImages.logoVietnam,\n title: \"Vietnam\",\n href: \"https://nearvietnamhub.org\",\n },\n];\n\nconst infrastructure = [\n {\n ipfsImage: ipfsImages.logoCreativeDao,\n title: \"NEAR Dev Telegram Group\",\n content: \"NEAR Developers community chat. Share your knowledge and live on the cutting edge of NEAR!\",\n href: \"https://t.me/neardev\",\n },\n {\n ipfsImage: ipfsImages.logoDevHub,\n title: \"DevHub\",\n content: \"The decentralized home base for NEAR builders\",\n href: \"https://near.org/devhub.near/widget/app\",\n },\n];\n\nconst fundingHugeCards = [\n {\n key: \"ecosystem_grants_huge_card\",\n id: \"ecosystem_grants\",\n iconClassName: \"ph ph-circles-three-plus\",\n iconColor: \"violet7\",\n title: \"Ecosystem Grants\",\n content: \"For projects and start-ups building in web 3.0\",\n cards: ecosystemGrantCards,\n },\n {\n key: \"accelerators_and_incubators_huge_card\",\n id: \"accelerators_and_incubators\",\n iconClassName: \"ph ph-trend-up\",\n iconColor: \"violet8\",\n title: \"Accelerators and Incubators\",\n content: \"For projects and start-ups looking to join an incubator or accelerator\",\n cards: acceleratorsCards,\n },\n {\n key: \"community_led_dao_huge_card\",\n id: \"community_led_dao\",\n iconClassName: \"ph ph-users-four\",\n iconColor: \"red7\",\n title: \"Community-led DAOs\",\n content: \"Decentralized communities that support the growth of the ecosystem\",\n cards: communityDaoCards,\n },\n {\n key: \"regional_hubs_huge_card\",\n id: \"regional_hubs\",\n iconClassName: \"ph ph-planet\",\n iconColor: \"cyan7\",\n title: \"Regional hubs\",\n content: \"If a project is based in the following regions they should apply via their respective Regional Hub.\",\n cards: regionalHubCards,\n },\n];\n\nreturn (\n <>\n <Wrapper className=\"gateway-page-container\">\n <Section center>\n <Flex gap=\"16px\" direction=\"column\" alignItems=\"center\">\n <H1>Get Funded. Build the Future.</H1>\n <Text size=\"text-xl\" color=\"sand12\" style={{ maxWidth: \"662px\" }}>\n The NEAR ecosystem offers multiple funding options to support initiatives aimed at decentralizing, growing,\n and innovating on NEAR.\n </Text>\n </Flex>\n </Section>\n\n <Section center>\n <Flex gap=\"16px\" direction=\"column\" alignItems=\"stretch\" style={{ width: \"100%\" }}>\n <Text size=\"text-3xl\" color=\"sand12\">\n Funding sources\n </Text>\n <Text size=\"text-xl\" color=\"sand12\">\n We’ve helped hundreds of projects and teams realize their ideas, and bring them to market.\n </Text>\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(ipfsImages.arrows),\n className: \"img-fluid d-none d-lg-block mx-auto\",\n }}\n />\n <div className=\"row row-cols-lg-4 row-cols-md-2 row-cols-1 g-4\">\n {fundingCards.map((item) => (\n <div className=\"col\" key={item.key}>\n <Card center>\n <Link href={`#${item.key}`}>\n <SocialIcon className={item.iconClassName} color={`var(--${item.iconColor})`} />\n <Text size=\"text-m\" color=\"sand12\">\n {item.content}\n </Text>\n </Link>\n </Card>\n </div>\n ))}\n </div>\n </Flex>\n </Section>\n\n <Section gap=\"32px\">\n {fundingHugeCards.map((card) => (\n <Card center key={card.key} id={card.id}>\n <SocialIcon className={card.iconClassName} color={`var(--${card.iconColor})`} size=\"32px\" />\n <Text size=\"text-3xl\" color=\"sand12\">\n {card.title}\n </Text>\n <Text size=\"text-l\" color=\"sand12\">\n {card.content}\n </Text>\n <div className=\"row row-cols-lg-3 row-cols-md-2 row-cols-1 g-4 justify-content-center\">\n {card.cards.map((item) => (\n <div className=\"col\" key={item.ipfsImage}>\n <Card background=\"transparent\" border=\"none\" direction=\"row\">\n <Widget\n src=\"mob.near/widget/Image\"\n props={{\n image: returnIpfsImage(item.ipfsImage),\n className: \"img-fluid\",\n style: {\n width: \"80px\",\n height: \"80px\",\n borderRadius: \"50%\",\n },\n }}\n />\n <Flex gap=\"16px\" direction=\"column\" alignItems=\"start\">\n <Text size=\"text-l\" color=\"sand12\" fontWeight=\"600\" align=\"left\">\n {item.title}\n </Text>\n {item.content && (\n <Text size=\"text-m\" color=\"sand12\" align=\"left\">\n {item.content}\n </Text>\n )}\n {item.href ? (\n <div>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: item.href,\n iconRight: \"ph-bold ph-arrow-up-right\",\n label: \"Learn more\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"small\",\n target: \"_blank\",\n }}\n />\n </div>\n ) : (\n <Text size=\"text-m\" color=\"sand12\" align=\"left\" fontWeight=\"600\">\n Comming Soon\n </Text>\n )}\n </Flex>\n </Card>\n </div>\n ))}\n </div>\n </Card>\n ))}\n </Section>\n\n <Section center>\n <Text size=\"text-3xl\" color=\"sand12\">\n What funding program is best for me?\n </Text>\n <Text size=\"text-xl\" color=\"sand12\" style={{ maxWidth: \"662px\" }}>\n There are several options to get financial support for your idea – whether it is a grant from an ecosystem\n fund, joining an accelerator, or getting venture support through our Ecosystem partners.\n </Text>\n <div>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: `https://www.nearbuilders.com/`,\n label: \"Explore All Teams\",\n variant: \"affirmative\",\n size: \"large\",\n target: \"_blank\",\n }}\n />\n </div>\n </Section>\n </Wrapper>\n\n <Widget src=\"near/widget/NearOrg.Footer\" />\n </>\n);\n" }, "NearOrg.Notifications.Settings": { "": "let {\n isLocalStorageSupported,\n isNotificationSupported,\n isPermisionGranted,\n isPushManagerSupported,\n handleTurnOn,\n handleOnCancel,\n getNotificationLocalStorage,\n handleOnCancelBanner,\n accountId,\n handlePushManagerUnsubscribe,\n iOSDevice,\n loading,\n disabled,\n} = props;\n\nconst notificationSupported = isNotificationSupported();\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 12px;\n max-width: 592px;\n`;\n\nconst Text = styled.div`\n font: var(--text-s);\n color: var(--sand11);\n font-weight: 450;\n`;\n\nconst TextLink = styled(\"Link\")`\n font-weight: 600;\n`;\n\nconst IosNotification = () => (\n <Text>\n <i className=\"ph-bold ph-info\" />\n In order to enable Mobile Browser notifications on iOS, you will also need to add near.org as a icon to your home\n screen. Click on the share icon, and then tap on <b>\"Add to Home Screen\"</b>\n </Text>\n);\n\nconst SettingHeaderContent = () => {\n return (\n <>\n {iOSDevice && <IosNotification />}\n <Text>\n Learn more about notifications\n <TextLink href=\"https://near.org/blog/announcing-web-push-notifications-on-b-o-s\">here</TextLink>\n </Text>\n </>\n );\n};\n\n// TODO: solution to pass data to this component\n// at this moment we don't have a simple solution to pass data to this component\n// we are not able to detect if notifications are supported,\n// and we are not able to handle Turn On button\n\nconst permission = getNotificationLocalStorage()?.permission;\n\nState.init({\n showTurnOn: !isPermisionGranted() || (isPermisionGranted() && !permission),\n showTurnOff: isPermisionGranted() && !!permission,\n});\n\nconst checkShow = () => {\n const permission = getNotificationLocalStorage()?.permission;\n State.update({\n showTurnOn: !isPermisionGranted() || (isPermisionGranted() && !permission),\n showTurnOff: isPermisionGranted() && !!permission,\n });\n};\n\nreturn (\n <Wrapper className=\"gateway-page-container\">\n <Widget\n src=\"near/widget/NearOrg.Notifications.SettingsHeader\"\n props={{\n title: \"Notification Settings\",\n text: \"Configure your notifications for activity on near.org\",\n content: <SettingHeaderContent />,\n }}\n />\n\n {state.showTurnOn && (\n <Widget\n src=\"near/widget/NearOrg.Notifications.SettingsListItem\"\n props={{\n handleOnClick: () => {\n handleTurnOn(accountId, checkShow);\n },\n label: \"Turn On\",\n loading,\n disabled,\n }}\n />\n )}\n {state.showTurnOff && (\n <Widget\n src=\"near/widget/NearOrg.Notifications.SettingsListItem\"\n props={{\n handleOnClick: () => {\n handlePushManagerUnsubscribe(checkShow);\n },\n label: \"Turn Off\",\n loading,\n disabled,\n }}\n />\n )}\n {!notificationSupported && (\n <Widget\n src=\"near/widget/NearOrg.Notifications.SettingsTurnOn\"\n props={{\n iOSDevice,\n }}\n />\n )}\n </Wrapper>\n);\n" }, "NearOrg.CookiePrompt": { "": "const Cookies = styled.div`\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n box-shadow: 0 8px 48px rgba(0, 0, 0, 0.15);\n background-color: white;\n border-radius: 4px;\n margin: 8px auto;\n max-width: 100%;\n width: 714px;\n padding: 12px;\n display: flex;\n gap: 10px;\n align-items: center;\n font-size: 12px;\n line-height: 18px;\n font-weight: 400;\n\n p {\n margin-bottom: 0;\n }\n\n .buttons {\n display: flex;\n gap: 10px;\n }\n\n @media (max-width: 800px) {\n flex-direction: column;\n align-items: flex-start;\n margin: 0;\n border-radius: 0;\n width: 100%;\n }\n`;\n\nconst CustomizeDialogContent = styled.div`\n padding: 15px;\n display: flex;\n flex-direction: column;\n gap: 50px;\n font-size: 12px;\n line-height: 18px;\n font-weight: 400;\n\n .info {\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n h2 {\n font-size: 16px;\n }\n }\n`;\n\nconst { cookiesAcknowleged } = props;\n\nState.init({\n cookieAcceptance: cookiesAcknowleged,\n isDialogOpen: false,\n});\n\nif (state.cookieAcceptance) {\n return \"\";\n}\n\nconst onAccept = ({ all, onlyRequired }) => {\n State.update({ cookieAcceptance: true });\n State.update({ isDialogOpen: false });\n return <AnalyticsCookieConsent all={all} onlyRequired={onlyRequired} />;\n};\n\nconst onCustomize = () => {\n State.update({ isDialogOpen: true });\n};\n\nreturn (\n <Cookies>\n <Widget\n src={`near/widget/DIG.Dialog`}\n props={{\n content: (\n <CustomizeDialogContent>\n <div class=\"info\">\n <div>\n <h2>Necessary Cookies</h2>\n <p>\n These cookies are required for website functionality such as storing your settings and preferences, as\n detailed{\" \"}\n <a href={`near/widget/NearOrg.CookieDetails`} target=\"_blank\">\n here\n </a>\n .\n </p>\n </div>\n <div>\n <h2>Marketing & Analytics Cookies</h2>\n <p>\n We recommend accepting these cookies, which include third-party cookies, for the improvement of user\n experience and discoverability on the B.O.S. These cookies contribute to anonymized statistics which\n are analyzed in aggregate.\n </p>\n </div>\n </div>\n </CustomizeDialogContent>\n ),\n open: state.isDialogOpen,\n enableCloseButton: false,\n actionButtons: (\n <div className=\"buttons\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n label: \"Accept All\",\n variant: \"primary\",\n size: \"small\",\n onClick: () => onAccept({ all: true }),\n }}\n />\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n label: \"Required Only\",\n variant: \"secondary\",\n size: \"small\",\n onClick: () => onAccept({ onlyRequired: true }),\n }}\n />\n </div>\n ),\n contentStyles: \"max-width: 750px;\",\n onOpenChange: (value) => State.update({ isDialogOpen: value }),\n }}\n />\n <p>\n We use our own and third-party cookies on our website to enhance your experience, analyze traffic, and for\n marketing. For more information see our{\" \"}\n <Link href=\"/cookies\" target=\"_blank\">\n Cookie Policy\n </Link>\n .{\" \"}\n </p>\n <div class=\"buttons\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n label: \"Customize\",\n variant: \"secondary\",\n size: \"small\",\n onClick: onCustomize,\n }}\n />\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n label: \"Accept\",\n variant: \"primary\",\n size: \"small\",\n onClick: () => onAccept({ all: true }),\n }}\n />\n </div>\n </Cookies>\n);\n" }, "Entities.Template.EntityList": { "": "const loadItemsQueryApi = VM.require(\"near/widget/Entities.QueryApi.Client\")?.loadItems;\nif (!loadItemsQueryApi) {\n return <p>Loading modules...</p>;\n}\nconst loadItems = props.loadItems ?? loadItemsQueryApi;\n\nconst accountId = props.accountId || context.accountId;\nconst { schema, description, buildQueries, queryName, collection, renderItem, createWidget, createWidgetProps } = props;\n\nconst finalCreateWidget = createWidget ?? `near/widget/Entities.Template.EntityCreate`;\n\nconst [searchKey, setSearchKey] = useState(\"\");\nconst [sort, setSort] = useState(\"\");\nconst [items, setItems] = useState([]);\nconst [totalItems, setTotalItems] = useState(0);\nconst [showCreateModal, setShowCreateModal] = useState(false);\nconst [activeItem, setActiveItem] = useState(null);\n\nconst closeModal = () => {\n setActiveItem(null);\n setShowCreateModal(false);\n};\nconst toggleModal = () => {\n setShowCreateModal(!showCreateModal);\n};\nconst editFunction = (item) => {\n setActiveItem(item);\n setShowCreateModal(true);\n};\nconst onLoad = (newItems, totalItems) => {\n setItems([...items, ...newItems]);\n setTotalItems(totalItems);\n};\nconst loadItemsUseState = () =>\n loadItems(buildQueries(searchKey, sort), queryName, items.length ?? 0, collection, onLoad);\nuseEffect(() => {\n setItems([]);\n loadItemsUseState();\n}, [sort, searchKey]);\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 48px;\n`;\n\nconst Header = styled.div`\n display: flex;\n flex-direction: column;\n gap: 12px;\n`;\n\nconst Search = styled.div`\n width: 246px;\n\n @media (max-width: 500px) {\n width: 100%;\n }\n`;\n\nconst H1 = styled.h1`\n font-weight: 600;\n font-size: 24px;\n line-height: 39px;\n color: #11181c;\n margin: 0;\n`;\n\nconst H2 = styled.h2`\n font-weight: 400;\n font-size: 20px;\n line-height: 24px;\n color: #687076;\n margin: 0;\n`;\n\nconst Text = styled.p`\n margin: 0;\n line-height: 1.5rem;\n color: ${(p) => (p.bold ? \"#11181C\" : \"#687076\")} !important;\n font-weight: ${(p) => (p.bold ? \"600\" : \"400\")};\n font-size: ${(p) => (p.small ? \"12px\" : \"14px\")};\n overflow: ${(p) => (p.ellipsis ? \"hidden\" : \"\")};\n text-overflow: ${(p) => (p.ellipsis ? \"ellipsis\" : \"\")};\n white-space: ${(p) => (p.ellipsis ? \"nowrap\" : \"\")};\n overflow-wrap: anywhere;\n\n b {\n font-weight: 600;\n color: #11181c;\n }\n`;\n\nconst Items = styled.div`\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 24px;\n\n @media (max-width: 1024px) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n @media (max-width: 800px) {\n grid-template-columns: minmax(0, 1fr);\n }\n`;\n\nconst Item = styled.div``;\nconst dialogStyles = {\n maxWidth: \"800px\",\n borderRadius: \"14px\",\n};\nconst ScrollBox = styled.div`\n max-height: 80vh;\n overflow-y: auto;\n`;\n\nreturn (\n <Wrapper className=\"gateway-page-container\">\n <Header>\n <div className=\"row\">\n <div className=\"col\">\n <H2>\n {totalItems} {schema.entityTitle + (totalItems !== 1 ? \"s\" : \"\")}\n </H2>\n {description && <Text>{description}</Text>}\n </div>\n {context.accountId && (\n <div className=\"col-3\">\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n label: \"Create \" + schema.entityTitle,\n onClick: toggleModal,\n iconLeft: \"ph ph-plus-circle\",\n variant: \"primary\",\n fill: \"outline\",\n size: \"small\",\n }}\n />\n <Widget\n src=\"near/widget/DIG.Dialog\"\n props={{\n type: \"dialog\",\n description: (\n <ScrollBox>\n <Widget\n src={finalCreateWidget}\n props={{ schema, onCancel: closeModal, data: activeItem, ...createWidgetProps }}\n />\n </ScrollBox>\n ),\n onOpenChange: closeModal,\n open: showCreateModal,\n contentStyles: dialogStyles,\n actionButtons: <></>,\n }}\n />\n </div>\n )}\n </div>\n </Header>\n\n {items.length > 0 && (\n <InfiniteScroll\n className=\"mb-5\"\n pageStart={0}\n loadMore={loadItemsUseState}\n hasMore={totalItems !== items.length}\n initialLoad={false}\n loader={\n <div className=\"loader\">\n <span className=\"spinner-grow spinner-grow-sm me-1\" role=\"status\" aria-hidden=\"true\" />\n Loading ...\n </div>\n }\n >\n {props.table ? (\n items.map((item) => <div key={`${item.accountId}-${item.widgetName}`}>{renderItem(item, editFunction)}</div>)\n ) : (\n <Items>\n {items.map((item) => (\n <Item key={`${item.accountId}-${item.widgetName}`}>{renderItem(item, editFunction)}</Item>\n ))}\n </Items>\n )}\n </InfiniteScroll>\n )}\n </Wrapper>\n);\n" }, "ComponentsPage": { "": "const limitPerPage = 21;\nlet components = [];\nlet totalApps = 0;\nlet totalComponents = 0;\nconst componentsUrl = \"/near/widget/ComponentsPage\";\nconst searchRequiredTag = state.selectedTab === \"apps\" ? \"app\" : null;\nconst searchPlaceholder = state.selectedTab === \"apps\" ? \"Search Apps\" : \"Search Components\";\n\nState.init({\n currentPage: 0,\n selectedTab: props.tab || \"all\",\n});\n\nif (props.tab && props.tab !== state.selectedTab) {\n State.update({\n selectedTab: props.tab,\n });\n}\n\nconst tagsData = Social.get(\"*/widget/*/metadata/tags/*\", \"final\");\n\nconst data = Social.keys(\"*/widget/*\", \"final\", {\n return_type: \"BlockHeight\",\n});\n\nif (data) {\n const result = [];\n\n Object.keys(data).forEach((accountId) => {\n return Object.keys(data[accountId].widget).forEach((widgetName) => {\n totalComponents++;\n\n if (state.selectedTab === \"apps\") {\n const hasAppTag = tagsData[accountId].widget[widgetName]?.metadata?.tags[\"app\"] === \"\";\n if (!hasAppTag) return;\n totalApps++;\n }\n\n result.push({\n accountId,\n widgetName,\n blockHeight: data[accountId].widget[widgetName],\n });\n });\n });\n\n result.sort((a, b) => b.blockHeight - a.blockHeight);\n components = result.slice(0, state.currentPage * limitPerPage + limitPerPage);\n}\n\nfunction onSearchChange({ result, term }) {\n if (term.trim()) {\n State.update({ searchResults: result || [] });\n } else {\n State.update({ searchResults: null });\n }\n}\n\nconst items = state.searchResults || components;\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 48px;\n`;\n\nconst Header = styled.div`\n display: flex;\n flex-direction: column;\n gap: 12px;\n`;\n\nconst Search = styled.div`\n width: 246px;\n\n @media (max-width: 500px) {\n width: 100%;\n }\n`;\n\nconst H1 = styled.h1`\n font-weight: 600;\n font-size: 32px;\n line-height: 39px;\n color: #11181c;\n margin: 0;\n`;\n\nconst H2 = styled.h2`\n font-weight: 400;\n font-size: 20px;\n line-height: 24px;\n color: #687076;\n margin: 0;\n`;\n\nconst Text = styled.p`\n margin: 0;\n line-height: 1.5rem;\n color: ${(p) => (p.$bold ? \"#11181C\" : \"#687076\")} !important;\n font-weight: ${(p) => (p.$bold ? \"600\" : \"400\")};\n font-size: ${(p) => (p.$small ? \"12px\" : \"14px\")};\n overflow: ${(p) => (p.$ellipsis ? \"hidden\" : \"\")};\n text-overflow: ${(p) => (p.$ellipsis ? \"ellipsis\" : \"\")};\n white-space: ${(p) => (p.$ellipsis ? \"nowrap\" : \"\")};\n overflow-wrap: anywhere;\n\n b {\n font-weight: 600;\n color: #11181c;\n }\n`;\n\nconst Items = styled.div`\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 24px;\n\n @media (max-width: 1024px) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n @media (max-width: 800px) {\n grid-template-columns: minmax(0, 1fr);\n }\n`;\n\nconst Item = styled.div``;\n\nconst Button = styled.button`\n display: block;\n width: 100%;\n padding: 8px;\n height: 32px;\n background: #fbfcfd;\n border: 1px solid #d7dbdf;\n border-radius: 50px;\n font-weight: 600;\n font-size: 12px;\n line-height: 15px;\n text-align: center;\n cursor: pointer;\n color: #11181c !important;\n margin: 0;\n\n &:hover,\n &:focus {\n background: #ecedee;\n text-decoration: none;\n outline: none;\n }\n\n span {\n color: #687076 !important;\n }\n`;\n\nconst Tabs = styled.div`\n display: flex;\n height: 48px;\n border-bottom: 1px solid #eceef0;\n margin-bottom: -24px;\n overflow: auto;\n scroll-behavior: smooth;\n\n @media (max-width: 1024px) {\n background: #f8f9fa;\n border-top: 1px solid #eceef0;\n margin-left: calc(var(--gateway-page-container-padding-x) * -1);\n margin-right: calc(var(--gateway-page-container-padding-x) * -1);\n\n > * {\n flex: 1;\n }\n }\n`;\n\nconst TabsButton = styled(\"Link\")`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-weight: 600;\n font-size: 12px;\n padding: 0 12px;\n position: relative;\n color: ${(p) => (p.$selected ? \"#11181C\" : \"#687076\")};\n background: none;\n border: none;\n outline: none;\n text-align: center;\n text-decoration: none !important;\n\n &:hover {\n color: #11181c;\n }\n\n &::after {\n content: \"\";\n display: ${(p) => (p.$selected ? \"block\" : \"none\")};\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: #59e692;\n }\n`;\n\nreturn (\n <Wrapper className=\"gateway-page-container\">\n <Header>\n {state.selectedTab === \"apps\" && (\n <>\n <H1>{totalApps} Apps</H1>\n <H2>Discover the latest apps from the NEAR community.</H2>\n </>\n )}\n\n {state.selectedTab !== \"apps\" && (\n <>\n <H1>{totalComponents} Components</H1>\n <H2>Discover the latest components from the NEAR community.</H2>\n </>\n )}\n </Header>\n\n <Search>\n <Widget\n src=\"near/widget/ComponentSearch\"\n props={{\n limit: 21,\n onChange: onSearchChange,\n placeholder: searchPlaceholder,\n filterTag: searchRequiredTag,\n }}\n />\n </Search>\n\n {!state.searchResults && (\n <Tabs>\n <TabsButton href={`${componentsUrl}?tab=all`} $selected={state.selectedTab === \"all\"}>\n All\n </TabsButton>\n\n <TabsButton href={`${componentsUrl}?tab=apps`} $selected={state.selectedTab === \"apps\"}>\n Apps\n </TabsButton>\n </Tabs>\n )}\n\n {state.searchResults?.length === 0 && <Text>No components matched your search.</Text>}\n\n {items.length > 0 && (\n <Items>\n {items.map((component, i) => (\n <Item key={component.accountId + component.widgetName}>\n <Widget\n src=\"near/widget/ComponentCard\"\n props={{\n src: `${component.accountId}/widget/${component.widgetName}`,\n blockHeight: component.blockHeight,\n }}\n />\n </Item>\n ))}\n </Items>\n )}\n\n {!state.searchResults && (\n <Button type=\"button\" onClick={() => State.update({ currentPage: state.currentPage + 1 })}>\n Load More\n </Button>\n )}\n </Wrapper>\n);\n" }, "NearOrg.Notifications.Notifications": { "": "let {\n manageNotification,\n handleTurnOn,\n getNotificationLocalStorage,\n handleOnCancelBanner,\n accountId,\n showLimit,\n showInBox,\n bannerBorderRadius,\n iOSDevice,\n iOSVersion,\n recomendedIOSVersion,\n moderatorAccount,\n} = props;\n\nshowInBox = showInBox ?? false;\n\nconst Header = styled.div`\n display: flex;\n padding: ${(props) => (props.showInBox ? \"16px 16px 16px 24px\" : \"24px 16px 24px 16px\")};\n align-items: center;\n align-self: stretch;\n`;\n\nconst Title = styled.div`\n flex: 1 0 0;\n font: var(--text-xl);\n color: var(--sand12);\n font-weight: 500;\n`;\n\nconst Settings = styled(\"Link\")`\n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n border-radius: 50px;\n border: 1px solid var(--sand6);\n background: var(--sand1);\n`;\n\nconst Card = styled.div`\n display: flex;\n flex-direction: column;\n max-width: 592px;\n margin: ${(props) => (props.showInBox ? \"\" : \"0 auto\")};\n\n .notification-item {\n &:first-child {\n border-top: none;\n }\n }\n`;\n\nconst NotificationsWrapper = styled.div`\n // hide default button from IndexFeed in favor of custom button\n .btn.btn-primary {\n display: none;\n }\n`;\n\nconst bannerNotNowTS = getNotificationLocalStorage()?.bannerNotNowTS;\nconst permission = getNotificationLocalStorage()?.permission;\n\nState.init({\n showBanner: !bannerNotNowTS && !permission,\n});\n\nconst checkShowBanner = () => {\n const bannerNotNowTS = getNotificationLocalStorage()?.bannerNotNowTS;\n const permission = getNotificationLocalStorage()?.permission;\n State.update({ showBanner: !bannerNotNowTS && !permission });\n};\n\nreturn (\n <Card className={showInBox ? \"\" : \"gateway-page-container\"} showInBox={showInBox}>\n <Header showInBox={showInBox}>\n <Title>Notifications</Title>\n <Widget\n src=\"near/widget/DIG.Button\"\n props={{\n href: \"/notifications-settings\",\n icon: \"ph-bold ph-gear-six\",\n variant: \"secondary\",\n fill: \"outline\",\n }}\n />\n </Header>\n {state.showBanner && (\n <Widget\n src=\"near/widget/NearOrg.Notifications.Banner\"\n props={{\n handleTurnOn: async () => {\n handleTurnOn(accountId, checkShowBanner);\n },\n handleOnCancel: () => {\n handleOnCancelBanner();\n checkShowBanner();\n },\n radius: bannerBorderRadius,\n iOSDevice,\n iOSVersion,\n recomendedIOSVersion,\n }}\n />\n )}\n\n <NotificationsWrapper>\n <Widget\n src=\"near/widget/NearOrg.Notifications.NotificationsMiddleware\"\n props={{ showLimit, manageNotification, permission, moderatorAccount }}\n />\n </NotificationsWrapper>\n </Card>\n);\n" }, "ComponentDetailsPage": { "": "let { src, tab, highlightComment } = props;\n\nconst [selectedTab, setSelectedTab] = useState(props.tab ?? \"source\");\n\nconst detailsUrl = `/near/widget/ComponentDetailsPage?src=${src}`;\nconst [accountId, widget, widgetName] = src.split(\"/\");\nconst existsData = Social.keys(`${accountId}/widget/${widgetName}`);\nconst exists = !existsData || Object.keys(existsData).length > 0;\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 32px;\n padding-bottom: 48px;\n`;\n\nconst ContentWrapper = styled.div`\n display: grid;\n grid-template-columns: minmax(0, 1fr) 260px;\n gap: 32px;\n\n @media (max-width: 1200px) {\n grid-template-columns: minmax(0, 1fr);\n gap: 24px;\n }\n`;\n\nconst Text = styled.p`\n margin: 0;\n font-size: 14px;\n line-height: 20px;\n color: ${(p) => (p.$bold ? \"#11181C\" : \"#687076\")};\n font-weight: ${(p) => (p.$bold ? \"600\" : \"400\")};\n font-size: ${(p) => (p.$small ? \"12px\" : \"14px\")};\n\n i {\n margin-right: 4px;\n }\n`;\n\nconst Tabs = styled.div`\n display: flex;\n height: 48px;\n border-bottom: 1px solid #eceef0;\n overflow: auto;\n scroll-behavior: smooth;\n\n @media (max-width: 995px) {\n background: #f8f9fa;\n border-top: 1px solid #eceef0;\n margin: 0 -12px 0;\n\n > * {\n flex: 1;\n }\n }\n`;\n\nconst TabsButton = styled(\"Link\")`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-weight: 600;\n font-size: 12px;\n padding: 0 12px;\n position: relative;\n color: ${(p) => (p.$selected ? \"#11181C\" : \"#687076\")};\n background: none;\n border: none;\n outline: none;\n text-align: center;\n text-decoration: none !important;\n\n &:hover {\n color: #11181c;\n }\n\n &::after {\n content: \"\";\n display: ${(p) => (p.$selected ? \"block\" : \"none\")};\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: #59e692;\n }\n\n > span {\n margin-right: 8px;\n }\n\n @media (max-width: 768px) {\n flex-direction: column;\n align-items: center;\n\n > span {\n margin-right: 0;\n margin-bottom: 8px;\n }\n }\n`;\n\nconst Icon = styled.i`\n font-size: 15px;\n fill: currentColor;\n padding-right: 5px;\n`;\n\nif (!exists) {\n return (\n <>\n <Text $bold>Error</Text>\n <Text>Could not find: {src}</Text>\n </>\n );\n}\n\nif (tab && tab !== selectedTab) {\n setSelectedTab(tab);\n}\n\nreturn (\n <Wrapper className=\"gateway-page-container\">\n <Widget\n src=\"near/widget/ComponentSummary\"\n props={{\n primaryAction: \"open\",\n size: \"large\",\n showTags: true,\n descMaxWords: componentDescMaxWords,\n src,\n }}\n />\n\n <Tabs>\n <TabsButton href={`${detailsUrl}&tab=source`} $selected={selectedTab === \"source\"}>\n <Icon className=\"ph ph-code\" />\n Source & Preview\n </TabsButton>\n <TabsButton href={`${detailsUrl}&tab=about`} $selected={selectedTab === \"about\"}>\n <Icon className=\"ph ph-file-text\" />\n Read.me\n </TabsButton>\n <TabsButton href={`${detailsUrl}&tab=discussion`} $selected={selectedTab === \"discussion\"}>\n <Icon className=\"ph ph-chat-circle-text\" />\n Discussion\n </TabsButton>\n </Tabs>\n\n <ContentWrapper>\n <Widget src=\"near/widget/ComponentDetails.Content\" props={{ src, selectedTab, highlightComment }} />\n\n <Widget src=\"near/widget/ComponentDetails.Sidebar\" props={{ src, selectedTab, highlightComment }} />\n </ContentWrapper>\n </Wrapper>\n);\n" }, "Gateway.Home": { "": "const Wrapper = styled.div`\n --section-gap: 20px;\n --text-hero: 500 56px/1 \"FK Grotesk\", \"Mona Sans\", sans-serif;\n gap: var(--section-gap);\n display: flex;\n flex-direction: column;\n max-width: 960px;\n`;\n\nconst H1 = styled.h1`\n font: var(--text-hero);\n color: var(--black);\n margin: 0;\n padding-top: 24px;\n\n @media (max-width: 900px) {\n padding-top: 0;\n font-size: 36px;\n }\n`;\n\nconst Text = styled.p`\n font: var(--${(p) => p.$size ?? \"text-base\"});\n font-weight: ${(p) => p.$fontWeight} !important;\n color: var(--${(p) => p.$color ?? \"sand12\"});\n margin: 0;\n letter-spacing: ${(p) => p.$letterSpacing};\n\n display: -webkit-box;\n overflow: hidden;\n -webkit-line-clamp: ${(p) => p.$overflowLines ?? \"2\"};\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n word-break: break-word;\n\n @media (max-width: 900px) {\n font: var(--${(p) => p.$mobileSize ?? p.$size ?? \"text-base\"});\n }\n\n ${(p) =>\n p.$loading &&\n `\n border-radius: 2px;\n background: linear-gradient(to right, var(--sand10) 33%, var(--sand9) 66%, var(--sand10) 99%);\n animation: waveAnimation 5s linear infinite;\n min-width: 25%;\n min-height: 10px;\n `}\n\n @keyframes waveAnimation {\n 0% {\n background-position: 0px 0;\n }\n 100% {\n background-position: 100em 0;\n }\n }\n`;\n\nconst Flex = styled.div`\n display: flex;\n gap: ${(p) => p.$gap};\n align-items: ${(p) => p.$alignItems};\n justify-content: ${(p) => p.$justifyContent};\n flex-direction: ${(p) => p.$direction ?? \"row\"};\n flex-wrap: ${(p) => p.$wrap ?? \"nowrap\"};\n\n ${(p) =>\n p.$mobileStack &&\n `\n @media (max-width: 900px) {\n flex-direction: column;\n }\n `}\n\n @media (max-width: 900px) {\n gap: ${(p) => p.$mobileGap ?? p.$gap};\n align-items: ${(p) => p.$mobileAlignItems ?? p.$alignItems};\n }\n`;\n\nconst Grid = styled.div`\n display: grid;\n gap: ${(p) => p.$gap};\n grid-template-columns: ${(p) => p.$columns};\n align-items: ${(p) => p.$alignItems};\n row-gap: ${(p) => p.$rowGap};\n\n @media (max-width: 900px) {\n grid-template-columns: ${(p) => p.$mobileColumns ?? \"1fr\"};\n gap: ${(p) => p.$mobileGap ?? p.$gap};\n row-gap: ${(p) => p.$mobileRowGap ?? p.$rowGap};\n }\n`;\n\nconst Section = styled.div`\n position: relative;\n\n @media (max-width: 900px) {\n padding: 0 14px;\n }\n`;\n\nconst Container = styled.div`\n display: flex;\n max-width: 1224px;\n margin: 0 auto;\n gap: ${(p) => p.$gap ?? \"var(--section-gap)\"};\n flex-direction: column;\n align-items: ${(p) => (p.$center ? \"center\" : undefined)};\n justify-content: ${(p) => (p.$center ? \"center\" : undefined)};\n text-align: ${(p) => (p.$center ? \"center\" : undefined)};\n`;\n\nconst Pattern = styled.div`\n display: flex;\n width: 100%;\n background: ${(p) => p.$background};\n border-radius: ${(p) => p.$borderRadius ?? \"24px\"};\n box-shadow: ${(p) => p.$shadow};\n border: ${(p) => p.$border};\n`;\n\nconst PatternContent = styled.div`\n padding: ${(p) => p.$padding};\n width: 100%;\n\n @media (max-width: 900px) {\n padding: ${(p) => p.$mobilePadding ?? p.$padding};\n }\n`;\n\nconst ButtonLinkWrapper = styled(\"Link\")`\n all: unset;\n\n display: flex;\n gap: ${(p) => p.$gap};\n align-items: ${(p) => p.$alignItems};\n padding: ${(p) => p.$padding};\n border: 1px solid transparent;\n border-radius: 6px;\n transition: all 200ms;\n pointer-events: ${(p) => p.$pointerEvents};\n\n @media (max-width: 900px) {\n padding: 0;\n }\n\n &:hover {\n cursor: pointer;\n text-decoration: none;\n\n @media (min-width: 901px) {\n background: ${(p) => !p.$noHover && \"var(--violet3)\"};\n border-color: ${(p) => !p.$noHover && \"var(--violet6)\"};\n }\n\n & p {\n color: ${(p) => !p.$noHover && \"var(--violet12)\"};\n }\n }\n\n &:focus-within {\n background: ${(p) => !p.$noHover && \"var(--violet3)\"};\n border-color: ${(p) => !p.$noHover && \"var(--violet6)\"};\n box-shadow: ${(p) => !p.$noHover && \"0 0 0 4px var(--violet4)\"};\n\n & p {\n color: ${(p) => !p.$noHover && \"var(--violet12)\"};\n }\n }\n`;\n\nconst IconWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: ${(p) => p.$size};\n height: ${(p) => p.$size};\n background: ${(p) => p.$background};\n border-radius: ${(p) => p.$borderRadius};\n border: ${(p) => p.$border};\n padding: ${(p) => p.$padding};\n filter: ${(p) => p.$filter};\n transition: all 200ms;\n\n ${(p) =>\n p.$loading &&\n `\n background: linear-gradient(to right, var(--sand10) 33%, var(--sand9) 66%, var(--sand10) 99%);\n background-position: center;\n animation: waveAnimation 5s linear infinite;\n `}\n\n @keyframes waveAnimation {\n 0% {\n background-position: 0px 0;\n }\n 100% {\n background-position: 100em 0;\n }\n }\n\n ${ButtonLinkWrapper}:hover & {\n border-color: var(--violet6);\n\n & > i {\n color: var(--violet10);\n }\n }\n\n ${ButtonLinkWrapper}:focus-within & {\n border-color: var(--violet6);\n\n & > i {\n color: var(--violet10);\n }\n }\n`;\n\nconst IconCover = styled.div`\n width: 100%;\n height: 100%;\n background-image: url(${(p) => p.$url});\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n border-radius: inherit;\n`;\n\nconst TextLink = styled(\"Link\")`\n all: unset;\n\n leading-trim: both;\n text-edge: cap;\n font-feature-settings: \"salt\" on;\n font: var(--text-base);\n color: var(--violet8);\n text-decoration: underline;\n cursor: pointer;\n letter-spacing: 0.32px;\n`;\n\nconst TRENDING_APPS_LIMIT = 6;\nconst dummyData = {\n slug: \"\",\n profile: {\n name: \"\",\n tagline: \"\",\n image: {\n url: \"\",\n },\n },\n};\nconst prefillData = Array(TRENDING_APPS_LIMIT).fill(dummyData);\n\nconst nearCatalogApi = \"https://nearcatalog.xyz/wp-json/nearcatalog/v1\";\nconst topRating = \"projects-by-category?cid=trending\";\nconst [topRatingApps, setTopRatingApps] = useState(prefillData);\nconst [loading, setLoading] = useState(true);\n\nconst fetchTopRatingApps = () => {\n asyncFetch(`${nearCatalogApi}/${topRating}`)\n .then((res) => {\n const data = res.body;\n const dataList = Object.keys(data)\n .slice(0, TRENDING_APPS_LIMIT)\n .map((key) => data[key]);\n setTopRatingApps(dataList);\n setLoading(false);\n })\n .catch((err) => console.log(\"Error during fetch the list of top rating apps: \", err));\n};\n\nuseEffect(() => {\n fetchTopRatingApps();\n return () => {\n setTopRatingApps(prefillData);\n };\n}, []);\n\nconst Icon = ({ className, fontSize, ...forwardedProps }) => (\n <IconWrapper {...forwardedProps}>\n <i className={className} style={{ fontSize, flexShrink: 0 }} />\n </IconWrapper>\n);\n\nconst RoundIcon = ({ url, ...forwardedProps }) => (\n <IconWrapper {...forwardedProps}>\n <IconCover $url={url} />\n </IconWrapper>\n);\n\nconst ButtonLink = ({ href, target, icon, title, text }) => (\n <ButtonLinkWrapper href={href} target={target} $gap=\"24px\" $padding=\"24px\">\n <Icon\n className={icon}\n $size=\"40px\"\n $background=\"var(--sand1)\"\n $border=\"1px solid var(--sand6)\"\n $borderRadius=\"4px\"\n $fontSize=\"18px\"\n />\n <Flex $direction=\"column\" $gap=\"16px\">\n <Flex $gap=\"8px\" $alignItems=\"center\">\n <Text $fontWeight=\"600\" $letterSpacing=\"0.28px\">\n {title}\n </Text>\n <Icon className=\"ph ph-caret-right\" $fontSize=\"16px\" />\n </Flex>\n <Text $size=\"text-s\" $letterSpacing=\"0.28px\">\n {text}\n </Text>\n </Flex>\n </ButtonLinkWrapper>\n);\n\nconst Card = ({ title, text, children }) => (\n <Pattern\n $background=\"var(--violet1)\"\n $borderRadius=\"24px\"\n $border=\"1px solid var(--violet2)\"\n $shadow=\"0px 0px 0px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px 0px rgba(0, 0, 0, 0.06)\"\n >\n <PatternContent $padding=\"24px\">\n <Flex $direction=\"column\" $gap=\"56px\" $mobileGap=\"48px\">\n <Flex $direction=\"column\" $gap=\"24px\">\n <Text $size=\"text-xl\" $fontWeight=\"500\">\n {title}\n </Text>\n <Text $color=\"sand11\" $letterSpacing=\"0.32px\">\n {text}\n </Text>\n </Flex>\n {children}\n </Flex>\n </PatternContent>\n </Pattern>\n);\n\nconst TrendingApp = ({ href, url, name, tagline, loading }) => (\n <ButtonLinkWrapper\n href={href}\n target=\"_blank\"\n $gap=\"12px\"\n $alignItems=\"center\"\n $noHover\n title={tagline}\n aria-disabled={loading}\n $pointerEvents={loading ? \"none\" : \"auto\"}\n >\n <RoundIcon\n url={url}\n $noHover\n $size=\"60px\"\n $padding=\"5px\"\n $borderRadius=\"50%\"\n $background=\"var(--white)\"\n $filter=\"drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.06)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.06))\"\n $loading={loading}\n />\n <Text $size=\"text-s\" $fontWeight=\"600\" $overflowLines=\"2\" $letterSpacing=\"0.28px\" $loading={loading}>\n {name}\n </Text>\n </ButtonLinkWrapper>\n);\n\nreturn (\n <Wrapper className=\"gateway-page-container\">\n <Section>\n <Container>\n <Pattern $background=\"linear-gradient(264deg, #CFCCF5 0%, #A39CEC 99.35%)\" $borderRadius=\"16px\">\n <PatternContent $padding=\"55px 24px 55px 48px\" $mobilePadding=\"48px 20px\">\n <Grid $gap=\"24px\" $columns=\"1fr 1fr\">\n <Flex $direction=\"column\" $gap=\"32px\">\n <H1>Welcome</H1>\n <Text $size=\"text-xl\" $mobileSize=\"text-l\" style={{ maxWidth: \"385px\" }}>\n Get building right away with easy to use developer tools.\n </Text>\n </Flex>\n <Flex $direction=\"column\" $gap=\"16px\" $mobileGap=\"48px\">\n <ButtonLink\n href=\"https://app.jutsu.ai\"\n target=\"_blank\"\n icon=\"ph-bold ph-plus\"\n title=\"Create a Project\"\n text=\"Start tinkering with Jutsu.ai using a template or start a blank project.\"\n />\n <ButtonLink\n href=\"https://near.org/components\"\n icon=\"ph-bold ph-git-fork\"\n title=\"Fork a Project\"\n text=\"Get started by forking a component or app from NEAR's open source community.\"\n />\n </Flex>\n </Grid>\n </PatternContent>\n </Pattern>\n </Container>\n </Section>\n\n <Section>\n <Container>\n <Grid $gap=\"24px\" $mobileGap=\"20px\" $columns=\"1fr 1fr\">\n <Card\n title=\"Trending Apps\"\n text={\n <>\n <TextLink href=\"https://near.org/applications\">Explore</TextLink> more of the apps built by the\n NEAR community.\n </>\n }\n >\n <Grid $gap=\"20px\" $rowGap=\"24px\" $columns=\"1fr 1fr\" $mobileColumns=\"1fr 1fr\">\n {topRatingApps.map((app) => (\n <TrendingApp\n key={app.slug}\n href={`https:/near.org/nearcatalog.near/widget/Index?id=${app.slug}`}\n url={app.profile.image.url}\n name={app.profile.name}\n tagline={app.profile.tagline}\n loading={loading}\n />\n ))}\n </Grid>\n </Card>\n <Card\n title=\"Documentation &amp; Learning\"\n text=\"Dive into the docs or get started with a tutorial from Jutsu.ai\"\n >\n <Flex $direction=\"column\" $gap=\"16px\" $mobileGap=\"48px\">\n <ButtonLink\n href=\"https://docs.near.org\"\n target=\"_blank\"\n icon=\"ph-bold ph-book-open-text\"\n title=\"Documentation\"\n text=\"Learn key concepts and build with confidence.\"\n />\n <ButtonLink\n href=\"https://app.jutsu.ai/learn\"\n target=\"_blank\"\n icon=\"ph-bold ph-video\"\n title=\"Lessons\"\n text=\"Try Jutsu.ai tutorials to build a decentralized frontend or a basic smart contract.\"\n />\n </Flex>\n </Card>\n </Grid>\n </Container>\n </Section>\n </Wrapper>\n);\n" } } } } }