footer
This commit is contained in:
egortriston
@ -6,7 +6,7 @@ const CatalogSubscribe: React.FC = () => (
|
||||
<img
|
||||
src="/images/resource2.png"
|
||||
alt="Ресурс 2"
|
||||
className="mt-[-18px]"
|
||||
className="mt-[-18px] hide-on-991"
|
||||
/>
|
||||
<div className="div-block-9">
|
||||
{/* <h3 className="heading-3 sub">Подпишитесь на новостную рассылку</h3> */}
|
||||
@ -19,14 +19,18 @@ const CatalogSubscribe: React.FC = () => (
|
||||
<input type="submit" className="submit-button-copy w-button" value="Подписаться" />
|
||||
</form>
|
||||
</div>
|
||||
<div className="flex flex-row items-center mt-2">
|
||||
<div className="flex flex-row items-center mt-2 pl-0 justify-start">
|
||||
{/* Кастомный чекбокс без input/label */}
|
||||
{(() => {
|
||||
const [checked, setChecked] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<span className="text-[#8893A1] text-[12px] leading-snug select-none mr-4">
|
||||
Я даю свое согласие на обработку персональных данных<br />
|
||||
и соглашаюсь с условиями <a href="/privacy-policy" className="underline hover:text-[#6c7684]">Политики конфиденциальности</a>
|
||||
</span>
|
||||
<div
|
||||
className={`h-[24px] w-[24px] border border-[#8893A1] rounded-sm mr-4 flex-shrink-0 flex items-center justify-center cursor-pointer transition-colors duration-150 ${checked ? 'bg-[#EC1C24]' : 'bg-transparent'}`}
|
||||
className={`h-[24px] w-[24px] border border-[#8893A1] rounded-sm flex-shrink-0 flex items-center justify-center cursor-pointer transition-colors duration-150 ${checked ? 'bg-[#EC1C24]' : 'bg-transparent'}`}
|
||||
onClick={() => setChecked(v => !v)}
|
||||
role="checkbox"
|
||||
aria-checked={checked}
|
||||
@ -43,10 +47,6 @@ const CatalogSubscribe: React.FC = () => (
|
||||
<path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-[#8893A1] text-[12px] leading-snug select-none">
|
||||
Я даю свое согласие на обработку персональных данных<br />
|
||||
и соглашаюсь с условиями <a href="/privacy-policy" className="underline hover:text-[#6c7684]">Политики конфиденциальности</a>
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
|
||||
@ -1,104 +1,194 @@
|
||||
const Footer = () => (
|
||||
<footer className="section-2">
|
||||
<div className="w-layout-blockcontainer container footer w-container">
|
||||
<div className="w-layout-vflex flex-block-20">
|
||||
<div className="w-layout-hflex flex-block-18-copy-copy">
|
||||
<div className="w-layout-vflex flex-block-19">
|
||||
<img src="/images/logo_gor.svg" loading="lazy" width="320" alt="" className="image-15" />
|
||||
<div className="text-block-15">Пн-Пт 9:00 – 18:00, <br />Сб 10:00 – 16:00, Вс – выходной</div>
|
||||
<a href="#" className="link-block-5 w-inline-block">
|
||||
<div className="w-layout-hflex flex-block-3">
|
||||
<img src="/images/phone_icon.svg" loading="lazy" alt="" className="image-23" />
|
||||
<div className="phone">+7 (495) 260-20-60</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-22">
|
||||
<div className="w-layout-vflex flex-block-23">
|
||||
<div className="w-layout-hflex flex-block-86">
|
||||
<div className="text-block-17">Покупателям</div>
|
||||
</div>
|
||||
<a href="#" className="link">Оплата</a>
|
||||
<a href="#" className="link">Возврат</a>
|
||||
<a href="#" className="link">Доставка</a>
|
||||
<div data-hover="false" data-delay="0" className="dropdown-3 w-dropdown">
|
||||
<div className="dropdown-toggle-2 w-dropdown-toggle">
|
||||
<>
|
||||
{/* <footer className="section-2">
|
||||
<div className="w-layout-blockcontainer container footer w-container">
|
||||
<div className="w-layout-vflex flex-block-20">
|
||||
<div className="w-layout-hflex flex-block-18-copy-copy">
|
||||
<div className="w-layout-vflex flex-block-19">
|
||||
<img src="/images/logo_gor.svg" loading="lazy" width="320" alt="" className="image-15" />
|
||||
<div className="text-block-15">Пн-Пт 9:00 – 18:00, <br />Сб 10:00 – 16:00, Вс – выходной</div>
|
||||
<a href="#" className="link-block-5 w-inline-block">
|
||||
<div className="w-layout-hflex flex-block-3">
|
||||
<img src="/images/phone_icon.svg" loading="lazy" alt="" className="image-23" />
|
||||
<div className="phone">+7 (495) 260-20-60</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-22">
|
||||
<div className="w-layout-vflex flex-block-23">
|
||||
<div className="w-layout-hflex flex-block-86">
|
||||
<div className="text-block-17">Покупателям</div>
|
||||
<div className="code-embed-10 w-embed"><svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M2 6.74036L3.28446 5.5L9 11.0193L14.7155 5.5L16 6.74036L9 13.5L2 6.74036Z" fill="currentColor"></path></svg></div>
|
||||
</div>
|
||||
<nav className="dropdown-list-3 w-dropdown-list">
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Оплата</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Возврат</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Доставка</a>
|
||||
</nav>
|
||||
<a href="#" className="link">Оплата</a>
|
||||
<a href="#" className="link">Возврат</a>
|
||||
<a href="#" className="link">Доставка</a>
|
||||
<div data-hover="false" data-delay="0" className="dropdown-3 w-dropdown">
|
||||
<div className="dropdown-toggle-2 w-dropdown-toggle">
|
||||
<div className="text-block-17">Покупателям</div>
|
||||
<div className="code-embed-10 w-embed"><svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M2 6.74036L3.28446 5.5L9 11.0193L14.7155 5.5L16 6.74036L9 13.5L2 6.74036Z" fill="currentColor"></path></svg></div>
|
||||
</div>
|
||||
<nav className="dropdown-list-3 w-dropdown-list">
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Оплата</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Возврат</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Доставка</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-layout-vflex flex-block-23">
|
||||
<div className="w-layout-hflex flex-block-86">
|
||||
<div className="text-block-17">Сотрудничество</div>
|
||||
</div>
|
||||
<a href="#" className="link">Поставщикам</a>
|
||||
<a href="#" className="link">Дилерская сеть</a>
|
||||
<a href="#" className="link">Оптовым покупателям</a>
|
||||
<div data-hover="false" data-delay="0" className="dropdown-3 w-dropdown">
|
||||
<div className="dropdown-toggle-2 w-dropdown-toggle">
|
||||
<div className="w-layout-vflex flex-block-23">
|
||||
<div className="w-layout-hflex flex-block-86">
|
||||
<div className="text-block-17">Сотрудничество</div>
|
||||
<div className="code-embed-10 w-embed"><svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M2 6.74036L3.28446 5.5L9 11.0193L14.7155 5.5L16 6.74036L9 13.5L2 6.74036Z" fill="currentColor"></path></svg></div>
|
||||
</div>
|
||||
<nav className="dropdown-list-3 w-dropdown-list">
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Поставщикам</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Дилерская сеть</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Оптовым покупателям</a>
|
||||
</nav>
|
||||
<a href="#" className="link">Поставщикам</a>
|
||||
<a href="#" className="link">Дилерская сеть</a>
|
||||
<a href="#" className="link">Оптовым покупателям</a>
|
||||
<div data-hover="false" data-delay="0" className="dropdown-3 w-dropdown">
|
||||
<div className="dropdown-toggle-2 w-dropdown-toggle">
|
||||
<div className="text-block-17">Сотрудничество</div>
|
||||
<div className="code-embed-10 w-embed"><svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M2 6.74036L3.28446 5.5L9 11.0193L14.7155 5.5L16 6.74036L9 13.5L2 6.74036Z" fill="currentColor"></path></svg></div>
|
||||
</div>
|
||||
<nav className="dropdown-list-3 w-dropdown-list">
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Поставщикам</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Дилерская сеть</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Оптовым покупателям</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-layout-vflex flex-block-23">
|
||||
<div className="w-layout-hflex flex-block-86">
|
||||
<div className="text-block-17">PROTEK</div>
|
||||
</div>
|
||||
<a href="#" className="link">Вакансии</a>
|
||||
<a href="#" className="link">О компании</a>
|
||||
<a href="#" className="link">Контакты</a>
|
||||
<div data-hover="false" data-delay="0" className="dropdown-3 w-dropdown">
|
||||
<div className="dropdown-toggle-2 w-dropdown-toggle">
|
||||
<div className="w-layout-vflex flex-block-23">
|
||||
<div className="w-layout-hflex flex-block-86">
|
||||
<div className="text-block-17">PROTEK</div>
|
||||
<div className="code-embed-10 w-embed"><svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M2 6.74036L3.28446 5.5L9 11.0193L14.7155 5.5L16 6.74036L9 13.5L2 6.74036Z" fill="currentColor"></path></svg></div>
|
||||
</div>
|
||||
<nav className="dropdown-list-3 w-dropdown-list">
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Вакансии</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">О компании</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Контакты</a>
|
||||
</nav>
|
||||
<a href="#" className="link">Вакансии</a>
|
||||
<a href="#" className="link">О компании</a>
|
||||
<a href="#" className="link">Контакты</a>
|
||||
<div data-hover="false" data-delay="0" className="dropdown-3 w-dropdown">
|
||||
<div className="dropdown-toggle-2 w-dropdown-toggle">
|
||||
<div className="text-block-17">PROTEK</div>
|
||||
<div className="code-embed-10 w-embed"><svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M2 6.74036L3.28446 5.5L9 11.0193L14.7155 5.5L16 6.74036L9 13.5L2 6.74036Z" fill="currentColor"></path></svg></div>
|
||||
</div>
|
||||
<nav className="dropdown-list-3 w-dropdown-list">
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Вакансии</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">О компании</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Контакты</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-layout-vflex flex-block-23">
|
||||
<div className="w-layout-hflex flex-block-86">
|
||||
<div className="text-block-17">Оферта</div>
|
||||
</div>
|
||||
<a href="#" className="link">Поставщикам</a>
|
||||
<a href="#" className="link">Поставщикам</a>
|
||||
<a href="#" className="link">Поставщикам</a>
|
||||
<div data-hover="false" data-delay="0" className="dropdown-3 w-dropdown">
|
||||
<div className="dropdown-toggle-2 w-dropdown-toggle">
|
||||
<div className="w-layout-vflex flex-block-23">
|
||||
<div className="w-layout-hflex flex-block-86">
|
||||
<div className="text-block-17">Оферта</div>
|
||||
<div className="code-embed-10 w-embed"><svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M2 6.74036L3.28446 5.5L9 11.0193L14.7155 5.5L16 6.74036L9 13.5L2 6.74036Z" fill="currentColor"></path></svg></div>
|
||||
</div>
|
||||
<nav className="dropdown-list-3 w-dropdown-list">
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Поставщикам</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Поставщикам</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Поставщикам</a>
|
||||
</nav>
|
||||
<a href="#" className="link">Поставщикам</a>
|
||||
<a href="#" className="link">Поставщикам</a>
|
||||
<a href="#" className="link">Поставщикам</a>
|
||||
<div data-hover="false" data-delay="0" className="dropdown-3 w-dropdown">
|
||||
<div className="dropdown-toggle-2 w-dropdown-toggle">
|
||||
<div className="text-block-17">Оферта</div>
|
||||
<div className="code-embed-10 w-embed"><svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M2 6.74036L3.28446 5.5L9 11.0193L14.7155 5.5L16 6.74036L9 13.5L2 6.74036Z" fill="currentColor"></path></svg></div>
|
||||
</div>
|
||||
<nav className="dropdown-list-3 w-dropdown-list">
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Поставщикам</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Поставщикам</a>
|
||||
<a href="#" className="dropdown-link-2 w-dropdown-link">Поставщикам</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-18-copy">
|
||||
<div className="w-layout-hflex flex-block-21"><img src="/images/mastercard.svg" loading="lazy" alt="" /><img src="/images/visa.svg" loading="lazy" alt="" /><img src="/images/mir.svg" loading="lazy" alt="" /></div>
|
||||
<div className="text-block-16">© 2025 Protek. Все права защищены.</div>
|
||||
<div className="w-layout-hflex flex-block-18-copy">
|
||||
<div className="w-layout-hflex flex-block-21"><img src="/images/mastercard.svg" loading="lazy" alt="" /><img src="/images/visa.svg" loading="lazy" alt="" /><img src="/images/mir.svg" loading="lazy" alt="" /></div>
|
||||
<div className="text-block-16">© 2025 Protek. Все права защищены.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</footer> */}
|
||||
{/* Новый футер под основным */}
|
||||
<footer className="section-2 text-white h-full">
|
||||
<div className="w-layout-blockcontainer container footer w-container h-full">
|
||||
<div className="mx-auto flex flex-col md:flex-row items-center md:items-end justify-between gap-2 md:gap-4 mt-2 h-full w-full">
|
||||
{/* Левая часть: логотип и контакты */}
|
||||
<div className="flex flex-col gap-4 min-w-[260px] items-center md:items-start mx-auto md:mx-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<img src="/images/logo_gor.svg" alt="Protek Авто" className="h-10" />
|
||||
{/* <span className="bg-[#EC1C24] text-white font-bold rounded px-2 py-1 ml-2 text-sm">АВТО</span> */}
|
||||
</div>
|
||||
<div className="text-xs opacity-80 leading-tight">ООО «Протек» ИНН 5007117840<br />ОРГН 1225000146282</div>
|
||||
<div className="font-semibold mt-2">Есть вопросы или предложения?</div>
|
||||
<button className="bg-[#23407A] rounded-lg py-2 px-6 font-medium mt-1 mb-2">Напиши нам</button>
|
||||
</div>
|
||||
{/* Центр: меню */}
|
||||
<div className="hidden md:flex flex-1 flex-wrap gap-10 justify-center min-w-[400px]">
|
||||
<div className="flex flex-col gap-3 min-w-[150px]">
|
||||
<div className="link">Подбор по марке авто</div>
|
||||
<a href="#" className="link">Поиск по VIN</a>
|
||||
<a href="#" className="link">Добавить авто в гараж</a>
|
||||
<a href="#" className="link">Личный кабинет</a>
|
||||
<a href="#" className="link">История поиска</a>
|
||||
<a href="#" className="link">Избранное</a>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 min-w-[150px]">
|
||||
<div className="link">Детали для ТО</div>
|
||||
<a href="#" className="link">Шины</a>
|
||||
<a href="#" className="link">Диски</a>
|
||||
<a href="#" className="link">Масла и жидкости</a>
|
||||
<a href="#" className="link">Инструменты</a>
|
||||
<a href="#" className="link">Все категории</a>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 min-w-[150px]">
|
||||
<div className="link">О компании</div>
|
||||
<a href="#" className="link">Оплата и доставка</a>
|
||||
<a href="#" className="link">Гарантии и возврат</a>
|
||||
<a href="#" className="link">Оптовым клиентам</a>
|
||||
<a href="#" className="link">Покупателям</a>
|
||||
<a href="#" className="link">Контакты</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* Правая часть: контакты и платежи */}
|
||||
<div className="flex flex-col gap-3 min-w-[220px] items-center md:items-end mx-auto md:mx-0">
|
||||
<div className="text-lg font-bold">+7 (495) 260-20-60</div>
|
||||
<div className="text-xs opacity-80">Ежедневно 9:00 – 21:00</div>
|
||||
<div className="text-sm font-medium">info@protekauto.ru</div>
|
||||
<div className="flex gap-3 mt-2">
|
||||
<a href="#" className="hover:opacity-80 flex items-center gap-1">
|
||||
<img src="/images/whatsapp.svg" alt="Whatsapp" className="" />
|
||||
<span className="font-medium text-sm">WhatsApp</span>
|
||||
</a>
|
||||
<a href="#" className="hover:opacity-80 flex items-center gap-1">
|
||||
<img src="/images/tg2.svg" alt="Telegram" className="" />
|
||||
<span className="font-medium text-sm">Telegram</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex gap-3 mt-4 items-center">
|
||||
<img src="/images/mastercard.svg" alt="Mastercard" className="h-6" />
|
||||
<img src="/images/visa.svg" alt="Visa" className="h-3" />
|
||||
<img src="/images/mir.svg" alt="Mir" className="h-3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-auto flex flex-col md:flex-row items-center md:items-start justify-between gap-2 md:gap-4 mt-5 h-full w-full">
|
||||
<div className="hidden md:flex gap-4 min-w-[260px]">
|
||||
<a href="#" className="hover:opacity-80 flex items-center gap-1">
|
||||
<img src="/images/vk.svg" alt="VK" />
|
||||
|
||||
</a>
|
||||
<a href="#" className="hover:opacity-80 flex items-center gap-1">
|
||||
<img src="/images/tg.svg" alt="Telegram" />
|
||||
|
||||
</a>
|
||||
<a href="#" className="hover:opacity-80 flex items-center gap-1">
|
||||
<img src="/images/ws.svg" alt="Support" />
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-col items-center md:flex-row md:items-start md:justify-center flex-1 flex-wrap gap-4 md:gap-20 md:mt-6 md:min-w-[400px]">
|
||||
<a href="#" className=" hover:underline text-xs opacity-70 text-center md:w-auto md:text-left">Политика конфиденциальности</a>
|
||||
|
||||
<a href="#" className=" hover:underline text-xs opacity-70 text-center md:w-auto md:text-left">Согласие на обработку персональных данных</a>
|
||||
<span className="text-xs opacity-70">© 2025 Protek. Все права защищены.</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
|
||||
export default Footer;
|
||||
@ -175,39 +175,33 @@ const VehicleSearchResultsPage: React.FC<VehicleSearchResultsPageProps> = () =>
|
||||
<>
|
||||
|
||||
|
||||
<main className="bg-gray-50 min-h-screen">
|
||||
{/* Breadcrumb */}
|
||||
<div className="bg-white border-b">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<nav className="flex" aria-label="Breadcrumb">
|
||||
<ol className="flex items-center space-x-4">
|
||||
<li>
|
||||
<Link href="/" className="text-gray-400 hover:text-gray-500">
|
||||
Главная
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<div className="flex items-center">
|
||||
<svg className="flex-shrink-0 h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
|
||||
<path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
|
||||
</svg>
|
||||
<span className="ml-4 text-sm font-medium text-red-600">
|
||||
{searchType === 'vin' ? 'Найденные автомобили' : 'Найденные автомобили'}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<main className="bg-[#F5F8FB] min-h-screen">
|
||||
{/* Breadcrumb (InfoSearch style) */}
|
||||
<section className="section-info">
|
||||
<div className="w-layout-blockcontainer container info w-container">
|
||||
<div className="w-layout-vflex flex-block-9">
|
||||
<div className="w-layout-hflex flex-block-7">
|
||||
<a href="/" className="link-block w-inline-block">
|
||||
<div>Главная</div>
|
||||
</a>
|
||||
<div className="text-block-3">→</div>
|
||||
<a href="#" className="link-block-2 w-inline-block">
|
||||
<div>Найденные автомобили</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-8">
|
||||
<div className="w-layout-hflex flex-block-10">
|
||||
<h1 className="heading">{searchType === 'vin' ? 'Поиск по VIN номеру' : 'Поиск по государственному номеру'}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Search Results Header */}
|
||||
<div className="bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">
|
||||
{searchType === 'vin' ? 'Поиск по VIN номеру' : 'Поиск по государственному номеру'}
|
||||
</h1>
|
||||
<div className="flex flex-col items-center pt-10 pb-16 max-md:px-5">
|
||||
<div className="w-full max-w-[1580px]">
|
||||
{/* <div className="mb-6">
|
||||
<p className="text-lg text-gray-600">
|
||||
Запрос: <span className="font-mono font-bold">{searchQuery}</span>
|
||||
</p>
|
||||
@ -216,18 +210,13 @@ const VehicleSearchResultsPage: React.FC<VehicleSearchResultsPageProps> = () =>
|
||||
Найдено {vehicles.length} автомобилей
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* Loading State */}
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="flex items-center space-x-3">
|
||||
<svg className="animate-spin h-8 w-8 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span className="text-lg text-gray-600">Поиск автомобилей...</span>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl shadow p-10 flex flex-col items-center justify-center min-h-[300px]">
|
||||
<div className="animate-spin rounded-full h-24 w-24 border-b-2 border-red-600 mb-6"></div>
|
||||
<p className="text-lg text-gray-600">Поиск автомобилей...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -247,9 +236,9 @@ const VehicleSearchResultsPage: React.FC<VehicleSearchResultsPageProps> = () =>
|
||||
{vehicles[0]?.year && ` (${vehicles[0].year} г.)`}
|
||||
{vehicles[0]?.engine && `, двигатель: ${vehicles[0].engine}`}
|
||||
</p>
|
||||
<p className="text-sm text-green-600 mt-1">
|
||||
🚀 Переходим сразу к категориям запчастей...
|
||||
</p>
|
||||
<p className="text-sm text-green-600 mt-1">
|
||||
🚀 Переходим сразу к категориям запчастей...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@ -262,209 +251,58 @@ const VehicleSearchResultsPage: React.FC<VehicleSearchResultsPageProps> = () =>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results Table */}
|
||||
{/* Results List (Search-like style, not table) */}
|
||||
{!isLoading && vehicles.length > 0 && !isRedirecting && (
|
||||
<div className="bg-white shadow-sm rounded-lg overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Бренд
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Название
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Модель
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Год
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Двигатель
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
КПП
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Рынок
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Дата выпуска
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Период производства
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Дополнительно
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{vehicles.map((vehicle, index) => {
|
||||
console.log('🔍 Отображаем автомобиль в таблице:', {
|
||||
index,
|
||||
vehicleid: vehicle.vehicleid,
|
||||
name: vehicle.name,
|
||||
brand: vehicle.brand,
|
||||
catalog: vehicle.catalog,
|
||||
model: vehicle.model,
|
||||
year: vehicle.year,
|
||||
engine: vehicle.engine,
|
||||
ssd: vehicle.ssd ? vehicle.ssd.substring(0, 30) + '...' : 'отсутствует'
|
||||
});
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={vehicle.vehicleid || index}
|
||||
onClick={() => handleVehicleSelect(vehicle)}
|
||||
className="hover:bg-gray-50 cursor-pointer transition-colors"
|
||||
>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
{vehicle.brand}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{vehicle.name}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{vehicle.model}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{(() => {
|
||||
const year = vehicle.year || vehicle.manufactured || (vehicle.date ? vehicle.date.split('.').pop() : '') || '';
|
||||
console.log(`🗓️ Год для автомобиля ${vehicle.vehicleid}:`, { year, original_year: vehicle.year, manufactured: vehicle.manufactured, date: vehicle.date });
|
||||
return year || '-';
|
||||
})()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{(() => {
|
||||
const engine = vehicle.engine || vehicle.engine_info || vehicle.engineno || '';
|
||||
console.log(`🔧 Двигатель для автомобиля ${vehicle.vehicleid}:`, { engine, original_engine: vehicle.engine, engine_info: vehicle.engine_info, engineno: vehicle.engineno });
|
||||
return engine || '-';
|
||||
})()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{(() => {
|
||||
const transmission = vehicle.transmission || vehicle.bodytype || '';
|
||||
console.log(`⚙️ КПП для автомобиля ${vehicle.vehicleid}:`, { transmission, original_transmission: vehicle.transmission, bodytype: vehicle.bodytype });
|
||||
return transmission || '-';
|
||||
})()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{(() => {
|
||||
const market = vehicle.market || vehicle.destinationregion || vehicle.creationregion || '';
|
||||
console.log(`🌍 Рынок для автомобиля ${vehicle.vehicleid}:`, { market, original_market: vehicle.market, destinationregion: vehicle.destinationregion, creationregion: vehicle.creationregion });
|
||||
return market || '-';
|
||||
})()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{(() => {
|
||||
const releaseDate = vehicle.date || vehicle.manufactured || '';
|
||||
console.log(`📅 Дата выпуска для автомобиля ${vehicle.vehicleid}:`, { releaseDate, date: vehicle.date, manufactured: vehicle.manufactured });
|
||||
return releaseDate || '-';
|
||||
})()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{(() => {
|
||||
let prodPeriod = '';
|
||||
if (vehicle.prodRange) {
|
||||
prodPeriod = vehicle.prodRange;
|
||||
} else if (vehicle.prodPeriod) {
|
||||
prodPeriod = vehicle.prodPeriod;
|
||||
} else if (vehicle.datefrom && vehicle.dateto) {
|
||||
prodPeriod = `${vehicle.datefrom} - ${vehicle.dateto}`;
|
||||
} else if (vehicle.modelyearfrom && vehicle.modelyearto) {
|
||||
prodPeriod = `${vehicle.modelyearfrom} - ${vehicle.modelyearto}`;
|
||||
}
|
||||
console.log(`📈 Период производства для автомобиля ${vehicle.vehicleid}:`, {
|
||||
prodPeriod,
|
||||
prodRange: vehicle.prodRange,
|
||||
original_prodPeriod: vehicle.prodPeriod,
|
||||
datefrom: vehicle.datefrom,
|
||||
dateto: vehicle.dateto,
|
||||
modelyearfrom: vehicle.modelyearfrom,
|
||||
modelyearto: vehicle.modelyearto
|
||||
});
|
||||
return prodPeriod || '-';
|
||||
})()}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-900">
|
||||
<div className="space-y-1">
|
||||
{vehicle.framecolor && (
|
||||
<div className="text-xs">
|
||||
<span className="font-medium">Цвет кузова:</span> {vehicle.framecolor}
|
||||
</div>
|
||||
)}
|
||||
{vehicle.trimcolor && (
|
||||
<div className="text-xs">
|
||||
<span className="font-medium">Цвет салона:</span> {vehicle.trimcolor}
|
||||
</div>
|
||||
)}
|
||||
{vehicle.engineno && (
|
||||
<div className="text-xs">
|
||||
<span className="font-medium">Номер двигателя:</span> {vehicle.engineno}
|
||||
</div>
|
||||
)}
|
||||
{vehicle.engine_info && (
|
||||
<div className="text-xs max-w-xs truncate" title={vehicle.engine_info}>
|
||||
<span className="font-medium">Двигатель:</span> {vehicle.engine_info}
|
||||
</div>
|
||||
)}
|
||||
{vehicle.options && (
|
||||
<div className="text-xs max-w-xs truncate" title={vehicle.options}>
|
||||
<span className="font-medium">Опции:</span> {vehicle.options}
|
||||
</div>
|
||||
)}
|
||||
{vehicle.description && (
|
||||
<div className="text-xs max-w-xs truncate" title={vehicle.description}>
|
||||
<span className="font-medium">Описание:</span> {vehicle.description}
|
||||
</div>
|
||||
)}
|
||||
{vehicle.modification && (
|
||||
<div className="text-xs max-w-xs truncate" title={vehicle.modification}>
|
||||
<span className="font-medium">Модификация:</span> {vehicle.modification}
|
||||
</div>
|
||||
)}
|
||||
{vehicle.grade && (
|
||||
<div className="text-xs">
|
||||
<span className="font-medium">Класс:</span> {vehicle.grade}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="bg-white rounded-2xl shadow p-10">
|
||||
<div className="flex flex-wrap items-center gap-6 font-bold text-gray-900 text-base mb-2 px-2">
|
||||
<div className="min-w-[100px] flex-1 break-words">Бренд</div>
|
||||
<div className="min-w-[120px] flex-1 break-words">Название</div>
|
||||
<div className="min-w-[120px] flex-1 break-words">Модель</div>
|
||||
<div className="min-w-[60px] flex-1 break-words">Год</div>
|
||||
<div className="min-w-[120px] flex-1 break-words">Двигатель</div>
|
||||
<div className="min-w-[80px] flex-1 break-words">КПП</div>
|
||||
<div className="min-w-[80px] flex-1 break-words">Рынок</div>
|
||||
<div className="min-w-[100px] flex-1 break-words">Дата выпуска</div>
|
||||
<div className="min-w-[140px] flex-1 break-words">Период производства</div>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
{vehicles.map((vehicle, index) => (
|
||||
<div
|
||||
key={vehicle.vehicleid || index}
|
||||
className="flex flex-wrap items-center gap-6 bg-white border-b border-gray-200 px-6 py-3 cursor-pointer hover:bg-slate-100 transition-colors max-w-full"
|
||||
onClick={() => handleVehicleSelect(vehicle)}
|
||||
style={{ minWidth: 0 }}
|
||||
>
|
||||
<div className="font-bold text-gray-900 text-base min-w-[100px] flex-1 break-words">{vehicle.brand}</div>
|
||||
<div className="text-gray-900 text-base min-w-[120px] flex-1 break-words">{vehicle.name}</div>
|
||||
<div className="text-gray-900 text-base min-w-[120px] flex-1 break-words">{vehicle.model}</div>
|
||||
<div className="text-gray-900 text-base min-w-[60px] flex-1 break-words">{vehicle.year || '-'}</div>
|
||||
<div className="text-gray-900 text-base min-w-[120px] flex-1 break-words">{vehicle.engine || '-'}</div>
|
||||
<div className="text-gray-900 text-base min-w-[80px] flex-1 break-words">{vehicle.transmission || '-'}</div>
|
||||
<div className="text-gray-900 text-base min-w-[80px] flex-1 break-words">{vehicle.market || '-'}</div>
|
||||
<div className="text-gray-900 text-base min-w-[100px] flex-1 break-words">{vehicle.date || vehicle.manufactured || '-'}</div>
|
||||
<div className="text-gray-900 text-base min-w-[140px] flex-1 break-words">{vehicle.prodRange || vehicle.prodPeriod || ((vehicle.datefrom && vehicle.dateto) ? `${vehicle.datefrom} - ${vehicle.dateto}` : (vehicle.modelyearfrom && vehicle.modelyearto) ? `${vehicle.modelyearfrom} - ${vehicle.modelyearto}` : '-')}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No Results */}
|
||||
{!isLoading && vehicles.length === 0 && searchQuery && (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-yellow-400 mb-4">
|
||||
<svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.728-.833-2.498 0L4.316 14.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-medium text-gray-900 mb-2">
|
||||
{searchType === 'vin' ? 'VIN не найден' : 'Госномер не найден'}
|
||||
<div className="bg-[#eaf0fa] border border-[#b3c6e6] rounded-2xl shadow p-10 text-center">
|
||||
<svg className="w-16 h-16 mx-auto mb-4" style={{ color: '#0d336c' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0112 15c-2.34 0-4.29-1.009-5.824-2.562M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<h3 className="text-xl font-semibold mb-2" style={{ color: '#0d336c' }}>
|
||||
Автомобили не найдены
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-6">
|
||||
{searchType === 'vin'
|
||||
? `Автомобиль с VIN номером ${searchQuery} не найден в доступных каталогах`
|
||||
: `Автомобиль с государственным номером ${searchQuery} не найден в базе данных`
|
||||
}
|
||||
<p className="mb-4" style={{ color: '#0d336c' }}>
|
||||
По запросу <span className="font-mono font-semibold">{searchQuery}</span> автомобили не найдены.
|
||||
</p>
|
||||
<p className="text-sm" style={{ color: '#3b5a99' }}>
|
||||
Попробуйте изменить запрос или проверьте правильность написания.
|
||||
</p>
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
|
||||
>
|
||||
Вернуться на главную
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
z-index: 3000;
|
||||
}
|
||||
|
||||
.top_head{
|
||||
.top_head {
|
||||
z-index: 70;
|
||||
}
|
||||
|
||||
@ -643,18 +643,13 @@ a.link-block-2.w-inline-block {
|
||||
}
|
||||
|
||||
.text-block-14, .div-block-9{
|
||||
width: 350px !important;
|
||||
max-width: 350px !important;
|
||||
min-width: 350px !important;
|
||||
}
|
||||
@media screen and (max-width: 1920px) {
|
||||
.text-block-14, .div-block-9{
|
||||
width: 350px !important;
|
||||
}
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.flex-block-18{
|
||||
row-gap: 40px !important;
|
||||
}
|
||||
@ -1042,4 +1037,13 @@ a.link-block-2.w-inline-block {
|
||||
.protekauto-logo {
|
||||
position: fixed;
|
||||
z-index: 3000;
|
||||
}
|
||||
|
||||
.hide-on-991 {
|
||||
display: block;
|
||||
}
|
||||
@media screen and (max-width: 991px) {
|
||||
.hide-on-991 {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user