chore: initialize project

2026-04-03 16:32:58 +03:00
commit 282eb87e63
79 changed files with 12499 additions and 0 deletions
--- a/src/widgets/layout/ui/footer.tsx
+++ b/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>
+	);
+}
--- a/src/widgets/layout/ui/header.tsx
+++ b/src/widgets/layout/ui/header.tsx
@@ -0,0 +1,85 @@
+import { Header as DenjsHeader } from "denjs-ui";
+import {
+	AlertCircle,
+	CircleHelp,
+	Lightbulb,
+	Mail,
+	PlayCircle,
+	WandSparkles,
+} from "lucide-react";
+import { LanguageSwitcher } from "#/features/change-language";
+import { ThemeToggle } from "#/features/theme-toggle/ThemeToggle";
+import { useMessages } from "#/shared/lib/i18n";
+import { LowerLeftLogo } from "#/shared/ui/lower-left-logo";
+
+export function Header() {
+	const m = useMessages();
+
+	return (
+		<DenjsHeader
+			brand={
+				<div className="flex items-center gap-3">
+					<a
+						href="/"
+						className="inline-flex no-underline"
+						aria-label="Monie home"
+					>
+						<LowerLeftLogo
+							aria-label="Monie"
+							className="h-8 w-auto max-w-40 select-none text-foreground transition-colors"
+						/>
+					</a>
+					<div className="hidden lg:flex items-center gap-2">
+						<LanguageSwitcher />
+						<ThemeToggle />
+					</div>
+				</div>
+			}
+			productLabel={m.header_nav_solution()}
+			products={[
+				{
+					name: m.header_nav_problem(),
+					href: "/#problem",
+					icon: AlertCircle,
+				},
+				{
+					name: m.header_nav_solution(),
+					href: "/#solution",
+					icon: Lightbulb,
+				},
+				{
+					name: m.header_nav_how(),
+					href: "/#how",
+					icon: WandSparkles,
+				},
+				{
+					name: m.header_nav_faq(),
+					href: "/#faq",
+					icon: CircleHelp,
+				},
+			]}
+			callsToAction={[
+				{
+					name: m.header_create_page(),
+					href: "/#demo",
+					icon: PlayCircle,
+				},
+				{
+					name: m.header_email_aria(),
+					href: "mailto:hello@monie.app",
+					icon: Mail,
+				},
+			]}
+			links={[
+				{
+					name: m.header_about(),
+					href: "/about",
+				},
+			]}
+			loginLink={{
+				name: m.header_create_page(),
+				href: "/#demo",
+			}}
+		/>
+	);
+}