97 lines
2.7 KiB
TypeScript
97 lines
2.7 KiB
TypeScript
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>
|
|
);
|
|
}
|