Библиотека Quote Saccents
Сырьевые компоненты: копируй структуру и меняй стили под твой проект.
Все компоненты адаптивны :
max-width: 1920px;
min-width: 320px;
Раздел «Акценты и Цитаты» — это эмоциональный центр страницы. Такие блоки нужны, чтобы сделать паузу в потоке информации, выделить главную мысль или привести веское мнение эксперта.
Для этого раздела мы сделаем акцент на типографике, необычных фонах и визуальном весе.
BigBoldQuote
BigBoldQuote — это мощный визуальный инструмент. Мы сделали его так, чтобы он служил «разделителем» между смысловыми блоками, давая пользователю возможность перевести дух и осознать главную мысль.
Основная фишка: огромные декоративные кавычки на заднем плане и безупречная типографика.
Дизайн — это не то, как предмет выглядит, а то, как он работает. Истинная ценность кроется в простоте и функциональности.
Адрес в системе :
// src / library / blocks / quotesaccents / BigBoldQuote /
ExpertOpinionCard
ExpertOpinionCard — это идеальный способ добавить «человеческое лицо» бренду. В отличие от предыдущей масштабной цитаты, этот блок более персонализирован. Он выглядит как аккуратная, дорогая карточка, где фотография автора и его слова работают в единой связке.
Мы сделали дизайн, где фото немного выходит за пределы карточки, чтобы добавить блоку объема и «премиальности».
«Мы не просто пишем код, мы создаем цифровой фундамент для роста вашего бизнеса. Каждая деталь имеет значение для конечного результата.»
Александр Волков
Technical Director & Partner
Адрес в системе :
// src / library / blocks / quotesaccents / ExpertOpinionCard /
AccentParallaxBlock
AccentParallaxBlock — это компонент, который добавляет странице динамики без использования тяжелых скриптов. Мы создали эффект, при котором фоновое изображение движется медленнее, чем текст при скролле.
Для чистоты кода и простоты понимания новичками, мы используем классическое CSS-решение background-attachment: fixed. Это даст тот самый «кинематографичный» эффект наслоения.
Наше видение
Мы создаем не просто интерфейсы, а мосты между вашими идеями и потребностями ваших пользователей.
Технологии в гармонии с дизайном
Адрес в системе :
// src / library / blocks / quotesaccents / AccentParallaxBlock /
SideLineAccent
SideLineAccent — это воплощение принципа «меньше значит больше». Этот компонент идеально подходит для того, чтобы вставить важное примечание или манифест компании прямо посреди контента.
Его главная особенность — длинная, акцентная вертикальная линия, которая визуально «держит» текст и создает архитектурную строгость.
Ключевой принцип
Качество — это делать что-либо правильно, даже когда никто не смотрит. Мы не идем на компромиссы, когда речь заходит о надежности.
Адрес в системе :
// src / library / blocks / quotesaccents / SideLineAccent /
VideoQuoteOverlay
Используем YouTube видео в качестве фона — это высший пилотаж для лендинга. Это делает страницу «живой» и очень дорогой визуально.
Для реализации VideoQuoteOverlay с YouTube нам понадобится небольшая хитрость: мы используем стандартный iframe с параметрами автовоспроизведения, выключения звука и скрытия элементов управления, чтобы он вел себя как обычный видео-фон.
Будущее принадлежит тем, кто верит в красоту своей мечты и не боится воплощать её в цифровой реальности.
Адрес в системе :
// src / library / blocks / quotesaccents / VideoQuoteOverlay /
StatisticHighlight
StatisticHighlight — это компонент, который превращает сухую статистику в мощный эмоциональный аргумент.
В серии «Акценты и Цитаты» он нужен для того, чтобы подтвердить твои слова твердыми фактами. Мы не просто пишем «Мы надежные», мы выносим огромную цифру «10+» как визуальный якорь, вокруг которого строится всё остальное сообщение.
За каждым успешным проектом стоит не просто технология, а десятилетие отточенных процессов и тысячи решенных задач.
Мы превращаем накопленный опыт в ваш цифровой успех.
Адрес в системе :
// src / library / blocks / quotesaccents / StatisticHighlight /
DualContrastQuote
DualContrastQuote — это самый смелый и архитектурный компонент. Мы разделили экран на две контрастные половины (светлую и темную), где цитата начинается на одной стороне и эффектно заканчивается на другой.
Этот прием часто используется в премиальном веб-дизайне, чтобы подчеркнуть дуализм: например, «Проблема» и «Решение» или «Прошлое» и «Будущее».
Сложность — это то, что нужно победить, чтобы обрести истинную простоту.
Сложность — это то, что нужно победить, чтобы обрести истинную простоту.
Адрес в системе :
// src / library / blocks / quotesaccents / DualContrastQuote /
Смотреть каталог