BivekiGroup/protekauto-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://gittea.biveki.ru/BivekiGroup/protekauto-frontend

Browse Source
This commit is contained in:
54CHA
2025-07-18 19:29:53 +03:00
parent 649ddbfa8a 61b50d10ba
commit 1da9c6ac09
12 changed files with 522 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/noimage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

8
src/components/CoreProductCard.tsx
View File

@ -312,9 +312,9 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
<img src="/images/info.svg" loading="lazy" alt="info" className="image-9" />
</div>
<div className="w-layout-vflex flex-block-50">
<div className="w-layout-hflex flex-block-79">
<h3 className="heading-10 name">{brand}</h3>
<h3 className="heading-10">{article}</h3>
<div className="flex flex-row flex-nowrap items-center gap-2">
<h3 className="heading-10 name" style={{marginRight: 8}}>{brand}</h3>
<h3 className="heading-10" style={{marginRight: 8}}>{article}</h3>
<div
className="favorite-icon w-embed"
onClick={handleFavoriteClick}
@ -328,7 +328,7 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
</svg>
</div>
</div>
<div className="text-block-21">{name}</div>
<div className="text-block-21 mt-1">{name}</div>
</div>
</div>
{image && (

4
src/components/Footer.tsx
View File

@ -115,7 +115,7 @@ const Footer = () => (
<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="hidden md:flex flex-1 flex-wrap gap-30 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>
@ -178,7 +178,7 @@ const Footer = () => (
</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]">
<div className="flex flex-col items-center md:flex-row md:items-start md:justify-center flex-1 flex-wrap gap-4 md:gap-37 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>

69
src/components/index/BestPriceSection.tsx
View File

@ -111,12 +111,62 @@ const BestPriceSection: React.FC = () => {
<div className="text-block-58">Подборка лучших предложенийпо цене</div>
<a href="#" className="button-24 w-button">Показать все</a>
</div>
<div className="carousel-row">
<div className="carousel-row" style={{ position: 'relative' }}>
{/* Стили для стрелок как в ProductOfDayBanner, но без абсолютного позиционирования */}
<style>{`
.carousel-arrow {
width: 40px;
height: 40px;
border: none;
background: none;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.2s;
cursor: pointer;
margin: 0 8px;
}
.carousel-arrow-left {}
.carousel-arrow-right {}
.carousel-arrow .arrow-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.carousel-arrow:hover .arrow-circle,
.carousel-arrow:focus .arrow-circle {
background: #ec1c24;
}
.carousel-arrow .arrow-svg {
width: 20px;
height: 20px;
display: block;
transition: stroke 0.2s;
stroke: #222;
}
.carousel-arrow:hover .arrow-svg,
.carousel-arrow:focus .arrow-svg {
stroke: #fff;
}
.carousel-row {
display: flex;
align-items: center;
justify-content: flex-start;
}
`}</style>
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
<div className="w-layout-hflex flex-block-121 carousel-scroll" ref={scrollRef}>
{bestPriceItems.map((item, i) => (
@ -124,10 +174,11 @@ const BestPriceSection: React.FC = () => {
))}
</div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
</div>
</div>

67
src/components/index/NewArrivalsSection.tsx
View File

@ -84,16 +84,66 @@ const NewArrivalsSection: React.FC = () => {
<h2 className="heading-4">Новое поступление</h2>
</div>
<div className="carousel-row">
{/* Стили для стрелок как в BestPriceSection и TopSalesSection */}
<style>{`
.carousel-arrow {
width: 40px;
height: 40px;
border: none;
background: none;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.2s;
cursor: pointer;
margin: 0 8px;
}
.carousel-arrow-left {}
.carousel-arrow-right {}
.carousel-arrow .arrow-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.carousel-arrow:hover .arrow-circle,
.carousel-arrow:focus .arrow-circle {
background: #ec1c24;
}
.carousel-arrow .arrow-svg {
width: 20px;
height: 20px;
display: block;
transition: stroke 0.2s;
stroke: #222;
}
.carousel-arrow:hover .arrow-svg,
.carousel-arrow:focus .arrow-svg {
stroke: #fff;
}
.carousel-row {
display: flex;
align-items: center;
justify-content: flex-start;
}
`}</style>
<button
className="carousel-arrow carousel-arrow-left"
onClick={scrollLeft}
aria-label="Прокрутить влево"
style={{ cursor: 'pointer' }}
>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
@ -149,10 +199,11 @@ const NewArrivalsSection: React.FC = () => {
aria-label="Прокрутить вправо"
style={{ cursor: 'pointer' }}
>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
</div>
</div>

67
src/components/index/NewsAndPromos.tsx
View File

@ -32,11 +32,61 @@ const NewsAndPromos = () => {
</div>
</div>
<div className="carousel-row">
{/* Стили для стрелок как в других секциях */}
<style>{`
.carousel-arrow {
width: 40px;
height: 40px;
border: none;
background: none;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.2s;
cursor: pointer;
margin: 0 8px;
}
.carousel-arrow-left {}
.carousel-arrow-right {}
.carousel-arrow .arrow-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.carousel-arrow:hover .arrow-circle,
.carousel-arrow:focus .arrow-circle {
background: #ec1c24;
}
.carousel-arrow .arrow-svg {
width: 20px;
height: 20px;
display: block;
transition: stroke 0.2s;
stroke: #222;
}
.carousel-arrow:hover .arrow-svg,
.carousel-arrow:focus .arrow-svg {
stroke: #fff;
}
.carousel-row {
display: flex;
align-items: center;
justify-content: flex-start;
}
`}</style>
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
<div className="w-layout-hflex flex-block-6-copy-copy carousel-scroll" ref={scrollRef}>
<NewsCard
@ -69,10 +119,11 @@ const NewsAndPromos = () => {
/>
</div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
</div>
</div>

12
src/components/index/ProductOfDaySection.tsx
View File

@ -110,8 +110,13 @@ const ProductOfDaySection: React.FC = () => {
};
}
return null;
// Если нет ни одной картинки, возвращаем noimage.png
return {
url: '/images/noimage.png',
alt: product.name,
source: 'noimage'
};
};
// Обработчики для навигации по товарам дня
const handlePrevSlide = (e: React.MouseEvent) => {
@ -209,6 +214,11 @@ const ProductOfDaySection: React.FC = () => {
Parts Index
</div>
)}
{productImage.source === 'noimage' && (
<div className="absolute bottom-0 right-0 bg-gray-400 text-white text-xs px-2 py-1 rounded-tl">
Нет изображения
</div>
)}
</div>
)}
</div>

67
src/components/index/TopSalesSection.tsx
View File

@ -143,11 +143,61 @@ const TopSalesSection: React.FC = () => {
<h2 className="heading-4">Топ продаж</h2>
</div>
<div className="carousel-row">
{/* Стили для стрелок как в BestPriceSection */}
<style>{`
.carousel-arrow {
width: 40px;
height: 40px;
border: none;
background: none;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.2s;
cursor: pointer;
margin: 0 8px;
}
.carousel-arrow-left {}
.carousel-arrow-right {}
.carousel-arrow .arrow-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.carousel-arrow:hover .arrow-circle,
.carousel-arrow:focus .arrow-circle {
background: #ec1c24;
}
.carousel-arrow .arrow-svg {
width: 20px;
height: 20px;
display: block;
transition: stroke 0.2s;
stroke: #222;
}
.carousel-arrow:hover .arrow-svg,
.carousel-arrow:focus .arrow-svg {
stroke: #fff;
}
.carousel-row {
display: flex;
align-items: center;
justify-content: flex-start;
}
`}</style>
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
{activeTopSalesProducts.map((item: TopSalesProductData) => {
@ -177,10 +227,11 @@ const TopSalesSection: React.FC = () => {
})}
</div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
</div>
</div>

36
src/components/vin/VehicleAttributesTooltip.tsx
View File

@ -19,6 +19,7 @@ interface VehicleAttributesTooltipProps {
const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
show,
position,
vehicleName,
vehicleAttributes,
onMouseEnter,
onMouseLeave,
@ -27,7 +28,7 @@ const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
if (!show) return null;
return (
<div
className="flex overflow-hidden flex-col items-center px-8 py-8 bg-slate-50 shadow-[0px_0px_20px_rgba(0,0,0,0.15)] rounded-2xl w-[450px] min-h-[365px] max-w-full fixed z-[9999]"
className="flex overflow-hidden flex-col items-center px-8 py-8 bg-slate-50 shadow-[0px_0px_20px_rgba(0,0,0,0.15)] rounded-2xl w-[450px] max-w-full fixed z-[9999]"
style={{
left: `${position.x + 120}px`,
top: `${position.y}px`,
@ -45,16 +46,33 @@ const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
/>
)}
<div className="flex relative flex-col w-full">
{vehicleAttributes.map((attr, idx) => (
<div key={idx} className="flex gap-5 items-center mt-2 w-full whitespace-nowrap first:mt-0">
<div className="self-stretch my-auto text-gray-400 w-[150px] truncate">
{attr.name}
</div>
<div className="self-stretch my-auto font-medium text-black truncate">
{attr.value}
{/* Заголовок */}
{vehicleName && (
<div className="font-semibold text-lg text-black mb-3 truncate">{vehicleName}</div>
)}
{/* Список характеристик или сообщение */}
{vehicleAttributes.length > 0 ? (
vehicleAttributes.map((attr, idx) => (
<div
key={idx}
className="grid grid-cols-[150px_1fr] gap-x-5 items-start mt-2 w-full first:mt-0"
>
<div className="text-gray-400 break-words whitespace-normal text-left">
{attr.name}
</div>
<div
className="font-medium text-black break-words whitespace-normal text-left justify-self-start"
style={{ textAlign: 'left' }}
>
{attr.value}
</div>
</div>
))
) : (
<div className="flex flex-col items-center justify-center w-full py-8">
<div className="text-gray-400 mb-2">Дополнительная информация недоступна</div>
</div>
))}
)}
</div>
</div>
);

24
src/components/vin/VinQuick.tsx
View File

@ -88,21 +88,19 @@ const VinQuick: React.FC<VinQuickProps> = ({ quickGroup, catalogCode, vehicleId,
))}
{total > 3 && shownCount < total && (
<div className="flex gap-2 mt-2 w-full">
{shownCount + 3 < total && (
<button
className="expand-btn"
onClick={() => setShownCounts(prev => ({ ...prev, [unit.unitid]: shownCount + 3 }))}
style={{ border: '1px solid #EC1C24', borderRadius: 8, background: '#fff', color: '#222', padding: '6px 18px', minWidth: 180 }}
>
Развернуть
<svg width="16" height="16" viewBox="0 0 16 16" style={{ display: 'inline', verticalAlign: 'middle', marginLeft: 4 }}>
<path d="M4 6l4 4 4-4" stroke="#222" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
)}
<button
className="expand-btn"
onClick={() => setShownCounts(prev => ({ ...prev, [unit.unitid]: total }))}
style={{ border: '1px solid #EC1C24', borderRadius: 8, background: '#fff', color: '#222', padding: '6px 18px', minWidth: 180 }}
>
Развернуть
<svg width="16" height="16" viewBox="0 0 16 16" style={{ display: 'inline', verticalAlign: 'middle', marginLeft: 4 }}>
<path d="M4 6l4 4 4-4" stroke="#222" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<button
className="showall-btn"
onClick={() => setShownCounts(prev => ({ ...prev, [unit.unitid]: total }))}
onClick={() => handleUnitClick(unit)}
style={{ background: '#e9eef5', borderRadius: 8, color: '#222', padding: '6px 18px', border: 'none'}}
>
Показать все

146
src/pages/confidentiality.tsx Normal file
View File

@ -0,0 +1,146 @@
import React from 'react';
import Head from 'next/head';
import CatalogSubscribe from "@/components/CatalogSubscribe";
import MobileMenuBottomSection from "@/components/MobileMenuBottomSection";
import NewsAndPromos from "@/components/index/NewsAndPromos";
import Footer from "@/components/Footer";
import IndexTopMenuNav from "@/components/index/IndexTopMenuNav";
import MetaTags from "@/components/MetaTags";
import { getMetaByPath } from "@/lib/meta-config";
import JsonLdScript from "@/components/JsonLdScript";
import { generateOrganizationSchema, generateWebSiteSchema, PROTEK_ORGANIZATION } from "@/lib/schema";
export default function Confidentiality() {
const metaData = getMetaByPath('/');
// Добавьте эти строки:
const organizationSchema = generateOrganizationSchema(PROTEK_ORGANIZATION);
const websiteSchema = generateWebSiteSchema(
"Protek - Автозапчасти и аксессуары",
"https://protek.ru",
"https://protek.ru/search"
);
return (
<>
<MetaTags {...metaData} />
<JsonLdScript schema={organizationSchema} />
<JsonLdScript schema={websiteSchema} />
<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">Политика конфиденциальности</h1>
</div>
</div>
</div>
</div>
</section>
<div className="flex relative gap-8 items-start self-stretch pt-10 pb-20 max-md:p-8 max-sm:gap-5 max-sm:p-5">
<div className="flex relative flex-col gap-8 items-start p-10 bg-white rounded-3xl flex-[1_0_0] max-w-[1580px] mx-auto max-md:p-8 max-sm:gap-5 max-sm:p-5">
<div className="flex relative flex-col gap-5 items-start self-stretch max-sm:gap-4">
<div
layer-name="Объявлен старт продаж электрических насосов"
className="relative self-stretch text-3xl font-bold leading-9 text-gray-950"
>
Объявлен старт продаж электрических насосов
</div>
<div
layer-name="Бренд вывел на рынок сразу широкий ассортимент, уже на старте продаж - более 100 артикулов и включает в себя позиции для брендов-лидеров автомобильного рынка, например: артикул 77WPE080 для Mercedes-Benz S-CLASS (W221, C216), артикул 77WPE096 – Land Rover DISCOVERY V (L462) / Jaguar F-PACE (X761), артикул 77WPE014 – Audi Q5 (8RB) / Volkswagen TOUAREG (7P5, 7P6)."
className="relative self-stretch text-base leading-6 text-gray-600 max-sm:text-sm"
>
Бренд вывел на рынок сразу широкий ассортимент, уже на старте
продаж - более 100 артикулов и включает в себя позиции для
брендов-лидеров автомобильного рынка, например: артикул 77WPE080
для Mercedes-Benz S-CLASS (W221, C216), артикул 77WPE096 – Land
Rover DISCOVERY V (L462) / Jaguar F-PACE (X761), артикул 77WPE014
– Audi Q5 (8RB) / Volkswagen TOUAREG (7P5, 7P6).
</div>
</div>
<div className="flex relative flex-col gap-8 items-start self-stretch max-sm:gap-5">
<div
layer-name="Преимущества электрических насосов охлаждающей жидкости MasterKit Electro:"
className="relative self-stretch text-3xl font-medium leading-9 text-gray-950"
>
Преимущества электрических насосов охлаждающей жидкости MasterKit
Electro:
</div>
<div className="flex relative flex-col gap-3.5 items-start self-stretch">
<div className="flex relative gap-10 items-start w-full max-md:gap-5 max-sm:gap-4">
<div className="relative shrink-0 mt-2 w-2 h-2 bg-gray-600 rounded-full" />
<div
layer-name="Отличная производительность за счёт применения компонентов известных мировых брендов."
className="relative text-base leading-6 text-gray-600 flex-[1_0_0] max-sm:text-sm"
>
Отличная производительность за счёт применения компонентов
известных мировых брендов.
</div>
</div>
<div className="flex relative gap-10 items-start w-full max-md:gap-5 max-sm:gap-4">
<div className="relative shrink-0 mt-2 w-2 h-2 bg-gray-600 rounded-full" />
<div
layer-name="Герметичность и устойчивость к коррозии"
className="relative text-base leading-6 text-gray-600 flex-[1_0_0] max-sm:text-sm"
>
Герметичность и устойчивость к коррозии
</div>
</div>
<div className="flex relative gap-10 items-start w-full max-md:gap-5 max-sm:gap-4">
<div className="relative shrink-0 mt-2 w-2 h-2 bg-gray-600 rounded-full" />
<div
layer-name="Высококачественные материалы компонентов, обеспечивающие долгий срок службы"
className="relative text-base leading-6 text-gray-600 flex-[1_0_0] max-sm:text-sm"
>
Высококачественные материалы компонентов, обеспечивающие
долгий срок службы
</div>
</div>
<div className="flex relative gap-10 items-start w-full max-md:gap-5 max-sm:gap-4">
<div className="relative shrink-0 mt-2 w-2 h-2 bg-gray-600 rounded-full" />
<div
layer-name="Широкий ассортимент – более 100 артикулов"
className="relative text-base leading-6 text-gray-600 flex-[1_0_0] max-sm:text-sm"
>
Широкий ассортимент – более 100 артикулов
</div>
</div>
</div>
<div
layer-name="На электрические насосы системы охлаждения MasterKit Electro предоставляется гарантия 1 год или 30.000 км пробега, в зависимости от того, что наступит раньше. Все новинки уже внесены в каталог подбора продукции и доступны для заказа."
className="relative self-stretch text-base leading-6 text-gray-600 max-sm:text-sm"
>
На электрические насосы системы охлаждения MasterKit Electro
предоставляется гарантия 1 год или 30.000 км пробега, в
зависимости от того, что наступит раньше. Все новинки уже внесены
в каталог подбора продукции и доступны для заказа.
</div>
<div
layer-name="ABig_Button"
data-component-name="ABig_Button"
data-variant-name="Button big=Default"
className="relative gap-2.5 px-10 py-6 text-lg font-medium leading-5 text-center text-white no-underline bg-red-600 rounded-xl transition-all cursor-pointer border-[none] duration-[0.2s] ease-[ease] w-fit max-sm:px-8 max-sm:py-5 max-sm:w-full hover:bg-red-700"
>
Перейти к товару
</div>
</div>
</div>
</div>
<section className="section-3">
<CatalogSubscribe />
</section>
<Footer />
<MobileMenuBottomSection />
</>
);
}

89
src/styles/my.css
View File

@ -491,7 +491,6 @@ input#VinSearchInput {
line-height: 1.4em;
}
.heading-9-copy,
.text-block-21-copy {
width: 250px;
overflow: hidden;
@ -939,11 +938,10 @@ a.link-block-2.w-inline-block {
max-width: 100%;
}
.heading-9-copy {
min-width: 100px;
}
.flex-block-36 {
width: 100%;
}
.flex-block-15-copy {
width: 232px!important;
@ -1193,4 +1191,85 @@ a.link-block-2.w-inline-block {
background: white !important;
box-shadow: 0 8px 32px rgba(44,62,80,0.10), 0 1.5px 4px rgba(44,62,80,0.08) !important;
}
}
.pricecartbp {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px; /* или другой нужный вам отступ */
}
.bestpriceitem {
height: 279px;
}
.flex-block-49 {
gap: 15px;
}
.pcs-search-s1,
.sort-item.first {
width: 100px;
}
@media (max-width: 991px) {
.pcs-search-s1,
.sort-item.first {
width: 60px;
}
}
@media (max-width: 479px) {
.pcs-search-s1,
.sort-item.first {
width: 50px;
}
}
.w-layout-vflex.flex-block-36 {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: flex-start;
align-items: stretch;
}
.w-layout-vflex.flex-block-44 {
flex: 1 1 calc(33.333% - 16px);
max-width: calc(33.333% - 16px);
min-width: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
@media (max-width: 991px) {
.w-layout-vflex.flex-block-44 {
flex: 1 1 calc(50% - 12px);
max-width: calc(50% - 12px);
}
}
@media (max-width: 600px) {
.w-layout-vflex.flex-block-44 {
flex: 1 1 100%;
max-width: 100%;
}
}
@media (max-width: 767px) {
.w-layout-vflex.flex-block-36 {
flex-wrap: nowrap;
overflow-x: auto;
gap: 12px;
-webkit-overflow-scrolling: touch;
}
.w-layout-vflex.flex-block-44 {
min-width: 160px;
max-width: 160px;
flex: 0 0 160px;
}
.heading-9-copy {
text-align: left !important;
margin-left: 0 !important;
}
}