marketing/index.html
2026-06-21 13:19:07 +03:00

425 lines
25 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

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

<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Хватило.ру - персональный помощник по питанию</title>
<meta name="description" content="Приложение Hvatilo собирает список продуктов, подстраивается под наличие в магазине и помогает готовить всей семьей без лишних трат. Планируйте рацион легко.">
<meta name="keywords" content="планировщик питания, приложение для покупок продуктов, автокорзина, список покупок онлайн, рацион для семьи, помощник по питанию">
<link rel="apple-touch-icon" href="/app/icons/logo512.png">
<link rel="icon" href="/app/icons/favicon.ico">
<meta name="theme-color" content="#000000">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
rel="preload"
href="https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript>
<link
href="https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap"
rel="stylesheet"
type="text/css"
/>
</noscript>
<style>
html, body {height: 100vh;overflow: hidden;}
body {background: #FCFFFB;padding:0;margin:0;font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;}
#scroller {scroll-snap-type: y mandatory;overflow-y: scroll;overflow-x:hidden;height: 100vh;scroll-behavior: smooth;}
.container {max-width: 1440px;margin: 0 auto;position: relative;width:100%;}
.text_secondary {color:#6D8982;}
h1 {font-size: 254px;padding:0;margin:0;}
h2 {font-size: 48px;color:#0C3B2E;text-transform: uppercase;margin:0;padding:0;}
h3 {font-size: 18px;color:#0C3B2E;font-weight: bold;padding:0;margin:0;}
p.description {font-size: 18px;color:#6d8982;padding:0;margin:0;}
p.description_large {font-size: 24px;color:#6d8982;padding:0;margin:0;}
a:focus {outline: none;}
span.nobreak {white-space: nowrap;}
#top_logo {font-size: 20px;line-height: 24px;display: flex;align-items: center;gap:6px;height:24px;margin-top:8px;}
#top_logo img {width: 24px;}
#top_logo a {font-weight: bold;color: #0C3B2E;text-decoration: none;}
#top_line_container {position: fixed;top:0;width: 100%;background-color: #FCFFFB;user-select: none;z-index: 11;min-width: 360px;}
#top_line {position:relative;display: flex;flex-direction: row;justify-content: space-around;padding:18px 0;height:80px;box-sizing: border-box; border-bottom: 1px solid #e7ede7;}
#top_menu {display:flex;flex-direction:row;gap: 40px;margin-top:13px;height:18px;align-items: center;}
#top_menu a {color: #6D8982;font-size:14px;font-weight: 500;line-height: 17px;text-decoration: none;}
#top_menu a:hover {color: #5EA12D;}
#top_menu a:focus {outline: none;}
#try_button {background-color: #FFBA00;padding:13px 43px;font-weight: bold;border-radius: 100px;color:#0C3B2E;text-decoration: none;
display: flex;}
.page_container {width: 100%;min-height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;scroll-snap-align: start;min-width: 360px;padding-top: 39px;}
#page_index {}
#page_index_content {align-items: start;}
#page_index p {font-size: 18px;}
.container_row {display: flex;flex-direction: row;gap: 34px;align-items: flex-end}
.big_index_greeting {font-size:254px;font-weight: 900;line-height: 214px;color:#0c3b2e;text-transform: uppercase;letter-spacing: -0px;}
#page_index_store_btns {height:52px;display: flex;flex-direction: row;gap:30px;align-items: center;padding-top:40px;}
#page_index_store_btns a {display: flex;align-items: center;color:#6d8982;font-weight: bold;padding:14px 0;text-decoration: none;}
#page_index_store_btns img {height: 24px;margin-right: 12px;}
#page_autobasket {}
#page_autobasket_content {display: flex;flex-direction: column;gap: 64px;}
#page_autobasket_content_description {text-align: center;}
#page_autobasket_content_description p {font-size: 24px;color: #6d8982;}
#page_autobasket_images {display: flex;flex-direction: row;gap: 20px;justify-content: center;}
#page_autobasket_images div {display: flex;flex-direction: column; gap: 16px;max-width: 387px;text-align: center;align-items: center;}
#page_autobasket_images img {max-width: 100%;}
#page_autobasket_images p {font-size: 18px;color:#6d8982;padding:0;margin:0;}
.autobasket_image_wrapper {aspect-ratio: 300/317;background-color: #edfaad;border-radius: 24px;justify-content: center;}
#page_meal_plan {}
#page_meal_plan_content {display: flex;flex-direction: row;gap:20px;padding:0 120px;justify-content: space-around;}
#page_meal_plan_content_description {display: flex;flex-direction: column;gap:40px;min-width: 400px;}
#page_meal_plan_broc {max-width:529px;border-radius: 24px;}
#page_meal_plan_items {gap: 24px;display: flex;flex-direction: column;}
.page_meal_plan_item {display: flex;flex-direction: row;gap: 16px;max-width: 650px;}
.page_meal_plan_item p {font-size:18px;color:#6d8982;padding: 0;margin:0;}
.page_meal_plan_item img {width:54px;}
.page_meal_plan_item_text {display: flex;flex-direction: column;gap:8px;}
.page_meal_plan_item_text span {white-space: nowrap;}
#page_how_it_works {display: flex;flex-direction: column;justify-content: space-between;padding-top:110px;box-sizing: border-box;}
#page_how_it_works_content {text-align: center;}
#page_how_it_works_step {}
#page_how_it_works_steps {display: flex;flex-direction: row;justify-content: space-between;margin-top:64px;font-size:18px;}
#page_how_it_works_steps .step-image {width:80px;}
.page_how_it_works_steps_arrow {display: flex;justify-content: center;align-items: center;}
#page_how_it_works_step_1 {position: relative;}
#page_how_it_works_step_1_arrow {height:30px;align-self: center}
#page_how_it_works_step_2 {}
#page_how_it_works_step_2_arrow {height:30px;}
#page_how_it_works_step_3 {position: relative;align-items: end;display: flex;}
#page_how_it_works_step_3 img {position:absolute;width:240px;top:-170px;}
#page_how_it_works_info {background-color: #edfaae;width:100%;border-radius: 24px;position: relative;display: flex;flex-direction: row;box-sizing: border-box;min-height:320px;margin-top:60px;}
#page_how_it_works_info_image {position: relative;height:320px;margin-top:70px;}
#page_how_it_works_info_image img {position: absolute;max-width: 419px;left:-70px;top:-140px;}
#page_how_it_works_info_content {font-size: 24px;text-align: left;margin-left:340px;margin-top:25px;display: flex;flex-direction: column;justify-content: space-around;}
#page_how_it_works_info_content ul {align-self: center;justify-content: center;}
#page_how_it_works_info_content ul li::marker {padding-top:0;}
#page_how_it_works_info_content ul li {list-style-type: disc;padding-top:3px;padding-bottom:24px;}
#page_how_it_works_info_content ul li span {margin-top: -28px;display: flex;}
#page_meal_plan_broc_small {display: none;}
#page_footer {height: 136px;width: 100%;padding-top:15px;}
#page_footer > div {display: flex;align-items: center;justify-content: space-between;}
#page_footer a {color:#5EA12D;text-decoration: none;}
#bottom_logo {font-size: 20px;line-height: 24px;font-weight: bold;color: #0C3B2E;display: flex;align-items: center;gap:6px;height:24px;margin-top:8px;}
#bottom_logo img {width: 24px;}
#bottom_contacts_small {display: none;}
br.small {display: none;}
br.medium {display: none;}
br.big {display: initial;}
@media (max-width: 1360px){
#page_how_it_works_steps {padding: 0 20px;}
#page_footer {padding-bottom: 80px;}
}
@media (max-width: 1280px){
.big_index_greeting {font-size: 204px;line-height: 185px;}
p.description_large {font-size: 22px;}
.page_container {padding-top:0;}
}
@media (max-width: 1100px){
.big_index_greeting {font-size: 174px;line-height: 155px;}
p.description_large {font-size: 18px;}
#page_autobasket_images {max-width: 100%;padding: 0 20px;}
#page_autobasket_images > div {max-width: 33%;}
#page_autobasket_images div img {max-width: 100% !important;}
#page_how_it_works_info_content {font-size: 20px;}
}
@media (max-width: 960px){
.big_index_greeting {font-size: 144px;line-height: 135px;}
#page_index p {font-size: 14px;}
#top_line {justify-content: space-between;padding: 18px;}
#top_menu {display: none;}
p.description_large br {display: none;}
#page_autobasket_content_description p {font-size: 20px;}
.page_container {min-height: auto;padding-top:100px;}
#page_meal_plan_content {padding: 0 20px;box-sizing: border-box;}
#page_how_it_works_steps {flex-direction: column; display: flex;align-items: center;gap: 24px;color:#0C3B2E;}
#page_how_it_works_steps > div {display: flex;flex-direction: row;gap: 20px;}
#page_how_it_works_steps > div img {height: auto;max-width: 80px;max-height: 80px;}
#page_how_it_works_steps > div:nth-child(3) {flex-direction: row-reverse;}
.page_how_it_works_steps_arrow {display: none !important;}
#page_how_it_works_step_3 img {top:0;position: relative;width: auto;}
#page_how_it_works_info_content br {display: none;}
}
@media (max-width: 800px){
.big_index_greeting {font-size: 144px;line-height: 135px;}
#page_index p {font-size: 24px;text-align: center}
#page_index_content h1 + div {flex-direction: column-reverse;}
#page_index_content h1 + div div {width: 100%;}
#page_index_store_btns {justify-content: center;}
p.description_large {font-size: 20px;}
#page_autobasket_content_description p {font-size: 16px;}
#page_meal_plan_broc {display: none;}
#page_how_it_works_info_content {margin-left: 280px;color:#0C3B2E;}
#page_how_it_works_info_image img {max-width: 360px;}
#page_footer {padding-left: 40px;padding-right: 20px;}
}
@media (max-width: 600px){
br.big {display: none;}
br.medium {display: initial !important;}
#page_index {height: 100vh;padding-top: 0;}
.big_index_greeting {font-size: 85px;line-height: 81px;text-align: left;max-width: 80%;margin: 0 20px;}
.big_index_greeting:last-child {text-align: right;}
#page_index p {font-size: 24px;text-align: center}
#page_index_content {width: 100%;max-width: 480px;}
#page_index_content h1 + div {flex-direction: column-reverse;}
#page_index_content h1 + div div {width: 100%;}
#page_index_store_btns {justify-content: center;}
#page_meal_plan_content_description {gap: 30px;}
#page_meal_plan_content {gap: 0;}
#page_meal_plan_broc_small {display: block;border-radius: 24px;}
#page_autobasket_content_description p {font-size: 22px;padding: 0 15px;}
#page_autobasket_images {flex-direction: column;}
#page_autobasket_images p {font-size: 20px;}
#page_autobasket_images div {max-width: 100% !important;}
#page_autobasket_images > div {flex-direction: row;}
.autobasket_image_wrapper img {max-width: 100% !important;}
#page_autobasket_images > div > img,
.autobasket_image_wrapper {max-width: 50% !important;}
h3 {font-size: 22px;}
#page_how_it_works_info {height: 280px;}
#page_how_it_works_info_image img {max-width: 220px;}
#page_how_it_works_step_3 img { max-width: 120px !important;max-height: 120px !important;}
#page_how_it_works_step_3 {width: 100%;align-items: center;}
#page_how_it_works_step_3 p {width: 100%;}
#page_how_it_works_info_content {margin-left: 100px;color:#0C3B2E;}
#page_footer {margin-top: 60px;}
#page_footer > div {flex-direction: column;align-items: flex-start;padding-left:10px;gap: 16px;}
#page_footer > div {font-size: 14px;}
#page_footer a {color:#6d8982;}
#bottom_logo {margin-bottom: 32px;}
#bottom_contacts_header {font-weight: bold;margin-bottom: 4px;}
#bottom_contacts_header {font-size:14px;}
#bottom_contacts {margin-bottom: 8px;}
#bottom_contacts_big {display: none;}
#bottom_contacts_small {display: flex;color:#6d8982;padding-bottom: 80px;}
}
@media (max-width: 420px){
br.small {display: initial !important;}
#page_index_content {padding-top:0;width: 100%;}
.big_index_greeting {font-size: 65px;line-height: 61px;text-align: left;max-width: 80%;margin: 0 20px;}
.big_index_greeting:last-child {text-align: right;}
#page_index p {font-size: 20px;text-align: center}
#top_line {padding:10px 20px;height:52px;}
#top_logo span {display: none;}
h2 {font-size: 32px;}
#page_meal_plan_content_description {max-width: 100%;min-width: 320px;}
#page_meal_plan_content_description h2 {text-align: center;}
#page_how_it_works_content {padding: 0 20px;box-sizing: border-box;}
#try_button {font-size: 12px;padding:8.5px 35.5px;}
p.text_secondary {margin: 0;}
#page_autobasket_images p {font-size: 18px;}
#page_autobasket_images > div {flex-direction: column;}
#page_autobasket_images div {gap: 8px;}
#page_autobasket_images div div {gap: 2px;}
#page_autobasket_images div img {max-width: 100% !important;}
#page_autobasket_content_description h2 {padding-bottom: 24px;}
#page_autobasket_content_description p {font-size: 16px;margin: 0;}
p.description_large {font-size: 16px;}
#page_how_it_works_info {height: auto;}
#page_how_it_works_steps {font-size: 14px;padding:0;align-items: initial;margin-top: 20px;}
#page_how_it_works_steps p {display: flex;align-content: center;align-items: center;width: 100%;justify-content: center;}
#page_how_it_works_steps > div {width: 100%;}
#page_how_it_works_info {margin-top:20px; display: flex;flex-direction: column-reverse;}
#page_how_it_works_info_content {margin-left:0;font-size: 16px;}
#page_how_it_works_info ul {margin-top:25px;margin-right: auto;}
#page_how_it_works_info_content ul li:last-child {padding-bottom: 0;}
#page_how_it_works_info_image {height: auto;margin-top: -15px;margin-bottom: 20px; }
#page_how_it_works_info_image img {position: relative;top:initial;left:initial;}
#page_footer > div {font-size: 12px;}
#bottom_contacts_header {font-size:12px;}
}
@media (max-height: 1000px){
#page_autobasket_content {gap: 20px;}
#page_autobasket_images div img {max-width: 300px;}
}
@media (max-height: 800px),
(max-width: 1000px)
{
#scroller {scroll-snap-type: initial;scroll-behavior: initial;}
}
</style>
</head>
<body>
<div id="top_line_container">
<div class="container">
<div id="top_line">
<div id="top_logo"><a href="#"><img src="/images/logo.png" alt="Хватило лого"><span>Хватило</span></a></div>
<div id="top_menu">
<a href="#page_autobasket">Автокорзина</a>
<a href="#page_meal_plan">План питания</a>
<a href="#page_how_it_works">Список покупок</a>
<a href="#page_footer">Контакты</a>
</div>
<div><a href="https://hvatilo.ru/app/" id="try_button" target="_blank">Попробовать</a></div>
</div>
</div>
</div>
<div id="scroller">
<main>
<div class="page_container" id="page_index">
<div id="page_index_content">
<h1 class="big_index_greeting">Хватит</h1>
<div class="container_row">
<div>
<p class="text_secondary">
Персональный помощник <br> по питанию: баланс, <br class="big"> энергия,<br class="small medium"> порядок <br class="big">в холодильнике - <br> для всей семьи
</p>
</div>
<div class="big_index_greeting">гадать</div>
</div>
<div id="page_index_store_btns">
<a href="https://play.google.com/store/apps/details?id=eu.zaek.hvatilo.twa&hl=ru" target="_blank" rel="noreferrer noopener"><img src="/images/google_play.png" alt="">Google play</a>
<a href="https://www.rustore.ru/catalog/app/eu.zaek.hvatilo.twa" target="_blank" rel="noreferrer noopener"><img src="/images/rustore.png" alt="">RuStore</a>
</div>
</div>
</div>
<div class="page_container" id="page_autobasket">
<div id="page_autobasket_content">
<div id="page_autobasket_content_description">
<h2>Автокорзина</h2>
<p>Вы выбираете, сколько человек в семье, <wbr/>указываете, на сколько дней нужны <wbr/> <span class="nobreak">продукты — и приложение</span> мгновенно <br class="small"/>собирает корзину с учётом порций.
<br> На выходе — <span class="nobreak">чёткий список покупок</span>, <br class="small" />разбитый по отделам магазина</p>
</div>
<div id="page_autobasket_images">
<div>
<img src="/images/autobasket_1.png" alt="">
<div>
<h3>Никаких сомнений</h3>
<p>Забудьте про мучительные вопросы <br>«А хватит ли?», «А что купить ещё?»</p>
</div>
</div>
<div>
<img src="/images/autobasket_2.png" alt="">
<div>
<h3>Контроль в телефоне</h3>
<p>Список всегда под рукой, можно вычёркивать по пути</p>
</div>
</div>
<div>
<div class="autobasket_image_wrapper">
<img src="/images/broc_happy.png" alt="">
</div>
<div>
<h3>Всё схвачено</h3>
<p>Мы уже учли, что есть в магазине</p>
</div>
</div>
</div>
</div>
</div>
<div class="page_container" id="page_meal_plan">
<div id="page_meal_plan_content" class="container">
<div id="page_meal_plan_content_description">
<h2>План питания</h2>
<p class="description_large">
Добавляете любимые рецепты и указываете <br>
возможные замены для продуктов. Из готовых <br>
рецептов собираете план на день/неделю, планом <br>
можно делиться с другими пользователями!
</p>
<img id="page_meal_plan_broc_small" src="/images/broc_diet.png" alt="">
<div id="page_meal_plan_items">
<div class="page_meal_plan_item">
<div><img src="/images/balance-icon.png" alt=""></div>
<div class="page_meal_plan_item_text"><h3>Баланс</h3><p>Вы сами выбираете блюда</p></div>
</div>
<div class="page_meal_plan_item">
<div><img src="/images/economy-icon.png" alt=""></div>
<div class="page_meal_plan_item_text"><h3>Экономия</h3><p>Замена без потери вкуса</p></div>
</div>
<div class="page_meal_plan_item">
<div><img src="/images/personalization-icon.png" alt=""></div>
<div class="page_meal_plan_item_text"><h3>Персонализация</h3><p>Общий план — муж/ребёнок/соседка по комнате знают, <wbr><span>что готовить,</span> без ваших
<br class="small">объяснений</p></div>
</div>
</div>
</div>
<div>
<img id="page_meal_plan_broc" src="/images/broc_diet.png" alt="">
</div>
</div>
</div>
<div class="page_container" id="page_how_it_works">
<div id="page_how_it_works_content" class="container">
<h2>Как это работает</h2>
<br>
<br class="big">
<p class="description_large">
Вы выбираете, что хотите приготовить &mdash; <br class="big medium small"> Hvatilo
помогает собрать остальное
</p>
<div id="page_how_it_works_steps">
<div id="page_how_it_works_step_1">
<img src="/images/smile-icon.png" class="step-image" alt="">
<p>Открываете сегодняшний <br class="big"> день <br class="small">в плане питания</p>
</div>
<div class="page_how_it_works_steps_arrow">
<img src="/images/arrow-1.png" alt="" id="page_how_it_works_step_1_arrow">
</div>
<div id="page_how_it_works_step_2">
<img src="/images/laugh-icon.png" class="step-image" alt="">
<p>Заменить ужин — пара кликов, <br>и рецепт встаёт в план <br class="big">с новым <br class="small"> списком покупок</p>
</div>
<div class="page_how_it_works_steps_arrow"><img src="/images/arrow-2.png" alt="" id="page_how_it_works_step_2_arrow"></div>
<div id="page_how_it_works_step_3">
<img src="/images/broc_meal_plan.png" alt="">
<p>Из списка продуктов можно <br> сформировать автокорзину <br>на недостающие</p>
</div>
</div>
<div id="page_how_it_works_info">
<div id="page_how_it_works_info_image"><img src="/images/happy-salad.png" alt=""></div>
<div id="page_how_it_works_info_content">
<ul>
<li>
<span>Отсутствие продукта в магазине <br class="small">не сломает приём пищи: <br><br class="small"> автокорзина подстроится <br class="small">под наличие</span>
</li>
<li>&nbsp;
<span>В холодильнике только <br class="small"/>те продукты, которые вы успеете <br class="small big"> съесть, в помойку отправится <br
class="small">только упаковка</span>
</li>
</ul>
</div>
</div>
</div>
<div id="page_footer">
<div class="container container_row">
<div>
<div id="bottom_logo"><img src="/images/logo.png" alt="">Хватило</div>
<div id="bottom_contacts_header">Контакты</div>
<div id="bottom_contacts"><a href="mailto:info@hvatilo.ru">info@hvatilo.ru</a></div>
<div id="bottom_contacts_big">&copy; 2026 &mdash; <a href="mailto:info@hvatilo.ru">info@hvatilo.ru</a> <br></div>
</div>
<div>
<a href="https://hvatilo.ru/app/offer" target="_blank">Пользовательское соглашение</a>
</div>
<div id="bottom_contacts_small">&copy; 2026 <br>
<!--ООО &laquo;Дорфан&raquo;-->
Самозанятый Телятников Захар Александрович
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>