Skip to content

Commit

Permalink
new footer design (#1017)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdumond
mdumond authored Jan 23, 2025
1 parent 2b387bd commit a9fe18c
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 86 deletions.
10 changes: 4 additions & 6 deletions ui/src/components/containers/base-container.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
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={className} ref={ref} {...props}>
{children}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion website/src/app/[lang]/[region]/(website)/arts/section-2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
94 changes: 15 additions & 79 deletions website/src/components/footer/footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
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';
Expand All @@ -20,7 +15,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>
Expand All @@ -33,82 +28,31 @@ 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 className="pb-8 pt-16">
<BaseContainer baseClassNames="theme-blue" className="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
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`}
/>
<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`} />
</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('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">
<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
Expand All @@ -123,7 +67,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
Expand All @@ -133,14 +77,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>
);
Expand Down

0 comments on commit a9fe18c

Please sign in to comment.