added video

package.json

@@ -20,6 +20,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-minimal-pie-chart": "^8.3.0",
+    "react-player": "^2.11.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.1",
     "swiper": "^8.3.2",

src/components/calendarDesktop/calendar.css

@@ -441,4 +441,8 @@
     line-height: 100%;
 
   }
+
+  .calendar__table {
+    margin-bottom: 0;
+  }
 }

src/components/demonstration/demonstartion.tsx

@@ -1,12 +1,13 @@
 import "../../styles/styles.css";
 import "./demonstration.css"
 import building from './building.png'
+import building1 from './building2.png'
 
 import iconButton from "./iconButton.svg"
 
 
 export const Demostration: React.FC<any> = ({text}) => {
-    const { card } = text;
+    const { card, card2 } = text;
 
     return (
         <div className="block">

src/components/footer/footer.css

@@ -233,7 +233,7 @@
     transition: border ease-out 0.2s;
 }
 
-.footer__card_2:hover>div>div>img {
+.footer__card_2:hover>a>div>div>img {
     transition: opacity ease-out 0.2s;
     opacity: 1;
 

src/components/form/form.css

@@ -273,14 +273,13 @@
 @media screen and (max-width: 639px) {
   .form__container {
     width: 100%;
-    height: 500px;
     padding: 24px;
-    height: 420px;
+    height: 483px;
 
   }
 
   .confirm {
-    height: 420px;
+    height: 483px;
     width: 100%;
     padding: 24px
   }

src/components/player/player.css

@@ -10,6 +10,9 @@
   display: flex;
   justify-content: center;
   margin-bottom: 80px;
+  width: 1136px;
+  height: 640px;
+
 }
 
 .fake-player {
@@ -25,6 +28,9 @@
 
   .video__container {
     margin-bottom: 96px;
+    width: 1360px;
+    height: 766px;
+
   }
 
 }
@@ -33,6 +39,7 @@
 @media screen and (max-width: 1279px) {
   .video__container {
     width: 936px;
+    height: 530px;
 
   }
 }
@@ -59,6 +66,8 @@
 
   .video__container {
     width: 100%;
+    min-height: 168px;
+    max-height: 338px;
 
   }
 }

src/components/player/player.tsx

@@ -3,15 +3,16 @@ import "../multiplayer/multiplayer.css";
 import "./player.css"
 import { Button } from "../buttonDemo/buttonDemo"
 import { Content } from "../content/content";
+import ReactPlayer from 'react-player'
+
 
 
-import video from "./VideoPlayer.png"
 export const Player: React.FC<any> = ({ text }) => {
   return (
     <div data-aos="zoom-in" data-aos-duration="500" className="player__container">
       <Content text={text}></Content>
       <div className="video__container">
-        <img alt="player" className="fake-player" src={video}></img>
+        <ReactPlayer width={'100%'} height={'100%'} controls={true} url='https://www.youtube.com/watch?v=eDanRHahbGY&ab_channel=GRAFFtech' />
       </div>
       <div className="main-block__subblock-container">
         <div className="main-block_subblock">

src/components/sliderComponent/sliderComponent.tsx

@@ -28,6 +28,7 @@ export const SliderComponent: React.FC<any> = React.memo(({ text }) => {
         className={""}
         rewind={true}
         children={undefined}
+        slideToClickedSlide={true}
       ></Swiper>
     </div>
   );

src/components/swiper/swiper.css

@@ -13,6 +13,7 @@
 
 
 
+
 .image__slider_active {
   width: 100%;
   height: 100%;
@@ -22,6 +23,7 @@
 }
 
 .button__container {
+  width: 536px;
   margin-top: 45px;
   display: flex;
   flex-direction: row;
@@ -100,6 +102,11 @@
 }
 
 @media screen and (min-width: 1600px) {
+
+  .button__container {
+    width: 640px;
+  }
+
   .container {
     gap: 22px;
   }
@@ -125,7 +132,7 @@
   }
 
   .button__container {
-    margin-left: 29px;
+    margin-left: 9px;
     margin-right: 29px;
 
   }
@@ -147,16 +154,26 @@
 
 }
 
+@media screen and (max-width: 990px) {
+  .swiper-container {
+    padding-left: 20px;
+  }
+}
+
+
 @media screen and (max-width: 639px) {
 
-
+  .swiper-container {
+    padding-left: 10px;
+  }
 
   .button__container {
     gap: 0;
   }
 
   .button__container {
-    margin-left: 19px;
+    width: 94%;
+    margin-left: 9px;
     margin-right: 19px;
 
   }
@@ -169,4 +186,5 @@
   }
 
 
-}
+}
+

src/components/swiper/swiper.tsx

@@ -25,6 +25,7 @@ type propsTypes = {
   children: React.ReactNode;
   rewind: boolean;
   text: any;
+  slideToClickedSlide: boolean,
 };
 
 export default function SwiperCentred(props: propsTypes) {
@@ -51,19 +52,19 @@ export default function SwiperCentred(props: propsTypes) {
     } else if (size.width > 640) {
       return { width: "536px", height: "428px" };
     } else {
-      return { width: "290px", height: "232px" };
+      return {  width: "290px", height: "232px" };
 
     }
   }
 
-  const swiperWrapper = document.querySelector('.swiper-wrapper')?.classList.add('swiper-wrapper_image')
 
   return (
-    <>
+    <div className="swiper-container">
       <Swiper
         centeredSlides={size.width > 1024 ? true : false}
         spaceBetween={size.width > 640 ? 20 : 10}
         initialSlide={1}
+        slideToClickedSlide={true}
         slidesPerView={'auto'}
         loop={true}
         loopedSlides={3}
@@ -133,6 +134,6 @@ export default function SwiperCentred(props: propsTypes) {
           </div>
         </div>
       </Swiper>
-    </>
+    </div>
   );
 }

src/styles/styles.css

@@ -1,5 +1,5 @@
 .main-block__container {
-  width: 480px;
+  width: 536px;
   margin: 0 auto 80px;
   display: flex;
   flex-direction: column;
@@ -139,8 +139,8 @@
 
 .main-block__icon {
   opacity: 1;
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
   margin: 0;
   opacity: 0;
 }
@@ -173,7 +173,7 @@
 
 @media screen and (min-width: 1600px) {
   .main-block__container {
-    width: 576px;
+    width: 640px;
     gap: 24px;
     margin: 0 auto 96px;
 
@@ -240,7 +240,7 @@
 @media screen and (max-width: 1024px) {
 
   .main-block__container {
-    width: 80%;
+    width: 536px;
     margin: 0 0 60px;
   }