new footer design

socialincome-san · Jan 22, 2025 · 2eefac1 · 2eefac1
1 parent b2706b0
commit 2eefac1
Showing 1 changed file with 8 additions and 35 deletions.
diff --git 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>
 	);