chore: initialize project

2026-04-04 23:14:39 +03:00
commit e406c55c89
84 changed files with 13590 additions and 0 deletions
@@ -0,0 +1,49 @@
+import { Badge, Card, Heading, SectionHeader, Text } from "denjs-ui";
+import { getSteps } from "#/entities/landing";
+import { useMessages } from "#/shared/lib/i18n";
+
+export function HowItWorksSection() {
+	const m = useMessages();
+
+	return (
+		<section id="how" className="mt-10 sm:mt-14">
+			<SectionHeader
+				eyebrow={m.how_eyebrow()}
+				title={m.how_title()}
+				align="left"
+				className="max-w-3xl"
+			/>
+
+			<div className="mt-5 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+				{getSteps(m).map((step, index) => (
+					<Card
+						key={step.title}
+						padding="lg"
+						className="island-shell rise-in rounded-2xl"
+						style={{ animationDelay: `${index * 80 + 120}ms` }}
+					>
+						<Badge
+							color="teal"
+							rounded="full"
+							className="mb-3 w-fit px-2.5 py-1 text-[11px] font-semibold"
+						>
+							{m.how_step_label()} {index + 1}
+						</Badge>
+						<Heading
+							level={4}
+							className="text-base font-semibold text-[var(--sea-ink)]"
+						>
+							{step.title}
+						</Heading>
+						<Text
+							tone="muted"
+							className="mt-2 text-sm leading-6 text-[var(--sea-ink-soft)]"
+						>
+							{step.text}
+						</Text>
+					</Card>
+				))}
+			</div>
+		</section>
+	);
+}