feature(website): badge for highlighting active campaign on landing p…

…age (#794)

shared/locales/de/website-donate.json

@@ -96,6 +96,7 @@
 		"about-si-title": "Über Social Income",
 		"about-si-text-1": "Social Income ist eine NGO mit Sitz in der Schweiz, die bedingungslose Geldüberweisungen per Mobiltelefon an Menschen in multidimensionaler Armut in Westafrika bereitstellt.",
 		"about-si-text-2": "Seit 2020 führt Social Income ein zeitlich unbegrenztes Programm für ein universelles Grundeinkommen in Sierra Leone durch.",
-		"more-faq": "<a href='/faq' target=\"_blank\">Mehr Fragen</a>"
+		"more-faq": "<a href='/faq' target=\"_blank\">Mehr Fragen</a>",
+		"badge-highlight": "Aktuelle Kampagne"
 	}
 }

shared/locales/en/website-donate.json

@@ -96,6 +96,7 @@
 		"about-si-title": "About Social Income",
 		"about-si-text-1": "Social Income is a nonprofit organization based in Switzerland that provides unconditional cash transfers via mobile phone to people living in multidimensional poverty in West Africa.",
 		"about-si-text-2": "Since 2020, Social Income has been running an open-ended universal basic income program in Sierra Leone.",
-		"more-faq": "<a href='/faq' target=\"_blank\">More questions</a>"
+		"more-faq": "<a href='/faq' target=\"_blank\">More questions</a>",
+		"badge-highlight": "Ongoing Campaign"
 	}
 }

website/src/app/[lang]/[region]/(website)/(home)/(sections)/active-campaign.tsx

@@ -0,0 +1,38 @@
+import { WebsiteLanguage } from '@/i18n';
+import { BellAlertIcon } from '@heroicons/react/24/solid';
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { Badge, BaseContainer, Typography } from '@socialincome/ui';
+import Link from 'next/link';
+
+export async function Campaign({ lang }: { lang: WebsiteLanguage }) {
+	const translator = await Translator.getInstance({
+		language: lang,
+		namespaces: ['website-donate'],
+	});
+
+	return (
+		<BaseContainer className="mb-8 flex flex-col items-center justify-center sm:mb-0">
+			<Link href="https://socialincome.org/campaign/MZmXEVHlDjOOFOMk82jW" className="group">
+				<Badge variant="outline" className="flex-shrink-0">
+					<Typography
+						size="md"
+						color="primary"
+						weight="normal"
+						className="group-hover:text-primary-foreground flex items-center p-1"
+					>
+						<BellAlertIcon className="mx-4 h-8 w-8 sm:mx-3 sm:h-5 sm:w-5" />
+						{translator.t('campaign.badge-highlight')}
+					</Typography>
+					<Typography
+						size="md"
+						color="secondary"
+						weight="medium"
+						className="group-hover:text-primary-foreground mr-4 flex items-center p-1"
+					>
+						Rebuilding Lives by Ismatu&nbsp;Gwendolyn
+					</Typography>
+				</Badge>
+			</Link>
+		</BaseContainer>
+	);
+}

website/src/app/[lang]/[region]/(website)/(home)/page.tsx

@@ -8,13 +8,15 @@ import { ThreeApproaches } from '@/app/[lang]/[region]/(website)/(home)/(section
 import { WhatWouldChange } from '@/app/[lang]/[region]/(website)/(home)/(sections)/what-would-change';
 import NewsletterPopup from '@/components/newsletter-popup/newsletter-popup';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { Campaign } from './(sections)/active-campaign';
 import { Video } from './(sections)/video';
 
 export default async function Page({ params: { lang, region } }: DefaultPageProps) {
 	const translator = await Translator.getInstance({ language: lang, namespaces: ['website-home', 'website-videos'] });
 	const vimeoVideoId = Number(translator.t('id.video-02'));
 	return (
 		<>
+			<Campaign lang={lang} />
 			<Hero lang={lang} region={region} />
 			<Video lang={lang} />
 			<WhatWouldChange

website/src/components/newsletter-popup/newsletter-popup-client.tsx

@@ -85,6 +85,7 @@ type NewsletterPopupClientProps = {
 
 export const NewsletterPopupClient = ({ delay, lang, translations }: NewsletterPopupClientProps) => {
 	useEffect(() => {
+		if (localStorage.getItem('cookie_consent') === null) return; // Do not show the popup if the user has responded to the cookie consent banner
 		toast.dismiss();
 		const timeout = setTimeout(() => {
 			toast.custom(

website/src/components/tracking/cookie-consent-banner.tsx

@@ -27,7 +27,7 @@ export function CookieConsentBanner({ translations }: CookieConsentBannerClientP
 	if (hideBanner) return null;
 
 	return (
-		<Card className="fixed bottom-12 left-2 right-2 mx-auto max-w-6xl shadow-xl md:left-4 md:right-4">
+		<Card className="fixed bottom-2 left-2 right-2 mx-auto max-w-6xl shadow-xl md:left-4 md:right-4">
 			<CardContent className="flex flex-col space-y-2 p-4">
 				<Typography className="md:col-span-3">
 					<Typography as="span" dangerouslySetInnerHTML={{ __html: translations.text }} />