{extends 'file:templates/layout.tpl'} 
{block 'main'}
<!-- Promo Area End -->
<section class="promo-area">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="promo-txt tc">
					<h2 class="promo-title">[[*pagetitle]]</h2>
				</div>
			</div>
			<div class="col-12">
				<div class="description tc near-white f4">
					[[*description]]
				</div>
				<div class="link-wraper-header mt4 tc">
					<a href="#" class="nav-btn custom-btn open_modal" data-toggle="modal" data-target="#ModalZakaz">Оставить заявку</a>
					<a class="iframe-link" href="[[*linck_demo]]">Смотреть демо</a><br>
				</div>
				[[!AjaxForm? 
				&form=`@FILE chunks/forms/form_zakaz.tpl` 
				&snippet=`FormIt`         
				&hooks=`FormItSaveForm,email`
				&emailSubject=`Заказ с сайта [[++site_url]]`
				&emailTo=`info@halturin.ru`
				&emailFrom=`no-reply@mysite.com`
				&emailTpl=`@FILE chunks/emails/form_zakaz.tpl`
				&validate=`phone:minLength=^2^`
				&formName=`Заказ сайта`
				&validationErrorMessage=`В форме содержатся ошибки!`
				&successMessage=`Сообщение успешно отправлено`
				]]
				<!--div class="price-block tc mt4">
					<span class="mr2">Цена</span>
					{if $_modx->resource.old_price_start?}
					<span class="old_price white">[[*old_price_start]]<span class="ml1">₽</span></span>
					{/if}
					<span>[[*price_start]]<span class="ml1">₽</span></span>
				</div-->

			</div>
		</div>
	</div>
</section>

{if $_modx->resource.screen_one?}
<section class="screen-one mt5 mb3">
	<div class="container custom-icons">
		<h2 class="text-center">Возможности кастомизации магазина</h2>
		<div class="row text-center pt2 pb5">
			[[*screen_one]]
		</div>
	</div>
</section>
{/if}

{if $_modx->resource.screen_two?}
<section class="screen-two pt5 pb5">
	<div class="container">
		<div class="row align-items-center">
			<div class="col-7"><img src="[[*screen_two]]" alt=""></div>
			<div class="col-5">
				<div class="description_info">
					<h2 class="near-black">Магазин замечательно выглядит на всех <br>устройствах</h2>
					<div class="text-desc mt4">100 % адаптивность под любой размер экрана</div>
				</div>
			</div>
		</div>
	</div>	
</section>
{/if}

{if $_modx->resource.screen_third?}
<section class="screen-third pt5 pb5">
	<div class="container">
		<div class="row">
			<div class="title-screen tc">
				<h2>Интернет-магазин с удобным интерфейсом и продвинутыми возможностями</h2>
				<p>Shop-Script — движок и CMS для создания прибыльных интернет-магазинов,<br> с которым удобно и приятно работать каждый день. На работе, дома и в дороге.</p>
			</div>
			[[*screen_third]]
		</div>
	</div>
</section>
{/if}

{if $_modx->resource.screen_fourth?}
<section class="screen_fourth pt5 pb5">
	<div class="container">
		<div class="title-screen tc">
			<h2>Возможности главной страницы</h2>
		</div>
		[[!getImageList?
		&tvname=`screen_fourth`
		&docid=`[[*id]]`
		&limit=`999`
		&tpl=`@CODE:
		<div class="row align-items-center">
			<div class="col-3">[[+left_colom]]</div> 
			<div class="col-6"><img style="box-shadow: 0 0 30px 0 rgba(0, 0, 0, .15);" src="[[+migx_image]]" alt=""></div>
			<div class="col-3 pr0">[[+right_colom]]</div>
		</div>
		`
		]]
	</div>	
</section>
{/if}


{if $_modx->resource.screen_fifth?}
	[[!getImageList?
	&tvname=`screen_fifth`
	&docid=`[[*id]]`
	&limit=`999`
	&tpl=`@CODE:
	<section class="screen_fifth pt5 pb5 bg-white">
		<div class="container">
			<div class="title-screen tc">
				<h2>[[+title]]</h2>
				<p>[[+sub_title]]</p>
			</div>
			<div class="row justify-content-center">
				[[+content_field]]
			</div>
		</div>	
	</section>
	`
	]]	
{/if}

		{if $_modx->resource.screen_sixth?}
		<section class="screen_sixth pt5 pb3 bg-dark-gray white">
			<div class="container">
				<div class="title-screen tc">
					<h2>Несколько видов каталога</h2>
					<p>Несколько видов каталога — для удобства покупки и просмотра товара.</p>
				</div>
				<div class="row justify-content-center">
					[[!getImageList?
					&tvname=`screen_sixth`
					&docid=`[[*id]]`
					&limit=`999`
					&tpl=`@CODE:

					<div class="col-4 tc">
						<div class="name fa fa-th">
							<span>Плитка</span>
						</div>
						<img src="[[+list_grid]]" alt="">
					</div> 
					<div class="col-4 tc">
						<div class="name fa fa-list">
							<span>Список</span>
						</div>
						<img src="[[+list_table]]" alt="">
					</div>
					<div class="col-4 tc">
						<div class="name fa fa-align-justify">
							<span>Таблица</span>
						</div>
						<img src="[[+list_tbl]]" alt="">
					</div>
					`
					]]
				</div>
			</div>
		</section>
		{/if}

		{if $_modx->resource.screen_seventh?}
		<section class="screen_seventh pt5 pb5">
			<div class="container">
				<div class="title-screen tc">
					<h2>Интуитивное взаимодействие с каталогом и товарами</h2>
				</div>
				<div class="row">
					[[!getImageList?
					&tvname=`screen_seventh`
					&docid=`[[*id]]`
					&limit=`999`
					&tpl=`@CODE:
					<div class="col-2">[[+left_colom]]</div> 
					<div class="col-8"><img src="[[+migx_image]]" alt=""></div>
					<div class="col-2">[[+right_colom]]</div>
					`
					]]
				</div>
			</div>	
		</section>
		{/if}

		{if $_modx->resource.screen_eight?}
		<section class="screen_eight pt5 pb5">
			<div class="container">
				<div class="title-screen tc">
					<h2>Функциональная и эргономичная карточка товара</h2>
				</div>
				<div class="row">
					[[!getImageList?
					&tvname=`screen_eight`
					&docid=`[[*id]]`
					&limit=`999`
					&tpl=`@CODE:
					<div class="col-3">[[+left_colom]]</div> 
					<div class="col-6"><img style="box-shadow: 0 0 30px 0 rgba(0, 0, 0, .15);" src="[[+migx_image]]" alt=""></div>
					<div class="col-3">[[+right_colom]]</div>
					`
					]]
				</div>
			</div>	
		</section>
		{/if}

		{if $_modx->resource.screen_nine?}
		<section class="screen-nine bg-dark-gray white pt5 pb5">
			<div class="container">
				<div class="row align-items-center">
					<div class="col-7">
						<div class="macbook-wrap relative">
							<div class="macbook"></div>
							<div class="tab-content relative">
								<div class="cart">
									<img src="[[*screen_nine]]" alt="Корзина">
								</div>
							</div>
						</div>
					</div>
					<div class="col-5">
						<div class="description_info">
							<h2 class="text-left white">Удобный способ заказать</h2>
							<dl class="text-left">
								<dt>Триггер изменения количества товаров</dt>
								<dd>Клиент может добавить нужное количество товара в заказ прямо из корзины</dd>
								<dt>Окно для применения промокода</dt>
								<dd>Промокоды, полученные в результате рассылок, конкурсов и других маркетинговых инструментов, можно использовать в корзине для пересчета цены по акции</dd>
							</dl>
						</div>
					</div>
				</div>
			</div>	
		</section>
		{/if}

		<section class="screen-price pt5 pb5 ">
			<div class="container">
				<div class="title-screen tc">
					<h2>Хочешь иметь бизнес онлайн через 5 дней?</h2>
				</div>
				<div class="row">

					<div class="col-4">
						<div class="blocl-price-bottom bg-white border shadow-sm pt3">
							<div class="text-center">
								<div class="pw_anno"><h5>Магазин "Старт"</h5></div>
								<p style=" color: red; ">Без  лицензии Shop-Script </p>
								<!-- {if $_modx->resource.old_price_start?}
								<div class="old_price">[[*old_price_start]]<span class="rub">руб.</span></div>
								{/if}
								<div class="pw_price">[[*price_start]]<span class="rub">руб.</span>
								</div> -->
								<div class="pw_underprice">&nbsp;</div>
								<div class="pw_actions">
									<a href="#" class="nav-btn custom-btn open_modal" data-toggle="modal" data-target="#ModalZakaz">Узнать подробнее</a>
									<div class="pw_next">
										<button type="button"  data-container="body" data-trigger="focus" data-toggle="popover" data-placement="bottom" data-html="true" animation data-content="
										<ol>
											<li>Вы оплачиваете решение удобным<br>для вас способом</li>
											<li>С вами связывается наш специалист</li>
											<li>Мы устанавливаем Shop-Script и делаем основные  настройки течение дня</li>
											<li>Ваш магазин успешно установлен!<br>Успешных продаж!</li>
										</ol>
										">Что дальше?
									</button>
								</div>
							</div>
						</div>
						<div class="pw_devider_desc">
							<ul class="pl0">
								<li><span class="fal fa-check"></span><span>Установка на хостинг.</span></li>
								<li><span class="fal fa-check"></span><span>Регистрация доменного имени.</span></li>
								<li><span class="fal fa-check"></span><span>Скайп-обучение по работе с интерфейсом магазина</span></li>
								<li><span class="fal fa-check"></span><span>Базовые настройки (публикация контактной информации)</span></li>
								<li><span class="fal fa-check"></span><span>Маркетинговые настройки (яндекс-мастер, метрика)</span></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-4">
					<div class="blocl-price-bottom bg-white border shadow-sm pt3">
						<div class="text-center">
							<div class="pw_anno"><h5>Магазин "Стандарт"</h5></div>
							<!-- {if $_modx->resource.old_price_standart?}
							<div class="old_price">[[*old_price_standart]]<span class="rub">руб.</span></div>
							{/if}
							<div class="pw_price">[[*price_standart]]<span class="rub">руб.</span>
							</div> -->
							<div class="pw_underprice">&nbsp;</div>
							<div class="pw_actions">
								<a href="#" class="nav-btn custom-btn open_modal" data-toggle="modal" data-target="#ModalZakaz">Узнать подробнее</a>
								<div class="pw_next">
									<button type="button"  data-container="body" data-trigger="focus" data-toggle="popover" data-placement="bottom" data-html="true" animation data-content="
									<ol>
										<li>Вы оплачиваете решение удобным<br>для вас способом</li>
										<li>С вами связывается наш специалист</li>
										<li>Мы устанавливаем Shop-Script и делаем основные  настройки течение дня</li>
										<li>Ваш магазин успешно установлен!<br>Успешных продаж!</li>
									</ol>
									">Что дальше?
								</button>
							</div>
						</div>
					</div>
					<div class="pw_devider_desc">
						<ul class="pl0">
						  <li><span class="fal fa-check"></span><span>Лицензии Shop-Script</span></li>
							<li><span class="fal fa-check"></span><span>Установка на хостинг.</span></li>
							<li><span class="fal fa-check"></span><span>Модуль рассылки сообщений на Email</span></li>
							<li><span class="fal fa-check"></span><span>Настойка отложенных сообщений</span></li>
							<li><span class="fal fa-check"></span><span>Регистрация доменного имени.</span></li>
							<li><span class="fal fa-check"></span><span>Скайп-обучение по работе с интерфейсом магазина</span></li>
							<li><span class="fal fa-check"></span><span>Базовые настройки (публикация контактной информации)</span></li>
							<li><span class="fal fa-check"></span><span>Заказ в один клик</span></li>
							<li><span class="fal fa-check"></span><span>Настройка онлайн оплаты</span></li>
							<li><span class="fal fa-check"></span><span>Настройка расчета стоимости доставки</span></li>
							<li><span class="fal fa-check"></span><span>Маркетинговые настройки (яндекс-мастер, метрика)</span></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col-4">
				<div class="blocl-price-bottom bg-white border shadow-sm pt3">
					<div class="text-center">
						<div class="pw_anno"><h5>Индивидуальная разработка</h5></div>
						<!-- <div class="pw_price"><span style="font-size: 20px;margin-right: 5px; ">от</span>100 000<span class="rub">руб.</span></div> -->
						<div class="pw_underprice">&nbsp;</div>
						<div class="pw_actions">
							<a href="#" class="nav-btn custom-btn open_modal" data-toggle="modal" data-target="#ModalZakaz">Узнать подробнее</a>
							<div class="pw_next">
								<button type="button"  data-container="body" data-trigger="focus" data-toggle="popover" data-placement="bottom" data-html="true" animation data-content="
								<ol>
									<li>Вы вносите предоплату в размере 30%</li>
									<li>Совместно состовляем ТЗ</li>
									<li>Ресуем мекет и делаем дизайн</li>
									<li>Преступаем к верстке и прагромированию</li>
									<li>Спустя месяц Ваш магазин готов</li>
								</ol>
								">Что дальше?
							</button>
						</div>
					</div>
				</div>
				<div class="pw_devider_desc">
					<ul class="pl0">
						<li><span class="fal fa-check"></span><span>Создание прототипа.</span></li>
						<li><span class="fal fa-check"></span><span>Разработка индивидуального дизайн.</span></li>
						<li><span class="fal fa-check"></span><span>Прогроммирование необходимых модулей.</span></li>
						<li><span class="fal fa-check"></span><span>Техническая поддержка в течении года.</span></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
</section>
{/block}