From 2eefac17903c8d5ebe8989259136fc0bf02cca28 Mon Sep 17 00:00:00 2001
From: Mathilde Deutschmann <mathilde.deutschmann@md-systems.ch>
Date: Wed, 22 Jan 2025 17:33:14 +0100
Subject: [PATCH 1/5] new footer design

---
 website/src/components/footer/footer.tsx | 43 +++++-------------------
 1 file changed, 8 insertions(+), 35 deletions(-)

diff --git a/website/src/components/footer/footer.tsx b/website/src/components/footer/footer.tsx
index b99077efa..2baae9b64 100644
--- a/website/src/components/footer/footer.tsx
+++ b/website/src/components/footer/footer.tsx
@@ -20,7 +20,7 @@ function FooterLink({ label, url, Icon, target = '_self' }: FooterLinkProps) {
 	return (
 		<Link href={url} className="group inline-flex items-center space-x-3" target={target}>
 			{Icon && <Icon className="group-hover:fill-base-content fill-muted-foreground h-4 w-4" />}
-			<Typography size="sm" className="group-hover:text-base-content text-muted-foreground">
+			<Typography size="xl" className="group-hover:text-base-content text-muted-foreground">
 				{label}
 			</Typography>
 		</Link>
@@ -41,74 +41,55 @@ export default async function Footer({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer className="pb-8 pt-16">
+		<BaseContainer backgroundColor="bg-primary" className="theme-blue !bg-background pb-8 pt-10">
 			<div className="space-y-4">
-				<div className="flex flex-row items-center justify-between">
-					<SILogo className="fill-muted-foreground h-4" />
-					<div className="hidden items-center gap-x-1 md:flex">
-						<FooterClient
-							lang={lang}
-							region={region}
-							languages={supportedTranslatedLanguages}
-							regions={supportedTranslatedCountries}
-						/>
-					</div>
-				</div>
-				<hr className="border-muted-foreground"></hr>
 				<div className="grid grid-cols-2 gap-8 md:grid-cols-4">
 					<div className="flex flex-col space-y-1">
-						<Typography className="mb-2" size="lg" weight="medium" color="muted-foreground">
+						<Typography size="sm" weight="medium" color="muted-foreground">
 							{translator.t('footer.follow-us')}
 						</Typography>
 						<FooterLink
-							Icon={SiInstagram}
 							label="Instagram"
 							url="https://www.instagram.com/so_income"
 							target="_blank"
 						/>
-						<FooterLink Icon={SiX} label="X" url="https://twitter.com/so_income" target="_blank" />
+						<FooterLink label="X" url="https://twitter.com/so_income" target="_blank" />
 						<FooterLink
-							Icon={SiFacebook}
 							label="Facebook"
 							url="https://facebook.com/socialincome.org"
 							target="_blank"
 						/>
 						<FooterLink
-							Icon={SiLinkedin}
 							label="Linkedin"
 							url="https://www.linkedin.com/company/socialincome"
 							target="_blank"
 						/>
 						<FooterLink
-							Icon={SiGithub}
 							label="GitHub"
 							url="https://github.com/socialincome-san/public"
 							target="_blank"
 						/>
 						<FooterLink
-							Icon={SiMaildotru}
 							label={translator.t('footer.newsletter')}
 							url={`/${lang}/${region}/newsletter`}
 						/>
 					</div>
 					<div className="flex flex-col space-y-1">
-						<Typography className="mb-2" size="lg" weight="medium" color="muted-foreground">
+						<Typography size="sm" weight="medium" color="muted-foreground">
 							{translator.t('footer.resources')}
 						</Typography>
 						<FooterLink
-							Icon={InformationCircleIcon}
 							label={translator.t('navigation.faq')}
 							url={`/${lang}/${region}/faq`}
 						/>
 						<FooterLink
-							Icon={UserCircleIcon}
 							label={translator.t('navigation.my-account')}
 							url={`/${lang}/${region}/login`}
 						/>
-						<FooterLink Icon={DocumentTextIcon} label={translator.t('footer.legal')} url={`/${lang}/${region}/legal`} />
+						<FooterLink label={translator.t('footer.legal')} url={`/${lang}/${region}/legal`} />
 					</div>
 					<div className="flex flex-col space-y-1">
-						<Typography className="mb-2" size="lg" weight="medium" color="muted-foreground">
+						<Typography size="sm" weight="medium" color="muted-foreground">
 							{translator.t('navigation.our-work')}
 						</Typography>
 						<FooterLink
@@ -123,7 +104,7 @@ export default async function Footer({ lang, region }: DefaultParams) {
 						<FooterLink label={translator.t('navigation.whats-next')} url={`/${lang}/${region}/our-work#whats-next`} />
 					</div>
 					<div className="flex flex-col space-y-1">
-						<Typography className="mb-2" size="lg" weight="medium" color="muted-foreground">
+						<Typography size="sm" weight="medium" color="muted-foreground">
 							{translator.t('navigation.about-us')}
 						</Typography>
 						<FooterLink
@@ -133,14 +114,6 @@ export default async function Footer({ lang, region }: DefaultParams) {
 						<FooterLink label={translator.t('navigation.team')} url={`/${lang}/${region}/about-us#team`} />
 					</div>
 				</div>
-				<div className="flex flex-col md:hidden">
-					<FooterClient
-						lang={lang}
-						region={region}
-						languages={supportedTranslatedLanguages}
-						regions={supportedTranslatedCountries}
-					/>
-				</div>
 			</div>
 		</BaseContainer>
 	);

From d2259bb8fb806ac064e426f68813d5e50ea108b1 Mon Sep 17 00:00:00 2001
From: mdumond <mdumond@users.noreply.github.com>
Date: Wed, 22 Jan 2025 16:37:39 +0000
Subject: [PATCH 2/5] Prettified Code!

---
 website/src/components/footer/footer.tsx | 43 ++++--------------------
 1 file changed, 7 insertions(+), 36 deletions(-)

diff --git a/website/src/components/footer/footer.tsx b/website/src/components/footer/footer.tsx
index 2baae9b64..6508967d2 100644
--- a/website/src/components/footer/footer.tsx
+++ b/website/src/components/footer/footer.tsx
@@ -1,9 +1,5 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
-import { FooterClient } from '@/components/footer/footer-client';
-import { SILogo } from '@/components/logos/si-logo';
 import { WebsiteLanguage, websiteRegions } from '@/i18n';
-import { DocumentTextIcon, InformationCircleIcon, UserCircleIcon } from '@heroicons/react/24/solid';
-import { SiFacebook, SiGithub, SiInstagram, SiLinkedin, SiMaildotru, SiX } from '@icons-pack/react-simple-icons';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { BaseContainer, Typography } from '@socialincome/ui';
 import Link from 'next/link';
@@ -48,44 +44,19 @@ export default async function Footer({ lang, region }: DefaultParams) {
 						<Typography size="sm" weight="medium" color="muted-foreground">
 							{translator.t('footer.follow-us')}
 						</Typography>
-						<FooterLink
-							label="Instagram"
-							url="https://www.instagram.com/so_income"
-							target="_blank"
-						/>
+						<FooterLink label="Instagram" url="https://www.instagram.com/so_income" target="_blank" />
 						<FooterLink label="X" url="https://twitter.com/so_income" target="_blank" />
-						<FooterLink
-							label="Facebook"
-							url="https://facebook.com/socialincome.org"
-							target="_blank"
-						/>
-						<FooterLink
-							label="Linkedin"
-							url="https://www.linkedin.com/company/socialincome"
-							target="_blank"
-						/>
-						<FooterLink
-							label="GitHub"
-							url="https://github.com/socialincome-san/public"
-							target="_blank"
-						/>
-						<FooterLink
-							label={translator.t('footer.newsletter')}
-							url={`/${lang}/${region}/newsletter`}
-						/>
+						<FooterLink label="Facebook" url="https://facebook.com/socialincome.org" target="_blank" />
+						<FooterLink label="Linkedin" url="https://www.linkedin.com/company/socialincome" target="_blank" />
+						<FooterLink label="GitHub" url="https://github.com/socialincome-san/public" target="_blank" />
+						<FooterLink label={translator.t('footer.newsletter')} url={`/${lang}/${region}/newsletter`} />
 					</div>
 					<div className="flex flex-col space-y-1">
 						<Typography size="sm" weight="medium" color="muted-foreground">
 							{translator.t('footer.resources')}
 						</Typography>
-						<FooterLink
-							label={translator.t('navigation.faq')}
-							url={`/${lang}/${region}/faq`}
-						/>
-						<FooterLink
-							label={translator.t('navigation.my-account')}
-							url={`/${lang}/${region}/login`}
-						/>
+						<FooterLink label={translator.t('navigation.faq')} url={`/${lang}/${region}/faq`} />
+						<FooterLink label={translator.t('navigation.my-account')} url={`/${lang}/${region}/login`} />
 						<FooterLink label={translator.t('footer.legal')} url={`/${lang}/${region}/legal`} />
 					</div>
 					<div className="flex flex-col space-y-1">

From b1a18e2a3365f4803b364035b119ba4636ea1b1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20K=C3=BCndig?= <michael@cradle.bio>
Date: Thu, 23 Jan 2025 17:58:45 +0100
Subject: [PATCH 3/5] Small cleanups

---
 ui/src/components/containers/base-container.tsx        |  8 ++++----
 .../app/[lang]/[region]/(website)/arts/section-2.tsx   |  2 +-
 website/src/components/footer/footer.tsx               | 10 +---------
 3 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/ui/src/components/containers/base-container.tsx b/ui/src/components/containers/base-container.tsx
index ba4f1b77d..ec2b1ac33 100644
--- a/ui/src/components/containers/base-container.tsx
+++ b/ui/src/components/containers/base-container.tsx
@@ -3,15 +3,15 @@ import { twMerge } from 'tailwind-merge';
 import { BackgroundColor } from '../../interfaces/color';
 
 type BaseContainerProps = {
-	backgroundColor?: BackgroundColor;
+	baseClassNames?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 export const BaseContainer = React.forwardRef<HTMLDivElement, BaseContainerProps>(
-	({ children, className, backgroundColor, ...props }, ref) => {
+	({ children, className, baseClassNames, ...props }, ref) => {
 		return (
-			<div className={backgroundColor}>
+			<div className={baseClassNames}>
 				<div className="mx-auto max-w-6xl px-3 md:px-6">
-					<div className={twMerge(backgroundColor, className)} ref={ref} {...props}>
+					<div className={twMerge(baseClassNames, className)} ref={ref} {...props}>
 						{children}
 					</div>
 				</div>
diff --git a/website/src/app/[lang]/[region]/(website)/arts/section-2.tsx b/website/src/app/[lang]/[region]/(website)/arts/section-2.tsx
index d2ff11153..d8a105708 100644
--- a/website/src/app/[lang]/[region]/(website)/arts/section-2.tsx
+++ b/website/src/app/[lang]/[region]/(website)/arts/section-2.tsx
@@ -12,7 +12,7 @@ export default async function Section2({ params }: DefaultPageProps) {
 	const cards = translator.t<CardTranslation[]>(`section-2.cards`);
 
 	return (
-		<BaseContainer backgroundColor="bg-yellow-50" className="flex flex-col space-y-1 py-16 md:px-20">
+		<BaseContainer baseClassNames="bg-yellow-50" className="flex flex-col space-y-1 py-16 md:px-20">
 			<Typography size="xl" weight="medium" color="muted-foreground">
 				{translator.t(`section-2.topic`)}
 			</Typography>
diff --git a/website/src/components/footer/footer.tsx b/website/src/components/footer/footer.tsx
index 6508967d2..3a7c57ba9 100644
--- a/website/src/components/footer/footer.tsx
+++ b/website/src/components/footer/footer.tsx
@@ -1,5 +1,4 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
-import { WebsiteLanguage, websiteRegions } from '@/i18n';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { BaseContainer, Typography } from '@socialincome/ui';
 import Link from 'next/link';
@@ -29,15 +28,8 @@ export default async function Footer({ lang, region }: DefaultParams) {
 		namespaces: ['common', 'website-common', 'website-me'],
 	});
 
-	const supportedTranslatedLanguages = (['de', 'en', 'it', 'fr'] as WebsiteLanguage[]).map((lang) => {
-		return { translation: translator.t(`languages.${lang}`), code: lang };
-	});
-	const supportedTranslatedCountries = websiteRegions.map((region) => {
-		return { translation: translator.t(`regions.${region}`), code: region };
-	});
-
 	return (
-		<BaseContainer backgroundColor="bg-primary" className="theme-blue !bg-background pb-8 pt-10">
+		<BaseContainer baseClassNames="theme-blue" className="pb-8 pt-10">
 			<div className="space-y-4">
 				<div className="grid grid-cols-2 gap-8 md:grid-cols-4">
 					<div className="flex flex-col space-y-1">

From 06dc8d061cf1196ca990448e44db6d0aca392672 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20K=C3=BCndig?= <michael@cradle.bio>
Date: Thu, 23 Jan 2025 17:58:45 +0100
Subject: [PATCH 4/5] Small cleanups

---
 ui/src/components/containers/base-container.tsx        |  9 ++++-----
 .../app/[lang]/[region]/(website)/arts/section-2.tsx   |  2 +-
 website/src/components/footer/footer.tsx               | 10 +---------
 3 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/ui/src/components/containers/base-container.tsx b/ui/src/components/containers/base-container.tsx
index ba4f1b77d..182c97b42 100644
--- a/ui/src/components/containers/base-container.tsx
+++ b/ui/src/components/containers/base-container.tsx
@@ -1,17 +1,16 @@
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
-import { BackgroundColor } from '../../interfaces/color';
 
 type BaseContainerProps = {
-	backgroundColor?: BackgroundColor;
+	baseClassNames?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 export const BaseContainer = React.forwardRef<HTMLDivElement, BaseContainerProps>(
-	({ children, className, backgroundColor, ...props }, ref) => {
+	({ children, className, baseClassNames, ...props }, ref) => {
 		return (
-			<div className={backgroundColor}>
+			<div className={baseClassNames}>
 				<div className="mx-auto max-w-6xl px-3 md:px-6">
-					<div className={twMerge(backgroundColor, className)} ref={ref} {...props}>
+					<div className={twMerge(baseClassNames, className)} ref={ref} {...props}>
 						{children}
 					</div>
 				</div>
diff --git a/website/src/app/[lang]/[region]/(website)/arts/section-2.tsx b/website/src/app/[lang]/[region]/(website)/arts/section-2.tsx
index d2ff11153..d8a105708 100644
--- a/website/src/app/[lang]/[region]/(website)/arts/section-2.tsx
+++ b/website/src/app/[lang]/[region]/(website)/arts/section-2.tsx
@@ -12,7 +12,7 @@ export default async function Section2({ params }: DefaultPageProps) {
 	const cards = translator.t<CardTranslation[]>(`section-2.cards`);
 
 	return (
-		<BaseContainer backgroundColor="bg-yellow-50" className="flex flex-col space-y-1 py-16 md:px-20">
+		<BaseContainer baseClassNames="bg-yellow-50" className="flex flex-col space-y-1 py-16 md:px-20">
 			<Typography size="xl" weight="medium" color="muted-foreground">
 				{translator.t(`section-2.topic`)}
 			</Typography>
diff --git a/website/src/components/footer/footer.tsx b/website/src/components/footer/footer.tsx
index 6508967d2..3a7c57ba9 100644
--- a/website/src/components/footer/footer.tsx
+++ b/website/src/components/footer/footer.tsx
@@ -1,5 +1,4 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
-import { WebsiteLanguage, websiteRegions } from '@/i18n';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { BaseContainer, Typography } from '@socialincome/ui';
 import Link from 'next/link';
@@ -29,15 +28,8 @@ export default async function Footer({ lang, region }: DefaultParams) {
 		namespaces: ['common', 'website-common', 'website-me'],
 	});
 
-	const supportedTranslatedLanguages = (['de', 'en', 'it', 'fr'] as WebsiteLanguage[]).map((lang) => {
-		return { translation: translator.t(`languages.${lang}`), code: lang };
-	});
-	const supportedTranslatedCountries = websiteRegions.map((region) => {
-		return { translation: translator.t(`regions.${region}`), code: region };
-	});
-
 	return (
-		<BaseContainer backgroundColor="bg-primary" className="theme-blue !bg-background pb-8 pt-10">
+		<BaseContainer baseClassNames="theme-blue" className="pb-8 pt-10">
 			<div className="space-y-4">
 				<div className="grid grid-cols-2 gap-8 md:grid-cols-4">
 					<div className="flex flex-col space-y-1">

From 2966c67b700666e63b05b3d3ecfb8ba8a9ba2acf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20K=C3=BCndig?= <michael@cradle.bio>
Date: Thu, 23 Jan 2025 19:43:28 +0100
Subject: [PATCH 5/5] Small cleanups

---
 ui/src/components/containers/base-container.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/src/components/containers/base-container.tsx b/ui/src/components/containers/base-container.tsx
index 182c97b42..bef37fae1 100644
--- a/ui/src/components/containers/base-container.tsx
+++ b/ui/src/components/containers/base-container.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { twMerge } from 'tailwind-merge';
 
 type BaseContainerProps = {
 	baseClassNames?: string;
@@ -10,7 +9,7 @@ export const BaseContainer = React.forwardRef<HTMLDivElement, BaseContainerProps
 		return (
 			<div className={baseClassNames}>
 				<div className="mx-auto max-w-6xl px-3 md:px-6">
-					<div className={twMerge(baseClassNames, className)} ref={ref} {...props}>
+					<div className={className} ref={ref} {...props}>
 						{children}
 					</div>
 				</div>