create ui components

frontend/app/page.tsx

@@ -1,7 +1,48 @@
+import React from 'react'
+import Image from 'next/image'
+import AddressSelector from '@/components/AddressSelector'
+
 export default function Home() {
+  const routes = 38464
   return (
-    <div>
+    <div className="flex flex-col items-center justify-center  max-w-[93%] mx-auto">
-      <h1>Main page</h1>
+      <div className="flex  items-center justify-center space-x-16">
+        <div>
+          <Image src="/images/box1.png" alt="main" width={220} height={220} />
+        </div>
+        <div className="flex flex-col items-center justify-center space-y-5">
+          <h1 className="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-lg text-center">
+            Доставка посылок с попутчиками: от документов до крупногабаритных
+            грузов
+          </p>
+        </div>
+        <div>
+          <Image src="/images/box2.png" alt="main" width={220} height={220} />
+        </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>
   )
 }

frontend/app/types.ts

@@ -0,0 +1,11 @@
+export interface TextInputProps {
+  value: string
+  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  label?: string
+  placeholder?: string
+  name: string
+  type?: string
+  className?: string
+  maxLength?: number
+  tooltip?: string | React.ReactNode
+}

frontend/app/types/index.ts

@@ -7,6 +7,7 @@ export interface TextInputProps {
   type?: 'text' | 'email' | 'password'
   className?: string
   maxLength?: number
+  tooltip?: string | React.ReactNode
 }
 
 export interface ButtonProps {

frontend/components/AddressSelector.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import React, { useState } from 'react'
+import TextInput from './ui/TextInput'
+import Button from './ui/Button'
+
+export default function AddressSelector() {
+  const [fromAddress, setFromAddress] = useState('')
+  const [toAddress, setToAddress] = useState('')
+
+  return (
+    <div className="bg-white rounded-xl shadow-lg p-6 w-full my-4">
+      <div className="flex flex-col sm:flex-row items-end gap-3">
+        <div className="flex-[3] min-w-0 px-1">
+          <TextInput
+            placeholder="Минск, Беларусь"
+            tooltip="Укажите пункт (Город/Страна), откуда необходимо забрать посылку."
+            label="Забрать посылку из"
+            value={fromAddress}
+            handleChange={(e) => setFromAddress(e.target.value)}
+            name="fromAddress"
+          />
+        </div>
+        <div className="flex-[3] min-w-0 px-1">
+          <TextInput
+            placeholder="Москва, Россия"
+            label="Доставить посылку в"
+            tooltip="Укажите пункт (Город/Страна), куда необходимо доставить посылку."
+            value={toAddress}
+            handleChange={(e) => setToAddress(e.target.value)}
+            name="toAddress"
+          />
+        </div>
+        <Button
+          text="Найти перевозчика"
+          className="flex-1 whitespace-nowrap bg-orange hover:bg-orange/80 text-white p-4"
+        />
+        <Button
+          text="Найти посылку"
+          className="flex-1 whitespace-nowrap bg-gray-100 hover:bg-gray-200 text-gray-800 p-4"
+        />
+      </div>
+    </div>
+  )
+}

frontend/components/EmailHandler.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import React, { useState } from 'react'
+import Image from 'next/image'
+
+const EmailHandler = () => {
+  const [email, setEmail] = useState('')
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value)
+  }
+
+  return (
+    <div className="relative w-full">
+      <input
+        type="email"
+        value={email}
+        onChange={handleChange}
+        name="email"
+        placeholder="Введите ваш e-mail"
+        className="w-full px-4 py-3 rounded-md bg-white text-black placeholder:text-gray-400"
+      />
+      <button className="absolute right-0 top-1/2 -translate-y-1/2  flex items-center justify-center cursor-pointer">
+        <Image
+          src="/images/subscribe.png"
+          alt="submit"
+          width={50}
+          height={50}
+          className="rounded-md"
+        />
+      </button>
+    </div>
+  )
+}
+
+export default EmailHandler

frontend/components/Footer.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
-import TextInput from './ui/TextInput'
 import {
   FaInstagram,
   FaTelegram,
@@ -10,6 +9,7 @@ import {
   FaYoutube,
   FaTiktok,
 } from 'react-icons/fa'
+import EmailHandler from './EmailHandler'
 
 const Footer = () => {
   return (
@@ -17,7 +17,7 @@ const Footer = () => {
       <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">
+          <div className="flex flex-col space-y-5 w-full md:w-1/4 items-center md:items-start text-center md:text-left">
             <Image
               src="/images/footerLogo.png"
               alt="logo"
@@ -28,23 +28,8 @@ const Footer = () => {
               Подпишись и будь в курсе всех событий, а также получай подарки и
               бонусы от Trip With Bonus
             </span>
-            <div className="relative">
+            <EmailHandler />
-              <TextInput
+            <div className="flex gap-4 justify-center md:justify-start">
-                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"
@@ -109,9 +94,9 @@ const Footer = () => {
           </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 md:flex-row justify-between w-full md:w-2/4 space-y-8 md:space-y-0 items-center md:items-start text-center md:text-left">
             {/* информация */}
-            <div className="flex flex-col space-y-4">
+            <div className="flex flex-col space-y-4 items-center md:items-start">
               <div className="text-white text-xl font-medium md:pb-5">
                 Информация
               </div>
@@ -144,7 +129,7 @@ const Footer = () => {
             </div>
 
             {/* О Trip With Bonus */}
-            <div className="flex flex-col space-y-4">
+            <div className="flex flex-col space-y-4 items-center md:items-start">
               <div className="text-white text-xl font-medium md:pb-5">
                 О Trip With Bonus
               </div>
@@ -169,7 +154,7 @@ const Footer = () => {
                 </Link>
               </div>
             </div>
-            <div className="flex flex-col space-y-4">
+            <div className="flex flex-col space-y-4 items-center md:items-start">
               <div className="text-white text-xl font-medium md:pb-5">
                 Кооперация
               </div>
@@ -196,7 +181,7 @@ const Footer = () => {
             </div>
           </div>
 
-          <div className="flex flex-col space-y-4 w-full md:w-1/4">
+          <div className="flex flex-col space-y-4 w-full md:w-1/4 items-center md:items-start text-center md:text-left">
             <div className="text-white text-xl font-medium md:pb-5">
               Свяжитесь с нами:
             </div>
@@ -227,10 +212,10 @@ const Footer = () => {
                   support@tripwb.com
                 </a>
               </div>
-              <div className="flex gap-2 mt-7">
+              <div className="flex flex-col md:flex-row gap-2 mt-7 justify-center md:justify-start">
                 <Link
                   href="/register"
-                  className="bg-orange text-white px-4 py-2 rounded-2xl text-base font-medium"
+                  className="bg-orange hover:bg-orange/80 text-white px-4 py-2 rounded-2xl text-base font-medium"
                 >
                   Регистрация
                 </Link>
@@ -248,16 +233,16 @@ const Footer = () => {
 
       {/* Нижняя часть футера */}
       <div>
-        <div className="flex flex-col justify-between md:flex-row px-6 py-4 md:py-8 w-[95%] mx-auto">
+        <div className="flex flex-col justify-between md:flex-row px-6 py-4 md:py-8 w-[95%] mx-auto text-center md:text-left">
           <div>Copyright © {new Date().getFullYear()}. Все права защищены.</div>
-          <div className="flex flex-col md:flex-row py-4 md:py-0 md:space-x-5">
+          <div className="flex flex-col md:flex-row py-4 md:py-0 md:space-x-5 items-center md:items-start">
-            <Link href="/" className="hover:underline">
+            <Link href="/" className="hover:text-orange">
               Публичная оферта
             </Link>
-            <Link href="/" className="hover:underline">
+            <Link href="/" className="hover:text-orange">
               Политика конфиденциальности
             </Link>
-            <Link href="/" className="hover:underline">
+            <Link href="/" className="hover:text-orange">
               Правила пользования сервисом
             </Link>
           </div>

frontend/components/Header.tsx

@@ -7,7 +7,7 @@ import Button from './ui/Button'
 
 const Header = () => {
   return (
-    <div className="flex justify-between items-center px-6 py-8 w-[95%] mx-auto">
+    <div className="flex justify-between items-center px-6 py-8 w-[93%] mx-auto">
       <div className="flex items-center justify-center space-x-10">
         <Image
           src="/images/logo.png"
@@ -29,7 +29,10 @@ const Header = () => {
       </div>
       <div className="flex items-center justify-center space-x-10">
         <LangSwitcher />
-        <Button text="Разместить объявление" className="hidden md:block" />
+        <Button
+          text="Разместить объявление"
+          className="hidden md:block bg-orange hover:bg-orange/80 px-4 py-3 text-white"
+        />
 
         <div className="hidden md:block text-base font-medium">
           <Link

frontend/components/ui/Burger.tsx

@@ -33,7 +33,7 @@ const Burger = () => {
 
       {/* меню */}
       <div
-        className={`fixed left-0 w-full bg-[#eeebeb] shadow-lg transition-all duration-300 ease-in-out origin-top ${
+        className={`fixed z-50 left-0 w-full bg-[#eeebeb] shadow-lg transition-all duration-300 ease-in-out origin-top ${
           isOpen
             ? 'top-[80px] h-[calc(100vh-80px)] opacity-100 scale-y-100'
             : 'top-[80px] h-0 opacity-0 scale-y-0'

frontend/components/ui/Button.tsx

@@ -5,7 +5,7 @@ const Button = ({ onClick, className, text, type }: ButtonProps) => {
   return (
     <button
       onClick={onClick}
-      className={`${className} text-base font-medium px-4 py-3 text-white bg-orange rounded-2xl cursor-pointer`}
+      className={`text-base font-medium rounded-2xl cursor-pointer ${className}`}
       type={type}
     >
       <span>{text}</span>

frontend/components/ui/TextInput.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { TextInputProps } from '@/app/types'
+import Tooltip from './Tooltip'
 
 const TextInput = ({
   value,
@@ -10,16 +11,17 @@ const TextInput = ({
   type = 'text',
   className = '',
   maxLength,
+  tooltip,
 }: TextInputProps) => {
   return (
     <div className={className}>
       {label && (
-        <label
+        <div className="flex items-center gap-2 my-2">
-          className="block my-2 font-medium text-sm text-gray-500"
+          <label className="font-medium text-sm text-gray-500" htmlFor={name}>
-          htmlFor={name}
+            {label}
-        >
+          </label>
-          {label}
+          {tooltip && <Tooltip content={tooltip} />}
-        </label>
+        </div>
       )}
       <input
         type={type}
@@ -28,7 +30,7 @@ const TextInput = ({
         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"
+        className="w-full p-4 border border-gray-300 text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks focus:bg-white"
         autoComplete={name}
         maxLength={maxLength}
       />

frontend/components/ui/Tooltip.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { useState } from 'react'
+import { CiCircleInfo } from 'react-icons/ci'
+
+interface TooltipProps {
+  content: string | React.ReactNode
+}
+
+const Tooltip = ({ content }: TooltipProps) => {
+  const [showTooltip, setShowTooltip] = useState(false)
+
+  return (
+    <div className="relative flex items-center overflow-visible">
+      <button
+        type="button"
+        className="text-orange hover:text-orange/80 focus:outline-none"
+        onMouseEnter={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+        onClick={() => setShowTooltip(!showTooltip)}
+      >
+        <CiCircleInfo className="w-4 h-4" />
+      </button>
+      {showTooltip && (
+        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 bg-white rounded-xl text-center shadow-lg text-sm text-gray-700 w-max max-w-xs z-10">
+          {content}
+          <div className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-2 h-2 bg-white transform rotate-45"></div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Tooltip