{"id":50759369,"url":"https://github.com/selimdev00/lyra","last_synced_at":"2026-06-11T08:30:48.502Z","repository":{"id":358152387,"uuid":"1240248290","full_name":"selimdev00/lyra","owner":"selimdev00","description":"FMF test task — Complex SW СУСТАВЫ landing page (Astro 6 + Tailwind 4 + Decap CMS)","archived":false,"fork":false,"pushed_at":"2026-05-16T01:31:10.000Z","size":11422,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-16T02:23:18.133Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/selimdev00.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-15T23:26:26.000Z","updated_at":"2026-05-16T01:31:13.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/selimdev00/lyra","commit_stats":null,"previous_names":["selimdev00/lyra"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/selimdev00/lyra","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selimdev00%2Flyra","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selimdev00%2Flyra/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selimdev00%2Flyra/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selimdev00%2Flyra/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/selimdev00","download_url":"https://codeload.github.com/selimdev00/lyra/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selimdev00%2Flyra/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34190582,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-11T08:30:45.424Z","updated_at":"2026-06-11T08:30:48.493Z","avatar_url":"https://github.com/selimdev00.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lyra\n\nЛендинг «Сустави 365 — комплекс для здоровья суставов» (тестовое задание FMF).\n\nКодовое имя репозитория: `lyra`. Дизайн взят из `FMF-Test.fig`, реализован pixel-perfect (desktop + mobile), контент управляется через Decap CMS, инфраструктура — Astro 6 + Cloudflare Pages.\n\n## Стек\n\n| Слой        | Решение                                                            |\n| ----------- | ------------------------------------------------------------------ |\n| Generator   | Astro 6 (static, SSR-ready через адаптер `@astrojs/cloudflare`)    |\n| Стили       | Tailwind CSS v4 (via `@tailwindcss/vite`) + дизайн-токены в @theme |\n| Контент     | Astro Content Collections (Zod-схема в `src/content.config.ts`)    |\n| CMS         | Decap CMS (Git-based, без backend-сервера)                         |\n| SEO         | meta + Open Graph + JSON-LD `Product` + `Organization` + sitemap   |\n| Деплой      | Cloudflare Pages                                                   |\n| TypeScript  | strict                                                             |\n\n## Структура\n\n```\nsrc/\n  layouts/BaseLayout.astro     # \u003chead\u003e, SEO, шрифты, slot для JSON-LD\n  pages/index.astro            # читает контент-коллекцию, собирает секции\n  components/\n    SiteHeader.astro           # шапка с CTA + якорной навигацией\n    SectionHero.astro          # Hero — заголовок + буллеты + CTA + product image\n    SectionIntro.astro         # Описание комплекса\n    SectionBenefits.astro      # 5 карточек преимуществ вокруг продукта\n    SectionComposition.astro   # Таблица состава (компонент / дозировка / роль)\n    SectionAudience.astro      # Кому подходит + lifestyle фото\n    SectionComparison.astro    # Таблица сравнения с конкурентами\n    SectionPurchase.astro      # Карточка покупки (цена + CTA)\n    SectionFaq.astro           # Форма обратной связи (валидация + статус)\n    SiteFooter.astro           # Контакты + соцсети + копирайт\n  content/\n    landing/page.yml           # Контент лендинга (правится в Decap)\n  styles/global.css            # Tailwind + дизайн-токены + утилитарные классы\npublic/\n  admin/                       # Decap CMS (index.html + config.yml)\n  figma/                       # Ассеты из дизайна (desktop)\n  figma-mobile/                # Ассеты мобильной версии\n```\n\n## Запуск\n\n```bash\nnpm install\nnpm run build      # сборка в dist/\nnpm run preview    # локальный просмотр продакшен-сборки\nnpm run dev        # дев-сервер (используется по необходимости)\n```\n\nКонтент-эдитор (Decap): открыть `http://localhost:4321/admin/` после `npm run dev`. Для prod-режима нужен Git-провайдер: Netlify Identity / GitHub OAuth (см. `public/admin/config.yml`).\n\n## Использование ИИ — что и почему автоматизировано\n\nТестовое задание явно просит продемонстрировать использование ИИ (Codex / Claude). Ниже — конкретные шаги, где AI-инструмент применён, и обоснование.\n\n### 1. Извлечение макета (Claude + Figma MCP)\n\n- **Что**: Figma-файл `FMF-Test.fig` импортирован в Figma → через Claude Code MCP (`mcp__plugin_figma_figma`) автоматически получены:\n  - `get_design_context` для desktop (1920×9926) и mobile (375×9102) — структура секций, типографика, цвета;\n  - `get_screenshot` — высоконагруженные PNG-референсы;\n  - все ассеты (49 desktop + 43 mobile) скачаны параллельно через MCP-эндпоинты в `public/figma/` и `public/figma-mobile/`.\n- **Почему**: эта часть полностью механическая. Открытие, обход слоёв, экспорт каждой иконки руками — это 1-2 часа потерянного времени. AI-инструмент справляется за минуты и не пропускает мелкие иконки (Telegram, ph:person-simple-run, healthicons:joints-outline).\n\n### 2. Генерация секционных компонентов (Claude)\n\n- **Что**: компоненты `SectionHero` / `SectionBenefits` / `SectionComposition` / `SectionComparison` / `SectionFaq` сгенерированы Claude на основе:\n  - React + Tailwind-вывода Figma MCP как «структурного источника»;\n  - JPG-скриншотов как источника визуальной правды;\n  - дизайн-токенов, извлечённых из Tailwind-классов референса (`#3193cc` -\u003e `--color-brand`, `Onest:Medium` -\u003e `--font-display`, `rounded-[60px]` -\u003e `--radius-pill`).\n- **Почему**: Tailwind-вывод Figma MCP — это «декодер» с авто-сгенерированными классами и абсолютным позиционированием. Использовать его как продакшен-код нельзя. Claude переписывает его в семантический Astro + Tailwind, заменяя абсолюты на Flex/Grid и подставляя дизайн-токены вместо магических чисел.\n\n### 3. Дизайн-токены и тема (Claude)\n\n- **Что**: палитра, типографика, радиусы, тени вынесены в `@theme {}` Tailwind 4 (`src/styles/global.css`). Сгенерированы из анализа цветов и шрифтов референса.\n- **Почему**: единый источник правды для дальнейших итераций; контент-менеджер через Decap правит контент, не трогая стили.\n\n### 4. SEO + структурированные данные (Claude)\n\n- JSON-LD `Product` (название, описание, цена в `RUB`, наличие) и `Organization` (контакты, адрес) — сгенерированы по содержимому контент-коллекции и автоматически обновляются при правке в Decap.\n- `BaseLayout.astro` ставит canonical, Open Graph, Twitter Card, preconnect к Google Fonts.\n\n### 5. Контент-схема (Claude)\n\n- Zod-схема `src/content.config.ts` сгенерирована по содержимому секций и зеркалит структуру Decap-конфига (`public/admin/config.yml`). Любое изменение схемы — TypeScript-ошибка в `index.astro` на build-time.\n\n### Где AI не использовался\n\n- Финальные решения по архитектуре (Astro vs Next, Decap vs Strapi, `static` vs `server` адаптер) — приняты вручную с обоснованием в этом README;\n- Точная настройка Cloudflare Pages bindings и деплой-пайплайна;\n- Финальная вычитка тонов сообщений и юридических формулировок (БАД-дисклеймер, политика обработки данных).\n\n## CMS — интеграция\n\nDecap CMS работает по git-based модели: все правки в `/admin/` коммитятся в репозиторий через GitHub OAuth / Netlify Identity. На клиенте — единая JS-библиотека (`decap-cms@^3`).\n\n- **Локально**: `npx decap-server` + `local_backend: true` в `config.yml`.\n- **Прод**: подключить GitHub OAuth (`backend.name: github`) или Netlify Identity / git-gateway.\n- Контент-модель в `public/admin/config.yml` 1-в-1 повторяет Zod-схему — никаких ручных синхронизаций.\n\n\u003e Если заказчику нужен именно Bitrix: контент-коллекция и Zod-схема — переносимы. Под Bitrix добавляется тонкий слой `src/lib/cms/bitrix.ts`, который читает infoblock'и через REST и маппит в тот же тип. Шаблон страницы не меняется.\n\n## Оптимизация\n\n- Astro static output — нулевой JS по умолчанию. На странице 1 inline-скрипт для формы (~600 байт).\n- Tailwind v4 — JIT, дерево классов считается по используемому коду; финальный CSS ~ 12 KB gzip.\n- Изображения: `loading=\"lazy\"`, `decoding=\"async\"`, `width`/`height` — против CLS. Hero-картинка получает `fetchpriority=\"high\"`.\n- Cloudflare adapter + `imageService: \"compile\"` — оптимизация на этапе билда (avif/webp при наличии источника).\n- Шрифты: `preconnect` к `fonts.gstatic.com`, `display=swap` — нет FOIT.\n- Prefetch: Astro `prefetchAll` — мгновенный переход по якорям.\n- JSON-LD `Product` + sitemap.xml + `robots`-friendly meta — корректная индексация и rich-результаты.\n\n### Что меряем (Lighthouse, целевые показатели)\n\n| Метрика       | Цель    |\n| ------------- | ------- |\n| Performance   | 95+     |\n| Accessibility | 95+     |\n| Best Practice | 95+     |\n| SEO           | 100     |\n| LCP           | \u003c 2.0 с |\n| CLS           | \u003c 0.05  |\n\n## Адаптивность\n\nОдин шаблон — два набора правил Tailwind (mobile-first до `lg:`). Breakpoints:\n\n- `\u003c 640`: одна колонка, hero — без бокового фона.\n- `640-1024`: hero сохраняет акценты, секции `audience` / `purchase` переходят в одно-колоночный flow.\n- `\u003e= 1024`: full pixel-perfect разметка.\n\nMobile-референс из `mobile-code.tsx` использован как контрольный — пропорции hero и шапки на `\u003c 640` сверены вручную.\n\n## Деплой (Cloudflare Pages)\n\n1. `npm run build` -\u003e `dist/client` + `_worker.js`.\n2. На Cloudflare Pages: connect Git repo, build command `npm run build`, output dir `dist/client`, Node `\u003e= 22`.\n3. Декларации env (опционально): `PUBLIC_SITE_URL`.\n\n## Что осталось за рамками теста\n\n- Реальный backend для формы (сейчас — клиентский submit-handler с событием `lead:submitted` для аналитики/CRM).\n- A/B-тестирование CTA через GrowthBook (структура готова — нужны feature flags).\n- Реальная интеграция с Bitrix REST (см. раздел CMS — миграционный путь спроектирован).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselimdev00%2Flyra","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fselimdev00%2Flyra","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselimdev00%2Flyra/lists"}