gosha forms other

public/clamp.svg

@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.35921 13.9603L12.3286 7.08507C12.6274 6.58588 13.1105 6.22418 13.6737 6.07804C14.2368 5.93191 14.8349 6.01304 15.3387 6.30394C15.8426 6.59484 16.2118 7.07218 16.3669 7.63295C16.5219 8.19373 16.4502 8.79296 16.1673 9.30135L10.9598 18.3353C10.7164 18.769 10.3894 19.15 9.99767 19.4562C9.60595 19.7625 9.15732 19.988 8.6778 20.1196C8.19828 20.2512 7.69741 20.2863 7.20422 20.2229C6.71103 20.1595 6.23533 19.9989 5.8047 19.7502C5.37406 19.5016 4.99707 19.17 4.69556 18.7746C4.39405 18.3791 4.17402 17.9278 4.04824 17.4467C3.92246 16.9657 3.89342 16.4644 3.96281 15.972C4.0322 15.4796 4.19863 15.0059 4.45246 14.5783L9.70129 5.4871C10.4124 4.29553 11.5639 3.43167 12.9068 3.08223C14.2497 2.73279 15.6762 2.92585 16.8779 3.61966C18.0797 4.31348 18.9601 5.45233 19.3289 6.79005C19.6978 8.12777 19.5254 9.55691 18.849 10.7685L13.9442 19.264" stroke="#92E727" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
+    <path d="M8.35921 13.9603L12.3286 7.08507C12.6274 6.58588 13.1105 6.22418 13.6737 6.07804C14.2368 5.93191 14.8349 6.01304 15.3387 6.30394C15.8426 6.59484 16.2118 7.07218 16.3669 7.63295C16.5219 8.19373 16.4502 8.79296 16.1673 9.30135L10.9598 18.3353C10.7164 18.769 10.3894 19.15 9.99767 19.4562C9.60595 19.7625 9.15732 19.988 8.6778 20.1196C8.19828 20.2512 7.69741 20.2863 7.20422 20.2229C6.71103 20.1595 6.23533 19.9989 5.8047 19.7502C5.37406 19.5016 4.99707 19.17 4.69556 18.7746C4.39405 18.3791 4.17402 17.9278 4.04824 17.4467C3.92246 16.9657 3.89342 16.4644 3.96281 15.972C4.0322 15.4796 4.19863 15.0059 4.45246 14.5783L9.70129 5.4871C10.4124 4.29553 11.5639 3.43167 12.9068 3.08223C14.2497 2.73279 15.6762 2.92585 16.8779 3.61966C18.0797 4.31348 18.9601 5.45233 19.3289 6.79005C19.6978 8.12777 19.5254 9.55691 18.849 10.7685L13.9442 19.264"
+           stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
 </svg>

public/docdownload.svg

@@ -0,0 +1,6 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19.6459 9.7655H16.8763C14.605 9.7655 12.7555 7.91591 12.7555 5.64466V2.87508C12.7555 2.348 12.3242 1.91675 11.7971 1.91675H7.73379C4.78212 1.91675 2.39587 3.83341 2.39587 7.25466V15.7455C2.39587 19.1667 4.78212 21.0834 7.73379 21.0834H15.2663C18.218 21.0834 20.6042 19.1667 20.6042 15.7455V10.7238C20.6042 10.1967 20.173 9.7655 19.6459 9.7655ZM11.7684 15.1226L9.85171 17.0392C9.78462 17.1063 9.69837 17.1638 9.61212 17.1926C9.52795 17.2312 9.43642 17.2512 9.34379 17.2512C9.25117 17.2512 9.15963 17.2312 9.07546 17.1926C8.99617 17.1594 8.92444 17.1105 8.86462 17.0488C8.85504 17.0392 8.84546 17.0392 8.84546 17.0297L6.92879 15.113C6.79512 14.9777 6.72016 14.7952 6.72016 14.6051C6.72016 14.4149 6.79512 14.2324 6.92879 14.0972C7.20671 13.8192 7.66671 13.8192 7.94462 14.0972L8.62504 14.7967V10.7813C8.62504 10.3884 8.95087 10.0626 9.34379 10.0626C9.73671 10.0626 10.0625 10.3884 10.0625 10.7813V14.7967L10.7525 14.1067C11.0305 13.8288 11.4905 13.8288 11.7684 14.1067C12.0463 14.3847 12.0463 14.8447 11.7684 15.1226Z"
+          fill="#8F8F8F"/>
+    <path d="M16.7038 8.44289C17.6142 8.45247 18.8792 8.45247 19.9621 8.45247C20.5084 8.45247 20.7959 7.81039 20.4125 7.42706C19.0325 6.03747 16.56 3.53622 15.1417 2.11789C14.7488 1.72497 14.0684 1.99331 14.0684 2.53956V5.88414C14.0684 7.28331 15.2567 8.44289 16.7038 8.44289Z"
+          fill="#8F8F8F"/>
+</svg>

src/components/reusable/footer.tsx

@@ -4,7 +4,6 @@ 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 {Img} from "react-image";
 
 const Footer = () => {
     return (
@@ -19,9 +18,12 @@ const Footer = () => {
                     <a className={"block"} href={"tel:+74951919720"}>+7(495)191-97-20</a>
 
                     <div className="socials my-4 flex [&_a]:mr-2">
-                        <a href="https://vk.com/relynolli_vk" className={"group"}><VkIcon className={"fill-gray-3 group-hover:fill-primary transition-colors [&_path]:fill-white"}/></a>
+                        <a href="https://vk.com/relynolli_vk" className={"group"}><VkIcon
-                        <a href="https://t.me/relynolli" className={"group"}><TgIcon className={"fill-gray-3 group-hover:fill-primary transition-colors [&_path]:fill-white"} /></a>
+                            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://t.me/relynolli" className={"group"}><TgIcon
+                            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://youtube.com/@Relynolli" className={"group"}><Img src={'/ozon_icon.png'} className={"w-[40px] h-[40px] grayscale group-hover:grayscale-0 transition-all"} /></a> */}
                     </div>
 
@@ -32,34 +34,47 @@ const Footer = () => {
                 <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
-                        <li className={"hover:text-primary transition-colors"}><Link href={"/technology"}>Технологии</Link></li>
+                            href={"/personalization"}>Персонализация</Link></li>
-                        <li className={"hover:text-primary transition-colors"}><Link href={"/production"}>Производство</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>
+                        <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>
+                    <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"}>
-                        <li className={"hover:text-primary transition-colors"}><Link href={"/catalog"}>Relynolli ® Standart M</Link></li>
+                        <li className={"hover:text-primary transition-colors"}><Link href={"/catalog"}>Relynolli ®
-                        <li className={"hover:text-primary transition-colors"}><Link href={"/catalog"}>Relynolli ® Premium M</Link></li>
+                            Standart M</Link></li>
+                        <li className={"hover:text-primary transition-colors"}><Link href={"/catalog"}>Relynolli ®
+                            Premium M</Link></li>
                     </ul>
                 </div>
                 <div className="col-span-12 xl:col-span-2 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"}>Оплата</li>
-                        <li className={"hover:text-primary transition-colors"}><Link href={"/contact"}>Контакты</Link></li>
+                        <li className={"hover:text-primary transition-colors"}><Link href={"/contact"}>Контакты</Link>
-                        <li className={"hover:text-primary transition-colors"}><Link href={"https://forms.yandex.ru/u/65e4c1e9eb6146024f8e3234/"}>Поддержка и рекламации</Link></li>
+                        </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 href={"https://tehnohimgrupp.ru/upload/Политика_обработки_ПДн_ТХГ.pdf"}>Политика конфиденциальности</Link></p>
+                    <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"}><Link href={"https://tehnohimgrupp.ru/upload/Согласие на ОПД Технохим.pdf"}>Обработка персональных данных</Link></p>
+                        href={"https://tehnohimgrupp.ru/upload/Политика_обработки_ПДн_ТХГ.pdf"}>Политика
+                        конфиденциальности</Link></p>
+                    <p className={"text-gray-3 text-sm font-semibold my-2"}><Link
+                        href={"https://tehnohimgrupp.ru/upload/Согласие на ОПД Технохим.pdf"}>Обработка персональных
+                        данных</Link></p>
                 </div>
             </div>
 

src/components/reusable/formCustomization.tsx

@@ -125,23 +125,25 @@ const FormCustomization = () => {
                 />
             </div>
             <div className="pt-5 pb-5">
-                <div className="flex flex-wrap flex-row gap-2">
+
-                    <ClampIcon/>
                 <div className="flex flex-wrap flex-col font-semibold">
                     <Link
-                            isExternal
                         onPress={onOpen}
                         color="primary"
-                            underline={"hover"}
+                        className={"flex flex-wrap flex-row gap-2"}
                     >
-                            Добавить документ
+                        <ClampIcon className={"stroke-[2px] stroke-primary"}/>
-                        </Link>
+                        <div className="flex flex-wrap flex-col gap-2 items-start">
-                        <span className="text-sm font-light">
+                            <span className="hover:underline">Добавить документ</span>
+                            <span className="text-sm font-light text-white">
                             Общий объём файлов не более 5 Мб
                             </span>
                         </div>
+                    </Link>
+
                 </div>
 
+
                 <Modal
                     isOpen={isOpen}
                     onOpenChange={onOpenChange}

src/components/reusable/linkSupport.tsx

@@ -0,0 +1,28 @@
+import {
+    Button,
+
+} from "@nextui-org/react";
+import DocIcon from "../../../public/docdownload.svg"
+
+
+const LinkSupport = () => {
+    return (
+        <div className="">
+            <Button
+                className="flex flex-row p-5 text-base justify-between shadow-lg h-[70px] w-[400px] rounded-xl"
+                color="primary"
+                variant="shadow"
+            >
+                <div className="flex items-center justify-center gap-5">
+                    <DocIcon/>
+                    <span className="text-base ">Учредительный договор ООО “Энергострой”.doc</span>
+                </div>
+
+                <span className="text-xs font-light">542 КБ</span>
+            </Button>
+
+        </div>
+    )
+}
+
+export default LinkSupport

src/pages/personalization.tsx

@@ -1,13 +1,10 @@
 import Wrapper from "@/components/reusable/wrapper"
-import { Button, Checkbox } from "@nextui-org/react";
 import { Img } from "react-image"
-import {Input} from "@nextui-org/input";
-import Link from "next/link";
 import FormPersonalization from "@/components/reusable/formPersonalization";
 import FormCustomization from "@/components/reusable/formCustomization";
 
 
-const Mission = () => {
+const Personalization = () => {
     return (<Wrapper title="Персонализация от Relynolli ®"
         breadcrumbs={[{ name: "Персонализация от Relynolli ®", link: "/personalization" }]}>
 
@@ -41,4 +38,4 @@ const Mission = () => {
     )
 }
 
-export default Mission;
+export default Personalization;

src/pages/support.tsx

@@ -0,0 +1,36 @@
+import Wrapper from "@/components/reusable/wrapper"
+import LinkSupport from "@/components/reusable/linkSupport";
+
+const Support = () => {
+    return (<Wrapper  title="Поддержка продукции Relynolli® ООО «ТД Технохим Групп»"
+                     breadcrumbs={[{ name: "Поддержка и рекламация", link: "/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>
+                    <div className="col-span-3 xl:col-span-12 xl:col-start-5 mt-5 gap-5">
+                        <LinkSupport/>
+                        <LinkSupport/>
+                        <LinkSupport/>
+                        <LinkSupport/>
+                        <LinkSupport/>
+                        <LinkSupport/>
+                    </div>
+                </section>
+
+                <section>
+                    <h2>Важно</h2>
+                    <ul className="list-disc list-inside">
+                        <li>Данные о партии и сроке хранения продукции смотрите на этикетке канистры.</li>
+                        <li>Перед началом работы следует внимательно ознакомиться с инструкцией по эксплуатации. </li>
+                        <li>Все условия гарантии соответствуют действующему законодательству РФ.</li>
+                    </ul>
+                </section>
+
+            </div>
+
+        </Wrapper>
+    )
+}
+
+export default Support;

tailwind.config.ts

@@ -53,6 +53,7 @@ const config: Config = {
           light: {
             colors: {
               "primary": "#92E727",
+              "secondary": '#fff',
               "green-1": "#B3C53F",
               "green-2": "#92E727",
               "yellow-1": "#FFD235",