Files
triumf-landing/index.html
Aliaksei Karzhou d5fee8eb76 feat: added facts
2024-06-30 16:26:01 +03:00

319 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Триумф</title>
<meta name="description" content="SEO Description" />
<link rel="shortcut icon" href="./assets/img/favicon.ico?v=1.0" />
<link rel="stylesheet" href="./assets/css/swiper-bundle.min.css" />
<link rel="stylesheet" href="./assets/css/index.css" />
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">
<a class="logo__link" href="./">
<figure class="logo__figure">
<img class="logo__figure-image" src="./assets/img/logo.svg" alt="logo" />
</figure>
<div class="logo__text">
<span class="logo__text-name">Триумф</span>
<span class="logo__text-slogan">Cобственная победа</span>
</div>
</a>
</div>
<nav class="header__nav">
<a class="header__nav-link" href="#">О центре</a>
<a class="header__nav-link" href="#">Цены</a>
<a class="header__nav-link" href="#">Частые вопросы</a>
<a class="header__nav-link" href="#">Контакты</a>
</nav>
<div class="header__social">
<a class="social-link social-link--whatsapp" href="#"></a>
<a class="social-link social-link--tg" href="#"></a>
<a class="social-link social-link--phone" href="tel:88001012127">
<span>8 (800) 101-21-27</span>
</a>
</div>
<div class="header__buttons">
<button class="button button--order">Заказать звонок</button>
<button class="header__burger"></button>
</div>
</div>
</header>
<main>
<section class="first-screen">
<div class="container">
<div class="first-screen__wrapper">
<div class="tag tag--light">Реабилитационный центр и социальная адаптация</div>
<h1 class="first-screen__title">Лечение <b>алкоголизма и наркомании</b> в Томске</h1>
<div class="first-screen__advantages">
<div class="first-screen__advantages-item">
<figure class="first-screen__advantages-item-figure">
<img
class="first-screen__advantages-item-figure-image"
src="./assets/img/icons/secure.svg"
alt="secure"
/>
</figure>
<div class="first-screen__advantages-item-text">
Гарантируем <b>безопасность</b>
</div>
</div>
<div class="first-screen__advantages-item">
<figure class="first-screen__advantages-item-figure">
<img
class="first-screen__advantages-item-figure-image"
src="./assets/img/icons/health.svg"
alt="secure"
/>
</figure>
<div class="first-screen__advantages-item-text">
Научим жить и радоваться жизни <b>без наркотиков</b>
</div>
</div>
<div class="first-screen__advantages-item">
<figure class="first-screen__advantages-item-figure">
<img
class="first-screen__advantages-item-figure-image"
src="./assets/img/icons/anonymous.svg"
alt="secure"
/>
</figure>
<div class="first-screen__advantages-item-text">Полностью <b>анонимно</b></div>
</div>
</div>
<div class="first-screen__buttons">
<button class="button button--lg button--lg--consult button--light">
Получить консультацию
</button>
<button class="button button--lg button--lg--coin button--dark">
Посмотреть цены
</button>
</div>
</div>
</div>
</section>
<section class="advantages">
<div class="container">
<div class="advantages__item advantages__item--counter">
<div class="advantages__item-counter">340+</div>
<div class="advantages__item-text">
Человек смогли побороть зависимость вместе с нами
</div>
</div>
<div class="advantages__item advantages__item--conditions">
<figure class="advantages__item-figure">
<img
class="advantages__item-figure-image"
src="./assets/img/icons/convenient.svg"
alt="convenient"
/>
</figure>
<div class="advantages__item-text">
<b>Комфортные условия проживания</b> под круглосуточным присмотром наших специалистов
</div>
</div>
<div class="advantages__item advantages__item--detox">
<figure class="advantages__item-figure">
<img
class="advantages__item-figure-image"
src="./assets/img/icons/heart.svg"
alt="heart"
/>
</figure>
<div class="advantages__item-text">
<b>Поддержка на всех этапах:</b> детокс - реабилитация - социальная адаптация
</div>
</div>
<div class="advantages__item advantages__item--center">
<figure class="advantages__item-figure">
<img
class="advantages__item-figure-image"
src="./assets/img/icons/hospital.svg"
alt="hospital"
/>
</figure>
<div class="advantages__item-text">
Наш центр успешно работает <b>более 8-ми лет </b>
</div>
</div>
<div class="advantages__item advantages__item--support">
<figure class="advantages__item-figure">
<img
class="advantages__item-figure-image"
src="./assets/img/icons/mental-care.svg"
alt="mental-care"
/>
</figure>
<div class="advantages__item-text"><b>Психологическая поддержка</b> родственников</div>
</div>
</div>
</section>
<section class="facts">
<div class="container">
<div class="tag">О нашем центре</div>
<h2 class="facts__title"><span>9 фактов о нас,</span> которые мы считаем важными</h2>
<figure class="facts__figure">
<img class="facts__figure-image" src="./assets/img/facts.jpg" alt="facts" />
</figure>
<div class="facts__slider">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="facts__slide">
<div class="facts__slide-count">#1</div>
<h3 class="facts__slide-title">
Полное избавление от зависимости наша главная цель
</h3>
<p class="facts__slide-text">
Мы знаем, как сложно преодолеть зависимость самостоятельно. С нами зависимый
пройдет путь от начала до конца и даже после реабилитации
<b>мы поможем ему научиться жить трезво</b>
</p>
</div>
</div>
<div class="swiper-slide">
<div class="facts__slide">
<div class="facts__slide-count">#2</div>
<h3 class="facts__slide-title">Многолетний опыт успешной реабилитации</h3>
<p class="facts__slide-text">
<b>Уже более 8 лет мы помогаем людям избавляться от зависимостей.</b>
Благодаря нашему профессионализму сотни человек обрели свободу и счастливую
трезвую жизнь
</p>
</div>
</div>
<div class="swiper-slide">
<div class="facts__slide">
<div class="facts__slide-count">#3</div>
<h3 class="facts__slide-title">
Постоянно обучаемся и совершенствуем методики
</h3>
<p class="facts__slide-text">
<b>Специалисты регулярно повышают квалификацию,</b> адаптируясь под меняющиеся
привычки, препараты и даже возраст зависимых
</p>
</div>
</div>
<div class="swiper-slide">
<div class="facts__slide">
<div class="facts__slide-count">#4</div>
<h3 class="facts__slide-title">Учим жить без зависимости</h3>
<p class="facts__slide-text">
Самый тяжелый период первые месяцы после реабилитации. Мы будем с участников
программы в это время и
<b>поможем побороть тягу, а также выработаем новые полезные привычки,</b>
чтобы он не вернулся к старым
</p>
</div>
</div>
<div class="swiper-slide">
<div class="facts__slide">
<div class="facts__slide-count">#5</div>
<h3 class="facts__slide-title">Конфиденциальность</h3>
<p class="facts__slide-text">
<b>
Все сотрудники центра подписывают обязательство о неразглашении информации.
</b>
Может даже дать реабилитанту кодовое имя, не раскрывая настоящее. Ни одно
постороннее лицо не может проникнуть на территорию центра без соответствующего
допуска
</p>
</div>
</div>
<div class="swiper-slide">
<div class="facts__slide">
<div class="facts__slide-count">#6</div>
<h3 class="facts__slide-title">Позитивный пример</h3>
<p class="facts__slide-text">
<b>
Каждый зависимый получает куратора, который когда-то уже поборол
зависимость.
</b>
Каждый зависимый получает куратора, который когда-то уже поборол зависимость.
Он не будет смотреть свысока или жалеть своего подопечного, а на своем примере
расскажет, как справляться с трудностями
</p>
</div>
</div>
<div class="swiper-slide">
<div class="facts__slide">
<div class="facts__slide-count">#7</div>
<h3 class="facts__slide-title">Атмосфера понимания, заботы и поддержки</h3>
<p class="facts__slide-text">
<b>В нашем центре нет места принуждению или боли.</b>
Излечение зависимости проходит только по воле зависимого, а персонал относится
к подопечным с уважением и заботой
</p>
</div>
</div>
<div class="swiper-slide">
<div class="facts__slide">
<div class="facts__slide-count">#8</div>
<h3 class="facts__slide-title">Мы полностью открыты перед вами и честны</h3>
<p class="facts__slide-text">
<b>Мы ничего не скрываем от родственников и зависимых,</b>
не даем ложных гарантий и надежд. Свободно говорим о методах реабилитации и
приглашаем оценить условия проживания
</p>
</div>
</div>
<div class="swiper-slide">
<div class="facts__slide">
<div class="facts__slide-count">#9</div>
<h3 class="facts__slide-title">Помощь родным в преодолении последствий</h3>
<p class="facts__slide-text">
Зависимость затрагивает не только самого больного, но и его близких.
<b>Мы научим родственников вести себя и общаться с зависимым,</b> чтобы
поддержать его и помочь адаптироваться
</p>
</div>
</div>
</div>
</div>
</div>
<div class="facts__slider-controls">
<button class="button button--prev"></button>
<button class="button button--next"></button>
</div>
</div>
</section>
</main>
<script src="./assets/js/swiper-bundle.min.js" defer></script>
<script src="./assets/js/main.js" type="module" defer></script>
</body>
</html>