### Set up CI/CD for Automatic Site Builds (.sourcecraft/ci.yaml)

Source: https://context7.com/sourcecraft/sites-landing.git/llms.txt

Configures the CI/CD pipeline to automatically build and publish the site upon pushing to the main branch. It includes steps for installing dependencies, building the site, and publishing the result to the 'release' branch.

```yaml
# .sourcecraft/ci.yaml
on:
  push:
    workflows: build-site
    filter:
      branches: main

workflows:
  build-site:
    tasks:
      - name: build-site
        cubes:
          - name: install-deps
            image: node:22-slim
            script:
              - npm ci
          - name: build-site
            image: node:22-slim
            script:
              - npm run build
          - name: publish-site
            script:
              - git checkout -b release
              - git add site
              - "git commit -m 'feat: release'"
              - git push origin release -f

```

--------------------------------

### Local Build and Development Commands

Source: https://context7.com/sourcecraft/sites-landing.git/llms.txt

Commands for local site building and testing before deployment. Includes dependency installation, site building, and viewing the result in a browser. Uses npm and the `page-builder` tool.

```bash
# Установка зависимостей
npm ci

# Сборка сайта (результат в папке ./site)
npm run build

# Команда сборки из package.json:
# rm -rf ./site && page-builder build -c page-builder.config.yml -i src -o site

# Открыть site/index.html в браузере для просмотра результата

```

--------------------------------

### Local Development Build Command

Source: https://github.com/sourcecraft/sites-landing.git/blob/main/README.md

Commands to install dependencies and build the static site locally using npm. Assumes Node.js and npm are installed.

```shell
npm ci
npm run build

```

--------------------------------

### Repository Structure Overview

Source: https://github.com/sourcecraft/sites-landing.git/blob/main/README.md

Illustrates the typical directory structure of a SourceCraft Sites project, including configuration files, source content, and build outputs.

```tree
├── .sourcecraft/
│   └── sites.yaml          # Конфигурация SourceCraft Sites
│   └── ci.yaml             # Конфигурация CI для сборки и публикации
├── src/                    # Папка с содержимым сайта
│   └── components          # 
│   └── css                 # Свои CSS-файлы, которые нужно подключить на страницу
│   └── images              # Папка с используемыми изображениями
│   └── pages               # Папка с конфигурациями страниц
│       └── index.yaml      # Конфигурация самой страницы
└── README.md               # Вы находитесь здесь :) 

```

--------------------------------

### Questions Block (FAQ) Configuration (YAML)

Source: https://context7.com/sourcecraft/sites-landing.git/llms.txt

A frequently asked questions (FAQ) block with expandable items and support for anchor links. It's structured to display questions and their corresponding answers.

```yaml
- type: "questions-block"
  anchor:
    url: "faq"
    text: "FAQ"
  title: "Часто задаваемые вопросы"
  items:
    - title: "Что такое SourceCraft Sites?"
      text: "Это бесплатный сервис для хостинга статических сайтов."
    - title: "Сколько это стоит?"
      text: "SourceCraft Sites полностью бесплатен для всех пользователей."
    - title: "Какие типы сайтов можно размещать?"
      text: "Любые статические сайты: HTML, CSS, JavaScript, изображения."
    - title: "Как настроить Sites в репозитории?"
      text: "Создайте файл `sites.yaml` в папке `.sourcecraft` с полем `site`."
```

--------------------------------

### Define Page Structure and Content (index.yaml)

Source: https://context7.com/sourcecraft/sites-landing.git/llms.txt

Defines the metadata, navigation, and content blocks for a page. Each block has a type and parameters for rendering, allowing for flexible page layouts.

```yaml
# src/pages/index.yaml
menu:
  title: "SourceCraft Sites"

meta:
  title: "SourceCraft Sites | Yandex"
  description: "SourceCraft Sites — бесплатный хостинг статических сайтов."
  sharing:
    title: "SourceCraft Sites | Yandex"
    description: "Бесплатный хостинг статических сайтов."
    image: "https://example.com/share.png"
    keywords:
      - sourcecraft
      - static hosting

navigation:
  logo:
    icon:
      src: https://example.com/logo.svg
  header:
    leftItems:
      - type: "link"
        url: "https://sourcecraft.dev/"
        text: "Главная"
    rightItems:
      - type: "button"
        url: "https://sourcecraft.dev/?auth=1"
        text: "Войти"
        theme: "monochrome"

background:
  image:
    mobile: "https://example.com/bg-mobile.svg"
    desktop: "https://example.com/bg-desktop.svg"
  height: 760
  size: "contain"

blocks:
  - type: header-block
    centered: true
    title: "Заголовок страницы"
    description: "Описание вашего проекта"
    buttons:
      - text: "Начать"
        theme: "monochrome"
        url: "https://example.com/start"

```

--------------------------------

### Footer Block Configuration (YAML)

Source: https://context7.com/sourcecraft/sites-landing.git/llms.txt

A standard page footer component including copyright information, links to legal documents, and company branding. It's a static configuration block.

```yaml
- type: "footer"
  copyrightText: "© 2025 ООО «Яндекс.Облако»"
  links:
    - text: "Политика конфиденциальности"
      url: "https://yandex.ru/legal/confidential/"
    - text: "Условия использования"
      url: "https://yandex.ru/legal/cloud_terms_sourcecraft/"
  yandexCompany:
    text: "Проект компании"
    url: "https://ya.ru"
```

--------------------------------

### Configure SourceCraft Sites Publishing (.sourcecraft/sites.yaml)

Source: https://context7.com/sourcecraft/sites-landing.git/llms.txt

Defines the root folder for site content and the branch or tag for deployment. This file is crucial for specifying where the built site resides and which version to publish.

```yaml
# .sourcecraft/sites.yaml
site:
  root: site            # Папка с собранным сайтом
  ref: release          # Ветка или тег для публикации (опционально)

```

--------------------------------

### Implement Header Block Component

Source: https://context7.com/sourcecraft/sites-landing.git/llms.txt

A header block component for page titles, descriptions, and action buttons. It supports centering, overtitles, and customizable button themes and analytics events.

```yaml
- type: header-block
  centered: true
  overtitle: "Новинка"
  title: |
    SourceCraft Sites:
    ваш сайт из репозитория за несколько минут
  description: |
    Бесплатный хостинг статических сайтов прямо из ваших репозиториев.
    Просто загрузите HTML, CSS и JavaScript — и ваш сайт готов!
  width: s
  offset: default
  resetPaddings: true
  buttons:
    - text: "Создать репозиторий"
      theme: "monochrome"
      url: "https://sourcecraft.dev/create/repo"
      analyticsEvents:
        - name: "CREATE-REPO_CLICK"
          counters:
            include:
              - "97958134"
    - text: "Документация"
      theme: "outlined"
      url: "https://sourcecraft.dev/docs"
      arrow: true

```

--------------------------------

### Configure Page Builder Settings (page-builder.config.yml)

Source: https://context7.com/sourcecraft/sites-landing.git/llms.txt

Specifies settings for the page builder, including theme, component paths, favicon, and CSS files. This configuration file controls the overall appearance and structure of the generated site.

```yaml
# page-builder.config.yml
theme: light
minify: true
components: ./src/components
favicon: ./src/assets/favicon.svg
analytics: ./src/utils/analytics.js
css:
  - ./src/css/scaffolding.css
  - ./src/css/footer.css

```

--------------------------------

### Media Block Configuration (YAML)

Source: https://context7.com/sourcecraft/sites-landing.git/llms.txt

A block designed to display content alongside a media element (image or video) and an action button. It supports different content-media arrangements and can disable shadows.

```yaml
- type: "media-block"
  direction: "content-media"
  title: "Этот сайт размещен на SourceCraft Sites"
  description: |
    Данная страница является живым примером возможностей SourceCraft Sites.
    Вы можете использовать этот репозиторий как шаблон.
  media:
    image: "https://example.com/preview.png"
  disableShadow: true
  button:
    text: "Посмотреть репозиторий"
    theme: "outlined"
    url: "https://sourcecraft.dev/sourcecraft/sites-landing"
```

--------------------------------

### Card Layout Block Configuration (YAML)

Source: https://context7.com/sourcecraft/sites-landing.git/llms.txt

Defines a grid of cards for displaying features, benefits, or steps. Supports responsive column sizing across different screen breakpoints.

```yaml
- type: "card-layout-block"
  title: "Почему SourceCraft Sites?"
  description: "Простое и удобное решение для хостинга статических сайтов."
  colSizes:
    all: 12
    md: 6
    lg: 4
    xl: 4
    sm: 12
  children:
    - type: "layout-item"
      content:
        title: "Полностью бесплатно"
        text: "Никаких лимитов на количество сайтов и трафик"
      media:
        image:
          src: "https://example.com/icon-free.svg"
      border: "none"
    - type: "layout-item"
      content:
        title: "Автоматическое развертывание"
        text: "Пуш в репозиторий автоматически обновляет сайт"
      media:
        image:
          src: "https://example.com/icon-deploy.svg"
      border: "line"
```

--------------------------------

### Content Layout Block with Theme and CTA (YAML)

Source: https://context7.com/sourcecraft/sites-landing.git/llms.txt

A variant of the content layout block featuring a dark theme, background image, and call-to-action buttons. This configuration is suitable for promotional content.

```yaml
- type: "content-layout-block"
  textWidth: "s"
  centered: true
  theme: dark
  background:
    src: "https://example.com/cta-bg.png"
    style:
      backgroundColor: "#FF4343"
  textContent:
    title: "Начните создавать свой сайт прямо сейчас"
    text: "Создайте репозиторий и опубликуйте свой первый сайт"
    buttons:
      - url: "https://sourcecraft.dev/create/repo"
        text: "Создать репозиторий"
        theme: "normal-contrast"
        arrow: true
```

--------------------------------

### Content Layout Block Configuration (YAML)

Source: https://context7.com/sourcecraft/sites-landing.git/llms.txt

A text content block that supports centering, themes, and background images. It's used for displaying informational text and can be configured with different text widths.

```yaml
- type: "content-layout-block"
  textWidth: "m"
  centered: true
  title: "Что такое SourceCraft Sites?"
  text: |
    SourceCraft Sites — это сервис для хостинга статических сайтов.

    Идеально подходит для:
    - Сайтов-портфолио и резюме
    - Документации проектов
    - Блогов и личных сайтов
    - Лендингов и промо-страниц
```

--------------------------------

### Analytics Event Module for Yandex.Metrika

Source: https://context7.com/sourcecraft/sites-landing.git/llms.txt

A JavaScript module for sending analytical events to Yandex.Metrika counters on page element clicks. It iterates through provided events and triggers `reachGoal` for specified counters. Requires `window.ym` to be available.

```javascript
// src/utils/analytics.js
module.exports = {
  autoEvents: true,
  sendEvents: (events) => {
    events.forEach(({name, counters}) => {
      if (!counters || typeof window.ym !== 'function') {
        return;
      }

      const countersToSendTo = counters.include;

      if (!Array.isArray(countersToSendTo)) {
        return;
      }

      countersToSendTo.forEach(id => {
        window.ym(id, 'reachGoal', name);
      });
    });
  },
};

// Использование в YAML блоках:
// buttons:
//   - text: "Кнопка"
//     url: "/action"
//     analyticsEvents:
//       - name: "BUTTON_CLICK"
//         counters:
//           include:
//             - "97958134"

```

--------------------------------

### React Metrika Component for Yandex.Metrika Integration

Source: https://context7.com/sourcecraft/sites-landing.git/llms.txt

A React component to integrate Yandex.Metrika with clickmap and link tracking settings. It initializes the Metrika script and configures tracking options upon component mount. Requires a valid `counterId`.

```tsx
// src/components/metrika.tsx
import { useEffect } from "react";

interface MetrikaProps {
  counterId: number;
}

const MetrikaInit = ({ counterId }: MetrikaProps) => {
  useEffect(() => {
    (function(m,e,t,r,i,k,a){
      m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
      m[i].l=1*new Date();
      k=e.createElement(t);
      a=e.getElementsByTagName(t)[0];
      k.async=1;
      k.src=r;
      a.parentNode.insertBefore(k,a);
    })(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

    try {
      ym(counterId, "init", {
        defer: false,
        clickmap: true,
        trackLinks: true,
        accurateTrackBounce: false,
        webvisor: false,
        sendTitle: true,
      });
    } catch(e) {}
  }, []);

  return null;
};

export default MetrikaInit;

// Использование в YAML:
// blocks:
//   - type: metrika
//     counterId: 97958134

```

--------------------------------

### React Footer Component Implementation (TSX)

Source: https://context7.com/sourcecraft/sites-landing.git/llms.txt

A custom React component for the page footer, utilizing the @gravity-ui/uikit library. It accepts props for copyright text, links, and company information, rendering a structured footer.

```tsx
// src/components/footer.tsx
import React from "react";
import { Text } from "@gravity-ui/uikit";

interface LandingPageFooterProps {
  copyrightText: string;
  links: Array<{ 
    text: string;
    url: string;
  }>;
  yandexCompany: {
    text: string;
    url: string;
  };
}

const LandingPageFooter = ({
  copyrightText,
  links,
  yandexCompany,
}: LandingPageFooterProps) => {
  return (
    <footer className="footer">
      <Text variant="body-2" color="secondary">
        {copyrightText}
      </Text>
      <ul className="links">
        {links.map((link) => (
          <li key={link.url}>
            <a href={link.url} className="link">
              <Text variant="body-2">{link.text}</Text>
            </a>
          </li>
        ))}
      </ul>
      <div className="yandexCompany">
        <Text variant="body-2">{yandexCompany.text}</Text>
        <a href={yandexCompany.url} className="yandexCompanyLogo link">
          {/* SVG логотип */}
        </a>
      </div>
    </footer>
  );
};

export default LandingPageFooter;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.