Создаем крутой лендинг сайт с нуля: верстка Footer и контакты #10

Верстаем последнюю секцию лендинга — Footer. Как всегда, делаем ее адаптивной под разные разрешения.

Превью | Канал dzen.ru/in9var

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

Часть 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. Публикуем проект на хостинге

• Демо–проект лендинга можно посмотреть по ссылке.
• Шаблон лендинга, который мы будем делать, доступен в Figma по ссылке.
• Код данного урока доступен в репозитории GitHub по ссылке.
• В моём блоге этот урок в удобном для чтения виде по ссылке.

Создание компонента Footer.jsx

В папке sections создадим файл компонента Footer.jsx.

Содержимое файла Footer.jsx

import Link from 'next/link';

import { IoMdMail } from 'react-icons/io';

import { BiLogoTelegram } from 'react-icons/bi';

export default function Footer() {

return (

<section className='flex w-full text-on-secondary bg-secondary'>

<div className='flex flex-col lg:flex-row gap-10 w-full px-5 mx-auto max-w-screen-xl py-16 '>

<div className='flex flex-col gap-5 lg:w-1/3'>

<Link href='/' className='font-black text-4xl'>

Логотип

</Link>

<span className='font-light text-sm text-on-secondary/40'>

Copyright © {new Date().getFullYear()} Company name

</span>

<div className='flex gap-6 items-start'>

<Link href={'mailto:mail@email.ru'}>

<div className='flex bg-primary hover:brightness-110 rounded-md text-on-primary p-2 transition-all duration-200 ease-in-out'>

<IoMdMail className='flex bg-primary rounded-md text-on-primary' size={18} />

</div>

</Link>

<Link href={'tg://resolve?domain=@someTgAccountName'}>

<div className='flex bg-primary hover:brightness-110 rounded-md text-on-primary p-2 transition-all duration-200 ease-in-out'>

<BiLogoTelegram size={18} />

</div>

</Link>

</div>

</div>

<div className='flex lg:justify-center lg:w-1/3'>

<ul className='flex flex-col xl:flex-row gap-12 font-light'>

<li>

<Link href={'#products'}>Наша продукция</Link>

</li>

<li>

<Link href={'#about'}>О нас</Link>

</li>

<li>

<Link href={'#contacts'}>Контакты</Link>

</li>

</ul>

</div>

<div className='flex lg:w-1/3 lg:justify-end'>

<div className='flex flex-col gap-10 lg:gap-5 lg:items-end'>

<span className='font-bold text-2xl'>+7 999 888 88 88</span>

<span className='font-light text-sm'>г. Москва, ул. Строителей, 99 Н</span>

<span className='font-light text-sm'>Пн-Вс: с 9:00 до 20:00</span>

</div>

</div>

</div>

</section>

);

}

Простая верстка на флексах с фиксированной шириной w-1/3 на десктопных разрешениях.

В строке копирайта генерируем текущую дату ( Copyright © {new Date().getFullYear()} Company name )

Подключение секции к шаблону

В фале page.jsx подключим нашу новую секцию

Содержимое файла page.jsx

'use client';

import About from './components/sections/About';

import Catalogue from './components/sections/Catalogue';

import Footer from './components/sections/Footer';

import Gallery from './components/sections/Gallery';

import Hero from './components/sections/Hero';

import Map from './components/sections/Map';

import WhyUs from './components/sections/WhyUs';

export default function Home() {

return (

<main>

<Hero />

<About />

<Gallery />

<WhyUs />

<Catalogue />

<Map />

<Footer />

</main>

);

}

В dev-режиме, мы получим вот такой блок нашего сайта:

В следующей статье проведем небольшой рефакторинг, вынесем код логотипа и социальных иконок в отдельные элементы, а также сделаем отдельный блок для карточки товара.

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

Не забудь подписаться на канал, а также заходи на мой блог blog.in9var.ru, а также можешь посетить мой основной сайт — in9var.ru.