Merge branch 'master' into add-faheem-profile

Author: Vivek Vishal

src/sections/Home/Banner-1/banner1.style.js

@@ -5,6 +5,9 @@ const Banner1SectionWrapper = styled.section`
     padding: 7rem 0;
     background-color: ${props => props.theme.body};
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    min-height: 600px; /* Add explicit min-height */
+    position: relative; /* Add position for better layout control */
+    width: 100%; /* Add explicit width */
 
     .background-svg {
         overflow: visible;
@@ -13,6 +16,7 @@ const Banner1SectionWrapper = styled.section`
         top: -10%;
         width: 25%;
         min-height: 150%;
+        height: auto; /* Ensure proper scaling */
     }
     p {
         font-size: 21px;

src/sections/Home/Banner-2/banner2.style.js

@@ -11,6 +11,9 @@ const Banner2SectionWrapper = styled.section`
     background-size: 25%, 23%;
     background-color: ${props => props.theme.body};
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    min-height: 600px; /* Add explicit min-height */
+    position: relative; /* Add position for better layout control */
+    width: 100%; /* Add explicit width */
     
     background-position: center right 160px, bottom right;
     p {

src/sections/Home/Banner-3/banner3.style.js

@@ -10,6 +10,9 @@ const Banner3SectionWrapper = styled.section`
     background-color: ${props => props.theme.secondaryLightColorTwo};
     background-position: bottom -85px right;
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    min-height: 600px; /* Add explicit min-height */
+    position: relative; /* Add position for better layout control */
+    width: 100%; /* Add explicit width */
 
     p {
         font-size: 21px;

src/sections/Home/Banner-4/banner4.style.js

@@ -2,6 +2,11 @@ import styled from "styled-components";
 
 const Banner1SectionWrapper = styled.section`
     display: none;
+    min-height: 600px; /* Add explicit min-height */
+    position: relative; /* Add position for better layout control */
+    width: 100%; /* Add explicit width */
+    padding: 7rem 0; /* Add explicit padding to maintain consistent spacing */
+    
     p {
         font-size: 21px;
         font-weight: 300;

src/sections/Home/CloudNativeManagement/statement.style.js

@@ -2,6 +2,10 @@ import styled from "styled-components";
 
 
 const BannerSectionWrapper = styled.section`
+    position: relative; /* Add position for better layout control */
+    min-height: 600px; /* Add explicit min-height */
+    width: 100%; /* Add explicit width */
+    
     .row {
         margin: 0px;
     }
@@ -10,6 +14,7 @@ const BannerSectionWrapper = styled.section`
         padding-right: 0px;
         flex: 0 0 51%;
         max-width: 51%;
+        min-height: 500px; /* Add min-height to prevent shift */
     }
     .left {
         display: flex;

src/sections/Home/FeaturesContainer/style.js

@@ -4,6 +4,10 @@ export const Container = styled.div`
     max-width: 1170px;
     padding: 0 1rem;
     margin: 5rem auto 0;
+    min-height: 400px; /* Add explicit min-height */
+    width: 100%; /* Add explicit width */
+    position: relative; /* Add position for better layout control */
+    
     .title {
         opacity: 0;
         transform: translateY(20px) scale(0.95);
@@ -12,6 +16,7 @@ export const Container = styled.div`
         text-align: center;
         font-weight: 400;
         color: ${props => props.theme.greyDEE3DEToGreen3C494F};
+        min-height: 1.2em; /* Reserve space for title */
          span {
             color: ${(props) => props.theme.text};
             font-weight: 700;
@@ -26,6 +31,7 @@ export const Container = styled.div`
         margin-top: 1rem;
         margin-bottom: 3rem;
         font-size: 1.5rem;
+        min-height: 1.5em; /* Reserve space for subtitle */
     }
     
     .fade-out {

src/sections/Meshery/Meshery-integrations/Integration.style.js

@@ -1,4 +1,3 @@
-
 import styled from "styled-components";
 import Slider from "react-slick";
 
@@ -172,6 +171,10 @@ export const IntegrationsWrapper = styled.div`
   max-width: 75rem;
   margin: 5.1875rem auto;
   text-align: center;
+  min-height: 300px; /* Add explicit min-height */
+  position: relative; /* Add position for better layout control */
+  width: 100%; /* Add explicit width */
+  
   .seeAllBtn {
     &:hover {
       color: white;

src/sections/subscribe/subscribe.style.js

@@ -5,6 +5,9 @@ const SubscribeWrapper = styled.div`
     padding: 3.125rem 0.625rem;
     overflow: hidden;
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    min-height: 200px; /* Add explicit min-height */
+    position: relative; /* Add position for better layout control */
+    width: 100%; /* Add explicit width */
 
     h2{
         font-weight: 600;