Добавил карусель + сделал верхушки для о нас и фуршет, подправил адап…

…тацию фотки для фона
FotuneGame · Dec 28, 2023 · 652d725 · 652d725
1 parent 07a6c8c
commit 652d725
Show file tree

Hide file tree

Showing 11 changed files with 104 additions and 13 deletions.
diff --git a/src/component/MainImage/MainImg.module.css b/src/component/MainImage/MainImg.module.css
@@ -4,6 +4,7 @@
     z-index: -1;
 }
 .img{
+    min-width: 45rem;
     top:-10rem;
 }
 
@@ -25,7 +26,7 @@
 
 @media only screen and (max-width: 1400px){
     .img{
-        top:-7rem;
+        top:-5rem;
     }
 }
 
@@ -34,3 +35,15 @@
         top:0rem;
     }
 }
+
+@media only screen and (max-width: 600px){
+    .img{
+        left:-7rem;
+    }
+}
+
+@media only screen and (max-width: 400px){
+    .img{
+        left:-10rem;
+    }
+}
diff --git a/src/component/carousel/Carousel.jsx b/src/component/carousel/Carousel.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {Carousel as CarouselB} from "react-bootstrap"
+
+
+const Carousel = (props) => {
+    return (
+        <CarouselB>
+            {props.imgs
+                ? props.imgs.map((path,index) =>
+                    <CarouselB.Item key={path+index} >
+                        <img className="img-fluid rounded" src={path}/>
+                    </CarouselB.Item>)
+                :null}
+        </CarouselB>
+    );
+};
+
+export default Carousel;
diff --git a/src/component/navbar/Navbar.jsx b/src/component/navbar/Navbar.jsx
@@ -6,7 +6,7 @@ import {NavLink} from "react-router-dom";
 
 const Navbar = () => {
     return (
-        <NavbarB collapseOnSelect expand='lg' className="bg-white shadow">
+        <NavbarB collapseOnSelect expand='lg' className="bg-white shadow fixed-top">
             <Container className="mx-auto px-0">
                 <NavbarB.Brand >
                     <NavLink className="text-decoration-none text-black" to={"/"}>Имя Сайта</NavLink>

diff --git a/src/page/About.jsx b/src/page/About.jsx
@@ -1,9 +1,35 @@
 import React from 'react';
+import {FaPhoneAlt,FaEnvelope} from "react-icons/fa";
 
 const About = () => {
     return (
-        <div className="content">
-            <h1>It is about</h1>
+        <div className="content pt-5">
+            <div className="container shadow d-grid align-content-center  p-3">
+                <div className="row">
+                    <div className="col-12 py-3 col-lg-6 py-lg-0 align-self-center">
+                        <img src="./img/page/main.jpg" className="img-fluid rounded"/>
+                    </div>
+                    <div className="col-12 py-3 col-lg-6 py-lg-0">
+                        <h1>КОНТАКТЫ</h1>
+                        <div className="container py-3 py-lg-0">
+                            <div className="mx-1 row">
+                                <h3>Телефон:</h3>
+                                <a className="mx-auto mx-lg-1 text-decoration-none text-black" href="tel:+7-953-349-61-09"><FaPhoneAlt/>+7 (953) 349-61-09</a>
+                            </div>
+                            <div className="mx-1 row">
+                                <h3>E-mail:</h3>
+                                <a className="mx-auto mx-lg-1 text-decoration-none text-black" href="mailto:[email protected]"><FaEnvelope/> [email protected]</a>
+                            </div>
+                            <div className="mx-1 row">
+                                <h3>Адрес:</h3>
+                                <a className="mx-auto mx-lg-1 text-decoration-none text-black" href="mailto:[email protected]">
+                                    ИП Горячев Сергей Сергеевич Санкт-Петербург
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     );
 };

diff --git a/src/page/Berths.jsx b/src/page/Berths.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 const Berths = () => {
     return (
-        <div className="content">
+        <div className="content pt-5">
             <h1>Наши причалы</h1>
         </div>
     );

diff --git a/src/page/Boats.jsx b/src/page/Boats.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
+import MainImg from "../component/MainImage/MainImg";
 
 const Boats = () => {
     return (
-        <div className="content">
+        <div className="content pt-5">
+            <MainImg img="./img/page/boats.jpg"/>
             <h1>Катера</h1>
         </div>
     );

diff --git a/src/page/Buffet.jsx b/src/page/Buffet.jsx
@@ -1,9 +1,35 @@
 import React from 'react';
+import Carousel from "../component/carousel/Carousel";
+import {FaFilePdf} from "react-icons/fa";
 
 const Buffet = () => {
     return (
-        <div className="content">
-            <h1>Наш буффет</h1>
+        <div className="content mt-2 pt-5">
+            <div className="container shadow d-grid align-content-center  p-3">
+                <div className="row">
+                    <div className="col-12 py-3 col-lg-6 py-lg-0 align-self-center">
+                        <Carousel imgs={["./img/page/main.jpg","./img/page/main.jpg"]}/>
+                    </div>
+                    <div className="col-12 py-3 col-lg-6 py-lg-0">
+                        <h1>МОБИЛЬНЫЙ ФУРШЕТ</h1>
+                        <p>В долгой водной прогулке незаменим мобильный фуршет, заказанный и приготовленный специально для Вас. Кейтеринг предоставляет разнообразное меню: от антипасти до сета круассанов, от канапе из морских продуктов до ассорти из твёрдого сыра с виноградом, орехами и мёдом. Все блюда готовятся непосредственно перед доставкой на борт и доставляются за 10-15 минут до начала рейса в специальных рефрижераторных автомобилях, что гарантирует их свежесть и высокие вкусовые качества.</p>
+                        <div className="d-flex py-3 py-lg-0 justify-content-around">
+                            <div className="mx-1 row ">
+                                <FaFilePdf size="2rem" color="black" />
+                                <a className="text-black text-center" href="#" >Мобильный фуршет</a>
+                            </div>
+                            <div className="mx-1 row">
+                                <FaFilePdf size="2rem" color="black" />
+                                <a className="text-black text-center" href="#">Фуршетное меню</a>
+                            </div>
+                            <div className="mx-1 row">
+                                <FaFilePdf size="2rem" color="black" />
+                                <a className="text-black text-center" href="#">Банкетное меню</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     );
 };

diff --git a/src/page/Events.jsx b/src/page/Events.jsx
@@ -1,9 +1,11 @@
 import React from 'react';
+import MainImg from "../component/MainImage/MainImg";
 
 const Events = () => {
     return (
-        <div className="content">
-            <h1>Наши маршруты</h1>
+        <div className="content pt-5">
+            <MainImg img="./img/page/events.jpg"/>
+            <h1>Наши мероприятия</h1>
         </div>
     );
 };

diff --git a/src/page/Main.jsx b/src/page/Main.jsx
@@ -5,7 +5,7 @@ import {FaShip,FaMap,FaLaugh,FaLocationArrow} from "react-icons/fa";
 
 const Main = () => {
     return (
-        <div className="content">
+        <div className="content pt-5">
 
             <div className="position-absolute w-100 h-50 z-3 py-md-5">
                 <div className="mx-5  w-75 py-5">

diff --git a/src/page/Routers.jsx b/src/page/Routers.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
+import MainImg from "../component/MainImage/MainImg";
 
 const Routers = () => {
     return (
-        <div className="content">
+        <div className="content pt-5">
+            <MainImg img="./img/page/routers.jpg"/>
             <h1>Наши маршруты</h1>
         </div>
     );

diff --git a/src/page/Yachts.jsx b/src/page/Yachts.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
+import MainImg from "../component/MainImage/MainImg";
 
 const Yachts = () => {
     return (
-        <div className="content">
+        <div className="content pt-5">
+            <MainImg img="./img/page/yachts.jpg"/>
             <h1>Наши яхты</h1>
         </div>
     );