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

first commit

Browse Source
This commit is contained in:
Bivekich
2025-06-26 06:59:59 +03:00
commit d44874775c
450 changed files with 76635 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/index/AvailableParts.tsx Normal file
View File

@ -0,0 +1,54 @@
import React from "react";
import Link from "next/link";
const AvailableParts = () => (
<section>
<div className="w-layout-blockcontainer container w-container">
<div className="w-layout-vflex flex-block-5">
<div className="w-layout-hflex flex-block-31">
<h2 className="heading-4">Автозапчасти в наличии</h2>
<div className="w-layout-hflex flex-block-29">
<Link href="/catalog" className="text-block-18">
Ко всем автозапчастям
</Link>
<img src="/images/Arrow_right.svg" loading="lazy" alt="" />
</div>
</div>
<div className="w-layout-hflex flex-block-6">
<Link href="/catalog" className="div-block-12" id="w-node-bc394713-4b8e-44e3-8ddf-3edc1c31a743-3b3232bc">
<h1 className="heading-7">Аксессуары</h1>
<img src="/images/IMG_1.png" loading="lazy" alt="" className="image-22" />
</Link>
<Link href="/catalog" className="div-block-12-copy">
<h1 className="heading-7">Воздушные фильтры</h1>
<img src="/images/IMG_2.png" loading="lazy" alt="" className="image-22" />
</Link>
<Link href="/catalog" className="div-block-12">
<h1 className="heading-7">Шины</h1>
<img src="/images/IMG_3.png" loading="lazy" alt="" className="image-22" />
</Link>
<Link href="/catalog" className="div-block-123">
<h1 className="heading-7-white">Аккумуляторы</h1>
<img src="/images/IMG_4.png" loading="lazy" alt="" className="image-22" />
</Link>
<div className="w-layout-hflex flex-block-35" id="w-node-_8908a890-8c8f-e12c-999f-08d5da3bcc01-3b3232bc">
<Link href="/catalog" className="div-block-12 small">
<h1 className="heading-7">Диски</h1>
<img src="/images/IMG_5.png" loading="lazy" alt="" className="image-22" />
</Link>
<Link href="/catalog" className="div-block-12 small">
<h1 className="heading-7">Свечи</h1>
<img src="/images/IMG_6.png" loading="lazy" alt="" className="image-22" />
</Link>
<Link href="/catalog" className="div-block-red small">
<h1 className="heading-7-white">Масла</h1>
<img src="/images/IMG_7.png" loading="lazy" alt="" className="image-22" />
</Link>
</div>
</div>
</div>
</div>
</section>
);
export default AvailableParts;

30
src/components/index/CarPartsSelectionForm.tsx Normal file
View File

@ -0,0 +1,30 @@
import React from "react";
const CarPartsSelectionForm = () => (
<div className="w-layout-vflex flex-block-28">
<h3 className="heading-5">Подбор по автомобилю</h3>
<div className="form-block-4 w-form">
<form id="email-form" name="email-form" data-name="Email Form" method="get" data-wf-page-id="6800f7e35fcfd4ca3b3232bc" data-wf-element-id="035eb944-3f18-512d-416f-afd9dcaf7b45">
{[7, 5, 4, 3].map((field) => (
<select id={`field-${field}`} name={`field-${field}`} data-name={`Field ${field}`} className="select w-select" key={field}>
<option value="">Год выпуска</option>
<option value="First">First choice</option>
<option value="Second">Second choice</option>
<option value="Third">Third choice</option>
</select>
))}
<div className="div-block-10">
<input type="submit" data-wait="Please wait..." className="submit-button w-button" value="Подобрать автозапчасть" />
</div>
</form>
<div className="w-form-done">
<div>Thank you! Your submission has been received!</div>
</div>
<div className="w-form-fail">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
</div>
</div>
);
export default CarPartsSelectionForm;

149
src/components/index/CatalogSection.tsx Normal file
View File

@ -0,0 +1,149 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import { useQuery } from "@apollo/client";
import { GET_LAXIMO_BRANDS } from "@/lib/graphql";
import { LaximoBrand } from "@/types/laximo";
const tabs = [
"Техническое обслуживание",
"Легковые",
"Грузовые",
"Коммерческие",
];
const CatalogSection = () => {
const [activeTab, setActiveTab] = useState(0);
const router = useRouter();
const { data, loading, error } = useQuery<{ laximoBrands: LaximoBrand[] }>(GET_LAXIMO_BRANDS, {
errorPolicy: 'all'
});
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
router.push("/catalog");
};
// Статические данные автомобильных брендов
const staticBrands = [
{ name: "Audi" },
{ name: "BMW" },
{ name: "Cadillac" },
{ name: "Chevrolet" },
{ name: "Citroen" },
{ name: "Fiat" },
{ name: "Mazda" }
];
// Определяем какие данные использовать
let brands = staticBrands;
if (data?.laximoBrands && data.laximoBrands.length > 0) {
// Если есть данные от Laximo API, используем их
brands = data.laximoBrands.map(brand => ({
name: brand.name,
code: brand.code
}));
} else if (error) {
console.warn('Laximo API недоступен, используются статические данные:', error.message);
}
const handleBrandClick = (brand: { name: string; code?: string }) => {
if (brand.code) {
router.push(`/brands?selected=${brand.code}`);
} else {
console.warn('Brand code not available for', brand.name);
}
};
if (loading) {
return (
<section>
<div className="w-layout-blockcontainer container w-container">
<div className="w-layout-vflex flex-block-5">
<h2 className="heading-4">Каталоги автозапчастей</h2>
<div className="text-center">Загрузка брендов...</div>
</div>
</div>
</section>
);
}
return (
<section>
<div className="w-layout-blockcontainer container w-container">
<div className="w-layout-vflex flex-block-5">
<h2 className="heading-4">Каталоги автозапчастей</h2>
<div className="w-layout-hflex flex-block-6-copy">
<div className="w-layout-hflex flex-block-24">
<div className="w-layout-hflex flex-block-25">
{tabs.map((tab, idx) => (
<div
className={activeTab === idx ? "tab_card-activ" : "tab_card"}
key={idx}
onClick={() => setActiveTab(idx)}
style={{ cursor: "pointer" }}
>
{tab}
</div>
))}
</div>
<div className="w-layout-hflex flex-block-27">
{[...Array(7)].map((_, colIdx) => (
<div className="w-layout-vflex flex-block-26" key={colIdx}>
{brands.slice(colIdx * Math.ceil(brands.length / 7), (colIdx + 1) * Math.ceil(brands.length / 7)).map((brand, idx) => (
<button
onClick={() => handleBrandClick(brand)}
className="link-block-6 w-inline-block text-left"
key={idx}
style={{ background: 'none', border: 'none', padding: 0 }}
>
<div>{brand.name}</div>
</button>
))}
</div>
))}
</div>
<button
onClick={() => router.push('/brands')}
className="w-layout-hflex flex-block-29 cursor-pointer hover:opacity-80 transition-opacity"
style={{ background: 'none', border: 'none', padding: 0 }}
>
<div className="text-block-18">Все марки</div>
<img src="/images/Arrow_right.svg" loading="lazy" alt="" />
</button>
</div>
<div className="w-layout-vflex flex-block-28">
<h3 className="heading-5">Подбор по автомобилю</h3>
<div className="form-block-4 w-form">
<form id="email-form" name="email-form" data-name="Email Form" method="get" data-wf-page-id="6800f7e35fcfd4ca3b3232bc" data-wf-element-id="035eb944-3f18-512d-416f-afd9dcaf7b45" onSubmit={handleSubmit}>
{[7, 5, 4, 3].map((field) => (
<select id={`field-${field}`} name={`field-${field}`} data-name={`Field ${field}`} className="select w-select" key={field}>
<option value="">Год выпуска</option>
<option value="First">First choice</option>
<option value="Second">Second choice</option>
<option value="Third">Third choice</option>
</select>
))}
<div className="div-block-10">
<input type="submit" data-wait="Please wait..." className="submit-button w-button" value="Подобрать автозапчасть" />
</div>
</form>
<div className="w-form-done">
<div>Thank you! Your submission has been received!</div>
</div>
<div className="w-form-fail">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default CatalogSection;

38
src/components/index/CatalogTabs.tsx Normal file
View File

@ -0,0 +1,38 @@
import React from "react";
const CatalogTabs = () => (
<section>
<div className="w-layout-blockcontainer container w-container">
<div className="w-layout-vflex flex-block-5">
<h2 className="heading-4">Каталоги автозапчастей</h2>
<div className="w-layout-hflex flex-block-6">
<div className="w-layout-hflex flex-block-24">
<div className="w-layout-hflex flex-block-25">
<div className="tab_c">Техническое обслуживание</div>
<div className="tab_c">Легковые</div>
<div className="tab_c">Грузовые</div>
<div className="tab_c">Коммерческие</div>
</div>
<div className="w-layout-hflex flex-block-27">
{[...Array(7)].map((_, i) => (
<div className="w-layout-vflex flex-block-26" key={i}>
{["Audi", "BMW", "Cadillac", "Chevrolet", "Citroen", "Fiat", "Mazda"].map((brand) => (
<a href={`/brand?selected=${encodeURIComponent(brand)}`} className="link-block-6 w-inline-block" key={brand}>
<div>{brand}</div>
</a>
))}
</div>
))}
</div>
<div className="w-layout-hflex flex-block-29">
<div className="text-block-18">Все марки</div>
<img src="/images/Arrow_right.svg" loading="lazy" alt="" />
</div>
</div>
</div>
</div>
</div>
</section>
);
export default CatalogTabs;

133
src/components/index/HeroSlider.tsx Normal file
View File

@ -0,0 +1,133 @@
import React, { useEffect } from "react";
const HeroSlider = () => {
useEffect(() => {
if (typeof window !== "undefined" && window.Webflow && window.Webflow.require) {
if (window.Webflow.destroy) {
window.Webflow.destroy();
}
if (window.Webflow.ready) {
window.Webflow.ready();
}
}
}, []);
return (
<section className="section-5">
<div className="w-layout-blockcontainer container w-container">
<div data-delay="4000" data-animation="slide" className="slider w-slider" data-autoplay="false" data-easing="ease"
data-hide-arrows="false" data-disable-swipe="false" data-autoplay-limit="0" data-nav-spacing="3"
data-duration="500" data-infinite="true">
<div className="mask w-slider-mask">
<div className="slide w-slide">
<div className="w-layout-vflex flex-block-100">
<div className="div-block-35"><img src="/images/imgfb.png" loading="lazy"
sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px"
srcSet="/images/imgfb-p-500.png 500w, /images/imgfb-p-800.png 800w, /images/imgfb.png 1027w" alt=""
className="image-21" /></div>
<div className="w-layout-vflex flex-block-99">
<h2 className="heading-17">ШИРОКИЙ ВЫБОР АВТОЗАПЧАСТЕЙ</h2>
<div className="text-block-51">Сотрудничаем только с проверенными поставщиками.Постоянно обновляем
ассортимент, чтобы предложить самые лучшие и актуальные детали.</div>
</div>
<div className="w-layout-hflex flex-block-101">
<div className="w-layout-hflex flex-block-102"><img src="/images/1.png" loading="lazy" alt=""
className="image-20" />
<div className="text-block-52">Быстрая доставка по всей стране</div>
</div>
<div className="w-layout-hflex flex-block-102"><img src="/images/2.png" loading="lazy" alt=""
className="image-20" />
<div className="text-block-52">Высокое качество продукции</div>
</div>
<div className="w-layout-hflex flex-block-102"><img src="/images/3.png" loading="lazy" alt=""
className="image-20" />
<div className="text-block-52">Выгодные цены</div>
</div>
<div className="w-layout-hflex flex-block-102"><img src="/images/4.png" loading="lazy" alt=""
className="image-20" />
<div className="text-block-52">Профессиональная консультация</div>
</div>
</div>
</div>
</div>
<div className="w-slide">
<div className="w-layout-vflex flex-block-100">
<div className="div-block-35"><img src="/images/imgfb.png" loading="lazy"
sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px"
srcSet="/images/imgfb-p-500.png 500w, /images/imgfb-p-800.png 800w, /images/imgfb.png 1027w" alt=""
className="image-21" /></div>
<div className="w-layout-vflex flex-block-99">
<h2 className="heading-17">УЗКИЙ ВЫБОР АВТОЗАПЧАСТЕЙ</h2>
<div className="text-block-51">Сотрудничаем только с проверенными поставщиками.Постоянно обновляем
ассортимент, чтобы предложить самые лучшие и актуальные детали.</div>
</div>
<div className="w-layout-hflex flex-block-101">
<div className="w-layout-hflex flex-block-102"><img src="/images/1.png" loading="lazy" alt=""
className="image-20" />
<div className="text-block-52">Быстрая доставка по всей стране</div>
</div>
<div className="w-layout-hflex flex-block-102"><img src="/images/2.png" loading="lazy" alt=""
className="image-20" />
<div className="text-block-52">Высокое качество продукции</div>
</div>
<div className="w-layout-hflex flex-block-102"><img src="/images/3.png" loading="lazy" alt=""
className="image-20" />
<div className="text-block-52">Выгодные цены</div>
</div>
<div className="w-layout-hflex flex-block-102"><img src="/images/4.png" loading="lazy" alt=""
className="image-20" />
<div className="text-block-52">Профессиональная консультация</div>
</div>
</div>
</div>
</div>
<div className="w-slide">
<div className="w-layout-vflex flex-block-100">
<div className="div-block-35"><img src="/images/imgfb.png" loading="lazy"
sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px"
srcSet="/images/imgfb-p-500.png 500w, /images/imgfb-p-800.png 800w, /images/imgfb.png 1027w" alt=""
className="image-21" /></div>
<div className="w-layout-vflex flex-block-99">
<h2 className="heading-17">ЛУЧШИЙ ВЫБОР АВТОЗАПЧАСТЕЙ</h2>
<div className="text-block-51">Сотрудничаем только с проверенными поставщиками.Постоянно обновляем
ассортимент, чтобы предложить самые лучшие и актуальные детали.</div>
</div>
<div className="w-layout-hflex flex-block-101">
<div className="w-layout-hflex flex-block-102"><img src="/images/1.png" loading="lazy" alt=""
className="image-20" />
<div className="text-block-52">Быстрая доставка по всей стране</div>
</div>
<div className="w-layout-hflex flex-block-102"><img src="/images/2.png" loading="lazy" alt=""
className="image-20" />
<div className="text-block-52">Высокое качество продукции</div>
</div>
<div className="w-layout-hflex flex-block-102"><img src="/images/3.png" loading="lazy" alt=""
className="image-20" />
<div className="text-block-52">Выгодные цены</div>
</div>
<div className="w-layout-hflex flex-block-102"><img src="/images/4.png" loading="lazy" alt=""
className="image-20" />
<div className="text-block-52">Профессиональная консультация</div>
</div>
</div>
</div>
</div>
</div>
<div className="left-arrow w-slider-arrow-left">
<div className="div-block-34">
<div className="icon-2 w-icon-slider-left"></div>
</div>
</div>
<div className="right-arrow w-slider-arrow-right">
<div className="div-block-34">
<div className="icon-2 w-icon-slider-right"></div>
</div>
</div>
<div className="slide-nav w-slider-nav w-slider-nav-invert w-round"></div>
</div>
</div>
</section>
);
};
export default HeroSlider;

53
src/components/index/NewsAndPromos.tsx Normal file
View File

@ -0,0 +1,53 @@
import React from "react";
import NewsCard from "@/components/news/NewsCard";
import Link from "next/link";
const NewsAndPromos = () => (
<section>
<div className="w-layout-blockcontainer container w-container">
<div className="w-layout-vflex news-index-block">
<div className="w-layout-hflex flex-block-31">
<h2 className="heading-4">Новости и акции</h2>
<div className="w-layout-hflex flex-block-29">
<Link href="/news" className="text-block-18" style={{display: 'flex', alignItems: 'center'}}>
Ко всем новостям
<img src="/images/Arrow_right.svg" loading="lazy" alt="" style={{marginLeft: 8}} />
</Link>
</div>
</div>
<div className="w-layout-hflex flex-block-6-copy-copy">
<NewsCard
title="Kia Syros будет выделяться необычным стилем"
description="Компания Kia готова представить новый кроссовер Syros"
category="Новости компании"
date="17.12.2024"
image="/images/news_img.png"
/>
<NewsCard
title="Kia Syros будет выделяться необычным стилем"
description="Компания Kia готова представить новый кроссовер Syros"
category="Новости компании"
date="17.12.2024"
image="/images/news_img.png"
/>
<NewsCard
title="Kia Syros будет выделяться необычным стилем"
description="Компания Kia готова представить новый кроссовер Syros"
category="Новости компании"
date="17.12.2024"
image="/images/news_img.png"
/>
<NewsCard
title="Kia Syros будет выделяться необычным стилем"
description="Компания Kia готова представить новый кроссовер Syros"
category="Новости компании"
date="17.12.2024"
image="/images/news_img.png"
/>
</div>
</div>
</div>
</section>
);
export default NewsAndPromos;