Update menu

lang/ca.json

@@ -34,9 +34,9 @@
 	"component.givback_toast.desc": "Obteniu GIVbacks fent una donació a aquest projecte.",
 	"component.input.search_name": "Cerca per nom",
 	"component.input.search_or_paste": "Cerca per nom o enganxa una adreça",
-	"component.join_discord.title": "",
-	"component.join_discord.body": "",
-	"component.join_discord.body_2": "",
+	"component.join_discord.body": "Swing by our 👋",
+	"component.join_discord.body_2": "channel, and we’ll let you know who’s around to meet up.",
+	"component.join_discord.title": "We’d love to hear from you on Discord!",
 	"component.passport_card.desc": "Verify your Gitcoin Passport to prove your donor uniqueness and ensure your donations get matched in quadratic funding rounds.",
 	"component.pfp_eligibility_modal.content.not_eligible": "La cartera que has connectat no està a la nostra llista per fer minting avançat. Si penses que és un error, contacta amb el nostre equip. Consulta la nostra documentació per a més detalls sobre elegibilitat, o torna quan s'obri el minting públic el 24 de març del 2023 a les 16:00 UTC.",
 	"component.pfp_eligibility_modal.content.success": "Ets elegible per fer mint del teu Giver avançat! Gràcies per donar suport a Giveth",
@@ -206,8 +206,10 @@
 	"label.clear": "Netejar",
 	"label.clear_all_filters": "Netejar tots els filtres",
 	"label.close": "Tanca",
+	"label.collection_of": "Collection of",
 	"label.coming_soon": "Properament...",
 	"label.community": "Comunitat",
+	"label.community_of_makers": "Community of makers",
 	"label.complete_profile.desc": "Completa el teu perfil per gestionar millor les teves donacions i projectes",
 	"label.complete_your_profile": "Completa el teu perfil",
 	"label.confirm": "Confirma",
@@ -373,6 +375,7 @@
 	"label.giveconomy": "GIVeconomy",
 	"label.giveconomy_activities": "Activitats de GIVeconomy",
 	"label.givers_pfp_holders": "Givers PFP Holders will be able to claim their own unique ",
+	"label.giver_nfts": "Giver NFTs",
 	"label.giveth_builds_community": "Giveth construeix comunitat",
 	"label.giveth_builds_community.bullet.four": "Giveth contacta activament amb iniciatives similars que veu com a col·laboradors potencials, en lloc de competidors.",
 	"label.giveth_builds_community.bullet.one": "Giveth és una comunitat inclusiva unida per un objectiu comú.",
@@ -474,6 +477,7 @@
 	"label.is_your_project_part_of_a_non_profit": "El teu projecte forma part d'una organització sense ànim de lucre registrada?",
 	"label.i_accept_all_giveth_tos": "Accepto tots els termes i condicions de la comunitat de Giveth.",
 	"label.i_dont_want_to_support_giveth": "No vull donar suport a Giveth amb la meva donació",
+	"label.join_and_keep_in_touch": "Join & keep in touch",
 	"label.join_desc_one": "Giveth és, sobretot, una comunitat de donants i creadors de canvi. Som persones apassionades que treballen juntes per construir un sistema cripto-econòmic que pugui recompensar les donacions a bones causes. El nostre projecte és de codi obert, descentralitzat, altruista i dirigit per la comunitat.",
 	"label.join_desc_two": "Pots unir-te a la nostra Community Call cada dijous a Discord, seguir les nostres xarxes socials o venir a saludar a un canal a continuació. Esperem donar-te la benvinguda!",
 	"label.join_our_community_driven_movement": "Uneix-te al nostre moviment impulsat per la comunitat per transformar la manera en què finançem les organitzacions sense ànim de lucre i les causes socials.",

lang/en.json

@@ -34,9 +34,9 @@
 	"component.givback_toast.desc": "You get GIVbacks by donating to this project.",
 	"component.input.search_name": "Search name",
 	"component.input.search_or_paste": "Search name or paste an address",
-	"component.join_discord.title": "We’d love to hear from you on Discord!",
-	"component.join_discord.body": "Swing by our \uD83D\uDC4B",
+	"component.join_discord.body": "Swing by our 👋",
 	"component.join_discord.body_2": "channel, and we’ll let you know who’s around to meet up.",
+	"component.join_discord.title": "We’d love to hear from you on Discord!",
 	"component.passport_card.desc": "Verify your Gitcoin Passport to prove your donor uniqueness and ensure your donations get matched in quadratic funding rounds.",
 	"component.pfp_eligibility_modal.content.not_eligible": "The wallet address you connected with is not on our allowlist for early minting. If you think this is a mistake, contact our team. Check out our documentation for full details on eligibility, or come back when public minting opens on Mar 24, 2023, 16:00 UTC.",
 	"component.pfp_eligibility_modal.content.success": "You are eligible to mint your Giver early! Thanks for supporting Giveth",
@@ -206,8 +206,10 @@
 	"label.clear": "Clear",
 	"label.clear_all_filters": "Clear all Filters",
 	"label.close": "Close",
+	"label.collection_of": "Collection of",
 	"label.coming_soon": "Coming soon...",
 	"label.community": "Community",
+	"label.community_of_makers": "Community of makers",
 	"label.complete_profile.desc": "Complete your profile for better management of your donations & projects",
 	"label.complete_your_profile": "Complete your profile",
 	"label.confirm": "Confirm",
@@ -373,6 +375,7 @@
 	"label.giveconomy": "GIVeconomy",
 	"label.giveconomy_activities": "GIVeconomy activities",
 	"label.givers_pfp_holders": "Givers PFP Holders will be able to claim their own unique ",
+	"label.giver_nfts": "Giver NFTs",
 	"label.giveth_builds_community": "Giveth builds Community",
 	"label.giveth_builds_community.bullet.four": "Giveth proactively reaches out to similar initiatives which we see as potential collaborators, as opposed to competitors.",
 	"label.giveth_builds_community.bullet.one": "Giveth is an inclusive community united around a common goal.",
@@ -474,6 +477,7 @@
 	"label.is_your_project_part_of_a_non_profit": "Is your project part of a registered non-profit organization?",
 	"label.i_accept_all_giveth_tos": "I accept all of the Giveth community terms and conditions.",
 	"label.i_dont_want_to_support_giveth": "I do not want to support Giveth with my donation",
+	"label.join_and_keep_in_touch": "Join & keep in touch",
 	"label.join_desc_one": "Giveth is first and foremost a community of givers and changemakers. We are passionate people working together to build a crypto-economic system that can reward giving to good causes. Our project is open-source, decentralized, altruistic, and community-led.",
 	"label.join_desc_two": "You can join our Community Call every Thursday in Discord, follow our social media, or come say hello in a channel below. We look forward to welcoming you!",
 	"label.join_our_community_driven_movement": "Join our community-driven movement to transform the way we fund nonprofits and social causes.",

lang/es.json

@@ -34,9 +34,9 @@
 	"component.givback_toast.desc": "Obtienes GIVbacks al donar a este proyecto.",
 	"component.input.search_name": "Busca un nombre",
 	"component.input.search_or_paste": "Busca un nombre o pega una dirección",
-	"component.join_discord.title": "",
-	"component.join_discord.body": "",
-	"component.join_discord.body_2": "",
+	"component.join_discord.body": "Swing by our 👋",
+	"component.join_discord.body_2": "channel, and we’ll let you know who’s around to meet up.",
+	"component.join_discord.title": "We’d love to hear from you on Discord!",
 	"component.passport_card.desc": "Verify your Gitcoin Passport to prove your donor uniqueness and ensure your donations get matched in quadratic funding rounds.",
 	"component.pfp_eligibility_modal.content.not_eligible": "La billetera que conectaste no esta en nuestra lista para hacer minting adelantado. Si piensas que fue un error, contacta a nuestro equipo. Revisa nuestra documentación para más detalle en elegibilidad, o regresa cuando el mint público inicie el dia 24 de Marzo, 2023 a las 16:00 UTC.",
 	"component.pfp_eligibility_modal.content.success": "Eres elegible para hacer mint de tu Giver adelantado! Gracias por tu apoyo a Giveth",
@@ -206,8 +206,10 @@
 	"label.clear": "Limpiar",
 	"label.clear_all_filters": "Limpiar Filtros",
 	"label.close": "Cerrar",
+	"label.collection_of": "Collection of",
 	"label.coming_soon": "Muy pronto...",
 	"label.community": "Comunidad",
+	"label.community_of_makers": "Community of makers",
 	"label.complete_profile.desc": "Completa tu perfil para administrar mejor tus donaciones y proyectos",
 	"label.complete_your_profile": "Completa tu perfil",
 	"label.confirm": "Confirmar",
@@ -373,6 +375,7 @@
 	"label.giveconomy": "GIVeconomy",
 	"label.giveconomy_activities": "Actividades en GIVeconomy",
 	"label.givers_pfp_holders": "Givers PFP Holders will be able to claim their own unique ",
+	"label.giver_nfts": "Giver NFTs",
 	"label.giveth_builds_community": "Giveth construye comunidad",
 	"label.giveth_builds_community.bullet.four": "Giveth se acerca de forma proactiva a iniciativas similares para colaborar, en vez de competir.",
 	"label.giveth_builds_community.bullet.one": "Giveth es una comunidad inclusiva unida alrededor de un fin común.",
@@ -474,6 +477,7 @@
 	"label.is_your_project_part_of_a_non_profit": "¿Tu proyecto es parte de una organización sin ánimo de lucro registrada?",
 	"label.i_accept_all_giveth_tos": "Acepto todos los términos y condiciones de la comunidad de Giveth.",
 	"label.i_dont_want_to_support_giveth": "No deseo apoyar a Giveth con mi donación",
+	"label.join_and_keep_in_touch": "Join & keep in touch",
 	"label.join_desc_one": "Giveth es, ante todo, una comunidad de donantes y agentes de cambio. Somos personas apasionadas que trabajan juntas para construir un sistema cripto-económico que pueda recompensar las donaciones a buenas causas. Nuestro proyecto es de código abierto, descentralizado, altruista y dirigido por la comunidad.",
 	"label.join_desc_two": "Puedes entrar a nuestra Community Call todos los jueves en Discord, sigue nuestras redes sociales o ven a saludarnos en alguno de los canales de abajo. ¡Estaremos encantados de recibirte!",
 	"label.join_our_community_driven_movement": "Únete a nuestro movimiento impulsado por la comunidad para transformar la forma en que financiamos las organizaciones sin fines de lucro y las causas sociales.",

src/components/Header/Header.tsx

@@ -20,7 +20,6 @@ import {
 	Logo,
 	SmallCreateProjectParent,
 	LargeCreateProject,
-	HeaderLink,
 	HomeButton,
 	SearchButton,
 	GLinkNoWrap,
@@ -51,6 +50,7 @@ import { HomeSidebar } from '../sidebar/HomeSidebar';
 import { fetchMainCategories } from '@/features/general/general.thunk';
 import { ItemsProvider } from '@/context/Items.context';
 import { isGIVeconomyRoute as checkIsGIVeconomyRoute } from '@/lib/helpers';
+import { CommunityMenu } from '../menu/CommunityMenu';
 
 export interface IHeader {
 	theme?: ETheme;
@@ -230,13 +230,13 @@ const Header: FC<IHeader> = () => {
 					>
 						<GIVeconomyMenu />
 					</LinkWithMenu>
-					<HeaderLink theme={theme}>
-						<Link href={Routes.Join}>
-							<GLink size='Big'>
-								{formatMessage({ id: 'label.community' })}
-							</GLink>
-						</Link>
-					</HeaderLink>
+					<LinkWithMenu
+						title={formatMessage({ id: 'label.community' })}
+						isHeaderShowing={showHeader}
+						href={Routes.Join}
+					>
+						<CommunityMenu />
+					</LinkWithMenu>
 					<SearchButton
 						theme={theme}
 						onClick={() => dispatch(setShowSearchModal(true))}

src/components/menu/CommunityItems.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import Link from 'next/link';
+import { Caption, GLink } from '@giveth/ui-design-system';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { useAppSelector } from '@/features/hooks';
+import { ItemRow, ItemTitle } from './common';
+import Routes from '@/lib/constants/Routes';
+import { Item } from './Item';
+
+export const CommunityItems = () => {
+	const theme = useAppSelector(state => state.general.theme);
+	const { formatMessage } = useIntl();
+
+	const communityItems = [
+		{
+			title: formatMessage({ id: 'label.giver_nfts' }),
+			label: formatMessage({ id: 'label.collection_of' }),
+			href: Routes.NFT,
+		},
+		{
+			title: formatMessage({ id: 'label.join_and_keep_in_touch' }),
+			label: formatMessage({ id: 'label.community_of_makers' }),
+			href: Routes.Join,
+		},
+	];
+
+	return (
+		<>
+			{communityItems.map((item, idx) => (
+				<Link key={idx} href={item.href}>
+					<Item theme={theme}>
+						<ItemTitle theme={theme}>{item.title}</ItemTitle>
+						<ItemRow>
+							<GLink>{item.label}</GLink>
+						</ItemRow>
+					</Item>
+				</Link>
+			))}
+		</>
+	);
+};
+
+const LabelStyle = styled(Caption)`
+	margin: 24px 16px 16px;
+`;

src/components/menu/CommunityMenu.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { useAppSelector } from '@/features/hooks';
+import { BaseMenuContainer } from './common';
+import { CommunityItems } from './CommunityItems';
+
+export const CommunityMenu = () => {
+	const theme = useAppSelector(state => state.general.theme);
+	return (
+		<MenuContainer theme={theme}>
+			<CommunityItems />
+		</MenuContainer>
+	);
+};
+
+const MenuContainer = styled(BaseMenuContainer)`
+	display: flex;
+	flex-direction: column;
+	width: 239px;
+	gap: 4px;
+`;

src/components/sidebar/HomeSidebar.tsx

@@ -11,8 +11,8 @@ import { ProjectsItems } from '../menu/ProjectsItems';
 import { GIVeconomyItems } from '../menu/GIVeconomyItems';
 import { Item } from '../menu/Item';
 import { ItemSpacer } from '../menu/common';
-import Routes from '@/lib/constants/Routes';
 import { setShowSearchModal } from '@/features/modal/modal.slice';
+import { CommunityItems } from '../menu/CommunityItems';
 
 export const HomeSidebar = () => {
 	const { theme } = useAppSelector(state => state.general);
@@ -40,13 +40,12 @@ export const HomeSidebar = () => {
 				<GIVeconomyItems />
 			</SidebarParentItem>
 			<ItemSpacer />
-			<Link href={Routes.Join}>
-				<Item theme={theme}>
-					<GLink size='Big'>
-						{formatMessage({ id: 'label.community' })}
-					</GLink>
-				</Item>
-			</Link>
+			<SidebarParentItem
+				item={{ title: formatMessage({ id: 'label.community' }) }}
+			>
+				<CommunityItems />
+			</SidebarParentItem>
+
 			<SearchButton
 				theme={theme}
 				isHighlighted