footer desktop
This commit is contained in:
@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
|
|||||||
import { Geist, Geist_Mono } from 'next/font/google'
|
import { Geist, Geist_Mono } from 'next/font/google'
|
||||||
import './globals.css'
|
import './globals.css'
|
||||||
import Header from '@/components/Header'
|
import Header from '@/components/Header'
|
||||||
|
import Footer from '@/components/Footer'
|
||||||
|
|
||||||
const geistSans = Geist({
|
const geistSans = Geist({
|
||||||
variable: '--font-geist-sans',
|
variable: '--font-geist-sans',
|
||||||
@@ -26,11 +27,10 @@ export default function RootLayout({
|
|||||||
}>) {
|
}>) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
|
<html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
|
||||||
<body className="min-h-screen">
|
<body className="min-h-screen flex flex-col">
|
||||||
<main className="min-h-screen">
|
|
||||||
<Header />
|
<Header />
|
||||||
{children}
|
<main className="flex-grow">{children}</main>
|
||||||
</main>
|
<Footer />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
|
|||||||
17
frontend/app/types/index.ts
Normal file
17
frontend/app/types/index.ts
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
export interface TextInputProps {
|
||||||
|
value: string
|
||||||
|
handleChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
|
||||||
|
label?: string
|
||||||
|
placeholder?: string
|
||||||
|
name: string
|
||||||
|
type?: 'text' | 'email' | 'password'
|
||||||
|
className?: string
|
||||||
|
maxLength?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ButtonProps {
|
||||||
|
onClick?: () => void
|
||||||
|
className?: string
|
||||||
|
text?: string
|
||||||
|
type?: 'button'
|
||||||
|
}
|
||||||
@@ -0,0 +1,270 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import TextInput from './ui/TextInput'
|
||||||
|
import {
|
||||||
|
FaInstagram,
|
||||||
|
FaTelegram,
|
||||||
|
FaVk,
|
||||||
|
FaFacebook,
|
||||||
|
FaYoutube,
|
||||||
|
FaTiktok,
|
||||||
|
} from 'react-icons/fa'
|
||||||
|
|
||||||
|
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">
|
||||||
|
<Image
|
||||||
|
src="/images/footerLogo.png"
|
||||||
|
alt="logo"
|
||||||
|
width={50}
|
||||||
|
height={50}
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-300">
|
||||||
|
Подпишись и будь в курсе всех событий, а также получай подарки и
|
||||||
|
бонусы от Trip With Bonus
|
||||||
|
</span>
|
||||||
|
<div className="relative">
|
||||||
|
<TextInput
|
||||||
|
value=""
|
||||||
|
name="email"
|
||||||
|
placeholder="Введите ваш e-mail"
|
||||||
|
className="w-full pr-12 rounded bg-transparent border-white/20 focus:border-orange transition-colors"
|
||||||
|
/>
|
||||||
|
<button className="absolute right-0 top-1/2 -translate-y-1/2 px-6 flex items-center justify-center cursor-pointer">
|
||||||
|
<Image
|
||||||
|
src="/images/subscribe.png"
|
||||||
|
alt="submit"
|
||||||
|
width={56}
|
||||||
|
height={56}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<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">
|
||||||
|
{/* информация */}
|
||||||
|
<div className="flex flex-col space-y-4">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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 gap-2 mt-7">
|
||||||
|
<Link
|
||||||
|
href="/register"
|
||||||
|
className="bg-orange 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">
|
||||||
|
<div>Copyright © {new Date().getFullYear()}. Все права защищены.</div>
|
||||||
|
<div className="flex flex-col md:flex-row py-4 md:py-0 md:space-x-5">
|
||||||
|
<Link href="/" className="hover:underline">
|
||||||
|
Публичная оферта
|
||||||
|
</Link>
|
||||||
|
<Link href="/" className="hover:underline">
|
||||||
|
Политика конфиденциальности
|
||||||
|
</Link>
|
||||||
|
<Link href="/" className="hover:underline">
|
||||||
|
Правила пользования сервисом
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Footer
|
||||||
|
|||||||
@@ -16,13 +16,13 @@ const Header = () => {
|
|||||||
height={50}
|
height={50}
|
||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
{/* Desktop Burger */}
|
|
||||||
<div className="hidden md:block">
|
<div className="hidden md:block">
|
||||||
<Burger />
|
<Burger />
|
||||||
</div>
|
</div>
|
||||||
<Link
|
<Link
|
||||||
href="/"
|
href="/"
|
||||||
className="text-base font-medium px-4 hover:underline hidden md:block"
|
className="text-base font-medium px-4 hover:text-orange transition-colors hidden md:block"
|
||||||
>
|
>
|
||||||
Могу взять посылку
|
Могу взять посылку
|
||||||
</Link>
|
</Link>
|
||||||
@@ -31,22 +31,20 @@ const Header = () => {
|
|||||||
<LangSwitcher />
|
<LangSwitcher />
|
||||||
<Button text="Разместить объявление" className="hidden md:block" />
|
<Button text="Разместить объявление" className="hidden md:block" />
|
||||||
|
|
||||||
{/* Auth Block - Desktop */}
|
|
||||||
<div className="hidden md:block text-base font-medium">
|
<div className="hidden md:block text-base font-medium">
|
||||||
<Link href="/register" className="hover:underline">
|
<Link
|
||||||
|
href="/register"
|
||||||
|
className="hover:text-orange transition-colors"
|
||||||
|
>
|
||||||
Регистрация
|
Регистрация
|
||||||
</Link>
|
</Link>
|
||||||
<span> / </span>
|
<span> / </span>
|
||||||
<Link href="/login" className="hover:underline">
|
<Link href="/login" className="hover:text-orange transition-colors">
|
||||||
Войти
|
Войти
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mobile Controls */}
|
|
||||||
<div className="flex items-center space-x-4 md:hidden">
|
<div className="flex items-center space-x-4 md:hidden">
|
||||||
{/* Mobile Burger */}
|
|
||||||
|
|
||||||
{/* Mobile Auth */}
|
|
||||||
<Link href="/login">
|
<Link href="/login">
|
||||||
<Image
|
<Image
|
||||||
src="/images/userlogo.png"
|
src="/images/userlogo.png"
|
||||||
|
|||||||
@@ -1,11 +1,5 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import { ButtonProps } from '@/app/types'
|
||||||
interface ButtonProps {
|
|
||||||
onClick?: () => void
|
|
||||||
className?: string
|
|
||||||
text?: string
|
|
||||||
type?: 'button'
|
|
||||||
}
|
|
||||||
|
|
||||||
const Button = ({ onClick, className, text, type }: ButtonProps) => {
|
const Button = ({ onClick, className, text, type }: ButtonProps) => {
|
||||||
return (
|
return (
|
||||||
|
|||||||
39
frontend/components/ui/TextInput.tsx
Normal file
39
frontend/components/ui/TextInput.tsx
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { TextInputProps } from '@/app/types'
|
||||||
|
|
||||||
|
const TextInput = ({
|
||||||
|
value,
|
||||||
|
handleChange,
|
||||||
|
label,
|
||||||
|
placeholder,
|
||||||
|
name,
|
||||||
|
type = 'text',
|
||||||
|
className = '',
|
||||||
|
maxLength,
|
||||||
|
}: TextInputProps) => {
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
{label && (
|
||||||
|
<label
|
||||||
|
className="block my-2 font-medium text-sm text-gray-500"
|
||||||
|
htmlFor={name}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
id={name}
|
||||||
|
name={name}
|
||||||
|
placeholder={placeholder}
|
||||||
|
value={value || ''}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-4 border bg-gray-100 text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks focus:bg-white"
|
||||||
|
autoComplete={name}
|
||||||
|
maxLength={maxLength}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TextInput
|
||||||
BIN
frontend/public/images/footerLogo.png
Normal file
BIN
frontend/public/images/footerLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
frontend/public/images/subscribe.png
Normal file
BIN
frontend/public/images/subscribe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Reference in New Issue
Block a user