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

75 компонентов

Блоки, сделанные под конкретную отрасль: пекарню и доставку еды, ветклинику и автосервис, ремонт, цветы, курсы и языковую школу, финтех, API, приложения и фонды. Это не универсальные секции, а готовые решения задачи бизнеса — полка выпечки с остатками, калькулятор сметы, «что даёт ваша сумма» для пожертвований. Многие из них собраны в сценариях целых сайтов.

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

BA001Полка выпечки с перетаскиванием и остатками (Pastry shelf with drag-to-scroll and stock counts)

BA002Шкала крепости кофе с наполняющимся стаканом (Coffee strength slider with a filling cup)

BA003Конструктор коробки к завтраку (Breakfast box builder)

BA004Scroll-история «36 часов до буханки» (Scroll story “36 hours to a loaf”)

BA005Перфокарта со штампами и подписка на хлеб (Punch card with stamps and a bread subscription)

CH001«Что даёт ваша сумма»: чипы, ползунок и перерисовывающаяся карточка (“What your amount buys”: chips, a slider and a redrawing card)

CH002Истории подопечных: лента конвертов с drag-scroll и печатающимся письмом (Beneficiary stories: a drag-scroll lane of envelopes with a typing letter)

CH003Отчётность фонда: кольцевая диаграмма по годам и штамп «0 % на рекламу» (Foundation reporting: a donut chart by year and a “0% on ads” stamp)

CH004Карта помощи: точки зажигаются по очереди с числами подопечных (Help map: dots light up in turn with beneficiary counts)

CH005«Стать волонтёром»: чипы ролей и дней, живой бейдж и счётчик «сегодня помогли» (“Become a volunteer”: role and day chips, a live badge and a “helped today” counter)

DE002Конструктор боула: ингредиенты с фото падают в миску, калории и цена на лету (Bowl builder: ingredient photos drop into the bowl, calories and price on the fly)

DE003Зона доставки на Яндекс Карте: кольца зон от кухни, метки адресов, клик → время и цена (Delivery zones on a Yandex map: zone rings around the kitchen, address pins, click → time and price)

DE004Трекер заказа: шаги с живым прогрессом и телефон с картой, по которой едет курьер (Order tracker: steps with live progress and a phone with a map where the courier drives)

DE005Отзывы-стикеры с эмодзи-реакциями и живым счётчиком заказов (Sticker reviews with emoji reactions and a live orders counter)

FL001Каталог букетов списком: картинка следует за курсором (Bouquet catalogue as a list: the image follows the cursor)

FL002Конструктор букета: стебли растут в вазе, цена и срок считаются (Bouquet builder: stems grow in the vase, price and lifetime are computed)

FL003Доставка к часу: лента времени от текущего момента и форма заказа (Delivery to the hour: a time tape from the current moment and an order form)

FL004Сезонный календарь: 12 месяцев лентой с drag-scroll (Seasonal calendar: 12 months as a drag-scroll ribbon)

FL005Уход за цветами: аккордеон с прорисовкой иконок и счётчик букетов (Flower care: an accordion with self-drawing icons and a bouquet counter)

AU001Калькулятор услуг детейлинга: чипы, класс авто, итог на лету (Detailing service calculator: chips, car class, live total)

AU002До/после детейлинга: шторка с перетаскиванием и вкладки «фары / кузов / салон» (Detailing before/after: a draggable curtain with “lights / body / interior” tabs)

AU003Процесс автосервиса: таймлайн четырёх шагов с прогрессом по прокрутке (Car service process: a four-step timeline with scroll progress)

AU004Запись в автосервис: сетка слотов на неделю и панель заказа (Car service booking: a week slot grid and an order panel)

CO001Для кого: раздвигающиеся плитки (Who it’s for: expanding tiles)

CO002Программа закреплённой сценой по неделям (Curriculum as a pinned scene by week)

CO003Результаты выпускников горизонтальной лентой (Graduate results as a horizontal lane)

CO004Неделя курса календарной лентой (A course week as a calendar lane)

RE003Подборка объектов с фильтром (Listings grid with filter)

RE004Районы на стилизованной карте (Districts on a stylised map)

RE005Шаги сделки в ряд (Deal steps in a row)

RE006Ипотечный калькулятор (Mortgage calculator)

RE001Калькулятор сметы: площадь × тип ремонта × опции → цена и срок (Renovation estimate calculator: area × type × options → price and weeks)

RE002Этапы работ диаграммой Ганта, по которой едет маркер при прокрутке (Work stages as a Gantt chart with a marker that rides along on scroll)

RE003Объекты до/после со шторкой сравнения и переключателем объектов (Before/after projects with a comparison slider and a project switcher)

RE004Стройка онлайн: прогресс-кольцо от сегодняшней даты и лента отчётов по дням (Site live: a progress ring driven by today's date and a day-by-day report feed)

VE001Экстренная кнопка «Срочно» с панелью «что делать сейчас» (Emergency “Urgent” button with a “what to do now” panel)

VE002Карта питомца: SVG-схема тела с хотспотами услуг (Pet map: an SVG body scheme with service hotspots)

VE003Симптом-чекер: чипы → к какому врачу и насколько срочно (Symptom checker: chips → which doctor and how urgent)

VE004Груминг: ползунок длины стрижки с CSS-питомцем и калькулятором (Grooming: a haircut length slider with a CSS pet and a calculator)

WR001Книга: 3D-обложка, которая открывается, форматы и счётчик страниц (The book: a 3D cover that opens, formats and a page counter)

WR002Архив текстов: крупный список, превью у курсора и раскрытие в списке (Text archive: a big list, a preview at the cursor and inline expansion)

WR003Чтение по прокрутке: закладка-прогресс, сноски на полях, чернильные подчёркивания (Scroll reading: a bookmark progress, margin footnotes, ink underlines)

WR004Отзывы читателей как заметки на полях страницы с ротацией (Reader reviews as rotating notes in a page's margins)

FI001Живой баланс: график рисуется, операции появляются, период морфит линию (Live balance: the chart draws itself, operations appear, the period morphs the line)

FI002Калькулятор экономии на комиссиях с ползунком оборота (Fee savings calculator with a turnover slider)

FI003Безопасность по прокрутке: карта проходит четыре слоя защиты (Security on scroll: the card passes through four layers of protection)

GA001Рассвет за 30 минут: sticky-сцена, где комната светлеет по прокрутке (Sunrise in 30 minutes: a sticky scene where the room brightens on scroll)

GA002Взрыв-схема гаджета: детали разъезжаются по ползунку и в viewport (Gadget exploded view: parts spread apart by a slider and in the viewport)

GA003Предзаказ гаджета: свотчи меняют цвет лампы, отсчёт до отгрузки, магнитная кнопка (Gadget preorder: swatches recolour the lamp, a shipping countdown, a magnetic button)

LA001Тест уровня: пять вопросов-чипов и шкала A1–C1 с маркером (Level test: five chip questions and an A1–C1 scale with a marker)

LA002Расписание групп: неделя × время, фильтры и «ближайший старт через N дней» (Group schedule: week × time, filters and “next start in N days”)

LA003Прогресс за три месяца: график словарного запаса с ползунком недель (Three-month progress: a vocabulary chart with a week slider)

MA001Витрина с фильтрами, FLIP-перестановкой и быстрым просмотром лицензий (Showcase with filters, FLIP reordering and a license quick view)

MA002Конструктор набора со шкалой растущей скидки и мини-корзиной (Bundle builder with a growing-discount scale and a mini cart)

MA003Лицензии-билеты с перфорацией и пересчётом от базовой цены (License tickets with perforation and prices from a base price)

RE003Меню с разделами и фото у курсора (Menu with sections and a cursor photo)

RE005Галерея зала с параллаксом и лайтбоксом (Hall gallery with parallax and a lightbox)

AP001Песочница геокодера: адрес → точка на CSS-карте и JSON-ответ (Geocoder sandbox: address → a dot on a CSS map and a JSON response)

AP002Статус-панель API: регионы с лампочками, живая p50 и спарклайны за 24 ч (API status board: regions with lamps, live p50 and 24-hour sparklines)

AP001Возможности с липким телефоном, экран меняется по прокрутке (Features with a sticky phone whose screen changes on scroll)

AP002«До / после» с ползунком сравнения графиков (“Before / after” with a chart comparison slider)

OP001Песочница: переключатели меняют код и живую таблицу (Playground: toggles change the code and a live table)

PD001Список эпизодов (Episode List)

PD002Карточка выпуска (Episode Card)

PD003Промо с подпиской (Podcast Promo)

PD004Лента эпизодов, где длительность — длина полосы (Episode list where duration is bar length)

PD005Цитаты бегущими строками в разные стороны (Quotes as marquees running opposite ways)

PD006Где слушать: статистика count-up и платформы с наклоном (Where to listen: count-up stats and tilting platforms)

PD007Мини-плеер у нижнего края по событию (Bottom mini-player driven by events)

HO001Каталог проектов домов с фильтром по площади (House project catalog with an area filter)

HO002Калькулятор стоимости дома с растущим силуэтом (House cost calculator with a growing silhouette)

HO003Технология клеёного бруса: балка раскладывается на ламели при прокрутке (Glulam technology: a beam splits into lamellas on scroll)

HO004Этапы стройки дома с липким фото текущего этапа (House construction stages with a sticky photo of the current stage)

HO005Построенные дома: счётчики и лента фото с прокруткой (Built homes: counters and a scrolling photo rail)

Полка выпечки с перетаскиванием и остатками (Pastry shelf with drag-to-scroll and stock counts)

Шкала крепости кофе с наполняющимся стаканом (Coffee strength slider with a filling cup)

Конструктор коробки к завтраку (Breakfast box builder)

Scroll-история «36 часов до буханки» (Scroll story “36 hours to a loaf”)

Перфокарта со штампами и подписка на хлеб (Punch card with stamps and a bread subscription)

«Что даёт ваша сумма»: чипы, ползунок и перерисовывающаяся карточка (“What your amount buys”: chips, a slider and a redrawing card)

Истории подопечных: лента конвертов с drag-scroll и печатающимся письмом (Beneficiary stories: a drag-scroll lane of envelopes with a typing letter)

Отчётность фонда: кольцевая диаграмма по годам и штамп «0 % на рекламу» (Foundation reporting: a donut chart by year and a “0% on ads” stamp)

Карта помощи: точки зажигаются по очереди с числами подопечных (Help map: dots light up in turn with beneficiary counts)

«Стать волонтёром»: чипы ролей и дней, живой бейдж и счётчик «сегодня помогли» (“Become a volunteer”: role and day chips, a live badge and a “helped today” counter)

Конструктор боула: ингредиенты с фото падают в миску, калории и цена на лету (Bowl builder: ingredient photos drop into the bowl, calories and price on the fly)

Зона доставки на Яндекс Карте: кольца зон от кухни, метки адресов, клик → время и цена (Delivery zones on a Yandex map: zone rings around the kitchen, address pins, click → time and price)

Трекер заказа: шаги с живым прогрессом и телефон с картой, по которой едет курьер (Order tracker: steps with live progress and a phone with a map where the courier drives)

Отзывы-стикеры с эмодзи-реакциями и живым счётчиком заказов (Sticker reviews with emoji reactions and a live orders counter)

Каталог букетов списком: картинка следует за курсором (Bouquet catalogue as a list: the image follows the cursor)

Конструктор букета: стебли растут в вазе, цена и срок считаются (Bouquet builder: stems grow in the vase, price and lifetime are computed)

Доставка к часу: лента времени от текущего момента и форма заказа (Delivery to the hour: a time tape from the current moment and an order form)

Сезонный календарь: 12 месяцев лентой с drag-scroll (Seasonal calendar: 12 months as a drag-scroll ribbon)

Уход за цветами: аккордеон с прорисовкой иконок и счётчик букетов (Flower care: an accordion with self-drawing icons and a bouquet counter)

Калькулятор услуг детейлинга: чипы, класс авто, итог на лету (Detailing service calculator: chips, car class, live total)

До/после детейлинга: шторка с перетаскиванием и вкладки «фары / кузов / салон» (Detailing before/after: a draggable curtain with “lights / body / interior” tabs)

Процесс автосервиса: таймлайн четырёх шагов с прогрессом по прокрутке (Car service process: a four-step timeline with scroll progress)

Запись в автосервис: сетка слотов на неделю и панель заказа (Car service booking: a week slot grid and an order panel)

Для кого: раздвигающиеся плитки (Who it’s for: expanding tiles)

Программа закреплённой сценой по неделям (Curriculum as a pinned scene by week)

Результаты выпускников горизонтальной лентой (Graduate results as a horizontal lane)

Неделя курса календарной лентой (A course week as a calendar lane)

Подборка объектов с фильтром (Listings grid with filter)

Районы на стилизованной карте (Districts on a stylised map)

Шаги сделки в ряд (Deal steps in a row)

Ипотечный калькулятор (Mortgage calculator)

Калькулятор сметы: площадь × тип ремонта × опции → цена и срок (Renovation estimate calculator: area × type × options → price and weeks)

Этапы работ диаграммой Ганта, по которой едет маркер при прокрутке (Work stages as a Gantt chart with a marker that rides along on scroll)

Объекты до/после со шторкой сравнения и переключателем объектов (Before/after projects with a comparison slider and a project switcher)

Стройка онлайн: прогресс-кольцо от сегодняшней даты и лента отчётов по дням (Site live: a progress ring driven by today's date and a day-by-day report feed)

Экстренная кнопка «Срочно» с панелью «что делать сейчас» (Emergency “Urgent” button with a “what to do now” panel)

Карта питомца: SVG-схема тела с хотспотами услуг (Pet map: an SVG body scheme with service hotspots)

Симптом-чекер: чипы → к какому врачу и насколько срочно (Symptom checker: chips → which doctor and how urgent)

Груминг: ползунок длины стрижки с CSS-питомцем и калькулятором (Grooming: a haircut length slider with a CSS pet and a calculator)

Книга: 3D-обложка, которая открывается, форматы и счётчик страниц (The book: a 3D cover that opens, formats and a page counter)

Архив текстов: крупный список, превью у курсора и раскрытие в списке (Text archive: a big list, a preview at the cursor and inline expansion)

Чтение по прокрутке: закладка-прогресс, сноски на полях, чернильные подчёркивания (Scroll reading: a bookmark progress, margin footnotes, ink underlines)

Отзывы читателей как заметки на полях страницы с ротацией (Reader reviews as rotating notes in a page's margins)

Живой баланс: график рисуется, операции появляются, период морфит линию (Live balance: the chart draws itself, operations appear, the period morphs the line)

Калькулятор экономии на комиссиях с ползунком оборота (Fee savings calculator with a turnover slider)

Безопасность по прокрутке: карта проходит четыре слоя защиты (Security on scroll: the card passes through four layers of protection)

Рассвет за 30 минут: sticky-сцена, где комната светлеет по прокрутке (Sunrise in 30 minutes: a sticky scene where the room brightens on scroll)

Взрыв-схема гаджета: детали разъезжаются по ползунку и в viewport (Gadget exploded view: parts spread apart by a slider and in the viewport)

Предзаказ гаджета: свотчи меняют цвет лампы, отсчёт до отгрузки, магнитная кнопка (Gadget preorder: swatches recolour the lamp, a shipping countdown, a magnetic button)

Тест уровня: пять вопросов-чипов и шкала A1–C1 с маркером (Level test: five chip questions and an A1–C1 scale with a marker)

Расписание групп: неделя × время, фильтры и «ближайший старт через N дней» (Group schedule: week × time, filters and “next start in N days”)

Прогресс за три месяца: график словарного запаса с ползунком недель (Three-month progress: a vocabulary chart with a week slider)

Витрина с фильтрами, FLIP-перестановкой и быстрым просмотром лицензий (Showcase with filters, FLIP reordering and a license quick view)

Конструктор набора со шкалой растущей скидки и мини-корзиной (Bundle builder with a growing-discount scale and a mini cart)

Лицензии-билеты с перфорацией и пересчётом от базовой цены (License tickets with perforation and prices from a base price)

Меню с разделами и фото у курсора (Menu with sections and a cursor photo)

Галерея зала с параллаксом и лайтбоксом (Hall gallery with parallax and a lightbox)

Песочница геокодера: адрес → точка на CSS-карте и JSON-ответ (Geocoder sandbox: address → a dot on a CSS map and a JSON response)

Статус-панель API: регионы с лампочками, живая p50 и спарклайны за 24 ч (API status board: regions with lamps, live p50 and 24-hour sparklines)

Возможности с липким телефоном, экран меняется по прокрутке (Features with a sticky phone whose screen changes on scroll)

«До / после» с ползунком сравнения графиков (“Before / after” with a chart comparison slider)

Песочница: переключатели меняют код и живую таблицу (Playground: toggles change the code and a live table)

Список эпизодов (Episode List)

Карточка выпуска (Episode Card)

Промо с подпиской (Podcast Promo)

Лента эпизодов, где длительность — длина полосы (Episode list where duration is bar length)

Цитаты бегущими строками в разные стороны (Quotes as marquees running opposite ways)

Где слушать: статистика count-up и платформы с наклоном (Where to listen: count-up stats and tilting platforms)

Мини-плеер у нижнего края по событию (Bottom mini-player driven by events)

Каталог проектов домов с фильтром по площади (House project catalog with an area filter)

Калькулятор стоимости дома с растущим силуэтом (House cost calculator with a growing silhouette)

Технология клеёного бруса: балка раскладывается на ламели при прокрутке (Glulam technology: a beam splits into lamellas on scroll)

Этапы стройки дома с липким фото текущего этапа (House construction stages with a sticky photo of the current stage)

Построенные дома: счётчики и лента фото с прокруткой (Built homes: counters and a scrolling photo rail)