templates/linic-wellness-shadcn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: init

Browse Source
This commit is contained in:
me_1 me_1
2026-05-08 22:40:44 +03:00
commit d8786937af
84 changed files with 13927 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

743
src/widgets/template-ui.tsx Normal file
View File

@@ -0,0 +1,743 @@
"use client";
import Image from "next/image";
import Link from "next/link";
import type { ComponentType, ReactNode } from "react";
import {
AlertCircleIcon,
ArrowRightIcon,
CalendarCheckIcon,
CheckIcon,
ClockIcon,
FileTextIcon,
MenuIcon,
ShieldCheckIcon,
StethoscopeIcon,
UserRoundIcon,
} from "lucide-react";
import {
bookingReasons,
carePathway,
carePillars,
contactChannels,
doctors,
facilityCards,
highlights,
insuranceNotes,
patientChecklist,
routeBadges,
safetyNotes,
scheduleRows,
serviceLines,
site,
testimonials,
visitFormats,
} from "@/entities/site-content";
import { Badge } from "@/shared/ui/badge";
import { Button } from "@/shared/ui/button";
import { Input } from "@/shared/ui/input";
import { Separator } from "@/shared/ui/separator";
import { Textarea } from "@/shared/ui/textarea";
type IconComponent = ComponentType<{ className?: string }>;
type MetricItem = {
title: string;
value: string;
text: string;
icon: IconComponent;
};
type ServiceItem = {
name: string;
department: string;
duration: string;
price: string;
tag: string;
text: string;
includes: readonly string[];
preparation: string;
};
type TileItem = {
title: string;
price: string;
items: readonly string[];
};
type IconItem = {
title: string;
text: string;
icon: IconComponent;
};
type InfoItem = {
title: string;
text: string;
};
type TestimonialItem = {
name: string;
text: string;
rating: string;
};
function Container({ children, className = "" }: { children: ReactNode; className?: string }) {
return <section className={`mx-auto w-full max-w-[1320px] px-5 sm:px-8 ${className}`}>{children}</section>;
}
function SectionHeader({
eyebrow,
title,
text,
}: {
eyebrow: string;
title: string;
text?: string;
}) {
return (
<div className="mb-8 grid gap-4 md:grid-cols-[0.82fr_1fr] md:items-end">
<div>
<div className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">{eyebrow}</div>
<h2 className="mt-2 text-4xl font-semibold leading-tight tracking-normal sm:text-5xl">{title}</h2>
</div>
{text ? <p className="max-w-[660px] text-sm leading-7 text-muted-foreground sm:text-base">{text}</p> : null}
</div>
);
}
function ClinicalPanel({ children, className = "" }: { children: ReactNode; className?: string }) {
return <div className={`rounded-md border border-border bg-card shadow-[0_1px_0_rgba(24,74,68,0.05)] ${className}`}>{children}</div>;
}
export function SiteHeader() {
return (
<header className="sticky top-0 z-50 border-b border-border bg-background/94 backdrop-blur-xl">
<div className="mx-auto flex h-[72px] w-full max-w-[1320px] items-center justify-between px-5 sm:px-8">
<Link href="/" className="flex items-center gap-3">
<span className="flex size-10 items-center justify-center rounded-md bg-primary text-sm font-bold text-primary-foreground">
NL
</span>
<span>
<span className="block text-xl font-semibold leading-none">{site.name}</span>
<span className="hidden text-[11px] uppercase tracking-[0.18em] text-muted-foreground sm:block">
planned care clinic
</span>
</span>
</Link>
<nav className="hidden items-center gap-1 lg:flex">
{site.nav.map((item) => (
<Link
key={item.href}
href={item.href}
className="rounded-md px-3 py-2 text-sm font-semibold text-muted-foreground transition hover:bg-muted hover:text-foreground"
>
{item.label}
</Link>
))}
</nav>
<div className="flex items-center gap-2">
<Badge variant="outline" className="hidden rounded-md border-primary/30 bg-card text-primary md:inline-flex">
<ShieldCheckIcon className="size-3.5" />
неэкстренный прием
</Badge>
<Button asChild className="hidden h-11 rounded-md px-5 sm:inline-flex">
<Link href="/booking">{site.cta}</Link>
</Button>
<Button variant="outline" size="icon" className="rounded-md lg:hidden" aria-label="Открыть меню">
<MenuIcon className="size-4" />
</Button>
</div>
</div>
</header>
);
}
export function SiteFooter() {
return (
<footer className="border-t border-border bg-card">
<div className="mx-auto grid w-full max-w-[1320px] gap-8 px-5 py-10 sm:px-8 md:grid-cols-[1.35fr_1fr_1fr]">
<div>
<div className="text-2xl font-semibold">{site.name}</div>
<p className="mt-4 max-w-[520px] text-sm leading-6 text-muted-foreground">{site.tagline}</p>
</div>
<div className="grid gap-2 text-sm text-muted-foreground">
<div className="mb-2 font-semibold text-foreground">Пациентский путь</div>
{site.nav.map((item) => (
<Link key={item.href} href={item.href} className="hover:text-foreground">
{item.label}
</Link>
))}
</div>
<div className="text-sm leading-6 text-muted-foreground">
<div className="mb-2 font-semibold text-foreground">Важно</div>
Шаблон не ставит диагнозы, не принимает платежи и не отправляет медицинские данные.
</div>
</div>
</footer>
);
}
export function PageHero() {
return (
<section className="relative overflow-hidden border-b border-border">
<div className="clinic-soft-grid absolute inset-0" />
<Container className="relative grid min-h-[760px] items-center gap-10 py-14 lg:grid-cols-[0.88fr_1.12fr]">
<div>
<Badge variant="outline" className="mb-6 w-fit rounded-md border-primary/30 bg-background/75 text-primary">
Плановый медицинский маршрут
</Badge>
<h1 className="max-w-[740px] text-4xl font-semibold leading-[1.02] tracking-normal sm:text-6xl lg:text-[4.9rem]">
Клиника, где пациент понимает путь до первого визита
</h1>
<p className="mt-6 max-w-[620px] text-lg leading-8 text-muted-foreground">{site.tagline}</p>
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
<Button asChild className="h-12 rounded-md px-6">
<Link href="/booking">
{site.cta}
<ArrowRightIcon className="size-4" />
</Link>
</Button>
<Button asChild variant="outline" className="h-12 rounded-md bg-background/60 px-6">
<Link href="/services">{site.secondaryCta}</Link>
</Button>
</div>
<div className="mt-8 flex flex-wrap gap-2">
{routeBadges.map((badge) => (
<span key={badge} className="rounded-md border border-border bg-card/86 px-3 py-2 text-xs font-semibold text-muted-foreground">
{badge}
</span>
))}
</div>
</div>
<div className="grid gap-4 xl:grid-cols-[1fr_280px]">
<ClinicalPanel className="relative min-h-[590px] overflow-hidden bg-muted">
<Image
src={site.heroImage}
alt="Врач спокойно разговаривает с пациентом"
fill
priority
className="object-cover"
sizes="(min-width: 1280px) 650px, 100vw"
/>
<div className="absolute bottom-5 left-5 right-5 rounded-md bg-background/94 p-5 shadow-xl backdrop-blur">
<div className="flex items-start justify-between gap-4">
<div>
<div className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">следующий слот</div>
<div className="mt-2 text-xl font-semibold">Первичная навигация сегодня 16:30</div>
<p className="mt-1 text-sm text-muted-foreground">Координатор подтвердит цель визита и документы.</p>
</div>
<CalendarCheckIcon className="size-5 text-primary" />
</div>
</div>
</ClinicalPanel>
<div className="grid content-center gap-3">
{highlights.map((item) => {
const Icon = item.icon;
return (
<ClinicalPanel key={item.title} className="p-4">
<Icon className="mb-6 size-5 text-primary" />
<div className="text-2xl font-semibold text-primary">{item.value}</div>
<h3 className="mt-2 font-semibold">{item.title}</h3>
<p className="mt-2 text-sm leading-6 text-muted-foreground">{item.text}</p>
</ClinicalPanel>
);
})}
</div>
</div>
</Container>
</section>
);
}
export function InnerHero({ eyebrow, title, text }: { eyebrow: string; title: string; text: string }) {
return (
<section className="border-b border-border bg-card">
<Container className="py-14">
<Badge variant="outline" className="mb-6 rounded-md border-primary/30 text-primary">
{eyebrow}
</Badge>
<h1 className="max-w-[980px] text-4xl font-semibold leading-[1.04] tracking-normal sm:text-6xl">{title}</h1>
<p className="mt-5 max-w-[780px] text-base leading-7 text-muted-foreground">{text}</p>
</Container>
</section>
);
}
export function PatientJourney() {
return (
<Container className="py-14">
<SectionHeader
eyebrow="Patient journey"
title="Маршрут пациента как главный продукт клиники"
text="Клинический сайт должен снижать неопределенность: зачем визит, как подготовиться, кто отвечает и что будет после приема."
/>
<div className="grid gap-3 md:grid-cols-4">
{carePathway.map((step) => (
<ClinicalPanel key={step.step} className="p-5">
<div className="mb-8 flex size-11 items-center justify-center rounded-md bg-primary text-sm font-semibold text-primary-foreground">
{step.step}
</div>
<h3 className="text-lg font-semibold">{step.title}</h3>
<p className="mt-3 text-sm leading-6 text-muted-foreground">{step.text}</p>
</ClinicalPanel>
))}
</div>
</Container>
);
}
export function MetricStrip({ items = highlights }: { items?: readonly MetricItem[] }) {
return (
<Container className="grid gap-3 py-8 md:grid-cols-3">
{items.map((item) => {
const Icon = item.icon;
return (
<ClinicalPanel key={item.title} className="p-5">
<Icon className="mb-6 size-5 text-primary" />
<div className="text-4xl font-semibold">{item.value}</div>
<h3 className="mt-2 font-semibold">{item.title}</h3>
<p className="mt-2 text-sm leading-6 text-muted-foreground">{item.text}</p>
</ClinicalPanel>
);
})}
</Container>
);
}
export function FeaturedGrid({
eyebrow,
title,
text,
items = serviceLines,
}: {
eyebrow: string;
title: string;
text: string;
items?: readonly ServiceItem[];
}) {
return (
<Container className="py-14">
<SectionHeader eyebrow={eyebrow} title={title} text={text} />
<div className="grid gap-4 lg:grid-cols-2">
{items.map((item) => (
<ClinicalPanel key={item.name} className="p-5">
<div className="mb-5 flex flex-wrap items-center gap-2">
<Badge variant="secondary" className="rounded-md">{item.tag}</Badge>
<Badge variant="outline" className="rounded-md">{item.department}</Badge>
<span className="text-sm font-semibold text-primary">{item.duration}</span>
</div>
<div className="grid gap-5 sm:grid-cols-[1fr_150px]">
<div>
<h3 className="text-2xl font-semibold">{item.name}</h3>
<p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
</div>
<div className="text-left sm:text-right">
<div className="text-2xl font-semibold">{item.price}</div>
<div className="mt-1 text-xs text-muted-foreground">ориентир, не оферта</div>
</div>
</div>
<Separator className="my-5" />
<div className="grid gap-4 md:grid-cols-[1fr_1.2fr]">
<div className="flex flex-wrap gap-2">
{item.includes.map((line) => (
<span key={line} className="rounded-md bg-muted px-3 py-2 text-xs font-semibold text-muted-foreground">
{line}
</span>
))}
</div>
<p className="text-sm leading-6 text-muted-foreground">{item.preparation}</p>
</div>
</ClinicalPanel>
))}
</div>
</Container>
);
}
export function ServiceMatrix() {
return (
<Container className="py-14">
<ClinicalPanel className="overflow-hidden">
<div className="grid border-b border-border bg-muted px-4 py-3 text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground md:grid-cols-[1.1fr_0.9fr_120px_120px]">
<div>Маршрут</div>
<div>Что закрывает</div>
<div>Формат</div>
<div className="md:text-right">Ориентир</div>
</div>
{serviceLines.map((item) => (
<div key={item.name} className="grid gap-3 border-b border-border px-4 py-4 last:border-b-0 md:grid-cols-[1.1fr_0.9fr_120px_120px] md:items-center">
<div>
<div className="font-semibold">{item.name}</div>
<div className="mt-1 text-sm text-muted-foreground">{item.department}</div>
</div>
<div className="text-sm leading-6 text-muted-foreground">{item.text}</div>
<div className="text-sm font-semibold text-primary">{item.duration}</div>
<div className="font-semibold md:text-right">{item.price}</div>
</div>
))}
</ClinicalPanel>
</Container>
);
}
export function SpecialistSchedule() {
return (
<Container className="py-10">
<ClinicalPanel className="p-5">
<div className="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div>
<h2 className="text-3xl font-semibold">Ближайшие плановые слоты</h2>
<p className="mt-2 text-sm text-muted-foreground">Слоты показывают врача, кабинет и подготовку, а не просто время.</p>
</div>
<Badge variant="outline" className="w-fit rounded-md border-primary/30 text-primary">
<ClockIcon className="size-3.5" />
не для острых состояний
</Badge>
</div>
<div className="grid gap-3">
{scheduleRows.map((row) => (
<div key={`${row.service}-${row.time}`} className="grid gap-3 rounded-md border border-border bg-background p-4 lg:grid-cols-[1fr_190px_120px_180px] lg:items-center">
<div>
<div className="font-semibold">{row.service}</div>
<div className="mt-1 text-sm text-muted-foreground">{row.specialist}</div>
</div>
<div className="text-sm font-semibold text-primary">{row.time}</div>
<div className="text-sm text-muted-foreground">{row.room}</div>
<div className="text-sm text-muted-foreground">{row.prep}</div>
</div>
))}
</div>
</ClinicalPanel>
</Container>
);
}
export function DoctorGrid() {
return (
<Container className="grid gap-4 py-12 md:grid-cols-2 xl:grid-cols-4">
{doctors.map((doctor) => (
<ClinicalPanel key={doctor.name} className="p-6">
<div className="mb-7 flex size-14 items-center justify-center rounded-md bg-primary/10 text-primary">
<UserRoundIcon className="size-7" />
</div>
<h3 className="text-xl font-semibold">{doctor.name}</h3>
<p className="mt-2 text-sm font-semibold text-primary">{doctor.role}</p>
<p className="mt-3 text-sm leading-6 text-muted-foreground">{doctor.focus}</p>
<div className="mt-5 flex flex-wrap gap-2">
<Badge variant="outline" className="rounded-md">{doctor.experience}</Badge>
<Badge variant="secondary" className="rounded-md">{doctor.nextSlot}</Badge>
</div>
</ClinicalPanel>
))}
</Container>
);
}
export function PricingTiles({ title, items = visitFormats }: { title: string; items?: readonly TileItem[] }) {
return (
<Container className="py-14">
<h2 className="mb-7 text-4xl font-semibold sm:text-5xl">{title}</h2>
<div className="grid gap-4 md:grid-cols-3">
{items.map((item) => (
<ClinicalPanel key={item.title} className="p-6">
<h3 className="text-2xl font-semibold">{item.title}</h3>
<div className="mt-3 text-3xl font-semibold text-primary">{item.price}</div>
<Separator className="my-5" />
<div className="grid gap-2">
{item.items.map((line) => (
<div key={line} className="flex items-center gap-2 text-sm text-muted-foreground">
<CheckIcon className="size-4 text-primary" />
{line}
</div>
))}
</div>
</ClinicalPanel>
))}
</div>
</Container>
);
}
export function IconCards({ items = carePillars }: { items?: readonly IconItem[] }) {
return (
<Container className="grid gap-4 py-12 md:grid-cols-3">
{items.map((item) => {
const Icon = item.icon;
return (
<ClinicalPanel key={item.title} className="p-6">
<Icon className="mb-8 size-6 text-primary" />
<h3 className="text-xl font-semibold">{item.title}</h3>
<p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
</ClinicalPanel>
);
})}
</Container>
);
}
export function PatientChecklist() {
return (
<Container className="py-14">
<SectionHeader
eyebrow="Before visit"
title="Пациентская подготовка без скрытых ожиданий"
text="Эта секция закрывает один из главных вопросов медицинского сайта: что взять с собой и почему это нужно."
/>
<div className="grid gap-4 md:grid-cols-3">
{patientChecklist.map((item) => {
const Icon = item.icon;
return (
<ClinicalPanel key={item.title} className="p-6">
<Icon className="mb-8 size-6 text-primary" />
<h3 className="text-xl font-semibold">{item.title}</h3>
<p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
</ClinicalPanel>
);
})}
</div>
</Container>
);
}
export function ReservationForm() {
return (
<Container className="grid gap-8 py-14 lg:grid-cols-[0.82fr_1.18fr]">
<div>
<Badge variant="outline" className="mb-5 rounded-md border-primary/30 text-primary">
<CalendarCheckIcon className="size-4" />
Triage form
</Badge>
<h2 className="text-4xl font-semibold leading-tight sm:text-5xl">Запись начинается с цели визита</h2>
<p className="mt-4 text-sm leading-7 text-muted-foreground">
Форма статическая. Она показывает будущий booking flow: причина обращения, желаемый маршрут, документы и безопасное предупреждение
о неэкстренном формате.
</p>
<div className="mt-6 rounded-md border border-amber-200 bg-amber-50 p-4 text-sm leading-6 text-amber-900">
При резком ухудшении состояния, сильной боли, травме или угрозе жизни нужно обращаться в экстренные службы.
</div>
</div>
<form className="grid gap-4 rounded-md border border-border bg-card p-5">
<div className="grid gap-3 sm:grid-cols-2">
<Input placeholder="Имя пациента" />
<Input placeholder="Телефон или email" />
<Input placeholder="Желаемая дата" />
<Input placeholder="Удобное время" />
</div>
<div className="grid gap-2">
<div className="text-sm font-semibold">Причина обращения</div>
<div className="flex flex-wrap gap-2">
{bookingReasons.map((reason) => (
<button key={reason} type="button" className="rounded-md border border-border bg-background px-3 py-2 text-sm font-medium text-muted-foreground">
{reason}
</button>
))}
</div>
</div>
<Textarea placeholder="Кратко опишите цель визита, прошлые исследования, ограничения или вопросы координатору" />
<Button type="button" className="h-11 rounded-md">
Отправить заявку координатору
</Button>
</form>
</Container>
);
}
export function InsurancePanel() {
return (
<Container className="py-12">
<SectionHeader
eyebrow="Documents and privacy"
title="Страховка, заключения и конфиденциальность вынесены в явный сервисный слой"
text="Для клиники важно показать не только врачей, но и то, как пациент получает документы, где хранятся результаты и что происходит с оплатой."
/>
<div className="grid gap-4 md:grid-cols-3">
{insuranceNotes.map((item) => (
<ClinicalPanel key={item.title} className="p-6">
<ShieldCheckIcon className="mb-8 size-6 text-primary" />
<h3 className="text-xl font-semibold">{item.title}</h3>
<p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
</ClinicalPanel>
))}
</div>
</Container>
);
}
export function FacilityBoard() {
return (
<Container className="py-12">
<div className="grid gap-4 lg:grid-cols-[1fr_1.05fr]">
<ClinicalPanel className="relative min-h-[440px] overflow-hidden bg-muted">
<Image
src={site.accentImage}
alt="Клиническая зона диагностики"
fill
className="object-cover"
sizes="(min-width: 1024px) 50vw, 100vw"
/>
</ClinicalPanel>
<div className="grid gap-4">
{facilityCards.map((item) => {
const Icon = item.icon;
return (
<ClinicalPanel key={item.title} className="p-6">
<Icon className="mb-7 size-6 text-primary" />
<h3 className="text-2xl font-semibold">{item.title}</h3>
<p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
</ClinicalPanel>
);
})}
</div>
</div>
</Container>
);
}
export function SafetyNotes() {
return (
<Container className="grid gap-4 py-12 md:grid-cols-3">
{safetyNotes.map((item) => {
const Icon = item.icon;
return (
<ClinicalPanel key={item.title} className="p-6">
<Icon className="mb-8 size-6 text-primary" />
<h3 className="text-xl font-semibold">{item.title}</h3>
<p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
</ClinicalPanel>
);
})}
</Container>
);
}
export function ContactForm() {
return (
<Container className="grid gap-6 py-14 lg:grid-cols-[0.95fr_1.05fr]">
<ClinicalPanel className="p-6">
<ClockIcon className="mb-8 size-6 text-primary" />
<h2 className="text-4xl font-semibold">Связаться с координатором</h2>
<p className="mt-3 text-sm leading-7 text-muted-foreground">
Контактная страница должна отвечать на практичные вопросы: как добраться, когда работает лабораторное окно и что взять на прием.
</p>
<div className="mt-6 grid gap-3">
{contactChannels.map((channel) => (
<div key={channel.label} className="flex items-center justify-between gap-4 rounded-md bg-muted px-4 py-3 text-sm">
<span className="font-semibold">{channel.label}</span>
<span className="text-muted-foreground">{channel.value}</span>
</div>
))}
</div>
</ClinicalPanel>
<form className="grid gap-3 rounded-md border border-border bg-card p-5">
<Input placeholder="Ваше имя" />
<Input placeholder="Email или телефон" />
<Textarea placeholder="Вопрос координатору, документы, страховая или желаемый маршрут" />
<Button type="button" className="h-11 rounded-md">
Отправить сообщение
</Button>
</form>
</Container>
);
}
export function InfoColumns({ title, items }: { title: string; items: readonly InfoItem[] }) {
return (
<Container className="py-12">
<h2 className="mb-6 text-4xl font-semibold">{title}</h2>
<div className="grid gap-4 md:grid-cols-3">
{items.map((item) => (
<ClinicalPanel key={item.title} className="p-6">
<FileTextIcon className="mb-8 size-5 text-primary" />
<h3 className="text-xl font-semibold">{item.title}</h3>
<p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
</ClinicalPanel>
))}
</div>
</Container>
);
}
export function SplitStory({
image,
eyebrow,
title,
text,
points,
}: {
image: string;
eyebrow: string;
title: string;
text: string;
points: readonly string[];
}) {
return (
<Container className="grid gap-10 py-14 lg:grid-cols-2">
<ClinicalPanel className="relative min-h-[470px] overflow-hidden bg-muted">
<Image src={image} alt={title} fill className="object-cover" sizes="(min-width: 1024px) 50vw, 100vw" />
</ClinicalPanel>
<div className="flex flex-col justify-center">
<div className="mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-primary">{eyebrow}</div>
<h2 className="text-4xl font-semibold leading-tight sm:text-5xl">{title}</h2>
<p className="mt-5 text-base leading-7 text-muted-foreground">{text}</p>
<div className="mt-7 grid gap-3">
{points.map((point) => (
<div key={point} className="flex items-center gap-3 text-sm font-semibold">
<CheckIcon className="size-4 text-primary" />
{point}
</div>
))}
</div>
</div>
</Container>
);
}
export function TestimonialBand({ items = testimonials }: { items?: readonly TestimonialItem[] }) {
return (
<Container className="grid gap-4 py-12 md:grid-cols-2">
{items.map((item) => (
<blockquote key={item.name} className="rounded-md border border-border bg-card p-7">
<div className="text-sm font-semibold text-primary">{item.rating}</div>
<p className="mt-5 text-2xl font-semibold leading-snug">"{item.text}"</p>
<footer className="mt-5 text-sm text-muted-foreground">{item.name}</footer>
</blockquote>
))}
</Container>
);
}
export function CtaPanel({ title, text, href, label }: { title: string; text: string; href: string; label: string }) {
return (
<Container className="py-12">
<div className="rounded-md bg-primary p-8 text-primary-foreground">
<AlertCircleIcon className="mb-8 size-6" />
<h2 className="text-4xl font-semibold">{title}</h2>
<p className="mt-4 max-w-[720px] text-sm leading-7 text-primary-foreground/72">{text}</p>
<Button asChild variant="secondary" className="mt-6 rounded-md">
<Link href={href}>
{label}
<ArrowRightIcon className="size-4" />
</Link>
</Button>
</div>
</Container>
);
}
export function ClinicalDisclaimer() {
return (
<Container className="py-10">
<div className="rounded-md border border-amber-200 bg-amber-50 p-5 text-sm leading-7 text-amber-950">
<div className="flex items-start gap-3">
<StethoscopeIcon className="mt-1 size-5 shrink-0" />
<p>
Northline Clinic в этом шаблоне описывает плановый пациентский путь. Тексты не являются медицинской рекомендацией,
не ставят диагноз и не заменяют консультацию врача.
</p>
</div>
</div>
</Container>
);
}