342c96abfa
Major changes include enhancements to the UI and modifications to the i18n loading logic to more effectively handle namespaces. Several components were updated to improve readability and layout consistency. The i18n loading logic now includes additional handling for waiting until all namespaces are loaded before the i18n instance is returned, with a warning if it takes longer than expected. Furthermore, code have been refactored for fonts, buttons, and other UI elements.
140 lines
4.3 KiB
TypeScript
140 lines
4.3 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
import { AppLogo } from '~/components/app-logo';
|
|
import appConfig from '~/config/app.config';
|
|
|
|
export function SiteFooter() {
|
|
return (
|
|
<footer className={'mt-auto py-8 2xl:py-16 relative w-full site-footer'}>
|
|
<div className={'container'}>
|
|
<div className={'flex flex-col space-y-8 lg:flex-row lg:space-y-0'}>
|
|
<div
|
|
className={
|
|
'flex w-full space-x-2 lg:w-4/12 xl:w-4/12' +
|
|
' xl:space-x-6 2xl:space-x-8'
|
|
}
|
|
>
|
|
<div className={'flex flex-col space-y-4'}>
|
|
<div>
|
|
<AppLogo className={'w-[85px] md:w-[95px]'} />
|
|
</div>
|
|
|
|
<div className={'flex flex-col space-y-4'}>
|
|
<div>
|
|
<p className={'text-sm text-muted-foreground'}>
|
|
<Trans i18nKey={'marketing:footerDescription'} />
|
|
</p>
|
|
</div>
|
|
|
|
<div className={'flex text-xs text-muted-foreground'}>
|
|
<p>
|
|
<Trans
|
|
i18nKey={'marketing:copyright'}
|
|
values={{
|
|
product: appConfig.name,
|
|
year: new Date().getFullYear(),
|
|
}}
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={
|
|
'flex flex-col space-y-8 lg:space-x-6 lg:space-y-0' +
|
|
' w-full lg:flex-row lg:justify-end xl:space-x-16'
|
|
}
|
|
>
|
|
<div>
|
|
<div className={'flex flex-col space-y-2.5'}>
|
|
<FooterSectionHeading>
|
|
<Trans i18nKey={'marketing:about'} />
|
|
</FooterSectionHeading>
|
|
|
|
<FooterSectionList>
|
|
<FooterLink>
|
|
<Link href={'/blog'}>
|
|
<Trans i18nKey={'marketing:blog'} />
|
|
</Link>
|
|
</FooterLink>
|
|
<FooterLink>
|
|
<Link href={'/contact'}>
|
|
<Trans i18nKey={'marketing:contact'} />
|
|
</Link>
|
|
</FooterLink>
|
|
</FooterSectionList>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className={'flex flex-col space-y-2.5'}>
|
|
<FooterSectionHeading>
|
|
<Trans i18nKey={'marketing:product'} />
|
|
</FooterSectionHeading>
|
|
|
|
<FooterSectionList>
|
|
<FooterLink>
|
|
<Link href={'/docs'}>
|
|
<Trans i18nKey={'marketing:documentation'} />
|
|
</Link>
|
|
</FooterLink>
|
|
</FooterSectionList>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className={'flex flex-col space-y-2.5'}>
|
|
<FooterSectionHeading>
|
|
<Trans i18nKey={'marketing:legal'} />
|
|
</FooterSectionHeading>
|
|
|
|
<FooterSectionList>
|
|
<FooterLink>
|
|
<Link href={'/terms-of-service'}>
|
|
<Trans i18nKey={'marketing:termsOfService'} />
|
|
</Link>
|
|
</FooterLink>
|
|
<FooterLink>
|
|
<Link href={'/privacy-policy'}>
|
|
<Trans i18nKey={'marketing:privacyPolicy'} />
|
|
</Link>
|
|
</FooterLink>
|
|
<FooterLink>
|
|
<Link href={'/cookie-policy'}>
|
|
<Trans i18nKey={'marketing:cookiePolicy'} />
|
|
</Link>
|
|
</FooterLink>
|
|
</FooterSectionList>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
function FooterSectionHeading(props: React.PropsWithChildren) {
|
|
return <span className={'font-heading'}>{props.children}</span>;
|
|
}
|
|
|
|
function FooterSectionList(props: React.PropsWithChildren) {
|
|
return <ul className={'flex flex-col space-y-2.5'}>{props.children}</ul>;
|
|
}
|
|
|
|
function FooterLink(props: React.PropsWithChildren) {
|
|
return (
|
|
<li
|
|
className={
|
|
'text-sm text-muted-foreground hover:underline [&>a]:transition-colors'
|
|
}
|
|
>
|
|
{props.children}
|
|
</li>
|
|
);
|
|
}
|