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,96 @@
+import { Badge, Card, Heading, SectionHeader, Text } from "denjs-ui";
+import { useMessages } from "#/shared/lib/i18n";
+
+export function ProductPreviewSection() {
+	const m = useMessages();
+
+	return (
+		<section id="preview" className="mt-10 sm:mt-14">
+			<SectionHeader
+				eyebrow={m.preview_eyebrow()}
+				title={m.preview_title()}
+				subtitle={m.preview_subtitle()}
+				align="left"
+				className="max-w-3xl"
+			/>
+
+			<div className="mt-5 grid gap-4 lg:grid-cols-[1.1fr_1fr]">
+				<Card padding="lg" className="island-shell rounded-2xl">
+					<Text as="p" size="sm" tone="muted" className="island-kicker mb-2">
+						{m.preview_profile_title()}
+					</Text>
+					<Heading
+						level={3}
+						className="text-2xl font-semibold text-[var(--sea-ink)] sm:text-3xl"
+					>
+						monie.app/anna-nails
+					</Heading>
+					<Text
+						tone="muted"
+						className="mt-3 text-sm leading-6 text-[var(--sea-ink-soft)]"
+					>
+						{m.preview_profile_description()}
+					</Text>
+					<div className="mt-4 grid gap-3 sm:grid-cols-2">
+						<Card
+							padding="sm"
+							title={m.preview_service_1_title()}
+							description={m.preview_service_1_description()}
+							className="rounded-xl border border-[var(--line)] bg-white/76"
+						/>
+						<Card
+							padding="sm"
+							title={m.preview_service_2_title()}
+							description={m.preview_service_2_description()}
+							className="rounded-xl border border-[var(--line)] bg-white/76"
+						/>
+					</div>
+				</Card>
+
+				<Card padding="lg" className="island-shell rounded-2xl">
+					<Text as="p" size="sm" tone="muted" className="island-kicker mb-2">
+						{m.preview_schedule_title()}
+					</Text>
+					<div className="space-y-3">
+						<Card
+							padding="sm"
+							title={m.preview_appt_1_title()}
+							description={m.preview_appt_1_description()}
+							className="rounded-xl border border-[var(--line)] bg-white/80"
+							footer={
+								<Badge
+									color="emerald"
+									rounded="full"
+									className="w-fit px-2 py-0.5 text-[11px]"
+								>
+									{m.preview_appt_1_badge()}
+								</Badge>
+							}
+						/>
+						<Card
+							padding="sm"
+							title={m.preview_appt_2_title()}
+							description={m.preview_appt_2_description()}
+							className="rounded-xl border border-[var(--line)] bg-white/80"
+							footer={
+								<Badge
+									color="sky"
+									rounded="full"
+									className="w-fit px-2 py-0.5 text-[11px]"
+								>
+									{m.preview_appt_2_badge()}
+								</Badge>
+							}
+						/>
+						<Card
+							padding="sm"
+							title={m.preview_income_title()}
+							description={m.preview_income_description()}
+							className="rounded-xl border border-[var(--line)] bg-white/80"
+						/>
+					</div>
+				</Card>
+			</div>
+		</section>
+	);
+}