Merge branch 'main' of https://git.point-dev.net/moaz_dw/misbar-website

src/Components/Home/HeroSection.tsx

@@ -27,8 +27,8 @@ const HeroSection = ({data, isLoading}:THeaderPage) => {
         </div>
 
         <div className="main_text_section">  
-          <div>
+          <div className="Words">
-            <img src="/Home/HeroBorder.svg" alt="hero_image" />
+            {/* <img src="/Home/HeroBorder.svg" alt="hero_image" /> */}
             <h1>{t("WE")}</h1>
             <h1>{t("DEVELOP")}</h1>
             <h1>{t("EDUCATION APPLICATIONS")}</h1>

src/Styles/Pages/Contact.scss

@@ -4,6 +4,8 @@
     flex-direction: column;
     padding-bottom: 130px;
     position: relative;
+    min-height: 90vh;
+
     .contact_image{
         width: 100%;
         height: 100%;

src/Styles/Pages/Home.scss

@@ -1,3 +1,21 @@
+
+
+.Words{
+    // background-color: red;
+    position: relative;
+    &::after{
+        position: absolute;
+        top: -30%;
+        left: 0;
+        content: "";
+        width: 15%;
+        height: 180%;
+        background-image: url('/public/Home/HeroBorder.svg') !important;
+        background-repeat: no-repeat !important;
+        background-size: contain !important;
+
+    }
+}
 .HeroSection{
     width: 100%;
     position: relative;
@@ -5,9 +23,15 @@
     background: #000;
     border-bottom: 1px solid var(--white);
     padding-bottom: 120px;
+    min-height: 90vh;
+    // display: flex;
+    // align-items: center;
+    align-items: center;
     &::after{
         width: 100%;
         height: 100%;
+        top: 0;
+        left: 0;
         content: "";
         position: absolute;
         background-image: url('/public/Home/HeroBg.png');
@@ -81,19 +105,13 @@
         z-index: 999 !important;
         color: var(--white);
         position: relative;
-        img{
+  
-            position: absolute;
-            top: 80px;
-            width: 13vw;
-        }
         h1{
             margin-left: 8vw;
             font-size:3.8vw;
             font-weight: bold;
             z-index: 9999 !important;
-            &:nth-child(2){
+          
-                padding-top: 13.5vw;
-            }
         }
         .bottom_text_container{
             z-index: 9999;
@@ -131,16 +149,34 @@
         //     background-repeat: no-repeat !important;
         //     background-size: contain !important;
         // }
+
+
+        
+.Words{
+    // background-color: red;
+    position: relative;
+    &::after{
+        position: absolute;
+        top: -30%;
+        left: 0;
+        content: "";
+        width: 19%;
+        height: 200%;
+        background-image: url('/public/Home/HeroBorder.svg') !important;
+        background-repeat: no-repeat !important;
+        background-size: contain !important;
+
+    }
+}
+
         .main_text_section{
             img{
                 width: 19vw;
             }
             h1{
-                margin-left:14vw;
+                // margin-left:14vw;
                 font-size:4.8vw;
-                &:nth-child(2){
+            
-                    padding-top: 18vw;
-                }
             }
             .bottom_text_container{
                 // margin-left: 20vw;
@@ -171,6 +207,26 @@
             background-position: right;
             background-size: cover !important;
         }
+
+        .Words{
+            // background-color: red;
+            position: relative;
+            &::after{
+                position: absolute;
+                top: -50%;
+                left: 0;
+                content: "";
+                width: 30%;
+                height: 300%;
+                background-image: url('/public/Home/HeroBorder.svg') !important;
+                background-repeat: no-repeat !important;
+                background-size: contain !important;
+        
+            }
+        }
+        
+
+
         .media_section{
             padding-left: 10px;
             p, hr{
@@ -201,19 +257,17 @@
                 width: 87px;
             }
             h1{
-                margin-left: 65px;
+                margin-left:5vw;
-                font-size:15px;
+                font-size:5vw;
-                &:nth-child(2){
+              
-                    padding-top: 80px;
-                }
             }
             .bottom_text_container{
                 width: 100%;
-                padding-left: 100px;
+                padding-left: 30VW;
                 // margin-left: 100px;
                 > p{
-                    width: 70%;
+                    width: 90%;
-                    font-size: 10px;
+                    font-size: 3vw;
                 }
                 .button_container{
                     width: 120px;
@@ -223,4 +277,5 @@
         }
     
     }
-}
+}
+

src/Styles/Pages/Projects.scss

@@ -5,6 +5,8 @@
     position: relative;
     padding-bottom: 110px;
     transition: ease-in-out .4s;
+    min-height: 90vh;
+
     &::after{
         content: "";
         width: 100%;

src/Styles/Pages/Service.scss

@@ -2,12 +2,14 @@
     width: 100%;
     display: flex;justify-content: center;align-items: center; flex-direction: column;
     position: relative;
+    min-height: 40vh;
     .service_image{
         width: 100%;
         height: 100%;
         position: absolute;   
         left: 0;
         opacity: .2;
+        top: 0;
     }
     .Title_link_container{
         width: 90%;

src/Styles/Pages/Works.scss

@@ -5,12 +5,14 @@
     position: relative;
     padding-bottom: 110px;
     transition: ease-in-out .4s;
+    min-height: 90vh;
     .works_image{
         width: 100%;
         height: 100%;
         position: absolute;   
         left: 0;
         z-index: 0 !important;
+        object-fit: cover;
     }
     .works_container{
        width: 90%;
@@ -38,17 +40,17 @@
        }
 
        .swiper_container{
-            width: 86%;
+            width: 90%;
        }
     }
 }
 .works_Swiper{
     img{
-        width: 138px;
+        width: 170px;
     }
 }
 
-@media screen and (max-width:500px) {
+@media screen and (max-width:600px) {
     .works{
         padding-bottom: 100px;
         .works_container{
@@ -72,7 +74,7 @@
         padding-right: 5px;
         img{
             width: 37vw;
-            height: 270px;
+          
         }
         .swiper-slide{
             @include Flex;