src/html/index.html - master - creativezen/saakian

src/html/index.html
830 строк60 KB
Anton Goul'art
update photos
22 ноя 2024, 12:16
22 ноя 2024, 12:16f54f9ac
<!DOCTYPE html>
<html lang="ru">
@@include('blocks/head.html')

<body>
    @@include('blocks/header.html')

    <main id="video">
        <!-- Главный экран  -->
        <section id="hero" class="section hero index">
            <div class="container">
                <div class="hero__content">
                    <div class="hero__address">
                        <div class="city">г. Москва</div>
                        <div class="white">📍 Sportstation, Новоостаповская&nbsp;ул.,&nbsp;5,&nbsp;стр.&nbsp;2.</div>
                        <div class="white"><span class="orange">м.</span>&nbsp;Волгоградский проспект</div>
                    </div>
                    <div class="hero__date">
                        <div class="date orange">26 октября 2024 <span class="white">с 12:00 до 20:00</span></div>
                        <div class="white">Психологический&nbsp;оффлайн практикум</div>
                    </div>
                    <div class="hero__author">
                        <span class="white"><span class="orange">Авторская игра</span> Ваги Саакян</span> 
                        <span class="white">для тех, кто хочет создать инструкцию к себе</span>
                    </div>
                    <div class="hero__title">
                        <h1 class="title-hero">
                            <span>твоя</span>
                            <span><span class="orange italic">И</span>гра</span>
                        </h1>
                    </div>
                    <div class="hero__cta">
                        <a href="#price" class="button" data-block="mobile">хочу узнать себя</a>
                        <p>Проведи диагностику своей жизни и узнай, на что ты способен и что мешает достигнуть желаемого результата</p>
                    </div>
                </div>
                <div class="hero__img">
                    <picture>
                        <source media="(max-width: 780px)" srcset="img/img-hero_mobile_2x.webp 2x" type="image/webp">
                        <source media="(max-width: 780px)" srcset="img/img-hero_mobile_2x.jpg 2x" type="image/jpg">
                        <source media="(min-width: 781px)" srcset="img/img-hero_desktop_2x.webp 2x" type="image/webp">
                        <source media="(min-width: 781px)" srcset="img/img-hero_desktop_2x.jpg 2x" type="image/jpg">
                        <img loading="lazy" src="img/img-hero_desktop_2x.jpg" alt="">
                    </picture>
                </div>
            </div>
        </section>

        <!-- Для кого программа  -->
        <section class="section stream" data-stream-bottom="no" data-index="1">
            <div class="container">
                <div class="section__header centered">
                    <h2 class="title">Для кого программа</h2>
                </div>
                <div class="section__slider">
                    <div class="section__slider-body">
                        <div class="slider swiper js-slider" data-slider-name="for-whom" data-slider-type="default">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="card border-gradient">
                                        <div class="card__content">
                                            <div class="card__body marker white">
                                                <p>Не знаешь себя, своих истинных ценностейи целей</p>
                                            </div>
                                        </div>
                                        <div class="card__backdrop"></div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="card border-gradient">
                                        <div class="card__content">
                                            <div class="card__body marker white">
                                                <p>Живешь и действуешь по принципу «я должен», а не «мне важно»</p>
                                            </div>
                                        </div>
                                        <div class="card__backdrop"></div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="card border-gradient">
                                        <div class="card__content">
                                            <div class="card__body marker white">
                                                <p>Не понимаешь своего предназначения и мечешься от одной ниши к другой</p>
                                            </div>
                                        </div>
                                        <div class="card__backdrop"></div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="card border-gradient">
                                        <div class="card__content">
                                            <div class="card__body marker white">
                                                <p>Чувствуешь тревожность от постоянного хаоса и неопределенности</p>
                                            </div>
                                        </div>
                                        <div class="card__backdrop"></div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="card border-gradient">
                                        <div class="card__content">
                                            <div class="card__body marker white">
                                                <p>Прокрастинируешь и теряешь уверенность в гонке за успешным успехом</p>
                                            </div>
                                        </div>
                                        <div class="card__backdrop"></div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="card border-gradient">
                                        <div class="card__content">
                                            <div class="card__body marker white">
                                                <p>Не можешь создать стабильный и постоянно растущий доход</p>
                                            </div>
                                        </div>
                                        <div class="card__backdrop"></div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="card border-gradient">
                                        <div class="card__content">
                                            <div class="card__body marker white">
                                                <p>Запутался в отношениях с близкими, друзьями и коллегами</p>
                                            </div>
                                        </div>
                                        <div class="card__backdrop"></div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="card border-gradient">
                                        <div class="card__content">
                                            <div class="card__body marker white">
                                                <p>Не знаешь, как вернуть силы, энергию и здоровье</p>
                                            </div>
                                        </div>
                                        <div class="card__backdrop"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="section__slider-footer">
                        <div class="slider-controls">
                            <div class="slider-arrows">
                                <div class="slider-btn prev-for-whom">
                                    <button class="button-slider prev">
                                        <svg width="26" height="28" viewBox="0 0 26 28" fill="none">
                                            <path d="M1.52146 15.4462L10.2742 27.5L11.7367 25.4859L4.43026 15.4242H25.5V12.5758H4.43026L11.7367 2.51406L10.2742 0.5C10.2742 0.5 1.79956 12.1699 1.52146 12.5538C1.24335 12.9376 0.5 14 0.5 14C0.5 14 1.24335 15.0624 1.52146 15.4462Z" />
                                        </svg>
                                    </button>
                                </div>
                                <div class="slider-btn next-for-whom">
                                    <button class="button-slider next">
                                        <svg width="26" height="28" viewBox="0 0 26 28" fill="none">
                                            <path d="M24.4785 15.4462L15.7258 27.5L14.2633 25.4859L21.5697 15.4242H0.5V12.5758H21.5697L14.2633 2.51406L15.7258 0.5C15.7258 0.5 24.2004 12.1699 24.4785 12.5538C24.7566 12.9376 25.5 14 25.5 14C25.5 14 24.7566 15.0624 24.4785 15.4462Z" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Хочу разобраться  -->
        <section class="section stream" data-stream-bottom="no">
            <div class="container">
                <div class="section__body">
                    <div class="block-creative reverse-desktop no-border">
                        <div class="block-creative__content">
                            <div class="block-creative__text">
                                <h3 class="title">Успех в любой сфере жизни начинается с&nbsp;понимания себя </h3>
                                <p>Человек, который знает свои ценности и опираетсяна внутренний стержень — осознанно делает выборы, отбрасывает сомнения и решительно действует.</p>
                                <a href="#price" class="button" data-block="mobile">Хочу разобраться</a>
                            </div>
                            <div class="block-creative__img">
                                <picture data-img="I want to figure it out">
                                    <source media="(max-width: 780px)" srcset="img/img-author-01_mobile_2x.webp 2x" type="image/webp">
                                    <source media="(max-width: 780px)" srcset="img/img-author-01_mobile_2x.jpg 2x" type="image/jpg">
                                    <source media="(min-width: 781px)" srcset="img/img-author-01_desktop_2x.webp 2x" type="image/webp">
                                    <source media="(min-width: 781px)" srcset="img/img-author-01_desktop_2x.jpg 2x" type="image/jpg">
                                    <img loading="lazy" src="img/img-author-01_desktop_2x.jpg" alt="">
                                </picture>
                            </div>
                            <div class="block-creative__plate" data-img="I want to figure it out">
                                <div class="plate-group">
                                    <div class="plate corner-left">Кто я?</div>
                                    <div class="plate corner-right">Чего хочу?</div>
                                    <div class="plate corner-left">Куда иду?</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Кто ты на празднике жизни  -->
        <section class="section stream" data-stream-bottom="no">
            <div class="container">
                <div class="section__body">
                    <div class="block-creative reverse-mobile">
                        <div class="block-creative__content">
                            <div class="block-creative__text">
                                <h3 class="title">Кто ты на празднике жизни?</h3>
                                <p>Наблюдатель, который несмело выглядывает из-за&nbsp;шторки или активный участник?</p>
                                <p>Это зависит от твердости внутреннего фундамента, в&nbsp;котором заложены твои ценности.</p>
                            </div>
                            <div class="block-creative__img">
                                <picture data-img="Who are you">
                                    <source media="(max-width: 780px)" srcset="img/img-block-01_mobile_2x.webp 2x" type="image/webp">
                                    <source media="(max-width: 780px)" srcset="img/img-block-01_mobile_2x.jpg 2x" type="image/jpg">
                                    <source media="(min-width: 781px)" srcset="img/img-block-01_desktop_2x.webp 2x" type="image/webp">
                                    <source media="(min-width: 781px)" srcset="img/img-block-01_desktop_2x.jpg 2x" type="image/jpg">
                                    <img loading="lazy" src="img/img-block-01_desktop_2x.jpg" alt="">
                                </picture>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Результаты программы  -->
        <section class="section stream" data-stream-bottom="no">
            <div class="container">
                <div class="section__header centered">
                    <h2 class="title">Результаты программы</h2>
                    <p class="tagline">В результате «Твоей Игры» ты:</p>
                </div>
                <div class="section__body">
                    <div class="block-chesse">
                        <div class="block-chesse__content">
                            <div class="block-chesse__img">
                                <picture>
                                    <source srcset="img/img-result-01_2x.webp 2x" type="image/webp">
                                    <source srcset="img/img-result-01_2x.jpg 2x" type="image/jpg">
                                    <img loading="lazy" src="img/img-result-01_2x.jpg" alt="">
                                </picture>
                            </div>
                            <div class="block-chesse__text">
                                <div class="card numeric right" data-num="01">
                                    <div class="card__header">
                                        <p class="tagline white">Познакомишься с собой настоящим</p>
                                    </div>
                                    <div class="card__body">
                                        <p>Снимешь социальные маски, поймешь, кто ты и на что способен, определишь свои ценности и цели, которые вдохновят тебя действовать, а не сливать энергию впустую</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="block-chesse__content">
                            <div class="block-chesse__img">
                                <picture>
                                    <source srcset="img/img-result-02_2x.webp 2x" type="image/webp">
                                    <source srcset="img/img-result-02_2x.jpg 2x" type="image/jpg">
                                    <img loading="lazy" src="img/img-result-02_2x.jpg" alt="">
                                </picture>
                            </div>
                            <div class="block-chesse__text">
                                <div class="card numeric left" data-num="02">
                                    <div class="card__header">
                                        <p class="tagline white">Улучшишь отношения с близкимии окружением</p>
                                    </div>
                                    <div class="card__body">
                                        <p>Осознаешь негативные сценарии в общении, поймешь почему попадаешь в конфликтные ситуации. Перестанешь ждать чего-то от окружения и научишься сам проявляться к окружению, чтобы выстраивать отношения и коммуникацию</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="block-chesse__content">
                            <div class="block-chesse__img">
                                <picture>
                                    <source srcset="img/img-result-03_2x.webp 2x" type="image/webp">
                                    <source srcset="img/img-result-03_2x.jpg 2x" type="image/jpg">
                                    <img loading="lazy" src="img/img-result-03_2x.jpg" alt="">
                                </picture>
                            </div>
                            <div class="block-chesse__text">
                                <div class="card numeric right" data-num="03">
                                    <div class="card__header">
                                        <p class="tagline white">Поймешь, почему ты не можешь выйти на желаемый доход</p>
                                    </div>
                                    <div class="card__body">
                                        <p>Игра покажет твои привычные модели поведения, которые не позволяют создавать новые финансовые результаты. Поймешь, от каких качеств нужно избавиться, а какие взрастить, чтобы выйти на новый уровень дохода</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="section__footer centered">
                    <a href="#price" class="button" data-block="mobile">Я в игре</a>
                </div>
            </div>
        </section>

        <!-- Результаты участинков  -->
        <section id="feedbacks" class="section stream" data-stream-bottom="no">
            <div class="container">
                <div class="section__header centered">
                    <h2 class="title">Результаты участников</h2>
                </div>
                <div class="section__body">
                    <div class="grid-group">
                        <div class="grid-child" data-grid="4">
                            <div class="card">
                                <div class="card__name">
                                    <div class="card__avatar">
                                        <img src="img/img-feedback-avatar-01_2x.jpg" alt="Имя фамилия">
                                    </div>
                                    <h6>Имя фамилия</h6>
                                </div>
                                <div class="card__body">
                                    <p class="italic">«На Игре произошел какой-то мэджик! Я соединилась со своей внутренней силой, с любовью, обнаружила свою многогранность. Увидела паттерны и затыки, которые не дают мне двигаться к своим целям.  Я наконец отследила, что я делаю не так!»</p>
                                </div>
                                <div class="card__footer">
                                    <button class="button small zero js-button-video" data-title="" data-content="0431737a16d7dedd161b3eb571cd106f" data-forweb-path="modal-video">Смотреть видео</button>
                                </div>
                            </div>
                        </div>
                        <div class="grid-child" data-grid="4">
                            <div class="card">
                                <div class="card__name">
                                    <div class="card__avatar">
                                        <img src="img/img-feedback-avatar-02_2x.jpg" alt="Рузанна саакян">
                                    </div>
                                    <h6>Рузанна саакян</h6>
                                </div>
                                <div class="card__body">
                                    <p class="italic">«Благодаря Игре я поняла, что не любила и предавала себя, жила прошлыми обидами, которые не давали смотреть в будущее и забирали энергию. Вместо фокуса на цели гналась за быстрыми деньгами, поэтому и не получала желаемого результата. Четко увидела свои ошибки и вдохновилась на глубокие изменения!»</p>
                                    <div data-text="Рузанна саакян">
                                        <div class="card__name">
                                            <div class="card__avatar">
                                                <img src="img/img-feedback-avatar-02_2x.jpg" alt="Рузанна саакян">
                                            </div>
                                            <small>Цифровой психолог, финансист, бизнес-леди. 38 лет</small>
                                        </div>
                                        <h5 class="bordered">Точка А</h5>
                                        <ul class="list violet">
                                            <li>Потеря себя</li>
                                            <li>Не люблю себя, много обиды внутри </li>
                                            <li>Живу прошлым, упуская настоящее</li>
                                            <li>Гонка за деньгами, их нехватка</li>
                                            <li>Много распыляюсь, нет фокуса на целях и результатах</li>
                                            <li>Непонимание, как изменить реальность, с чего начать</li>
                                        </ul>
                                        <h5 class="bordered">Точка Б</h5>
                                        <ul class="list orange">
                                            <li>Научилась ценить и любить себя </li>
                                            <li>Вернулась к спорту и планированию дня </li>
                                            <li>Начала работать в новой сфере</li>
                                            <li>Вышла на <span class="orange">доход 2х</span></li>
                                            <li>Похудела на <span class="orange">9 кг</span></li>
                                            <li>Улучшились отношения с окружающими</li>
                                            <li>Живу настоящим, умею поддерживать внутренний баланс</li>
                                            <li>Стала более женственной</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card__footer">
                                    <button class="button small zero js-button-feedback" data-type="text" data-title="Рузанна саакян" data-forweb-path="modal-text">Читать кейс</button>
                                </div>
                            </div>
                        </div>
                        <div class="grid-child" data-grid="4">
                            <div class="card">
                                <div class="card__name">
                                    <div class="card__avatar">
                                        <img src="img/img-feedback-avatar-03_2x.jpg" alt="Виктория Оншина">
                                    </div>
                                    <h6>Виктория Оншина</h6>
                                </div>
                                <div class="card__body">
                                    <p class="italic">До того, как прийти на Игру я буквально «пахала в поте лица», было много страхов и убеждений, что нужно тяжело и много трудиться! Отношения с родителями были напряженными, никак не могла встретить того самого мужчину. Все это проявилось на Игре и я увидела, к чему привели мои действия»</p>
                                    <div data-text="Виктория Оншина">
                                        <div class="card__name">
                                            <div class="card__avatar">
                                                <img src="img/img-feedback-avatar-03_2x.jpg" alt="Виктория Оншина">
                                            </div>
                                            <small>Hair специалист + технолог</small>
                                        </div>
                                        <h5 class="bordered">Точка А</h5>
                                        <ul class="list violet">
                                            <li>Заработок до 150.000 рублей</li>
                                            <li>Работа “в поте лица”</li>
                                            <li>Нет цели, нет понимания своих желаний </li>
                                            <li>Отсутствие мотивации</li>
                                            <li>Непонимание, с чего начать и как действовать</li>
                                            <li>Отсутствие дисциплины</li>
                                        </ul>
                                        <h5 class="bordered">Точка Б</h5>
                                        <ul class="list orange">
                                            <li>Вышла на доход <span class="orange">450.000 рублей в месяц</span></li>
                                            <li>Вступила в отношения, о которых мечтала</li>
                                            <li>Начала обучать hair специалистов</li>
                                            <li>Работаю в кайф и на лайте</li>
                                            <li>Понимание желаний, точная стратегия на 10 лет вперед</li>
                                            <li>Научилась управлять своим состоянием</li>
                                            <li>Улучшились отношения с родителям</li>
                                            <li>Развила женственность</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card__footer">
                                    <button class="button small zero js-button-feedback" data-type="text" data-title="Виктория Оншина" data-forweb-path="modal-text">Читать кейс</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="section__footer centered">
                    <a href="#price" class="button" data-block="mobile">Хочу результат</a>
                </div>
            </div>
        </section>

        <!-- Автор игры  -->
        <section id="author" class="section stream author" data-stream-bottom="no" data-index="-1">
            <div class="block-author">
                <div class="block-author__content">
                    <h2 class="block-author__title">
                        <span class="align-left">Авто<span class="orange italic">р</span></span>
                        <span class="align-right"><span class="orange italic">И</span>гры</span>
                    </h2>
                    <div class="block-author__photo">
                        <picture>
                            <source media="(max-width: 780px)" srcset="img/img-author-02_mobile_2x.webp 2x" type="image/webp">
                            <source media="(max-width: 780px)" srcset="img/img-author-02_mobile_2x.png 2x">
                            <source media="(min-width: 781px)" srcset="img/img-author-02_desktop_2x.webp 2x" type="image/webp">
                            <source media="(min-width: 781px)" srcset="img/img-author-02_desktop_2x.png 2x">
                            <img src="img/img-author-02_desktop_2x.png" alt="">
                        </picture>
                    </div>
                    <div class="plate corner-right">Почему мне можно доверять?</div>
                </div>
            </div>
        </section>

        <!-- Вага Саакян  -->
        <section class="section vaga-saakian">
            <div class="container">
                <div class="section__header centered">
                    <h2 class="title">Вага Саакян</h2>
                    <p class="tagline">Наставник и тренер по личностному росту, коуч международного уровня</p>
                </div>
                <div class="section__body">
                    <div class="grid-group">
                        <div class="grid-child" data-grid="3">
                            <div class="card border-gradient">
                                <div class="card__content">
                                    <div class="card__body marker white">
                                        <p>Автор тренингов, которые помогают построить эффективную систему жизни: «Твоя игра», «Твой Путь», «Твоя Кнопка» и флагманского продукта «Твой выбор»</p>
                                    </div>
                                </div>
                                <div class="card__backdrop"></div>
                            </div>
                        </div>
                        <div class="grid-child" data-grid="3">
                            <div class="card border-gradient">
                                <div class="card__content">
                                    <div class="card__body marker white">
                                        <p>Автор ежедневника развития «Точка. Я»</p>
                                    </div>
                                </div>
                                <div class="card__backdrop"></div>
                            </div>
                        </div>
                        <div class="grid-child" data-grid="3">
                            <div class="card border-gradient">
                                <div class="card__content">
                                    <div class="card__body marker white">
                                        <p>В арсенале более 30 инструментов по выявлению зон роста</p>
                                    </div>
                                </div>
                                <div class="card__backdrop"></div>
                            </div>
                        </div>
                        <div class="grid-child" data-grid="3">
                            <div class="card border-gradient">
                                <div class="card__content">
                                    <div class="card__body marker white">
                                        <p>Программы прошли более 2000 человек</p>
                                    </div>
                                </div>
                                <div class="card__backdrop"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Как проходит программа  -->
        <section class="section stream" data-stream-bottom="no">
            <div class="container">
                <div class="section__body">
                    <div class="block-creative reverse-mobile">
                        <div class="block-creative__content">
                            <div class="block-creative__text">
                                <h3 class="title">Как проходит программа</h3>
                                <p class="white"><span class="orange">«ТВОЯ ИГРА»</span> — это 20% теории и 80% практических упражнений</p>
                                <p>Это не скучная лекция о жизни, а интерактив,в котором ты всего за 5 часов  «проиграешь» привычные тебе роли!</p>
                            </div>
                            <div class="block-creative__img">
                                <picture data-img="How is it going?">
                                    <source media="(max-width: 780px)" srcset="img/img-block-02_mobile_2x.webp 2x" type="image/webp">
                                    <source media="(max-width: 780px)" srcset="img/img-block-02_mobile_2x.jpg 2x" type="image/jpg">
                                    <source media="(min-width: 781px)" srcset="img/img-block-02_desktop_2x.webp 2x" type="image/webp">
                                    <source media="(min-width: 781px)" srcset="img/img-block-02_desktop_2x.jpg 2x" type="image/jpg">
                                    <img loading="lazy" src="img/img-block-02_desktop_2x.jpg" alt="">
                                </picture>
                            </div>
                            <div class="block-creative__plate" data-img="How is it going?">
                                <div class="plate-group">
                                    <div class="plate corner-right">20% теории</div>
                                    <div class="plate border-violet corner-left">80% практики</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Тарифы  -->
        <section id="price" class="section stream" data-stream-bottom="no">
            <div class="container">
                <div class="section__header centered">
                    <h2 class="title">Выбери свой Тариф</h2>
                </div>
                <div class="section__body">
                    <div class="grid-group">
                        <div class="grid-child" data-grid="4">
                            <div class="card-tarif orange">
                                <div class="card-tarif__body">
                                    <h3 class="card-tarif__title">Стандарт</h3>
                                    <ul class="card-tarif__list">
                                        <li class="white">участие в однодневном психологическом практикуме офлайн в Москве</li>
                                        <li class="white">Чат с участниками</li>
                                    </ul>
                                </div>
                                <div class="card-tarif__footer">
                                    <h3 class="card-tarif__price">2 000 <small>₽</small></h3>
                                    <button class="button white block" data-forweb-path="modal-tarif-standart">Оплатить</button>
                                </div>
                            </div>
                        </div>
                        <div class="grid-child" data-grid="4">
                            <div class="card-tarif violet">
                                <div class="card-tarif__body">
                                    <h3 class="card-tarif__title">Премиум</h3>
                                    <ul class="card-tarif__list">
                                        <li>участие в однодневном психологическом практикуме офлайн в Москве</li>
                                        <li>Чат с участниками</li>
                                        <li class="white">Возможность привести друга</li>
                                    </ul>
                                </div>
                                <div class="card-tarif__footer">
                                    <h3 class="card-tarif__price">3 000 <small>₽</small></h3>
                                    <button class="button white block" data-hover="black" data-forweb-path="modal-tarif-premium">Оплатить</button>
                                </div>
                            </div>
                        </div>
                        <div class="grid-child" data-grid="4">
                            <div class="card-tarif black">
                                <div class="card-tarif__body">
                                    <h3 class="card-tarif__title">Vip</h3>
                                    <ul class="card-tarif__list">
                                        <li>участие в однодневном психологическом практикуме офлайн в Москве</li>
                                        <li>Чат с участниками</li>
                                        <li class="white">возможность привести 2-х друзей</li>
                                        <li class="white">1 индивидуальный разбор 1-1,5 часа с Вагой Саакян</li>
                                    </ul>
                                </div>
                                <div class="card-tarif__footer">
                                    <h3 class="card-tarif__price">5 000 <small>₽</small></h3>
                                    <button class="button block" data-forweb-path="modal-tarif-vip">Оплатить</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="section__footer">
                </div>
            </div>
        </section>

        <!-- Слайдер с видео-отзывами -->
        <section class="section stream" data-stream-bottom="no">
            <div class="container">
                <div class="section__header centered">
                    <h2 class="title">Видеоотзывы участников Игры</h2>
                </div>
                <div class="section__slider">
                    <div class="section__slider-body">
                        <div class="slider swiper js-slider" data-slider-name="video-feedbacks" data-slider-type="default">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="card video">
                                        <div class="card__backdrop">
                                            <picture>
                                                <source srcset="img/img-video-preview-01_2x.webp 2x" type="image/webp">
                                                <source srcset="img/img-video-preview-01_2x.jpg 2x" type="image/jpg">
                                                <img loading="lazy" src="img/img-video-preview-01_2x.jpg" alt="">
                                            </picture>
                                        </div>
                                        <div class="card__overlay"></div>
                                        <button class="button-play js-button-video" data-title="" data-content="0431737a16d7dedd161b3eb571cd106f" data-forweb-path="modal-video">
                                            <svg viewBox="0 0 24 31" fill="none">
                                                <path d="M23.0774 13.7342C24.3075 14.519 24.3075 16.481 23.0774 17.2658L2.76767 30.2238C1.5376 31.0086 -6.20863e-08 30.0276 0 28.458L1.02511e-06 2.54204C1.08719e-06 0.972419 1.5376 -0.00859381 2.76767 0.776215L23.0774 13.7342Z"></path>
                                            </svg>
                                        </button>
                                    </div>                             
                                </div>
                                <div class="swiper-slide">
                                    <div class="card video">
                                        <div class="card__backdrop">
                                            <picture>
                                                <source srcset="img/img-video-preview-02_2x.webp 2x" type="image/webp">
                                                <source srcset="img/img-video-preview-02_2x.jpg 2x" type="image/jpg">
                                                <img loading="lazy" src="img/img-video-preview-02_2x.jpg" alt="">
                                            </picture>
                                        </div>
                                        <div class="card__overlay"></div>
                                        <button class="button-play js-button-video" data-title="" data-content="ae07c09ccfeee8a6dd922121bd936ad9" data-forweb-path="modal-video">
                                            <svg viewBox="0 0 24 31" fill="none">
                                                <path d="M23.0774 13.7342C24.3075 14.519 24.3075 16.481 23.0774 17.2658L2.76767 30.2238C1.5376 31.0086 -6.20863e-08 30.0276 0 28.458L1.02511e-06 2.54204C1.08719e-06 0.972419 1.5376 -0.00859381 2.76767 0.776215L23.0774 13.7342Z"></path>
                                            </svg>
                                        </button>
                                    </div>                             
                                </div>
                                <div class="swiper-slide">
                                    <div class="card video">
                                        <div class="card__backdrop">
                                            <picture>
                                                <source srcset="img/img-video-preview-03_2x.webp 2x" type="image/webp">
                                                <source srcset="img/img-video-preview-03_2x.jpg 2x" type="image/jpg">
                                                <img loading="lazy" src="img/img-video-preview-03_2x.jpg" alt="">
                                            </picture>
                                        </div>
                                        <div class="card__overlay"></div>
                                        <button class="button-play js-button-video" data-title="" data-content="b3f152edae3092679710f1085e745809" data-forweb-path="modal-video">
                                            <svg viewBox="0 0 24 31" fill="none">
                                                <path d="M23.0774 13.7342C24.3075 14.519 24.3075 16.481 23.0774 17.2658L2.76767 30.2238C1.5376 31.0086 -6.20863e-08 30.0276 0 28.458L1.02511e-06 2.54204C1.08719e-06 0.972419 1.5376 -0.00859381 2.76767 0.776215L23.0774 13.7342Z"></path>
                                            </svg>
                                        </button>
                                    </div>                             
                                </div>
                                <div class="swiper-slide">
                                    <div class="card video">
                                        <div class="card__backdrop">
                                            <picture>
                                                <source srcset="img/img-video-preview-04_2x.webp 2x" type="image/webp">
                                                <source srcset="img/img-video-preview-04_2x.jpg 2x" type="image/jpg">
                                                <img loading="lazy" src="img/img-video-preview-04_2x.jpg" alt="">
                                            </picture>
                                        </div>
                                        <div class="card__overlay"></div>
                                        <button class="button-play js-button-video" data-title="" data-content="d5b0bbbcde7eb958f4df54a10ea43e5b" data-forweb-path="modal-video">
                                            <svg viewBox="0 0 24 31" fill="none">
                                                <path d="M23.0774 13.7342C24.3075 14.519 24.3075 16.481 23.0774 17.2658L2.76767 30.2238C1.5376 31.0086 -6.20863e-08 30.0276 0 28.458L1.02511e-06 2.54204C1.08719e-06 0.972419 1.5376 -0.00859381 2.76767 0.776215L23.0774 13.7342Z"></path>
                                            </svg>
                                        </button>
                                    </div>                             
                                </div>
                                <div class="swiper-slide">
                                    <div class="card video">
                                        <div class="card__backdrop">
                                            <picture>
                                                <source srcset="img/img-video-preview-05_2x.webp 2x" type="image/webp">
                                                <source srcset="img/img-video-preview-05_2x.jpg 2x" type="image/jpg">
                                                <img loading="lazy" src="img/img-video-preview-05_2x.jpg" alt="">
                                            </picture>
                                        </div>
                                        <div class="card__overlay"></div>
                                        <button class="button-play js-button-video" data-title="" data-content="41455ac8608405801661772fa4fe4fef" data-forweb-path="modal-video">
                                            <svg viewBox="0 0 24 31" fill="none">
                                                <path d="M23.0774 13.7342C24.3075 14.519 24.3075 16.481 23.0774 17.2658L2.76767 30.2238C1.5376 31.0086 -6.20863e-08 30.0276 0 28.458L1.02511e-06 2.54204C1.08719e-06 0.972419 1.5376 -0.00859381 2.76767 0.776215L23.0774 13.7342Z"></path>
                                            </svg>
                                        </button>
                                    </div>                             
                                </div>
                                <div class="swiper-slide">
                                    <div class="card video">
                                        <div class="card__backdrop">
                                            <picture>
                                                <source srcset="img/img-video-preview-06_2x.webp 2x" type="image/webp">
                                                <source srcset="img/img-video-preview-06_2x.jpg 2x" type="image/jpg">
                                                <img loading="lazy" src="img/img-video-preview-06_2x.jpg" alt="">
                                            </picture>
                                        </div>
                                        <div class="card__overlay"></div>
                                        <button class="button-play js-button-video" data-title="" data-content="3d68407dfd1ed0364fb6da00870bc549" data-forweb-path="modal-video">
                                            <svg viewBox="0 0 24 31" fill="none">
                                                <path d="M23.0774 13.7342C24.3075 14.519 24.3075 16.481 23.0774 17.2658L2.76767 30.2238C1.5376 31.0086 -6.20863e-08 30.0276 0 28.458L1.02511e-06 2.54204C1.08719e-06 0.972419 1.5376 -0.00859381 2.76767 0.776215L23.0774 13.7342Z"></path>
                                            </svg>
                                        </button>
                                    </div>                             
                                </div>
                                <div class="swiper-slide">
                                    <div class="card video">
                                        <div class="card__backdrop">
                                            <picture>
                                                <source srcset="img/img-video-preview-07_2x.webp 2x" type="image/webp">
                                                <source srcset="img/img-video-preview-07_2x.jpg 2x" type="image/jpg">
                                                <img loading="lazy" src="img/img-video-preview-07_2x.jpg" alt="">
                                            </picture>
                                        </div>
                                        <div class="card__overlay"></div>
                                        <button class="button-play js-button-video" data-title="" data-content="13d684897263631fc28896571d1957ad" data-forweb-path="modal-video">
                                            <svg viewBox="0 0 24 31" fill="none">
                                                <path d="M23.0774 13.7342C24.3075 14.519 24.3075 16.481 23.0774 17.2658L2.76767 30.2238C1.5376 31.0086 -6.20863e-08 30.0276 0 28.458L1.02511e-06 2.54204C1.08719e-06 0.972419 1.5376 -0.00859381 2.76767 0.776215L23.0774 13.7342Z"></path>
                                            </svg>
                                        </button>
                                    </div>                             
                                </div>
                                <div class="swiper-slide">
                                    <div class="card video">
                                        <div class="card__backdrop">
                                            <picture>
                                                <source srcset="img/img-video-preview-08_2x.webp 2x" type="image/webp">
                                                <source srcset="img/img-video-preview-08_2x.jpg 2x" type="image/jpg">
                                                <img loading="lazy" src="img/img-video-preview-08_2x.jpg" alt="">
                                            </picture>
                                        </div>
                                        <div class="card__overlay"></div>
                                        <button class="button-play js-button-video" data-title="" data-content="771e408eedaa5476e6bc63ac10d0956d" data-forweb-path="modal-video">
                                            <svg viewBox="0 0 24 31" fill="none">
                                                <path d="M23.0774 13.7342C24.3075 14.519 24.3075 16.481 23.0774 17.2658L2.76767 30.2238C1.5376 31.0086 -6.20863e-08 30.0276 0 28.458L1.02511e-06 2.54204C1.08719e-06 0.972419 1.5376 -0.00859381 2.76767 0.776215L23.0774 13.7342Z"></path>
                                            </svg>
                                        </button>
                                    </div>                             
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="section__slider-footer">
                        <div class="slider-controls">
                            <div class="slider-arrows">
                                <div class="slider-btn prev-video-feedbacks">
                                    <button class="button-slider prev">
                                        <svg width="26" height="28" viewBox="0 0 26 28" fill="none">
                                            <path d="M1.52146 15.4462L10.2742 27.5L11.7367 25.4859L4.43026 15.4242H25.5V12.5758H4.43026L11.7367 2.51406L10.2742 0.5C10.2742 0.5 1.79956 12.1699 1.52146 12.5538C1.24335 12.9376 0.5 14 0.5 14C0.5 14 1.24335 15.0624 1.52146 15.4462Z" />
                                        </svg>
                                    </button>
                                </div>
                                <div class="slider-btn next-video-feedbacks">
                                    <button class="button-slider next">
                                        <svg width="26" height="28" viewBox="0 0 26 28" fill="none">
                                            <path d="M24.4785 15.4462L15.7258 27.5L14.2633 25.4859L21.5697 15.4242H0.5V12.5758H21.5697L14.2633 2.51406L15.7258 0.5C15.7258 0.5 24.2004 12.1699 24.4785 12.5538C24.7566 12.9376 25.5 14 25.5 14C25.5 14 24.7566 15.0624 24.4785 15.4462Z" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Прежде чем ты закроешь сайт -->
        <section class="section stream" data-stream-bottom="no" data-index="-1">
            <div class="container">
                <div class="section__body">
                    <div class="block-creative reverse-desktop">
                        <div class="block-creative__content">
                            <div class="block-creative__text">
                                <h3 class="title">Прежде чем ты закроешь сайт, подумай</h3>
                                <p class="white">Сколько еще лет ты готов прятать свой потенциал и лишать себя счастливой, яркой и наполненной жизни, которую <span class="orange">заслужил по праву рождения</span>?</p>
                            </div>
                            <div class="block-creative__img">
                                <picture data-img="before closing the site">
                                    <source media="(max-width: 780px)" srcset="img/img-block-03_mobile_2x.webp 2x" type="image/webp">
                                    <source media="(max-width: 780px)" srcset="img/img-block-03_mobile_2x.jpg 2x" type="image/jpg">
                                    <source media="(min-width: 781px)" srcset="img/img-block-03_desktop_2x.webp 2x" type="image/webp">
                                    <source media="(min-width: 781px)" srcset="img/img-block-03_desktop_2x.jpg 2x" type="image/jpg">
                                    <img loading="lazy" src="img/img-block-03_desktop_2x.jpg" alt="">
                                </picture>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Остались вопросы  -->
        <section class="section stream questions" data-stream-bottom="no">
            <div class="container">
                <div class="block-questions">
                    <div class="block-questions__content">
                        <h2 class="block-questions__title">
                            <span class="align-left">Остались</span>
                            <span class="italic align-right">вопросы?</span>
                            <div class="block-questions__plates">
                                <div class="plate corner-left">???</div>
                                <div class="plate corner-right white">???</div>
                            </div>
                        </h2>
                        <div class="block-questions__contact">
                            <div class="plate orange corner-right">или возникли трудности с оплатой?</div>
                            <p class="tagline white">Обратись в cлужбу заботы:</p>
                            <!--noindex-->
                                <a class="button-telegram" href="https://t.me/+79151599229" rel="nofollow">
                                    <svg viewBox="0 0 201 170" fill="none">
                                        <path d="M197.596 4.65571C195.152 1.6541 191.492 0 187.292 0C185.006 0 182.588 0.484427 180.1 1.43795L10.8035 66.3649C1.81916 69.8095 0.60914 74.9788 0.686959 77.7551C0.764779 80.5298 2.26471 85.6224 11.4291 88.5504C11.484 88.5688 11.539 88.5841 11.5939 88.601L35.3364 95.4259L150.967 36.076C153.848 34.5951 157.379 35.7449 158.851 38.6407C160.008 40.9156 159.544 43.5892 157.896 45.3491L157.9 45.3537L93.6094 113.984L91.7753 121.452L146.548 165.763C146.575 165.784 146.603 165.807 146.632 165.829C150.132 168.557 153.956 169.998 157.69 170C164.987 170 170.796 164.575 172.488 156.18L200.227 18.5722C201.339 13.0504 200.405 8.10648 197.596 4.65571Z"></path>
                                        <path d="M82.6034 109.664C82.8369 108.712 83.3068 107.804 84.0225 107.04L126.208 62.0047L47.9265 102.185L65.7013 153.256C66.7145 156.166 68.2221 158.643 70.0867 160.582L82.6003 109.662L82.6034 109.664Z"></path>
                                        <path d="M80.9956 165.31C85.2208 165.275 89.3727 163.484 93.0103 160.119L106.015 148.088L88.6753 134.061L80.9956 165.31Z"></path>
                                    </svg>
                                </a>
                            <!--/noindex-->
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @@include('blocks/button-up.html')
    </main>

    @@include('blocks/footer.html')
    @@include('blocks/mobile-nav.html')
    @@include('blocks/modals.html')
    <script src="js/feedbacks.bundle.js"></script>
    <script src="js/slider.bundle.js"></script>
    <script src="js/video.bundle.js"></script>
</body>

</html>