Denis Krylov
e406c55c89
All checks were successful
Deploy monie-landing (kaniko) / build-and-deploy (push) Successful in 14m15s
106 lines
2.9 KiB
TypeScript
106 lines
2.9 KiB
TypeScript
import { Link as RouterLink } from "@tanstack/react-router";
|
|
import { Card, Divider, Link, Text } from "denjs-ui";
|
|
import { useMessages } from "#/shared/lib/i18n";
|
|
|
|
export function Footer() {
|
|
const m = useMessages();
|
|
const year = new Date().getFullYear();
|
|
|
|
return (
|
|
<footer className="site-footer mt-16 px-4 pb-12 pt-10 text-[var(--sea-ink-soft)]">
|
|
<div className="page-wrap">
|
|
<Card
|
|
padding="lg"
|
|
className="island-shell rounded-[1.8rem] border-[var(--line)] bg-[linear-gradient(165deg,var(--surface-strong),var(--glass-surface))]"
|
|
>
|
|
<div className="grid gap-6 md:grid-cols-[1.1fr_1fr] md:items-end">
|
|
<div>
|
|
<Text
|
|
as="p"
|
|
weight="semibold"
|
|
className="m-0 text-sm text-[var(--sea-ink)]"
|
|
>
|
|
Monie
|
|
</Text>
|
|
<Text
|
|
as="p"
|
|
tone="muted"
|
|
className="m-0 mt-2 max-w-md text-sm leading-6 text-[var(--sea-ink-soft)]"
|
|
>
|
|
{m.footer_description()}
|
|
</Text>
|
|
</div>
|
|
|
|
<nav className="flex flex-wrap justify-start gap-4 text-sm md:justify-end">
|
|
<Link
|
|
href="/#benefits"
|
|
tone="muted"
|
|
underline="hover"
|
|
className="text-sm font-medium text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)]"
|
|
>
|
|
{m.footer_nav_benefits()}
|
|
</Link>
|
|
<Link
|
|
href="/#faq"
|
|
tone="muted"
|
|
underline="hover"
|
|
className="text-sm font-medium text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)]"
|
|
>
|
|
{m.footer_nav_faq()}
|
|
</Link>
|
|
<Link
|
|
href="mailto:hello@monie.app"
|
|
external
|
|
tone="muted"
|
|
underline="hover"
|
|
className="text-sm font-medium text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)]"
|
|
>
|
|
hello@monie.app
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
|
|
<Divider className="my-6" tone="muted" />
|
|
|
|
<div className="flex flex-wrap items-center justify-between gap-3 text-xs">
|
|
<Text
|
|
as="p"
|
|
size="sm"
|
|
tone="muted"
|
|
className="m-0 text-xs text-[var(--sea-ink-soft)]"
|
|
>
|
|
© {year} Monie. {m.footer_rights()}
|
|
</Text>
|
|
|
|
<div className="flex gap-4">
|
|
<RouterLink
|
|
to="/about"
|
|
className="text-xs font-medium text-[var(--sea-ink-soft)] no-underline transition hover:text-[var(--sea-ink)]"
|
|
>
|
|
{m.footer_about()}
|
|
</RouterLink>
|
|
<Link
|
|
href="/#demo"
|
|
tone="muted"
|
|
underline="hover"
|
|
className="text-xs font-medium text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)]"
|
|
>
|
|
{m.footer_demo()}
|
|
</Link>
|
|
<Link
|
|
href="mailto:legal@monie.app"
|
|
external
|
|
tone="muted"
|
|
underline="hover"
|
|
className="text-xs font-medium text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)]"
|
|
>
|
|
legal@monie.app
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|