Потрібно розробити дизайн шаблону email Welcome листів для Замовника - 2 версії

1) Мета та KPI

• Мета дизайну: підвищити CTR/CTOR, швидко пояснити цінність Сейфу та підвести до першого кліку.

• Primary action: клік по відео / ключовій дії, пов’язаній із Сейфом (той CTA, який вже є у вашому контенті).

• Secondary action: клік по Telegram-бот / застосунок (як у поточному листі).
  
  

2) Вихідні матеріали

• Поточний приклад листа: EMP_WELCOME_sejf.jpg + текстова версія

• Еталон стилю нового UI: Design header.jpg, design footer.jpg

3) Обмеження (важливо)

• Не переписувати копірайт. Тільки переструктурувати/згорнути/розкласти по картках.

• Верстка має збиратися в GetResponse drag&drop.

• Відео — через image preview (картинка + play icon) + посилання (без вбудованого відео).
  
  

4) Стиль та дизайн-система 

• Мінімалізм + модульний дизайн: лист як стрічка окремих карток (cards) з бордерами/радіусами/падінгами; кожен розділ — окремий візуальний блок.

• Посилання на приклад нового дизайну - https://www.figma.com/design/H9Ky9SJxtfQRcFGKR10Sg6/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3%D0%B0?node-id=0-1&p=f 

• Інші кольори та стилі можна брати із головної сторінки  https://freelancehunt.com/ (відображається для не авторизованих)
  
  

5) “Модульність / поділ на блоки (must-have)”

Вимога: лист має бути візуально поділений на окремі блоки/модулі (як у новому UI Freelancehunt) за рахунок дизайну, а не тільки структури тексту.

Як саме ділити:

• Кожен логічний розділ (Hero, Як працює, Переваги, НЕ робити, Відео, Secondary CTA) — це окрема “картка” або блок.

• Блоки відділяються мінімум 2 з 3 ознак:

  • border 1px (≈ #E6E8EE)

  • окремий background surface (білий на сірому фоні листа)

  • радіус 12–16px

  • опціонально: м’який внутрішній padding 16–20px

Ритм/відступи:

• Між блоками: 16px (desktop), 12–16px (mobile).

• Всередині картки padding: 16–20px.

Сканованість:

• У кожної картки є короткий заголовок + контент (булети/кроки).

• Довгі абзаци уникати — переформатувати у булети/нумерацію (без зміни сенсу).

Acceptance criteria (щоб прийняти дизайн):

1. На першому екрані (mobile 375px) видно Hero + primary CTA.

2. Нижче по листу чітко видно “стрічку карток”: кожен розділ читається як окремий модуль.

3. Якщо вимкнути картинки — лист все одно “збирається” в блоки (тобто межі створені не лише зображеннями).

6) Формат макету (обов’язково)

• Figma макет 600px + mobile preview 375px

• UI Kit

• Спека для збірки в GetResponse
  
  

7) Інформаційна архітектура (структура листа)

Варіант A (основний): “Minimal / Fast scan”

• Header

• Hero: заголовок “Що таке Сейф?” + короткий вступ (існуючий) + 3 булети “Сейф дозволяє…”

• Primary CTA above the fold (вести на відео або на релевантну дію з вашого контенту)

• Card “Як працює Сейф” (1–5 кроків)

• Card “Переваги”

• Warning card “А ось чого НЕ треба робити” (❌ список)

• Video preview block (картинка + play + підпис, все клікабельне)

• Secondary CTA row: TG-бот / застосунок

• Footer(посилання на соцмережі+ номінація про кращий фриланс сервіс)

• Текст з відпискою
  
  

Варіант B (додатковий): “Education + Trust”

• Після Hero відразу Video preview

• “Як працює” розбити на 2 cards (1–3) і (4–5)

• Далі: Переваги → Warning → Secondary CTA → Footer
  
  

8) Компоненти (Email UI Kit) — що дизайнер має намалювати

• Header (logo row + divider)

• Hero (title + short text + bullets + primary CTA)

• Card (звичайна)

• Numbered list card (кроки 1–5)

• Warning card (❌ list)

• Video preview block (image + play icon + caption link)

• Secondary CTA row (2 outline buttons)

• Footer у стилі нового сайту(посилання на соцмережі+ номінація про кращий фриланс сервіс)

• Текст з відпискою

9) Технічні вимоги під GetResponse

• Контейнер 600px; падінги 30/15

• CTA: одна primary кнопка (зелена) + 1–2 secondary (біла з чорним контуром)

• Video preview image: 600×340 (retina 1200×680), ALT: “Відео: як Сейф захищає замовника”

• Outlook-safe: без складних CSS, без реальних акордеонів, без “важливих” background-image

• Dark mode: бордери/нейтральні поверхні, без тонких текстів
  
  

10) Deliverables

• Figma: 2 варіанти (A і B) + UI Kit

• PNG прев’ю desktop/mobile

Спека: стилі, розміри, відступи, правила для кнопок/зображень/бордерів