From 6fbbc17811d2e0b37167ad36a3822b89e0d0e7c2 Mon Sep 17 00:00:00 2001
From: gagdiez <gagdiez.c@gmail.com>
Date: Fri, 22 Nov 2024 15:30:00 +0100
Subject: [PATCH] fix: styles

---
 src/components/communities/faqs.tsx           |  7 +-
 src/components/sidebar-navigation/Sidebar.tsx |  4 +-
 src/hooks/useCommunities.ts                   | 37 ++++++--
 src/pages/communities.tsx                     | 86 +++++++++----------
 4 files changed, 73 insertions(+), 61 deletions(-)

diff --git a/src/components/communities/faqs.tsx b/src/components/communities/faqs.tsx
index 7683773bb..412777f26 100644
--- a/src/components/communities/faqs.tsx
+++ b/src/components/communities/faqs.tsx
@@ -36,11 +36,8 @@ function FAQS() {
       question: 'Where can I find funding for my project?',
       answer: (
         <>
-          <Link href={urls.devHub}>DevHub</Link>, powered by DevDAO, is a central platform offering funding
-          opportunities for NEAR ecosystem projects aimed at fostering a self-sufficient developer community. We
-          evaluate proposals based on their alignment with our goals, execution capabilities, and clear use of funds. To
-          initiate the <Link href={urls.getFunding}> funding process</Link> for your project, engage with the community
-          on DevHub&apos;s activity feed.
+          You can find information on grants and funding opportunities on the{' '}
+          <Link href={'https://near.org/ecosystem/get-funding'}> main NEAR portal </Link>.
         </>
       ),
     },
diff --git a/src/components/sidebar-navigation/Sidebar.tsx b/src/components/sidebar-navigation/Sidebar.tsx
index b04990a25..0bc0af120 100644
--- a/src/components/sidebar-navigation/Sidebar.tsx
+++ b/src/components/sidebar-navigation/Sidebar.tsx
@@ -149,10 +149,10 @@ export const Sidebar = () => {
               </S.NavigationItem>
             </Tooltip>
 
-            <Tooltip content="Support & Communities" side="right" disabled={tooltipsDisabled}>
+            <Tooltip content="Community Support" side="right" disabled={tooltipsDisabled}>
               <S.NavigationItem $active={isNavigationItemActive('/communities')} $type="featured" href="/communities">
                 <i className="ph-bold ph-question" />
-                <span>Support & Communities</span>
+                <span>Community Support</span>
               </S.NavigationItem>
             </Tooltip>
           </S.Stack>
diff --git a/src/hooks/useCommunities.ts b/src/hooks/useCommunities.ts
index 0602c1cfe..fecd97030 100644
--- a/src/hooks/useCommunities.ts
+++ b/src/hooks/useCommunities.ts
@@ -1,4 +1,18 @@
 const featuredCommunities = [
+  {
+    icon: 'https://ipfs.near.social/ipfs/bafkreibysr2mkwhb4j36h2t7mqwhynqdy4vzjfygfkfg65kuspd2bawauu',
+    name: 'NEAR Dev',
+    summary: 'An open community for developers',
+    accountId: 'nearai.community.devhub.near',
+    telegram: 'nearaialpha',
+  },
+  {
+    icon: 'https://ipfs.near.social/ipfs/bafkreihgxkxuvj67b7vwys5di2326vx7sdvw5jjswv2xqlyxhelhha52ra',
+    name: 'NEAR AI',
+    summary: 'A community for AI enthusiasts',
+    accountId: 'nearai.community.devhub.near',
+    telegram: 'nearaialpha',
+  },
   {
     icon: 'https://ipfs.near.social/ipfs/bafkreibi2p7h2jailau6fwt4zf2xdifsqhc4dabsowmngzswpzr7r4ikiq',
     name: 'Chain Abstraction',
@@ -6,6 +20,20 @@ const featuredCommunities = [
     accountId: 'chain-abstraction.community.devhub.near',
     telegram: 'chain_abstraction',
   },
+  {
+    icon: 'https://ipfs.near.social/ipfs/bafkreidhehq7za5btjegq5u2rw5jmw2kygef2776d6qcpkopaa3nphg5pm',
+    name: 'Tooling',
+    summary: 'Supporting our tooling ecosystem',
+    accountId: 'tooling.community.devhub.near',
+    telegram: 'NEAR_Tools_Community_Group',
+  },
+  {
+    icon: 'https://ipfs.near.social/ipfs/bafkreib45plxkuy6wcefachijuq2dm4jnfs4236yhfleehqboeeljpmxje',
+    name: 'Docs',
+    summary: 'A space to talk about all NEAR docs',
+    accountId: 'docs.community.devhub.near',
+    telegram: 'neardocscg',
+  },
   {
     icon: 'https://ipfs.near.social/ipfs/bafkreicfcszhhmiw6bq5fvh7ebfqhmodplldxjve7id4mi67iykz67qehi',
     name: 'Build DAO',
@@ -13,13 +41,6 @@ const featuredCommunities = [
     accountId: 'build.community.devhub.near',
     telegram: '+bQmGfDqcAT9iYTcx',
   },
-  {
-    icon: 'https://ipfs.near.social/ipfs/bafkreidhehq7za5btjegq5u2rw5jmw2kygef2776d6qcpkopaa3nphg5pm',
-    name: 'Tooling',
-    summary: 'Supporting the ongoing innovation of developers tooling.',
-    accountId: 'tooling.community.devhub.near',
-    telegram: 'NEAR_Tools_Community_Group',
-  },
   {
     icon: 'https://ipfs.near.social/ipfs/bafkreihdu5bsnvxoxi62j24ljd4o5gfebtgtn6gaj3n4ebq23qoprn7tou',
     name: 'Wallet Builders',
@@ -45,7 +66,7 @@ const featuredCommunities = [
 
 const urls = {
   devHub: 'neardevhub.org',
-  discord: 'http://near.chat',
+  discord: 'https://near.chat',
   discourse: 'https://gov.near.org',
   docs: 'https://docs.near.org',
   getFunding: 'https://near.org/ecosystem/get-funding',
diff --git a/src/pages/communities.tsx b/src/pages/communities.tsx
index c4218d06c..e5eced76f 100644
--- a/src/pages/communities.tsx
+++ b/src/pages/communities.tsx
@@ -62,12 +62,6 @@ const ContactUsPage: NextPageWithLayout = () => {
   return (
     <Section grow="available">
       <Flex stack gap="l" style={{ padding: deviceType === 'mobile' ? '0' : '0 var(--gap-l)' }}>
-        <Flex style={{ padding: '24px 0' }}>
-          <Text size="text-3xl" weight="500">
-            Get Support
-          </Text>
-        </Flex>
-
         <Grid columns="2fr 1fr" gap="m" columnsTablet="1fr">
           <Card background="green5" style={{ padding: '48px 28px', boxShadow: 'none' }}>
             <Text size="text-l" weight="700">
@@ -137,55 +131,55 @@ const ContactUsPage: NextPageWithLayout = () => {
           </Flex>
         </Grid>
 
-        <Flex style={{ padding: '24px 0' }}>
+        <Flex stack gap="l" style={{ paddingTop: '2rem' }}>
           <Text size="text-3xl" weight="500">
-            Join the communities
+            Join a Community
           </Text>
-        </Flex>
-        <Grid columns="1fr 1fr 1fr" gap="m" columnsTablet="1fr 1fr" columnsPhone="1fr">
-          {featuredCommunities.map((community) => (
-            <Card
-              key={community.name}
-              href={`https://t.me/${community.telegram}`}
-              target="_blank"
-              style={{
-                padding: '16px 8px',
-                border: 0,
-                textDecoration: 'none',
-              }}
-            >
-              <Flex
-                align="center"
+          <Grid columns="1fr 1fr 1fr" gap="m" columnsTablet="1fr 1fr" columnsPhone="1fr">
+            {featuredCommunities.map((community) => (
+              <Card
+                key={community.name}
+                href={`https://t.me/${community.telegram}`}
+                target="_blank"
                 style={{
-                  height: '100%',
-                  width: '100%',
-                  gap: '12px',
+                  padding: '16px',
+                  border: 0,
+                  textDecoration: 'none',
                 }}
               >
-                <Image
-                  src={community.icon}
-                  alt={community.name}
-                  width={60}
-                  height={60}
-                  style={{ borderRadius: '50%' }}
-                />
-                <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
-                  <Text size="text-l" style={{ marginBottom: '4px' }}>
-                    {community.name}
-                  </Text>
-                  <Text size="text-s">{community.summary}</Text>
-                </div>
-              </Flex>
-            </Card>
-          ))}
-        </Grid>
+                <Flex
+                  align="center"
+                  style={{
+                    height: '100%',
+                    width: '100%',
+                    gap: '12px',
+                  }}
+                >
+                  <Image
+                    src={community.icon}
+                    alt={community.name}
+                    width={60}
+                    height={60}
+                    style={{ borderRadius: '50%' }}
+                  />
+                  <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+                    <Text size="text-l" style={{ marginBottom: '4px' }}>
+                      {community.name}
+                    </Text>
+                    <Text size="text-s">{community.summary}</Text>
+                  </div>
+                </Flex>
+              </Card>
+            ))}
+          </Grid>
+        </Flex>
 
-        <Flex style={{ padding: '24px 0' }}>
+        <Flex stack gap="l" style={{ paddingTop: '2rem' }}>
           <Text size="text-3xl" weight="500">
-            FAQ
+            Frequent Asked Questions
           </Text>
+          <FAQS />
         </Flex>
-        <FAQS />
       </Flex>
     </Section>
   );