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