in9var

Привет! Сегодня покажу, как за несколько минут с помощью готовой библиотеки реализовать переключение между темной и светлой темой на сайте. Выбранная тема сохраняется в localStorage браузера и отлично работает на всех устройствах. Код данной статьи доступен в репозитории GitHub по ссылке. Вводим команду в консоль: npm i next-themes Данный пакет сильно упрощает реализацию переключения тем: он берет на себя все заботы о хранении выбранной темы и решает такие проблемы, как «вспышки» при обновлении страницы с выбранной темной темой...

В данной статье я подробно рассмотрю процесс размещения нашего лендинга на хостинге на примере хостинг-провайдера Jino. Это не реклама данного хостинга, у меня есть ряд претензий к его работе, но это обычный хостинг по доступной цене, который похож на сотни других. Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5...

Привет! Сегодня подключим счетчик Яндекс Метрики, я покажу метод, который использую для своих сайтов на Nextjs, он позволяет считывать посещения с разных роутов, это может вам пригодиться, если в свой лендинг вы решите добавить пару дополнительных страниц, лишним это уж точно не будет. Если готовы, тогда погнали! Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4...

Привет. Сегодня настроим значки favicon для разных браузеров и устройств. Также проведем небольшой рефакторинг предыдущего кода. Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5. Верстка секции About Часть 6. Верстка секции Gallery Часть 7. Верстка секции WhyUs Часть 8. Верстка секции Catalogue Часть 9. Верстка секции Map Часть 10...

Привет! Сегодня будет короткая статья про основные метаданные для нашего лендинга — это title, description и keywords, это минимальная SEO-настройка для сайта, которая обязательно должна быть. Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5. Верстка секции About Часть 6. Верстка секции Gallery Часть 7. Верстка секции WhyUs Часть 8...

Сегодня реализуем анимацию появления секций при скролле лендинга с помощью библиотеки анимаций framer-motion. Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5. Верстка секции About Часть 6. Верстка секции Gallery Часть 7. Верстка секции WhyUs Часть 8. Верстка секции Catalogue Часть 9. Верстка секции Map Часть 10...

Привет! Сегодня сделаем мобильное анимированное меню для нашего лендинга, применим библиотеку framer-motion (motion) для красивого эффекта открытия. Будет интересно, погнали! Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5. Верстка секции About Часть 6. Верстка секции Gallery Часть 7. Верстка секции WhyUs Часть 8...

Сегодня настроим якорные ссылки для всех пунктов меню и кнопки «Перейти в каталог», это позволит использовать навигацию по нашему сайту, также проведем небольшой рефакторинг кода и вынесем некоторые части кода в отдельные компоненты для последующего удобства работы с ними. Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5...

Верстаем последнюю секцию лендинга — Footer. Как всегда, делаем ее адаптивной под разные разрешения. Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5. Верстка секции About Часть 6. Верстка секции Gallery Часть 7. Верстка секции WhyUs Часть 8. Верстка секции Catalogue Часть 9. Верстка секции Map Часть 10...

Сегодня сделаем секцию Map нашего лендинга. Вставим интерактивную карту Яндекса через iframe. Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5. Верстка секции About Часть 6. Верстка секции Gallery Часть 7. Верстка секции WhyUs Часть 8. Верстка секции Catalogue Часть 9. Верстка секции Map Часть 10. Верстка секции Footer Часть 11...

Наиболее сложная секция нашего лендинга — это Catalogue, сегодня мы ей и займемся. Погнали! Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5. Верстка секции About Часть 6. Верстка секции Gallery Часть 7. Верстка секции WhyUs Часть 8. Верстка секции Catalogue Часть 9. Верстка секции Map Часть 10. Верстка секции Footer Часть 11...

Сегодня будем верстать секцию WhyUs нашего шаблона, настроим контрастный фоновый цвет и, как всегда, сделаем верстку адаптивной под мобильные устройства. Начнем! Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5. Верстка секции About Часть 6. Верстка секции Gallery Часть 7. Верстка секции WhyUs Часть 8. Верстка секции Catalogue Часть 9...