fix, adaptive

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-native-video": "^5.2.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

src/components/CoubBackground/index.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+// import Video from 'react-native-video';
+// import video from '../../assets/Comp.mov';
 import './style.css';
 import BigCoube from "../../assets/RoundCube-Black-big.png";
 import MiddleCoube from "../../assets/RoundCube-Black-middle.png";
@@ -8,14 +10,28 @@ import Small_3 from "../../assets/RoundCube-Black-small-3.png";
 import Vector_Group from "../../assets/Vector-group-1.svg";
 import Vector_Group_2 from "../../assets/Vector-group-2.svg";
 import videoprew1 from "../../assets/VideoPrew1.png";
-import videoprew2 from "../../assets/VideoPrew2.png";
+import videoprew2 from "../../assets/VideoPrew2.png"; 
 import videoprew3 from "../../assets/VideoPrew3.png";
 import videoprew4 from "../../assets/VideoPrew4.png";
 import videoprew5 from "../../assets/VideoPrew5.png";
+
+// const VideoComponent = ()=> {
+//   return (
+//     <Video  
+//         source={video}                  // the video file
+//         paused={false}                  // make it start    
+//         // style={styles.backgroundVideo}  // any style you want
+//         repeat={true}                   // make it a loop
+//         // className="videoprew-1"
+//     />
+// )
+// }
+
 export default function CoubBack() {
   return (
    <div className="background">
      <img src={BigCoube} alt="" className="big-coube" />
+     {/* <VideoComponent/> */}
      <img src={videoprew1} alt="" className="videoprew-1" />
      <img src={videoprew2} alt="" className="videoprew-2" />
      <img src={videoprew3} alt="" className="videoprew-3" />

src/components/Main-land/style.css

@@ -21,7 +21,7 @@ a,a:visited {
     margin: 0;
   }
   .content {
-    padding: 0 140px;
+    padding: 0 10%;
   }
   .main h2 {
     font-size: 42px;

src/components/download/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import './style.css';
+import laptop from "../../assets/laptop-mini.png"
 import windows from "../../assets/windows.svg";
 import apple from "../../assets/apple.svg";
 export default function Download() {
@@ -23,6 +24,7 @@ export default function Download() {
             </button>
           </div>
         </div>
+        <img src={laptop} alt="" className="main-suggest__laptop" />
         <div className="main-suggest__advanteges">
           <div className="advanteges windows">
             {" "}

src/components/download/style.css

@@ -5,8 +5,9 @@
     padding: 46.71px 49.64px 47.51px 43.69px;
     border: 1px solid #e7e7e7;
     border-radius: 4px;
-    gap: 146px;
+    gap: 10px;
   }
+
   .main-suggest__suggest-text {
     display: flex;
     flex-direction: column;
@@ -59,6 +60,26 @@
     background: #ffffff !important;
     color: #222222 !important;
   }
+.main-suggest__laptop {
+  /* max-width: 603px; */
+ max-width: 576px;
+  max-height: 332px;
+  align-self: center;
+  width: 58%;
+}
+
+@media (max-width:1024px) {
+  .main__main-suggest {
+    margin-top: 101px;
+    padding: 26.71px 29.64px 27.51px 23.69px;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 40px;
+  }
+  .main-suggest__laptop {
+    width: 100%;
+  }
+}
 
 /* 
 .download {