feature(website): update approaches and quotes sections on new landin…

…g page
socialincome-san · Aug 12, 2024 · 3a1b7c6 · 3a1b7c6
1 parent 32e1088
commit 3a1b7c6
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 65 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
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
@@ -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
@@ -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, key) => (
+					<Card 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, key) => {
+									return (
+										<li key={key}>
+											<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
@@ -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
@@ -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
@@ -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
@@ -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} />*/}