256 lines
9.0 KiB
TypeScript
256 lines
9.0 KiB
TypeScript
import React from 'react'
|
||
import Image from 'next/image'
|
||
import Link from 'next/link'
|
||
import {
|
||
FaInstagram,
|
||
FaTelegram,
|
||
FaVk,
|
||
FaFacebook,
|
||
FaYoutube,
|
||
FaTiktok,
|
||
} from 'react-icons/fa'
|
||
import EmailHandler from './EmailHandler'
|
||
|
||
const Footer = () => {
|
||
return (
|
||
<div>
|
||
<div className="bg-[#272424]">
|
||
<div className="flex flex-col md:flex-row px-6 py-8 w-[93%] mx-auto gap-8 md:gap-16">
|
||
{/* левый таб */}
|
||
<div className="flex flex-col space-y-5 w-full md:w-1/4 items-center md:items-start text-center md:text-left">
|
||
<Image
|
||
src="/images/footerLogo.png"
|
||
alt="logo"
|
||
width={50}
|
||
height={50}
|
||
/>
|
||
<span className="text-sm text-gray-300">
|
||
Подпишись и будь в курсе всех событий, а также получай подарки и
|
||
бонусы от Trip With Bonus
|
||
</span>
|
||
<EmailHandler />
|
||
<div className="flex gap-4 justify-center md:justify-start">
|
||
<a
|
||
href="https://instagram.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<FaInstagram
|
||
size={20}
|
||
className="text-white hover:text-orange transition-colors"
|
||
/>
|
||
</a>
|
||
<a
|
||
href="https://telegram.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<FaTelegram
|
||
size={20}
|
||
className="text-white hover:text-orange transition-colors"
|
||
/>
|
||
</a>
|
||
<a
|
||
href="https://vk.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<FaVk
|
||
size={20}
|
||
className="text-white hover:text-orange transition-colors"
|
||
/>
|
||
</a>
|
||
<a
|
||
href="https://facebook.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<FaFacebook
|
||
size={20}
|
||
className="text-white hover:text-orange transition-colors"
|
||
/>
|
||
</a>
|
||
<a
|
||
href="https://tiktok.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<FaTiktok
|
||
size={20}
|
||
className="text-white hover:text-orange transition-colors"
|
||
/>
|
||
</a>
|
||
<a
|
||
href="https://youtube.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<FaYoutube
|
||
size={20}
|
||
className="text-white hover:text-orange transition-colors"
|
||
/>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ссылки */}
|
||
<div className="flex flex-col md:flex-row justify-between w-full md:w-2/4 space-y-8 md:space-y-0 items-center md:items-start text-center md:text-left">
|
||
{/* информация */}
|
||
<div className="flex flex-col space-y-4 items-center md:items-start">
|
||
<div className="text-white text-xl font-medium md:pb-5">
|
||
Информация
|
||
</div>
|
||
<div className="flex flex-col space-y-1">
|
||
<Link
|
||
href="/"
|
||
className="text-gray-300 hover:text-orange transition-colors"
|
||
>
|
||
Перевезти посылку
|
||
</Link>
|
||
<Link
|
||
href="/"
|
||
className="text-gray-300 hover:text-orange transition-colors"
|
||
>
|
||
Отправить посылку
|
||
</Link>
|
||
<Link
|
||
href="/"
|
||
className="text-gray-300 hover:text-orange transition-colors"
|
||
>
|
||
Для отправителя
|
||
</Link>
|
||
<Link
|
||
href="/"
|
||
className="text-gray-300 hover:text-orange transition-colors"
|
||
>
|
||
Для перевозчика
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* О Trip With Bonus */}
|
||
<div className="flex flex-col space-y-4 items-center md:items-start">
|
||
<div className="text-white text-xl font-medium md:pb-5">
|
||
О Trip With Bonus
|
||
</div>
|
||
<div className="flex flex-col space-y-1">
|
||
<Link
|
||
href="/"
|
||
className="text-gray-300 hover:text-orange transition-colors"
|
||
>
|
||
Новости
|
||
</Link>
|
||
<Link
|
||
href="/"
|
||
className="text-gray-300 hover:text-orange transition-colors"
|
||
>
|
||
Партнерам
|
||
</Link>
|
||
<Link
|
||
href="/"
|
||
className="text-gray-300 hover:text-orange transition-colors"
|
||
>
|
||
Реклама
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col space-y-4 items-center md:items-start">
|
||
<div className="text-white text-xl font-medium md:pb-5">
|
||
Кооперация
|
||
</div>
|
||
<div className="flex flex-col space-y-1">
|
||
<Link
|
||
href="/"
|
||
className="text-gray-300 hover:text-orange transition-colors"
|
||
>
|
||
Реклама
|
||
</Link>
|
||
<Link
|
||
href="/"
|
||
className="text-gray-300 hover:text-orange transition-colors"
|
||
>
|
||
Поддержка
|
||
</Link>
|
||
<Link
|
||
href="/"
|
||
className="text-gray-300 hover:text-orange transition-colors"
|
||
>
|
||
Контакты
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col space-y-4 w-full md:w-1/4 items-center md:items-start text-center md:text-left">
|
||
<div className="text-white text-xl font-medium md:pb-5">
|
||
Свяжитесь с нами:
|
||
</div>
|
||
<div>
|
||
<div className="flex flex-col space-y-3">
|
||
<a
|
||
href="tel:+375291234567"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="hover:opacity-80 transition-opacity text-gray-300 hover:text-orange"
|
||
>
|
||
+ 7 (777) 777-77-77{' '}
|
||
</a>
|
||
<a
|
||
href="mailto:sales@tripwb.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="hover:opacity-80 transition-opacity text-gray-300 hover:text-orange"
|
||
>
|
||
sales@tripwb.com
|
||
</a>
|
||
<a
|
||
href="mailto:support@tripwb.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="hover:opacity-80 transition-opacity text-gray-300 hover:text-orange"
|
||
>
|
||
support@tripwb.com
|
||
</a>
|
||
</div>
|
||
<div className="flex flex-col md:flex-row gap-2 mt-7 justify-center md:justify-start">
|
||
<Link
|
||
href="/register"
|
||
className="bg-orange hover:bg-orange/80 text-white px-4 py-2 rounded-2xl text-base font-medium"
|
||
>
|
||
Регистрация
|
||
</Link>
|
||
<Link
|
||
href="/login"
|
||
className="text-white hover:text-orange transition-colors py-2"
|
||
>
|
||
Войти
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Нижняя часть футера */}
|
||
<div>
|
||
<div className="flex flex-col justify-between md:flex-row px-6 py-4 md:py-8 w-[95%] mx-auto text-center md:text-left">
|
||
<div>Copyright © {new Date().getFullYear()}. Все права защищены.</div>
|
||
<div className="flex flex-col md:flex-row py-4 md:py-0 md:space-x-5 items-center md:items-start">
|
||
<Link href="/" className="hover:text-orange">
|
||
Публичная оферта
|
||
</Link>
|
||
<Link href="/" className="hover:text-orange">
|
||
Политика конфиденциальности
|
||
</Link>
|
||
<Link href="/" className="hover:text-orange">
|
||
Правила пользования сервисом
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Footer
|