feature (website): sections for new landing page (#805)

shared/locales/de/website-home2.json

@@ -27,7 +27,11 @@
 		"title-5": "Ongoing Support",
 		"text-5": "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-3": {
+		"title-faded": "Meine Wirkung",
+		"title": "Wie hoch ist Ihr monatliches Einkommen?",
+		"subtitle": "Warum ist das wichtig?"
+	},
 	"section-4": {
 		"title-1": [
 			{ "text": "What would change if you gave " },

shared/locales/en/website-home2.json

@@ -27,13 +27,18 @@
 		"title-5": "Ongoing Support",
 		"text-5": "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-3": {
+		"title-faded": "My impact",
+		"title": "What's your monthly income?",
+		"subtitle": "Why is this important?"
+	},
 	"section-4": {
 		"title-1": [
 			{ "text": "What would change if you gave " },
-			{ "text": "away 1% of your income every month?", "color": "accent" }
+			{ "text": "away 1% of your income ", "color": "accent" },
+			{ "text": "every month?" }
 		],
-		"cta": "Watch video and find out"
+		"cta": "Watch video and find out ›"
 	},
 	"section-5": {
 		"title-1": [{ "text": "Change from human to human. " }, { "text": "From mobile to mobile.", "color": "accent" }],
@@ -124,15 +129,49 @@
 			}
 		]
 	},
-	"section-x": {
+	"section-8": {
+		"cards": [
+			{
+				"quote": [
+					{
+						"text": "«Wir müssen uns ernsthaft damit befassen "
+					},
+					{
+						"text": "ein klug konzipiertes bedingungsloses Grundeinkommen ",
+						"color": "accent"
+					},
+					{
+						"text": "zu implementieren. So können uns Krisen zwar treffen, aber ohne zerstörerische Kraft zu entfalten.»"
+					}
+				],
+				"author": "Vereinte Nationen"
+			},
+			{
+				"quote": [
+					{
+						"text": "«Wir müssen uns ernsthaft damit befassen, "
+					},
+					{
+						"text": "ein klug konzipiertes bedingungsloses Grundeinkommen ",
+						"color": "accent"
+					},
+					{
+						"text": "zu implementieren. So können uns Krisen zwar treffen, aber ohne zerstörerische Kraft zu entfalten.»"
+					}
+				],
+				"author": "Vereinte Nationen"
+			}
+		]
+	},
+	"section-9": {
 		"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-8": {
+	"section-x": {
 		"portraits": [
 			{
 				"name": "Vanja",
@@ -150,10 +189,26 @@
 		"author-5": "Claudia, Switzerland"
 	},
 	"section-10": {
-		"title-1": [{ "text": "Contribute to the United Nations’ " }, { "text": "United Nations’", "color": "primary" }],
+		"title-1": [{ "text": "Contribute to the " }, { "text": "United Nations", "color": "primary" }, { "text": "’" }],
 		"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"
+	},
+	"section-11": {
+		"title": "Journal",
+		"card-1-title": "Waking up",
+		"card-1-author": "Aurélie Schmiedlin",
+		"card-1-description": "The other night I woke up with the sensation that we were hacked. Luckily this was just a dream. It may have been related to our participation in Finclusion Week, which is a big deal in the ...",
+		"card-2-title": "The other night I woke up",
+		"card-2-author": "Aurélie Schmiedlin",
+		"card-2-description": "The other night I woke up with the sensation that we were hacked. Luckily this was just a dream. It may have been related to our participation in Finclusion Week, which is a big deal in the ...",
+		"card-3-title": "The other night I woke up",
+		"card-3-author": "Aurélie Schmiedlin",
+		"card-3-description": "The other night I woke up with the sensation that we were hacked. Luckily this was just a dream. It may have been related to our participation in Finclusion Week, which is a big deal in the ...",
+		"card-4-title": "The other night I woke up",
+		"card-4-author": "Aurélie Schmiedlin",
+		"card-4-description": "The other night I woke up with the sensation that we were hacked. Luckily this was just a dream. It may have been related to our participation in Finclusion Week, which is a big deal in the ...",
+		"all-articles": "Alle Artikel ansehen ›"
 	}
 }

ui/src/globals.css

@@ -73,7 +73,7 @@
 		--card-muted: hsl(222, 100%, 99%);
 
 		--primary: hsl(48, 100%, 49%);
-		--primary-muted: hsl(48, 100%, 57%);
+		--primary-muted: hsl(48, 100%, 85%);
 		--primary-foreground: hsl(48, 100%, 0%);
 		--primary-foreground-muted: hsl(48, 100%, 30%);
 
@@ -82,8 +82,34 @@
 
 	.theme-v2 {
 		--background: #f9f8f3;
-		--foreground: #2a63a4;
-		--foreground-dark: #01579b;
+		--foreground: #3373bb;
+		--foreground-dark: #2a63a4;
+	}
+
+	.theme-blue-v2 {
+		--background: hsl(212, 57%, 47%);
+		--foreground: hsl(50, 33%, 96%);
+
+		--muted: hsl(212, 59%, 75%);
+		--muted-foreground: hsl(50, 33%, 99%);
+
+		--card: hsl(212, 57%, 47%);
+		--card-muted: hsl(212, 59%, 75%);
+		--card-foreground: hsl(50, 33%, 96%);
+		--card-foreground-muted: hsl(50, 33%, 99%);
+	}
+
+	.theme-dark-blue-v2 {
+		--background: hsl(212, 59%, 40%);
+		--foreground: hsl(50, 33%, 96%);
+
+		--muted: hsl(212, 59%, 75%);
+		--muted-foreground: hsl(50, 33%, 99%);
+
+		--card: hsl(212, 59%, 40%);
+		--card-muted: hsl(212, 59%, 75%);
+		--card-foreground: hsl(50, 33%, 96%);
+		--card-foreground-muted: hsl(50, 33%, 99%);
 	}
 }
 
@@ -93,7 +119,16 @@
 	.theme-dark-blue {
 		@apply bg-background text-foreground;
 	}
+
 	.theme-v2 {
 		@apply bg-background text-foreground;
 	}
+
+	.theme-blue-v2 {
+		@apply bg-background text-foreground;
+	}
+
+	.theme-dark-blue-v2 {
+		@apply bg-background text-foreground;
+	}
 }

ui/src/interfaces/color.ts

@@ -19,6 +19,7 @@ export const COLORS = [
 	'popover-foreground',
 	'card',
 	'card-foreground',
+	'bg-primary',
 	'bg-red-50',
 	'bg-yellow-50',
 	'bg-green-50',
@@ -53,6 +54,7 @@ export type FontColor = Extract<
 
 export type BackgroundColor = Extract<
 	Color,
+	| 'bg-primary'
 	| 'bg-red-50'
 	| 'bg-yellow-50'
 	| 'bg-green-50'

website/src/app/[lang]/[region]/v2/(home)/(components)/approach-cards.tsx

@@ -11,21 +11,21 @@ type ApproachCardProps = {
 
 export function ApproachCard({ category, title, points }: ApproachCardProps) {
 	return (
-		<Card className="bg-primary w-96">
+		<Card className="theme-blue-v2 w-96">
 			<CardHeader className="mb-1">
-				<Typography size="md" color="card" className="opacity-40">
+				<Typography size="md" className="opacity-40">
 					{category}
 				</Typography>
-				<Typography size="md" weight="medium" color="card">
+				<Typography size="md" weight="medium">
 					{title}
 				</Typography>
 			</CardHeader>
 			<CardContent className="mb-5 ml-4">
-				<ul className="list-disc text-white">
+				<ul className="list-disc">
 					{points.map((point, key) => {
 						return (
 							<li key={key}>
-								<Typography color="card">{point.text}</Typography>
+								<Typography>{point.text}</Typography>
 							</li>
 						);
 					})}

website/src/app/[lang]/[region]/v2/(home)/(components)/income-input.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { Button, Popover, PopoverContent, PopoverTrigger, Typography } from '@socialincome/ui';
+
+export function IncomeInput() {
+	const choices = ['CHF', 'USD'];
+
+	return (
+		<div className="flex flex-col text-white">
+			<div className="align-center flex items-center justify-center">
+				<Typography size="5xl" weight="medium" className=" mr-1 w-32 py-2 text-right opacity-40">
+					6
+				</Typography>
+				<Popover openDelay={100} closeDelay={200}>
+					<PopoverTrigger asChild>
+						<Button className="flex items-center space-x-1 ">
+							<Typography size="xs">{choices[0]}</Typography>
+							<ChevronDownIcon className="h-4 w-4" />
+						</Button>
+					</PopoverTrigger>
+					<PopoverContent asChild className="bg-popover w-12 p-0">
+						<ul className="divide-muted divide-y">
+							{choices.map((choice, index) => (
+								<li key={index} className="hover:bg-popover-muted py-2 text-center">
+									<Typography size="xs">{choice}</Typography>
+								</li>
+							))}
+						</ul>
+					</PopoverContent>
+				</Popover>
+			</div>
+			<div className="w-64 self-center opacity-40">
+				<hr />
+			</div>
+		</div>
+	);
+}

website/src/app/[lang]/[region]/v2/(home)/(components)/quotes-carousel.tsx

@@ -0,0 +1,64 @@
+'use client';
+import { useScreenSize } from '@/hooks/useScreenSize';
+import { Carousel, CarouselContent, Typography } from '@socialincome/ui';
+import { FontColor } from '@socialincome/ui/src/interfaces/color';
+import Image from 'next/image';
+import UNImageData from '../(assets)/un-logo.png';
+
+export type CarouselCardProps = {
+	quote: {
+		text: string;
+		color: FontColor;
+	}[];
+	icon: ImageData | string;
+	author: string;
+}[];
+
+export function QuotesCarousel(cardsObj: CarouselCardProps) {
+	const screenSize = useScreenSize();
+	let cardsArr = [];
+	for (const index in cardsObj) {
+		cardsArr.push(cardsObj[index]);
+	}
+
+	let slidesToScroll;
+	switch (screenSize) {
+		case null:
+		case 'xs':
+			slidesToScroll = 1;
+			break;
+		case 'sm':
+		case 'md':
+			slidesToScroll = 2;
+			break;
+		default:
+			slidesToScroll = 3;
+			break;
+	}
+	return (
+		<Carousel
+			options={{
+				loop: false,
+				autoPlay: { enabled: true, delay: 5000 },
+				slidesToScroll: slidesToScroll,
+			}}
+			showDots={true}
+		>
+			{cardsArr.map((card, index) => (
+				<CarouselContent key={index} className="flex basis-full flex-col items-center justify-center">
+					<div className="w-3/4 self-center text-center">
+						{card.quote.map((title, index) => (
+							<Typography as="span" size="2xl" weight="medium" color={title.color} key={index}>
+								{title.text}{' '}
+							</Typography>
+						))}
+					</div>
+					<Image src={UNImageData} alt="UN symbol" className="mb-3 mt-5 h-12 w-12" />
+					<Typography size="sm" className="mb-12">
+						{card.author}
+					</Typography>
+				</CarouselContent>
+			))}
+		</Carousel>
+	);
+}

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

@@ -1,24 +1,33 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
+import { VimeoVideo } from '@/components/vimeo-video';
 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'],
+		namespaces: ['website-home2', 'website-videos'],
 	});
 
 	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>
-				))}
+		<BaseContainer className="my-24">
+			<div className="align-center flex flex-col justify-center text-center">
+				<div className="mb-16 w-2/5 self-center">
+					{translator.t<{ text: string; color?: FontColor }[]>('section-4.title-1').map((title, index) => (
+						<Typography as="span" size="xl" key={index} color={title.color}>
+							{title.text}
+							{index ? '' : <br />}
+						</Typography>
+					))}
+				</div>
+				<div className="aspect-video w-80 self-center overflow-hidden rounded-lg">
+					<VimeoVideo videoId={Number(translator.t('id.video-02'))} />
+				</div>
+				<Typography color="accent" size="xs" className="mt-2">
+					{translator.t('section-4.cta')}
+				</Typography>
 			</div>
-			<Typography>{translator.t('section-4.cta')}</Typography>
 		</BaseContainer>
 	);
 }

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

@@ -27,7 +27,7 @@ export async function Faq({ lang, region }: DefaultParams) {
 	const questions = translator.t<FaqQuestion[]>('section-6.questions');
 
 	return (
-		<BaseContainer>
+		<BaseContainer className="mb-40 mt-32">
 			<Typography size="2xl" weight="medium" className="mb-12 text-center">
 				{translator.t('section-6.title-1')}
 			</Typography>

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

@@ -11,7 +11,7 @@ export async function HeroVideo({ lang, region }: DefaultParams) {
 
 	return (
 		<BaseContainer>
-			<div>
+			<div className="h-[calc(100vh-theme(spacing.20))]">
 				{translator.t<{ text: string; color?: FontColor }[]>('section-1.title-1').map((title, index) => (
 					<Typography as="span" key={index} color={title.color}>
 						{title.text}{' '}