HyperCube/Pages/Index.razor

@inherits LayoutComponentBase
@page "/"

@inject NavigationManager NavigationManager

@*@using Microsoft.AspNetCore.Identity;
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject UserManager<IdentityUser> UserManager*@

@code{
    void Login()
    {
        NavigationManager.NavigateTo("Identity/Account/Login", true);
    }
}

<nav class="menu">
    <div class="menu-container">
        <div class="wrapmain">
            <div class="menu-box">
                <div class="menu__logo">
                    <img class="menu__logo__item" src="img/logo_light.svg">
                </div>
                <div class="menu__href">
                    @*<a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('marketplace').scrollIntoView({behavior:'smooth'})">MarketPlace знаний</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('blog').scrollIntoView({behavior:'smooth'})">Блог</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('community').scrollIntoView({behavior:'smooth'})">Экспертное сообщество</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('quantinium').scrollIntoView({behavior:'smooth'})">Quantinium</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('contacts').scrollIntoView({behavior:'smooth'})">Контакты</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('sign-in').scrollIntoView({behavior:'smooth'})">Авторизоваться</a>*@

                    <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('marketplace')">MarketPlace знаний</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('blog')">Блог</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('community')">Экспертное сообщество</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('quantinium')">Quantinium</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('contacts')">Контакты</a>
                    <AuthorizeView>
                        <Authorized>
                            <a class="menu__href__item link" href="desktop">Личный кабинет</a>
                        </Authorized>
                        <NotAuthorized>            
                            @*<a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('sign-in')">Контакты</a>*@
                            <a class="menu__href__item link" style="cursor:pointer" @onclick="Login">Авторизоваться</a>
                        </NotAuthorized>
                    </AuthorizeView>
                </div>
            </div>
        </div>
    </div>
</nav>

<header class="main-slider">
    <div class="main-slider__item">
        <img src="img/plug.jpg" alt="">
    </div>
    @*<div class="main-slider__item">
        <img src="img/plug2.png" alt="">
    </div>
    <div class="main-slider__item">
        <img src="img/plug.jpg" alt="">
    </div>
    <div class="main-slider__item">
        <img src="img/plug2.png" alt="">
    </div>
    <div class="main-slider__item">
        <img src="img/plug.jpg" alt="">
    </div>
    <div class="main-slider__item">
        <img src="img/plug2.png" alt="">
    </div>*@
</header>

<section class="market-place" id="marketplace">    
    <div class="wrapmain">
        <h1 class="block__header">Блокчейн Market Place знаний</h1>
        <p class="block__info">
            <div>
                Digital Data Hypercube (2DH) – это децентрализованная кибер- физическая система цифровой инженерии знаний, которая включает инструменты создания,
                продвижения и коммерциализации инклюзивных цифровых активов защищенных сетью блокчейн.
                Система Digital Data Hypercube создана с целью  построения рынка открытого консалтинга с бессрочной защитой права собственности на использование результатов интеллектуальной
                деятельности участников системы. Модуль Digital Data Hypercube является частью цифровой децентрализованной платформы Quantinium.
            </div>
            <div>
                Digital Data Hypercube позволяет формировать рабочие и экспертные сообщества пользователей создающих нарративы знаний и цифровые информационные продукты с
                одновременной коммерциализацией полученных результатов в форме NFT (non-fungible token) через Блокчейн MarketPlace.
            </div>
            <div>
                В системе Digital Data Hypercube предусмотрены три ключевые роли пользователей:
                <ul>
                    <li>
                        Старатель - основной (ключевой) участник системы, создающий ценности и их первичную разметку неструктурированных данных;
                    </li>
                    <li>
                        Эксперт - участник с ключевой функцией верификации размеченной информации и её сущностей, создающий вместе с кибер-инструментами системы первичные знания;
                    </li>
                    <li>
                        Спонсор - пользователь Системы, создающий рыночную стоимость сущностей.
                    </li>
                    <li>
                        Старатель - основной (ключевой) участник системы, создающий ценности и их первичную разметку неструктурированных данных;
                    </li>
                </ul>
                Пользователь может иметь одну или несколько ролей в системе.
            </div>
        </p>
        <img src="img/logo_dark.svg" alt="" class="market-place__logo">
        <button class="btn-blue btn-blue_mt">Расскажите о цифровых мероприятиях</button>
        <button class="btn-blue">Скачать презентацию в pdf</button>
        <button class="btn-blue">Скачать правила системы в pdf</button>
        <button class="btn-blue">Регистрация в системе 2DH</button>
        <h2 class="block__subtitle">Ценность данных</h2>
        <p class="block__info">
            Тут нужно написать текст о самой системе. О самой главное идее. Какие цели она реализовывает. Текст должен содержать достаточно символов, что бы заполнить данное поле. Объем текста сейчас скопирую сюда из вашего валпапера - поэтому дальше текст пойдем просто
            скопированный не имеющий смысла: Консенсус в системе Quantinium и её ликвидность поддерживается четырьмя разновидностями
            консенсуса применяемыми комплексно для вычисленияе размера вознаграждения пользователя при работе в модулях системы. Чем больше консенсусов пользователь задействует, тем выше его ценность и, соответственно, выше размер его вознаграждения. В системе
            применяется следующие консенсусы.
        </p>
        <img class="block__img" src="img/plug.jpg">
        <img class="market-place__img" src="img/plate.png" alt="">
    </div>
</section>

<div class="fixed-crossbrowser-background"></div>
<div class="bg__img" data-image='marketplace'></div>

<section class="libary">
    <div class="wrapmain">
        <h1 class="block__header">Цифровая библиотека</h1>
        <p class="block__info">В данном разделе нужно рассказать о том какие мы собираем Библиотеки данных. Как данные с помощью мероприятий в котором используются системы рейтингования и компетенций собираются Пользователями и верифицируются Экспертами системы.Как эти данные получают ценность и как эти данные мы можем переводить с помощью Классификаторов моделировать Киберфизические модели в Цифровых двойниках.</p>
        <img class="block__img" src="img/plug.jpg">
        <h2 class="block__subtitle">Нарратив знаний</h2>
        <p class="block__info">Тут давайте напишем критерии при которых цифровые данные становяться ценными и благодаря верификации Экспертного сообщества. Нужно написать пару строчек о том как они генерарируются - как отсеиваются неправильные или некорректные данные. Как мы также фиксируем ошибочные данные и в дальнейшем ссылаемся на отклонениии в верификации. На картинке ниже нужно нарисовать схему прохождения данных и формирование библиотек.</p>
        <img class="block__img" src="img/plug.jpg">
        <h2 class="block__subtitle">Блокченизация знаний в NFT</h2>
        <p class="block__info">
            Тут давайте напишем как мы с помощью темы цифровых мероприятий формируют тематику раздела библиотеки и формируем сборники данных - которые между собой имеют общий фундаментальный синтез данных системы 20Н. По какому принципу они систематизируются. Какс помощью поиска можно найти нужный материал и получить оценку его.
            Вы также можете перейти в раздел который откроется в отдельной окне - Посмотреть бибилиотеки. В этом окне откроется сборники бибилиотек - общие. Раздел (Тема мероприятия) - Подраздел (Тема процесса темы мероприятия) - Название материала -Краткоеописание- Кемзарифицирован-Авторы-Сколько Пользователей прислали данный документ на верификацию.
        </p>
        <button class="btn-blue btn-blue_lib">Посмотреть библиотеки</button>
        <p class="block__info">Что бы получить доступ для скачивания и работы с материалами в библиотеках 2РН вы должны зарегистрироваться в системе и заинтересовавший вас материал вы сможете скачать и использовать в своих работах - указав источник данного материала. Также за цифровые активы и токкены ОиапИпшт или подписки вы сможете получать доступ на любые материалы которые генерируются в системе 20Н. Атакжезаказать необходимый вам матеоиал</p>
        <button class="btn-blue btn-blue_lib">Пройти регистрацию</button>
        <img class="libary__img" src="img/lib_img.png" alt="">
    </div>
</section>

<div class="bg__img" data-image='libary' id="blog"></div>

<section class="blog">    
    <div class="wrapmain">
        <h1 class="block__header">Блог</h1>
        <p class="block__info">
            Мы команда 2DН готовы рассказывать о технологиях и цифровизации. Мы ведем для удобства телеграмм-канал, на котором мы
            рассказываем новости и анонсируем события, которые будут происходитьв системе 2DН! <a href="">Подпишитесь.</a>
        </p>
        <div class="blog-container">
            <div class="blog__item">
                <div class="blog__img">
                    <img class="blog__img__item" src="img/plug.jpg">
                </div>
                <div class="blog__text">
                    <h3 class="blog__title">Заголовок новости о которой мы пишем.</h3>
                    <h3 class="blog__subtitle">1</h3>
                    <p class="blog__info">Тут текст новости и рассказ о том над чем мы трудимся. Можно анонсировать какие то события и например какие обновления будут к такому числу. Как вы думаете - здесь же можно сколько угодно запихать текста? Справа можно поставить промотку именно на этот текст - или когда мышкой наводишь на данный текст и можно его скролить читая данную новость.</p>
                    <p class="blog__info">В данной новости может быть кнопка - которая будет открывать отдельное окно или переносить на другой раздел данного сайта.</p>
                    <button class="btn-blue btn-blue_blog">Еще одна кнопка</button>
                    <p class="blog__info">К любой новости может написать комментарий любой Пользователь котрый зарегистрированный в системе. Комментарий он сможет написать по кнопке «Другое» в разделе Личного кабинета - Рабочий стол. Указав Ю новости - пишет комментарий. Данный комментарий падает на верификацию Администратору системы. Заверифицированный комментарии можно читать по кнопке.</p>
                    <button class="btn-blue btn-blue_blog">Комментарии пользователей</button>
                    <p class="blog__info">Текст уходит вниз за рамки данного поля, если мышкой навести на это поле то оно скролиться вниз - но основная страница остается на месте.</p>
                    <p class="blog__info">Текст уходит вниз за рамки данного поля, если мышкой навести на это поле то оно скролиться вниз - но основная страница остается на месте.</p>
                    <p class="blog__info">Текст уходит вниз за рамки данного поля, если мышкой навести на это поле то оно скролиться вниз - но основная страница остается на месте.</p>
                    <p class="blog__info">Текст уходит вниз за рамки данного поля, если мышкой навести на это поле то оно скролиться вниз - но основная страница остается на месте.</p>
                    <p class="blog__info">Текст уходит вниз за рамки данного поля, если мышкой навести на это поле то оно скролиться вниз - но основная страница остается на месте.</p>
                    <p class="blog__info">Текст уходит вниз за рамки данного поля, если мышкой навести на это поле то оно скролиться вниз - но основная страница остается на месте.</p>
                </div>
            </div>
            <div class="blog__item">
                <div class="blog__img">
                    <img class="blog__img__item" src="img/plug.jpg">
                </div>
                <div class="blog__text">
                    <h3 class="blog__title">Заголовок новости о которой мы пишем.</h3>
                    <h3 class="blog__subtitle">2</h3>
                    <p class="blog__info">Тут текст новости и рассказ о том над чем мы трудимся. Можно анонсировать какие то события и например какие обновления будут к такому числу. Как вы думаете - здесь же можно сколько угодно запихать текста? Справа можно поставить промотку именно на этот текст - или когда мышкой наводишь на данный текст и можно его скролить читая данную новость.</p>
                    <p class="blog__info">В данной новости может быть кнопка - которая будет открывать отдельное окно или переносить на другой раздел данного сайта.</p>
                    <button class="btn-blue btn-blue_blog">Еще одна кнопка</button>
                    <p class="blog__info">К любой новости может написать комментарий любой Пользователь котрый зарегистрированный в системе. Комментарий он сможет написать по кнопке «Другое» в разделе Личного кабинета - Рабочий стол. Указав Ю новости - пишет комментарий. Данный комментарий падает на верификацию Администратору системы. Заверифицированный комментарии можно читать по кнопке.</p>
                    <button class="btn-blue btn-blue_blog">Комментарии пользователей</button>
                    <p class="blog__info">Текст уходит вниз за рамки данного поля, если мышкой навести на это поле то оно скролиться вниз - но основная страница остается на месте.</p>
                </div>
            </div>
            <div class="blog__item">
                <div class="blog__img">
                    <img class="blog__img__item" src="img/plug.jpg">
                </div>
                <div class="blog__text">
                    <h3 class="blog__title">Заголовок новости о которой мы пишем.</h3>
                    <h3 class="blog__subtitle">3</h3>
                    <p class="blog__info">Тут текст новости и рассказ о том над чем мы трудимся. Можно анонсировать какие то события и например какие обновления будут к такому числу. Как вы думаете - здесь же можно сколько угодно запихать текста? Справа можно поставить промотку именно на этот текст - или когда мышкой наводишь на данный текст и можно его скролить читая данную новость.</p>
                    <p class="blog__info">В данной новости может быть кнопка - которая будет открывать отдельное окно или переносить на другой раздел данного сайта.</p>
                    <button class="btn-blue btn-blue_blog">Еще одна кнопка</button>
                    <p class="blog__info">К любой новости может написать комментарий любой Пользователь котрый зарегистрированный в системе. Комментарий он сможет написать по кнопке «Другое» в разделе Личного кабинета - Рабочий стол. Указав Ю новости - пишет комментарий. Данный комментарий падает на верификацию Администратору системы. Заверифицированный комментарии можно читать по кнопке.</p>
                    <button class="btn-blue btn-blue_blog">Комментарии пользователей</button>
                    <p class="blog__info">Текст уходит вниз за рамки данного поля, если мышкой навести на это поле то оно скролиться вниз - но основная страница остается на месте.</p>
                </div>
            </div>
            <div class="blog__item">
                <div class="blog__img">
                    <img class="blog__img__item" src="img/plug.jpg">
                </div>
                <div class="blog__text">
                    <h3 class="blog__title">Заголовок новости о которой мы пишем.</h3>
                    <h3 class="blog__subtitle">4</h3>
                    <p class="blog__info">Тут текст новости и рассказ о том над чем мы трудимся. Можно анонсировать какие то события и например какие обновления будут к такому числу. Как вы думаете - здесь же можно сколько угодно запихать текста? Справа можно поставить промотку именно на этот текст - или когда мышкой наводишь на данный текст и можно его скролить читая данную новость.</p>
                    <p class="blog__info">В данной новости может быть кнопка - которая будет открывать отдельное окно или переносить на другой раздел данного сайта.</p>
                    <button class="btn-blue btn-blue_blog">Еще одна кнопка</button>
                    <p class="blog__info">К любой новости может написать комментарий любой Пользователь котрый зарегистрированный в системе. Комментарий он сможет написать по кнопке «Другое» в разделе Личного кабинета - Рабочий стол. Указав Ю новости - пишет комментарий. Данный комментарий падает на верификацию Администратору системы. Заверифицированный комментарии можно читать по кнопке.</p>
                    <button class="btn-blue btn-blue_blog">Комментарии пользователей</button>
                    <p class="blog__info">Текст уходит вниз за рамки данного поля, если мышкой навести на это поле то оно скролиться вниз - но основная страница остается на месте.</p>
                </div>
            </div>
        </div>
        <div class="blog-nav">
            <button class="blog-nav__arrows left__arrows">Назад</button>
            <div class="slider-dots"></div>
            <button class="blog-nav__arrows right__arrows">Вперед</button>
        </div>
        <img src="img/line.png" alt="" class="blog__lines">
        <h2 class="block__subtitle">Наши соцсети</h2>
        <div class="blog__href">
            <a href="" class="blog__href__item"><img src="img/facebook_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/twitter_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/instagram_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/youtube_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/telegram.svg" alt=""></a>
        </div>
        <img class="blog__bottom__img" src="img/blog__img.png">
    </div>
</section>

<div class="bg__img" data-image='blog' id="community"></div>

<section class="community">
    <div class="wrapmain">
        <h1 class="block__header">Экспертное сообщество</h1>
        <p class="block__info">Тут давайте напишем о том как важно нам экспертное сообщество. Что большую роль мы уделяем формированию материалов и библиотек именно Пользователям которые в системе имеют статус Эксперта. О том. что как бы мы не собирали данные и их не систематизировали - ценность данных подтверждается Экспертами - а эксперты ценны своим опытом, мнением. оценкой.Тут надо еще пару строчек о том какие они хорошие эти эксперты. А картинка ниже расскажет о чем то важном.</p>
        <img class="block__img" src="img/plug.jpg">
        <h2 class="block__subtitle">Приглашаем тебя в эксперты</h2>
        <p class="block__info">
            Пройдите регистрацию - подтвердите при верификации ваше экспертное мнение и участвуйте в событиях системы 20Н. Думаю тут нужно сделать пару строчек. Для объема информации
        </p>
        <button class="btn-blue">Путь и миссия эксперта</button>
        <h2 class="block__subtitle">Приглашаем тебя в эксперты</h2>
        <p class="block__info">В данном разделе нужно рассказать о рейтинговании и системы компетенций системы 20Н.Давайте я сюда пока копирну текста - что бы был объем - тут надо думать писать. Как пользователь -Старатель может стать экспертом. Дальше текст который просто скопировал и вставил в данный раздел. Итак. Эксперт вместе с автоматизированными алгоритмами системы проверяет полноту, качество заполненных текстовых форм и соответствие внесенной информации первоисточнику. В случае если Эксперт подтвердит соответствие качества и полноты данных, то система осуществит разморозку вознаграждения Старателю, а также осуществит выплату вознаграждения Эксперту. В случае если Эксперт отклонит блок данных, то в зависимости от причины отклонения (к примеру, нет источника данных; сведения не соответствуют источнику данных: сведения внесены неполно) система пересчитает объем вознаграждения от данной транзакции Старателя вернув ему на доработку блок данных.</p>
        <img class="block__img" src="img/plug.jpg">
        <img src="img/chair.png" alt="" class="community__img">
    </div>
</section>

<img src="img/line.png" alt="" class="lines">

<div class="main-slider main-slider_quant" id="quantinium">
    <div class="main-slider__item main-slider__item_quant">
        <img src="img/plug.jpg" alt="">
    </div>
    @*<div class="main-slider__item main-slider__item_quant">
        <img src="img/plug2.png" alt="">
    </div>
    <div class="main-slider__item main-slider__item_quant">
        <img src="img/plug.jpg" alt="">
    </div>
    <div class="main-slider__item main-slider__item_quant">
        <img src="img/plug2.png" alt="">
    </div>
    <div class="main-slider__item main-slider__item_quant">
        <img src="img/plug.jpg" alt="">
    </div>
    <div class="main-slider__item main-slider__item_quant">
        <img src="img/plug2.png" alt="">
    </div>*@
</div>

<section class="quantinium">
    <div class="wrapmain">
        <img class="quantinium__logo" src="img/quantinium_logo.png">
        <h1 class="block__header block__header_mt90">Quantinium</h1>
        <h2 class="block__subtitle block__subtitle_quant">Цифровой актив</h2>
        <p class="block__info">В данном разделе нужно рассказать о цифровом активе ОиапНпшт. Пишем не стесняемся все что думаем что такое Цифровой актив и все что может называется Цифровым активом. Далее текст для объема. Итак. Эксперт вместе с автоматизированными алгоритмами системы проверяет полноту, качество заполненных текстовых форм и соответствие внесенной информации первоисточнику. В случае если Эксперт подтвердит соответствие качества и полноты данных, то система осуществит разморозку вознаграждения Старателю, а также осуществит выплату вознаграждения Эксперту. В случае если Эксперт отклонит блок данных, то в зависимости от причины отклонения (к примеру: нет источника данных: сведения не соответствуют источнику данных: сведения внесены неполно) система пересчитает объем вознаграждения от данной транзакции Старателя вернув ему на доработку блок данных.</p>
        <img class="block__img" src="img/plug2.png">
        <h2 class="block__subtitle">Блокчейн</h2>
        <p class="block__info">В данном разделе нужно рассказать о технологии блокчейн. Пишем не стесняемся все что думаем что такое Цифровой актив и все что может называется Цифровым активом. Далее текст для объема. Итак. Эксперт вместе с автоматизированными алгоритмами системы проверяет полноту, качество заполненных текстовых форм и соответствие внесенной информации первоисточнику. В случае если Эксперт подтвердит соответствие качества и полноты данных, то система осуществит разморозку вознаграждения Старателю, а также</p>
        <img class="block__img" src="img/plug2.png">
        <img class="quantinium__img" src="img/quantinium_img.png">
    </div>
</section>

<AuthorizeView>
    <NotAuthorized>
        <div class="bg__img" data-image='quantinium' id="sign-in"></div>

        <section class="sign-in">
            <div class="wrapmain">
                <h1 class="block__header">Авторизация</h1>
                <form action="" class="sign-in__form">
                    <div class="sign-in__container">
                        <input type="text" class="form__input" placeholder="Введите ваш ID">
                        <input type="text" class="form__input form__input_nomargin" placeholder="Пароль">
                    </div>
                    <button class="btn-bg">Авторизоваться</button>
                </form>
                <p class="form__text">
                    Забыли ID или пароль? Бывает...
                    Можно восстановить. напишите почту на которую вы регистрировались
                    и мы вышлем вам регистрационные данные
                </p>
                <form action="" class="sign-in__form">
                    <input type="text" class="form__input" placeholder="Почта потеряшки.ру">
                    <button class="btn-bg">Вспомнить</button>
                </form>
                <img src="img/sign-in_img.png" alt="" class="sign-in__img">
            </div>
        </section>

        <img src="img/lines2.png" alt="" class="lines">
        <div class="bg__img bg__img_nomargin" data-image='sign-in'></div>

        <section class="sign-up">
            <div class="wrapmain">
                <h1 class="block__header">Регистрация</h1>
                <form action="" class="sign-in__form">
                    <input type="text" class="form__input" placeholder="Напишите вашу фамилию и имя">
                    <p class="form__text form__text_mt">
                        Забыли ID или пароль? Бывает...
                        Можно восстановить. напишите почту на которую вы регистрировались
                        и мы вышлем вам регистрационные данные
                    </p>
                    <input type="text" class="form__input" placeholder="Пароль">
                    <input type="text" class="form__input" placeholder="Повторим пароль">
                    <input type="text" class="form__input" placeholder="Почта@новенького.ру">
                    <input type="text" class="form__input" placeholder="Почта@новенького.ру">
                    <textarea type="text" class="form__input form__input_areasign" placeholder="Кратко о себе. Предпочительно ваш статус в профессиональной деятельности"></textarea>
                    <div class="capcha">
                        <button class="capcha__button">Капча</button>
                        <input class="capcha__input" placeholder="Код капчи">
                    </div>
                    <input name="file" type="file" class="form__file__input" id="form__file">
                    <label for="form__file" class="form__file__label">
                        <p class="form__file__label__text">Прикрепить файл-архив с документами для верификации</p>
                    </label>
                    <p class="form__text">
                        Этого достаточно, что бы система зарегистровала ваш Личный аккаунт.
                        Вам придет письмо на вашу почту. Советуем прочитать данное письмо.
                        При дальнейшей авторизации система присвоит вам [0 номер,
                        по которому высможете заходить в Личный кабинет
                        и участвовать в мероприятиях системы 2DН.

                    </p>
                    <button class="btn-bg btn-bg_orange">Зарегистрироваться</button>
                </form>
                <p class="form__text">
                    Уже зарегистрованы? Потеряли ID или пароль? Случается...
                    Можно все восстановить, напишите почту на которую вы регистрировались
                    и мы вышлем вам регистрационные данные
                </p>
                <form action="" class="sign-in__form">
                    <input type="text" class="form__input form__input_mt" placeholder="Почта потеряшки.ру">
                    <button class="btn-bg">Вспомнить</button>
                </form>
                <img src="img/sign-up_img.png" alt="" class="sign-in__img">
            </div>
        </section>
    </NotAuthorized>
</AuthorizeView>

<div class="bg__img" data-image='contacts' id="contacts"></div>

<section class="contacts">
    <div class="wrapmain">
        <h1 class="block__header">Контакты</h1>
        <p class="block__info block__info_tc">
            Нужно тут написать кто мы такие и как можно снами контактировать. Дальше текст. Который нужно придумать. Объем текста сейчас
            скопирую сюда из вашего валпапера - поэтому дальше текст пойдет просто скопированный не имеющий смысла: Консенсус в системе
            Quantiniumи её ликвидность поддерживается четырьмя разновидностями консенсуса применяемыми комплексно для вычисленияе
            размера вознаграждения пользователя при работе в модулях системы.
        </p>
        <p class="block__info block__info_tc">
            Напишите нам сообщения. Не факт, что мы сразу его прочитаем. Попробуйте в начале текста написать слово «Важно. Также вы можете нам написать на адрес нашапочта@qhash.ru
        </p>
        <form action="" class="sign-in__form">
            <textarea type="text" class="form__input form__input_area" placeholder="Пишите сообщения в этом окне, как напишите, ниже нажмите кнопку отправить"></textarea>
            <button class="btn-bg">Отправить</button>
        </form>
        <h2 class="block__subtitle">Наши соцсети</h2>
        <div class="blog__href">
            <a href="" class="blog__href__item"><img src="img/facebook_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/twitter_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/instagram_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/youtube_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/telegram.svg" alt=""></a>
        </div>
        <h2 class="block__subtitle">Наша команда</h2>
        <div class="team-container">
            <div class="team__item">
                <div class="team__img">
                    <img src="img/plug2.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Человек Фамилия</p>
                <p class="team__desc">Важная персона, имеет стул</p>
            </div>
            <div class="team__item">
                <div class="team__img">
                    <img src="img/plug2.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Человек Фамилия</p>
                <p class="team__desc">Важная персона, имеет стул</p>
            </div>
            <div class="team__item">
                <div class="team__img">
                    <img src="img/plug2.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Человек Фамилия</p>
                <p class="team__desc">Важная персона, имеет стул</p>
            </div>
            <div class="team__item team__item_last">
                <div class="team__img">
                    <img src="img/plug2.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Человек Фамилия</p>
                <p class="team__desc">Важная персона, имеет стул</p>
            </div>
        </div>
    </div>
</section>

<footer>
    <div class="wrapmain">
        <h2 class="block__subtitle block__subtitle_white block__subtitle_nomargin">Полезная информация</h2>
        <div class="footer-container">
            <p class="footer__text">
                <a href="" class="footer__text">Страница 2DН в агентстве Интерфакс по раскрытию информации.</a>
                <a href="" class="footer__text">
                    Список лиц, под контролем либо значительным влиянием которых находится система 20Н 2DH.
                </a>
                <a href="" class="footer__text">
                    Раскрытие информации о системе как о профессиональном
                    участнике рынка цифровых активов
                </a>
            </p>
            <div class="footer__picture">
                <img class="footer__logo" src='img/logo_light.svg'>
                <p class="footer__info">©2021 ООО "Прок"</p>
            </div>
        </div>
        <img src="img/footer_img.png" alt="" class="footer__img">
    </div>
</footer>

<style>
    @@font-face {
        font-family: 'Bahn';
        src: url("../fonts/Bahnschrift.ttf") format("truetype");
    }

    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    :focus {
        outline: none;
    }

    textarea {
        resize: none;
    }

    html {
        position: absolute;
        width: 100%;
        height: auto;
        margin: 0px;
        padding: 0px;
        top: 0;
        left: 0;
        min-height: 100%;
        display: block;
    }

    .fixed-crossbrowser-background {
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        background-position: bottom center;
        background-image: url("../img/marketplace.jpg");
        background-size: cover;
        opacity: 1;
        z-index: -1;
    }

    .wrapmain {
        max-width: 1160px;
        padding: 0px 10px;
        margin: 0px auto;
        width: inherit;
        min-height: inherit;
        -webkit-box-pack: inherit;
        justify-content: inherit;
    }

    .menu {
        width: 100%;
        background: #f27e00;
        padding-top: 6px;
        position: fixed;
        top: 0;
        z-index: 5;
    }

    .menu-container {
        background: #3a474d;
    }

    .menu-box {
        overflow: auto;
        white-space: nowrap;
        padding: 20px 0px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .menu__logo {
        width: 160px;
        height: auto;
        margin-right: 50px;
    }

    .menu__logo__item {
        width: 160px;
        height: 100%;
        object-fit: cover;
    }

    .menu__href__item {
        color: #fff;
        font-family: 'Bahn';
        font-size: 18px;
        margin-right: 30px;
        text-decoration: none;
    }

        .menu__href__item:last-child {
            margin-right: 10px;
        }

    .slick-track {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .slick-list {
        overflow: hidden;
    }

    .main-slider {
        padding-top: 80px;
        background-color: #fff;
        margin-top: 30px;
        width: 100%;
    }

    .main-slider__item {
        width: 100%;
        position: relative;
        height: 400px;
        border-top: 2px solid #3a474d;
        border-bottom: 2px solid #3a474d;
    }

        .main-slider__item img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }

    .main-slider__item_quant {
        border-bottom: 7px solid #3a474d;
    }

    .main-slider_quant {
        padding-top: 0px;
        background-color: #fdb148;
        margin-top: -5px;
    }

    .main-slider .slick-dots {
        text-align: center;
        margin-top: 30px;
    }

        .main-slider .slick-dots li {
            list-style: none;
            margin-right: 17px;
            display: inline;
        }

            .main-slider .slick-dots li:last-child {
                margin-right: 0px;
            }

            .main-slider .slick-dots li.slick-active button {
                background-color: #f27e00;
            }

        .main-slider .slick-dots button {
            background-color: #3a474d;
            font-size: 0px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
        }

    .block__header {
        text-align: center;
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 46px;
        font-weight: 500;
    }

    .block__header_mt90 {
        margin-top: 90px;
    }

    .block__header_white {
        color: #fff;
    }

    .block__info {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.4;
    }

        .block__info a {
            color: inherit;
        }

    .block__info_tc {
        text-align: center;
    }

    .block__subtitle {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 36px;
        margin-top: 70px;
        line-height: 1.4;
        text-align: center;
        font-weight: 500;
    }

    .block__subtitle_quant {
        margin-top: 10px;
    }

    .block__subtitle_white {
        color: #fff;
    }

    .block__subtitle_nomargin {
        margin-top: 0px;
    }

    .block__img {
        display: block;
        width: 65%;
        display: block;
        height: 210px;
        -o-object-fit: cover;
        object-fit: cover;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        border: 2px solid #3a474d;
    }

    .market-place {
        background-color: #fff;
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .market-place__logo {
        display: block;
        width: 33%;
        margin-top: 70px;
        margin-left: auto;
        margin-right: auto;
    }

    .market-place__img {
        display: block;
        width: 10%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 170px;
    }

    .btn-blue {
        margin-top: 20px;
        display: block;
        background: none;
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 21px;
        border: 2px solid #3a474d;
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        padding: 7px 10px;
        cursor: pointer;
    }

    .btn-blue_mt {
        margin-top: 60px;
    }

    .btn-blue_lib {
        margin: 70px auto;
    }

    .btn-blue_blog {
        margin-left: 0px;
        margin-top: 25px;
        width: 65%;
    }

    .bg__img {
        width: 100%;
        height: 400px;
        border-top: 5px solid #3a474d;
        border-bottom: 5px solid #3a474d;
    }

    .bg__img_nomargin {
        margin-top: -5px;
    }

    .bg__img__item {
        position: fixed;
        height: 600px;
        width: 100%;
        top: 30%;
        left: 0;
        background-repeat: no-repeat;
        background-position: bottom center;
        background: url(../img/test.jpg);
        opacity: 1;
        z-index: -1;
    }

    .libary {
        padding-top: 100px;
        background: #fff;
        padding-bottom: 70px;
    }

    .libary__img {
        display: block;
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
    }

    .community {
        padding-top: 120px;
        background: #fff;
    }

    .community__img {
        width: 14%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 120px;
    }

    .lines {
        width: 100%;
        padding-top: 90px;
        background-color: #fff;
        padding-bottom: 90px;
    }

    .quantinium {
        background: #fdb148;
        padding: 100px 0px 140px 0px;
    }

    .quantinium__logo {
        width: 50%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .quantinium__img {
        width: 35%;
        margin-top: 130px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .blog {
        position: relative;
        padding: 100px 0px 150px 0px;
        background: #ececedff;
    }

    .blog-container {
        z-index: 2;
        position: relative;
        width: 100%;
        border: 2px solid #3a474d;
        padding: 20px;
        margin-top: 100px;
        background: #fff;
        height: 606px;
        overflow: scroll;
    }

        .blog-container::-webkit-scrollbar {
            width: 0;
        }

    .blog__item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .blog__img {
        display: block;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .blog__img__item {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        border: 2px solid #3a474d;
    }

    .blog__text {
        -webkit-box-flex: 2;
        -ms-flex: 2;
        flex: 2;
        margin-left: 25px;
    }

    .blog__title {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 24px;
        line-height: 1.4;
    }

    .blog__subtitle {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 16px;
        line-height: 1.4;
        margin-top: 5px;
    }

    .blog__info {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 16px;
        line-height: 1.4;
        margin-top: 20px;
    }

    .blog__lines {
        position: absolute;
        top: 35%;
        left: 0;
        width: 100%;
    }

    .blog-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 35px;
    }

    .blog-nav__arrows {
        border: none;
        background: none;
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 16px;
        line-height: 1.4;
        margin-top: 7px;
        cursor: pointer;
    }

    .slider-dots .slick-dots {
        margin: 0px 40px;
    }

        .slider-dots .slick-dots li {
            list-style: none;
            margin-right: 17px;
            display: inline;
        }

            .slider-dots .slick-dots li:last-child {
                margin-right: 0px;
            }

            .slider-dots .slick-dots li.slick-active button {
                background-color: #f27e00;
            }

        .slider-dots .slick-dots button {
            background-color: #3a474d;
            font-size: 0px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
        }

    .blog__href {
        margin-top: 15px;
        text-align: center;
    }

    .blog__href__item {
        margin-right: 35px;
    }

        .blog__href__item img {
            width: 45px;
            height: 45px;
        }

        .blog__href__item:last-child {
            margin-right: 0px;
        }

    .blog__bottom__img {
        display: block;
        width: 15%;
        margin-top: 120px;
        margin-left: auto;
        margin-right: auto;
    }

    .sign-in {
        background: #fff;
        padding-top: 90px;
    }

    .sign-in__container {
        width: 100%;
        background-color: #ececedff;
        padding: 50px 0px;
        margin-left: auto;
        margin-right: auto;
    }

    .sign-in__form {
        margin-top: 40px;
    }

    .sign-in__img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        width: 25%;
    }

    .form__input {
        display: block;
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        border: 2px solid #3a474d;
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 18px;
        background: #fff;
        text-align: center;
        margin-bottom: 20px;
        padding: 7px;
    }

    .form__input_nomargin {
        margin-bottom: 0px;
    }

    .form__input:focus::-webkit-input-placeholder {
        font-size: 0px;
    }

    .form__input:focus::-moz-placeholder {
        font-size: 0px;
    }

    .form__input:focus:-ms-input-placeholder {
        font-size: 0px;
    }

    .form__input:focus:-ms-input-placeholder {
        font-size: 0px;
    }

    .form__input:focus::placeholder {
        font-size: 0px;
    }

    .form__input_area {
        text-align: left;
        padding: 15px;
        height: 170px;
        width: 45%;
    }

    .form__input_areasign {
        padding: 15px;
        height: 170px;
        width: 40%;
    }

    .form__input_mt {
        margin-top: 40px;
    }

    .sign-up {
        padding-top: 90px;
        background: #fff;
        padding-bottom: 70px;
    }

    .capcha {
        width: 40%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-left: auto;
        margin-right: auto;
    }

    .capcha__button {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: block;
        background-color: #3a474d;
        font-family: 'Bahn';
        font-size: 18px;
        color: #fff;
        border: none;
        padding: 15px;
        margin-right: 25px;
        cursor: pointer;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
    }

        .capcha__button:hover {
            background: #475b64;
        }

    .capcha__input {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: block;
        border: 2px solid #3a474d;
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 18px;
        background: #fff;
        text-align: center;
    }

    .form__file__input {
        opacity: 0;
        visibility: hidden;
        position: absolute;
    }

    .form__file__label {
        width: 40%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        background-color: #3a474d;
        padding: 20px;
        text-align: center;
        margin-top: 20px;
        cursor: pointer;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
    }

    .form__file__label__text {
        color: #fff;
        font-family: 'Bahn';
        font-size: 18px;
    }

    .form__file__label:hover {
        background: #475b64;
    }

    .btn-bg {
        display: block;
        background-color: #3a474d;
        width: 25%;
        font-family: 'Bahn';
        font-size: 18px;
        color: #fff;
        border: none;
        margin-left: auto;
        margin-right: auto;
        padding: 15px;
        margin-top: 25px;
        cursor: pointer;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
    }

        .btn-bg:hover {
            background-color: #475b64;
        }

    .btn-bg_orange {
        background-color: #f27e00;
    }

        .btn-bg_orange:hover {
            background: #ff992c;
        }

    .form__text {
        font-family: 'Bahn';
        font-size: 21px;
        color: #3a474d;
        text-align: center;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
    }

    .form__text_mt {
        margin: 20px auto;
    }

    .contacts {
        padding-top: 90px;
        background-color: #ececedff;
        padding-bottom: 180px;
    }

    .team-container {
        margin-top: 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .team__item {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-right: 35px;
    }

    .team__item_last {
        margin-right: 0px;
    }

    .team__img {
        width: 100%;
        padding-top: 100%;
        background-color: black;
        position: relative;
        border: 2px solid #3a474d;
    }

    .team__img__item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .team__name {
        margin-top: 15px;
        font-family: 'Bahn';
        font-size: 21px;
        color: #3a474d;
        text-align: center;
    }

    .team__desc {
        margin-top: 3px;
        text-align: center;
        font-family: 'Bahn';
        font-size: 16px;
        color: #3a474d;
    }

    .sign-in__img {
        margin-top: 80px;
        width: 25%;
        margin-left: auto;
        margin-right: auto;
    }

    footer {
        background-color: #3a474d;
        padding: 50px 0px;
        text-align: inherit;
        position: inherit;
        bottom: inherit;
        left: inherit;
        font-weight: inherit;
        font-style: inherit;
    }

    .footer-container {
        margin-top: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .footer__text {
        -webkit-box-flex: 3;
        -ms-flex: 3;
        flex: 3;
        font-family: 'Bahn';
        font-size: 16px;
        color: #fff;
        margin-right: 50px;
        text-decoration: none;
        display: block;
        margin-bottom: 5px;
        text-decoration: underline
    }

        .footer__text:hover {
            text-decoration: none
        }


    .footer__picture {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .footer__logo {
        width: 65%;
    }

    .footer__info {
        font-family: 'Bahn';
        font-size: 18px;
        color: #fff;
        margin-top: 10px;
    }

    .footer__img {
        margin-top: 100px;
        display: block;
        width: 14%;
        margin-left: auto;
        margin-right: auto;
    }

    @@media (max-width: 960px) {
        .btn-blue {
            width: 60%;
        }

        .block__img {
            width: 80%;
        }

        .market-place__img {
            width: 15%;
        }

        .blog__item {
            display: block;
        }

        .blog__text {
            margin-top: 40px;
            margin-left: 0px;
        }

        .blog__bottom__img {
            width: 17%;
        }

        .blog-container {
            height: 1050px;
        }

        .form__input {
            width: 60%;
        }

        .btn-bg {
            width: 40%;
        }

        .capcha {
            width: 60%;
        }

        .form__file__label {
            width: 60%;
        }

        .team-container {
            display: block;
        }

        .team__item {
            width: 45%;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 70px;
        }

        .menu__logo {
            width: 160px;
        }
    }

    @@media (max-width: 768px) {
        .btn-blue {
            width: 100%;
        }

        .market-place__logo {
            width: 50%;
        }

        .block__img {
            width: 100%;
        }

        .market-place__img {
            width: 25%;
        }

        .libary__img {
            width: 60%;
        }

        .blog__bottom__img {
            width: 30%;
        }

        .blog-container {
            height: 1030px;
        }

        .community__img {
            width: 25%;
        }

        .quantinium__logo {
            width: 65%;
        }

        .quantinium__img {
            width: 50%;
        }

        .form__input {
            width: 100%;
        }

        .btn-bg {
            width: 100%;
        }

        .sign-in__img {
            width: 40%;
        }

        .capcha {
            width: 100%;
        }

        .form__file__label {
            width: 100%;
        }

        .team__item {
            width: 60%;
        }

        .contacts {
            padding-bottom: 80px;
        }

        .footer-container {
            display: block;
        }

        .footer__text {
            margin-right: 0px;
            text-align: center;
        }

        .footer__picture {
            margin-top: 30px;
        }

        .footer__logo {
            display: block;
            width: 40%;
            margin-left: auto;
            margin-right: auto;
        }

        .footer__info {
            text-align: center;
        }

        .footer__img {
            width: 30%;
        }

        @@media (max-width: 540px) {
            .menu__href__item {
                font-size: 16px;
            }

            .block__header {
                font-size: 36px;
            }

            .market-place__logo {
                width: 70%;
            }

            .btn-blue {
                font-size: 18px;
            }

            .block__subtitle {
                font-size: 32px;
            }

            .market-place__img {
                width: 35%;
                margin-top: 80px;
            }

            .libary__img {
                width: 85%;
                margin-top: 80px;
            }

            .blog__href__item {
                width: 40px;
                height: 40px;
                margin-right: 17px;
            }

                .blog__href__item img {
                    width: 40px;
                    height: 40px;
                }

            .blog-container {
                height: 800px;
            }

            .blog__bottom__img {
                margin-top: 80px;
                width: 40%;
            }

            .blog {
                padding-bottom: 80px;
            }

            .community__img {
                width: 40%;
                margin-top: 70px;
            }

            .lines {
                margin-top: 0px;
            }

            .main-slider_quant {
                margin-top: -5px;
            }

            .quantinium__logo {
                width: 80%;
            }

            .quantinium__img {
                width: 80%;
                margin-top: 80px;
            }

            .quantinium {
                padding-bottom: 80px;
            }

            .form__text {
                font-size: 18px;
                width: 100%;
            }

            .sign-in__img {
                margin-top: 60px;
                width: 60%;
            }

            .bg__img {
                margin-top: 0px;
            }

            .bg__img_nomargin {
                margin-top: -5px;
            }

            .capcha__button {
                margin-right: 10px;
                width: 30%;
            }

            .capcha__input {
                display: block;
                width: 100%;
            }

            .team__item {
                width: 100%;
            }

            .contacts {
                padding-bottom: 50px;
            }

            .footer__logo {
                width: 60%;
            }

            .footer__img {
                margin-top: 80px;
                width: 45%;
            }

            .menu__logo {
                width: 140px;
            }
        }
    }
</style>