feature(website): townhall presentation (#821)

socialincome-san · May 16, 2024 · 9eb7ac7 · 9eb7ac7
1 parent e14892b
commit 9eb7ac7
Show file tree

Hide file tree

Showing 21 changed files with 105 additions and 78 deletions.
diff --git a/ui/src/interfaces/color.ts b/ui/src/interfaces/color.ts
@@ -28,6 +28,8 @@ export const COLORS = [
 	'bg-purple-50',
 	'bg-pink-50',
 	'bg-muted',
+	'bg-primary',
+	'bg-foreground-dark',
 ] as const;
 export type Color = (typeof COLORS)[number];
 
@@ -63,4 +65,6 @@ export type BackgroundColor = Extract<
 	| 'bg-purple-50'
 	| 'bg-pink-50'
 	| 'bg-muted'
+	| 'bg-primary'
+	| 'bg-foreground-dark'
 >;
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(assets)/avatarImgData.jpg b/website/src/app/[lang]/[region]/v2/(home)/(assets)/avatarImgData.jpg
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(assets)/mobilesImgData.png b/website/src/app/[lang]/[region]/v2/(home)/(assets)/mobilesImgData.png
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(assets)/sdg-town.jpg b/website/src/app/[lang]/[region]/v2/(home)/(assets)/sdg-town.jpg
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
@@ -11,7 +11,7 @@ type ApproachCardProps = {
 
 export function ApproachCard({ category, title, points }: ApproachCardProps) {
 	return (
-		<Card className="theme-blue-v2 w-96">
+		<Card className="bg-foreground-dark w-96 rounded-none text-white">
 			<CardHeader className="mb-1">
 				<Typography size="md" className="opacity-40">
 					{category}

diff --git a/website/src/app/[lang]/[region]/v2/(home)/(components)/contributors-people-carousel.tsx b/website/src/app/[lang]/[region]/v2/(home)/(components)/contributors-people-carousel.tsx
@@ -15,7 +15,7 @@ function Portrait({ name, text, country, image }: PortraitProps) {
 	return (
 		<Card className="my-10 flex min-h-[15rem] flex-col rounded-none border-x-0 border-y-2 bg-inherit">
 			<CardHeader>
-				<Typography size="2xl" color="foreground">
+				<Typography size="2xl" weight="normal" color="foreground">
 					{text}
 				</Typography>
 			</CardHeader>
@@ -54,7 +54,6 @@ export function ContributorsPeopleCarouselv2({ portraits }: { portraits: Portrai
 				autoPlay: { enabled: true, delay: 5000 },
 				slidesToScroll: slidesToScroll,
 			}}
-			showControls
 			showDots={true}
 		>
 			{portraits.map((portrait, index) => (

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
@@ -9,13 +9,13 @@ export function IncomeInput() {
 	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">
+				<Typography weight="medium" className=" mr-1 w-48 py-2 text-right text-7xl 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>
+						<Button className="flex items-center space-x-1 bg-inherit">
+							<Typography>{choices[0]}</Typography>
 							<ChevronDownIcon className="h-4 w-4" />
 						</Button>
 					</PopoverTrigger>

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
@@ -46,14 +46,14 @@ export function QuotesCarousel(cardsObj: CarouselCardProps) {
 		>
 			{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">
+					<div className="w-4/5 self-center text-center">
 						{card.quote.map((title, index) => (
-							<Typography as="span" size="2xl" weight="medium" color={title.color} key={index}>
+							<Typography as="span" size="3xl" color={title.color} key={index}>
 								{title.text}{' '}
 							</Typography>
 						))}
 					</div>
-					<Image src={UNImageData} alt="UN symbol" className="mb-3 mt-5 h-12 w-12" />
+					<Image src={UNImageData} alt="UN symbol" className="mb-3 mt-5 h-auto w-12" />
 					<Typography size="sm" className="mb-12">
 						{card.author}
 					</Typography>

diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/approach.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/approach.tsx
@@ -20,7 +20,7 @@ export async function Approach({ lang, region }: DefaultParams) {
 
 	return (
 		<BaseContainer className="mb-32 mt-10 flex flex-col items-center justify-center">
-			<Typography size="2xl" weight="medium" color="foreground-dark" className="my-10 w-1/3 text-center">
+			<Typography size="3xl" weight="medium" color="foreground-dark" className="mb-16 mt-10 w-2/5 text-center">
 				{translator.t('section-7.title-1')}
 			</Typography>
 			<div className="flex">

diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/explainer-video.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/explainer-video.tsx
@@ -11,20 +11,20 @@ export async function ExplainerVideo({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer className="my-24">
+		<BaseContainer className="my-24 py-4">
 			<div className="align-center flex flex-col justify-center text-center">
-				<div className="mb-16 w-2/5 self-center">
+				<div className="mb-28 w-1/2 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}>
+						<Typography as="span" size="3xl" key={index} color={title.color}>
 							{title.text}
 							{index ? '' : <br />}
 						</Typography>
 					))}
 				</div>
-				<div className="aspect-video w-80 self-center overflow-hidden rounded-lg">
+				<div className="aspect-video w-96 self-center overflow-hidden rounded-lg">
 					<VimeoVideo videoId={Number(translator.t('id.video-02'))} />
 				</div>
-				<Typography color="accent" size="xs" className="mt-2">
+				<Typography color="accent" className="mt-4">
 					{translator.t('section-4.cta')}
 				</Typography>
 			</div>

diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/faq.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/faq.tsx
@@ -28,15 +28,17 @@ export async function Faq({ lang, region }: DefaultParams) {
 
 	return (
 		<BaseContainer className="mb-40 mt-32">
-			<Typography size="2xl" weight="medium" className="mb-12 text-center">
+			<Typography size="3xl" weight="medium" className="mb-16 text-center">
 				{translator.t('section-6.title-1')}
 			</Typography>
 			<hr />
 			<Accordion type="single" collapsible className="mb-10 w-full">
 				{questions.map((question, index) => (
 					<AccordionItem key={index} value={`item-${index}`}>
-						<AccordionTrigger>
-							<Typography size="lg">{question.prompt}</Typography>
+						<AccordionTrigger className="py-5">
+							<Typography size="xl" weight="normal">
+								{question.prompt}
+							</Typography>
 						</AccordionTrigger>
 						<AccordionContent className="text-popover-foreground">
 							<Typography size="lg">{question.answer}</Typography>

diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/hero-video.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/hero-video.tsx
@@ -1,7 +1,8 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
-import { BaseContainer, Typography } from '@socialincome/ui';
+import { BaseContainer, Button, Typography } from '@socialincome/ui';
 import { FontColor } from '@socialincome/ui/src/interfaces/color';
+import Script from 'next/script';
 
 export async function HeroVideo({ lang, region }: DefaultParams) {
 	const translator = await Translator.getInstance({
@@ -10,13 +11,28 @@ export async function HeroVideo({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer>
-			<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}{' '}
-					</Typography>
-				))}
+		<BaseContainer className="mb-80 mt-72 flex h-fit w-fit flex-col items-center justify-center">
+			<div>
+				<div className="relative z-10 m-auto flex w-3/5 flex-col text-center text-white ">
+					<div>
+						{translator.t<{ text: string; color?: FontColor }[]>('section-1.title-1').map((title, index) => (
+							<Typography as="span" size="5xl" weight="medium" key={index} color={title.color}>
+								{title.text}{' '}
+							</Typography>
+						))}
+					</div>
+					<Button className="relative z-10 mt-32 w-1/5 self-center text-center">Handle Jezt</Button>
+				</div>
+				<div className="self-center">
+					<iframe
+						src="https://player.vimeo.com/video/938363500?h=514d15126c&color=ffffff&title=0&byline=0&portrait=0"
+						className="absolute bottom-[calc(1vw-10.5%)] left-0 h-full w-full"
+						frameBorder={0}
+						allow="autoplay; fullscreen; picture-in-picture"
+						allowFullScreen={true}
+					/>
+				</div>
+				<Script src="https://player.vimeo.com/api/player.js"></Script>
 			</div>
 		</BaseContainer>
 	);

diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/journal.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/journal.tsx
@@ -1,11 +1,10 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { BaseContainer, Typography } from '@socialincome/ui';
-import { StaticImageData } from 'next/dist/shared/lib/get-img-props';
-import Image from 'next/image';
+import Image, { StaticImageData } from 'next/image';
 import { ReactElement } from 'react';
 import avatarImgData from '../(assets)/aurelie.png';
-import townImgData from '../(assets)/town.jpg';
+import townImgData from '../(assets)/sdg-town.jpg';
 
 type JournalCardDetails = {
 	title: string;
@@ -46,8 +45,8 @@ export async function Journal({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer className="mt-32 flex flex-col items-center justify-center space-y-12">
-			<Typography size="2xl" weight="medium">
+		<BaseContainer className="mt-64 flex flex-col items-center justify-center space-y-12">
+			<Typography size="3xl" weight="medium">
 				{translator.t('section-11.title')}
 			</Typography>
 			<div className="flex flex-row">

diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/mobile-illustration.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/mobile-illustration.tsx
@@ -12,20 +12,18 @@ export async function MobileIllustration({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer backgroundColor="bg-primary">
+		<BaseContainer backgroundColor="bg-foreground-dark" className="relative pb-96 pt-10">
 			<div className="flex flex-col items-center justify-center pt-12 text-center text-white">
-				<div>
+				<div className="z-10 mb-4">
 					{translator.t<{ text: string; color?: FontColor }[]>('section-5.title-1').map((title, index) => (
-						<Typography as="span" size="xl" key={index} color={title.color}>
+						<Typography as="span" size="3xl" key={index} color={title.color}>
 							{title.text}
 							<br />
 						</Typography>
 					))}
 				</div>
-				<Typography size="sm" className="w-80 pt-6">
-					{translator.t('section-5.subtitle-1')}
-				</Typography>
-				<Image src={MobilesImg} alt="Mobiles photo" className="px-20" />
+				<Typography className="z-10 w-96 pb-48 pt-6">{translator.t('section-5.subtitle-1')}</Typography>
+				<Image src={MobilesImg} alt="Mobiles photo" className="absolute top-44" />
 			</div>
 		</BaseContainer>
 	);

diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/monthly-income.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/monthly-income.tsx
@@ -10,14 +10,16 @@ export async function MonthlyIncome({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer backgroundColor="bg-primary">
-			<div className="bg-primary my-4 py-12 text-center text-white">
-				<Typography className="opacity-40">{translator.t('section-3.title-faded')}</Typography>
-				<Typography size="2xl" className="py-4">
+		<BaseContainer backgroundColor="bg-foreground-dark" className="py-3">
+			<div className="my-4 py-12 text-center text-white">
+				<Typography size="lg" className="opacity-40">
+					{translator.t('section-3.title-faded')}
+				</Typography>
+				<Typography size="3xl" className="py-8">
 					{translator.t('section-3.title')}
 				</Typography>
 				<IncomeInput />
-				<Typography className="pb-2 pt-6 opacity-40">{translator.t('section-3.subtitle')}</Typography>
+				<Typography className="pb-2 pt-8 opacity-40">{translator.t('section-3.subtitle')}</Typography>
 			</div>
 		</BaseContainer>
 	);

diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/overview.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/overview.tsx
@@ -10,11 +10,11 @@ export async function Overview({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer className="mb-32 mt-10 flex flex-col items-center justify-center">
+		<BaseContainer className="mb-48 flex flex-col items-center justify-center">
 			<Typography size="3xl" weight="medium" color="foreground-dark" className="my-10 w-3/5 text-center">
 				{translator.t('section-2.title-1')}
 			</Typography>
-			<div className="w-3/5 text-center">
+			<div className="mb-8 w-3/5 text-center">
 				{translator.t<{ text: string; color?: FontColor }[]>('section-2.title-2').map((title, index) => (
 					<Typography
 						as="span"
@@ -31,7 +31,7 @@ export async function Overview({ lang, region }: DefaultParams) {
 			<Typography size="3xl" weight="medium" color="foreground-dark" className="mb-5 mt-12 w-3/5 text-center">
 				{translator.t('section-2.title-3')}
 			</Typography>
-			<ol className="w-3/5 list-decimal">
+			<ol className="mb-8 w-3/5 list-decimal">
 				<li>
 					<Typography>{translator.t('section-2.text-3.1')}</Typography>
 				</li>
@@ -42,7 +42,7 @@ export async function Overview({ lang, region }: DefaultParams) {
 			<Typography size="3xl" weight="medium" color="foreground-dark" className="mb-5 mt-12 w-3/5 text-center">
 				{translator.t('section-2.title-4')}
 			</Typography>
-			<Typography className="w-3/5">{translator.t('section-2.text-4')}</Typography>
+			<Typography className="mb-8 w-3/5">{translator.t('section-2.text-4')}</Typography>
 			<Typography size="3xl" weight="medium" color="foreground-dark" className="mb-5 mt-12 w-3/5 text-center">
 				{translator.t('section-2.title-5')}
 			</Typography>

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,16 +12,16 @@ export async function RecipientSelection({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer className="theme-blue-v2 pt-16 text-white">
+		<BaseContainer backgroundColor="bg-foreground-dark" className="pt-16 text-white">
 			<div className="align-center flex flex-col justify-center text-center">
-				<div className="mb-12 w-2/5 self-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) => (
-						<Typography as="span" weight="medium" size="xl" key={index} color={title.color}>
+						<Typography as="span" weight="medium" size="3xl" key={index} color={title.color}>
 							{title.text}{' '}
 						</Typography>
 					))}
 				</div>
-				<Image src={YellowBlueDots} alt="Yellow and Blue dots" className="mb-16 px-80" />
+				<Image src={YellowBlueDots} alt="Yellow and Blue dots" className="mb-32 h-auto w-full px-80" />
 				<ol className="m-8 flex list-decimal flex-row gap-x-10 text-justify">
 					<li className="mx-4">
 						<Typography size="sm">{translator.t('section-9.text-1.1')}</Typography>

diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/sdgoals.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/sdgoals.tsx
@@ -4,6 +4,7 @@ import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { BaseContainer, Typography } from '@socialincome/ui';
 import { FontColor } from '@socialincome/ui/src/interfaces/color';
 import Image from 'next/image';
+import Town from '../(assets)/sdg-town.jpg';
 
 export async function Sdgoals({ lang, region }: DefaultParams) {
 	const translator = await Translator.getInstance({
@@ -12,31 +13,34 @@ export async function Sdgoals({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer className="aspect-[8/5] bg-[url('/assets/sdg-town.jpg')] bg-cover bg-local bg-no-repeat">
-			<div className="flex flex-col items-center justify-center pt-16">
-				<div className="text-white">
-					{translator.t<{ text: string; color?: FontColor }[]>('section-10.title-1').map((title, index) => (
-						<Typography as="span" key={index} size="xl" color={title.color}>
-							{title.text}{' '}
-						</Typography>
-					))}
-				</div>
-				<Image className="h-7 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-primary flex h-72 w-1/5 -rotate-6 flex-col self-center pt-24">
-					<Typography weight="medium" className="mb-24 w-1/2 self-center">
-						{translator.t('section-10.sdg-1-title')}
-					</Typography>
-					<Typography size="xs">{translator.t('section-10.sdg-1')}</Typography>
+		<div className="relative">
+			<BaseContainer className="relative pb-14">
+				<div className="flex flex-col items-center justify-center pb-10 pt-20">
+					<div className="z-10 text-white">
+						{translator.t<{ text: string; color?: FontColor }[]>('section-10.title-1').map((title, index) => (
+							<Typography as="span" key={index} size="3xl" color={title.color}>
+								{title.text}{' '}
+							</Typography>
+						))}
+					</div>
+					<Image className="z-10 my-4 h-9 w-auto max-w-xs" src={sdgLogo} alt="Sustainable Development Goals Logo" />
 				</div>
-				<div className="bg-accent relative right-6 top-6 flex h-72 w-1/5 rotate-3 flex-col self-center pt-24">
-					<Typography weight="medium" className="mb-24 w-3/5 self-center">
-						{translator.t('section-10.sdg-10-title')}
-					</Typography>
-					<Typography size="xs">{translator.t('section-10.sdg-10')}</Typography>
+				<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">
+						<Typography size="3xl" className="mb-40 w-2/3 self-center pt-32">
+							{translator.t('section-10.sdg-1-title')}
+						</Typography>
+						<Typography>{translator.t('section-10.sdg-1')}</Typography>
+					</div>
+					<div className="bg-accent relative right-12 top-10 z-10 flex h-[33rem] w-1/3 rotate-3 flex-col self-center pt-24">
+						<Typography size="3xl" className="mb-40 w-4/5 self-center pt-32">
+							{translator.t('section-10.sdg-10-title')}
+						</Typography>
+						<Typography>{translator.t('section-10.sdg-10')}</Typography>
+					</div>
 				</div>
-			</div>
-		</BaseContainer>
+			</BaseContainer>
+			<Image src={Town} alt="Town image" className="absolute top-0 h-auto w-full" />
+		</div>
 	);
 }
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/testimonials.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/testimonials.tsx
@@ -46,7 +46,7 @@ export async function Testimonials({ lang, region }: DefaultParams) {
 	];
 
 	return (
-		<BaseContainer className="mt-10">
+		<BaseContainer className="my-16">
 			<ContributorsPeopleCarouselv2 portraits={portrait} />
 		</BaseContainer>
 	);