English  ·  Русский

Posleslovie · Послесловие

Production landing site for a natural-cosmetics gift brand — running on $0 hosting, editable without a developer.

Frontend
Content & CMS
Hosting
Integrations
Analytics & anti-spam
Tooling
Architecture

▶ Open the site  ·  🛠 CMS admin panel

---

Screenshots

Website

Hero screen

FAQ section

Process section

CMS (Sveltia)

Sign-in

Editor with live preview

Media library

---

English

[↑ Back to top]

Posleslovie is a production landing site for a natural-cosmetics gift brand (handmade bath bombs and gift sets). The whole thing runs without paid hosting — a static Next.js export on GitHub Pages, with Cloudflare Workers handling the few dynamic pieces. The brand owner edits every section of the page through a no-code CMS, and customer checkout requests flow straight into the CRM, all without a developer in the loop.

What this project demonstrates: building a real, client-facing site on $0 production infrastructure (GitHub Pages + Cloudflare Workers), with schema-validated CMS content, SEO and structured data, conversion analytics, server-verified bot protection, a multi-step checkout integrated with a CRM, and a CI pipeline that gates every deploy.

Key features

Feature	Description
Zero paid hosting	Static Next.js export on GitHub Pages + free Cloudflare Workers — the live site costs nothing to run.
No-code content editing	The brand owner edits every landing section via Sveltia CMS; content lives as JSON in the repo, validated with Zod so a bad edit degrades gracefully instead of breaking the page.
Checkout → CRM	A multi-step checkout modal with persisted form state, validation, and logo upload, creating a lead in AmoCRM through a secret-bearing Cloudflare Worker.
Funnel analytics	Yandex.Metrica with lead and checkout goals, ecommerce purchase tracking via dataLayer, and Webmaster site verification.
Bot protection	Cloudflare Turnstile guards the checkout and lead forms, verified server-side in the Worker — silently off until keys are configured.
SEO-ready	Sitemap, robots.txt, Open Graph, and JSON-LD structured data generated at build time.
CI before deploy	Every push to main runs format, lint, typecheck and unit tests before building and publishing to Pages.
Feature-Sliced architecture	app / widgets / features / shared layers with a clean model ↔ ui split.

---

Русский

[↑ Наверх]

Продакшен-лендинг для бренда натуральной косметики — работает на бесплатном хостинге и редактируется без разработчика.

Послесловие — это продакшен-лендинг для бренда натуральной косметики (ручные бомбочки для ванны и подарочные наборы). Сайт работает без платного хостинга: статический экспорт Next.js на GitHub Pages, а немногочисленные динамические части обслуживают Cloudflare Workers. Владелец бренда редактирует каждую секцию страницы через no-code CMS, а заявки из оформления заказа уходят напрямую в CRM — всё без участия разработчика.

Что демонстрирует проект: реальный клиентский сайт на бесплатной (zero-cost) инфраструктуре (GitHub Pages + Cloudflare Workers), с контентом из CMS под валидацией схемой, SEO и структурированными данными, аналитикой конверсии, серверной защитой от ботов, многошаговым оформлением заказа с интеграцией в CRM и CI-пайплайном, который проверяет каждый деплой.

Ключевые возможности

Возможность	Описание
Без платного хостинга	Статический экспорт Next.js на GitHub Pages + бесплатные Cloudflare Workers — живой сайт ничего не стоит в обслуживании.
No-code редактирование	Владелец бренда правит каждую секцию через Sveltia CMS; контент хранится как JSON в репозитории и валидируется через Zod (Zod) — ошибочная правка деградирует мягко, а не ломает страницу.
Оформление заказа → CRM	Многошаговый модал оформления с сохранением состояния формы, валидацией и загрузкой логотипа; создаёт лид в AmoCRM через Cloudflare Worker, который хранит секреты.
Аналитика воронки	Яндекс.Метрика (Yandex.Metrica) с целями на лид и оформление заказа, отслеживанием покупок через dataLayer (ecommerce) и подтверждением сайта в Вебмастере.
Защита от ботов	Cloudflare Turnstile прикрывает формы оформления и заявки, проверка проходит на сервере в Worker — тихо отключена, пока не заданы ключи.
Готовность к SEO	Sitemap, robots.txt, Open Graph и структурированные данные JSON-LD генерируются на этапе сборки.
CI перед деплоем	Каждый push в main прогоняет format, lint, typecheck и unit-тесты до сборки и публикации на Pages.
Архитектура Feature-Sliced	Слои app / widgets / features / shared с чистым разделением model ↔ ui.

---

For developers

Tech stack

Frontend	Next.js 16 (static export), React 19, TypeScript, Tailwind CSS v4
Content	JSON files in content/, edited via Sveltia CMS, validated with Zod
Hosting	GitHub Pages + GitHub Actions (custom domain posleslovie.online)
Integrations	Cloudflare Workers — AmoCRM lead proxy, Sveltia CMS GitHub OAuth
Analytics	Yandex.Metrica (goals + ecommerce dataLayer), Yandex.Webmaster
Anti-spam	Cloudflare Turnstile (client widget + Worker-side siteverify)
Config	Zod-validated public env (shared/config/env.ts), CMS behavior toggles
Tooling	ESLint, Prettier, Vitest (unit), Playwright (e2e), Lighthouse CI

Project layout

├── content/                  # JSON content (edited via CMS, validated with Zod)
│   ├── home-*.json           # Landing sections (hero, about, why-us, process, faq, reviews…)
│   ├── site-settings.json
│   ├── site-products.json
│   ├── site-behavior.json    # CMS toggles: scroll anim, overlays, cookie consent
│   └── legal-documents.json
├── public/admin/             # Sveltia CMS
├── src/
│   ├── app/                  # Next.js App Router: page, layout, robots, sitemap, error boundaries
│   ├── widgets/
│   │   └── home-sections/
│   │       ├── ui/           # section-level modules (Hero, Process, WhyUs, FAQ, Reviews…)
│   │       └── model/        # content mapping + runtime schemas (content-schema.ts)
│   ├── features/
│   │   └── checkout/
│   │       ├── model/        # state, validation, payload contracts, API
│   │       └── ui/           # CheckoutModal.tsx (thin orchestrator) + checkout-modal/*
│   └── shared/
│       ├── ui/               # primitives + Turnstile, yandex-metrica, cookie-consent
│       ├── lib/              # pure helpers (assetPath, city, phone, structured data, metrica, report-error)
│       ├── hooks/            # use-focus-trap, use-body-lock, use-prefers-reduced-media
│       └── config/           # typed config: env (Zod), seo, site-behavior, legal
├── cloudflare/               # Workers: AmoCRM proxy (+ Turnstile verify), CMS OAuth
└── .github/workflows/        # pages.yml (deploy), deploy-workers.yml, lighthouse.yml

Local development

npm install
npm run dev      # http://localhost:3000
npm run check    # format:check + lint + typecheck + unit tests
npm run build    # static build -> out/
npm run check:full   # check + Playwright e2e (run before a client demo)

Node.js 22+ is required. Checkout and CMS auth are handled by external Cloudflare Workers; their secrets (AmoCRM, OAuth, Turnstile) live in the Cloudflare Dashboard, not in the repo.

Configuration

Public configuration is read through a single Zod-validated module (shared/config/env.ts) — a misconfigured NEXT_PUBLIC_* is logged loudly in dev instead of failing silently inside a feature, and never white-screens the site. Every optional integration is off until its key is set, so the project builds and runs cleanly before any of them are configured.

Variable	Purpose
NEXT_PUBLIC_SITE_URL	Canonical origin for SEO, sitemap and absolute URLs
NEXT_PUBLIC_AMOCRM_WORKER_URL	Endpoint of the AmoCRM lead Worker
NEXT_PUBLIC_YANDEX_METRICA_ID	Metrica counter id (digits only) — empty disables analytics
NEXT_PUBLIC_TURNSTILE_SITE_KEY	Turnstile site key — empty disables the bot-protection widget
NEXT_PUBLIC_ERROR_REPORT_URL	Optional beacon endpoint for client error reports

Client-editable behavior toggles live in content/site-behavior.json (scroll animations, global overlays, and the cookie-consent banner — the last is off by default, so analytics load immediately unless the client opts into a 152-ФЗ-style consent gate from the CMS).

Reliability & UX

• Error boundaries: app/error.tsx and app/global-error.tsx keep a runtime error from blanking the page; an optional beacon (shared/lib/report-error.ts) reports it.
• Accessibility: modals trap focus (shared/hooks/use-focus-trap.ts) and respect reduced-motion preferences.

CI/CD

• Deploy (pages.yml): push to main → GitHub Actions runs npm run check and the Playwright e2e suite (against the built static export, with the lead/checkout network mocked so no real CRM leads are created), then publishes out/ to GitHub Pages.
• Workers (deploy-workers.yml): the AmoCRM and CMS OAuth Workers auto-deploy to Cloudflare on push, with keep_vars so dashboard secrets survive a deploy.
• Lighthouse (lighthouse.yml): runs accessibility/SEO/perf audits (does not gate the deploy).
• Pages setup: Settings → Pages → GitHub Actions.
• Content publishing: edit at posleslovie.online/admin/ → commit to GitHub → Actions redeploys (~3 min).

Integrations

Service	Purpose
AmoCRM	Checkout form → deal with note and attachment, via a Cloudflare Worker proxy
GitHub OAuth	Sveltia CMS sign-in, via a CSRF-protected Cloudflare Worker
Cloudflare Turnstile	Bot challenge on checkout/lead forms, verified server-side in the Worker
Yandex.Metrica	Pageviews, lead/checkout goals, ecommerce purchase tracking via dataLayer
Yandex.Webmaster	Site ownership verification (meta tag in the document head)

Architecture map

flowchart TD
  User[Visitor] --> Site[Next.js static site]
  Site --> Metrica[Yandex.Metrica]
  Site --> AmoWorker[AmoCRM Worker]
  AmoWorker --> Turnstile[Turnstile siteverify]
  AmoWorker --> AmoCRM[AmoCRM]

  Admin[Content editor] --> CMS[Sveltia CMS]
  CMS --> OAuth[OAuth Worker]
  CMS --> GitHub[GitHub content]
  GitHub --> Actions[GitHub Actions]
  Actions --> Pages[GitHub Pages]

Loading

---

License

© 2026 Max Gaida. All rights reserved.

This repository is public for portfolio and demonstration purposes only. It was built as a commercial project for the "Posleslovie" brand; all brand assets and content belong to their respective owner. No license is granted to use, copy, modify, or distribute any part of it without prior written permission.

See LICENSE.md for details.