Добавил:

- Карточки для категории популярное
- Страницы про отдельную яхту, катер, мероприятие, маршрут (верхняя вкладка с фотографиями и всей инфой).
- Самописная карусель (отдельно для карточек)
- PopularList.jsx - генератор карточек для карусели популярного (яхту, катер, мероприятие, маршрут)
Изменил:
- Марджины на страницах About.jsx , Buffet.jsx
- проверки на наличие urlClassMoreInfo в карточках (PostBerth.jsx)

src/component/Popular/PopularCard.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {NavLink} from "react-router-dom";
+import style from "./PopularCard.module.css";
+
+const PopularCard = (props) => {
+    return (
+        <div className="col-12 col-md-6 rounded-3 col p-3">
+            <div className="position-relative m-0 p-0 overflow-hidden rounded-3">
+                <div className="p-0 bg-black">
+                    <NavLink className={style.img_a} to={props?.urlClassMoreInfo+"/"+ props?.id}></NavLink>
+                    <img className={["img-fluid col z-n1 opacity-75",style.img].join(' ')} src={props?.imgPath} alt={props?.name}/>
+                </div>
+
+                <div className={["position-absolute pt-1 top-50",style.name].join(" ")}>
+                    <h2 className="col-12 text-center text-white m-0 p-0">{props?.name}</h2>
+                    <h6 className="col-12 m-0 p-0 text-center text-white">{props?.type}</h6>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default PopularCard;

src/component/Popular/PopularCard.module.css

@@ -0,0 +1,41 @@
+.img_a{
+    display: block;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    z-index: 1;
+}
+
+.img{
+    min-height: 40vh;
+}
+
+.name{
+    width: 100%;
+    left: 0;
+    z-index: 1;
+}
+
+@media only screen and (max-width: 1200px){
+    .img{
+        min-height: 35vh;
+    }
+}
+
+@media only screen and (max-width: 1000px){
+    .img{
+        min-height: 30vh;
+    }
+}
+
+@media only screen and (max-width: 600px){
+    .img{
+        min-height: 25vh;
+    }
+}
+
+@media only screen and (max-width: 400px){
+    .img{
+        min-height: 20vh;
+    }
+}

src/component/Popular/PopularList.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PopularCard from "./PopularCard";
+
+const PopularList = (props) => {
+    return (
+        <div>
+            {props?.popularList && props.popularList?.urlClassMoreInfo ?
+                <div className="d-flex">
+                {props.popularList?.boats ?
+                    props.popularList.boats.map((obj,index)=>{
+                        return (<PopularCard key={props?.title + "_boats_" + obj?.name + index} {...obj} urlClassMoreInfo={props.popularList.urlClassMoreInfo?.boats} type="Катер"/>);
+                    })
+                    :null}
+                {props.popularList?.yachts ?
+                    props.popularList.yachts.map((obj,index)=>{
+                        return (<PopularCard key={props?.title + "_yachts_" + obj?.name + index} {...obj} urlClassMoreInfo={props.popularList.urlClassMoreInfo?.yachts} type="Яхта"/>);
+                    })
+                    :null}
+                {props.popularList?.routers ?
+                    props.popularList.routers.map((obj,index)=>{
+                        return (<PopularCard key={props?.title + "_routers_" + obj?.name + index} {...obj} urlClassMoreInfo={props.popularList.urlClassMoreInfo?.routers} type="Маршрут"/>);
+                    })
+                    :null}
+                {props.popularList?.eventsSee ?
+                    props.popularList.eventsSee.map((obj,index)=>{
+                        return (<PopularCard key={props?.title + "_eventsSee_" + obj?.name + index} {...obj} urlClassMoreInfo={props.popularList.urlClassMoreInfo?.eventsSee} type="Мероприятие"/>);
+                    })
+                    :null}
+                </div>
+            : null}
+        </div>
+    );
+};
+
+export default PopularList;

src/component/carousel/CarouselCard.jsx

@@ -0,0 +1,71 @@
+import React, {useEffect, useState} from 'react';
+import {FaAngleLeft,FaAngleRight} from "react-icons/fa";
+
+const CarouselCard = ({title, size, children}) => {
+
+    const getWindowSize = () => {
+        const {innerWidth, innerHeight} = window;
+        return {innerWidth, innerHeight};
+    }
+
+    const MoveLeft = () => {
+        if(leftValue>=0) return;
+        setLeftValue(leftValue+stepPercent);
+    }
+
+    const MoveRight = () => {
+        if(leftValue<=-limitPercent) return;
+        setLeftValue(leftValue-stepPercent);
+    }
+
+    const [windowSize, setWindowSize] = useState(getWindowSize());
+    const [stepPercent, setStepPercent] = useState(50);
+    const [limitPercent,setLimitPercent] = useState(stepPercent * (size-1));
+    const [leftValue,setLeftValue] = useState(0);
+    const [styleMove,setStyleMove] = useState({
+        position:'relative',
+        left: "0%",
+        transition: "all 1s"
+    });
+
+    useEffect(()=>{
+        // корректируем шаг в зависимости от col-12 col-md-6
+        if(windowSize.innerWidth > 768) setStepPercent(50);
+        else setStepPercent(100);
+        setLimitPercent((stepPercent) * (size-1));
+        if(leftValue<=-limitPercent) setLeftValue(-limitPercent);
+        if(leftValue>=0) setLeftValue(0);
+
+        setStyleMove({
+            position:'relative',
+            left: leftValue+"%",
+            transition: "all 1s"
+        });
+
+        const handleWindowResize = () => {
+            setWindowSize(getWindowSize());
+        }
+        window.addEventListener('resize', handleWindowResize);
+        return () => {
+            window.removeEventListener('resize', handleWindowResize);
+        };
+    },[windowSize,stepPercent,leftValue]);
+
+
+    return (
+        <div className="container shadow pt-3 my-3">
+            <div className="p-3">
+                <h1 className="text-center mx-auto">{title}</h1>
+            </div>
+            <div className="overflow-hidden position-relative">
+                    <div className="d-flex" style={styleMove}>
+                        {children}
+                    </div>
+                    <button className="position-absolute top-50 start-0 rounded-circle border-0 bg-white shadow p-2 z-1" onClick={MoveLeft}><FaAngleLeft size="1.5rem"/></button>
+                    <button className="position-absolute top-50 end-0 rounded-circle border-0 bg-white shadow p-2 z-1"  onClick={MoveRight}><FaAngleRight size="1.5rem"/></button>
+            </div>
+        </div>
+    );
+};
+
+export default CarouselCard;

src/component/listPosts/PostBerth/PostBerth.jsx

@@ -8,8 +8,8 @@ const PostBerth = (props) => {
                 <div className="pt-1">
                     <h2 className="text-start m-0">{props?.name}</h2>
                     <div className="shadow rounded mt-1 p-2">
-                        {props?.urlClassMoreInfo.constructor === Array ?
-                            props?.ship.map((obj,index) => {
+                        {props?.urlClassMoreInfo && props.urlClassMoreInfo.constructor === Array ?
+                            props.ship.map((obj,index) => {
                                 return(
                                     <div className="p-1 m-0 mt-1" key={obj?.name + "_" + props?.id + "_" + "_" + obj?.id}>
                                         {obj.typeShip==="Яхта"

src/component/listPosts/PostEvent/PostEvent.module.css

@@ -15,4 +15,27 @@
     left: 0;
     bottom: 5%;
     z-index: 1;
+}
+
+
+
+
+
+
+
+
+.oldPrice{
+    right: 0;
+    bottom: -20px;
+    padding: 5px 10px;
+    border-radius: 15px 0 0 0;
+}
+
+.redLine{
+    color:red;
+}
+
+.hit{
+    right: 0;
+    top: 0;
 }

src/component/listPosts/PostRouter/PostRoute.module.css

@@ -20,4 +20,28 @@
     left: 0;
     bottom: 5%;
     z-index: 1;
+}
+
+
+
+
+
+
+
+
+
+.oldPrice{
+    right: 0;
+    bottom: -20px;
+    padding: 5px 10px;
+    border-radius: 15px 0 0 0;
+}
+
+.redLine{
+    color:red;
+}
+
+.hit{
+    right: 0;
+    top: 0;
 }

src/page/About.jsx

@@ -10,7 +10,7 @@ const About = () => {
     }
 
     return (
-        <div className="content mt-2 pt-5">
+        <div className="content mt-3 pt-5">
             <div className="container shadow d-grid align-content-center  p-lg-3">
                 <div className="row">
                     <div className="col-12 py-3 col-lg-6 py-lg-0 align-self-center">