chore: initialize project

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",
+			}}
+		/>
+	);
+}