Цветочная мастерская
Сайт цветочной мастерской «Стебель» в духе ботанического журнала — бумага, чернила, маковый акцент, антиква Cormorant: первый экран с букетом из SVG-слоёв, который собирается при загрузке и разъезжается параллаксом, каталог-оглавление с картинкой за курсором, конструктор букета, где стебли вырастают из вазы, доставка к часу от текущего времени, сезонный календарь лентой с drag-scroll, уход с прорисовывающимися иконками, о мастерской с коллажем, отзывы-открытки, подписка с квитанцией и подвал с картой. Cormorant, Golos Text и Caveat.
Из чего собрано
11 блоков из каталога, в порядке появления на странице. Каждый ставится своей командой; ничего не пересоздаётся.
1. Шапка
Шапка мастерской с логотипом-стеблем и рукописной пометкойnavbar-036
Логотип-стебель прорисовывается, рукописная пометка, чернильная кнопка, бургер.
2. Первый экран
Хиро с букетом из слоёв: собирается при загрузке, разъезжается на прокруткеhero-036
Букет из пяти SVG-слоёв встаёт при загрузке, на прокрутке слои разъезжаются.
3. Каталог
Каталог букетов списком: картинка следует за курсоромflowers-001
Оглавление букетов, картинка следует за курсором с наклоном.
4. Конструктор
Конструктор букета: стебли растут в вазе, цена и срок считаютсяflowers-002
Стебли вырастают из вазы, цена, срок и «живёт N дней» на лету.
5. Доставка
Доставка к часу: лента времени от текущего момента и форма заказаflowers-003
Лента окон от текущего времени, ночью — «утром первым», форма заказа.
6. Сезон
Сезонный календарь: 12 месяцев лентой с drag-scrollflowers-004
Двенадцать месяцев лентой с drag-scroll, текущий подсвечен.
7. Уход
Уход за цветами: аккордеон с прорисовкой иконок и счётчик букетовflowers-005
Аккордеон с иконками, которые прорисовываются штрихом; счётчик букетов.
8. О мастерской
О мастерской: коллаж со скотчем, буквица и полароиды флористовabout-017
Коллаж со скотчем, буквица, факты, полароиды флористов.
9. Отзывы
Отзывы-открытки: рукописный текст, марка и штемпельtestimonials-028
Открытки с маркой и штемпелем, scroll-snap.
10. Подписка
Цветы по подписке: частота и размер чипами, квитанция с расчётомsubscribe-011
Чипы частоты и размера, квитанция с зубчатым краем.
11. Подвал
Подвал с контактами, картой и огромным контурным именемfooter-035
Адрес, часы, карта в бумажной рамке, контурное имя.
Pro
Точный состав, код страницы и ссылка для агента — в PRO
Демо и список блоков открыты всем. Подписчику показываются пропсы каждого блока как в демо, общие правила темы, промпты картинок и одна ссылка, по которой ИИ-агент собирает такую же страницу.
Открыть PRO