chore: initialize project

src/widgets/landing/hero-section/ui/hero-section.tsx

@@ -0,0 +1,84 @@
+import { Badge, Button, Card, Heading, Text } from "denjs-ui";
+import { getHeroMetrics } from "#/entities/landing";
+import { scrollToSection } from "#/shared/lib/dom";
+import { useMessages } from "#/shared/lib/i18n";
+
+export function HeroSection() {
+	const m = useMessages();
+
+	return (
+		<section className="island-shell rise-in relative overflow-hidden rounded-[2.2rem] px-6 py-10 sm:px-10 sm:py-14">
+			<div className="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.32),transparent_66%)]" />
+			<div className="pointer-events-none absolute -bottom-24 -right-16 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(230,128,97,0.2),transparent_66%)]" />
+
+			<Badge
+				color="teal"
+				rounded="full"
+				bordered
+				className="w-fit px-3 py-1 text-[11px] tracking-[0.12em] uppercase"
+			>
+				{m.hero_badge()}
+			</Badge>
+
+			<Heading
+				level={1}
+				className="mt-4 max-w-4xl text-4xl leading-[0.98] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl"
+			>
+				{m.hero_title()}
+			</Heading>
+
+			<Text
+				size="lg"
+				tone="muted"
+				className="mt-5 max-w-3xl text-base leading-7 text-[var(--sea-ink-soft)] sm:text-lg"
+			>
+				{m.hero_subtitle()}
+			</Text>
+
+			<div className="mt-8 flex flex-wrap gap-3">
+				<Button
+					size="large"
+					className="rounded-full"
+					onClick={() => scrollToSection("demo")}
+				>
+					{m.hero_cta_primary()}
+				</Button>
+				<Button
+					tone="secondary"
+					size="large"
+					className="rounded-full"
+					onClick={() => scrollToSection("how")}
+				>
+					{m.hero_cta_secondary()}
+				</Button>
+			</div>
+
+			<div className="mt-8 grid gap-3 sm:grid-cols-3">
+				{getHeroMetrics(m).map((item, index) => (
+					<Card
+						key={item.label}
+						padding="md"
+						className="metric-card rise-in rounded-2xl"
+						style={{ animationDelay: `${index * 100 + 80}ms` }}
+					>
+						<Text
+							as="p"
+							weight="semibold"
+							className="m-0 text-2xl font-extrabold text-[var(--sea-ink)]"
+						>
+							{item.value}
+						</Text>
+						<Text
+							as="p"
+							size="sm"
+							tone="muted"
+							className="mt-1 text-[var(--sea-ink-soft)]"
+						>
+							{item.label}
+						</Text>
+					</Card>
+				))}
+			</div>
+		</section>
+	);
+}