Merge pull request #29 from TartejBrothers/Updates

Updated: Designs

src/components/designs.jsx

@@ -3,13 +3,25 @@ import "./styles/designs.css";
 import left1 from "./assests/designs/left1.png";
 import left2 from "./assests/designs/left2.png";
 import left3 from "./assests/designs/left3.png";
+import left4 from "./assests/designs/left4.png";
 import center1 from "./assests/designs/center1.png";
 import center2 from "./assests/designs/center2.png";
 import center3 from "./assests/designs/center3.png";
-import center4 from "./assests/designs/center4.png";
+
 import right1 from "./assests/designs/right1.png";
 import right2 from "./assests/designs/right2.png";
 import right3 from "./assests/designs/right3.png";
+
+import mobileleft1 from "./assests/designs/mobileleft1.png";
+import mobileleft2 from "./assests/designs/mobileleft2.png";
+import mobileleft3 from "./assests/designs/mobileleft3.png";
+import mobileleft4 from "./assests/designs/mobileleft4.png";
+
+import mobileright1 from "./assests/designs/mobileright1.png";
+import mobileright2 from "./assests/designs/mobileright2.png";
+import mobileright3 from "./assests/designs/mobileright3.png";
+import mobileright4 from "./assests/designs/mobileright4.png";
+
 export default function designs() {
   return (
     <div className="designsbody">
@@ -19,6 +31,7 @@ export default function designs() {
           <img src={left1} alt="" />
           <img src={left2} alt="" />
           <img src={left3} alt="" />
+          <img src={left4} alt="" />
         </div>
         <div className="designcenter">
           <img src={center1} alt="" />
@@ -31,6 +44,20 @@ export default function designs() {
           <img src={right3} alt="" />
         </div>
       </div>
+      <div className="designsmobile">
+        <div className="designleft">
+          <img src={mobileleft1} alt="" />
+          <img src={mobileleft2} alt="" />
+          <img src={mobileleft3} alt="" />
+          <img src={mobileleft4} alt="" />
+        </div>
+        <div className="designright">
+          <img src={mobileright1} alt="" />
+          <img src={mobileright2} alt="" />
+          <img src={mobileright3} alt="" />
+          <img src={mobileright4} alt="" />
+        </div>
+      </div>
     </div>
   );
 }

src/components/styles/designs.css

@@ -14,4 +14,23 @@
 .designcenter img,
 .designright img {
   width: 100%;
+  margin-bottom: 10px;
+}
+
+.designsmobile {
+  display: none;
+  height: 100vh;
+  justify-content: center;
+  gap: 40px;
+  padding-inline: 40px;
+  overflow-y: scroll;
+}
+
+@media screen and (max-width: 1000px) {
+  .designsmain {
+    display: none;
+  }
+  .designsmobile {
+    display: flex;
+  }
 }