chore: initialize project

src/pages/about/ui/about-page.tsx

@@ -0,0 +1,67 @@
+import { Badge, Button, Card, SectionHeader, Text } from "denjs-ui";
+import { scrollToSectionOrNavigateHome } from "#/shared/lib/dom";
+import { useMessages } from "#/shared/lib/i18n";
+
+export function AboutPage() {
+	const m = useMessages();
+
+	return (
+		<main className="page-wrap px-4 py-12 sm:py-14">
+			<Card padding="lg" className="island-shell rounded-2xl sm:p-8">
+				<Badge
+					color="teal"
+					rounded="full"
+					bordered
+					className="mb-3 w-fit px-3 py-1 text-[11px] tracking-[0.12em] uppercase"
+				>
+					{m.about_badge()}
+				</Badge>
+
+				<SectionHeader
+					title={m.about_title()}
+					subtitle={m.about_subtitle()}
+					align="left"
+					titleAs="h1"
+					className="max-w-3xl"
+				/>
+			</Card>
+
+			<section className="mt-6 grid gap-4 md:grid-cols-2">
+				<Card
+					padding="lg"
+					title={m.about_focus_title()}
+					className="island-shell rounded-2xl"
+				>
+					<ul className="m-0 space-y-2 pl-5 text-sm leading-7 text-[var(--sea-ink-soft)]">
+						<li>{m.about_focus_point_1()}</li>
+						<li>{m.about_focus_point_2()}</li>
+						<li>{m.about_focus_point_3()}</li>
+						<li>{m.about_focus_point_4()}</li>
+					</ul>
+				</Card>
+
+				<Card
+					padding="lg"
+					title={m.about_principle_title()}
+					className="island-shell rounded-2xl"
+				>
+					<Text
+						as="p"
+						tone="muted"
+						className="m-0 text-sm leading-7 text-[var(--sea-ink-soft)]"
+					>
+						{m.about_principle_text()}
+					</Text>
+
+					<Button
+						size="large"
+						className="mt-5 rounded-full"
+						onClick={() => scrollToSectionOrNavigateHome("demo")}
+					>
+						{m.about_cta()}
+					</Button>
+				</Card>
+			</section>
+		</main>
+	);
+}