feature(website): finish about us page (#631)

shared/locales/de/website-about-us.json

@@ -2,5 +2,40 @@
 	"section-1": {
 		"title-1": "Etwas bewegen, nicht nur darüber sprechen. ",
 		"title-2": "Dies war der Anfang von Social Income."
+	},
+	"team": {
+		"header": "Unser Team",
+		"title-1": "Wir verhelfen Social Income ",
+		"title-2": "zur Realität.",
+		"roles": {
+			"finance": "Finanzen",
+			"operations": "Betrieb",
+			"marketing": "Marketing",
+			"communications": "Kommunikation",
+			"co-president": "Co-Präsident:in",
+			"founder": "Gründer",
+			"board-member": "Vorstandsmitglied",
+			"software-development": "Softwareentwicklung",
+			"app-development": "App-Entwicklung",
+			"impact-measurement": "Impact Measurement"
+		},
+		"groups": {
+			"staff": {
+				"name": "Mitarbeiter:innen",
+				"description": "Unsere Mitarbeiter:innen vor Ort in Sierra Leone."
+			},
+			"volunteers": {
+				"name": "Freiwillige",
+				"description": "Die Menschen, die alles möglich machen."
+			},
+			"board": {
+				"name": "Vorstand",
+				"description": "Die Aufsichtspersonen der Organisation."
+			},
+			"special-thanks": {
+				"name": "Besonderer Dank",
+				"description": "Diese Personen haben sich großzügig ehrenamtlich eingesetzt und zu Social Income beigetragen."
+			}
+		}
 	}
 }

shared/locales/de/website-home.json

@@ -16,6 +16,7 @@
 		"video-button": "Schau dir das Video an",
 		"vimeo-video-id": "488184818"
 	},
+	"section-3": {},
 	"section-4": {
 		"title-1": "Soziale Gerechtigkeit fängt ",
 		"title-2": " bei uns an.",

shared/locales/en/website-about-us.json

@@ -1,6 +1,129 @@
 {
-	"section-1": {
-		"title-1": "We wanted to act. We found a way to do it. ",
-		"title-2": "Social Income was born."
+	"landing-page": {
+		"title": [
+			{
+				"text": "We wanted to act. We found a way to do it. "
+			},
+			{
+				"text": "Social Income was born.",
+				"color": "secondary"
+			}
+		]
+	},
+	"our-mission": {
+		"header": "Our Mission",
+		"title": [
+			{
+				"text": "Fighting global poverty with the "
+			},
+			{
+				"text": "help of everyday people.",
+				"color": "secondary"
+			}
+		],
+		"subtitle": "Many people in wealthier countries are committed to addressing inequality, but don’t know how or where to start.",
+		"paragraphs": [
+			"Thanks to the widespread use of mobile phone-based money transfer services in developing countries, it is easier than ever to send money directly to people in need, at almost no cost.",
+			"Social Income wants to harness this potential by combining two approaches to wealth redistribution. The first is the concept of Universal Basic Income, which is a promising path towards a more equal and inclusive society.",
+			"The second is the use of direct and anticipatory cash transfers to people living in poverty. Research has shown that those who receive direct aid greatly benefit from the money and that they reinvest it locally, responsibly, and successfully.",
+			"We make an impact by sending regular long-term cash transfers directly to recipients: from person to person, because many of the world's poorest countries lack solid social infrastructure.",
+			"And we do so in a radically transparent way that allows us to avoid the high administrative costs normally associated with such projects."
+		]
+	},
+	"100-percent-model": {
+		"header": "100% Model",
+		"title": [
+			{
+				"text": "Zero overhead costs. "
+			},
+			{
+				"text": "Our pledge to you.",
+				"color": "secondary"
+			}
+		],
+		"paragraphs": [
+			"We believe that 100% of our contributors’ donations should go to our recipients. To maintain this promise, all our operating costs and financial expenses are covered by philanthropic grants and institutional donations.",
+			"Thanks to this support, we can guarantee that 100% of the money from our individual contributors reaches our recipients.",
+			"Additionally, we receive various in-kind support from organizations, such as <a href='https://www.google.com/nonprofits/' class='underline' target='_blank'>Google Non-profit</a> or <a href='https://lineto.com/' class='underline' target='_blank'>Lineto</a> (Unica77 font). Thank you!"
+		]
+	},
+	"flow-of-funds": {
+		"header": "Flow of Funds",
+		"title": [
+			{
+				"text": "Social Income payments are sent directly to "
+			},
+			{
+				"text": "recipients’ mobile phones.",
+				"color": "secondary"
+			}
+		],
+		"paragraphs": [
+			"We receive contributions from all over the world. They are safely stored in our bank account, in the most stable currency in the world: Swiss Francs. Every month we transfer just enough money to local banks in the countries where we are active. We then distribute Social Incomes with the help of mobile money directly to the phones of beneficiaries."
+		],
+		"vimeo-video-id": "840215695"
+	},
+	"team": {
+		"header": "Our Team",
+		"title": [
+			{
+				"text": "We're making Social Income "
+			},
+			{
+				"text": "a reality.",
+				"color": "secondary"
+			}
+		],
+		"roles": {
+			"finance": "Finances",
+			"operations": "Operations",
+			"marketing": "Marketing",
+			"communications": "Communications",
+			"co-president": "Co-President",
+			"founder": "Founder",
+			"board-member": "Board Member",
+			"software-development": "Software Development",
+			"app-development": "App Development",
+			"impact-measurement": "Impact Measurement",
+			"strategy": "Strategy"
+		},
+		"groups": {
+			"staff": {
+				"name": "Staff",
+				"description": "Our local staff in Sierra Leone."
+			},
+			"volunteers": {
+				"name": "Volunteers",
+				"description": "The people who make it all happen."
+			},
+			"board": {
+				"name": "Board of Association",
+				"description": "The overseers of the organization."
+			},
+			"special-thanks": {
+				"name": "Special Thanks",
+				"description": "These individuals have volunteered and made generous contributions towards Social Income."
+			}
+		}
+	},
+	"contact": {
+		"header": "Contact",
+		"title": [
+			{
+				"text": "We're a Swiss "
+			},
+			{
+				"text": "non-profit organization.",
+				"color": "secondary"
+			}
+		],
+		"paragraph": "Social Income was founded as a non-profit association in Zurich, Switzerland. An independent board oversees the organization.",
+		"legal-status": "Legal Status",
+		"legal-status-paragraphs": [
+			"Non-profit organization founded under Swiss law in 2019 with tax exempt status.",
+			"UID: CHE-289.611.695",
+			"DUNS: 48-045-6376"
+		],
+		"find-us": "Find us on"
 	}
 }

shared/locales/en/website-home.json

@@ -17,6 +17,18 @@
 		"video-button": "Watch the video",
 		"vimeo-video-id": "433937157"
 	},
+	"section-3": {
+		"title": [{ "text": "Who should, if not us " }, { "text": "here in Switzerland?", "color": "secondary" }],
+		"jackpot-title": "Life in Switzerland is like winning the jackpot.",
+		"jackpot-text": "People in Switzerland have systematically more opportunities and higher chances of leading a life worth living than anywhere else in the world.",
+		"jackpot-button": "Share the love",
+		"helping-others-title": "Helping others makes us happier.",
+		"helping-others-text": "Let’s start by helping those who don’t have the privilege of leading a life without financial difficulties. If not now, when?",
+		"helping-others-button": "Take Action",
+		"together-title": "Together we can make a major difference.",
+		"together-text": "If every fourth person in Switzerland contributed 1% of their income, every citizen of Sierra Leone could receive universal basic income and make poverty a thing of the past.",
+		"together-button": "Lead the Way"
+	},
 	"section-4": {
 		"title-1": "How can we address inequality? ",
 		"title-2": " Ourselves.",

shared/src/utils/i18n.ts

@@ -15,7 +15,7 @@ interface TranslatorProps {
 	namespaces: string[] | string;
 }
 
-export type TranslateFunction = (key: string, translateProps?: TranslateProps) => string;
+export type TranslateFunction = <T = string>(key: string, translateProps?: TranslateProps) => T;
 
 export class Translator {
 	language: LanguageCode;
@@ -40,18 +40,19 @@ export class Translator {
 				lng: language,
 				ns: namespaces,
 				fallbackLng: FALLBACK_LANGUAGE,
+				returnObjects: true,
 				interpolation: {
 					escapeValue: false,
 				},
 			});
 		return translator;
 	}
 
-	public t: TranslateFunction = (key: string, translateProps?: TranslateProps) => {
+	public t: TranslateFunction = <T = string>(key: string, translateProps?: TranslateProps): T => {
 		return this.instance.t(key, {
 			ns: translateProps?.namespace || this.namespaces,
 			lng: translateProps?.language || this.language,
 			...translateProps?.context,
-		});
+		}) as T;
 	};
 }

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

@@ -1,19 +1,19 @@
 import { DefaultPageProps } from '@/app/[lang]/[region]';
+import { Section1 } from '@/app/[lang]/[region]/(website)/(home)/section-1';
+import { Section2 } from '@/app/[lang]/[region]/(website)/(home)/section-2';
+import { Section3 } from '@/app/[lang]/[region]/(website)/(home)/section-3';
+import { Section4 } from '@/app/[lang]/[region]/(website)/(home)/section-4';
+import { Section5 } from '@/app/[lang]/[region]/(website)/(home)/section-5';
+import { Section6 } from '@/app/[lang]/[region]/(website)/(home)/section-6';
+import { Section7 } from '@/app/[lang]/[region]/(website)/(home)/section-7';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
-import Section1 from './section-1';
-import Section2 from './section-2';
-import Section3 from './section-3';
-import Section4 from './section-4';
-import Section5 from './section-5';
-import Section6 from './section-6';
-import Section7 from './section-7';
 
-export default async function Page(props: DefaultPageProps) {
-	const translator = await Translator.getInstance({ language: props.params.lang, namespaces: 'website-home' });
+export default async function Page({ params: { lang, region } }: DefaultPageProps) {
+	const translator = await Translator.getInstance({ language: lang, namespaces: 'website-home' });
 	const vimeoVideoId = Number(translator.t('section-2.vimeo-video-id'));
 	return (
 		<>
-			<Section1 {...props} />
+			<Section1 lang={lang} region={region} />
 			<Section2
 				vimeoVideoId={vimeoVideoId}
 				translations={{
@@ -23,11 +23,11 @@ export default async function Page(props: DefaultPageProps) {
 					videoButton: translator.t('section-2.video-button'),
 				}}
 			/>
-			{props.params.region === 'ch' && <Section3 />}
-			<Section4 {...props} />
-			<Section5 {...props} />
-			<Section6 {...props} />
-			<Section7 {...props} />
+			{region === 'ch' && <Section3 lang={lang} region={region} />}
+			<Section4 lang={lang} />
+			<Section5 lang={lang} />
+			<Section6 lang={lang} />
+			<Section7 lang={lang} />
 		</>
 	);
 }

website/src/app/[lang]/[region]/(website)/(home)/section-1-form.tsx

@@ -60,7 +60,7 @@ export default function Section1Form({ translations, lang, region }: Section1Inp
 						/>
 						<CurrencySelector className="h-16 w-full sm:flex-1" currencies={websiteCurrencies} fontSize="lg" />
 					</div>
-					<Button size="lg" type="submit" variant="default" className="text-lg">
+					<Button size="lg" type="submit" variant="default">
 						{translations.submit}
 					</Button>
 					<Link href={`/${lang}/${region}/privacy`} className="inline-flex items-center pt-2 hover:underline">

website/src/app/[lang]/[region]/(website)/(home)/section-1.tsx

@@ -1,11 +1,11 @@
-import { DefaultPageProps } from '@/app/[lang]/[region]';
+import { DefaultParams } from '@/app/[lang]/[region]';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { BaseContainer, Typography } from '@socialincome/ui';
 import Section1Form from './section-1-form';
 
-export default async function Section1({ params }: DefaultPageProps) {
+export async function Section1({ lang, region }: DefaultParams) {
 	const translator = await Translator.getInstance({
-		language: params.lang,
+		language: lang,
 		namespaces: ['website-home', 'common'],
 	});
 
@@ -15,18 +15,18 @@ export default async function Section1({ params }: DefaultPageProps) {
 			className="min-h-screen-navbar grid grid-cols-1 content-center items-center gap-y-8 lg:grid-cols-2"
 		>
 			<div className="mx-auto max-w-3xl">
-				<Typography size="5xl" weight="bold" lineHeight="tight">
+				<Typography size="5xl" weight="bold">
 					{translator.t('section-1.title-1')}
-					<Typography as="span" size="5xl" weight="bold" color="secondary" lineHeight="tight">
+					<Typography as="span" size="5xl" weight="bold" color="secondary">
 						{translator.t('section-1.title-2')}
 					</Typography>
 					{translator.t('section-1.title-3')}
 				</Typography>
 			</div>
 			<div className="mx-auto max-w-2xl">
 				<Section1Form
-					lang={params.lang}
-					region={params.region}
+					lang={lang}
+					region={region}
 					translations={{
 						text: translator.t('section-1.income-text'),
 						currency: translator.t('currency'),