gosha

public/drive2.svg

@@ -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>

src/components/reusable/accordSupport.tsx

@@ -15,24 +15,67 @@ const AccordSupp = () => {
             }}
             variant="splitted"
         >
-            <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1"
+            <AccordionItem key="1" aria-label="Для чего необходимо моторное масло, основные функции моторного масла?" title="Для чего необходимо моторное масло, основные функции моторного масла?" indicator={({ isOpen})=> (isOpen ? <Minus /> : <Plus/>)}>
-                           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>
+            <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>
     )
 }

src/components/reusable/footer.tsx

@@ -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">
+                <div className="col-span-12 xl:col-span-2 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">
                 <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">
+                <div className="col-span-12 xl:col-span-10">
-                    <h2>© ООО &quot;ТД Технохим Групп&quot; 2024</h2>
+                    <h2 className="col-span-3">© ООО &quot;ТД Технохим Групп&quot; 2024</h2>
-                    <p className={"text-gray-3 text-sm font-semibold my-2 mt-4"}><Link
+                    <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>

src/pages/catalog/[code].tsx

@@ -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 &&
-                        {isClient && product.properties.documents && <LinkDoc name={product.properties.documents[1]} link={"relynolli.ru/upload/"+product.properties.documents[1]}/>}
+                            <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

src/pages/personalization.tsx

@@ -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>

src/pages/support.tsx

@@ -6,8 +6,7 @@ import {Button, Link} from "@nextui-org/react";
 import ChevronBannerIcon from "../../public/banner_arr_btn.svg.svg";
 
 const Support = () => {
-    return (
+    return (<Wrapper title="Поддержка продукции Relynolli® ООО «ТД Технохим Групп»"
-        <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]">
+            <section
-                <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">
+                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>
-
     )
 }