VibeUI
РусEng
Войти

Отраслевые секции

Программа закреплённой сценой по неделям

Программа курса как закреплённая сцена: слева липкая колонка недель с линией прогресса, минутами и сводкой, справа недели раскрыты подряд. При скролле текущая неделя подсвечивается в колонке и на карточке, клик по неделе плавно скроллит к ней. У уроков иконки типа (запись, лайв, ревью, текст) и сумма минут. На узком экране — аккордеон.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • weeks: подписи, темы, тексты, уроки с length и kind, домашки
  • summary, summaryTitle, finalTitle, finalText, homeworkLabel, openFirst
  • accent и background, tone

Собран из

Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Программа закреплённой сценой по неделям — Программа курса как закреплённая сцена: слева липкая колонка недель с линией прогресса, минутами и сводкой, справа недели раскрыты подряд. При скролле текущая неделя подсвечивается в колонке и на карточке, клик по неделе плавно скроллит к ней. У уроков иконки типа (запись, лайв, ревью, текст) и сумма минут. На узком экране — аккордеон.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/course-002?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<Course002
  title="Шесть недель — три проекта в портфолио"
  weeks={[
    { label: "Неделя 1", title: "Сетка и первый экран", lessons: [{ title: "Как устроена Figma", length: "35 мин" }, { title: "Разбор домашек", length: "1 ч", kind: "live" }], homework: "Экран онбординга" },
  ]}
  summary={[{ value: "18", label: "уроков" }, { value: "24 ч", label: "видео" }]}
  finalTitle="Мобильное приложение с нуля до прототипа"
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Тема
tone · по умолчанию: auto
Заголовок
title · по умолчанию: Шесть недель — три проекта в портфолио
Первая открыта
openFirst · по умолчанию: включено
Акцент
accent · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Используется в сценариях

Ещё в разделе «Отраслевые секции»

Частые вопросы

Как установить компонент «Программа закреплённой сценой по неделям» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Программа закреплённой сценой по неделям»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: card-090.
Что можно поменять в компоненте «Программа закреплённой сценой по неделям»?
Можно менять: weeks: подписи, темы, тексты, уроки с length и kind, домашки; summary, summaryTitle, finalTitle, finalText, homeworkLabel, openFirst; accent и background, tone. Сохранить как есть: импорты card-090 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; закреплённую колонку недель с подсветкой по скроллу и линией прогресса; иконки типов уроков и сумму минут недели.
Компонент «Программа закреплённой сценой по неделям» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/course-002.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Составной блок: импортирует card-090 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает. Один файл, ноль зависимостей, «use client» ради IntersectionObserver и аккордеона. Недели — <article data-index> с ref; IO с rootMargin -35 %/-55 % ставит active, в колонке пункт с data-active и прогресс-линия scaleY((active+1)/n). Клик по пункту — scrollIntoView({block:start}), scroll-margin-top 6rem. Минуты считаются из length («35 мин», «1,5 ч») и печатаются в колонке и под уроками. Иконки — inline SVG по kind. До 60rem (container query) колонка скрыта, заголовок недели — кнопка с aria-expanded, панель grid-template-rows 0fr→1fr; от 60rem 17rem/1fr, aside position:sticky, панели всегда открыты, неактивные недели полупрозрачны. Палитра --vibeui-course-002-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; шрифты Unbounded и Inter подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.

Теги

  • course
  • education
  • edtech
  • landing
  • curriculum
  • syllabus
  • sticky
  • scrollspy
  • program
  • composite
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…