219 lines
10 KiB
TypeScript
219 lines
10 KiB
TypeScript
import React from 'react'
|
||
import Image from 'next/image'
|
||
import AddressSelector from '@/components/AddressSelector'
|
||
import SearchCard from '@/app/(urls)/search/components/SearchCard'
|
||
import FAQ from '@/components/FAQ'
|
||
import { data } from '@/app/constants'
|
||
import { routes } from '@/app/constants'
|
||
import Button from '@/components/ui/Button'
|
||
import News from '@/components/News'
|
||
import { getFAQs } from '@/lib/main/fetchFAQ'
|
||
import { getNews } from '@/lib/main/fetchNews'
|
||
|
||
export default async function Home() {
|
||
const faqs = await getFAQs()
|
||
const news = await getNews()
|
||
|
||
return (
|
||
<div className="mx-auto flex max-w-[93%] flex-col items-center justify-center">
|
||
{/* main */}
|
||
<div className="flex items-center justify-center space-x-16">
|
||
<div>
|
||
<Image
|
||
src="/images/box1.png"
|
||
alt="main"
|
||
width={220}
|
||
height={220}
|
||
className="hidden sm:block"
|
||
/>
|
||
</div>
|
||
<div className="flex flex-col items-center justify-center space-y-5">
|
||
<h1 className="text-center text-3xl font-bold sm:text-4xl">
|
||
<div className="pb-1">
|
||
Сервис по <span className="text-orange">поиску</span>{' '}
|
||
</div>
|
||
<div>
|
||
<span className="text-orange">перевозчиков</span> посылок
|
||
</div>
|
||
</h1>
|
||
<p className="pb-3 text-center text-base sm:text-lg">
|
||
Доставка посылок с попутчиками: от документов до крупногабаритных грузов
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<Image
|
||
src="/images/box2.png"
|
||
alt="main"
|
||
width={220}
|
||
height={220}
|
||
className="hidden sm:block"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* форма на серч */}
|
||
<AddressSelector />
|
||
|
||
<div className="decoration-orange hover:text-orange mb-20 cursor-pointer text-lg font-normal text-[#272424] underline underline-offset-4 transition-colors">
|
||
Я могу взять с собой посылку
|
||
</div>
|
||
|
||
<div className="mb-8 flex flex-col items-center justify-center">
|
||
<h2 className="text-center text-4xl font-bold">Все объявления</h2>
|
||
<div className="my-3 text-base">
|
||
На нашем сайте размещено уже <span className="text-orange">{routes}</span> объявлений по
|
||
отправке и перевозке посылок
|
||
</div>
|
||
</div>
|
||
|
||
{/* первые пять серч карточек -- бекенд??? */}
|
||
<div className="mx-auto w-full max-w-[1250px]">
|
||
<div className="grid w-full grid-cols-1 gap-4">
|
||
{data.map(card => (
|
||
<SearchCard key={card.id} {...card} />
|
||
))}
|
||
</div>
|
||
<div className="flex justify-center py-4">
|
||
<Button
|
||
text="Разместить объявление"
|
||
className="bg-orange rounded-lg px-6 py-3 text-xl font-semibold text-white"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* how it works */}
|
||
<div className="mx-auto my-20 w-full max-w-[1250px]">
|
||
<h2 className="text-center text-4xl font-bold">Как это работает</h2>
|
||
<div className="mb-4 flex flex-col items-center justify-center py-4 text-center text-base font-medium">
|
||
<span>
|
||
TWB - это сервис, созданный для того, чтобы отправитель и перевозчик нашли друг-друга!
|
||
</span>
|
||
<span>Наш сервис предлагает вам прямые контакты, а не является посредником !</span>
|
||
</div>
|
||
<div className="flex flex-col items-center justify-center space-y-8 sm:flex-row sm:items-start sm:space-y-0 sm:space-x-4 md:space-x-8 lg:space-x-20">
|
||
<div className="flex w-full flex-col items-center px-4 sm:w-1/3 sm:px-2">
|
||
<div className="flex h-[260px] flex-col items-center sm:h-[300px]">
|
||
<Image
|
||
src="/images/laptop.png"
|
||
alt="laptop"
|
||
width={230}
|
||
height={230}
|
||
className="mb-6 h-[180px] w-[180px] sm:h-[230px] sm:w-[230px]"
|
||
/>
|
||
<div className="text-center text-xl font-semibold sm:text-2xl">
|
||
Найдите перевозчика
|
||
</div>
|
||
</div>
|
||
<div className="px-2 text-center text-sm text-gray-600 sm:px-4 sm:text-base md:px-7">
|
||
В форме поиска укажите откуда и куда Вам нужно доставить посылку, нажмите кнопку
|
||
"найти перевозчика". Если по вашему запросу ничего не найдено - Вы можете сами
|
||
разместить объявление и тогда перевозчики Вас найдут.
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex w-full flex-col items-center px-4 sm:w-1/3 sm:px-2">
|
||
<div className="flex h-[260px] flex-col items-center sm:h-[300px]">
|
||
<Image
|
||
src="/images/phone.png"
|
||
alt="phone"
|
||
width={230}
|
||
height={230}
|
||
className="mb-6 h-[180px] w-[180px] sm:h-[230px] sm:w-[230px]"
|
||
/>
|
||
<div className="text-center text-xl font-semibold sm:text-2xl">
|
||
Свяжитесь с перевозчиком
|
||
</div>
|
||
</div>
|
||
<div className="px-2 text-center text-sm text-gray-600 sm:px-4 sm:text-base md:px-7">
|
||
Нажмите на кнопку «ОТКЛИКНУТЬСЯ», свяжитесь и договоритесь о месте встречи и условиях
|
||
перевозки
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex w-full flex-col items-center px-4 sm:w-1/3 sm:px-2">
|
||
<div className="flex h-[260px] flex-col items-center sm:h-[300px]">
|
||
<Image
|
||
src="/images/package.png"
|
||
alt="package"
|
||
width={230}
|
||
height={230}
|
||
className="mb-6 h-[180px] w-[180px] sm:h-[230px] sm:w-[230px]"
|
||
/>
|
||
<div className="text-center text-xl font-semibold sm:text-2xl">Передайте посылку</div>
|
||
</div>
|
||
<div className="px-2 text-center text-sm text-gray-600 sm:px-4 sm:text-base md:px-7">
|
||
Встречайтесь, знакомьтесь и передавайте посылку
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-center pt-8 sm:pt-10">
|
||
<Button
|
||
text="Отправить посылку"
|
||
className="bg-orange hover:bg-orange/80 rounded-lg px-8 py-2.5 text-base text-white sm:px-12 sm:py-3 sm:text-lg"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* преимущества */}
|
||
<div className="mx-auto my-10 w-full max-w-[1250px] px-4 sm:px-6">
|
||
<h2 className="mb-12 text-center text-3xl font-bold sm:text-4xl">Преимущества сервиса</h2>
|
||
<div className="flex flex-col items-center justify-between gap-6 lg:flex-row lg:gap-4">
|
||
<div className="flex w-full flex-col space-y-4 lg:w-1/4">
|
||
<div className="flex flex-col space-y-1">
|
||
<div className="text-center text-xl font-semibold sm:text-left">Прямой контакт</div>
|
||
<span className="text-center text-base text-gray-600 sm:text-left">
|
||
Общаешься напрямую с перевозчиком, никаких посредников
|
||
</span>
|
||
</div>
|
||
<div className="flex flex-col space-y-1">
|
||
<div className="text-center text-xl font-semibold sm:text-left">Своя цена</div>
|
||
<span className="text-center text-base text-gray-600 sm:text-left">
|
||
Стоимость перевозки самостоятельно обговариваете с перевозчиком.
|
||
</span>
|
||
</div>
|
||
<div className="flex flex-col space-y-1">
|
||
<div className="text-center text-xl font-semibold sm:text-left">
|
||
Нет доп. расходов
|
||
</div>
|
||
<span className="text-center text-base text-gray-600 sm:text-left">
|
||
Никаких комиссий, переплат и дополнительных расходов за отправку.
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="w-full px-4 sm:px-0 lg:w-auto">
|
||
<Image src="/images/advantage.svg" alt="advantages" width={648} height={403} />
|
||
</div>
|
||
|
||
<div className="flex w-full flex-col space-y-4 lg:w-1/4">
|
||
<div className="flex flex-col space-y-1">
|
||
<div className="text-center text-xl font-semibold sm:text-left">Уведомления</div>
|
||
<span className="text-center text-base text-gray-600 sm:text-left">
|
||
Можешь самостоятельно найти перевозчиков или разместить объявление на сайте.
|
||
</span>
|
||
</div>
|
||
<div className="flex flex-col space-y-1">
|
||
<div className="text-center text-xl font-semibold sm:text-left">Удобный поиск</div>
|
||
<span className="text-center text-base text-gray-600 sm:text-left">
|
||
Как только по твоему объявлению найдется перевозчик мы сообщим на E-mail.
|
||
</span>
|
||
</div>
|
||
<div className="flex flex-col space-y-1">
|
||
<div className="text-center text-xl font-semibold sm:text-left">Экономия времени</div>
|
||
<span className="text-center text-base text-gray-600 sm:text-left">
|
||
Не нужно искать группы, чаты, и кидать "клич", а просто достаточно разместить
|
||
объявление на сайте.
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* FAQ */}
|
||
<FAQ faqs={faqs} />
|
||
|
||
{/* новости */}
|
||
<News news={news} />
|
||
</div>
|
||
)
|
||
}
|