From 597feb8f41f6969d7054438c102eb3c110ad923e Mon Sep 17 00:00:00 2001 From: Pavan Soratur Date: Mon, 17 Apr 2023 05:04:02 -0700 Subject: [PATCH] Adds community section to tangle-website (#1102) Co-authored-by: Dustin Brickwood --- apps/tangle-website/src/components/Navbar.tsx | 5 +- .../components/sections/CommunitySection.tsx | 96 +++++++++++++++++++ .../src/components/sections/index.ts | 1 + apps/tangle-website/src/pages/index.tsx | 3 + apps/tangle-website/src/styles/globals.css | 6 ++ apps/webbsite/src/pages/community.tsx | 26 ++--- .../WebsiteCommunity/WebsiteCommunity.tsx | 84 ++++++++++++++++ .../src/components/WebsiteCommunity/index.ts | 1 + .../src/components/WebsiteCommunity/types.ts | 14 +++ .../src/components/index.ts | 1 + 10 files changed, 213 insertions(+), 24 deletions(-) create mode 100644 apps/tangle-website/src/components/sections/CommunitySection.tsx create mode 100644 libs/webb-ui-components/src/components/WebsiteCommunity/WebsiteCommunity.tsx create mode 100644 libs/webb-ui-components/src/components/WebsiteCommunity/index.ts create mode 100644 libs/webb-ui-components/src/components/WebsiteCommunity/types.ts diff --git a/apps/tangle-website/src/components/Navbar.tsx b/apps/tangle-website/src/components/Navbar.tsx index 2918df3765..12177596b0 100644 --- a/apps/tangle-website/src/components/Navbar.tsx +++ b/apps/tangle-website/src/components/Navbar.tsx @@ -23,10 +23,7 @@ const isNavItem = (item: any): item is NavItem => { const navItems: Array }> = [ { label: 'community', - url: '#', - onClick: (e) => { - e.preventDefault(); - }, + url: '#community', isInternal: true, }, { label: 'docs', url: TANGLE_NETWORK_DOCS_URL }, diff --git a/apps/tangle-website/src/components/sections/CommunitySection.tsx b/apps/tangle-website/src/components/sections/CommunitySection.tsx new file mode 100644 index 0000000000..bab5a809de --- /dev/null +++ b/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 = [ + { + 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 ( + <> + + +
+
+ + Get involved + + + + Tangle Community + + + + 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. + + + +
+
+ + ); +}; diff --git a/apps/tangle-website/src/components/sections/index.ts b/apps/tangle-website/src/components/sections/index.ts index 91ea8b62ee..ba433b1d00 100644 --- a/apps/tangle-website/src/components/sections/index.ts +++ b/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'; diff --git a/apps/tangle-website/src/pages/index.tsx b/apps/tangle-website/src/pages/index.tsx index dafbec1c36..40bdad035e 100644 --- a/apps/tangle-website/src/pages/index.tsx +++ b/apps/tangle-website/src/pages/index.tsx @@ -1,4 +1,5 @@ import { + CommunitySection, HeroSection, IntroducingSection, GovernanceSystemSection, @@ -15,6 +16,8 @@ export function Index() { + + ); } diff --git a/apps/tangle-website/src/styles/globals.css b/apps/tangle-website/src/styles/globals.css index 0cf78a5de8..3bf92c2871 100644 --- a/apps/tangle-website/src/styles/globals.css +++ b/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 */ diff --git a/apps/webbsite/src/pages/community.tsx b/apps/webbsite/src/pages/community.tsx index 12d3182da5..a337b908c5 100644 --- a/apps/webbsite/src/pages/community.tsx +++ b/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 -
- {links.map(({ Icon, name, href, description }) => ( -
- - - {name} - - - {description} - - -
- ))} -
+ diff --git a/libs/webb-ui-components/src/components/WebsiteCommunity/WebsiteCommunity.tsx b/libs/webb-ui-components/src/components/WebsiteCommunity/WebsiteCommunity.tsx new file mode 100644 index 0000000000..1243603c0a --- /dev/null +++ b/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 + * + * ``` + * @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 ( +
+ {links.map(({ Icon, name, href, description }) => ( +
+ + + + {name} + + + + + {description} + + + +
+ ))} +
+ ); +}; diff --git a/libs/webb-ui-components/src/components/WebsiteCommunity/index.ts b/libs/webb-ui-components/src/components/WebsiteCommunity/index.ts new file mode 100644 index 0000000000..106fb5c022 --- /dev/null +++ b/libs/webb-ui-components/src/components/WebsiteCommunity/index.ts @@ -0,0 +1 @@ +export * from './WebsiteCommunity'; diff --git a/libs/webb-ui-components/src/components/WebsiteCommunity/types.ts b/libs/webb-ui-components/src/components/WebsiteCommunity/types.ts new file mode 100644 index 0000000000..907c39f116 --- /dev/null +++ b/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; +}; diff --git a/libs/webb-ui-components/src/components/index.ts b/libs/webb-ui-components/src/components/index.ts index 269b10c2da..0d699c4313 100644 --- a/libs/webb-ui-components/src/components/index.ts +++ b/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';