feature(website): new landing page (#749)

shared/locales/en/website-home2.json

@@ -0,0 +1,77 @@
+{
+	"metadata": {
+		"title": "Social Income",
+		"description": "Change from human to human. From mobile to mobile.",
+		"og-image": "/assets/metadata/og/default.jpg",
+		"twitter-image": "/assets/metadata/twitter/default.jpg"
+	},
+	"section-1": {
+		"title-1": [
+			{ "text": "How many people can you lift out of poverty " },
+			{ "text": "with only 1%", "color": "accent" },
+			{ "text": "of your income" }
+		]
+	},
+	"section-2": {
+		"title-1": "Those that live in Sierra Leone’s poorest communities know what it takes to rise out of poverty.",
+		"title-2": [
+			{ "text": "They just rarely have the opportunity – or the money – to do so. That’s where " },
+			{ "text": "you and Social Income", "color": "accent" },
+			{ "text": "come in." }
+		],
+		"subtitle-1": "Unique Process for Fair Selection",
+		"text-1.1": "Identifying those in need: Through collaboration with local NGOs in Sierra Leone, we target individuals living in poverty who can benefit from a three-year predictable income, empowering them to invest in their future.",
+		"text-1.2": "Selecting randomly: Our randomized selection process is transparent and publicly verifiable, eliminating human biases and favoritism. This ensures fairness and equal chances for all individuals in poverty to benefit.",
+		"subtitle-2": "Direct Giving, Direct Results",
+		"text-2": "We directly transfer your contribution onto the mobile phones of individuals in need, empowering them to overcome poverty through their own choices and efforts.",
+		"subtitle-3": "Ongoing Support",
+		"text-3": "Our recipients receive continuous support from our local partners throughout and even after the program, maximizing the overall impact. Specifically, the third year of the program is focused on facilitating a seamless transition as they move on from the program."
+	},
+	"section-3": {},
+	"section-4": {
+		"title-1": [
+			{ "text": "What would change if you gave " },
+			{ "text": "away 1% of your income every month?", "color": "accent" }
+		],
+		"cta": "Watch video and find out"
+	},
+	"section-5": {
+		"title-1": [{ "text": "Change from human to human. " }, { "text": "From mobile to mobile.", "color": "accent" }],
+		"subtitle-1": "Social Income is a new way to fight poverty in the Global South. Digital, efficient and mobile."
+	},
+	"section-6": {
+		"title-1": "This sounds good, but ... ",
+		"question-1": [{ "question": "Is it working" }, { "answer": "XXX" }],
+		"cta": "All FAQ"
+	},
+	"section-7": {
+		"title-1": "Social Income combines three approaches to change."
+	},
+	"section-8": {
+		"title-1": [
+			{ "text": "Unique Recipients Selection Process for " },
+			{ "text": "Fair Selection.", "color": "accent" }
+		],
+		"text-1.1": "Identifying those in need: Through collaboration with local NGOs in Sierra Leone, we target individuals living in poverty who can benefit from a three-year predictable income, empowering them to invest in their future.",
+		"text-1.2": "Selecting randomly: Our randomized selection process is transparent and publicly verifiable, eliminating human biases and favoritism. This ensures fairness and equal chances for all individuals in poverty to benefit."
+	},
+	"section-9": {
+		"testimonial-1": "It’s a great example of redistribution of wealth based on solidarity and enabled by today's technology.",
+		"author-1": "Vanja, Switzerland",
+		"testimonial-2": "We are living in a world of opportunities, let's make sure we share this privilege with everyone else.",
+		"author-2": "Carlos, United States",
+		"testimonial-3": "I contribute to Social Income not only because it's simple, but because research has shown it's extremely effective.",
+		"author-3": "Ruben, Switzerland",
+		"testimonial-4": "The question is not why to get involved, but how to possibly abide not doing so. Social Income is an urgent necessity in contemporary society.",
+		"author-4": "Han, United States",
+		"testimonial-5": "Today's global inequality is the consequence of centuries of unequal progress. Social Income is a new way to address this.",
+		"author-5": "Claudia, Switzerland"
+	},
+	"section-10": {
+		"title-1": [{ "text": "Contribute to the United Nations’ " }, { "text": "United Nations’", "color": "primary" }],
+		"sdg-1-title": "End poverty in all its forms, everywhere.",
+		"sdg-1": "SDG #1",
+		"sdg-10-title": "Reduce inequality within and \namong countries.",
+		"sdg-10": "SDG #10"
+	}
+}

ui/src/components/typography/typography.tsx

@@ -29,6 +29,7 @@ const FONT_WEIGHT_MAP: { [key in FontWeight]: string } = {
 const FONT_COLOR_MAP: { [key in FontColor]: string } = {
 	background: 'text-background',
 	foreground: 'text-foreground',
+	'foreground-dark': 'text-primary-dark',
 	primary: 'text-primary',
 	'primary-foreground': 'text-primary-foreground',
 	secondary: 'text-secondary',

ui/src/globals.css

@@ -79,6 +79,12 @@
 
 		--border: hsl(60 9.1% 97.8%);
 	}
+
+	.theme-v2 {
+		--background: #f9f8f3;
+		--foreground: #2a63a4;
+		--foreground-dark: #01579b;
+	}
 }
 
 @layer base {
@@ -87,4 +93,7 @@
 	.theme-dark-blue {
 		@apply bg-background text-foreground;
 	}
+	.theme-v2 {
+		@apply bg-background text-foreground;
+	}
 }

ui/src/interfaces/color.ts

@@ -1,5 +1,6 @@
 export const COLORS = [
 	'foreground',
+	'foreground-dark',
 	'background',
 	'border',
 	'input',
@@ -32,6 +33,7 @@ export type Color = (typeof COLORS)[number];
 export type FontColor = Extract<
 	Color,
 	| 'foreground'
+	| 'foreground-dark'
 	| 'background'
 	| 'primary'
 	| 'primary-foreground'

ui/tailwind.config.ts

@@ -20,7 +20,10 @@ module.exports = {
 				input: 'var(--input)',
 				ring: 'var(--ring)',
 				background: 'var(--background)',
-				foreground: 'var(--foreground)',
+				foreground: {
+					DEFAULT: 'var(--foreground)',
+					dark: 'var(--foreground-dark)',
+				},
 				muted: {
 					DEFAULT: 'var(--muted)',
 					foreground: 'var(--muted-foreground)',

website/src/app/[lang]/[region]/v2/(home)/(sections)/approach.tsx

@@ -0,0 +1,16 @@
+import { DefaultParams } from '@/app/[lang]/[region]';
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { BaseContainer, Typography } from '@socialincome/ui';
+
+export async function Approach({ lang, region }: DefaultParams) {
+	const translator = await Translator.getInstance({
+		language: lang,
+		namespaces: ['website-home2'],
+	});
+
+	return (
+		<BaseContainer>
+			<Typography>{translator.t('section-7.title-1')}</Typography>
+		</BaseContainer>
+	);
+}

website/src/app/[lang]/[region]/v2/(home)/(sections)/explainer-video.tsx

@@ -0,0 +1,24 @@
+import { DefaultParams } from '@/app/[lang]/[region]';
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { BaseContainer, Typography } from '@socialincome/ui';
+import { FontColor } from '@socialincome/ui/src/interfaces/color';
+
+export async function ExplainerVideo({ lang, region }: DefaultParams) {
+	const translator = await Translator.getInstance({
+		language: lang,
+		namespaces: ['website-home2'],
+	});
+
+	return (
+		<BaseContainer>
+			<div>
+				{translator.t<{ text: string; color?: FontColor }[]>('section-4.title-1').map((title, index) => (
+					<Typography as="span" key={index} color={title.color}>
+						{title.text}{' '}
+					</Typography>
+				))}
+			</div>
+			<Typography>{translator.t('section-4.cta')}</Typography>
+		</BaseContainer>
+	);
+}

website/src/app/[lang]/[region]/v2/(home)/(sections)/faq.tsx

@@ -0,0 +1,25 @@
+import { DefaultParams } from '@/app/[lang]/[region]';
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { BaseContainer, Typography } from '@socialincome/ui';
+import { FontColor } from '@socialincome/ui/src/interfaces/color';
+
+export async function Faq({ lang, region }: DefaultParams) {
+	const translator = await Translator.getInstance({
+		language: lang,
+		namespaces: ['website-home2'],
+	});
+
+	return (
+		<BaseContainer>
+			<Typography>{translator.t('section-6.title-1')}</Typography>
+			<div>
+				{translator.t<{ text: string; color?: FontColor }[]>('section-6.question-1').map((title, index) => (
+					<Typography as="span" key={index} color={title.color}>
+						{title.text}{' '}
+					</Typography>
+				))}
+			</div>
+			<Typography>{translator.t('section-6.cta')}</Typography>
+		</BaseContainer>
+	);
+}

website/src/app/[lang]/[region]/v2/(home)/(sections)/hero-video.tsx

@@ -0,0 +1,23 @@
+import { DefaultParams } from '@/app/[lang]/[region]';
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { BaseContainer, Typography } from '@socialincome/ui';
+import { FontColor } from '@socialincome/ui/src/interfaces/color';
+
+export async function HeroVideo({ lang, region }: DefaultParams) {
+	const translator = await Translator.getInstance({
+		language: lang,
+		namespaces: ['website-home2', 'common'],
+	});
+
+	return (
+		<BaseContainer>
+			<div>
+				{translator.t<{ text: string; color?: FontColor }[]>('section-1.title-1').map((title, index) => (
+					<Typography as="span" key={index} color={title.color}>
+						{title.text}{' '}
+					</Typography>
+				))}
+			</div>
+		</BaseContainer>
+	);
+}