sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

footer desktop

Browse Source
This commit is contained in:
Timofey
2025-05-13 11:43:16 +03:00
parent a5ffa7ae13
commit 837c0f1fb6
8 changed files with 339 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/app/layout.tsx
View File

@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
import { Geist, Geist_Mono } from 'next/font/google'
import './globals.css'
import Header from '@/components/Header'
import Footer from '@/components/Footer'
const geistSans = Geist({
variable: '--font-geist-sans',
@@ -26,11 +27,10 @@ export default function RootLayout({
}>) {
return (
<html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
<body className="min-h-screen">
<main className="min-h-screen">
<Header />
{children}
</main>
<body className="min-h-screen flex flex-col">
<Header />
<main className="flex-grow">{children}</main>
<Footer />
</body>
</html>
)

17
frontend/app/types/index.ts Normal file
View 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'
}

270
frontend/components/Footer.tsx
View File

@@ -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
frontend/components/Header.tsx
View File

@@ -16,13 +16,13 @@ const Header = () => {
height={50}
priority
/>
{/* Desktop Burger */}
<div className="hidden md:block">
<Burger />
</div>
<Link
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>
@@ -31,22 +31,20 @@ const Header = () => {
<LangSwitcher />
<Button text="Разместить объявление" className="hidden md:block" />
{/* Auth Block - Desktop */}
<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>
<span> / </span>
<Link href="/login" className="hover:underline">
<Link href="/login" className="hover:text-orange transition-colors">
Войти
</Link>
</div>
{/* Mobile Controls */}
<div className="flex items-center space-x-4 md:hidden">
{/* Mobile Burger */}
{/* Mobile Auth */}
<Link href="/login">
<Image
src="/images/userlogo.png"

8
frontend/components/ui/Button.tsx
View File

@@ -1,11 +1,5 @@
import React from 'react'
interface ButtonProps {
onClick?: () => void
className?: string
text?: string
type?: 'button'
}
import { ButtonProps } from '@/app/types'
const Button = ({ onClick, className, text, type }: ButtonProps) => {
return (

39
frontend/components/ui/TextInput.tsx Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
frontend/public/images/subscribe.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB