chore: initialize project

src/widgets/layout/ui/footer.tsx

@@ -0,0 +1,105 @@
+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)]"
+						>
+							&copy; {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>
+	);
+}