features/layout-changes
WindFallten 2024-05-15 19:14:57 +03:00
parent a38141d5a0
commit 3850c55b44
6 changed files with 136 additions and 68 deletions

7
public/drive2.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="8" fill-opacity="0.7"/>
<g clip-path="url(#clip0_948_14736)">
<path d="M14 8V32H21.3868C25.732 31.8985 27.0355 27.9878 27.0355 25.3807V14.0832C27.0355 11.4761 25.732 8 21.3868 8H14ZM18.3452 27.9878V11.9107H20.5178C21.3868 11.9107 22.6904 13.2142 22.6904 14.0832V25.8152C22.6904 26.6843 21.3868 27.9878 20.5178 27.9878H18.3452Z"/>
</g>
<!--fill-rule="evenodd" clip-rule="evenodd"-->
</svg>

After

Width:  |  Height:  |  Size: 514 B

View File

@ -15,24 +15,67 @@ const AccordSupp = () => {
}}
variant="splitted"
>
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1"
indicator={({ isOpen})=> (isOpen ? <Minus /> : <Plus/>)}
>
daassdad
</AccordionItem>
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2" indicator={({ isOpen})=> (isOpen ? <Minus /> : <Plus/>)}>
daaAsdasdaaaaaaaaaaaaa
</AccordionItem>
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3" indicator={({ isOpen})=> (isOpen ? <Minus /> : <Plus/>)}>
daaAsdasdaaaaaaaaaaaaaa
</AccordionItem>
<AccordionItem key="4" aria-label="Accordion 4" title="Accordion 4" indicator={({ isOpen})=> (isOpen ? <Minus /> : <Plus/>)}>
daaAsdasdaaaaaaaaaaaaaa
</AccordionItem>
<AccordionItem key="5" aria-label="Accordion 5" title="Accordion 5" indicator={({ isOpen})=> (isOpen ? <Minus /> : <Plus/>)}>
daaAsdasdaaaaaaaaaaaaaa
<AccordionItem key="1" aria-label="Для чего необходимо моторное масло, основные функции моторного масла?" title="Для чего необходимо моторное масло, основные функции моторного масла?" indicator={({ isOpen})=> (isOpen ? <Minus /> : <Plus/>)}>
Моторное масло является неотъемлемым полноправным элементом конструкции двигателя внутреннего сгорания наряду с такими деталями как блок цилиндров, коленчатый вал, поршни или шатуны. Основная функция моторного масла снижение трения и износа деталей двигателя. Именно снижение, поскольку полностью исключить износ невозможно, но возможно его минимизировать и обеспечить долговечность двигателя.
Также при смазывании двигателя масло отводит тепло от нагретых деталей, уплотняет зазоры в сопряжениях (в частности, в цилиндро-поршневой группе), защищает детали от коррозионного воздействия продуктов неполного сгорания топлива, удерживает образующиеся загрязнения во взвешенном состоянии, тем самым препятствуя образованию отложений на деталях двигателя и обеспечивая их чистоту.
</AccordionItem>
<AccordionItem key="2" aria-label="Из чего состоит моторное масло?" title="Из чего состоит моторное масло?" indicator={({ isOpen})=> (isOpen ? <Minus /> : <Plus/>)}>
Любое моторное масло состоит из базовой основы (то есть смеси базовых масел) и дополнительных компонентов, называемых добавками или присадками, которые обеспечивают повышение эксплуатационных свойств базового масла. <br/>
В зависимости от базовой основы моторные масла принято делить на минеральные, полусинтетические и синтетические. Моторные масла на минеральной основе обладают стабильными свойствами, в частности, высокой растворимостью присадок (высокой приёмистостью к присадкам), что обеспечивает эффективность работы присадок, хорошие смазывающие свойства. Полусинтетические моторные масла в качестве базовой основы имеют смесь минерального и синтетического масел, что позволяет добиться улучшения низкотемпературных свойств, обеспечить лучшую текучесть масел при низких температурах.
<ul className="my-2 list-inside">
<b>Синтетические масла имеют ряд дополнительных преимуществ:</b>
<li className="!text-medium">отличные низкотемпературные свойства;</li>
<li className="!text-medium">высокую стабильность против окисления, низкую летучесть и низкий расход масла на угар;</li>
<li className="!text-medium">высокие моющие свойства и минимальное количество отложений;</li>
<li className="!text-medium">увеличенный срок службы.</li>
</ul>
</AccordionItem>
<AccordionItem key="3" aria-label="Что такое вязкость и какие бывают вязкости масел?" title="Что такое вязкость и какие бывают вязкости масел?" indicator={({ isOpen})=> (isOpen ? <Minus /> : <Plus/>)}>
Вязкость (текучесть) масла одна из важнейших физико-химических характеристик масла, влияющая на выбор масла для конкретного двигателя и условий эксплуатации. Масло должно быть, с одной стороны, достаточно жидким (текучим) при низкой температуре, чтобы обеспечить надёжный запуск двигателя при низких температурах. Но, с другой стороны, масло должно быть достаточно густым, чтобы эффективно разделять трущиеся поверхности двигателя в прогретом состоянии и защищать от износа.
<br/>Таким образом, моторные масла принято классифицировать в первую очередь по вязкости (или по вязкостно-температурным свойствам). Наибольшее распространение получила классификация моторных масле по вязкости, разработанная Американским обществом автомобильных инженеров (SAE) классификация SAEJ300. В соответствии с данной классификацией масла разделены на 16 классов от 0W до 60. Часть классов относится к зимним классам 0W, 5W, 10W и др. А часть классов относится к летним 16, 20, 30, 40 и др. Моторные масла, вязкость которых обозначена с указанием и зимнего и летнего классов, например 5W-40, 0W-30, называются всесезонными и предназначены для эксплуатации в двигателях как при низкой так и при высокой температуре окружающего воздуха, в зимнее и летнее время года. Такие масла получили наибольшее распространения в автомобильных двигателях.
</AccordionItem>
<AccordionItem key="4" aria-label="Как выбрать моторное масло?" title="Как выбрать моторное масло?" indicator={({ isOpen})=> (isOpen ? <Minus /> : <Plus/>)}>
<ol className="list-decimal list-inside">
<b>При выборе моторного масла необходимо учитывать:</b>
<li>Температуру окружающего воздуха, при которой эксплуатируется автомобиль и двигатель</li>
<li>Вид применяемого топлива (бензин или дизель)</li>
<li>Конструктивные особенности систем двигателя, например, наличие современной системы очистки (нейтрализации) отработавших газов и др.</li>
</ol>
Существует ещё ряд факторов. Однако, для того, чтобы при выборе моторного масла не запутаться во всех этих особенностях и тонкостях, необходимо обратиться к руководству по эксплуатации автомобиля (или двигателя). Именно в руководстве по эксплуатации содержится информация о рекомендуемом для применения классе вязкости моторного масла, уровне его эксплуатационных свойств. При этом марка (производитель) моторного масла может отличаться от того, что указано в руководстве.
</AccordionItem>
<AccordionItem key="5" aria-label="Как часто необходимо менять моторное масло?"
title="Как часто необходимо менять моторное масло?"
indicator={({isOpen}) => (isOpen ? <Minus/> : <Plus/>)}>
<ol className="list-decimal list-inside">
<b>Интервал замены моторного масла зависит от ряда факторов, таких как:</b>
<li>Условия эксплуатации, нагрузка на двигатель, стиль вождения</li>
<li>Качество применяемого топлива (содержание в нем серы)</li>
<li>Качество самого моторного масла, уровень его моющих и нейтрализующих свойств, стабильность против
окисления и др.
</li>
</ol>
Информация о рекомендованном интервале замены моторного масла также содержится в сервисной книжке
автомобиля или руководстве по эксплуатации. Типичным интервалом замены считается интервал между
техническими обслуживаниями двигателя равный 10-15 тыс. км пробега, при тяжёлых условиях эксплуатации
интервал обычно рекомендуется сократить примерно в два раза, например, до 7-8 тыс. км. <br/>
Главное моторное масло должно быть заменено до того, как оно потеряет свои свойства, до того, как его
физико-химические параметры (вязкость, щелочное число, кислотное число, температура вспышки) достигнут
своих браковочных значений.
</AccordionItem>
<AccordionItem key="6" aria-label="Как и где необходимо менять моторное масло?" title="Как и где необходимо менять моторное масло?"
indicator={({isOpen}) => (isOpen ? <Minus/> : <Plus/>)}>
Замену моторного масла необходимо проводить на станциях технического обслуживания автомобилей, дилерских центрах, специальных пунктах замены масел. При смене моторного масла в обязательном порядке необходимо заменять и масляный фильтр. Специалисты, например на пункте замены масла, помогут с выбором необходимого класса вязкости масла, уровнем его эксплуатационных свойств, подберут требуемый масляный фильтр и проведут квалифицированную замену. В некоторых случаях может быть рекомендована процедура промывки смазочной системы двигателя. Например, при переходе с масла, имеющего минеральную основу, на масло с синтетической основой.
</AccordionItem>
<AccordionItem key="7" aria-label="Как не попасться на контрафактное некачественное масло?" title="Как не попасться на контрафактное некачественное масло?"
indicator={({isOpen}) => (isOpen ? <Minus/> : <Plus/>)}>
Применение моторного масла, не отвечающего необходимым требованиям, может привести к отказам двигателя и к его капитальному ремонту.<br/>
При производстве качественных моторных масел добросовестные производители используют высококачественные базовые масла, стабильный пакет присадок, соблюдают технологию производства. Это позволяет обеспечить надёжную работу масла на всём интервале до замены.<br/>
Недобросовестные производители стараются экономить на компонентах масла, используют компоненты низкого качества. Для того, чтобы избежать покупки некачественного моторного масла несоответствующего требованиям необходимо обращаться на станции технического обслуживания автомобилей, дилерские центры и пункты замены масел, которые дорожат своими клиентами, своей деловой репутацией и не будут использовать некачественное масло в своей работе.
</AccordionItem>
</Accordion>
)
}

View File

@ -4,6 +4,7 @@ import Logo from "../../../public/header_logo.svg";
import TgIcon from "../../../public/tg_icon.svg"
import VkIcon from "../../../public/vk_icon.svg"
import YouTubeIcon from "../../../public/YouTubeIcon.svg"
import Drive2 from "../../../public/drive2.svg"
const Footer = () => {
return (
@ -24,6 +25,8 @@ const Footer = () => {
className={"fill-gray-3 group-hover:fill-primary transition-colors [&_path]:fill-white"}/></a>
<a href="https://youtube.com/@Relynolli" className={"group"}><YouTubeIcon
className={"fill-gray-3 group-hover:fill-primary transition-colors [&_path]:fill-white last:[&_path]:fill-gray-3"}/></a>
<a href="https://www.drive2.ru/o/relynolli/" className={"group"}><Drive2
className={"fill-gray-3 group-hover:fill-primary transition-colors [&_path]:fill-white last:[&_path]:fill-gray-3"}/></a>
{/* <a href="https://youtube.com/@Relynolli" className={"group"}><Img src={'/ozon_icon.png'} className={"w-[40px] h-[40px] grayscale group-hover:grayscale-0 transition-all"} /></a> */}
</div>
@ -31,22 +34,7 @@ const Footer = () => {
</div> */}
</div>
<div className="col-span-12 xl:col-span-3 xl:col-start-5 mt-5">
<h2 className={"text-2xl hover:text-primary transition-colors"}>Бренд</h2>
<ul className={"text-gray-3 text-sm font-semibold my-2"}>
<li className={"hover:text-primary transition-colors"}><Link
href={"/personalization"}>Персонализация</Link></li>
<li className={"hover:text-primary transition-colors"}><Link
href={"/technology"}>Технологии</Link></li>
<li className={"hover:text-primary transition-colors"}><Link
href={"/production"}>Производство</Link></li>
<li className={"hover:text-primary transition-colors"}><Link href={"/news"}>Новости</Link></li>
<li className={"hover:text-primary transition-colors"}>Карьера</li>
<li className={"hover:text-primary transition-colors"}><Link href={"/mission"}>Миссия</Link>
</li>
</ul>
</div>
<div className="col-span-12 xl:col-span-3 mt-5">
<div className="col-span-12 xl:col-span-2 xl:col-start-5 mt-5">
<h2 className={"text-2xl hover:text-primary transition-colors"}><Link
href={"/catalog"}>Продукция</Link></h2>
<ul className={"text-gray-3 text-sm font-semibold my-2"}>
@ -57,25 +45,49 @@ const Footer = () => {
</ul>
</div>
<div className="col-span-12 xl:col-span-2 mt-5">
<h2 className={"text-2xl hover:text-primary transition-colors"}>Информация</h2>
<h2 className={"text-2xl transition-colors"}>О компании</h2>
<ul className={"text-gray-3 text-sm font-semibold my-2"}>
<li className={"hover:text-primary transition-colors"}>Оплата</li>
<li className={"hover:text-primary transition-colors"}><Link
href={"/personalization"}>Персонализация</Link></li>
<li className={"hover:text-primary transition-colors"}><Link
href={"/technology"}>Технологии</Link></li>
<li className={"hover:text-primary transition-colors"}><Link
href={"/production"}>Производство</Link></li>
<li className={"hover:text-primary transition-colors"}><Link href={"/news"}>Новости</Link></li>
</ul>
</div>
<div className="col-span-12 xl:col-span-2 mt-5">
<h2 className={"text-2xl transition-colors"}>Информация</h2>
<ul className={"text-gray-3 text-sm font-semibold my-2"}>
<li className={"transition-colors"}>Оплата</li>
<li className={"hover:text-primary transition-colors"}><Link href={"/contact"}>Контакты</Link>
</li>
</ul>
</div>
<div className="col-span-12 xl:col-span-2 mt-5">
<h2 className={"text-2xl transition-colors"}>Партнерам</h2>
<ul className={"text-gray-3 text-sm font-semibold my-2"}>
<li className={"hover:text-primary transition-colors"}>Карьера</li>
<li className={"hover:text-primary transition-colors"}><Link href={"/mission"}>Миссия</Link>
</li>
<li className={"hover:text-primary transition-colors"}><Link href={"/support"}>Поддержка и
рекламации</Link></li>
</ul>
</div>
<Divider className={"col-span-12 my-8 h-[1px] w-full bg-gray-3"}/>
<div className="col-span-12">
<h2>© ООО &quot;ТД Технохим Групп&quot; 2024</h2>
<p className={"text-gray-3 text-sm font-semibold my-2 mt-4"}><Link
<div className="col-span-12 xl:col-span-10">
<h2 className="col-span-3">© ООО &quot;ТД Технохим Групп&quot; 2024</h2>
<p className={"text-gray-3 text-sm font-semibold my-2 mt-4 col-span-3"}><Link
href={"https://tehnohimgrupp.ru/upload/Политика_обработки_ПДн_ТХГ.pdf"}>Политика
конфиденциальности</Link></p>
<p className={"text-gray-3 text-sm font-semibold my-2"}><Link
<p className={"text-gray-3 text-sm font-semibold my-2 col-span-3"}><Link
href={"https://tehnohimgrupp.ru/upload/Согласие на ОПД Технохим.pdf"}>Обработка персональных
данных</Link></p>
</div>
<div className="col-span-12 mt-6 xl:col-span-2">
<iframe src="https://yandex.ru/sprav/widget/rating-badge/32353164529?type=rating&theme=dark"
width="150" height="50"></iframe>
</div>
</div>
</footer>

View File

@ -1,4 +1,4 @@
import {BreadcrumbItem, Breadcrumbs, Button, Skeleton, Spinner} from "@nextui-org/react";
import {BreadcrumbItem, Breadcrumbs, Button, Spinner} from "@nextui-org/react";
import HomeIcon from "../../../public/home_icon.svg";
import Link from "next/link";
import {InferGetStaticPropsType} from "next";
@ -8,7 +8,7 @@ import favouritesStore, {toggleFavourite} from "@/store/favourites";
import {useSnapshot} from "valtio";
import useClient from "@/hooks/useClient";
import LocalAPI from "@/service/localAPI";
import {useQuery, useQueryClient, useMutation} from "@tanstack/react-query";
import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
import {Img} from 'react-image'
import {CartItem, Wrapper} from "@/service/types/local";
import LinkDoc from "@/components/reusable/linkDoc";
@ -59,7 +59,9 @@ const OilCard = ({product}: InferGetStaticPropsType<typeof getStaticProps>) => {
</Breadcrumbs>
</div>
<div className="wrapper mt-12 mb-12 grid grid-cols-1 lg:grid-cols-2 gap-4 items-center">
{isClient && product.properties.main_image && <Img src={"https://relynolli.ru/upload/" + product.properties.main_image[0]} alt={product.name} className={"object-center max-w-[300px] mx-auto"} loader={<Spinner />}/>}
{isClient && product.properties.main_image &&
<Img src={"https://relynolli.ru/upload/" + product.properties.main_image[0]} alt={product.name}
className={"object-center max-w-[300px] mx-auto"} loader={<Spinner/>}/>}
<div className="right-block mt-4">
<span
className={"text-sm md:text-xl text-[#E0E3E3] mb-7 block"}>Артикул: {product.properties.vendor_code}</span>
@ -83,7 +85,9 @@ const OilCard = ({product}: InferGetStaticPropsType<typeof getStaticProps>) => {
</span>
{isClient &&
<Button onClick={() => toggleCart.mutate({productId: product.id, quantity: 1})} color={"primary"} className={"order-3 col-span-2 lg:order-none text-black font-extrabold uppercase italic h-[70px]"}
<Button onClick={() => toggleCart.mutate({productId: product.id, quantity: 1})}
color={"primary"}
className={"order-3 col-span-2 lg:order-none text-black font-extrabold uppercase italic h-[70px]"}
startContent={<Cart/>}>
{(cartItems.data && cartItems.data.data && cartItems.data.data.map((item) => item.product.id).includes(product.id)) ? "В корзине" : "Добавить в корзину"}
@ -91,13 +95,13 @@ const OilCard = ({product}: InferGetStaticPropsType<typeof getStaticProps>) => {
</Button>}
{
isClient &&
<Button onClick={() => toggleFavourite(product.id)} className={`max-w-fit justify-self-end lg:justify-self-start order-2 lg:order-none px-5 rounded-[8px] h-[70px] ${favourites.includes(product.id) ? "bg-green-2 fill-black": "bg-[#E2E2E5] bg-opacity-30 fill-white"}`}>
<Button onClick={() => toggleFavourite(product.id)}
className={`max-w-fit justify-self-end lg:justify-self-start order-2 lg:order-none px-5 rounded-[8px] h-[70px] ${favourites.includes(product.id) ? "bg-green-2 fill-black" : "bg-[#E2E2E5] bg-opacity-30 fill-white"}`}>
<Favourites/>
</Button>
}
</div>
</div>
@ -173,8 +177,11 @@ const OilCard = ({product}: InferGetStaticPropsType<typeof getStaticProps>) => {
<h2 className={"text-title-3 font-semibold mb-4"}>Документация</h2>
<div className="pb-4 flex flex-row">
{isClient && product.properties.documents && <LinkDoc name={product.properties.documents[0]} link={"relynolli.ru/upload/"+ product.properties.documents[0]}/>}
{isClient && product.properties.documents && <LinkDoc name={product.properties.documents[1]} link={"relynolli.ru/upload/"+product.properties.documents[1]}/>}
{isClient && product.properties.documents &&
<LinkDoc name={product.properties.documents[0]} link={product.properties.documents[0]}/>}
{/*"relynolli.ru/upload/"+*/}
{isClient && product.properties.documents &&
<LinkDoc name={product.properties.documents[1]} link={product.properties.documents[1]}/>}
</div>
</div>
</section>
@ -207,8 +214,7 @@ export const getStaticProps = async ({params: {code}}: { params: { code: string
},
revalidate: 10 * 60
}
}
catch (e) {
} catch (e) {
return {
notFound: true,
revalidate: 10 * 60

View File

@ -11,7 +11,7 @@ const Personalization = () => {
<div className="content text-base [&_h2]:text-2xl [&_section]:mb-10 [&_h2]:xl:text-4xl [&_h2]:mb-6 [&_h2]:font-bold [&_p]:xl:text-xl [&_p]:mb-9 [&_ul>li]:xl:text-xl [&_ul]:list-disc [&_li]:mb-2">
<section>
<p>На базе собственного Научно-технического центра (НТЦ ООО «ТД Технохим Групп) наша компания готова доработать линейку продукции или услуги под запросы конкретного клиента.</p>
<a href="" className="img-block relative flex justify-center">
<a className="img-block relative flex justify-center">
<Img src={"/motocross.png"} alt="motocross"></Img>
</a>
</section>

View File

@ -6,8 +6,7 @@ import {Button, Link} from "@nextui-org/react";
import ChevronBannerIcon from "../../public/banner_arr_btn.svg.svg";
const Support = () => {
return (
<Wrapper title="Поддержка продукции Relynolli® ООО «ТД Технохим Групп»"
return (<Wrapper title="Поддержка продукции Relynolli® ООО «ТД Технохим Групп»"
breadcrumbs={[{name: "Поддержка и рекламация", link: "/personalization"}]}>
<div
@ -45,8 +44,10 @@ const Support = () => {
<AccordSupp/>
</section>
</div>
<section className="bg-gradient-to-t from-green-1 to-black w-full flex flex-wrap justify-center lg:p-24 rounded-[30px]">
<div className="bg-black bg-opacity-20 flex flex-wrap flex-col justify-center text-white p-7 rounded-[30px] lg:p-16 pb-20 pt-20 gap-5">
<section
className="bg-gradient-to-t from-green-1 to-black w-full flex flex-wrap justify-center lg:p-24 rounded-[30px]">
<div
className="bg-black bg-opacity-20 flex flex-wrap flex-col justify-center text-white p-7 rounded-[30px] lg:p-16 pb-20 pt-20 gap-5">
<h2 className="text-3xl">У вас остались вопросы?</h2>
<p>Вы можете обратиться в службу технической поддержки компании ООО «ТД Технохим Групп» и мы ответим
на все Ваши вопросы!</p>
@ -60,7 +61,6 @@ const Support = () => {
</div>
</section>
</Wrapper>
)
}