Website: Fundraiser Badges

shared/locales/de/website-campaign.json

@@ -24,5 +24,11 @@
 		"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>",
 		"badge-highlight": "Aktuelle Kampagne"
+	},
+	"badges": {
+		"by": "Von",
+		"contributors": "Spender:innen",
+		"loading": "Lädt Fundraisers",
+		"more": "Alle anzeigen"
 	}
 }

shared/locales/en/website-campaign.json

@@ -24,5 +24,11 @@
 		"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>",
 		"badge-highlight": "Ongoing Campaign"
+	},
+	"badges": {
+		"by": "By",
+		"contributors": "contributors",
+		"loading": "Loading fundraisers",
+		"more": "see all"
 	}
 }

shared/locales/fr/website-campaign.json

@@ -24,5 +24,11 @@
 		"about-si-text-2": "Depuis 2020, Social Income gère un programme de revenu de base universel non limité dans le temps en Sierra Leone.",
 		"more-faq": "<a href='/faq' target=\"_blank\">Plus de questions</a>",
 		"badge-highlight": "Campagne actuelle"
+	},
+	"badges": {
+		"by": "Par",
+		"contributors": "contributeurs",
+		"loading": "Chargement des collectes de fonds",
+		"more": "voir tout"
 	}
 }

shared/locales/it/website-campaign.json

@@ -24,5 +24,11 @@
 		"about-si-text-2": "Dal 2020, Social Income gestisce un programma di reddito di base universale aperto in Sierra Leone.",
 		"more-faq": "<a href='/faq' target=\"_blank\">Altre domande</a>",
 		"badge-highlight": "Campagna in corso"
+	},
+	"badges": {
+		"by": "Di",
+		"contributors": "contributori",
+		"loading": "Caricamento delle raccolte fondi",
+		"more": "vedi tutto"
 	}
 }

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

@@ -0,0 +1,164 @@
+'use client';
+
+import { DefaultParams } from '@/app/[lang]/[region]';
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { Typography } from '@socialincome/ui';
+import { ChevronRight } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useEffect, useRef, useState } from 'react';
+import ismatuImage from '../(assets)/avatar-ismatu.png';
+
+export function ActiveFundraisers({ lang }: DefaultParams) {
+	const [translator, setTranslator] = useState<Translator | null>(null);
+	const [showFundraiserCards, setShowFundraiserCards] = useState(false);
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	const fetchTranslator = async () => {
+		return await Translator.getInstance({
+			language: lang,
+			namespaces: ['website-campaign'],
+		});
+	};
+	fetchTranslator().then((instance) => {
+		setTranslator(instance);
+	});
+
+	useEffect(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0].isIntersecting) {
+					setTimeout(() => {
+						setShowFundraiserCards(true);
+					}, 2000);
+				}
+			},
+			{ threshold: 0.1 },
+		);
+
+		if (containerRef.current) {
+			observer.observe(containerRef.current);
+		}
+
+		return () => {
+			if (containerRef.current) {
+				observer.unobserve(containerRef.current);
+			}
+		};
+	}, [translator]);
+
+	if (!translator) {
+		return null;
+	}
+
+	return (
+		<div ref={containerRef} className="mx-auto mb-8 mt-12 flex flex-col items-center justify-center space-y-4">
+			{!showFundraiserCards && (
+				<div className="flex w-full justify-center">
+					<div className="border-text-popover-foreground-muted text-primary relative flex items-center rounded-full border-2 px-6 py-2 transition-all duration-300">
+						<svg
+							width="48"
+							height="12"
+							viewBox="0 0 48 12"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+							className="pr-2"
+						>
+							<circle cx="6" cy="6" r="6" fill="currentColor">
+								<animate
+									attributeName="opacity"
+									values="0.3;1;0.3"
+									keyTimes="0;0.5;1"
+									dur="1.5s"
+									begin="0s"
+									repeatCount="indefinite"
+								/>
+							</circle>
+							<circle cx="24" cy="6" r="6" fill="currentColor">
+								<animate
+									attributeName="opacity"
+									values="0.3;1;0.3"
+									keyTimes="0;0.5;1"
+									dur="1.5s"
+									begin="0.3s"
+									repeatCount="indefinite"
+								/>
+							</circle>
+							<circle cx="42" cy="6" r="6" fill="currentColor">
+								<animate
+									attributeName="opacity"
+									values="0.3;1;0.3"
+									keyTimes="0;0.5;1"
+									dur="1.5s"
+									begin="0.6s"
+									repeatCount="indefinite"
+								/>
+							</circle>
+						</svg>
+						<div className="flex flex-col pl-2">
+							<Typography size="lg" className="text-popover-foreground-muted">
+								Loading fundraisers
+							</Typography>
+						</div>
+					</div>
+				</div>
+			)}
+
+			{showFundraiserCards && (
+				<div className="flex flex-wrap justify-center gap-4">
+					{[...Array(3)].map((_, index) => (
+						<Link
+							key={index}
+							href={`https://socialincome.org`}
+							className={`border-text-popover-foreground-muted hover:bg-primary hover:border-primary group relative flex w-[260px] items-center rounded-full border-2 px-6 py-2 transition-all duration-300 hover:w-[280px] hover:text-white ${index === 1 ? 'hidden md:flex' : index === 2 ? 'hidden lg:flex' : ''}`}
+						>
+							<div className="-ml-2 mr-2 h-10 w-10 overflow-hidden rounded-full transition-transform duration-300 group-hover:scale-125">
+								<Image alt="Avatar" src={ismatuImage} width={40} height={40} className="object-cover" />
+							</div>
+							<div className="flex flex-col pl-2">
+								<div className="text-popover-foreground-muted flex w-[150px] items-center space-x-1 group-hover:hidden">
+									<Typography size="lg">{translator.t('badges.by')}</Typography>
+									<Typography size="lg" className="overflow-hidden truncate whitespace-nowrap">
+										Ismatu Banjura
+									</Typography>
+								</div>
+								<div className="text-primary w-[150px] group-hover:hidden">
+									<Typography size="lg" weight="medium" className="overflow-hidden truncate whitespace-nowrap">
+										Rebuilding Lives
+									</Typography>
+								</div>
+								<div className="flex items-baseline space-x-2 leading-none">
+									<Typography size="lg" className="hidden text-white group-hover:inline">
+										USD 43,000
+									</Typography>
+									<Typography size="sm" className="text-accent hidden group-hover:inline">
+										23%
+									</Typography>
+								</div>
+								<div className="text-accent hidden items-center space-x-1 group-hover:flex">
+									<Typography size="lg" weight="medium">
+										2344
+									</Typography>
+									<Typography size="lg" weight="medium">
+										{translator.t('badges.contributors')}
+									</Typography>
+								</div>
+							</div>
+							<div className="absolute right-3 hidden h-8 w-8 items-center justify-center rounded-full bg-white group-hover:flex">
+								<ChevronRight className="text-primary" />
+							</div>
+						</Link>
+					))}
+				</div>
+			)}
+
+			{showFundraiserCards && (
+				<div className="mt-6">
+					<Link href={`/${lang}/fundraisers`} className="text-primary hover:underline">
+						See all X fundraisers
+					</Link>
+				</div>
+			)}
+		</div>
+	);
+}

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

@@ -4,6 +4,7 @@ import { FAQ } from '@/app/[lang]/[region]/(website)/(home)/(sections)/faq';
 import { Quotes } from '@/app/[lang]/[region]/(website)/(home)/(sections)/quotes';
 import { SDGGoals } from '@/app/[lang]/[region]/(website)/(home)/(sections)/sdg-goals';
 import { Testimonials } from '@/app/[lang]/[region]/(website)/(home)/(sections)/testimonials';
+import { ActiveFundraisers } from './(sections)/active-fundraisers';
 import { ExplainerVideo } from './(sections)/explainer-video';
 import { HeroVideo } from './(sections)/hero-video';
 import { MobileIllustration } from './(sections)/mobile-illustration';
@@ -14,6 +15,7 @@ export default async function Page({ params: { lang, region } }: DefaultPageProp
 	return (
 		<div className="hero-video -mb-28 -mt-24 md:-mt-36">
 			<HeroVideo lang={lang} region={region} />
+			<ActiveFundraisers lang={lang} region={region} />
 			<Overview lang={lang} region={region} />
 			<MonthlyIncome lang={lang} region={region} />
 			<ExplainerVideo lang={lang} region={region} />