From 1e0991e44042a4b158c3df8432145033235b866a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20K=C3=BCndig?= <michael@socialincome.org>
Date: Mon, 12 Aug 2024 22:49:07 +0200
Subject: [PATCH] feature(website): update approaches and quotes sections on
 new landing page (#892)

---
 ui/src/components/carousel.tsx                |  1 +
 ui/src/components/typography/typography.tsx   |  1 -
 ui/src/globals.css                            |  4 +-
 ui/src/interfaces/color.ts                    |  4 --
 ui/tailwind.config.ts                         |  5 +--
 .../v2/(home)/(components)/approach-cards.tsx | 36 ------------------
 .../v2/(home)/(components)/income-input.tsx   |  2 +-
 .../v2/(home)/(components)/mux-video.tsx      |  1 +
 .../(home)/(components)/quotes-carousel.tsx   | 12 +++---
 .../v2/(home)/(sections)/approach.tsx         | 37 ++++++++++++++-----
 .../[region]/v2/(home)/(sections)/quotes.tsx  |  2 +-
 .../(home)/(sections)/recipient-selection.tsx |  2 +-
 .../[region]/v2/(home)/(sections)/sdgoals.tsx |  2 +-
 .../app/[lang]/[region]/v2/(home)/page.tsx    |  6 ++-
 14 files changed, 49 insertions(+), 66 deletions(-)
 delete mode 100644 website/src/app/[lang]/[region]/v2/(home)/(components)/approach-cards.tsx

diff --git a/ui/src/components/carousel.tsx b/ui/src/components/carousel.tsx
index 9eb01227a..98778fba3 100644
--- a/ui/src/components/carousel.tsx
+++ b/ui/src/components/carousel.tsx
@@ -118,6 +118,7 @@ const CarouselDots = ({ itemsLength, selectedIndex, onClick }: CarouselDots) =>
 						key={index}
 						className={cn('bg-muted-foreground h-2 w-2 rounded-full transition-all duration-300', {
 							'opacity-50': !selected,
+							'cursor-pointer': onClick,
 						})}
 						onClick={() => onClick?.(index)}
 					></div>
diff --git a/ui/src/components/typography/typography.tsx b/ui/src/components/typography/typography.tsx
index 26ff4c778..627897fab 100644
--- a/ui/src/components/typography/typography.tsx
+++ b/ui/src/components/typography/typography.tsx
@@ -29,7 +29,6 @@ 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',
diff --git a/ui/src/globals.css b/ui/src/globals.css
index dcdc44aaa..b3bb26532 100644
--- a/ui/src/globals.css
+++ b/ui/src/globals.css
@@ -83,7 +83,9 @@
 	.theme-v2 {
 		--background: 50 33% 96%;
 		--foreground: 206 99% 31%;
-		--foreground-dark: 212 59% 40%;
+
+		--muted: 222 100% 98%;
+		--muted-foreground: 212 59% 40%;
 	}
 
 	.theme-blue-v2 {
diff --git a/ui/src/interfaces/color.ts b/ui/src/interfaces/color.ts
index 0f6ca8544..9a00ae11b 100644
--- a/ui/src/interfaces/color.ts
+++ b/ui/src/interfaces/color.ts
@@ -1,6 +1,5 @@
 export const COLORS = [
 	'foreground',
-	'foreground-dark',
 	'background',
 	'border',
 	'input',
@@ -29,7 +28,6 @@ export const COLORS = [
 	'bg-pink-50',
 	'bg-muted',
 	'bg-primary',
-	'bg-foreground-dark',
 	'bg-background',
 	'bg-transparent',
 ] as const;
@@ -38,7 +36,6 @@ export type Color = (typeof COLORS)[number];
 export type FontColor = Extract<
 	Color,
 	| 'foreground'
-	| 'foreground-dark'
 	| 'background'
 	| 'primary'
 	| 'primary-foreground'
@@ -67,7 +64,6 @@ export type BackgroundColor = Extract<
 	| 'bg-purple-50'
 	| 'bg-pink-50'
 	| 'bg-muted'
-	| 'bg-foreground-dark'
 	| 'bg-background'
 	| 'bg-transparent'
 >;
diff --git a/ui/tailwind.config.ts b/ui/tailwind.config.ts
index e0ca144ce..50f5639a8 100644
--- a/ui/tailwind.config.ts
+++ b/ui/tailwind.config.ts
@@ -20,10 +20,7 @@ module.exports = {
 				input: 'hsl(var(--input) / <alpha-value>)',
 				ring: 'hsl(var(--ring) / <alpha-value>)',
 				background: 'hsl(var(--background) / <alpha-value>)',
-				foreground: {
-					DEFAULT: 'hsl(var(--foreground) / <alpha-value>)',
-					dark: 'hsl(var(--foreground-dark) / <alpha-value>)',
-				},
+				foreground: 'hsl(var(--foreground) / <alpha-value>)',
 				muted: {
 					DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
 					foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(components)/approach-cards.tsx b/website/src/app/[lang]/[region]/v2/(home)/(components)/approach-cards.tsx
deleted file mode 100644
index aa9e33789..000000000
--- a/website/src/app/[lang]/[region]/v2/(home)/(components)/approach-cards.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-'use client';
-import { Card, CardContent, CardHeader, Typography } from '@socialincome/ui';
-
-type ApproachCardProps = {
-	category: string;
-	title: string;
-	points: {
-		text: string;
-	}[];
-};
-
-export function ApproachCard({ category, title, points }: ApproachCardProps) {
-	return (
-		<Card className="bg-foreground-dark w-96 rounded-none text-white">
-			<CardHeader className="mb-1">
-				<Typography size="md" className="opacity-40">
-					{category}
-				</Typography>
-				<Typography size="md" weight="medium">
-					{title}
-				</Typography>
-			</CardHeader>
-			<CardContent className="mb-5 ml-4">
-				<ul className="list-disc">
-					{points.map((point, key) => {
-						return (
-							<li key={key}>
-								<Typography>{point.text}</Typography>
-							</li>
-						);
-					})}
-				</ul>
-			</CardContent>
-		</Card>
-	);
-}
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(components)/income-input.tsx b/website/src/app/[lang]/[region]/v2/(home)/(components)/income-input.tsx
index f8a06d0a9..41d3d9492 100644
--- a/website/src/app/[lang]/[region]/v2/(home)/(components)/income-input.tsx
+++ b/website/src/app/[lang]/[region]/v2/(home)/(components)/income-input.tsx
@@ -36,7 +36,7 @@ export function IncomeInput() {
 
 	useEffect(() => {
 		form.setValue('currency', currency);
-	}, [currency]);
+	}, [form, currency]);
 
 	const onSubmit = async (values: FormSchema) => {
 		alert(`You entered: ${values.value} ${values.currency}`);
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(components)/mux-video.tsx b/website/src/app/[lang]/[region]/v2/(home)/(components)/mux-video.tsx
index 46768d0c1..26f11ff53 100644
--- a/website/src/app/[lang]/[region]/v2/(home)/(components)/mux-video.tsx
+++ b/website/src/app/[lang]/[region]/v2/(home)/(components)/mux-video.tsx
@@ -27,6 +27,7 @@ const MuxVideoComponent = () => {
 		return () => {
 			setBackgroundColor('bg-background');
 		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [entry]);
 
 	useEffect(() => {
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(components)/quotes-carousel.tsx b/website/src/app/[lang]/[region]/v2/(home)/(components)/quotes-carousel.tsx
index fe89f010c..9b4738faa 100644
--- a/website/src/app/[lang]/[region]/v2/(home)/(components)/quotes-carousel.tsx
+++ b/website/src/app/[lang]/[region]/v2/(home)/(components)/quotes-carousel.tsx
@@ -35,24 +35,26 @@ export function QuotesCarousel(cardsObj: CarouselCardProps) {
 			slidesToScroll = 3;
 			break;
 	}
+
+	// TODO: update carousel content
 	return (
 		<Carousel
 			options={{
 				loop: false,
 				autoPlay: { enabled: true, delay: 5000 },
-				slidesToScroll: slidesToScroll,
+				slidesToScroll: 1,
 			}}
 			showDots={true}
 		>
 			{cardsArr.map((card, index) => (
-				<CarouselContent key={index} className="flex basis-full flex-col items-center justify-center">
-					<div className="w-4/5 self-center text-center">
+				<CarouselContent key={index} className="flex flex-col items-center">
+					<Typography size="3xl" className="w-4/5 text-center">
 						{card.quote.map((title, index) => (
-							<Typography as="span" size="3xl" color={title.color} key={index}>
+							<Typography as="span" color={title.color} key={index}>
 								{title.text}{' '}
 							</Typography>
 						))}
-					</div>
+					</Typography>
 					<Image src={UNImageData} alt="UN symbol" className="mb-3 mt-5 h-auto w-12" />
 					<Typography size="sm" className="mb-12">
 						{card.author}
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/approach.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/approach.tsx
index 02034120c..9406c8784 100644
--- a/website/src/app/[lang]/[region]/v2/(home)/(sections)/approach.tsx
+++ b/website/src/app/[lang]/[region]/v2/(home)/(sections)/approach.tsx
@@ -1,7 +1,6 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
-import { BaseContainer, Typography } from '@socialincome/ui';
-import { ApproachCard } from '../(components)/approach-cards';
+import { Card, CardContent, CardHeader, Typography } from '@socialincome/ui';
 
 type ApproachCardProps = {
 	category: string;
@@ -19,15 +18,35 @@ export async function Approach({ lang, region }: DefaultParams) {
 	const cards = translator.t<ApproachCardProps[]>('section-7.cards');
 
 	return (
-		<BaseContainer className="mb-32 mt-10 flex flex-col items-center justify-center">
-			<Typography size="3xl" weight="medium" color="foreground-dark" className="mb-16 mt-10 w-2/5 text-center">
+		<div className="flex flex-col items-center justify-center px-8 py-16">
+			<Typography size="3xl" weight="medium" className="mb-8 w-4/5 max-w-xl text-center md:mb-16">
 				{translator.t('section-7.title-1')}
 			</Typography>
-			<div className="flex">
-				{cards.map((card, key) => {
-					return <ApproachCard key={key} category={card.category} title={card.title} points={card.points} />;
-				})}
+			<div className="mx-auto flex w-full max-w-7xl flex-wrap gap-2">
+				{cards.map((card) => (
+					<Card key={card.title} className="theme-blue-v2 mx-auto min-w-80 max-w-md flex-1 rounded-none border-none">
+						<CardHeader className="mb-1">
+							<Typography size="md" className="opacity-40">
+								{card.category}
+							</Typography>
+							<Typography size="md" weight="medium">
+								{card.title}
+							</Typography>
+						</CardHeader>
+						<CardContent className="mb-5 ml-4">
+							<ul className="list-disc">
+								{card.points.map((point) => {
+									return (
+										<li key={point.text}>
+											<Typography>{point.text}</Typography>
+										</li>
+									);
+								})}
+							</ul>
+						</CardContent>
+					</Card>
+				))}
 			</div>
-		</BaseContainer>
+		</div>
 	);
 }
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/quotes.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/quotes.tsx
index ec7d374ae..39f2d00ae 100644
--- a/website/src/app/[lang]/[region]/v2/(home)/(sections)/quotes.tsx
+++ b/website/src/app/[lang]/[region]/v2/(home)/(sections)/quotes.tsx
@@ -12,7 +12,7 @@ export async function Quotes({ lang, region }: DefaultParams) {
 	const cards = translator.t<CarouselCardProps>('section-8.cards');
 
 	return (
-		<BaseContainer className="my-10">
+		<BaseContainer className="py-16">
 			<QuotesCarousel {...cards} />
 		</BaseContainer>
 	);
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/recipient-selection.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/recipient-selection.tsx
index 2f5aa1976..574a82952 100644
--- a/website/src/app/[lang]/[region]/v2/(home)/(sections)/recipient-selection.tsx
+++ b/website/src/app/[lang]/[region]/v2/(home)/(sections)/recipient-selection.tsx
@@ -12,7 +12,7 @@ export async function RecipientSelection({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer backgroundColor="bg-foreground-dark" className="pt-16 text-white">
+		<BaseContainer className="pt-16 text-white">
 			<div className="align-center flex flex-col justify-center text-center">
 				<div className="mb-16 mt-10 w-1/2 self-center">
 					{translator.t<{ text: string; color?: FontColor }[]>('section-9.title-1').map((title, index) => (
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/sdgoals.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/sdgoals.tsx
index 69b132c59..b7367a407 100644
--- a/website/src/app/[lang]/[region]/v2/(home)/(sections)/sdgoals.tsx
+++ b/website/src/app/[lang]/[region]/v2/(home)/(sections)/sdgoals.tsx
@@ -26,7 +26,7 @@ export async function Sdgoals({ lang, region }: DefaultParams) {
 					<Image className="z-10 my-4 h-9 w-auto max-w-xs" src={sdgLogo} alt="Sustainable Development Goals Logo" />
 				</div>
 				<div className="my-12 flex flex-row items-center justify-center text-center text-white">
-					<div className="bg-foreground-dark z-10 flex h-[33rem] w-1/3 -rotate-6 flex-col self-center pt-24">
+					<div className="z-10 flex h-[33rem] w-1/3 -rotate-6 flex-col self-center pt-24">
 						<Typography size="3xl" className="mb-40 w-2/3 self-center pt-32">
 							{translator.t('section-10.sdg-1-title')}
 						</Typography>
diff --git a/website/src/app/[lang]/[region]/v2/(home)/page.tsx b/website/src/app/[lang]/[region]/v2/(home)/page.tsx
index 17313b5f0..07c7d688f 100644
--- a/website/src/app/[lang]/[region]/v2/(home)/page.tsx
+++ b/website/src/app/[lang]/[region]/v2/(home)/page.tsx
@@ -1,4 +1,6 @@
 import { DefaultPageProps } from '@/app/[lang]/[region]';
+import { Approach } from '@/app/[lang]/[region]/v2/(home)/(sections)/approach';
+import { Quotes } from '@/app/[lang]/[region]/v2/(home)/(sections)/quotes';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { ExplainerVideo } from './(sections)/explainer-video';
 import { HeroVideo } from './(sections)/hero-video';
@@ -19,8 +21,8 @@ export default async function Page({ params: { lang, region } }: DefaultPageProp
 			<ExplainerVideo lang={lang} region={region} />
 			<MobileIllustration lang={lang} region={region} />
 			{/*<Faq lang={lang} region={region} />*/}
-			{/*<Approach lang={lang} region={region} />*/}
-			{/*<Quotes lang={lang} region={region} />*/}
+			<Approach lang={lang} region={region} />
+			<Quotes lang={lang} region={region} />
 			{/*<RecipientSelection lang={lang} region={region} />*/}
 			{/*<Testimonials lang={lang} region={region} />*/}
 			{/*<Sdgoals lang={lang} region={region} />*/}