Добавил:

- Карточки для причалов
- Страницу с причалами
Изменил:
- Падинги в карточке персонального заказа

src/component/PersonalityOrder/PersonalityOrder.jsx

@@ -21,7 +21,7 @@ const PersonalityOrder = (props) => {
     }
 
     return (
-        <div className="container shadow  align-content-center  p-0 p-md-3 mt-3">
+        <div className="container shadow  align-content-center  p-0 p-md-3 my-3">
             <div className="row mx-1 mb-2"><h1 className="text-center text-md-start">{props?.title}</h1></div>
             <div className="row">
                 <form method="POST" className="d-grid ">

src/component/listPosts/PostBerth/PostBerth.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import style from "./PostBerth.module.css";
+import {NavLink} from "react-router-dom";
+
+const PostBerth = (props) => {
+    return (
+        <div className="rounded-3 col p-3">
+                <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) => {
+                                return(
+                                    <div className="p-1 m-0 mt-1" key={obj?.name + "_" + props?.id + "_" + "_" + obj?.id}>
+                                        {obj.typeShip==="Яхта"
+                                            ?
+                                            <div>
+                                                <NavLink className={["text-decoration-none",style.name_ship].join(" ")} to={props.urlClassMoreInfo[1]+"/"+obj?.id}>{obj?.name}</NavLink>
+                                                <span className={style.type_ship}>Яхта</span>
+                                                <span className="float-end">от {obj?.price} ₽/час</span>
+                                                <hr/>
+                                            </div>
+                                            :
+                                            <div>
+                                                <NavLink className={["text-decoration-none",style.name_ship].join(" ")} to={props.urlClassMoreInfo[0]+"/"+obj?.id}>{obj?.name}</NavLink>
+                                                <span className={style.type_ship}>Катер</span>
+                                                <span className="float-end">от {obj?.price} ₽/час</span>
+                                                <hr/>
+                                            </div>
+                                        }
+                                    </div>
+                                )
+                            })
+                            : null}
+
+
+                    </div>
+                </div>
+        </div>
+    );
+};
+
+export default PostBerth;

src/component/listPosts/PostBerth/PostBerth.module.css

@@ -0,0 +1,12 @@
+.name_ship{
+    color: black;
+}
+
+.name_ship:hover{
+    color: #007bff;
+}
+
+.type_ship{
+    padding-left: 12px;
+    font-size: 12px;
+}

src/page/Berths.jsx

@@ -1,9 +1,41 @@
-import React from 'react';
-
+import React,{useState} from 'react';
+import ListPosts from "../component/listPosts/ListPosts";
+import PostBerth from "../component/listPosts/PostBerth/PostBerth";
+import PersonalityOrder from "../component/PersonalityOrder/PersonalityOrder";
 const Berths = () => {
+
+    const sendProposal = (message) =>{
+        //{name:"",phone:"",date:"",time:"",text:""}
+        console.log(message);
+    }
+
+    const [berthsPost,setBerthsPost] = useState([
+        {id:"1",name:"имя причала",ship:[
+                {id:"1",name:"имя",typeShip:"Катер",price:"500"},
+                {id:"2",name:"имя",typeShip:"Яхта",price:"1000"},
+                {id:"3",name:"имя",typeShip:"Катер",price:"2000"},
+            ]},
+        {id:"2",name:"имя причала",ship:[
+                {id:"4",name:"имя",typeShip:"Катер",price:"500"},
+                {id:"5",name:"имя",typeShip:"Яхта",price:"1000"},
+                {id:"6",name:"имя",typeShip:"Катер",price:"2000"},
+            ]},
+        {id:"3",name:"имя причала",ship:[
+                {id:"7",name:"имя",typeShip:"Катер",price:"500"},
+                {id:"8",name:"имя",typeShip:"Яхта",price:"1000"},
+            ]},
+        {id:"4",name:"имя причала",ship:[
+                {id:"9",name:"имя",typeShip:"Катер",price:"500"},
+            ]},
+   ]);
+
     return (
         <div className="content pt-5">
-            <h1>Наши причалы</h1>
+            <iframe
+                src="https://yandex.ru/map-widget/v1/?um=constructor%3A3eed6f6eb7f99e0ba0fea2c7deda8d11030fcdf8256ac87b829192365d10c30d&amp;source=constructor"
+                width="100%" height="400" frameBorder="0"></iframe>
+            <ListPosts urlClassMoreInfo={["/boats","/yachts"]} postType={PostBerth} posts={berthsPost} title="НАШИ ПРИЧАЛЫ"/>
+            <PersonalityOrder title="ПОДГОТОВИТЬ ДЛЯ ВАС СПЕЦ ПРЕДЛОЖЕНИЕ?" callback={sendProposal}/>
         </div>
     );
 };

src/page/Boats.jsx

@@ -22,6 +22,7 @@ const Boats = () => {
             </div>
             <MainImg img="./img/page/boats.jpg"/>
             <ListPosts urlClassMoreInfo="/boats" postType={PostShip} posts={boatsPost} title="АРЕНДА КАТЕРА" text="Большой выбор прогулочных катеров для аренды по выгодным ценам. Лучшие маршруты по СПб. Организация мероприятий под ключ с фуршетом. Опытные капитаны."/>
+
         </div>
     );
 };