Библиотека Footer Standard

Сырьевые компоненты: копируй структуру и меняй стили под твой проект.

Все компоненты адаптивны :

max-width: 1920px;

min-width: 320px;

Footer Standard 01.

Начинаем с фундаментального варианта.

Это «рабочая лошадка» для серьезных бизнес-сайтов.

Адрес в системе :

// src / library / layout / footers / FooterStandard01 /

Footer Standard 02.

Этот вариант — мощный маркетинговый инструмент. Его задача не просто «быть внизу», а активно вовлекать пользователя.

Адрес в системе :

// src / library / layout / footers / FooterStandard02 /

Footer Standard 03.

Этот компонент идеально подходит для компаний, которым важно подчеркнуть свое физическое присутствие: офисы, шоурумы или клиники.

Адрес в системе :

// src / library / layout / footers / FooterStandard03 /

Footer Standard 04.

Этот вариант — настоящий вызов стандартным сеткам.

Здесь мы отказываемся от симметрии в пользу динамики. Мы используем CSS Grid, чтобы создать асимметричную композицию, где элементы разного размера создают ритм.

Адрес в системе :

// src / library / layout / footers / FooterStandard04 /

Footer Standard 05.

Вся мощь этого футера заключается в его многослойности и сетке, которую мы прописали «в лоб» в стиле JSX-понятным для разработчика любого уровня.

Адрес в системе :

// src / library / layout / footers / FooterStandard05 /

Footer Standard 06.

Этот проектный вариант — классический пример «производственного» или «строительного» футера. Его главная особенность — «вылетающий» блок контактов с фоновым изображением и плотная информационная сетка.

Адрес в системе :

// src / library / layout / footers / FooterStandard06 /

Footer Standard 07.

Этот вариант, представляет собой классический информационный футер с акцентом на доверие. Его главная особенность — использование затемненного фонового изображения через псевдоэлемент ::before, что создает глубину и премиальный эффект "киношности".

Адрес в системе :

// src / library / layout / footers / FooterStandard07 /

Footer Standard 08.

Этот вариант — это отличный пример промышленного футера с «плавающим» (floating) блоком обратной связи. Главная визуальная фишка здесь — белая карточка rectangle, которая перекрывает границу предыдущей секции и основного тела футера за счет отрицательного top.