ernestlitvinenko
/
relynolli-client
1
0
Fork 0
Code Issues Pull Requests 2 Packages Projects Releases Wiki Activity

hotfix/hotfix-swiper #3

Merged
ernestlitvinenko merged 2 commits from hotfix/hotfix-swiper into master 2024-03-22 05:38:04 +03:00
Conversation 0 Commits 2 Files Changed 6
6 changed files with 109 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -24,6 +24,7 @@
"react-hook-form": "^7.50.1",
"react-image": "^4.1.0",
"react-imask": "^7.5.0",
"swiper": "^11.0.7",
"valtio": "^1.13.0",
"zod": "^3.22.4"
},

BIN
public/cars.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
public/hands.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
public/sto.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

123
src/pages/index.tsx
View File

@ -1,29 +1,90 @@
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";
import NextImage from "next/image";
import {Swiper, SwiperSlide} from "swiper/react";
import {Pagination, Navigation, Autoplay} from "swiper/modules";
import "swiper/css"
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import "swiper/css/autoplay";
const Hero = () => {
return (
<section className={"w-full bg-cars bg-no-repeat h-[796px] mb-2 text-white font-bold bg-cover bg-center xl:bg-right"}>
<div className={"wrapper h-full flex flex-col justify-center"}>
<Swiper
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, Autoplay]}
speed={500}
autoplay={
{
delay: 5000,
disableOnInteraction: false
}
}
navigation={
{
}
}
pagination={{ clickable: true }}
>
<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"} 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-[52px]"}>Оформите заказ
на сумму от 5000₽</h2>
<span className={"text-sm xl:text-subtitle-1 leading-inherit text-subtitle-1 mb-4 xl:mb-24"}>И получите бесплатную доставку</span>
<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>
<span className={"text-sm xl:text-subtitle-1 leading-inherit text-subtitle-1 mb-4 xl:mb-6"}>Грузового транспорта и спецтехники</span>
<Link href={"/catalog"} className={'w-full lg:w-1/2 bg-green-2 rounded-[8px] p-6 flex justify-between items-center text-black hover:scale-105 transition'}>
<span className={"text-sm text-[1.125rem] font-extrabold italic uppercase"}>Перейти к покупке</span>
<span className={"text-sm text-[1.125rem] font-extrabold italic uppercase"}>Купить</span>
<ChevronBannerIcon className={"stroke-[3px] stroke-black"} />
</Link>
<span className={"text-white opacity-60 text-sm mt-2"}>*Срок действия акции ограничен</span>
</div>
</div>
</section>
</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"} 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>
<span className={"text-sm xl:text-title-2 leading-inherit text-subtitle-1 mb-4 xl:mb-6 text-primary"}>-ЛЕГКО</span>
<Link href={"https://forms.yandex.ru/u/65e4c1e9eb6146024f8e3234/"} className={'w-full lg:w-1/2 bg-green-2 rounded-[8px] p-6 flex justify-between items-center text-black hover:scale-105 transition'}>
<span className={"text-sm text-[1.125rem] font-extrabold italic uppercase"}>Получить предложение о партнерстве</span>
<ChevronBannerIcon className={"stroke-[3px] stroke-black"} />
</Link>
</div>
</div>
</section>
</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"} 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>
<span className={"text-sm xl:text-subtitle-1 leading-inherit text-subtitle-1 mb-4 xl:mb-6"}>Поставляем масло <span className={"text-primary"}>RELYNOLLI ®</span> в партнерские СТО на льготных условиях</span>
<Link href={"https://forms.yandex.ru/u/65e4c1e9eb6146024f8e3234/"} className={'w-full lg:w-1/2 bg-green-2 rounded-[8px] p-6 flex justify-between items-center text-black hover:scale-105 transition'}>
<span className={"text-sm text-[1.125rem] font-extrabold italic uppercase"}>Узнать больше</span>
<ChevronBannerIcon className={"stroke-[3px] stroke-black"} />
</Link>
</div>
</div>
</section>
</SwiperSlide>
</Swiper>
)
}
@ -40,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>
@ -94,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
@ -114,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

5
yarn.lock
View File

@ -5963,6 +5963,11 @@ svgo@^3.0.2:
csso "^5.0.5"
picocolors "^1.0.0"
swiper@^11.0.7:
version "11.0.7"
resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.0.7.tgz#fe51bb64546c2c21a1ec6914e7764af953443ded"
integrity sha512-cDfglW1B6uSmB6eB6pNmzDTNLmZtu5bWWa1vak0RU7fOI9qHjMzl7gVBvYSl34b0RU2N11HxxETJqQ5LeqI1cA==
tailwind-merge@^1.14.0:
version "1.14.0"
resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz#e677f55d864edc6794562c63f5001f45093cdb8b"