diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 25c803e..fb3fd1a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import {Button, dropdownSection} from "@nextui-org/react";
+import {Button, dropdownSection, Tooltip} from "@nextui-org/react";
 import ChevronBannerIcon from "@/../public/banner_arr_btn.svg.svg"
 import {Card, CardHeader, Image} from "@nextui-org/react";
 import Link from "next/link";
@@ -16,7 +16,7 @@ const Hero = () => {
         slidesPerView={1}
         spaceBetween={0}
         className={"[&_.swiper-button-next]:after:text-primary [&_.swiper-button-next]:after:content-['next'] [&_.swiper-button-prev]:after:text-primary [&_.swiper-button-prev]:after:content-['prev']"}
-        modules={[Navigation, Pagination, ]}
+        modules={[Navigation, Pagination, Autoplay]}
         speed={500}
 
         autoplay={
@@ -35,7 +35,7 @@ const Hero = () => {
         >
             <SwiperSlide>
                 <section className={"w-full h-[796px] mb-2 text-white font-bold bg-cover bg-center xl:bg-right relative"}>
-                    <img src={"/cars.PNG"} className={"object-cover h-full w-full z-10 absolute"}/>
+                    <img src={"/cars.PNG"} className={"object-cover h-full w-full z-10 absolute"} alt={"cars"}/>
                     <div className={"wrapper h-full flex flex-col justify-center relative z-20"}>
                         <div className="w-11/12 mx-auto lg:m-0 xl:w-1/2 flex flex-col bg-black bg-opacity-25 py-4 xl:px-7 px-2 rounded-[20px]">
                             <h2 className={"text-2xl leading-[100%] xl:text-title-4 2xl:text-title-2 mb-4 xl:mb-8"}>Моторные масла для <span className={"text-primary"}>дизельных</span> двигателей</h2>
@@ -52,7 +52,7 @@ const Hero = () => {
             </SwiperSlide>
             <SwiperSlide>
                 <section className={"w-full bg-no-repeat h-[796px] mb-2 text-white font-bold bg-cover bg-center xl:bg-right relative"}>
-                    <img src={"/hands.PNG"} className={"object-cover h-full w-full z-10 absolute"}/>
+                    <img src={"/hands.PNG"} className={"object-cover h-full w-full z-10 absolute"} alt={"hands"}/>
                     <div className={"wrapper h-full flex flex-col justify-center relative z-20"}>
                         <div className="w-11/12 mx-auto lg:m-0 xl:w-1/2 flex flex-col bg-black bg-opacity-25 py-4 xl:px-7 px-2 rounded-[20px]">
                             <h2 className={"text-2xl leading-[100%] xl:text-title-4 2xl:text-title-3 mb-4 xl:mb-8"}><span className={"2xl:text-title-3 text-primary"}>Начать бизнес</span> по продажам качественного моторного масла </h2>
@@ -68,7 +68,7 @@ const Hero = () => {
             </SwiperSlide>
             <SwiperSlide key={Math.random()}>
                 <section className={"w-full bg-cars bg-no-repeat h-[796px] mb-2 text-white font-bold bg-cover bg-center xl:bg-right relative"}>
-                    <img src={"/sto.PNG"} className={"object-cover h-full w-full z-10 absolute"}/>
+                    <img src={"/sto.PNG"} className={"object-cover h-full w-full z-10 absolute"} alt={"auto services"}/>
                     <div className={"wrapper h-full flex flex-col justify-center z-20 relative"}>
                         <div className="w-11/12 mx-auto lg:m-0 xl:w-1/2 flex flex-col bg-black bg-opacity-25 py-4 xl:px-7 px-2 rounded-[20px]">
                             <h2 className={"text-2xl leading-[100%] xl:text-title-4 2xl:text-title-2 mb-4 xl:mb-8"}>Приглашаем к сотрудничеству СТО и автосервисы</h2>
@@ -101,47 +101,57 @@ const MainInfo = () => {
 
             <div className="wrapper mx-auto py-8 grid grid-cols-1 lg:grid-cols-2 grid-rows-3 lg:grid-rows-2 gap-4 h-auto [&>*]:h-[390px] [&_span]:text-base [&_span]:md:text-xl [&_span]:leading-[110%]">
 
-                <Card className={"rounded-[30px] hover:scale-105 transition-size"}>
-                    <Image removeWrapper className={"z-0 w-full h-full object-cover brightness-50"} src={"/oil2.png"}></Image>
+                <Card className={"hover:scale-105 relative group grayscale hover:grayscale-0 transition-all"}>
+                    <Link href={"/catalog"} className={"absolute top-0 left-0 z-20 w-full h-full"}/>
+                    <Image removeWrapper className={"w-full h-full object-cover brightness-75 relative z-10"} src={"/oil2.png"}></Image>
                     <CardHeader
                         className="absolute z-10 top-10 left-10 bottom-5 flex-col !items-start w-3/4 justify-between">
-                        <h3 className={"text-title-3 leading-[35px] text-white"}>Масла для легковых автомобилей</h3>
+                        <h3 className={"text-title-3 leading-[35px] text-white opacity-0 translate-y-1/2 group-hover:opacity-100 group-hover:translate-y-0 transition-all"}>Масла для легковых автомобилей</h3>
 
-                        <span className={"text-gray-2"}>Серия Standart и  Premium для легковых автомобилей для наилучшей энергоэффективности двигателя вашего автомобиля</span>
+                        <span className={"text-gray-2 opacity-0 translate-y-1/2 group-hover:opacity-100 group-hover:translate-y-0 transition-all delay-100"}>Серия Standart и  Premium для легковых автомобилей для наилучшей энергоэффективности двигателя вашего автомобиля</span>
                     </CardHeader>
 
                 </Card>
 
-                <Card className={"rounded-[30px] hover:scale-105 transition-size"}>
+                <Tooltip content={"Выпуск Апрель 2024"} className={"text-black"} size={"lg"}>
+                <Card className={"rounded-[30px] group transition-size grayscale"}>
                     <Image removeWrapper className={"z-0 w-full h-full object-cover brightness-50"} src={"/oil1.png"}></Image>
                     <CardHeader
                         className="absolute z-10 top-10 left-10 bottom-5 flex-col !items-start w-3/4 justify-between">
-                        <h3 className={"text-title-3 leading-[35px] text-white"}>Специальная серия масел XMR</h3>
+                        <h3 className={"text-title-3 leading-[35px] text-white opacity-0 translate-y-1/2 group-hover:opacity-100 group-hover:translate-y-0 transition-all"}>Специальная серия масел XMR</h3>
 
-                        <span className={"text-gray-2"}>Серия моторных масел XMR - премиальная линейка для двигателей со спортивным характером</span>
+                        <span className={"text-gray-2 opacity-0 translate-y-1/2 group-hover:opacity-100 group-hover:translate-y-0 transition-all delay-100"}>Серия моторных масел XMR - премиальная линейка для двигателей со спортивным характером</span>
                     </CardHeader>
                 </Card>
+                </Tooltip>
 
-                <Card className={"rounded-[30px] hover:scale-105 transition-size"}>
+
+
+                <Tooltip content={"Выпуск Июнь 2024"} className={"text-black"} size={"lg"}>
+
+                <Card className={"rounded-[30px] transition-size group grayscale"}>
                     <Image removeWrapper className={"z-0 w-full h-full object-cover brightness-50"} src={"/oil3.png"}></Image>
                     <CardHeader
                         className="absolute z-10 top-10 left-10 bottom-5 flex-col !items-start w-3/4 justify-between">
-                        <h3 className={"text-title-3 leading-[35px] text-white"}>Масла для коммерческого транспорта и спецтехники</h3>
+                        <h3 className={"text-title-3 leading-[35px] text-white opacity-0 translate-y-1/2 group-hover:opacity-100 group-hover:translate-y-0 transition-all"}>Масла для коммерческого транспорта и спецтехники</h3>
 
-                        <span className={"text-gray-2"}>Синтетические и полусинтетические масла для двигателей, которые эксплуатируются под высокими нагрузками. Подходят для бензиновых и дизельных двигателей</span>
+                        <span className={"text-gray-2 opacity-0 translate-y-1/2 group-hover:opacity-100 group-hover:translate-y-0 transition-all delay-100"}>Синтетические и полусинтетические масла для двигателей, которые эксплуатируются под высокими нагрузками. Подходят для бензиновых и дизельных двигателей</span>
                     </CardHeader>
                 </Card>
+                </Tooltip>
 
-                <Card className={"rounded-[30px] hover:scale-105 transition-size"}>
+
+                <Tooltip content={"Выпуск Апрель 2024"} className={"text-black"} size={"lg"}>
+                <Card className={"rounded-[30px] transition-size group grayscale"}>
                     <Image removeWrapper className={"z-0 w-full h-full object-cover brightness-50"} src={"/oil4.png"}></Image>
                     <CardHeader
                         className="absolute z-10 top-10 left-10 bottom-5 flex-col !items-start w-3/4 justify-between">
-                        <h3 className={"text-title-3 leading-[35px] text-white"}>Масла для мототехники</h3>
+                        <h3 className={"text-title-3 leading-[35px] text-white opacity-0 translate-y-1/2 group-hover:opacity-100 group-hover:translate-y-0 transition-all"}>Масла для мототехники</h3>
 
-                        <span className={"text-gray-2"}>Масла для четырех и двухтактных двигателей, которые помогут раскрыть неудержимый характер вашей мототехники</span>
+                        <span className={"text-gray-2 opacity-0 translate-y-1/2 group-hover:opacity-100 group-hover:translate-y-0 transition-all delay-100"}>Масла для четырех и двухтактных двигателей, которые помогут раскрыть неудержимый характер вашей мототехники</span>
                     </CardHeader>
                 </Card>
-
+                </Tooltip>
 
             </div>
         </section>
@@ -155,7 +165,7 @@ const Achievements = () => {
             <Image removeWrapper  alt={"oiltypeImage"} className={"absolute top-0 left-0 w-full h-full brightness-50 object-fill -z-10"}  src={"/oiltypeImage.png"}></Image>
             <div className="wrapper py-8 mb-8 flex flex-col justify-center">
                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6 [&>*]:h-[500px] [&>*]:md:h-[700px]">
-                    <Card className={"z-10 relative rounded-[30px] font-bold [&_span]:font-normal hover:scale-105 transition-size"}>
+                    <Card className={"z-10 relative rounded-[30px] font-bold [&_span]:font-normal transition-size"}>
                         <Image removeWrapper className={"z-0 w-full h-full object-cover"}
                                src={"/achievements1.png"}></Image>
                         <CardHeader
@@ -175,7 +185,7 @@ const Achievements = () => {
 
                         </CardHeader>
                     </Card>
-                    <Card className={"z-10 relative rounded-[30px] font-bold [&_span]:font-normal hover:scale-105 transition-size"}>
+                    <Card className={"z-10 relative rounded-[30px] font-bold [&_span]:font-normal transition-size"}>
                         <Image removeWrapper className={"z-0 w-full h-full object-cover"}
                                src={"/achievements2.png"}></Image>
                         <CardHeader