308 lines
18 KiB
HTML
308 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Alina Mamut — Бренд-стратегия и креативный консалтинг</title>
|
||
<meta name="description" content="Бренд-стратегия, креативный консалтинг и коммуникационные стратегии от Алины Мамут." />
|
||
|
||
<!-- Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..150,100..900;1,62..150,100..900&family=Inter:wght@400&display=swap" rel="stylesheet" />
|
||
|
||
<link rel="stylesheet" href="/src/style.css" />
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============ HEADER ============ -->
|
||
<header class="header" id="header">
|
||
<div class="header__inner container">
|
||
<a href="#" class="header__wordmark">ALINA MAMUT</a>
|
||
<nav class="header__nav">
|
||
<a href="#manifest" class="header__link">О подходе</a>
|
||
<a href="#journal" class="header__link">Журнал</a>
|
||
<a href="#cases" class="header__link">Кейсы</a>
|
||
<a href="#services" class="header__link">Услуги</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============ SCREEN 1: HERO ============ -->
|
||
<section class="hero" id="hero">
|
||
<div class="hero__inner container grid">
|
||
<div class="hero__headline-block col-span-7" data-reveal>
|
||
<h1 class="h1 hero__title">Бренд-стратегия<br />и креативный<br />консалтинг</h1>
|
||
<p class="body-text hero__subtitle">Помогаю брендам находить свой голос, формировать стратегию и создавать коммуникации, которые работают.</p>
|
||
<a href="https://t.me/alinamamut" class="btn btn--primary hero__cta" target="_blank" rel="noopener">Написать в Telegram</a>
|
||
</div>
|
||
<div class="hero__editorial col-start-8 col-span-5" data-reveal>
|
||
<div class="hero__image-placeholder"></div>
|
||
</div>
|
||
<div class="hero__annotations col-span-7" data-reveal>
|
||
<div class="annotation">
|
||
<div class="annotation__label">Опыт</div>
|
||
<div class="annotation__text">10+ лет в брендинге и стратегии</div>
|
||
</div>
|
||
<div class="annotation">
|
||
<div class="annotation__label">Подход</div>
|
||
<div class="annotation__text">Исследования, аналитика, креатив</div>
|
||
</div>
|
||
<div class="annotation">
|
||
<div class="annotation__label">Результат</div>
|
||
<div class="annotation__text">Система, а не разовые решения</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ SCREEN 2: MANIFEST ============ -->
|
||
<section class="manifest" id="manifest">
|
||
<div class="manifest__inner container grid">
|
||
<div class="manifest__text col-span-5" data-reveal>
|
||
<h2 class="h2 manifest__heading">Я верю, что сильный бренд — это не логотип и не визуал. Это стратегия, смыслы и последовательность.</h2>
|
||
<p class="body-text manifest__body">Каждый проект начинается с глубокого понимания: кто вы, для кого вы и зачем вы существуете. Я нахожу ответы, которые становятся основой для всех ваших коммуникаций — от позиционирования до рекламных кампаний.</p>
|
||
</div>
|
||
<div class="manifest__caption col-start-9 col-span-4" data-reveal>
|
||
<span class="caption">О подходе</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ SCREEN 3: JOURNAL PREVIEW ============ -->
|
||
<section class="journal" id="journal" data-number="01">
|
||
<div class="journal__inner container grid">
|
||
<div class="journal__image-block col-span-7" data-reveal>
|
||
<div class="journal__image-placeholder"></div>
|
||
</div>
|
||
<div class="journal__text-block col-start-9 col-span-4" data-reveal>
|
||
<h2 class="h2 journal__heading">Стратегия — это не документ. Это способ думать о бренде каждый день.</h2>
|
||
<p class="body-text journal__body">Результат моей работы — не просто презентация на 50 слайдов. Это живой инструмент, который помогает принимать решения, формировать контент и развивать бренд осознанно.</p>
|
||
<div class="journal__buttons">
|
||
<a href="https://t.me/alinamamut" class="btn btn--primary" target="_blank" rel="noopener">Обсудить проект</a>
|
||
<a href="#services" class="btn btn--outline">Подробнее об услугах</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ SCREEN 4: SELECTED CASES ============ -->
|
||
<section class="cases" id="cases">
|
||
<div class="cases__inner container">
|
||
<h2 class="h2 cases__heading" data-reveal>Избранные кейсы</h2>
|
||
<div class="cases__grid grid">
|
||
<div class="cases__tile col-span-6" data-reveal>
|
||
<div class="cases__tile-image" style="background-color: var(--color-primary);"></div>
|
||
<h3 class="h3 cases__tile-title">Ребрендинг и стратегия коммуникаций</h3>
|
||
</div>
|
||
<div class="cases__tile col-span-6" data-reveal>
|
||
<div class="cases__tile-image" style="background-color: var(--color-surface);"></div>
|
||
<h3 class="h3 cases__tile-title">Бренд-платформа с нуля</h3>
|
||
</div>
|
||
<div class="cases__tile col-span-6" data-reveal>
|
||
<div class="cases__tile-image" style="background-color: var(--color-ink);"></div>
|
||
<h3 class="h3 cases__tile-title">Креативная концепция спецпроекта</h3>
|
||
</div>
|
||
<div class="cases__tile col-span-6" data-reveal>
|
||
<div class="cases__tile-image" style="background-color: var(--color-accent);"></div>
|
||
<h3 class="h3 cases__tile-title">Коммуникационная стратегия</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ SCREEN 5: SERVICES / ACCORDION ============ -->
|
||
<section class="services" id="services">
|
||
<div class="services__inner container grid">
|
||
<div class="services__block col-start-3 col-span-8">
|
||
<h2 class="h2 services__heading" data-reveal>Услуги</h2>
|
||
|
||
<!-- Service 1 -->
|
||
<details class="services__item" name="accordion" data-reveal>
|
||
<summary class="services__summary">
|
||
<span class="services__number">01</span>
|
||
<span class="services__title">Консультации по креативу и стратегии</span>
|
||
<span class="services__icon">+</span>
|
||
</summary>
|
||
<div class="services__content">
|
||
<div class="services__content-left">
|
||
<div class="services__section">
|
||
<h4 class="services__section-title">Когда это нужно</h4>
|
||
<ul class="services__list">
|
||
<li>Бренд чувствует, что коммуникации устарели;</li>
|
||
<li>Идеи есть, но они не складываются в систему и, главное, не приносят результат;</li>
|
||
<li>Команда не понимает, куда двигаться дальше;</li>
|
||
<li>Нужно свежее, независимое видение.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="services__section">
|
||
<h4 class="services__section-title">Что вы получаете</h4>
|
||
<ul class="services__list">
|
||
<li>Разбор текущей коммуникации бренда;</li>
|
||
<li>Анализ визуального языка и смыслов;</li>
|
||
<li>Точки роста и возможности для отстройки;</li>
|
||
<li>Направления для креатива и спецпроектов.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="services__content-right">
|
||
<div class="services__section">
|
||
<h4 class="services__section-title">Как происходит работа</h4>
|
||
<ol class="services__steps">
|
||
<li>Оперативный созвон-знакомство, вы заполняете бриф, по которому я готовлюсь к консультации;</li>
|
||
<li>2-часовая консультация;</li>
|
||
<li>Презентация с рекомендациями и планом работ.</li>
|
||
</ol>
|
||
</div>
|
||
<a href="https://t.me/alinamamut" class="btn btn--primary services__cta" target="_blank" rel="noopener">Записаться</a>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- Service 2 -->
|
||
<details class="services__item" name="accordion" data-reveal>
|
||
<summary class="services__summary">
|
||
<span class="services__number">02</span>
|
||
<span class="services__title">Бренд-платформа</span>
|
||
<span class="services__icon">+</span>
|
||
</summary>
|
||
<div class="services__content">
|
||
<div class="services__content-left">
|
||
<div class="services__section">
|
||
<h4 class="services__section-title">Когда это нужно</h4>
|
||
<ul class="services__list">
|
||
<li>Проект не растет, нет клиентов;</li>
|
||
<li>Коммуникации выглядят разрозненно;</li>
|
||
<li>Нет четкого позиционирования и голоса;</li>
|
||
<li>Нет понимания, кто аудитория проекта;</li>
|
||
<li>Сложно масштабировать маркетинг.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="services__section">
|
||
<h4 class="services__section-title">Что вы получаете</h4>
|
||
<ul class="services__list">
|
||
<li>Ядро бренда: аудитория, конкуренты, миссия, ценности, характер;</li>
|
||
<li>Чёткое позиционирование и big idea;</li>
|
||
<li>Tone of voice и визуальные принципы;</li>
|
||
<li>Основу для всех коммуникаций.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="services__content-right">
|
||
<div class="services__section">
|
||
<h4 class="services__section-title">Как происходит работа</h4>
|
||
<ol class="services__steps">
|
||
<li>Оперативный созвон-знакомство, вы заполняете бриф;</li>
|
||
<li>2-4 недели разработки бренд-платформы — анализ аудитории и конкурентов, интервью с основателем (при необходимости с командой и клиентами/потенциальными клиентами);</li>
|
||
<li>Презентация с готовой бренд-платформой.</li>
|
||
</ol>
|
||
</div>
|
||
<a href="https://t.me/alinamamut" class="btn btn--primary services__cta" target="_blank" rel="noopener">Записаться</a>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- Service 3 -->
|
||
<details class="services__item" name="accordion" data-reveal>
|
||
<summary class="services__summary">
|
||
<span class="services__number">03</span>
|
||
<span class="services__title">Коммуникационные стратегии</span>
|
||
<span class="services__icon">+</span>
|
||
</summary>
|
||
<div class="services__content">
|
||
<div class="services__content-left">
|
||
<div class="services__section">
|
||
<h4 class="services__section-title">Когда это нужно</h4>
|
||
<ul class="services__list">
|
||
<li>Бренд хочет выйти за рамки стандартной рекламы;</li>
|
||
<li>Нужно привлечь новую аудиторию;</li>
|
||
<li>Конкуренты выглядят ярче и смелее;</li>
|
||
<li>Нет ясного сценария развития коммуникаций.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="services__section">
|
||
<h4 class="services__section-title">Что вы получаете</h4>
|
||
<ul class="services__list">
|
||
<li>Стратегию коммуникаций на основе трендов и инсайтов;</li>
|
||
<li>Ключевые смыслы и сообщения бренда;</li>
|
||
<li>Идеи форматов, контента и спецпроектов;</li>
|
||
<li>Дорожную карту — для кого, в каком канале, что необходимо сделать.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="services__content-right">
|
||
<div class="services__section">
|
||
<h4 class="services__section-title">Как происходит работа</h4>
|
||
<ol class="services__steps">
|
||
<li>Оперативный созвон-знакомство, вы заполняете бриф;</li>
|
||
<li>2-4 недели разработки коммуникационной стратегии — анализ аудитории и коммуникации конкурентов, анализ лучших релевантных зарубежных и локальных практик;</li>
|
||
<li>Презентация с готовой коммуникационной стратегией.</li>
|
||
</ol>
|
||
</div>
|
||
<a href="https://t.me/alinamamut" class="btn btn--primary services__cta" target="_blank" rel="noopener">Записаться</a>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- Service 4 -->
|
||
<details class="services__item" name="accordion" data-reveal>
|
||
<summary class="services__summary">
|
||
<span class="services__number">04</span>
|
||
<span class="services__title">Идеи спецпроектов и креативные концепции</span>
|
||
<span class="services__icon">+</span>
|
||
</summary>
|
||
<div class="services__content">
|
||
<div class="services__content-left">
|
||
<div class="services__section">
|
||
<h4 class="services__section-title">Когда это нужно</h4>
|
||
<ul class="services__list">
|
||
<li>Бренд хочет вау-эффект без банальных решений;</li>
|
||
<li>Нужна идея, которую будут обсуждать;</li>
|
||
<li>Важно выйти за рамки стандартных форматов.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="services__section">
|
||
<h4 class="services__section-title">Что вы получаете</h4>
|
||
<ul class="services__list">
|
||
<li>Концепции спецпроектов;</li>
|
||
<li>Сценарии интеграций и коллабораций;</li>
|
||
<li>Решения, которые можно масштабировать.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="services__content-right">
|
||
<div class="services__section">
|
||
<h4 class="services__section-title">Как происходит работа</h4>
|
||
<ol class="services__steps">
|
||
<li>Оперативный созвон-знакомство, вы заполняете бриф;</li>
|
||
<li>2-3 недели разработки идеи — сбор референс, анализ лучших практик, подготовка идеи;</li>
|
||
<li>Презентация с готовой креативной концепцией.</li>
|
||
</ol>
|
||
</div>
|
||
<a href="https://t.me/alinamamut" class="btn btn--primary services__cta" target="_blank" rel="noopener">Записаться</a>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<div class="services__footer" data-reveal>
|
||
<p class="body-text services__footer-text">Я могу как разработать идею, так и взять на себя всю реализацию при помощи моей команды профессионалов.</p>
|
||
<p class="body-text services__footer-text">Чтобы ознакомиться с моим портфолио и реализованными кейсами, пожалуйста, напишите мне:</p>
|
||
<a href="https://t.me/alinamamut" class="btn btn--primary" target="_blank" rel="noopener">@alinamamut</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ FOOTER ============ -->
|
||
<footer class="footer">
|
||
<div class="footer__inner container">
|
||
<span class="footer__copy">© 2026 Alina Mamut</span>
|
||
<a href="https://t.me/alinamamut" class="footer__telegram" target="_blank" rel="noopener">@alinamamut</a>
|
||
<a href="#" class="footer__privacy">Политика конфиденциальности</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script type="module" src="/src/main.js"></script>
|
||
</body>
|
||
</html>
|