Add Django backend, Next.js frontend, and deploy templates
This commit is contained in:
ogrechko committed
1 parent
fc0c991335
commit
e9cd22d36f
93 files changed
+7840
-1
No files matched your search
@@ -0,0 +1,189 @@
|
||||
import Link from "next/link";
|
||||
import { Download, ExternalLink, Eye, FileText } from "lucide-react";
|
||||
|
||||
type DocumentItem = {
|
||||
id: number;
|
||||
title: string;
|
||||
file?: string | string[];
|
||||
mode: "preview" | "download" | "disabled";
|
||||
};
|
||||
|
||||
const documentItems: DocumentItem[] = [
|
||||
{ id: 1, title: "Скачать договор на обслуживание", file: "doc_on_out.doc", mode: "download" },
|
||||
{ id: 2, title: "Правила о предоставлении платных услуг", file: "pravila_o_pred.pdf", mode: "preview" },
|
||||
{ id: 3, title: "Перечень платных медицинских услуг", file: "price_site.pdf", mode: "preview" },
|
||||
{ id: 4, title: "Лицензия", file: "lic.pdf", mode: "preview" },
|
||||
{ id: 5, title: "Правила внутреннего распорядка", file: "Indoor_rule.pdf", mode: "preview" },
|
||||
{ id: 6, title: "Лекарственное обеспечение", file: "jnvlp.pdf", mode: "preview" },
|
||||
{ id: 7, title: "О правилах и сроках госпитализации", file: "o_pravilah_gospitalizacii.pdf", mode: "preview" },
|
||||
{ id: 8, title: "Территориальная программа ОМС СК", file: "ter-prog.pdf", mode: "preview" },
|
||||
{ id: 9, title: "О правилах подготовки к диагностическим исследованиям", file: "o_diagnostike.pdf", mode: "preview" },
|
||||
{ id: 10, title: "О порядке, объеме и условиях оказания медицинской помощи", file: "ob_obyome.pdf", mode: "preview" },
|
||||
{ id: 11, title: "Правила записи на первичный прием", file: "pravilo_zapisi_na_perviy_priem.pdf", mode: "preview" },
|
||||
{ id: 12, title: "О государственной поддержке развития медицинской промышленности", file: "postanovlenie.pdf", mode: "preview" },
|
||||
{ id: 13, title: "Информация для пациентов", file: ["pacient1.pdf", "pacient2.pdf"], mode: "preview" },
|
||||
{ id: 14, title: "Нормативно-правовые документы", file: ["npd1.pdf", "npd2.pdf", "npd3.pdf", "npd5.pdf", "npd7.pdf", "npd8.pdf", "npd9.pdf", "npd10.pdf"], mode: "preview" },
|
||||
{ id: 15, title: "Права и обязанности гражданина в сфере охраны здоровья", file: "piog.pdf", mode: "preview" },
|
||||
{ id: 16, title: "Перечень ЖНВЛП", file: "jnvlp.pdf", mode: "preview" },
|
||||
{ id: 17, title: "Работа с персональными данными", file: "rpd.pdf", mode: "preview" },
|
||||
];
|
||||
|
||||
export default async function DocumentsPage({
|
||||
searchParams,
|
||||
}: {
|
||||
// Добавляем параметр fileIndex для отслеживания выбранного файла в массиве
|
||||
searchParams: Promise<{ doc?: string; fileIndex?: string }>;
|
||||
}) {
|
||||
const params = await searchParams;
|
||||
const selectedId = Number(params.doc);
|
||||
const selectedIndex = Number(params.fileIndex) || 0; // По умолчанию 0 (первый файл)
|
||||
|
||||
const firstPreviewable =
|
||||
documentItems.find((item) => item.mode === "preview" && item.file) ?? null;
|
||||
const selectedItem =
|
||||
documentItems.find((item) => item.id === selectedId && item.mode === "preview" && item.file) ??
|
||||
firstPreviewable;
|
||||
|
||||
// Логика определения конкретного файла для отображения
|
||||
let fileForLink: string | null = null;
|
||||
let previewUrl: string | null = null;
|
||||
|
||||
if (selectedItem?.file) {
|
||||
if (Array.isArray(selectedItem.file)) {
|
||||
// Защита от неверного индекса в URL
|
||||
const validIndex = selectedIndex >= 0 && selectedIndex < selectedItem.file.length ? selectedIndex : 0;
|
||||
fileForLink = selectedItem.file[validIndex];
|
||||
} else {
|
||||
fileForLink = selectedItem.file;
|
||||
}
|
||||
previewUrl = `/documents/${fileForLink}#toolbar=0&navpanes=0&scrollbar=1`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<section className="page-hero">
|
||||
<span className="eyebrow">Документы</span>
|
||||
<h1>Лицензии и официальные сведения</h1>
|
||||
<p className="page-intro">
|
||||
Для удобства документы переведены в PDF-формат для встроенного просмотра. Первый пункт
|
||||
остаётся отдельной кнопкой скачивания договора.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="section">
|
||||
<div className="documents-layout">
|
||||
<aside className="documents-sidebar">
|
||||
<div className="documents-sidebar__panel">
|
||||
{documentItems.map((item) => {
|
||||
if (item.mode === "download" && item.file) {
|
||||
// Для скачивания всегда берем первый файл, если это массив
|
||||
const fileStr = Array.isArray(item.file) ? item.file[0] : item.file;
|
||||
return (
|
||||
<a
|
||||
key={item.id}
|
||||
href={`/documents/${fileStr}`}
|
||||
download
|
||||
className="documents-link documents-link--download"
|
||||
>
|
||||
<Download size={16} />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
if (item.mode === "disabled") {
|
||||
return (
|
||||
<div key={item.id} className="documents-link documents-link--disabled">
|
||||
<FileText size={16} />
|
||||
<span>{item.title}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.id}
|
||||
// При клике в сайдбаре сбрасываем fileIndex, чтобы всегда открывался первый файл новой категории
|
||||
href={`/documents?doc=${item.id}`}
|
||||
className={`documents-link documents-link--button${
|
||||
selectedItem?.id === item.id ? " documents-link--active" : ""
|
||||
}`}
|
||||
>
|
||||
<Eye size={16} />
|
||||
<span>{item.title}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div className="documents-content">
|
||||
<article className="page-panel documents-preview">
|
||||
<div className="documents-preview__header">
|
||||
<div style={{ flex: 1 }}>
|
||||
<span className="eyebrow">Просмотр документа</span>
|
||||
<h2>{selectedItem?.title ?? "Документ не выбран"}</h2>
|
||||
|
||||
{/* Вывод списка кнопок, если файлов несколько */}
|
||||
{selectedItem?.file && Array.isArray(selectedItem.file) && selectedItem.file.length > 1 && (
|
||||
<div style={{ display: "flex", gap: "8px", flexWrap: "wrap", marginTop: "12px" }}>
|
||||
{selectedItem.file.map((fileName, idx) => {
|
||||
const validCurrentIndex = selectedIndex < selectedItem.file.length ? selectedIndex : 0;
|
||||
const isActive = validCurrentIndex === idx;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={fileName}
|
||||
href={`/documents?doc=${selectedItem.id}&fileIndex=${idx}`}
|
||||
className={`documents-link documents-link--button ${
|
||||
isActive ? "documents-link--active" : ""
|
||||
}`}
|
||||
style={{ padding: "6px 12px", width: "auto", fontSize: "0.85rem" }}
|
||||
>
|
||||
<FileText size={14} />
|
||||
<span>Файл {idx + 1}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{fileForLink ? (
|
||||
<a
|
||||
href={`/documents/${fileForLink}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="documents-preview__note"
|
||||
>
|
||||
<ExternalLink size={18} />
|
||||
<span>Открыть в отдельной вкладке</span>
|
||||
</a>
|
||||
) : (
|
||||
<div className="documents-preview__note">
|
||||
<FileText size={18} />
|
||||
<span>Документ недоступен</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{previewUrl ? (
|
||||
<div className="documents-preview__frame">
|
||||
<iframe
|
||||
// Важно: key={fileForLink} заставит iframe перезагрузиться при смене файла
|
||||
key={fileForLink}
|
||||
src={previewUrl}
|
||||
title={selectedItem?.title ?? "Документ"}
|
||||
className="documents-preview__iframe"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="documents-preview__empty">Документ не выбран.</div>
|
||||
)}
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,980 @@
|
||||
:root {
|
||||
--bg-top: #edf5f3;
|
||||
--bg-bottom: #d9e7e2;
|
||||
--surface: rgba(255, 255, 255, 0.42);
|
||||
--surface-strong: rgba(255, 255, 255, 0.58);
|
||||
--surface-dark: rgba(19, 45, 41, 0.54);
|
||||
--text: #173631;
|
||||
--text-soft: #54706a;
|
||||
--line: rgba(171, 196, 190, 0.66);
|
||||
--accent: #177884;
|
||||
--accent-strong: #0f5560;
|
||||
--accent-soft: rgba(213, 239, 238, 0.84);
|
||||
--shadow: 0 24px 70px rgba(18, 46, 42, 0.08);
|
||||
--container: 1240px;
|
||||
--radius: 24px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
font-family: "Segoe UI", "Helvetica Neue", sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, rgba(23, 120, 132, 0.12), transparent 24%),
|
||||
radial-gradient(circle at 100% 10%, rgba(147, 199, 204, 0.16), transparent 26%),
|
||||
radial-gradient(circle at 20% 60%, rgba(255, 255, 255, 0.24), transparent 20%),
|
||||
radial-gradient(circle at 85% 72%, rgba(125, 171, 178, 0.14), transparent 24%),
|
||||
linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.shell {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shell::before,
|
||||
.shell::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.shell::before {
|
||||
inset: -4% -6% -16% -6%;
|
||||
background-image:
|
||||
linear-gradient(rgba(235, 243, 240, 0.5), rgba(219, 232, 227, 0.62)),
|
||||
url("/images/lab-bg-1.jpg");
|
||||
background-position: center;
|
||||
filter: blur(9px) saturate(0.98);
|
||||
opacity: 0.2;
|
||||
transform: scale(1.08);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.shell::after {
|
||||
inset: 14% -10% -22% 12%;
|
||||
background-image:
|
||||
linear-gradient(rgba(232, 240, 237, 0.36), rgba(215, 228, 223, 0.52)),
|
||||
url("/images/lab-bg-2.jpg");
|
||||
background-position: center;
|
||||
filter: blur(12px) saturate(0.98);
|
||||
opacity: 0.2;
|
||||
transform: scale(1.1);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: min(100% - 32px, var(--container));
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
backdrop-filter: blur(26px);
|
||||
background: rgba(237, 245, 243, 0.48);
|
||||
border-bottom: 1px solid rgba(171, 196, 190, 0.44);
|
||||
}
|
||||
|
||||
.site-header__inner,
|
||||
.site-footer__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
flex: 0 1 420px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.brand__eyebrow {
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.brand__name {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.15;
|
||||
font-weight: 700;
|
||||
max-width: 28ch;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.brand__tag {
|
||||
color: var(--text-soft);
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
flex: 1 1 auto;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.nav__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 34px;
|
||||
padding: 0 11px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
color: var(--text-soft);
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
background-color 0.18s ease,
|
||||
color 0.18s ease,
|
||||
box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.nav__link:hover {
|
||||
color: var(--accent);
|
||||
border-color: rgba(23, 120, 132, 0.26);
|
||||
background: rgba(255, 255, 255, 0.42);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.nav__link--active {
|
||||
color: #0f5560;
|
||||
border-color: rgba(23, 120, 132, 0.48);
|
||||
background: rgba(218, 242, 241, 0.82);
|
||||
box-shadow: 0 10px 18px rgba(18, 46, 42, 0.06);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.phone-pill,
|
||||
.button,
|
||||
.ghost-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
min-height: 46px;
|
||||
padding: 0 20px;
|
||||
border-radius: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.phone-pill {
|
||||
background: var(--surface-strong);
|
||||
border: 1px solid var(--line);
|
||||
backdrop-filter: blur(20px);
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: linear-gradient(135deg, #0e6d7d, #1b8691);
|
||||
color: #fff;
|
||||
border: 0;
|
||||
box-shadow: 0 18px 34px rgba(16, 107, 122, 0.24);
|
||||
}
|
||||
|
||||
.ghost-button {
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.32);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 54px 0 30px;
|
||||
}
|
||||
|
||||
.hero__grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
|
||||
gap: 28px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.hero__panel,
|
||||
.section-shell,
|
||||
.card,
|
||||
.metric,
|
||||
.page-panel {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.24));
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
.hero__panel {
|
||||
padding: 34px;
|
||||
border-radius: 28px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero__panel::before,
|
||||
.hero__visual::before,
|
||||
.section-shell::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.52), transparent 18%),
|
||||
radial-gradient(circle at 88% 8%, rgba(212, 239, 238, 0.42), transparent 22%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 42%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero__panel > *,
|
||||
.hero__visual > *,
|
||||
.section-shell > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 36px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-strong);
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero__kicker {
|
||||
margin-top: 18px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.hero h1,
|
||||
.section-heading h2,
|
||||
.page-hero h1 {
|
||||
margin: 18px 0 14px;
|
||||
line-height: 1.04;
|
||||
letter-spacing: 0;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2.5rem, 3.6vw, 4rem);
|
||||
max-width: 7ch;
|
||||
overflow: visible;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.hero p,
|
||||
.section-heading p,
|
||||
.metric p,
|
||||
.card p,
|
||||
.page-body,
|
||||
.page-intro {
|
||||
color: var(--text-soft);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero__actions,
|
||||
.hero__facts,
|
||||
.hero__highlights {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.hero__actions {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.hero__highlights {
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.hero__highlight {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 44px;
|
||||
padding: 0 16px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.34);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--accent-strong);
|
||||
font-weight: 600;
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.hero__facts {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.hero__fact {
|
||||
flex: 1 1 180px;
|
||||
padding: 18px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.32);
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: 0 18px 38px rgba(18, 46, 42, 0.06);
|
||||
backdrop-filter: blur(18px);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.hero__fact strong {
|
||||
display: block;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.hero__fact:hover,
|
||||
.hero__highlight:hover,
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 22px 42px rgba(18, 46, 42, 0.1);
|
||||
border-color: rgba(23, 120, 132, 0.42);
|
||||
}
|
||||
|
||||
.hero__visual {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
border-radius: 30px;
|
||||
box-shadow: var(--shadow);
|
||||
background:
|
||||
linear-gradient(rgba(229, 239, 235, 0.62), rgba(201, 220, 214, 0.7)),
|
||||
url("/images/lab-bg-1.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
backdrop-filter: blur(28px);
|
||||
}
|
||||
|
||||
.hero__visual--info {
|
||||
padding: 26px;
|
||||
background:
|
||||
linear-gradient(rgba(233, 242, 239, 0.58), rgba(206, 223, 217, 0.66)),
|
||||
url("/images/lab-bg-2.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border: 1px solid var(--line);
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
.hero__visual-grid {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.hero__visual-card {
|
||||
padding: 22px;
|
||||
border-radius: 22px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border: 1px solid rgba(171, 196, 190, 0.72);
|
||||
box-shadow: 0 18px 36px rgba(18, 46, 42, 0.06);
|
||||
backdrop-filter: blur(22px);
|
||||
}
|
||||
|
||||
.hero__visual-card strong {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.hero__visual-card p {
|
||||
margin: 0 0 16px;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.hero__visual-card--accent {
|
||||
background: rgba(19, 45, 41, 0.58);
|
||||
color: #edf7f4;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.hero__visual-card--accent p {
|
||||
color: rgba(237, 247, 244, 0.82);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.hero__visual-label {
|
||||
display: inline-flex;
|
||||
min-height: 28px;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.42);
|
||||
color: var(--accent-strong);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.hero__visual-card--accent .hero__visual-label {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #edf7f4;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 26px 0 72px;
|
||||
}
|
||||
|
||||
.section-shell {
|
||||
padding: 28px;
|
||||
border-radius: 30px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.grid--3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid--4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid--2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.card,
|
||||
.metric,
|
||||
.page-panel {
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 24px;
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
.card h3,
|
||||
.metric strong,
|
||||
.page-panel h3 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.icon-chip {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 18px;
|
||||
background: rgba(213, 239, 238, 0.82);
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.doctor-card__name {
|
||||
font-size: 1.08rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.doctor-card__role {
|
||||
color: var(--accent-strong);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
margin: 10px 0 12px;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
padding: 52px 0 18px;
|
||||
}
|
||||
|
||||
.page-hero h1 {
|
||||
font-size: clamp(2rem, 4vw, 3.25rem);
|
||||
max-width: 14ch;
|
||||
}
|
||||
|
||||
.page-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
|
||||
gap: 24px;
|
||||
padding-bottom: 72px;
|
||||
}
|
||||
|
||||
.page-layout--single {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.page-panel {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.side-stack {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.list-clean {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.list-clean li {
|
||||
padding: 0 0 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.form input,
|
||||
.form textarea {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.34);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.form textarea {
|
||||
min-height: 140px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
margin-top: 36px;
|
||||
border-top: 1px solid rgba(171, 196, 190, 0.44);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(78, 130, 173, 0.9), rgba(89, 138, 183, 0.82) 36%, rgba(72, 118, 166, 0.88));
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.footer-meta {
|
||||
color: rgba(235, 245, 244, 0.84);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.footer-panel {
|
||||
padding: 22px 0 28px;
|
||||
}
|
||||
|
||||
.footer-tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.footer-tile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
min-height: 88px;
|
||||
padding: 18px 20px;
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
color: #174a61;
|
||||
box-shadow: 0 20px 34px rgba(22, 54, 86, 0.12);
|
||||
}
|
||||
|
||||
.footer-tile__main {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.footer-tile__icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background: rgba(23, 120, 132, 0.12);
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.footer-tile__icon img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.footer-map,
|
||||
.footer-contact {
|
||||
padding: 22px 24px;
|
||||
border-radius: 22px;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
color: #f2fbfa;
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.footer-map {
|
||||
display: block;
|
||||
min-height: 140px;
|
||||
background:
|
||||
linear-gradient(rgba(16, 68, 94, 0.28), rgba(16, 68, 94, 0.28)),
|
||||
url("/images/lab-bg-2.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.footer-map__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.footer-map__title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.footer-map__meta {
|
||||
color: rgba(242, 251, 250, 0.82);
|
||||
}
|
||||
|
||||
.footer-contact strong {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.footer-contact__phone {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 12px 0 8px;
|
||||
min-height: 40px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.documents-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
|
||||
gap: 28px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.documents-sidebar__panel {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 20px;
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.24));
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
.documents-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 52px;
|
||||
padding: 0 16px;
|
||||
border-radius: 14px;
|
||||
background: rgba(225, 240, 238, 0.78);
|
||||
border: 1px solid rgba(171, 196, 190, 0.74);
|
||||
color: #365866;
|
||||
box-shadow: 0 10px 18px rgba(18, 46, 42, 0.05);
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.documents-link--button {
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
box-shadow 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
background-color 0.18s ease;
|
||||
}
|
||||
|
||||
.documents-link--button:hover,
|
||||
.documents-link--download:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(23, 120, 132, 0.46);
|
||||
background: rgba(236, 246, 245, 0.94);
|
||||
box-shadow: 0 18px 28px rgba(18, 46, 42, 0.08);
|
||||
}
|
||||
|
||||
.documents-link--active {
|
||||
border-color: rgba(23, 120, 132, 0.46);
|
||||
background: rgba(213, 239, 238, 0.9);
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.documents-link--disabled {
|
||||
opacity: 0.58;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.documents-preview {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
min-height: 820px;
|
||||
}
|
||||
|
||||
.documents-preview__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.documents-preview__header h2 {
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
|
||||
.documents-preview__note {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 40px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(225, 240, 238, 0.76);
|
||||
color: var(--accent-strong);
|
||||
font-size: 0.92rem;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.documents-preview__frame {
|
||||
min-height: 700px;
|
||||
border-radius: 22px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(171, 196, 190, 0.74);
|
||||
background: rgba(255, 255, 255, 0.48);
|
||||
}
|
||||
|
||||
.documents-preview__iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
border: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.documents-preview__empty {
|
||||
min-height: 220px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
gap: 8px;
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
border-radius: 22px;
|
||||
border: 1px dashed rgba(171, 196, 190, 0.84);
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.documents-content {
|
||||
display: grid;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.documents-summary h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.services-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.services-sheet {
|
||||
padding: 30px 34px;
|
||||
border-radius: 28px;
|
||||
background: linear-gradient(180deg, rgba(188, 198, 227, 0.46), rgba(202, 210, 235, 0.38));
|
||||
border: 1px solid rgba(171, 196, 190, 0.6);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.services-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.services-card {
|
||||
display: block;
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.38);
|
||||
border: 1px solid rgba(171, 196, 190, 0.74);
|
||||
box-shadow: 0 16px 30px rgba(18, 46, 42, 0.06);
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
box-shadow 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
background-color 0.18s ease;
|
||||
}
|
||||
|
||||
.services-card h3 {
|
||||
margin: 0 0 12px;
|
||||
color: #334f74;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.services-card p {
|
||||
margin: 0;
|
||||
color: #47627f;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.services-card:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(23, 120, 132, 0.46);
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 22px 38px rgba(18, 46, 42, 0.12);
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.site-header__inner {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hero__grid,
|
||||
.page-layout,
|
||||
.grid--3,
|
||||
.grid--4 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero__visual {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.footer-tiles,
|
||||
.footer-bottom,
|
||||
.documents-layout,
|
||||
.grid--2,
|
||||
.services-card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.site-header__inner,
|
||||
.site-footer__inner,
|
||||
.nav,
|
||||
.header-actions,
|
||||
.hero__actions,
|
||||
.hero__facts,
|
||||
.hero__highlights {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2.2rem, 10vw, 3.3rem);
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.nav__link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero__panel,
|
||||
.section-shell,
|
||||
.hero__overlay,
|
||||
.page-panel,
|
||||
.card,
|
||||
.metric {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.hero__visual {
|
||||
min-height: 360px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
import { SiteFooter } from "@/components/site-footer";
|
||||
import { SiteHeader } from "@/components/site-header";
|
||||
import { fallbackHome } from "@/lib/fallback-data";
|
||||
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "ККПАБ",
|
||||
description: "Современный сайт консультационного клинического патологоанатомического бюро",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
|
||||
const site = fallbackHome.site;
|
||||
|
||||
return (
|
||||
<html lang="ru">
|
||||
<body>
|
||||
<div className="shell">
|
||||
<SiteHeader siteName={site.site_name} tagline={site.tagline} phone={site.phone} />
|
||||
{children}
|
||||
<SiteFooter
|
||||
siteName={site.site_name}
|
||||
phone={site.phone}
|
||||
email={site.email}
|
||||
address={`${site.city}, ${site.address}`}
|
||||
workingHours={site.working_hours}
|
||||
/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
import Link from "next/link";
|
||||
import { ArrowRight, Clock3, MapPin, Microscope, Users } from "lucide-react";
|
||||
|
||||
import { resolveIcon } from "@/components/icons";
|
||||
import { getHomeData } from "@/lib/api";
|
||||
import { fallbackHome } from "@/lib/fallback-data";
|
||||
|
||||
export default async function HomePage() {
|
||||
const data = await getHomeData();
|
||||
const { site } = data;
|
||||
const services = data.services.length ? data.services : fallbackHome.services;
|
||||
const doctors =
|
||||
data.doctors.length >= fallbackHome.doctors.length ? data.doctors : fallbackHome.doctors;
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="hero">
|
||||
<div className="container hero__grid">
|
||||
<div className="hero__panel">
|
||||
<span className="eyebrow">Патоморфология и гистология</span>
|
||||
<div className="hero__kicker">Консультационное клиническое патологоанатомическое бюро</div>
|
||||
<h1>Точная диагностика</h1>
|
||||
<p>
|
||||
Гистологические исследования, консультации специалистов, официальные
|
||||
документы и контактная информация.
|
||||
</p>
|
||||
|
||||
<div className="hero__actions">
|
||||
<Link className="button" href="/services">
|
||||
Исследования
|
||||
<ArrowRight size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="hero__highlights">
|
||||
<Link className="hero__highlight" href="/services">
|
||||
<Microscope size={18} />
|
||||
<span>Гистологические исследования</span>
|
||||
</Link>
|
||||
<Link className="hero__highlight" href="/specialists">
|
||||
<Users size={18} />
|
||||
<span>Команда специалистов</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="hero__facts">
|
||||
<Link className="hero__fact" href="/documents">
|
||||
<Clock3 size={18} />
|
||||
<strong>
|
||||
Пн-Пт 08:00-17:00,
|
||||
<br />
|
||||
Сб 09:00-14:00
|
||||
</strong>
|
||||
<p>Режим работы и организационная информация доступны в разделе документов.</p>
|
||||
</Link>
|
||||
<Link className="hero__fact" href="/documents">
|
||||
<MapPin size={18} />
|
||||
<strong>
|
||||
Ставрополь,
|
||||
<br />
|
||||
ул. Балакирева, 5
|
||||
</strong>
|
||||
<p>Адрес, контакты и обязательные сведения размещены в одном разделе.</p>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hero__visual hero__visual--info">
|
||||
<div className="hero__visual-grid">
|
||||
<div className="hero__visual-card">
|
||||
<span className="hero__visual-label">Документы</span>
|
||||
<strong>Лицензии и сведения о медицинской организации</strong>
|
||||
<p>Официальная информация собрана в одном разделе с быстрым доступом.</p>
|
||||
<Link href="/documents" className="ghost-button">
|
||||
Открыть документы
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="hero__visual-card">
|
||||
<span className="hero__visual-label">Специалисты</span>
|
||||
<strong>Врачи и сотрудники бюро</strong>
|
||||
<p>Информация о специалистах, направлениях работы и профессиональном составе.</p>
|
||||
<Link href="/specialists" className="ghost-button">
|
||||
Смотреть специалистов
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="hero__visual-card hero__visual-card--accent">
|
||||
<span className="hero__visual-label">Контакты</span>
|
||||
<strong>
|
||||
{site.city}, {site.address}
|
||||
</strong>
|
||||
<p>{site.working_hours}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="section-shell">
|
||||
<div className="section-heading">
|
||||
<span className="eyebrow">Услуги</span>
|
||||
<h2>Основные направления работы бюро</h2>
|
||||
<p>Информация об исследованиях и консультациях специалистов.</p>
|
||||
</div>
|
||||
<div className="grid grid--3">
|
||||
{services.map((service) => (
|
||||
<article className="card" key={service.id}>
|
||||
<div className="icon-chip">{resolveIcon(service.icon)}</div>
|
||||
<h3>{service.title}</h3>
|
||||
<p>{service.short_description}</p>
|
||||
<Link href="/services" className="ghost-button">
|
||||
Подробнее
|
||||
</Link>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="section-shell">
|
||||
<div className="section-heading">
|
||||
<span className="eyebrow">Специалисты</span>
|
||||
<h2>Команда бюро</h2>
|
||||
<p>Сведения о врачах и сотрудниках бюро.</p>
|
||||
</div>
|
||||
<div className="grid grid--3">
|
||||
{doctors.map((doctor) => (
|
||||
<article className="card" key={doctor.id}>
|
||||
<div className="doctor-card__name">{doctor.full_name}</div>
|
||||
<div className="doctor-card__role">{doctor.position}</div>
|
||||
<p>{doctor.bio}</p>
|
||||
<p>{doctor.credentials}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
import { getPage, getPages } from "@/lib/api";
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const pages = await getPages();
|
||||
return pages.map((page) => ({ slug: page.slug }));
|
||||
}
|
||||
|
||||
export default async function ContentPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const page = await getPage(slug);
|
||||
|
||||
if (!page) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<section className="page-hero">
|
||||
<span className="eyebrow">Информация</span>
|
||||
<h1>{page.title}</h1>
|
||||
<p className="page-intro">{page.intro}</p>
|
||||
</section>
|
||||
|
||||
<section className="page-layout page-layout--single">
|
||||
<article className="page-panel">
|
||||
<div className="page-body">{page.body}</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
export default function ReviewsPage() {
|
||||
return (
|
||||
<div className="container">
|
||||
<section className="page-hero">
|
||||
<span className="eyebrow">Отзывы</span>
|
||||
<h1>Отзывы</h1>
|
||||
<p className="page-intro">
|
||||
Раздел подготовлен для публикации отзывов пациентов и партнеров бюро.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
import { getService } from "@/lib/api";
|
||||
|
||||
export default async function ServiceDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const service = await getService(slug);
|
||||
|
||||
if (!service) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<section className="page-hero">
|
||||
<span className="eyebrow">Услуга</span>
|
||||
<h1>{service.title}</h1>
|
||||
<p className="page-intro">{service.short_description}</p>
|
||||
</section>
|
||||
|
||||
<section className="page-layout page-layout--single">
|
||||
<article className="page-panel">
|
||||
<div className="page-body">{service.description}</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import Link from "next/link";
|
||||
|
||||
const services = [
|
||||
{
|
||||
title: "Исследование биопсийно-операционного материала",
|
||||
description:
|
||||
"Исследование биопсийно-операционного материала органов и тканей при воспалительных процессах, дистрофиях, патологии артерий/вен, пороках развития.",
|
||||
},
|
||||
{
|
||||
title: "Исследование операционного материала",
|
||||
description:
|
||||
"Исследование операционного материала органов и тканей при инфекционных заболеваниях, опухолях ясного гистогенеза без дисплазии, гранулематозном воспалении.",
|
||||
},
|
||||
{
|
||||
title: "Исследование диагностических биопсий",
|
||||
description:
|
||||
"Исследование диагностических биопсий (кроме пункционных) органов и тканей при воспалении, дисфункции, дисплазии, опухолях, требующих уточнения гистогенеза, степени инвазии, стадии прогрессирования.",
|
||||
},
|
||||
{
|
||||
title: "Исследование диагностических пункционных биопсий",
|
||||
description:
|
||||
"Исследование диагностических пункционных биопсий различных органов и тканей, биопсий и операционный материал при иммунопатологических процессах, опухолях и опухолеподобных поражениях.",
|
||||
},
|
||||
{
|
||||
title: "Экспресс-исследование диагностических биопсий",
|
||||
description:
|
||||
"Экспресс-исследование диагностических биопсий (кроме пункционных) органов и тканей при воспалении, дисфункции, дисплазии, опухолях, требующих уточнения гистогенеза, степени инвазии, стадии прогрессирования.",
|
||||
},
|
||||
{
|
||||
title: "Исследование костно-хрящевых тканей",
|
||||
description:
|
||||
"Исследование костно-хрящевых тканей, включая декальцинацию операционного материала.",
|
||||
},
|
||||
{
|
||||
title: "Гистологическое исследование последов",
|
||||
description:
|
||||
"Гистологическое исследование последов с целью диагностики внутриутробного инфицирования.",
|
||||
},
|
||||
];
|
||||
|
||||
const priceHref = "/documents/Price.pdf";
|
||||
const insuranceHref = "/documents/Strah_org.pdf";
|
||||
|
||||
export default function ServicesPage() {
|
||||
return (
|
||||
<div className="container">
|
||||
<section className="page-hero">
|
||||
<span className="eyebrow">Услуги</span>
|
||||
<h1>Перечень исследований</h1>
|
||||
<p className="page-intro">
|
||||
Основные виды гистологических и диагностических исследований, выполняемых бюро.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="section">
|
||||
<div className="services-sheet">
|
||||
<div className="services-card-grid">
|
||||
{services.map((service) => (
|
||||
<Link
|
||||
key={service.title}
|
||||
href={priceHref}
|
||||
className="services-card"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
<h3>{service.title}</h3>
|
||||
<p>{service.description}</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="services-actions">
|
||||
<Link href={insuranceHref} className="ghost-button" target="_blank" rel="noreferrer noopener">
|
||||
Страховые организации
|
||||
</Link>
|
||||
<Link href={priceHref} className="ghost-button" target="_blank" rel="noreferrer noopener">
|
||||
Прейскурант
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { fallbackHome } from "@/lib/fallback-data";
|
||||
|
||||
const specialistsIntro = [
|
||||
"В патологоанатомическом бюро работают медицинские специалисты различного уровня: врачи с большим опытом стажем и работы, многие из которых имеют ученые степени и квалификационные категории; квалификация врачей постоянно повышается за счет прохождения циклов усовершенствования – очных и он-лайн, а также посредством участия в национальных и международных форумах, изучения специальной литературы, обмена опытом с патологоанатомами других регионов. Среди врачей бюро есть также начинающие сотрудники, активно перенимающие опыт наставников. ККПАБ является учебной базой для подготовки клинических ординаторов по патологической анатомии, пополняющих в дальнейшем кадровый потенциал патологоанатомической службы края.",
|
||||
"Существенный вклад в процесс патологоанатомической диагностики вносит средний медицинский персонал: медицинские лабораторные техники, медицинские регистраторы, лаборанты, медицинские технологи. От их работы зависит правильный прием, регистрация и обработка поступающего биологического материала для изготовления микропрепаратов, которые врач изучает под микроскопом для того, чтобы поставить диагноз. Для гистологической обработки используется высокотехнологичное современное оборудование ведущих отечественных и мировых производителей.",
|
||||
"Многое в обеспечении диагностического процесса зависит и от сотрудников младшего звена – санитаров. Здесь трудятся ответственные и трудолюбивые сотрудники, работа которых состоит в поддержании биологической безопасности и надлежащего санитарно-гигиенического состояния бюро.",
|
||||
];
|
||||
|
||||
export default function SpecialistsPage() {
|
||||
const doctors = fallbackHome.doctors;
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<section className="page-hero">
|
||||
<span className="eyebrow">Специалисты</span>
|
||||
<h1>Команда бюро</h1>
|
||||
<div className="page-intro">
|
||||
{specialistsIntro.map((paragraph) => (
|
||||
<p key={paragraph}>{paragraph}</p>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section className="section">
|
||||
<div className="grid grid--3">
|
||||
{doctors.map((doctor) => (
|
||||
<article className="card" key={doctor.id}>
|
||||
<div className="doctor-card__name">{doctor.full_name}</div>
|
||||
<div className="doctor-card__role">{doctor.position}</div>
|
||||
<p>{doctor.bio}</p>
|
||||
<p>{doctor.credentials}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user