Создаем лендинг сайт с нуля: верстка компонента About #5

Продолжим делать наш проект лендинга на Nextjs и сегодня сверстаем секцию About. Много времени на это не потребуется, поэтому урок будет достаточно коротким. Приступим!

Полезные ссылки:

• Шаблон лендинга, который мы будем делать, доступен в Figma по ссылке.
• Код данного урока доступен в репозитории GitHub по ссылке.
• Подписывайтесь на мой Дзен канал

Подготовка изображения

В созданную нами ранее папку 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.

Шаблон лендинга, который мы будем делать, доступен в Figma по ссылке.

Код данного урока доступен в репозитории GitHub по ссылке.