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

account/sender UI

Browse Source
This commit is contained in:
Timofey
2025-05-21 17:36:10 +03:00
parent c6c405f232
commit 5ad12c34cd
10 changed files with 705 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
frontend/app/page.tsx
View File

@@ -3,8 +3,8 @@ 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 { 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'
@@ -15,7 +15,7 @@ export default async function Home() {
const news = await getNews()
return (
<div className="flex flex-col items-center justify-center max-w-[93%] mx-auto">
<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>
@@ -28,7 +28,7 @@ export default async function Home() {
/>
</div>
<div className="flex flex-col items-center justify-center space-y-5">
<h1 className="text-3xl sm:text-4xl text-center font-bold">
<h1 className="text-center text-3xl font-bold sm:text-4xl">
<div className="pb-1">
Сервис по <span className="text-orange">поиску</span>{' '}
</div>
@@ -36,9 +36,8 @@ export default async function Home() {
<span className="text-orange">перевозчиков</span> посылок
</div>
</h1>
<p className="text-base sm:text-lg text-center pb-3">
Доставка посылок с попутчиками: от документов до крупногабаритных
грузов
<p className="pb-3 text-center text-base sm:text-lg">
Доставка посылок с попутчиками: от документов до крупногабаритных грузов
</p>
</div>
<div>
@@ -55,102 +54,94 @@ export default async function Home() {
{/* форма на серч */}
<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 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="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 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="w-full max-w-[1250px] mx-auto">
<div className="grid grid-cols-1 gap-4 w-full">
{data.map((card) => (
<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 text-white text-xl font-semibold px-6 py-3 rounded-lg"
className="bg-orange rounded-lg px-6 py-3 text-xl font-semibold text-white"
/>
</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">
<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>
Наш сервис предлагает вам прямые контакты, а не является посредником
!
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]">
<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 w-[180px] h-[180px] sm:w-[230px] sm:h-[230px]"
className="mb-6 h-[180px] w-[180px] sm:h-[230px] sm:w-[230px]"
/>
<div className="text-xl sm:text-2xl font-semibold text-center">
<div className="text-center text-xl font-semibold sm:text-2xl">
Найдите перевозчика
</div>
</div>
<div className="text-sm sm:text-base text-gray-600 text-center px-2 sm:px-4 md:px-7">
В форме поиска укажите откуда и куда Вам нужно доставить посылку,
нажмите кнопку "найти перевозчика". Если по вашему запросу ничего
не найдено - Вы можете сами разместить объявление и тогда
перевозчики Вас найдут.
<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 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]">
<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 w-[180px] h-[180px] sm:w-[230px] sm:h-[230px]"
className="mb-6 h-[180px] w-[180px] sm:h-[230px] sm:w-[230px]"
/>
<div className="text-xl sm:text-2xl font-semibold text-center">
<div className="text-center text-xl font-semibold sm:text-2xl">
Свяжитесь с перевозчиком
</div>
</div>
<div className="text-sm sm:text-base text-gray-600 text-center px-2 sm:px-4 md:px-7">
Нажмите на кнопку «ОТКЛИКНУТЬСЯ», свяжитесь и договоритесь о месте
встречи и условиях перевозки
<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 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]">
<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 w-[180px] h-[180px] sm:w-[230px] sm:h-[230px]"
className="mb-6 h-[180px] w-[180px] sm:h-[230px] sm:w-[230px]"
/>
<div className="text-xl sm:text-2xl font-semibold text-center">
Передайте посылку
</div>
<div className="text-center text-xl font-semibold sm:text-2xl">Передайте посылку</div>
</div>
<div className="text-sm sm:text-base text-gray-600 text-center px-2 sm:px-4 md:px-7">
<div className="px-2 text-center text-sm text-gray-600 sm:px-4 sm:text-base md:px-7">
Встречайтесь, знакомьтесь и передавайте посылку
</div>
</div>
@@ -158,82 +149,62 @@ export default async function Home() {
<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"
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="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="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-xl text-center sm:text-left font-semibold">
Прямой контакт
</div>
<span className="text-base text-center sm:text-left text-gray-600">
<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-xl text-center sm:text-left font-semibold">
Своя цена
</div>
<span className="text-base text-center sm:text-left text-gray-600">
<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-xl text-center sm:text-left font-semibold">
<div className="text-center text-xl font-semibold sm:text-left">
Нет доп. расходов
</div>
<span className="text-base text-center sm:text-left text-gray-600">
Никаких комиссий, переплат и дополнительных расходов за
отправку.
<span className="text-center text-base text-gray-600 sm:text-left">
Никаких комиссий, переплат и дополнительных расходов за отправку.
</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 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 flex-col w-full lg:w-1/4 space-y-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-xl text-center sm:text-left font-semibold">
Уведомления
</div>
<span className="text-base text-center sm:text-left text-gray-600">
Можешь самостоятельно найти перевозчиков или разместить
<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 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>