Files

Ivan Liashkevich ef38a90059 Add new pages for sustainability, contacts, technical requirements, glossary, and related content

- Created a sustainability page with detailed eco-friendly practices and certifications.
- Added a contacts page featuring multiple communication channels and company details.
- Introduced a comprehensive technical requirements document covering Core Web Vitals and SEO best practices.
- Developed a glossary of terms related to performance, SEO, technical development, and marketing.

2026-02-19 23:07:51 +02:00

5.9 KiB

Raw Blame History

tags, created

Посадочна «Замовити зразок» — `/samples`

Чому це критично

Кожна CTA на сайті веде до «Замовити зразок», але зараз немає цільової сторінки. Зразок — головний конвертер: клієнт, що потримав матеріал, конвертується в 3-5 разів краще за клієнта, що лише подивився на сайті.

Ця сторінка — єдина конверсійна точка всіх воронок.

Структура сторінки

1. Hero-блок

Заголовок: «Замовте безкоштовний зразок — потрогайте різницю» Підзаголовок: «Отримайте 4-6 зразків різних текстур і кольорів. Доставка 3-7 днів по Україні.»

2. Що отримаєте (3 картки)

4-6 зразків різних текстур, формат NF
Картка характеристик — назва, F300, склад
Інформація про бренд — історія + відмінності + прайс + контакти

3. Форма заявки

Поле	Тип	Обов'язкове
Ім'я	text	Так
Телефон	tel	Так
Місто	text	Так
Які кольори цікавлять?	multiselect (з каталогу)	Ні
Хто ви?	select: Домовласник / Архітектор / Будівельник / Дилер	Ні
Коментар	textarea	Ні

Обов'язкові лише 3 поля. Без email. Мінімум тертя.

4. Trust-signals (під формою)

Фото зразків в упаковці
«F300 — 300 циклів заморозки»
«Виробництво в Одесі»
«Доставка 3-7 днів»
«Зразки безкоштовно для архітекторів»

5. Після надсилання

Текст: «Дякуємо! Ми зателефонуємо протягом 24 годин»
Посилання на Telegram для швидких питань
Конверсійна подія: PostHog.capture('sample_requested') + gtag('event', 'generate_lead')

Бекенд

Використовувати ту саму сутність ContactForm, що і для /contacts:

POST /api/contact-form
{
  name: string (required)
  phone: string (required)
  city: string
  message: string
  type: "Sample" | "Contact" | "Callback"
  colors: string[] (optional — slugs із каталогу)
  role: string (optional)
}

Сутність ContactForm в БД:

Id              int (PK, auto)
Name            string (required)
Phone           string (required)
City            string (nullable)
Message         string (nullable)
Type            enum (Sample, Contact, Callback)
Colors          string (nullable, JSON array)
Role            string (nullable)
SubmittedAt     DateTime (UTC)
IsProcessed     bool (default false)

Пізніше — інтеграція з KeyCRM через webhook або API.

Куди вести CTA з інших сторінок

Сторінка	CTA-текст	Link
Homepage Hero	«Замовити безкоштовний зразок»	`/samples`
Картка товару	«Замовити зразок цього кольору»	`/samples?color={slug}`
Калькулятор (після результату)	«Замовити зразок для точного розрахунку»	`/samples`
`/architects`	«Замовити зразки для проєкту»	`/samples?role=architect`
FAQ (кілька місць)	«Замовте зразок — потрогайте різницю»	`/samples`
Footer (весь сайт)	«Безкоштовний зразок»	`/samples`

SEO

Title: «Замовити безкоштовний зразок фасадної плитки — GoodBrick»
Description: «Отримайте 4-6 зразків фасадної плитки ручної формовки. Доставка 3-7 днів по Україні. Безкоштовно для архітекторів.»
Schema: LeadAction або ContactAction

Google Ads

Окрема кампанія з ключами:

замовити зразки фасадної плитки
безкоштовний зразок плитки
зразки облицювального кирпича

Очікуваний CR: 8-15% (клієнт вже вирішив замовити — він шукає саме зразок).

Фронтенд — файли для створення

frontend/src/
  app/(site)/samples/
    page.tsx              — серверний компонент, metadata
  components/
    forms/
      sample-form.tsx     — react-hook-form + zod, multiselect кольорів
    samples/
      sample-hero.tsx     — hero-блок
      sample-benefits.tsx — 3 картки «що отримаєте»
      sample-trust.tsx    — trust-signals
      sample-success.tsx  — стан після відправки

Query-параметри

Форма підтримує prefill через URL:

?color=sahara — попередньо обрано колір Sahara
?role=architect — попередньо обрано «Архітектор»
?colors=sahara,ivory,graphite — кілька кольорів

Це дозволяє кожній CTA передавати контекст у форму.

Пов'язані документи: 01 — Шляхи клієнтів і воронки, 00 — Обзор воронок, ../site-v2/02 — Контакти

5.9 KiB Raw Blame History Unescape Escape

Посадочна «Замовити зразок» — /samples