Продолжим делать наш проект лендинга на Nextjs и сегодня сверстаем секцию About. Много времени на это не потребуется, поэтому урок будет достаточно коротким. Приступим!
Полезные ссылки:
Часть 1. Подготовка и настройка проекта
Часть 2. Настройка конфигурации и установка необходимых библиотек
Часть 3. Создание CSS-переменных и верстка блока Header
Часть 4. Верстка секции Hero, создание компонента Button
Часть 5. Верстка секции About
Часть 6. Верстка секции Gallery
Часть 7. Верстка секции WhyUs
Часть 8. Верстка секции Catalogue
Часть 9. Верстка секции Map
Часть 10. Верстка секции Footer
Часть 11. Создание якорных ссылок, рефакторинг
Часть 12. Создание мобильного меню
Часть 13. Анимация секций при скролле
Часть 14. Установка метаданных
Часть 15. Настройка Favicon.ico
Часть 16. Настройка счетчика Яндекс Метрики
Часть 17. Публикуем проект на хостинге
Подготовка изображения
В созданную нами ранее папку images загрузите любое понравившееся вам изображение с соотношением сторон примерно 4:3, правда, это не так важно, потому что мы будем использовать абсолютное позиционирование изображения в родительском контейнере.
Назовем файл изображения about.jpg.
В дальнейшем я более подробно расскажу про настройку и оптимизацию изображений в отдельном уроке.
Создание компонента About.jsx
В папке sections создадим файл компонента About.jsx.
Содержимое файла About.jsx
import aboutImage from '@/app/images/about.jpg';
import ExportedImage from 'next-image-export-optimizer';
export default function About() {
return (
<>
<section className='flex flex-col lg:flex-row gap-10 lg:gap-20 w-full px-5 mx-auto max-w-screen-xl py-12 lg:py-32'>
<div className='flex-1 flex flex-col'>
<h2 className='text-2xl lg:text-5xl font-black mb-8'>Дома для сурового климата</h2>
<p className='font-light mb-4'>
Строительство в суровых условиях требует особого профессионализма. Наша компания специализируется на
возведении домов в регионах с экстремальными погодными условиями. Мы учитываем все климатические
особенности: морозы, ветер и перепады температур, применяя современные технологии теплоизоляции и
гидроизоляции.
</p>
<p className='font-light'>
Наши решения включают многослойное утепление, энергоэффективные стеклопакеты и специальные ветрозащитные
мембраны. Особое внимание уделяется фундаментам со свайными конструкциями и утепленными ростверками. Все
дома оснащены системами энергосбережения и рекуперации тепла.
</p>
</div>
<div className='flex-none lg:h-80 relative aspect-[4/3]'>
<ExportedImage
alt='about image'
src={aboutImage.src}
fill
loading='lazy'
placeholder='blur'
className='object-cover'
/>
</div>
</section>
</>
);
}
Немного про верстку: блок с изображением можно сверстать разными способами, я использую абсолютное позиционирование для того, чтобы не заморачиваться с пропорциями изображения, так как оно будет автоматически подогнано под родительский контейнер.
Для родительского контейнера использую класс aspect-[4/3], можно было бы по старинке использовать (padding-top: 75%), но я предпочитаю современный подход, тем более что aspect-ratio отлично работает в новых браузерах.
Во многих классах Tailwind позволяет использовать собственные значения, что очень удобно, например, мы имеем встроенный класс p-20, что означает padding: 80px, но что, если нам необходимо установить внутренний отступ в 83 px? На помощь приходит данная конструкция p-[83px]. Про Tailwind мы еще поговорим более подробно в будущих статьях.
Подключение секции к шаблону
В фале page.jsx подключим нашу новую секцию
Содержимое файла page.jsx
import About from './components/sections/About';
import Hero from './components/sections/Hero';
export default function Home() {
return (
<main>
<Hero />
<About />
</main>
);
}
В итоге, запустив dev-режим, мы получим вот такой блок нашего сайта:
На сегодня всё!
В следующей статье мы сверстаем секцию Gallery.
Код данного урока доступен в репозитории GitHub по ссылке.
Не забудь подписаться на канал, а также заходи на мой блог blog.in9var.ru, а также можешь посетить мой основной сайт — in9var.ru.