feature(website): faq section on campaign page (#779)

shared/locales/de/website-donate.json

@@ -96,6 +96,6 @@
 		"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.",
-		"about-si-link": "<a href='/faq' target=\"_blank\">Fragen und Antworten</a>"
+		"more-faq": "<a href='/faq' target=\"_blank\">Mehr Fragen</a>"
 	}
 }

shared/locales/de/website-faq.json

@@ -121,5 +121,30 @@
 				"href": "https://www.idealist.org/en/nonprofit/41a885fa176b4793a029f131834fd48a-social-income-zurich"
 			}
 		}
+	},
+	"campaign": {
+		"title": "Fragen und Antworten",
+		"questions": [
+			{
+				"question": "Welche Partner tragen zur Realisierung dieser Spendenkampagne bei?",
+				"answer": "Diese Spendenaktion wird von Ismatu Gwendolyn Bangura, einer Autorin und Aktivistin aus Sierra Leone, sowie von Social Income, einer Schweizer Non-Profit-Organisation, gemeinsam organisiert. Wir arbeiten eng mit der in Kenema ansässigen Sierra Leone Association of Ebola Survivors zusammen. Social Income bringt umfangreiche Erfahrung in mobilen Zahlungen mit und ist für die Auszahlung der Grundeinkommen an Ebola-Überlebende in den nächsten drei Jahren verantwortlich."
+			},
+			{
+				"question": "Wie erreichen die Gelder die Ebola-Überlebenden?",
+				"answer": "Die Gelder werden direkt über Mobile Money an die Ebola-Überlebenden ausbezahlt. Dies gewährleistet einen schnellen und sicheren Geldtransfer, sodass die Überlebenden ihre Hilfe prompt und effizient erhalten können. Die Nutzung des Mobile Bankings hilft auch, Transparenz zu wahren und das Risiko von Fehlmanagement zu reduzieren. So wird sichergestellt, dass die Spenden effektiv eingesetzt werden."
+			},
+			{
+				"question": "Wie hoch ist der ausbezahlte Betrag?",
+				"answer": "Empfänger:innen des Social Income bekommen monatlich 32 USD, umgerechnet in lokale Währung und direkt auf ihre Mobiltelefone überwiesen. Diese Summe entspricht den Grundbedürfnissen einer in Armut lebenden Person, berücksichtigt das durchschnittliche Einkommen von etwa 42 USD in Sierra Leone. Die Unterstützung erfolgt zuverlässig über drei Jahre. Diese Strategie soll bedürftige Menschen befähigen, ihre Zukunft zu planen und in essenzielle Bereiche wie Gesundheit zu investieren, was ihre finanzielle Situation und ihr Wohlbefinden verbessert."
+			},
+			{
+				"question": "Wofür werden die Gelder verwendet?",
+				"answer": "Alle Spenden bis zum Erreichen des Ziels dienen der Unterstützung von Ebola-Überlebenden, einschliesslich monatlicher Zahlungen, Liefergebühren und zugehöriger Kosten. Spenden, die das Ziel übersteigen, kommen anderen gefährdeten und in Armut lebenden Menschen in Sierra Leone zugute."
+			},
+			{
+				"question": "Wie werden die Empfänger:innen ausgewählt?",
+				"answer": "Wenn wir das Spendenziel erreichen, erhalten alle 156 von der Sierra Leone Association of Ebola Survivors in Kenema registrierten Überlebenden Unterstützung. Eine zusätzliche Auswahl ist dann nicht nötig. Verfehlen wir das Ziel, wählen wir Empfänger:innen zufällig aus. Diese Methode sichert Fairness und vermeidet Bevorzugungen."
+			}
+		]
 	}
 }

shared/locales/en/website-donate.json

@@ -96,6 +96,6 @@
 		"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.",
-		"about-si-link": "<a href='/faq' target=\"_blank\">Frequently Asked Questions</a>"
+		"more-faq": "<a href='/faq' target=\"_blank\">More questions</a>"
 	}
 }

shared/locales/en/website-faq.json

@@ -122,5 +122,30 @@
 				"href": "https://www.idealist.org/en/nonprofit/41a885fa176b4793a029f131834fd48a-social-income-zurich"
 			}
 		}
+	},
+	"campaign": {
+		"title": "Frequently asked questions",
+		"questions": [
+			{
+				"question": "Who is collaborating to make this fundraiser possible?",
+				"answer": "This fundraiser is under the patronage of Ismatu Gwendolyn Bangura, an author and activist from Sierra Leone. It is hosted by the Swiss non-profit organization Social Income, which is also responsible for distributing the basic incomes to Ebola survivors over the next three years. Social Income has extensive experience in mobile payouts to people living in poverty in Sierra Leone. Additionally, we collaborate with the Sierra Leone Association of Ebola Survivors based in Kenema, who maintains close contact with each of the survivors."
+			},
+			{
+				"question": "How does the funds reach the Ebola survivors?",
+				"answer": "The funds are transferred directly to the Ebola survivors through mobile banking technology. This method ensures a swift and secure delivery of the funds, allowing the survivors to receive their aid promptly and efficiently. The use of mobile banking also helps maintain transparency and reduces the risk of mismanagement, ensuring that the funds are used effectively to support the survivors' needs."
+			},
+			{
+				"question": "What is the amount disbursed to the recipients?",
+				"answer": "Recipients of Social Income receive a monthly payment of USD 32, which is converted into their local currency and directly deposited to their mobile phones. This sum is carefully chosen to help secure the basic needs of a person living in poverty, considering that the national average income is around USD 42 (World Bank). These payments are reliably made every month over a span of three years. This sustained, long-term support strategy is intended to empower individuals in poverty, enabling them to plan and invest for the future, particularly in aspects like health, thereby enhancing their financial stability and overall well-being."
+			},
+			{
+				"question": "What are the uses of the funds I donate?",
+				"answer": "Your donations, up to the fundraising goal, are dedicated to supporting Ebola survivors. This includes the monthly payouts to each survivor including delivery fees and associated costs. Any donations exceeding the fundraising goal will be utilized to support other vulnerable individuals and people living in poverty in Sierra Leone."
+			},
+			{
+				"question": "How are recipients chosen?",
+				"answer": "Should the fundraising goal be met, all 156 Ebola survivors registered by the Sierra Leone Association of Ebola Survivors in Kenema will be selected as recipients. In this scenario, no further selection is required. However, if the fundraising target isn't achieved, we will conduct a random selection from the candidates. This approach serves two key purposes: Firstly, it helps ensure impartiality in choosing recipients, preventing favoritism towards relatives or acquaintances of those involved in the process. Secondly, it aims to minimize any potential conflicts or tensions, both between those who receive aid and those who don't, and between recipients and the organizations involved."
+			}
+		]
 	}
 }

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

@@ -9,6 +9,10 @@ import { daysUntilTs } from '@socialincome/shared/src/utils/date';
 import { getLatestExchangeRate } from '@socialincome/shared/src/utils/exchangeRates';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
 	BaseContainer,
 	Popover,
 	PopoverContent,
@@ -57,7 +61,7 @@ export async function generateMetadata({ params }: CampaignPageProps) {
 export default async function Page({ params }: CampaignPageProps) {
 	const translator = await Translator.getInstance({
 		language: params.lang,
-		namespaces: ['website-donate', 'website-videos'],
+		namespaces: ['website-donate', 'website-videos', 'website-faq'],
 	});
 
 	const campaignDoc = await firestoreAdmin.collection<Campaign>(CAMPAIGN_FIRESTORE_PATH).doc(params.campaign).get();
@@ -270,12 +274,6 @@ export default async function Page({ params }: CampaignPageProps) {
 							<Typography className={'mt-4'} color="muted-foreground" size="xl">
 								{translator.t('campaign.about-si-text-2')}
 							</Typography>
-							<Typography
-								className={'mt-4 underline'}
-								color="muted-foreground"
-								size="xl"
-								dangerouslySetInnerHTML={{ __html: translator.t('campaign.about-si-link') }}
-							/>
 						</div>
 					</div>
 					<div className="items-left flex flex-col">
@@ -306,6 +304,44 @@ export default async function Page({ params }: CampaignPageProps) {
 					</div>
 				</div>
 			</BaseContainer>
+			<BaseContainer>
+				<div className="py-8 pb-32 lg:pt-16">
+					<Typography size="2xl" color="foreground" weight="medium" className="pb-1">
+						{translator.t('campaign.title')}
+					</Typography>
+					<div className="space-y-6">
+						<Accordion type={'single'} collapsible className="w-full">
+							{translator
+								.t<{ question: string; answer: string }[]>('campaign.questions')
+								.map(({ question, answer }, index) => (
+									<AccordionItem value={`item-${index}`} key={index}>
+										<AccordionTrigger>
+											<Typography size="xl" color="muted-foreground" className="text-left" weight="normal">
+												{question}
+											</Typography>
+										</AccordionTrigger>
+										<AccordionContent>
+											<Typography
+												size="xl"
+												color="muted-foreground"
+												className="mt-2"
+												dangerouslySetInnerHTML={{ __html: answer }}
+											/>
+										</AccordionContent>
+									</AccordionItem>
+								))}
+						</Accordion>
+					</div>
+					<div className="flex flex-col items-center justify-center pt-4">
+						<Typography
+							className="mt-4 underline"
+							color="muted-foreground"
+							size="xl"
+							dangerouslySetInnerHTML={{ __html: translator.t('campaign.more-faq') }}
+						/>
+					</div>
+				</div>
+			</BaseContainer>
 		</>
 	);
 }