|
|
|
|
@ -0,0 +1,577 @@
|
|
|
|
|
import React from 'react'; |
|
|
|
|
import { Link, useNavigate } from 'react-router-dom'; |
|
|
|
|
import { I } from './icons.jsx'; |
|
|
|
|
import { IOSDevice } from './frames/IOSDevice.jsx'; |
|
|
|
|
import { FitWrap } from './FitWrap.jsx'; |
|
|
|
|
import { ClinicLeafletMap } from './ClinicLeafletMap.jsx'; |
|
|
|
|
|
|
|
|
|
/** Палитра и типографика ближе к скриншоту Oclinica */ |
|
|
|
|
const oc = { |
|
|
|
|
pageBg: '#F2F2F2', |
|
|
|
|
headerBg: '#FFFFFF', |
|
|
|
|
card: '#FFFFFF', |
|
|
|
|
/** Телефон и «Записаться на приём» — один фон и цвет текста */ |
|
|
|
|
phoneBtnBg: '#9ad1d8', |
|
|
|
|
phoneBtnFg: '#001c22', |
|
|
|
|
phoneBtnShadow: '0 3px 14px rgba(0, 28, 34, 0.08)', |
|
|
|
|
bookBtnBg: '#9ad1d8', |
|
|
|
|
bookBtnFg: '#001c22', |
|
|
|
|
chatBorder: '#C4A574', |
|
|
|
|
chatFg: '#6B542E', |
|
|
|
|
openBadgeBg: '#769197', |
|
|
|
|
openBadgeFg: '#FFFFFF', |
|
|
|
|
/** Блок «Почему нас выбирают» */ |
|
|
|
|
hWhy: '#B88E71', |
|
|
|
|
whyWrapBg: '#EBEDF0', |
|
|
|
|
/** Звезда над заголовком «Почему нас выбирают» */ |
|
|
|
|
whyHeaderStar: '#5f96a0', |
|
|
|
|
/** Иконки Email / Веб-сайт */ |
|
|
|
|
whyInfoIconBg: '#f8faf9', |
|
|
|
|
whyInfoIconFg: '#619799', |
|
|
|
|
whyRowLabel: '#5A9E95', |
|
|
|
|
whyRowValue: '#3A4149', |
|
|
|
|
statCardValue: '#599195', |
|
|
|
|
statCardLabel: '#6B7684', |
|
|
|
|
noteBg: '#E8F4FC', |
|
|
|
|
noteBorder: '#B9D8EE', |
|
|
|
|
noteFg: '#245A7A', |
|
|
|
|
routeBtnBg: '#EBEDEF', |
|
|
|
|
routeBtnFg: '#4A5560', |
|
|
|
|
teal: '#1F8F85', |
|
|
|
|
tealDark: '#166B63', |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
function MiniBuilding() { |
|
|
|
|
return ( |
|
|
|
|
<div style={{ |
|
|
|
|
width: '100%', height: '100%', |
|
|
|
|
background: 'linear-gradient(180deg, #D4EBE6 0%, #E8F5F2 50%, #B8D4C8 100%)', |
|
|
|
|
display: 'flex', alignItems: 'flex-end', justifyContent: 'center', paddingBottom: 5, |
|
|
|
|
}}> |
|
|
|
|
<div style={{ |
|
|
|
|
width: '68%', height: '58%', |
|
|
|
|
background: '#E5DAC8', |
|
|
|
|
borderTopLeftRadius: 3, borderTopRightRadius: 3, |
|
|
|
|
position: 'relative', |
|
|
|
|
boxShadow: 'inset 0 -10px 0 #7A5F3A', |
|
|
|
|
}}> |
|
|
|
|
<div style={{ |
|
|
|
|
position: 'absolute', top: '16%', left: '50%', transform: 'translateX(-50%)', |
|
|
|
|
padding: '3px 8px', background: '#166B63', color: '#fff', fontSize: 7, fontWeight: 800, |
|
|
|
|
borderRadius: 3, letterSpacing: 0.4, |
|
|
|
|
}}>OCLINICA</div> |
|
|
|
|
<div style={{ |
|
|
|
|
position: 'absolute', inset: '40% 10% 20%', |
|
|
|
|
display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 3, |
|
|
|
|
}}> |
|
|
|
|
{[1, 0, 1, 1, 0, 1, 0, 1, 1, 0].map((l, i) => ( |
|
|
|
|
<div key={i} style={{ background: l ? '#F5D78A' : '#2A4544', borderRadius: 1, minHeight: 4 }} /> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function NavRouteIcon({ size = 18, color = oc.teal }) { |
|
|
|
|
return ( |
|
|
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round"> |
|
|
|
|
<path d="M9 18l-5-5 5-5M4 13h12.5a4.5 4.5 0 014.5 4.5V19" /> |
|
|
|
|
</svg> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** Глифы VK / YouTube — геометрия Simple Icons, единый цвет в интерфейсе */ |
|
|
|
|
const SI_VK_PATH = |
|
|
|
|
'm9.489.004.729-.003h3.564l.73.003.914.01.433.007.418.011.403.014.388.016.374.021.36.025.345.03.333.033c1.74.196 2.933.616 3.833 1.516.9.9 1.32 2.092 1.516 3.833l.034.333.029.346.025.36.02.373.025.588.012.41.013.644.009.915.004.98-.001 3.313-.003.73-.01.914-.007.433-.011.418-.014.403-.016.388-.021.374-.025.36-.03.345-.033.333c-.196 1.74-.616 2.933-1.516 3.833-.9.9-2.092 1.32-3.833 1.516l-.333.034-.346.029-.36.025-.373.02-.588.025-.41.012-.644.013-.915.009-.98.004-3.313-.001-.73-.003-.914-.01-.433-.007-.418-.011-.403-.014-.388-.016-.374-.021-.36-.025-.345-.03-.333-.033c-1.74-.196-2.933-.616-3.833-1.516-.9-.9-1.32-2.092-1.516-3.833l-.034-.333-.029-.346-.025-.36-.02-.373-.025-.588-.012-.41-.013-.644-.009-.915-.004-.98.001-3.313.003-.73.01-.914.007-.433.011-.418.014-.403.016-.388.021-.374.025-.36.03-.345.033-.333c.196-1.74.616-2.933 1.516-3.833.9-.9 2.092-1.32 3.833-1.516l.333-.034.346-.029.36-.025.373-.02.588-.025.41-.012.644-.013.915-.009ZM6.79 7.3H4.05c.13 6.24 3.25 9.99 8.72 9.99h.31v-3.57c2.01.2 3.53 1.67 4.14 3.57h2.84c-.78-2.84-2.83-4.41-4.11-5.01 1.28-.74 3.08-2.54 3.51-4.98h-2.58c-.56 1.98-2.22 3.78-3.8 3.95V7.3H10.5v6.92c-1.6-.4-3.62-2.34-3.71-6.92Z'; |
|
|
|
|
|
|
|
|
|
const SI_YOUTUBE_BG_PATH = |
|
|
|
|
'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814z'; |
|
|
|
|
const SI_YOUTUBE_PLAY_PATH = 'M9.545 15.568V8.432L15.818 12l-6.273 3.568z'; |
|
|
|
|
|
|
|
|
|
function SocialVkIcon({ size = 26, color = oc.whyHeaderStar }) { |
|
|
|
|
return ( |
|
|
|
|
<svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ display: 'block' }}> |
|
|
|
|
<path fill={color} d={SI_VK_PATH} /> |
|
|
|
|
</svg> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function SocialYoutubeIcon({ size = 26, color = oc.whyHeaderStar, playColor = '#fff' }) { |
|
|
|
|
return ( |
|
|
|
|
<svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ display: 'block' }}> |
|
|
|
|
<path fill={color} d={SI_YOUTUBE_BG_PATH} /> |
|
|
|
|
<path fill={playColor} d={SI_YOUTUBE_PLAY_PATH} /> |
|
|
|
|
</svg> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function OclinicaTabBar() { |
|
|
|
|
const tab = (label, Icon, active) => ( |
|
|
|
|
<div |
|
|
|
|
key={label} |
|
|
|
|
style={{ |
|
|
|
|
flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, |
|
|
|
|
padding: '5px 0 2px', color: active ? oc.tealDark : '#9AA7B4', |
|
|
|
|
fontSize: 10, fontWeight: active ? 700 : 600, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<Icon size={22} sw={active ? 2.1 : 1.75} style={{ color: active ? oc.tealDark : '#9AA7B4' }} /> |
|
|
|
|
<span>{label}</span> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
return ( |
|
|
|
|
<div style={{ display: 'flex', paddingBottom: 20 }}> |
|
|
|
|
<Link to="/" style={{ flex: 1, textDecoration: 'none', color: 'inherit' }}> |
|
|
|
|
{tab('Главная', I.home, false)} |
|
|
|
|
</Link> |
|
|
|
|
{tab('Клиники', I.pin, true)} |
|
|
|
|
{tab('Запись', I.calendar, false)} |
|
|
|
|
{tab('Профиль', I.profile, false)} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** Конверт — заливка заданным зелёным */ |
|
|
|
|
function WhyMailGlyph({ size = 22, color = oc.whyInfoIconFg }) { |
|
|
|
|
return ( |
|
|
|
|
<svg width={size} height={size} viewBox="0 0 24 24" aria-hidden style={{ display: 'block' }}> |
|
|
|
|
<path |
|
|
|
|
fill={color} |
|
|
|
|
d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" |
|
|
|
|
/> |
|
|
|
|
</svg> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** Глобус — контур тем же зелёным */ |
|
|
|
|
function WhyGlobeGlyph({ size = 22, color = oc.whyInfoIconFg }) { |
|
|
|
|
return ( |
|
|
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden style={{ display: 'block' }}> |
|
|
|
|
<circle cx="12" cy="12" r="9.25" stroke={color} strokeWidth="2" /> |
|
|
|
|
<ellipse cx="12" cy="12" rx="4.2" ry="9.25" stroke={color} strokeWidth="1.75" /> |
|
|
|
|
<path d="M2.5 12h19" stroke={color} strokeWidth="1.75" strokeLinecap="round" /> |
|
|
|
|
<path |
|
|
|
|
d="M6.5 6.5c1.4 1.9 2.2 4.1 2.2 5.5s-.8 3.6-2.2 5.5M17.5 6.5c-1.4 1.9-2.2 4.1-2.2 5.5s.8 3.6 2.2 5.5" |
|
|
|
|
stroke={color} |
|
|
|
|
strokeWidth="1.55" |
|
|
|
|
strokeLinecap="round" |
|
|
|
|
/> |
|
|
|
|
</svg> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** Девятиконечная звезда + белая галочка по центру (блок «Почему нас выбирают») */ |
|
|
|
|
/** Внешний ≈8.35, внутренний ≈7.22 — чуть крупнее, лучи по-прежнему короткие */ |
|
|
|
|
const WHY_NINE_POINT_STAR_D = |
|
|
|
|
'M12.000,3.650L14.469,5.215L17.367,5.604L18.253,8.390L20.223,10.550L19.110,13.254L19.231,16.175L16.641,17.531L14.856,19.846L12.000,19.220L9.144,19.846L7.359,17.531L4.769,16.175L4.890,13.254L3.777,10.550L5.747,8.390L6.633,5.604L9.531,5.215Z'; |
|
|
|
|
|
|
|
|
|
function WhyHeaderStarGlyph({ size = 52, color = oc.whyHeaderStar }) { |
|
|
|
|
return ( |
|
|
|
|
<svg |
|
|
|
|
width={size} |
|
|
|
|
height={size} |
|
|
|
|
viewBox="0 0 24 24" |
|
|
|
|
aria-hidden |
|
|
|
|
style={{ display: 'inline-block', verticalAlign: 'middle' }} |
|
|
|
|
> |
|
|
|
|
<path fill={color} d={WHY_NINE_POINT_STAR_D} /> |
|
|
|
|
<path |
|
|
|
|
transform="translate(12,12) scale(0.52) translate(-12,-12)" |
|
|
|
|
d="M8.05 12.05l2.75 2.75 5.85-6.45" |
|
|
|
|
fill="none" |
|
|
|
|
stroke="#fff" |
|
|
|
|
strokeWidth="2.5" |
|
|
|
|
strokeLinecap="round" |
|
|
|
|
strokeLinejoin="round" |
|
|
|
|
/> |
|
|
|
|
</svg> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function StatPill({ value, label, suffix }) { |
|
|
|
|
return ( |
|
|
|
|
<div style={{ |
|
|
|
|
flex: 1, minWidth: 0, |
|
|
|
|
background: oc.card, |
|
|
|
|
borderRadius: 12, |
|
|
|
|
padding: '10px 4px 11px', |
|
|
|
|
textAlign: 'center', |
|
|
|
|
boxShadow: '0 1px 3px rgba(15,30,40,0.06)', |
|
|
|
|
border: '1px solid #E8EAED', |
|
|
|
|
}}> |
|
|
|
|
<div style={{ |
|
|
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3, |
|
|
|
|
fontSize: 16, fontWeight: 800, color: oc.statCardValue, fontFamily: 'var(--font-narrow)', lineHeight: 1.1, |
|
|
|
|
}}> |
|
|
|
|
<span>{value}</span> |
|
|
|
|
{suffix} |
|
|
|
|
</div> |
|
|
|
|
<div style={{ |
|
|
|
|
fontSize: 8, fontWeight: 800, letterSpacing: 0.7, color: oc.statCardLabel, marginTop: 5, |
|
|
|
|
lineHeight: 1.2, textTransform: 'uppercase', |
|
|
|
|
}}>{label}</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function InfoRow({ glyph, label, children }) { |
|
|
|
|
return ( |
|
|
|
|
<div style={{ |
|
|
|
|
display: 'flex', alignItems: 'center', gap: 14, |
|
|
|
|
background: oc.card, |
|
|
|
|
borderRadius: 14, |
|
|
|
|
padding: '12px 14px', |
|
|
|
|
marginBottom: 10, |
|
|
|
|
border: '1px solid #E8EAED', |
|
|
|
|
boxShadow: '0 1px 4px rgba(15,30,40,0.05)', |
|
|
|
|
}}> |
|
|
|
|
<div style={{ |
|
|
|
|
width: 46, height: 46, borderRadius: '50%', background: oc.whyInfoIconBg, |
|
|
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, |
|
|
|
|
border: '1px solid #eef2f0', |
|
|
|
|
}}> |
|
|
|
|
{glyph} |
|
|
|
|
</div> |
|
|
|
|
<div style={{ flex: 1, minWidth: 0 }}> |
|
|
|
|
<div style={{ |
|
|
|
|
fontSize: 13, color: oc.whyRowLabel, marginBottom: 3, fontWeight: 700, letterSpacing: 0.2, |
|
|
|
|
}}>{label}</div> |
|
|
|
|
<div style={{ fontSize: 15, fontWeight: 600, color: oc.whyRowValue, letterSpacing: 0.02, lineHeight: 1.35 }}> |
|
|
|
|
{children} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function ClinicCirclePhoto({ imageUrl, href }) { |
|
|
|
|
const [useFallback, setUseFallback] = React.useState(false); |
|
|
|
|
const img = !useFallback ? ( |
|
|
|
|
<img |
|
|
|
|
src={imageUrl} |
|
|
|
|
alt="" |
|
|
|
|
style={{ |
|
|
|
|
width: '100%', |
|
|
|
|
height: '100%', |
|
|
|
|
objectFit: 'cover', |
|
|
|
|
objectPosition: 'center', |
|
|
|
|
display: 'block', |
|
|
|
|
}} |
|
|
|
|
onError={() => setUseFallback(true)} |
|
|
|
|
/> |
|
|
|
|
) : ( |
|
|
|
|
<MiniBuilding /> |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
if (href) { |
|
|
|
|
return ( |
|
|
|
|
<a |
|
|
|
|
href={href} |
|
|
|
|
target="_blank" |
|
|
|
|
rel="noopener noreferrer" |
|
|
|
|
style={{ |
|
|
|
|
display: 'block', |
|
|
|
|
width: '100%', |
|
|
|
|
height: '100%', |
|
|
|
|
textDecoration: 'none', |
|
|
|
|
color: 'inherit', |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{img} |
|
|
|
|
</a> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
return img; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const FOOTER_H = 162; |
|
|
|
|
/** Выше внутренних слоёв Leaflet (~400–700), чтобы хром не перекрывался картой при скролле */ |
|
|
|
|
const Z_SCROLL = 0; |
|
|
|
|
const Z_HEADER = 2000; |
|
|
|
|
const Z_FOOTER_BAR = 2100; |
|
|
|
|
|
|
|
|
|
function ContactsPhoneBody() { |
|
|
|
|
const navigate = useNavigate(); |
|
|
|
|
const goBack = () => { |
|
|
|
|
if (window.history.length > 1) navigate(-1); |
|
|
|
|
else navigate('/'); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const clinics = [ |
|
|
|
|
{ |
|
|
|
|
id: 'zvezda', |
|
|
|
|
street: 'ул. Газеты Звезда, 31А', |
|
|
|
|
hours: 'Пн–Пт 09:00 – 21:00\nСб–Вс 09:00 – 19:00', |
|
|
|
|
note: 'Каждый 4-ый четверг месяца до 17:00', |
|
|
|
|
mapPosition: [58.008116, 56.246041], |
|
|
|
|
mapPinColor: '#E04E44', |
|
|
|
|
circleImageSrc: 'https://avatars.mds.yandex.net/get-altay/1363018/2a00000164698e13e4695cde8053e9eed99f/L_height', |
|
|
|
|
circleHref: 'https://yandex.ru/maps/org/klinika_ukho_gorlo_nos_imeni_professora_ye_n_olenevoy/1747301334/', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 'tsetkin', |
|
|
|
|
street: 'ул. Клары Цеткин, 9', |
|
|
|
|
hours: 'Пн–Сб 09:00 – 17:00\nВс — выходной', |
|
|
|
|
note: null, |
|
|
|
|
mapPosition: [57.987262, 56.246448], |
|
|
|
|
mapPinColor: '#D94A3D', |
|
|
|
|
circleImageSrc: 'https://lh5.googleusercontent.com/proxy/FtM-XTbdVjWSzmAYLN1W_b69pueujUj2Gv6Yr7RqwYwQJOrisuUt_YI6qIXyaO9kZa3BZmQQrFpcJcfbcJUvdMGJx-s7UM3PYrnLsYtZcJ8jdVllLCU', |
|
|
|
|
circleHref: 'http://job.oclinica.ru/vakansiya-administratora', |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div style={{ |
|
|
|
|
position: 'absolute', inset: 0, |
|
|
|
|
background: oc.pageBg, |
|
|
|
|
overflow: 'hidden', |
|
|
|
|
fontFamily: 'var(--font-base), "Inter", system-ui, sans-serif', |
|
|
|
|
color: '#1F2A37', |
|
|
|
|
}}> |
|
|
|
|
<div style={{ |
|
|
|
|
position: 'absolute', inset: 0, |
|
|
|
|
overflowY: 'auto', overflowX: 'hidden', |
|
|
|
|
paddingTop: 58, |
|
|
|
|
paddingBottom: FOOTER_H, |
|
|
|
|
zIndex: Z_SCROLL, |
|
|
|
|
isolation: 'isolate', |
|
|
|
|
}}> |
|
|
|
|
<header style={{ |
|
|
|
|
display: 'grid', |
|
|
|
|
gridTemplateColumns: '42px 1fr 42px', |
|
|
|
|
alignItems: 'center', |
|
|
|
|
padding: '10px 12px 11px', |
|
|
|
|
position: 'sticky', top: 0, zIndex: Z_HEADER, |
|
|
|
|
background: oc.headerBg, |
|
|
|
|
borderBottom: '1px solid #EFEFEF', |
|
|
|
|
}}> |
|
|
|
|
<button type="button" onClick={goBack} className="press" style={{ |
|
|
|
|
width: 38, height: 38, borderRadius: 999, background: '#F5F5F5', |
|
|
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center', |
|
|
|
|
border: 0, |
|
|
|
|
}}> |
|
|
|
|
<I.chevL size={20} style={{ color: '#2A3540' }} /> |
|
|
|
|
</button> |
|
|
|
|
<h1 style={{ margin: 0, fontSize: 17, fontWeight: 700, textAlign: 'center', color: '#1F2A37' }}>Контакты</h1> |
|
|
|
|
<span /> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<div style={{ padding: '14px 16px 20px' }}> |
|
|
|
|
<a href="tel:+73422070303" className="press" style={{ |
|
|
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, |
|
|
|
|
width: '100%', padding: '15px 16px', borderRadius: 16, marginBottom: 10, |
|
|
|
|
background: oc.phoneBtnBg, color: oc.phoneBtnFg, textDecoration: 'none', |
|
|
|
|
fontSize: 17, fontWeight: 800, letterSpacing: 0.2, |
|
|
|
|
boxShadow: oc.phoneBtnShadow, |
|
|
|
|
border: '1px solid rgba(255,255,255,0.45)', |
|
|
|
|
}}> |
|
|
|
|
<I.phone size={21} sw={2} style={{ color: oc.phoneBtnFg }} /> |
|
|
|
|
8(342) 207-03-03 |
|
|
|
|
</a> |
|
|
|
|
|
|
|
|
|
<Link to="/" className="press" style={{ |
|
|
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, |
|
|
|
|
width: '100%', padding: '14px 16px', borderRadius: 16, marginBottom: 20, |
|
|
|
|
background: oc.card, color: oc.chatFg, |
|
|
|
|
border: `1.5px solid ${oc.chatBorder}`, textDecoration: 'none', fontWeight: 700, fontSize: 15, |
|
|
|
|
boxShadow: '0 1px 3px rgba(0,0,0,0.04)', |
|
|
|
|
}}> |
|
|
|
|
<I.chat size={20} /> |
|
|
|
|
Написать в чат |
|
|
|
|
</Link> |
|
|
|
|
|
|
|
|
|
<h2 style={{ fontSize: 16, fontWeight: 800, margin: '0 0 12px', color: '#1F2A37', letterSpacing: 0.02 }}>Наши клиники</h2> |
|
|
|
|
|
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}> |
|
|
|
|
{clinics.map(c => ( |
|
|
|
|
<article key={c.id} style={{ |
|
|
|
|
background: oc.card, |
|
|
|
|
borderRadius: 18, |
|
|
|
|
overflow: 'hidden', |
|
|
|
|
boxShadow: '0 2px 14px rgba(15,30,40,0.07)', |
|
|
|
|
border: '1px solid #ECECEC', |
|
|
|
|
}}> |
|
|
|
|
<div style={{ padding: 12, paddingBottom: 4 }}> |
|
|
|
|
<div style={{ |
|
|
|
|
borderRadius: 14, overflow: 'hidden', position: 'relative', |
|
|
|
|
aspectRatio: '16 / 10', |
|
|
|
|
isolation: 'isolate', |
|
|
|
|
}}> |
|
|
|
|
<ClinicLeafletMap key={c.id} center={c.mapPosition} pinColor={c.mapPinColor} /> |
|
|
|
|
<div style={{ |
|
|
|
|
position: 'absolute', top: 10, left: 10, zIndex: 500, |
|
|
|
|
fontSize: 9, fontWeight: 900, letterSpacing: 0.7, |
|
|
|
|
padding: '6px 11px', borderRadius: 8, |
|
|
|
|
background: oc.openBadgeBg, color: oc.openBadgeFg, |
|
|
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.12)', |
|
|
|
|
}}>ОТКРЫТО</div> |
|
|
|
|
<div style={{ |
|
|
|
|
position: 'absolute', right: 10, bottom: 10, |
|
|
|
|
width: 88, height: 88, borderRadius: '50%', |
|
|
|
|
overflow: 'hidden', |
|
|
|
|
border: '4px solid #fff', |
|
|
|
|
boxShadow: '0 6px 18px rgba(15,30,40,0.14)', |
|
|
|
|
zIndex: 600, |
|
|
|
|
background: '#fff', |
|
|
|
|
}}> |
|
|
|
|
<ClinicCirclePhoto imageUrl={c.circleImageSrc} href={c.circleHref} /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div style={{ padding: '16px 16px 16px' }}> |
|
|
|
|
<div style={{ fontSize: 17, fontWeight: 800, lineHeight: 1.25, marginBottom: 12, color: '#1F2A37' }}> |
|
|
|
|
{c.street} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}> |
|
|
|
|
<span style={{ fontSize: 12, fontWeight: 800, color: '#6B7A89', letterSpacing: 0.4 }}>Режим работы</span> |
|
|
|
|
</div> |
|
|
|
|
<div style={{ display: 'flex', gap: 8, alignItems: 'flex-start', marginBottom: c.note ? 10 : 14 }}> |
|
|
|
|
<I.clock size={18} style={{ color: '#8A96A0', flexShrink: 0, marginTop: 1 }} /> |
|
|
|
|
<div style={{ fontSize: 13, color: '#5A6B7B', lineHeight: 1.5, whiteSpace: 'pre-line', fontWeight: 500 }}> |
|
|
|
|
{c.hours} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{c.note && ( |
|
|
|
|
<div style={{ |
|
|
|
|
fontSize: 12, fontWeight: 600, color: oc.noteFg, lineHeight: 1.45, |
|
|
|
|
padding: '11px 13px', borderRadius: 12, |
|
|
|
|
background: oc.noteBg, border: `1px solid ${oc.noteBorder}`, |
|
|
|
|
marginBottom: 14, |
|
|
|
|
}}> |
|
|
|
|
{c.note} |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
<button type="button" className="press" style={{ |
|
|
|
|
width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, |
|
|
|
|
padding: '13px 14px', borderRadius: 14, |
|
|
|
|
background: oc.routeBtnBg, border: '1px solid #E0E3E6', |
|
|
|
|
fontSize: 14, fontWeight: 700, color: oc.routeBtnFg, |
|
|
|
|
}}> |
|
|
|
|
<NavRouteIcon size={19} color={oc.teal} /> |
|
|
|
|
Построить маршрут |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
</article> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div style={{ |
|
|
|
|
marginTop: 22, |
|
|
|
|
background: oc.whyWrapBg, |
|
|
|
|
borderRadius: 20, |
|
|
|
|
padding: '18px 12px 16px', |
|
|
|
|
border: '1px solid #DDE0E4', |
|
|
|
|
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.7)', |
|
|
|
|
}}> |
|
|
|
|
<div style={{ textAlign: 'center', marginBottom: 14 }}> |
|
|
|
|
<div style={{ marginBottom: 10, lineHeight: 0 }}> |
|
|
|
|
<WhyHeaderStarGlyph size={52} color={oc.whyHeaderStar} /> |
|
|
|
|
</div> |
|
|
|
|
<h2 style={{ |
|
|
|
|
margin: 0, fontSize: 20, fontWeight: 700, color: oc.hWhy, |
|
|
|
|
letterSpacing: 0.08, fontFamily: 'var(--font-base)', lineHeight: 1.25, |
|
|
|
|
}}>Почему нас выбирают</h2> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div style={{ |
|
|
|
|
display: 'flex', flexDirection: 'row', gap: 8, |
|
|
|
|
marginBottom: 14, |
|
|
|
|
}}> |
|
|
|
|
<StatPill value="20+" label="лет опыта" /> |
|
|
|
|
<StatPill value="50+" label="врачей" /> |
|
|
|
|
<StatPill value="100k+" label="пациентов" /> |
|
|
|
|
<StatPill value="4.9" label="рейтинг" suffix={<span style={{ fontSize: 13, color: oc.statCardValue, lineHeight: 1 }}>★</span>} /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<InfoRow glyph={<WhyMailGlyph size={23} />} label="Email"> |
|
|
|
|
<a href="mailto:mail@oclinica.ru" style={{ color: oc.whyRowValue, textDecoration: 'none', fontWeight: 600 }}> |
|
|
|
|
mail@oclinica.ru |
|
|
|
|
</a> |
|
|
|
|
</InfoRow> |
|
|
|
|
<InfoRow glyph={<WhyGlobeGlyph size={23} />} label="Веб-сайт"> |
|
|
|
|
<a href="https://perm.oclinica.ru" target="_blank" rel="noreferrer" style={{ color: oc.whyRowValue, textDecoration: 'none', fontWeight: 600 }}> |
|
|
|
|
perm.oclinica.ru |
|
|
|
|
</a> |
|
|
|
|
</InfoRow> |
|
|
|
|
|
|
|
|
|
<div style={{ display: 'flex', gap: 14, marginTop: 6, justifyContent: 'center' }}> |
|
|
|
|
<a |
|
|
|
|
href="https://vk.com" |
|
|
|
|
target="_blank" |
|
|
|
|
rel="noopener noreferrer" |
|
|
|
|
className="press" |
|
|
|
|
aria-label="ВКонтакте" |
|
|
|
|
style={{ |
|
|
|
|
width: 50, height: 50, borderRadius: '50%', background: '#fff', |
|
|
|
|
border: '1px solid #E4E4E4', boxShadow: '0 2px 10px rgba(0,0,0,0.07)', |
|
|
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none', |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<SocialVkIcon size={26} /> |
|
|
|
|
</a> |
|
|
|
|
<a |
|
|
|
|
href="https://www.youtube.com" |
|
|
|
|
target="_blank" |
|
|
|
|
rel="noopener noreferrer" |
|
|
|
|
className="press" |
|
|
|
|
aria-label="YouTube" |
|
|
|
|
style={{ |
|
|
|
|
width: 50, height: 50, borderRadius: '50%', background: '#fff', |
|
|
|
|
border: '1px solid #E4E4E4', boxShadow: '0 2px 10px rgba(0,0,0,0.07)', |
|
|
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none', |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<SocialYoutubeIcon size={26} /> |
|
|
|
|
</a> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div style={{ height: 20 }} /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div style={{ |
|
|
|
|
position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: Z_FOOTER_BAR, |
|
|
|
|
background: 'rgba(255,255,255,0.94)', |
|
|
|
|
backdropFilter: 'blur(16px) saturate(180%)', |
|
|
|
|
WebkitBackdropFilter: 'blur(16px) saturate(180%)', |
|
|
|
|
borderTop: '1px solid #E8E8E8', |
|
|
|
|
boxShadow: '0 -4px 24px rgba(15,30,40,0.06)', |
|
|
|
|
}}> |
|
|
|
|
<div style={{ padding: '10px 16px 6px' }}> |
|
|
|
|
<Link to="/" className="press" style={{ |
|
|
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, |
|
|
|
|
width: '100%', padding: '15px 16px', borderRadius: 16, textDecoration: 'none', |
|
|
|
|
background: oc.bookBtnBg, |
|
|
|
|
color: oc.bookBtnFg, fontWeight: 800, fontSize: 16, letterSpacing: 0.02, |
|
|
|
|
boxShadow: '0 6px 18px rgba(0, 28, 34, 0.1)', |
|
|
|
|
border: '1px solid rgba(255,255,255,0.35)', |
|
|
|
|
}}> |
|
|
|
|
<I.calendar size={21} sw={2} style={{ color: oc.bookBtnFg }} /> |
|
|
|
|
Записаться на приём |
|
|
|
|
</Link> |
|
|
|
|
</div> |
|
|
|
|
<OclinicaTabBar /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export default function ContactsRoutePage() { |
|
|
|
|
return ( |
|
|
|
|
<div style={{ width: '100%', height: '100%', position: 'relative' }}> |
|
|
|
|
<div className="stage"> |
|
|
|
|
<FitWrap userScale="auto"> |
|
|
|
|
<IOSDevice> |
|
|
|
|
<ContactsPhoneBody /> |
|
|
|
|
</IOSDevice> |
|
|
|
|
</FitWrap> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
poturaevpetr
2 weeks ago