Add new pages for FAQ, Sustainability, Contacts, Technical Requirements, Glossary, and related content
- Created FAQ page with structured questions and answers for customer support. - Added Sustainability page detailing eco-friendly practices and certifications. - Introduced Contacts page with comprehensive contact information and forms. - Established Technical Requirements page outlining SEO and performance standards. - Compiled a Glossary of terms related to performance, SEO, and construction materials.
This commit is contained in:
155
site-v2/06 — Галерея проектов.md
Normal file
155
site-v2/06 — Галерея проектов.md
Normal file
@@ -0,0 +1,155 @@
|
||||
---
|
||||
tags:
|
||||
- сайт
|
||||
- страница
|
||||
- проекты
|
||||
- p1
|
||||
url: /projects
|
||||
approach: Кастомная страница + новая сущность Projects в БД
|
||||
effort: ~12ч (бэкенд + фронтенд)
|
||||
created: 2026-02-17
|
||||
---
|
||||
|
||||
# 🏗️ Галерея проектів
|
||||
|
||||
> [!tip] Роль страницы
|
||||
> Самый мощный trust-сигнал для high-ticket покупателя. Человек видит реальный дом с фасадом — сразу понимает масштаб, цвет, текстуру. «Такое же, как у меня».
|
||||
|
||||
> [!warning] Реализация
|
||||
> **Кастомная страница** — нужны новые сущность `Project` в БД и API-эндпоинты.
|
||||
> Фронтенд: masonry grid + lightbox + страница отдельного проекта.
|
||||
|
||||
---
|
||||
|
||||
## Мета-данные
|
||||
|
||||
| Поле | Значение |
|
||||
|---|---|
|
||||
| **H1** | `Проєкти з фасадною плиткою GoodBrick` |
|
||||
| **Title** | `Фото проєктів — Фасади з плиткою та цеглою GoodBrick` |
|
||||
| **Description** | `Реальні проєкти з фасадною плиткою GoodBrick: котеджі, будинки, комерційні об'єкти. Фото до та після, використані матеріали, місто.` |
|
||||
| **Schema** | `CollectionPage` + `ImageObject` per project |
|
||||
| **isIndexable** | true |
|
||||
|
||||
---
|
||||
|
||||
## Бэкенд — новая сущность
|
||||
|
||||
### Entity `Project`
|
||||
|
||||
```csharp
|
||||
// GBSite.Data/Entities/Project.cs
|
||||
public class Project {
|
||||
public int Id { get; set; }
|
||||
public string Title { get; set; } // «Котеджне містечко Одеса»
|
||||
public string Slug { get; set; } // «kotedzhne-mistechko-odesa»
|
||||
public string Description { get; set; } // 100–300 слов о проекте
|
||||
public string City { get; set; } // «Одеса»
|
||||
public string ObjectType { get; set; } // «Приватний будинок» / «Комерційний об'єкт»
|
||||
public int? AreaSqm { get; set; } // 850 (кв.м. фасада)
|
||||
public string ImageUrls { get; set; } // JSON array ["url1", "url2"]
|
||||
public string ProductColorSlugs { get; set; } // JSON array ["shokolad", "okhra"]
|
||||
public bool IsPublished { get; set; }
|
||||
public DateTime CreatedAt { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
### API эндпоинты
|
||||
|
||||
```
|
||||
GET /api/projects → list (только IsPublished=true, desc по дате)
|
||||
GET /api/projects/{slug} → detail (public)
|
||||
POST /api/projects → create (admin)
|
||||
PUT /api/projects/{id} → update (admin)
|
||||
DELETE /api/projects/{id} → delete (admin)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Фронтенд — листинг /projects
|
||||
|
||||
### Компонент `ProjectsGallery`
|
||||
|
||||
```
|
||||
app/(site)/projects/page.tsx
|
||||
components/projects/projects-gallery.tsx
|
||||
```
|
||||
|
||||
**Верстка:**
|
||||
- Masonry grid (3 колонки desktop / 2 tablet / 1 mobile)
|
||||
- Каждая карточка: главное фото + overlay с «{Місто}, {кв.м.}»
|
||||
- При наведении — подпись + кнопка «Детальніше»
|
||||
- Lightbox при клике на фото (библиотека `yet-another-react-lightbox`)
|
||||
|
||||
**Без фильтров при запуске** — добавить позже когда проектов >10.
|
||||
|
||||
---
|
||||
|
||||
## Фронтенд — страница проекта /projects/{slug}
|
||||
|
||||
```
|
||||
app/(site)/projects/[slug]/page.tsx
|
||||
```
|
||||
|
||||
**Структура страницы:**
|
||||
|
||||
1. **Шапка:** H1 (название) + мета (город, тип объекта, площадь, год)
|
||||
2. **Галерея:** masonry / slideshow из фото проекта + lightbox
|
||||
3. **Описание:** текст о проекте, задачах, решениях
|
||||
4. **Использованные материалы:** карточки-ссылки на product-страницы
|
||||
- «Колір Шоколад, поверхня Khvylia» → `/product/shokolad`
|
||||
5. **CTA:** «Замовити такі самі матеріали» → Telegram / каталог
|
||||
|
||||
**SEO:** динамические metadata + Schema.org `Article` / `ImageObject`
|
||||
|
||||
---
|
||||
|
||||
## Контент на запуск (3–5 проектов-заготовок)
|
||||
|
||||
Заполнить реальными проектами (если есть фото) или создать «демо»-проекты из имеющихся live-фото:
|
||||
|
||||
| # | Название | Город | Тип | Площадь | Материал |
|
||||
|---|---|---|---|---|---|
|
||||
| 1 | {Назва від клієнта} | Одеса | Приватний будинок | {кв.м.} | {колір/поверхня} |
|
||||
| 2 | {Назва від клієнта} | Хмельницький | Приватний будинок | {кв.м.} | {колір/поверхня} |
|
||||
| 3 | {Назва від клієнта} | Київ | Комерційний об'єкт | {кв.м.} | {колір/поверхня} |
|
||||
|
||||
> [!important] Данные для проектов
|
||||
> Лучше 3 реальных проекта с реальными фото, чем 10 невнятных. Если нет согласия клиента — «Приватний будинок, Одеса» без имени.
|
||||
|
||||
---
|
||||
|
||||
## Конверсия
|
||||
|
||||
На странице листинга:
|
||||
- **Sticky баннер снизу**: «Хочете такий фасад? Замовте безкоштовний зразок»
|
||||
|
||||
На странице проекта:
|
||||
- **CTA после галереи**: «Замовити матеріали для схожого проекту» → Telegram
|
||||
- **Ссылки на продукты** — внутренняя перелинковка на карточки товаров
|
||||
|
||||
---
|
||||
|
||||
## Зависимости
|
||||
|
||||
- Библиотека `yet-another-react-lightbox` — установить через npm
|
||||
- Опционально: `react-masonry-css` для masonry grid (или CSS columns)
|
||||
|
||||
---
|
||||
|
||||
## Scope cuts
|
||||
|
||||
| Убрано | Причина |
|
||||
|---|---|
|
||||
| Фильтры по городу / типу объекта | Добавить когда проектов >10 |
|
||||
| 360° просмотр | Сложно технически, добавить Q2 |
|
||||
| «До/После» слайдер | Нет фото «до», добавить с новыми проектами |
|
||||
| Карта с пинами проектов | Добавить Q2 |
|
||||
|
||||
---
|
||||
|
||||
## Связанные страницы
|
||||
|
||||
- [[00 — Обзор и приоритеты]]
|
||||
- [[01 — Главная]]
|
||||
- [[05 — Блог]]
|
||||
Reference in New Issue
Block a user