Техническое задание: Global Green Pages — пакет «Концепт»

Кликабельный прототип международной цифровой витрины экологической ответственности нефтегазовых компаний

Версия: 1.1 Дата: 3 апреля 2026 Проект: RBC MONAECO — Global Green Pages (пакет «Концепт») Домен продакшн: greenlist.info Хостинг: собственный VPS (с SSH-доступом для агента) Основание: КП v2 — docs/offers/global-green-pages-v2.md (базовый: 265 000 руб, 3–4 недели, 120 ч) Скорректированная стоимость: 278 000 руб, 3–4 недели, 126 ч (см. §3.4 — добавлен русский язык)

Формат этого документа. Это не классическое ТЗ для сторонней команды, а план совместной работы между агентом-исполнителем (Claude) и партнёром-заказчиком (Igor). Документ описывает: (1) технические детали для реализации агентом; (2) контрольные точки, где требуется участие партнёра (Stitch-генерации, доступы, приёмка, контент).

Содержание

Роли и формат работы
Цели пакета «Концепт»
Границы проекта
Информационная архитектура
Технологический стек
Архитектура приложения
Страницы и маршруты
Компоненты
Модель данных
Методика Green Stars
Дизайн-система и Stitch-промпты
Интернационализация (i18n)
Контент и демо-данные
Критерии приёмки
Нефункциональные требования
План работы по фазам
Задачи партнёра (сводный чеклист)
Деплой и инфраструктура
Риски и митигация
Открытые вопросы

1. Роли и формат работы

1.1. Наименование

Global Green Pages — Концепт (далее GGP-Concept) — прототип международной платформы экопредставительств компаний.

1.2. Разделение ответственности

Роль	Кто	Ответственность
Агент-исполнитель	Claude (этот чат)	Весь код, архитектура, миграции, деплой, документация, тесты
Партнёр	Igor (пользователь)	Запуск Stitch-промптов, предоставление доступов (GitHub, hosting), согласование контента/переводов, финальная приёмка, оплата

1.3. Формат взаимодействия

Агент ведёт работу по фазам (см. §16)
Перед каждой фазой, где требуется вход от партнёра, агент останавливается и даёт чёткую задачу ("запусти Stitch-промпт #1 и пришли HTML", "создай GitHub-репозиторий green-pages")
Партнёр выполняет задачу и сообщает в чате
Агент продолжает работу
В конце каждой фазы — короткое демо + приёмка

1.4. Документы-источники

Документ	Путь	Назначение
КП v2	`docs/offers/global-green-pages-v2.md`	Пакеты, цены, методика, user stories
Deep Research #1	`docs/research/ESG platforms, standards, and the Chinese oil & gas market.md`	Конкуренты, стандарты, 10 целевых компаний, формула рейтинга
Deep Research #2	`docs/research/Interactive ESG visualization best practices, examples, and the right tech stack.md`	Tech stack, паттерны визуализации, MVP-roadmap
Skill `stitch-design`	`~/.claude/skills/stitch-design/SKILL.md`	Правила работы с Google Stitch

2. Цели пакета «Концепт»

2.1. Бизнес-цель

Показать международным нефтегазовым компаниям концепцию GGP в виде кликабельного прототипа с реальными данными двух компаний — CNOOC (Китай) и Новатек (Россия). Получить обратную связь от потенциальных партнёров (китайские NOC, российские независимые производители, европейские импортёры) и согласие на инвестиции в полноценную разработку (пакет «Платформа», ~1.4 млн руб).

2.2. Продуктовые цели

#	Цель	Результат
П1	Показать концепцию экопредставительства	1–2 рабочих экопрофиля, а не мокапы
П2	Продемонстрировать методику Green Stars	Видимый рейтинг + страница с методологией
П3	Обосновать «вау-эффект»	Интерактивные визуализации (radar, carbon bar, KPI cards)
П4	Покрыть международную аудиторию	3 языка: EN, ZH, RU
П5	Быть готовым к продакшн-деплою	Hosted, доступен по ссылке, работает на мобильных

2.3. Путь развития после «Концепта»

flowchart LR
    Concept["Концепт<br/>1-2 профиля<br/>SSG<br/>4 недели"] --> Feedback["Обратная связь<br/>китайских партнёров"]
    Feedback --> Showcase["Витрина<br/>5-10 профилей<br/>backend+admin<br/>8-10 недель"]
    Showcase --> Platform["Платформа<br/>self-service<br/>модерация<br/>14-16 недель"]
    Platform --> Ecosystem["Экосистема<br/>API+scrollytelling<br/>20-22 недели"]

    style Concept fill:#14532d,stroke:#22c55e
    style Feedback fill:#172554,stroke:#3b82f6
    style Showcase fill:#78350f,stroke:#f59e0b
    style Platform fill:#3b0764,stroke:#a855f7
    style Ecosystem fill:#450a0a,stroke:#ef4444

3. Границы проекта

3.1. Входит в «Концепт»

#	Модуль	Описание	Часы
К1	Landing page	Концепция GGP, преимущества, CTA	12
К2	Каталог компаний	5–10 статичных карточек с Green Stars	8
К3	Экопрофиль × 2	CNOOC (Китай) + Новатек (РФ): hero, KPI, radar, carbon bar, источники	20 + 16
К4	Страница методологии	Описание Green Stars (7 метрик, формула, пороги)	8
К5	Green Stars рейтинг	Leaf-иконки + десятичный балл + расчёт на стороне клиента	12
К6	3 визуализации	Rating card, ESG radar (Nivo), carbon stacked bar (Recharts)	16
К7	Демо-данные	Наполнение для 2 полных + 3–8 сокращённых профилей	12
К8	i18n (3 языка)	EN, ZH, RU	10

3.2. НЕ входит в «Концепт»

Backend API / база данных — данные в JSON-файлах
Аутентификация / авторизация / роли
Self-service портал для компаний
Модерация контента
Админ-панель
Поиск полнотекстовый
Интерактивная карта объектов (есть в пакете «Платформа»)
Сравнение компаний (peer comparison overlay)
Scrollytelling / расширенная анимация
Публичный API для партнёров
Экспорт PDF / CSV
Integration с внешними данными (IPE API, satellite monitoring)
Uptime / SLA / мониторинг — dev-прототип

3.3. Ограничения

Параметр	Значение
Количество компаний с полным профилем	2 (CNOOC, Новатек)
Количество компаний-заглушек в каталоге	3–8
Языки	3 (EN, ZH, RU)
Типы устройств	Desktop, tablet, mobile
Браузеры	Chrome/Edge latest, Firefox latest, Safari latest
Offline-поддержка	Нет

3.4. Коррекция бюджета (scope-уточнение)

Исходный КП v2 (docs/offers/global-green-pages-v2.md) предусматривал 2 языка (ZH + EN) — 8 часов на i18n в составе пакета «Эскиз». Финальный scope после уточнения с партнёром: 3 языка (EN + ZH + RU). Арабский язык не требуется, RTL-адаптация исключена.

Расширение на русский добавляет небольшой объём работы поверх базовых 120 часов.

3.4.1. Разбивка дополнительных часов

Задача	Часы	Роль
UI-строки на RU (перевод + проверка в контексте)	2	Senior Frontend
Контент RU (правка машинного перевода hero/CTA/методологии)	2	Контент
Тестирование всех страниц на 3 локалях	2	QA Engineer
Итого дополнительно	6 ч

3.4.2. Новая калькуляция стоимости

Статья	Было (120 ч)	Стало (126 ч)	Δ
Tech Lead / Архитектор	16 × 2 750 = 44 000	16 × 2 750 = 44 000	0
Senior Frontend	60 × 1 950 = 117 000	62 × 1 950 = 120 900	+3 900
UX/UI Designer	16 × 1 750 = 28 000	16 × 1 750 = 28 000	0
Контент (демо-данные + переводы)	16 × 1 950 = 31 200	18 × 1 950 = 35 100	+3 900
QA Engineer	8 × 1 650 = 13 200	10 × 1 650 = 16 500	+3 300
DevOps	4 × 1 950 = 7 800	4 × 1 950 = 7 800	0
Итого разработка	241 200	252 300	+11 100
Непредвиденные расходы (10%)	24 100	25 200	+1 100
ИТОГО	265 000 руб	278 000 руб	+13 000 руб

3.4.3. Срок

Параметр	Было	Стало
Часы	120 ч	126 ч
Срок	3–4 недели	3–4 недели (без изменений)

3.4.4. Итоговый scope

Финальное решение, согласованное с партнёром:

Языки: EN + ZH + RU (арабский не требуется)
Компании: CNOOC (Китай) + Новатек (Россия)
Домен: greenlist.info
Хостинг: собственный VPS партнёра (SSH-доступ выделяется агенту)
Стоимость: 278 000 руб
Срок: 3–4 недели

4. Информационная архитектура

4.1. Sitemap

/ (редирект на /{lang}/ по Accept-Language или fallback EN)
├── /en/, /zh/, /ru/            — Landing page
│   ├── /{lang}/catalog         — Каталог компаний
│   ├── /{lang}/company/cnooc   — Экопрофиль CNOOC (Китай)
│   ├── /{lang}/company/novatek — Экопрофиль Новатек (Россия)
│   └── /{lang}/methodology     — Описание Green Stars

4.2. Глобальная навигация

Header (все страницы):

Logo GGP → /{lang}/
Navigation: Каталог | Методология
Language switcher (EN / 中文 / RU)
CTA: «Стать участником» (скролл к секции на Landing или mailto)

Footer (все страницы):

Копирайт «© 2026 Global Green Pages. Project by RBC MONAECO»
Источники данных (ссылки на IPE, HKEX, MOEX)
Контактный email
Ссылка на методологию

4.3. Языковой переключатель

Отображается текущий язык + флаг
Клик → выпадающий список 3 языков
Выбор меняет URL: /en/company/cnooc → /zh/company/cnooc
Сохраняет локаль в cookie (NEXT_LOCALE=zh)

5. Технологический стек

5.1. Frontend

Слой	Технология	Обоснование
Framework	Next.js (latest)	SSG, роутинг, SEO, React ecosystem
Язык	TypeScript	Type safety, DX
UI library	React (latest)	Стандарт индустрии
Styling	Tailwind CSS + shadcn/ui	Utility-first, готовые компоненты на Radix
Анимация	Framer Motion	Плавные переходы, hero-анимации
Icons	Lucide React	Универсальная иконочная библиотека

5.2. Визуализация

Библиотека	Для чего	Обоснование (Deep Research #2)
Nivo	ESG Radar Chart, Waste Donut	28+ типов графиков, SVG-rendering, accessible
Recharts	Carbon Stacked Bar, KPI sparklines	React-native API, 3.6M weekly downloads
Custom React	Green Stars Rating Card	Leaf-иконки + decimal score, без внешней библиотеки

Не используем: Chart.js (Canvas-only, плохо для accessibility), D3.js без обёртки (конфликтует с React).

5.3. Интернационализация

Компонент	Решение
i18n library	`next-intl`
Locale routing	`[locale]` segment в App Router
Translation format	JSON per locale (`messages/en.json`, `zh.json`, `ru.json`)
Pluralization	ICU MessageFormat (встроено в next-intl)
Date/number formatting	`Intl.DateTimeFormat`, `Intl.NumberFormat`

5.4. Шрифты

Язык	Шрифт	Источник
EN, RU	Inter (body) + Manrope (headlines)	Google Fonts
ZH	Noto Sans SC	Google Fonts

Шрифты подгружаются через next/font/google с subsets: ['latin', 'cyrillic'] + display: 'swap'.

5.5. Инструменты разработки

Инструмент	Назначение
pnpm	Package manager
ESLint + Prettier	Линтер + форматтер
Playwright	E2E тесты (smoke)
Vitest	Unit тесты (расчёт Green Stars)

6. Архитектура приложения

6.1. Принципы

Static Site Generation (SSG) — все страницы генерируются на сборке, никакого runtime-backend
JSON-данные — data/companies/*.json импортируются напрямую в компоненты
Клиентский расчёт рейтинга — формула Green Stars выполняется на клиенте (или на сборке)
3 локали × 4 страницы = 12 страниц в билде (плюс per-company)
Контейнеризация — Dockerfile для деплоя на VPS партнёра через SSH

6.2. Общая схема

flowchart TB
    subgraph Build["Сборка (Next.js SSG)"]
        Data["JSON-данные<br/>companies/*.json"]
        Messages["Переводы<br/>messages/*.json"]
        Rating["Расчёт Green Stars<br/>при сборке"]
        Pages["HTML-страницы<br/>для 3 локалей × N компаний"]
        Data --> Rating
        Rating --> Pages
        Messages --> Pages
    end

    subgraph CDN["Runtime (статика на CDN)"]
        HTML["Готовый HTML<br/>+ CSS + JS"]
    end

    Build --> HTML

    subgraph Client["Клиент"]
        Browser["Браузер"]
        Viz["Визуализации<br/>Nivo / Recharts<br/>hydration"]
    end

    HTML --> Browser
    Browser --> Viz

    style Build fill:#14532d,stroke:#22c55e
    style CDN fill:#172554,stroke:#3b82f6
    style Client fill:#78350f,stroke:#f59e0b

6.3. Структура репозитория

green-pages/
├── app/
│   ├── [locale]/
│   │   ├── layout.tsx                — Header/Footer + LanguageSwitcher
│   │   ├── page.tsx                  — Landing
│   │   ├── catalog/
│   │   │   └── page.tsx              — Каталог компаний
│   │   ├── company/
│   │   │   └── [slug]/
│   │   │       └── page.tsx          — Экопрофиль
│   │   └── methodology/
│   │       └── page.tsx              — Методология
│   ├── sitemap.ts                    — sitemap.xml
│   └── robots.ts                     — robots.txt
├── components/
│   ├── ui/                           — shadcn/ui компоненты
│   ├── rating/
│   │   ├── GreenStarsBadge.tsx
│   │   ├── RatingCard.tsx
│   │   └── PillarScores.tsx
│   ├── charts/
│   │   ├── ESGRadarChart.tsx         — Nivo radar
│   │   ├── CarbonStackedBar.tsx      — Recharts
│   │   └── KPICard.tsx               — custom
│   ├── company/
│   │   ├── CompanyCard.tsx           — для каталога
│   │   ├── CompanyHero.tsx
│   │   ├── ESGSnapshot.tsx
│   │   └── TransparencyFooter.tsx
│   └── layout/
│       ├── Navigation.tsx
│       ├── Footer.tsx
│       └── LanguageSwitcher.tsx
├── data/
│   ├── companies/
│   │   ├── cnooc.json
│   │   ├── novatek.json
│   │   └── ... (заглушки)
│   └── metrics/                      — временные ряды (опционально)
├── lib/
│   ├── rating.ts                     — расчёт Green Stars
│   └── i18n.ts                       — конфиг next-intl
├── messages/
│   ├── en.json
│   ├── zh.json
│   ├── ar.json
│   └── ru.json
├── public/
│   ├── logos/                        — логотипы компаний
│   └── icons/                        — favicon, OG
├── tests/
│   ├── unit/
│   │   └── rating.test.ts
│   └── e2e/
│       └── smoke.spec.ts
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
├── package.json
├── Dockerfile
└── README.md

6.4. Data flow

На сборке: data/companies/cnooc.json → lib/rating.ts рассчитывает total score → результат встраивается в страницу
Страница app/[locale]/company/[slug]/page.tsx импортирует JSON через generateStaticParams
Переводы подхватываются через next-intl при рендере
Hydration на клиенте: интерактив только в графиках Nivo/Recharts (hover, tooltip)

7. Страницы и маршруты

7.1. Landing (`/{locale}/`)

Цель: Объяснить концепцию GGP и привлечь компании к участию.

Секции:

#	Секция	Содержание
1	Hero	Логотип GGP, заголовок «Цифровая витрина экологической ответственности», подзаголовок, CTA
2	Value proposition	3 карточки: для компаний / для партнёров / для общества
3	Как это работает	3 шага: регистрация → загрузка данных → рейтинг
4	Методика Green Stars (preview)	Краткое описание + ссылка на полную страницу
5	Пример экопрофиля	Превью CNOOC / НОВАТЭК с CTA «Посмотреть каталог»
6	CTA	Стать участником / Контакт

Acceptance criteria: см. §14.1.

7.2. Каталог компаний (`/{locale}/catalog`)

Цель: Дать партнёрам увидеть все компании, отсортировать по рейтингу.

Контент:

Заголовок: «Компании с экопредставительствами»
Сетка CompanyCard (2–3 колонки на desktop, 1 на mobile)
Каждая карточка: logo, name, sector, Green Stars rating, country badge
Клик → /{locale}/company/{slug}

Количество карточек в прототипе: 5–10 (2 «рабочих» — CNOOC (Китай), НОВАТЭК (Россия); 3–8 заглушек — смесь китайских и российских компаний: Sinopec, PetroChina, PipeChina, ENN Energy, Газпром, Лукойл, Роснефть)

Acceptance criteria: см. §14.2.

7.3. Экопрофиль компании (`/{locale}/company/{slug}`)

Цель: Продемонстрировать полное цифровое экопредставительство компании.

Секции (из КП §12.2):

#	Секция	Содержание
1	Hero	Logo, name, Green Stars (large), country, sector, industry percentile
2	ESG snapshot	4–6 KPI cards: GHG intensity, methane, water, TRIR, renewable %, + sparklines
3	Environmental detail	Carbon Stacked Bar (Scope 1/2/3, 2020–2025) + ESG Radar Chart (7 метрик)
4	Social & Governance	Progress bars: safety, diversity, board ESG oversight
5	Timeline	Горизонтальная шкала: ключевые ESG-события компании
6	Transparency footer	Источники, дата обновления, методология, disclaimer

В «Концепте» делаем: 2 полных профиля — CNOOC (Китай) и Новатек (Россия). Остальные ссылки из каталога ведут на страницу-заглушку «Профиль в разработке».

Acceptance criteria: см. §14.3.

7.4. Методология (`/{locale}/methodology`)

Цель: Объяснить, как считается Green Stars.

Секции:

#	Секция	Содержание
1	Зачем нужен рейтинг	Контекст: ESG-пространство, почему нужен понятный стандарт
2	7 метрик	Таблица с описанием каждой метрики
3	Формула	Визуальное представление формулы взвешивания
4	Пороги звёзд	5 уровней: Laggard → Exemplary
5	Safeguards	Improvement bonus, min threshold, controversy override
6	Источники данных	На основе чего считаем (CDP, GRI 11, IPE Blue Map)

Acceptance criteria: см. §14.4.

8. Компоненты

8.1. `GreenStarsBadge`

Props:

{
  score: number;          // 0-20 (или 1-5 в звёздах)
  size?: 'sm' | 'md' | 'lg';
  showDecimal?: boolean;  // показать "3.2" рядом с листиками
}

Визуал: 5 слотов для leaf-иконок, заливка пропорционально score. Пустой leaf — outline, полный — filled, частичный — градиент.

8.2. `RatingCard`

Props:

{
  companyName: string;
  score: number;
  level: 'laggard' | 'emerging' | 'competent' | 'leader' | 'exemplary';
  updatedAt: string;
  methodologyUrl: string;
}

Визуал: Большая карточка: GreenStarsBadge (large) + decimal score + level label + «Updated [date]» + «Methodology →» link.

8.3. `ESGRadarChart`

Библиотека: Nivo.

Props:

{
  metrics: {
    ghg: number;         // 0-20
    methane: number;
    transition: number;
    water: number;
    safety: number;
    governance: number;
    community: number;
  };
  companyName: string;
}

Визуал: Radar с 7 осями, заливка зелёным с прозрачностью, hover на точку → tooltip с названием метрики и описанием.

8.4. `CarbonStackedBar`

Библиотека: Recharts.

Props:

{
  data: Array<{
    year: number;
    scope1: number;
    scope2: number;
    scope3: number;
  }>;
}

Визуал: Stacked bar chart, 5 лет истории, цвета для Scope 1/2/3, легенда, tooltip, Y-axis начинается с 0 (антигринвошинг).

8.5. `KPICard`

Props:

{
  label: string;
  value: number;
  unit: string;
  trend: 'up' | 'down' | 'flat';
  change: number;        // % изменение за год
  sparkline?: number[];  // 5 точек истории
}

Визуал: Карточка с большим числом, единицей, стрелкой тренда (цвет зависит от метрики — снижение выбросов = зелёный), мини-spark line.

8.6. `CompanyCard`

Props:

{
  id: string;
  name: string;
  logoUrl: string;
  sector: string;
  country: string;
  score: number;
  hasFullProfile: boolean;  // false для заглушек
}

Визуал: Карточка с logo, name, sector tag, country badge, GreenStarsBadge. Заглушки — слегка затемнённые + badge «Профиль в разработке».

8.7. `PillarScores`

Визуал: 3 колонки — Environmental / Social / Governance — с прогресс-барами, показывает агрегированные score по каждому pillar.

8.8. `LanguageSwitcher`

Props: currentLocale: 'en' | 'zh' | 'ru'

Визуал: Dropdown с текущим языком (флаг + код). Выбор → навигация на ту же страницу в другой локали.

9. Модель данных

9.1. Company JSON schema

Файл: data/companies/{slug}.json

{
  "id": "novatek",
  "slug": "novatek",
  "name": {
    "en": "Novatek",
    "zh": "诺瓦泰克",
    "ru": "НОВАТЭК"
  },
  "sector": "oil_and_gas",
  "country": "RU",
  "listings": ["MOEX"],
  "logoUrl": "/logos/novatek.png",
  "coordinates": { "lat": 55.7558, "lng": 37.6173 },
  "description": {
    "en": "Novatek is Russia's largest independent natural gas producer...",
    "zh": "...",
    "ru": "НОВАТЭК — крупнейший независимый производитель природного газа в России..."
  },
  "greenStars": {
    "metrics": {
      "ghg": 12,
      "methane": 14,
      "transition": 9,
      "water": 13,
      "safety": 14,
      "governance": 11,
      "community": 10
    },
    "improvementBonus": 0.5,
    "controversyCap": null,
    "updatedAt": "2026-03-15",
    "dataSources": [
      { "name": "Novatek Sustainability Report 2024", "url": "https://novatek.ru/ru/investors/esg/" },
      { "name": "MOEX Disclosure", "url": "https://disclosure.ru/" }
    ]
  },
  "kpis": [
    {
      "id": "ghg_intensity",
      "label": "GHG Emissions Intensity",
      "value": 22.5,
      "unit": "kg CO₂e/BOE",
      "trend": "down",
      "change": -3.2,
      "history": [25.8, 24.9, 24.1, 23.2, 22.5]
    },
    {
      "id": "methane_intensity",
      "label": "Methane Intensity",
      "value": 0.18,
      "unit": "% of gas produced",
      "trend": "down",
      "change": -10.0,
      "history": [0.30, 0.26, 0.22, 0.20, 0.18]
    }
  ],
  "carbonEmissions": [
    { "year": 2021, "scope1": 150, "scope2": 45, "scope3": 810 },
    { "year": 2022, "scope1": 142, "scope2": 42, "scope3": 800 },
    { "year": 2023, "scope1": 138, "scope2": 40, "scope3": 790 },
    { "year": 2024, "scope1": 132, "scope2": 38, "scope3": 780 },
    { "year": 2025, "scope1": 128, "scope2": 36, "scope3": 770 }
  ],
  "milestones": [
    { "year": 2021, "event": { "en": "Joined industry methane alliance", "zh": "加入...", "ru": "Присоединение к отраслевому альянсу по метану" } },
    { "year": 2023, "event": { "en": "SBTi commitment", "zh": "...", "ru": "Присоединение к SBTi" } }
  ],
  "hasFullProfile": true
}

9.2. Заглушки компаний

Для компаний-заглушек в каталоге достаточно упрощённой схемы:

{
  "id": "sinopec",
  "slug": "sinopec",
  "name": { "en": "Sinopec", "zh": "中国石油化工...", "ru": "Синопек" },
  "sector": "oil_and_gas",
  "country": "CN",
  "logoUrl": "/logos/sinopec.png",
  "greenStars": { "total": 3.4, "level": "competent" },
  "hasFullProfile": false
}

9.3. TypeScript types

Файл lib/types.ts:

export type Locale = 'en' | 'zh' | 'ru';

export type LocalizedString = Record<Locale, string>;

export type RatingLevel = 'laggard' | 'emerging' | 'competent' | 'leader' | 'exemplary';

export interface Metrics {
  ghg: number;
  methane: number;
  transition: number;
  water: number;
  safety: number;
  governance: number;
  community: number;
}

export interface Company {
  id: string;
  slug: string;
  name: LocalizedString;
  sector: string;
  country: string;
  listings?: string[];
  logoUrl: string;
  coordinates?: { lat: number; lng: number };
  description?: LocalizedString;
  greenStars: {
    metrics?: Metrics;
    total?: number;
    level?: RatingLevel;
    improvementBonus?: number;
    controversyCap?: number | null;
    updatedAt?: string;
    dataSources?: Array<{ name: string; url: string }>;
  };
  kpis?: KPI[];
  carbonEmissions?: Array<{ year: number; scope1: number; scope2: number; scope3: number }>;
  milestones?: Array<{ year: number; event: LocalizedString }>;
  hasFullProfile: boolean;
}

export interface KPI {
  id: string;
  label: string;
  value: number;
  unit: string;
  trend: 'up' | 'down' | 'flat';
  change: number;
  history: number[];
}

10. Методика Green Stars

10.1. Формула

TotalScore = 0.20×M1 + 0.15×M2 + 0.20×M3 + 0.10×M4 + 0.15×M5 + 0.10×M6 + 0.10×M7

где каждая метрика — 0–20 баллов, итоговый score — 0–20.

10.2. Метрики

#	Метрика	Вес	0–4 (Insufficient)	5–8 (Emerging)	9–12 (Competent)	13–16 (Leader)	17–20 (Leading)
M1	GHG intensity	0.20	Нет раскрытия; >40 kg/BOE	Раскрытие без трендов	Тренды 2–3 года, 20–30 kg/BOE	Снижение >3%/год, 10–20 kg/BOE	<10 kg/BOE; >5%/год снижение
M2	Methane	0.15	Нет программы	Ad-hoc измерения	OGMP 2.0 Level 2	OGMP 2.0 Level 4	<0.05%; continuous monitoring
M3	Transition	0.20	Нет плана	Цели без SBTi	SBTi committed	SBTi validated near-term	SBTi net-zero; >20% low-carbon CapEx
M4	Water	0.10	Нет учёта	Базовый учёт	Цели recycling	50%+ recycling	Best-practice; 0 spills
M5	Safety	0.15	TRIR >2.0	TRIR 1.0–2.0	TRIR 0.5–1.0; ISO 45001	TRIR 0.2–0.5	TRIR <0.2; 0 fatalities 5+ лет
M6	Governance	0.10	Нет ESG governance	Board awareness	Board ESG committee	ESG KPI в exec comp	ESG-привязка compensation + transparency
M7	Community	0.10	Нет программ	Филантропия	Community engagement	FPIC + supply chain policy	Comprehensive FPIC + audits

10.3. Пороги звёзд

Рейтинг	Баллы	Уровень
🌿	0 – 4.99	Laggard
🌿🌿	5 – 8.99	Emerging
🌿🌿🌿	9 – 12.99	Competent
🌿🌿🌿🌿	13 – 16.99	Leader
🌿🌿🌿🌿🌿	17 – 20	Exemplary

10.4. Safeguards

Improvement bonus: +0.5 за прирост ≥2 балла год-к-году
Min threshold: если хотя бы одна метрика = 0, максимум = 2 звезды
Controversy override: крупные инциденты (значительные разливы, смертельные случаи, коррупция) — cap на текущий год

10.5. Алгоритм (псевдокод для `lib/rating.ts`)

export function calculateGreenStars(company: Company): {
  total: number;
  level: RatingLevel;
  stars: number;
} {
  const { metrics, improvementBonus = 0, controversyCap } = company.greenStars;
  if (!metrics) return { total: 0, level: 'laggard', stars: 0 };

  const weights = {
    ghg: 0.20, methane: 0.15, transition: 0.20,
    water: 0.10, safety: 0.15, governance: 0.10, community: 0.10,
  };

  // 1. Weighted sum
  let total =
    weights.ghg * metrics.ghg +
    weights.methane * metrics.methane +
    weights.transition * metrics.transition +
    weights.water * metrics.water +
    weights.safety * metrics.safety +
    weights.governance * metrics.governance +
    weights.community * metrics.community;

  // 2. Improvement bonus
  total += improvementBonus;

  // 3. Min threshold safeguard
  const hasZeroMetric = Object.values(metrics).some((v) => v === 0);
  if (hasZeroMetric) total = Math.min(total, 8.99);

  // 4. Controversy cap
  if (controversyCap !== null && controversyCap !== undefined) {
    total = Math.min(total, controversyCap);
  }

  // 5. Clamp to [0, 20]
  total = Math.max(0, Math.min(20, total));

  // 6. Determine level
  const level: RatingLevel =
    total >= 17 ? 'exemplary' :
    total >= 13 ? 'leader' :
    total >= 9 ? 'competent' :
    total >= 5 ? 'emerging' : 'laggard';

  // 7. Stars (1-5)
  const stars = total >= 17 ? 5 : total >= 13 ? 4 : total >= 9 ? 3 : total >= 5 ? 2 : 1;

  return { total: Math.round(total * 10) / 10, level, stars };
}

10.6. Unit-тесты

Файл tests/unit/rating.test.ts — минимум 5 тест-кейсов:

Exemplary company (все метрики 18+)
Leader company
Competent company (пример CNOOC)
Emerging company
Laggard (все нули)
Min threshold: одна метрика = 0 → max 8.99
Controversy cap: override работает
Improvement bonus добавляется

11. Дизайн-система и Stitch-промпты

11.1. Подход

Дизайн создаётся через Google Stitch (skill stitch-design). Исполнитель получает 4 генерации HTML-макетов, извлекает из них:

цветовую палитру
типографику (font-families, sizes)
паттерны компонентов (cards, buttons)
микроанимации

и переносит в Tailwind config + shadcn компоненты.

11.2. Design tokens (предварительные)

Будут финализированы после Stitch-генерации.

Токен	Значение (пример)
`--color-primary`	Emerald `#10b981` (leaf green)
`--color-primary-dark`	`#047857`
`--color-bg`	`#fafafa`
`--color-surface`	`#ffffff`
`--color-text`	`#0a0a0a`
`--color-muted`	`#737373`
`--radius-md`	`0.5rem`
`--radius-lg`	`1rem`
`--font-heading`	Manrope
`--font-body`	Inter

11.3. Stitch-промпты (English)

Финальный каталог промптов: greenlist/docs/stitch-prompts.md (в репозитории проекта).

Промпты написаны по правилам skill stitch-design: коротко, intent-driven, с максимальной творческой свободой для Stitch. Каждый промпт описывает что видит пользователь и зачем, без предписания layout или стилей.

Структура:

Step 0 — Design Brief (создаётся один раз при инициализации проекта в Stitch): название, палитра, типографика, общий стиль. Stitch автоматически создаёт Design System и применяет ко всем последующим экранам.
Step 1 — Landing page
Step 2 — Company catalog
Step 3 — Company eco-profile (пример CNOOC)
Step 4 — Methodology page

Процесс для партнёра:

Открыть https://stitch.withgoogle.com
Создать новый проект, вставить Design Brief из greenlist/docs/stitch-prompts.md
В этом же проекте последовательно запустить 4 screen-промпта
Прислать агенту ссылку на Stitch-проект — агент выкачает HTML и screenshot каждого экрана через MCP (get_screen), извлечёт design tokens для tailwind.config.ts и адаптирует layout в Next.js компоненты

11.4. Применение Stitch-результата

После получения 4 HTML-макетов от Stitch:

Выделить design tokens → обновить tailwind.config.ts
Определить shadcn-компоненты для базы
Скопировать паттерны layout в компоненты components/
Сохранить скриншоты в docs/design/stitch-exports/ для reference

12. Интернационализация (i18n)

12.1. Локали

Code	Язык	Direction	Font
`en`	English	LTR	Inter / Manrope
`zh`	中文 (Simplified)	LTR	Noto Sans SC
`ru`	Русский	LTR	Inter

12.2. Структура переводов

messages/en.json:

{
  "nav": {
    "catalog": "Catalog",
    "methodology": "Methodology",
    "cta": "Become a member"
  },
  "landing": {
    "hero": {
      "title": "Verified eco-responsibility for oil & gas",
      "subtitle": "Global Green Pages — international platform of corporate eco-representations"
    },
    "valueProps": {
      "forCompanies": { "title": "For companies", "body": "..." },
      "forPartners": { "title": "For partners", "body": "..." },
      "forPlanet": { "title": "For the planet", "body": "..." }
    }
  },
  "rating": {
    "levels": {
      "laggard": "Laggard",
      "emerging": "Emerging",
      "competent": "Competent",
      "leader": "Leader",
      "exemplary": "Exemplary"
    },
    "updatedOn": "Updated on {date}",
    "basedOn": "Based on {count, plural, one {# verified metric} other {# verified metrics}}"
  },
  "methodology": {
    "title": "Methodology",
    "metrics": {
      "ghg": "GHG Intensity",
      "methane": "Methane",
      "transition": "Energy Transition",
      "water": "Water",
      "safety": "Safety",
      "governance": "Governance",
      "community": "Community"
    }
  }
}

Аналогично для zh.json, ru.json.

12.3. Конфиг next-intl

lib/i18n.ts:

import { getRequestConfig } from 'next-intl/server';

export const locales = ['en', 'zh', 'ru'] as const;
export const defaultLocale = 'en';

export default getRequestConfig(async ({ locale }) => ({
  messages: (await import(`../messages/${locale}.json`)).default,
}));

Middleware (middleware.ts) — редирект с / на /{lang}/ по Accept-Language header с fallback на en.

12.4. Автоопределение языка

Читаем Accept-Language header
Если браузер предпочитает ZH или RU — редирект на соответствующую локаль
Иначе — на en
Сохраняем выбор в NEXT_LOCALE cookie (1 год)

13. Контент и демо-данные

13.1. Список компаний для прототипа

Полные профили (2) — демонстрация международности платформы:

#	Компания	Slug	Страна	Причина выбора
1	CNOOC Limited	`cnooc`	Китай	Offshore E&P, международные операции, HKEX + SSE листинг, A-grade disclosure
2	НОВАТЭК	`novatek`	Россия	Крупнейший независимый производитель газа в РФ, MOEX-листинг, публичный ESG-отчёт

Карточки-заглушки (3–8) для каталога — смесь китайских и международных компаний для демонстрации глобального охвата:

#	Компания	Slug	Страна
3	Sinopec Corp.	`sinopec`	Китай
4	PetroChina	`petrochina`	Китай
5	PipeChina	`pipechina`	Китай
6	ENN Energy	`enn`	Китай
7	Газпром	`gazprom`	Россия
8	Лукойл	`lukoil`	Россия
9	Роснефть	`rosneft`	Россия
10	China Resources Gas	`china-resources-gas`	Китай

13.2. Источники данных

Источник	URL	Что берём
HKEX ESG Reports	hkexnews.hk	Scope 1/2, methane, water, TRIR, governance (для CNOOC)
CNOOC ESG Report 2024/2025	cnoocltd.com/en	Полные метрики
НОВАТЭК ESG Report 2024/2025	novatek.ru/ru/investors/esg	Полные метрики
MOEX / Interfax	disclosure.ru	Российская ESG-отчётность
IPE Blue Map	wwwen.ipe.org.cn	Пollution records (для китайских компаний)
CDP Public Data	data.cdp.net	Climate disclosure scores
GRI 11 benchmarks	globalreporting.org	Reference values для сравнения

13.3. Процесс наполнения

Неделя 1 (контент): Выгрузить ESG-отчёты CNOOC + НОВАТЭК (на EN — оба их публикуют). Извлечь 7 метрик для Green Stars + 5-летнюю историю для carbon emissions + 4–6 KPI.
Неделя 1–2 (локализация):
- ZH-контент: для CNOOC — из китайской версии отчёта (cnoocltd.com/sc); для НОВАТЭК — машинный перевод + ручная правка
- RU-контент: для НОВАТЭК — из русской версии отчёта (novatek.ru); для CNOOC — машинный перевод + ручная правка
- EN-контент: из английских версий обоих отчётов
Неделя 3 (заглушки): Для 3–8 карточек каталога достаточно: name, logo, sector, country, score (рассчитанный на основе открытых данных).

13.4. Контент-файлы

data/companies/cnooc.json — полные данные (Китай)
data/companies/novatek.json — полные данные (Россия)
data/companies/{slug}.json — упрощённые (для заглушек)
public/logos/{slug}.png или .svg — логотипы компаний (высокое разрешение)

14. Критерии приёмки

14.1. К1. Landing page

Hero с заголовком и CTA отображается на всех 3 языках
3 value proposition карточки с переведённым содержимым
Секция «Как это работает» — 3 шага
Превью экопрофиля ведёт на CNOOC или НОВАТЭК
CTA «Стать участником» работает (скролл или mailto)
На мобильных секции стекаются вертикально, читаемы без зума

14.2. К2. Каталог

5–10 карточек отображаются в сетке
Каждая карточка: logo, name, sector, country, Green Stars
По умолчанию сортировка по рейтингу (лидеры вверху)
Клик на полную карточку → открывает /{locale}/company/{slug}
Клик на заглушку → страница «Профиль в разработке»
Responsive: 3 колонки на desktop, 2 на tablet, 1 на mobile

14.3. К3. Экопрофиль (CNOOC + НОВАТЭК)

Hero: logo, name, Green Stars (large), country, sector
4–6 KPI cards с sparklines и трендами
ESG Radar Chart (Nivo) показывает 7 метрик
Carbon Stacked Bar (Recharts) — 5 лет Scope 1/2/3
Milestones timeline (горизонтальный)
Transparency footer: источники, дата, методология, disclaimer
Переводы корректные на всех 3 языках: ZH для CNOOC — из оригинального отчёта, RU для НОВАТЭК — из оригинального отчёта

14.4. К4. Страница методологии

6 секций: intro, 7 метрик, формула, пороги, safeguards, источники
Таблица метрик показывает name, description, weight
Визуализация формулы (формула + пример расчёта)
5 уровней звёзд с leaf-иконками
Back-to-top button
CTA на каталог внизу

14.5. К5. Green Stars рейтинг

Функция calculateGreenStars() реализована
Unit-тесты проходят (Vitest): 8+ тест-кейсов
Badge отображает leaf-иконки пропорционально score
Decimal score показывается рядом с иконками (опциональный пропс)
Min threshold работает (метрика = 0 → max 2 звезды)
Improvement bonus применяется
Controversy cap применяется

14.6. К6. Визуализации

Radar Chart (Nivo) рендерится, tooltip работает
Carbon Stacked Bar (Recharts) — Y-axis от 0, легенда, tooltip
KPI Card — sparkline, стрелка тренда (зелёный/красный), проценты
Accessibility: все графики имеют альтернативное представление (таблица в <details>)

14.7. К7. Демо-данные

data/companies/cnooc.json с полными данными на 3 языках
data/companies/novatek.json с полными данными на 3 языках
3+ заглушки с упрощёнными данными
Все источники данных корректны и верифицируемы

14.8. К8. i18n

3 файла переводов: en.json, zh.json, ru.json
Все ключи покрыты на всех языках (нет MISSING)
Language switcher переключает без перезагрузки и сохраняет cookie
URL отражает локаль (/en/catalog, /zh/catalog, /ru/catalog)
Автоопределение языка работает (Accept-Language → redirect)
Fallback на EN если неизвестная локаль

15. Нефункциональные требования

#	Параметр	Порог
N1	LCP (Largest Contentful Paint)	≤ 2.5 с на 4G
N2	FID (First Input Delay)	≤ 100 мс
N3	CLS (Cumulative Layout Shift)	≤ 0.1
N4	Lighthouse Performance	≥ 90
N5	Lighthouse Accessibility	≥ 95
N6	Lighthouse Best Practices	≥ 95
N7	Lighthouse SEO	≥ 95
N8	JS bundle (initial load)	≤ 200 KB gzip
N9	WCAG compliance	AA уровень
N10	Покрытие unit-тестами (rating)	≥ 80%
N11	Поддержка браузеров	Chrome/Edge/Firefox/Safari — последние 2 мажорные версии
N12	SEO	meta-tags, OG-tags, sitemap.xml, robots.txt на всех локалях
N13	Accessibility	keyboard navigation, focus visible, alt-text для логотипов

16. План работы по фазам

gantt
    title Global Green Pages — Концепт
    dateFormat YYYY-MM-DD
    excludes weekends

    section Фаза 0 · Подготовка
    Решение открытых вопросов (В1-В6)      :milestone, m0, 2026-04-06, 0d
    Stitch-промпты 1-4 (партнёр)           :a0, 2026-04-06, 3d
    Создание GitHub-репозитория (партнёр)  :a1, 2026-04-06, 1d

    section Фаза 1 · Фундамент (Неделя 1)
    Next.js scaffolding + TS + Tailwind    :b1, 2026-04-07, 2d
    i18n конфиг (3 языка)                  :b2, after b1, 1d
    Design tokens из Stitch                :b3, after a0, 1d
    Landing page                           :b4, after b3, 2d
    ДЕМО #1 (партнёр)                      :milestone, m1, 2026-04-10, 0d

    section Фаза 2 · Компоненты (Неделя 2)
    GreenStarsBadge + RatingCard + тесты   :c1, 2026-04-13, 2d
    Каталог компаний                       :c2, after c1, 2d
    Экопрофиль scaffold                    :c3, after c2, 3d
    ДЕМО #2 (партнёр)                      :milestone, m2, 2026-04-17, 0d

    section Фаза 3 · Данные и графики (Неделя 3)
    lib/rating.ts + unit-тесты             :d1, 2026-04-20, 2d
    ESG Radar + Carbon Bar + KPI Cards     :d2, after d1, 3d
    Страница методологии                   :d3, after d2, 1d
    Демо-данные CNOOC + НОВАТЭК (EN)       :d4, 2026-04-22, 3d
    ДЕМО #3 (партнёр)                      :milestone, m3, 2026-04-24, 0d

    section Фаза 4 · Языки и релиз (Неделя 4)
    ZH-контент (CNOOC, из отчёта)          :e1, 2026-04-27, 1d
    RU-контент (НОВАТЭК, из отчёта)        :e2, after e1, 1d
    Перекрёстные переводы (CNOOC→RU, НОВАТЭК→ZH) :e3, after e2, 1d
    E2E + Lighthouse                       :e4, after e3, 2d
    Финальный деплой на greenlist.info     :e5, after e4, 1d
    ФИНАЛЬНАЯ ПРИЁМКА (партнёр)            :milestone, m4, 2026-05-01, 0d

Фаза 0 — Подготовка

Цель: Снять блокеры перед стартом разработки.

[ПАРТНЁР] Все ключевые решения приняты (см. §3.4 и §20): 3 языка, CNOOC + НОВАТЭК, домен greenlist.info, VPS оплачен.

[ПАРТНЁР] Создать GitHub-репозиторий:

Имя: green-pages (или альтернатива на выбор)
Приватный
Дать агенту доступ для push

[ПАРТНЁР] Запустить 4 Stitch-промпта (из § 11.3) — по одному через skill stitch-design и прислать результаты:

HTML-файлы или ссылки на Stitch-проект
Скриншоты
Выделенные design tokens (palette, fonts) — если Stitch их покажет отдельно

[АГЕНТ] Ожидает: зелёный свет от партнёра → переход к Фазе 1.

Фаза 1 — Фундамент (Неделя 1)

Цель: Рабочий скелет: Next.js, 3 локали, Landing page.

[АГЕНТ] Выполняет:

pnpm create next-app@latest + базовый setup (TS, Tailwind, App Router)
Установить зависимости: next-intl, @nivo/radar, recharts, framer-motion, lucide-react, shadcn CLI
Настроить next-intl с 3 локалями (см. § 12.3)
Middleware для автоопределения локали + cookie
Структура папок (см. § 6.3)
Извлечь design tokens из Stitch-HTML → tailwind.config.ts
Создать базовые shadcn компоненты: button, card, navigation
Реализовать Layout: Header + Footer + LanguageSwitcher
Landing page (все 6 секций из § 7.1) — пока только EN, остальные локали — MISSING placeholder
Базовая SEO (metadata, robots.txt, sitemap.xml)

[АГЕНТ] Проверяет:

pnpm build проходит без ошибок
pnpm dev показывает Landing на http://localhost:3000/en/
Language switcher работает (переключает URL + cookie)
Lighthouse (Performance, Accessibility) ≥ 85

[ПАРТНЁР] ДЕМО #1 (конец недели 1):

Открывает staging URL
Проверяет: Landing выглядит похоже на Stitch-макет, переключатель языков работает
Утверждает direction или запрашивает правки

Фаза 2 — Компоненты и каркас (Неделя 2)

Цель: Все ключевые компоненты + каркас каталога и экопрофиля.

[АГЕНТ] Выполняет:

GreenStarsBadge (leaf-иконки, 5 слотов, заливка пропорционально score)
RatingCard (badge + decimal + level + "updated on" + methodology link)
PillarScores (Environmental / Social / Governance progress bars)
CompanyCard (для каталога)
/{locale}/catalog страница (сетка 10 карточек, 3 колонки desktop / 1 mobile)
Placeholder JSON-данные для 10 компаний (минимум: logo, name, sector, country, score)
/{locale}/company/[slug]/page.tsx scaffolding с generateStaticParams
Заглушки секций экопрофиля (Hero + Transparency footer готовы, остальные — MISSING)
Placeholder-страница "Профиль в разработке" для компаний без полных данных

[АГЕНТ] Проверяет:

Каталог открывается, клик ведёт на /company/cnooc (404 — ок, т.к. нет данных)
Компоненты работают во всех 3 языковых URL
Mobile layout не ломается

[ПАРТНЁР] ДЕМО #2 (конец недели 2):

Проверяет каталог на всех 3 языках
Смотрит каркас экопрофилей CNOOC и НОВАТЭК
Утверждает набор компаний в каталоге
[ПАРТНЁР] Присылает логотипы 10 компаний (PNG/SVG ≥ 256×256 на прозрачном фоне) — нужны для Фазы 3

Фаза 3 — Данные, графики, методология (Неделя 3)

Цель: Живые экопрофили CNOOC + НОВАТЭК с графиками и рабочим рейтингом.

[АГЕНТ] Выполняет:

lib/rating.ts — реализация calculateGreenStars() (см. § 10.5)
Unit-тесты в Vitest — 8+ тест-кейсов
ESGRadarChart (Nivo) с 7 осями
CarbonStackedBar (Recharts) — 5 лет Scope 1/2/3
KPICard со sparkline (Recharts)
Страница /{locale}/methodology (все 6 секций из § 7.4)
Полные JSON-данные: data/companies/cnooc.json и data/companies/novatek.json (на EN)
- Метрики из HKEX ESG Reports 2024/2025
- 5 лет carbon emissions
- 4–6 KPI с историей
- Milestones
- Sources
Собрать экопрофиль полностью: Hero + ESG Snapshot + Environmental Detail + Social&Governance + Timeline + Footer
Green Stars rating рассчитывается при сборке из metrics в JSON

[АГЕНТ] Проверяет:

pnpm test проходит
CNOOC открывается, все графики рендерятся
НОВАТЭК открывается, все графики рендерятся
Методология отображается корректно
Accessibility: графики имеют <details> с табличными данными

[ПАРТНЁР] В ПРОЦЕССЕ недели 3:

[ПАРТНЁР] Подтверждает ESG-данные для CNOOC и НОВАТЭК: агент присылает извлечённые цифры, партнёр подтверждает или правит (15–20 минут работы партнёра)

[ПАРТНЁР] ДЕМО #3 (конец недели 3):

Полный обзор экопрофилей на EN
Проверка методологии
КЛЮЧЕВОЙ ДЕМО — это "Концепт" в полном виде на EN. Дальше только перевод.

Фаза 4 — Языки и финальный деплой (Неделя 4)

Цель: 3 локали готовы, задеплоено на greenlist.info.

[АГЕНТ] Выполняет:

Перевести UI-строки на ZH и RU (через ChatGPT/DeepL + словари)
ZH-контент для CNOOC: взять из китайской версии ESG-отчёта (cnoocltd.com/sc)
RU-контент для НОВАТЭК: взять из русской версии ESG-отчёта (novatek.ru)
Перекрёстные переводы: CNOOC → RU (машинный + правка), НОВАТЭК → ZH (машинный + правка)
Проверить все страницы в каждой локали
Playwright smoke-тесты: 3 локали × 4 страницы = 12 тест-кейсов
Lighthouse optimization: убрать unused CSS, оптимизировать шрифты, preload critical resources
Meta-tags, OG-tags, sitemap.xml на всех локалях
Docker image + деплой на VPS greenlist.info (Caddy + reverse proxy)
Настроить DNS (партнёр) + проверить SSL через Let's Encrypt

[ПАРТНЁР] В ПРОЦЕССЕ недели 4:

[ПАРТНЁР] Настроить DNS: A-запись greenlist.info → 66.151.32.222 и www.greenlist.info → 66.151.32.222
[ПАРТНЁР] Просмотр ZH-контента CNOOC — носитель языка или MONAECO-команда верифицирует
[ПАРТНЁР] Просмотр RU-контента НОВАТЭК — это уже официальный контент компании

[ПАРТНЁР] ФИНАЛЬНАЯ ПРИЁМКА:

Открытие https://greenlist.info на 3 языках
Прохождение чеклиста § 14 (Критерии приёмки)
Подписание акта приёмки
Оплата финального транша

17. Задачи партнёра (сводный чеклист)

Список всех действий, которые требуются от партнёра, в порядке появления:

До старта (Фаза 0)

✅ Решения по scope зафиксированы — 3 языка, 2 компании, домен greenlist.info, VPS оплачен
✅ GitHub-репозиторий создан — github.com/maslennikov-ig/greenlist (приватный)
✅ SSH-ключ — добавлен на VPS, доступ проверен
Запустить 4 Stitch-промпта (§ 11.3), прислать HTML/скриншоты:
- Landing page
- Catalog
- Company eco-profile
- Methodology page
Ответить на остающиеся вопросы § 20.2 (В6–В9): верификатор ZH, email, логотип
Настроить DNS для greenlist.info: A-запись → 66.151.32.222 (можно параллельно с разработкой, пропагация до 48 часов)

Неделя 1 (Фаза 1)

Принять демо #1 — Landing page на EN
Подтвердить direction или запросить правки дизайна

Неделя 2 (Фаза 2)

Принять демо #2 — Каталог + scaffold экопрофиля
Прислать 10 логотипов компаний (PNG/SVG, прозрачный фон)
Утвердить список компаний для каталога (CNOOC, НОВАТЭК — полные; Sinopec, PetroChina, Газпром, Лукойл, Роснефть и др. — заглушки)

Неделя 3 (Фаза 3)

Подтвердить ESG-данные для CNOOC и НОВАТЭК (агент присылает JSON → партнёр проверяет)
Принять демо #3 — Полные экопрофили на EN

Неделя 4 (Фаза 4)

Подтвердить, что DNS настроен и пропагация завершилась (greenlist.info → 66.151.32.222)
Верифицировать ZH-контент CNOOC (носитель языка или MONAECO-команда)
Опционально: просмотреть RU-контент (для НОВАТЭК — из официального отчёта, правка минимальна)
Финальная приёмка — открыть https://greenlist.info, пройти чеклист § 14
Подписать акт, оплатить финальный транш

После запуска

Передать агенту обратную связь от китайских партнёров (для пакета «Витрина»)
Решить по продакшн-домену (в ≥ Неделе 3)

18. Деплой и инфраструктура

18.1. Целевая инфраструктура

Параметр	Значение
Домен	greenlist.info
VPS	`66.151.32.222` (Ubuntu 24.04.4 LTS, 2 vCPU, 3.8 GB RAM, 58 GB SSD)
SSH-доступ	`ssh greenlist` (alias в `~/.ssh/config`), ключ `~/.ssh/greenlist_deploy`
Web server	Caddy 2.11 (автоматический SSL через Let's Encrypt)
Container runtime	Docker 29.4
Firewall	ufw (порты 22, 80, 443)

Подробная заметка по серверу: docs/specs/server-access.md (приватная, не в публичном репо).

18.2. Архитектура деплоя

flowchart LR
    Dev["Локальная разработка<br/>code/greenlist"] -->|git push| GH["GitHub<br/>greenlist repo"]
    GH -->|GitHub Actions| Build["Docker build<br/>green-pages image"]
    Build -->|SSH deploy| VPS["VPS greenlist.info<br/>66.151.32.222"]
    VPS --> Caddy["Caddy<br/>:80, :443"]
    Caddy -->|reverse_proxy| App["Docker container<br/>green-pages :3000"]
    User["Посетитель<br/>https://greenlist.info"] --> Caddy

    style Dev fill:#14532d,stroke:#22c55e
    style GH fill:#172554,stroke:#3b82f6
    style VPS fill:#78350f,stroke:#f59e0b
    style Caddy fill:#3b0764,stroke:#a855f7

18.3. DNS

Запись	Тип	Значение	TTL
`greenlist.info`	A	66.151.32.222	3600
`www.greenlist.info`	A	66.151.32.222	3600

[ПАРТНЁР] Настроить DNS у регистратора домена до Фазы 4 (пропагация может занять до 48 часов).

18.4. Caddyfile (на сервере)

/etc/caddy/Caddyfile:

{
    email maslennikov.ig@gmail.com
}

www.greenlist.info {
    redir https://greenlist.info{uri} 308
}

greenlist.info {
    encode zstd gzip

    reverse_proxy green-pages-app:3000

    header {
        Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
        X-Frame-Options "DENY"
        X-Content-Type-Options "nosniff"
        Referrer-Policy "strict-origin-when-cross-origin"
        -Server
    }
}

18.5. docker-compose.yml (в репо)

services:
  green-pages-app:
    build:
      context: .
    container_name: green-pages-app
    restart: unless-stopped
    environment:
      - NODE_ENV=production
      - NEXT_PUBLIC_SITE_URL=https://greenlist.info
      - NEXT_PUBLIC_CONTACT_EMAIL=hello@greenlist.info
    networks:
      - greenlist_network

networks:
  greenlist_network:
    external: true

18.6. Dockerfile (Next.js SSG, standalone output)

# Builder
FROM node:20-bookworm AS builder
WORKDIR /app
RUN corepack enable && corepack prepare pnpm@latest --activate
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile
COPY . .
RUN pnpm run build

# Runner — standalone Next.js
FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
RUN addgroup -g 1001 -S nodejs && adduser -S nextjs -u 1001
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
COPY --from=builder --chown=nextjs:nodejs /app/public ./public
USER nextjs
EXPOSE 3000
CMD ["node", "server.js"]

18.7. Скрипт деплоя

scripts/deploy.sh:

#!/bin/bash
set -e

SSH_HOST="greenlist"  # alias в ~/.ssh/config
PROJECT_DIR="/opt/greenlist"

echo "🚀 Deploying Global Green Pages..."

ssh "$SSH_HOST" << 'ENDSSH'
set -e
cd /opt/greenlist

if [ ! -d ".git" ]; then
    git clone git@github.com:maslennikov-ig/greenlist.git .
else
    git pull --rebase
fi

docker compose down || true
docker compose up -d --build

echo "✅ Deployed. Container status:"
docker ps | grep green-pages-app
ENDSSH

echo "🎉 Done. Site: https://greenlist.info"

18.8. GitHub Actions (опционально, после MVP)

.github/workflows/deploy.yml — автоматический деплой при push в main:

name: Deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Deploy via SSH
        uses: appleboy/ssh-action@v1
        with:
          host: 66.151.32.222
          username: root
          key: ${{ secrets.VPS_SSH_KEY }}
          script: |
            cd /opt/greenlist
            git pull --rebase
            docker compose up -d --build

Для GH Actions партнёр должен добавить приватный SSH-ключ в GitHub Secrets как VPS_SSH_KEY.

18.9. Env-переменные

NEXT_PUBLIC_SITE_URL — https://greenlist.info
NEXT_PUBLIC_CONTACT_EMAIL — определяется партнёром (В8 в §20)

19. Риски и митигация

quadrantChart
    title Risk Map
    x-axis "Low probability" --> "High probability"
    y-axis "Low impact" --> "High impact"

    R1 ESG data gaps: [0.6, 0.5]
    R2 Content translation: [0.5, 0.4]
    R3 Stitch iterations: [0.5, 0.3]
    R4 DNS propagation delay: [0.4, 0.4]
    R5 Cross-language data sync: [0.5, 0.4]

#	Риск	Вероятность	Влияние	Митигация
R1	ESG-отчёты не покрывают все 7 метрик	Средняя	Среднее	Приоритизировать публичные отчёты (CNOOC на HKEX, НОВАТЭК на MOEX). Использовать референсные значения GRI 11 / SASB при отсутствии данных. Помечать метрики как "estimated" в JSON и UI
R2	Качество машинного перевода (ZH↔RU кросс-переводы)	Средняя	Среднее	Основной контент CNOOC брать из китайской версии отчёта, НОВАТЭК — из русской. Кросс-переводы (CNOOC → RU, НОВАТЭК → ZH) делать машинным переводом + ручная правка ключевых фраз
R3	Итерации Stitch-дизайна	Средняя	Низкое	Отправить все 4 промпта параллельно в Неделю 1. Время на 1–2 итерации заложено
R4	DNS propagation для greenlist.info	Средняя	Низкое	Настроить DNS в Неделе 2 — пропагация до 48 часов. Caddy автоматически получит SSL через Let's Encrypt
R5	Stitch не генерирует приемлемый результат	Низкая	Среднее	Fallback — использовать shadcn/ui defaults + минимальную кастомизацию

20. Открытые вопросы

20.1. Решённые (зафиксированы)

#	Вопрос	Решение
В1	Языки	✅ 3 языка: EN + ZH + RU (арабский не требуется)
В2	Компании с полными профилями	✅ CNOOC (Китай) + НОВАТЭК (Россия)
В3	Продакшн-домен	✅ greenlist.info
В4	Хостинг	✅ VPS партнёра (`66.151.32.222`, Ubuntu 24.04, Docker 29.4)
В5	SSH-доступ	✅ Ключ `claude@greenlist-deploy` добавлен на сервер

20.2. Открытые (требуют решения)

#	Вопрос	Варианты	Требуется решение
В6	Кто верифицирует ZH-контент CNOOC?	A) Берём только из китайской версии ESG-отчёта CNOOC (на русской / на английской стороны могут быть неточности в нюансах) B) Привлекаем носителя языка из MONAECO-команды для финальной проверки (2 ч)	До недели 3
В7	GitHub Actions CI/CD	A) Настроить в неделе 1 (деплой автоматом при push) B) Ручной деплой через `ssh greenlist + docker compose` до демо, CI — после приёмки	До недели 2
В8	Email для CTA «Стать участником»	Какой email показывать в footer и в форме обратной связи?	До демо #1
В9	Логотип GGP	A) Пока используем текстовый «Global Green Pages» + leaf-иконка B) Партнёр присылает готовый логотип C) Агент генерирует простой логотип для MVP	До демо #1

Это техническое задание основано на КП v2 (docs/offers/global-green-pages-v2.md) и двух Deep Research. Оценки предварительные и могут уточниться при реализации.

ТЗ действительно 30 дней от даты создания. Разработка: AiDevTeam

Техническое задание: Global Green Pages — пакет «Концепт»

Кликабельный прототип международной цифровой витрины экологической ответственности нефтегазовых компаний

Содержание

1. Роли и формат работы

1.1. Наименование

1.2. Разделение ответственности

1.3. Формат взаимодействия

1.4. Документы-источники

2. Цели пакета «Концепт»

2.1. Бизнес-цель

2.2. Продуктовые цели

2.3. Путь развития после «Концепта»

3. Границы проекта

3.1. Входит в «Концепт»

3.2. НЕ входит в «Концепт»

3.3. Ограничения

3.4. Коррекция бюджета (scope-уточнение)

3.4.1. Разбивка дополнительных часов

3.4.2. Новая калькуляция стоимости

3.4.3. Срок

3.4.4. Итоговый scope

4. Информационная архитектура

4.1. Sitemap

4.2. Глобальная навигация

4.3. Языковой переключатель

5. Технологический стек

5.1. Frontend

5.2. Визуализация

5.3. Интернационализация

5.4. Шрифты

5.5. Инструменты разработки

6. Архитектура приложения

6.1. Принципы

6.2. Общая схема

6.3. Структура репозитория

6.4. Data flow

7. Страницы и маршруты

7.1. Landing (/{locale}/)

7.2. Каталог компаний (/{locale}/catalog)

7.3. Экопрофиль компании (/{locale}/company/{slug})

7.4. Методология (/{locale}/methodology)

8. Компоненты

8.1. GreenStarsBadge

8.2. RatingCard

8.3. ESGRadarChart

8.4. CarbonStackedBar

8.5. KPICard

8.6. CompanyCard

8.7. PillarScores

8.8. LanguageSwitcher

9. Модель данных

9.1. Company JSON schema

9.2. Заглушки компаний

9.3. TypeScript types

10. Методика Green Stars

10.1. Формула

10.2. Метрики

10.3. Пороги звёзд

10.4. Safeguards

10.5. Алгоритм (псевдокод для lib/rating.ts)

10.6. Unit-тесты

11. Дизайн-система и Stitch-промпты

11.1. Подход

11.2. Design tokens (предварительные)

11.3. Stitch-промпты (English)

11.4. Применение Stitch-результата

12. Интернационализация (i18n)

12.1. Локали

12.2. Структура переводов

12.3. Конфиг next-intl

12.4. Автоопределение языка

13. Контент и демо-данные

13.1. Список компаний для прототипа

13.2. Источники данных

13.3. Процесс наполнения

13.4. Контент-файлы

14. Критерии приёмки

14.1. К1. Landing page

14.2. К2. Каталог

14.3. К3. Экопрофиль (CNOOC + НОВАТЭК)

7.1. Landing (`/{locale}/`)

7.2. Каталог компаний (`/{locale}/catalog`)

7.3. Экопрофиль компании (`/{locale}/company/{slug}`)

7.4. Методология (`/{locale}/methodology`)

8.1. `GreenStarsBadge`

8.2. `RatingCard`

8.3. `ESGRadarChart`

8.4. `CarbonStackedBar`

8.5. `KPICard`

8.6. `CompanyCard`

8.7. `PillarScores`

8.8. `LanguageSwitcher`

10.5. Алгоритм (псевдокод для `lib/rating.ts`)