Adds community section to tangle-website (#1102)

Co-authored-by: Dustin Brickwood <[email protected]>

apps/tangle-website/src/components/Navbar.tsx

@@ -23,10 +23,7 @@ const isNavItem = (item: any): item is NavItem => {
 const navItems: Array<NavItem | { [label: string]: Array<NavItem> }> = [
   {
     label: 'community',
-    url: '#',
-    onClick: (e) => {
-      e.preventDefault();
-    },
+    url: '#community',
     isInternal: true,
   },
   { label: 'docs', url: TANGLE_NETWORK_DOCS_URL },

apps/tangle-website/src/components/sections/CommunitySection.tsx

@@ -0,0 +1,96 @@
+import {
+  Common2Icon,
+  DiscordFill,
+  DocumentationIcon,
+  GithubFill,
+  TelegramFill,
+  TwitterFill,
+} from '@webb-tools/icons';
+import { IconBase } from '@webb-tools/icons/types';
+import {
+  Button,
+  Typography,
+  WebsiteCommunity,
+} from '@webb-tools/webb-ui-components';
+import { NextSeo } from 'next-seo';
+import { SectionDescription } from '../SectionDescription';
+
+type LinksType = {
+  Icon: (props: IconBase) => JSX.Element;
+  name: string;
+  href: string;
+  description: string;
+};
+
+const links: Array<LinksType> = [
+  {
+    name: 'Github',
+    Icon: GithubFill,
+    href: 'https://github.com/webb-tools',
+    description: 'Explore the source code and get involved',
+  },
+  {
+    name: 'Documentation',
+    Icon: DocumentationIcon,
+    href: 'https://docs.webb.tools/docs',
+    description: 'Learn how it works under the hood',
+  },
+  {
+    name: 'Discord',
+    Icon: DiscordFill,
+    href: 'https://discord.com/invite/cv8EfJu3Tn',
+    description: 'Come chat about all things Webb',
+  },
+  {
+    name: 'Telegram',
+    Icon: TelegramFill,
+    href: 'https://t.me/webbprotocol',
+    description: 'Have question, join us on Telegram',
+  },
+  {
+    Icon: Common2Icon,
+    name: 'Commonwealth',
+    href: 'https://commonwealth.im/webb',
+    description: 'Join the conversation on Commonwealth',
+  },
+  {
+    name: 'Twitter',
+    Icon: TwitterFill,
+    href: 'https://twitter.com/webbprotocol',
+    description: 'Say hi on the Webb Twitter',
+  },
+];
+
+export const CommunitySection = () => {
+  return (
+    <>
+      <NextSeo title="Community" />
+
+      <section
+        className="py-[60px] w-full flex items-center justify-center"
+        id="community"
+      >
+        <div className="max-w-[900px]">
+          <Typography
+            variant="label"
+            className="text-center text-purple-70 uppercase block"
+          >
+            Get involved
+          </Typography>
+
+          <Typography variant="mkt-h2" className="text-center mt-1">
+            Tangle Community
+          </Typography>
+
+          <SectionDescription className="text-center mt-[16px] px-3 lg:px-0">
+            The Tangle network doubles as hub for routing cross chain messages
+            and for anchoring itself as a bridge endpoint for cross chain
+            zero-knowledge applications.
+          </SectionDescription>
+
+          <WebsiteCommunity links={links} />
+        </div>
+      </section>
+    </>
+  );
+};

apps/tangle-website/src/components/sections/index.ts

@@ -2,3 +2,4 @@ export * from './GovernanceSystemSection';
 export * from './HeroSection';
 export * from './FeaturesSection';
 export * from './IntroducingSection';
+export * from './CommunitySection';

apps/tangle-website/src/pages/index.tsx

@@ -1,4 +1,5 @@
 import {
+  CommunitySection,
   HeroSection,
   IntroducingSection,
   GovernanceSystemSection,
@@ -15,6 +16,8 @@ export function Index() {
       <FeaturesSection />
 
       <GovernanceSystemSection />
+
+      <CommunitySection />
     </div>
   );
 }

apps/tangle-website/src/styles/globals.css

@@ -2,6 +2,12 @@
   background-color: #fff;
 }
 
+.bg-body {
+  min-height: 100vh; /* Ensure the div takes up at least the full height of the viewport */
+  background-size: cover; /* Scale the background image to cover the entire element */
+  background-position: center center; /* Center the background image horizontally and vertically */
+}
+
 /* Headings, sub-headings, card texts */
 .heading {
   @apply text-[44px] leading-[52.8px] tracking-[-0.011em] /** small screen */

apps/webbsite/src/pages/community.tsx

@@ -9,7 +9,11 @@ import {
   TwitterFill,
 } from '@webb-tools/icons';
 import { IconBase } from '@webb-tools/icons/types';
-import { Button, Typography } from '@webb-tools/webb-ui-components';
+import {
+  Button,
+  Typography,
+  WebsiteCommunity,
+} from '@webb-tools/webb-ui-components';
 import { NextSeo } from 'next-seo';
 import { ResearchAndDevelopmentSection } from '../components';
 
@@ -82,25 +86,7 @@ const Community = () => {
             Get Started
           </Typography>
 
-          <div className="mt-24 grid gap-4 md:grid-cols-2 w-[358px] md:w-[736px] lg:w-[900px]">
-            {links.map(({ Icon, name, href, description }) => (
-              <div
-                className="flex flex-col p-4 w-[358px] lg:w-[442px] bg-mono-0 rounded-lg space-y-2 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
-                key={href}
-              >
-                <span className="flex items-center space-x-2.5">
-                  <Icon className="w-8 h-8 !fill-current" />
-                  <span className="card-title text-mono-200">{name}</span>
-                </span>
-
-                <span className="card-text text-mono-140">{description}</span>
-
-                <Button variant="link" href={href} target="_blank">
-                  {name}
-                </Button>
-              </div>
-            ))}
-          </div>
+          <WebsiteCommunity links={links} />
         </div>
       </section>
 

libs/webb-ui-components/src/components/WebsiteCommunity/WebsiteCommunity.tsx

@@ -0,0 +1,84 @@
+import { Typography } from '../../typography';
+import { useMemo } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Button } from '../Button';
+import { WebsiteCommunityProps } from './types';
+
+/**
+ * The `WebsiteCommunity` component
+ * Sets up styles, and spacing vertically between `block` components
+ * @example
+ * ```jsx
+ * <WebsiteCommunity
+ *  links={[
+ *    {
+        name: 'Github',
+        Icon: GithubFill,
+        href: 'https://github.com/webb-tools',
+        description: 'Explore the source code and get involved',
+      },
+      {
+        name: 'Documentation',
+        Icon: DocumentationIcon,
+        href: 'https://docs.webb.tools/docs',
+        description: 'Learn how it works under the hood',
+      },
+      {
+        name: 'Telegram',
+        Icon: TelegramFill,
+        href: 'https://t.me/webbprotocol',
+        description: 'Have question, join us on Telegram',
+      },
+ *  ]}
+ * />
+ * ```
+ * @param links - array of links of type `LinksType`
+ * @param cardContainerClassName - className for the container of the cards
+ * @param cardClassName - className for the card
+ */
+export const WebsiteCommunity = ({
+  links,
+  cardContainerClassName,
+  cardClassName,
+}: WebsiteCommunityProps) => {
+  const cardContainerClsx = useMemo(
+    () =>
+      twMerge(
+        'mt-[24px] grid gap-4 justify-center md:grid-cols-2 px-4',
+        cardContainerClassName
+      ),
+    [cardContainerClassName]
+  );
+
+  const cardClsx = useMemo(
+    () =>
+      twMerge(
+        'flex flex-col p-4 min-w-[358px] bg-mono-0 rounded-lg space-y-2 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]',
+        cardClassName
+      ),
+    [cardClassName]
+  );
+
+  return (
+    <div className={cardContainerClsx}>
+      {links.map(({ Icon, name, href, description }) => (
+        <div className={cardClsx} key={href}>
+          <span className="flex items-center space-x-2.5">
+            <Icon className="w-8 h-8 !fill-current" />
+            <Typography variant="h5" className="text-mono-200" fw="bold">
+              {name}
+            </Typography>
+          </span>
+
+          <Typography variant="body1" className="text-mono-140">
+            {description}
+          </Typography>
+
+          <Button variant="link" href={href} target="_blank">
+            {name}
+          </Button>
+        </div>
+      ))}
+    </div>
+  );
+};

libs/webb-ui-components/src/components/WebsiteCommunity/index.ts

@@ -0,0 +1 @@
+export * from './WebsiteCommunity';

libs/webb-ui-components/src/components/WebsiteCommunity/types.ts

@@ -0,0 +1,14 @@
+import { IconBase } from '@webb-tools/icons/types';
+
+type LinksType = {
+  Icon: (props: IconBase) => JSX.Element;
+  name: string;
+  href: string;
+  description: string;
+};
+
+export type WebsiteCommunityProps = {
+  links: LinksType[];
+  cardContainerClassName?: string;
+  cardClassName?: string;
+};

libs/webb-ui-components/src/components/index.ts

@@ -60,5 +60,6 @@ export * from './TokensRing';
 export * from './TokenWithAmount';
 export * from './Tooltip';
 export * from './WalletConnectionCard';
+export * from './WebsiteCommunity';
 export * from './WebsiteFooter';
 export * from './WebsiteNewsLetterForm';