initiate drf app
This commit is contained in:
255
frontend/components/Footer.tsx
Normal file
255
frontend/components/Footer.tsx
Normal file
@@ -0,0 +1,255 @@
|
||||
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
|
||||
Reference in New Issue
Block a user