From 23f663f144a62424beab2b9e1f590374872fbc2f Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Sun, 6 Oct 2024 22:15:12 +0530
Subject: [PATCH 1/2] add missing props

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 src/sections/ArchitectureDiagram/index.js      | 2 +-
 src/sections/CloudNativeDeployments/index.js   | 2 +-
 src/sections/Comments/index.js                 | 2 +-
 src/sections/Developer-Infrastructure/index.js | 2 +-
 src/sections/OrchestrationManagement/index.js  | 2 +-
 src/sections/kubernetes-multi-cluster/index.js | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/sections/ArchitectureDiagram/index.js b/src/sections/ArchitectureDiagram/index.js
index f8ffb3a6b01c..5ebedba9953b 100644
--- a/src/sections/ArchitectureDiagram/index.js
+++ b/src/sections/ArchitectureDiagram/index.js
@@ -61,7 +61,7 @@ const ArchitectureDiagram = () => {
           </div>
           <div className={"collaboration_display"}>
             {card_data.map((x) => (
-              <FeatureUseCard data={x} key={x.heading} sm={12} md={6} lg={6} />
+              <FeatureUseCard data={x} key={x.heading} $sm={12} $md={6} $lg={6} />
             ))}
           </div>
         </div>
diff --git a/src/sections/CloudNativeDeployments/index.js b/src/sections/CloudNativeDeployments/index.js
index 0044c83d9abb..36fc5c8b3609 100644
--- a/src/sections/CloudNativeDeployments/index.js
+++ b/src/sections/CloudNativeDeployments/index.js
@@ -52,7 +52,7 @@ const KubernetesMultiCluster = () => {
           </div>
           <div className={"collaboration_display"}>
             {card_data.map((x) => (
-              <FeatureUseCard data={x} key={x.heading} sm={12} md={6} lg={4} />
+              <FeatureUseCard data={x} key={x.heading} $sm={12} $md={6} $lg={4} />
             ))}
           </div>
         </div>
diff --git a/src/sections/Comments/index.js b/src/sections/Comments/index.js
index 457207184e77..45874620e424 100644
--- a/src/sections/Comments/index.js
+++ b/src/sections/Comments/index.js
@@ -46,7 +46,7 @@ const Comments = () => {
           </div>
           <div className={"collaboration_display"}>
             {card_data.map((x) => (
-              <FeatureUseCard data={x} key={x.heading} sm={12} md={6} lg={4} />
+              <FeatureUseCard data={x} key={x.heading} $sm={12} $md={6} $lg={4} />
             ))}
           </div>
         </div>
diff --git a/src/sections/Developer-Infrastructure/index.js b/src/sections/Developer-Infrastructure/index.js
index 0347247e4fb9..3f39f692cca4 100644
--- a/src/sections/Developer-Infrastructure/index.js
+++ b/src/sections/Developer-Infrastructure/index.js
@@ -52,7 +52,7 @@ const KubernetesMultiCluster = () => {
           </div>
           <div className={"collaboration_display"}>
             {card_data.map((x) => (
-              <FeatureUseCard data={x} key={x.heading} sm={12} md={6} lg={4} />
+              <FeatureUseCard data={x} key={x.heading} $sm={12} $md={6} $lg={4} />
             ))}
           </div>
         </div>
diff --git a/src/sections/OrchestrationManagement/index.js b/src/sections/OrchestrationManagement/index.js
index b34c75b687c9..65c58a6b768d 100644
--- a/src/sections/OrchestrationManagement/index.js
+++ b/src/sections/OrchestrationManagement/index.js
@@ -58,7 +58,7 @@ const Orchestration = () => {
           </div>
           <div className={"collaboration_display"}>
             {card_data.map((x) => (
-              <FeatureUseCard data={x} key={x.heading} sm={12} md={6} lg={6} />
+              <FeatureUseCard data={x} key={x.heading} $sm={12} $md={6} $lg={6} />
             ))}
           </div>
         </div>
diff --git a/src/sections/kubernetes-multi-cluster/index.js b/src/sections/kubernetes-multi-cluster/index.js
index 72ea5e882937..586f2a00603b 100644
--- a/src/sections/kubernetes-multi-cluster/index.js
+++ b/src/sections/kubernetes-multi-cluster/index.js
@@ -51,7 +51,7 @@ const KubernetesMultiCluster = () => {
           </div>
           <div className={"collaboration_display"}>
             {card_data.map((x) => (
-              <FeatureUseCard data={x} key={x.heading} sm={12} md={6} lg={4} />
+              <FeatureUseCard data={x} key={x.heading} $sm={12} $md={6} $lg={4} />
             ))}
           </div>
         </div>

From 13794142494515c4af52ba480f0c788cb681ada7 Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Mon, 7 Oct 2024 00:49:20 +0530
Subject: [PATCH 2/2] fix issue

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 src/sections/Community/Newcomers-guide/index.js | 12 +++++++++---
 src/sections/Community/index.js                 | 12 ++++++++----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/sections/Community/Newcomers-guide/index.js b/src/sections/Community/Newcomers-guide/index.js
index b90270b913d2..d1428be34dee 100644
--- a/src/sections/Community/Newcomers-guide/index.js
+++ b/src/sections/Community/Newcomers-guide/index.js
@@ -32,7 +32,9 @@ const NewcomersGuide = () => {
               Slack workspace</a>{" "}
             to collaborate with the community and the <a href="https://discuss.layer5.io" target="">discussion forum</a> for questions. Also, you can check the
             quick-links below for jumping straight into things.</p>
-          <Row className="newcomers-journey">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="newcomers-journey">
             <Col
               className="heading"
               $sm={12}
@@ -137,7 +139,9 @@ const NewcomersGuide = () => {
               </ol>
             </Col>
           </Row>
-          <Row className="step">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="step">
             <Col $sm={12} $lg={6}>
               <h3>Working on Your Issue</h3>
               <ol type="i">
@@ -190,7 +194,9 @@ const NewcomersGuide = () => {
               <StaticImage src={FiveWorking} alt="Five Working Image" />
             </Col>
           </Row>
-          <Row className="step">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="step">
             <Col $sm={12} $lg={6} className="community-collage">
               <StaticImage src={CommunityImage3} alt="Community Image" />
             </Col>
diff --git a/src/sections/Community/index.js b/src/sections/Community/index.js
index 80420ba90352..acd4857b28d0 100644
--- a/src/sections/Community/index.js
+++ b/src/sections/Community/index.js
@@ -49,7 +49,7 @@ const CommunityPage = () => {
 
   return (
     <CommunitySectionWrapper>
-      <BgImage image={ pluginImage} className="section">
+      <BgImage image={pluginImage} className="section">
         <div className="community-header">
           <h1>The Layer5 Community</h1>
           <h2>New members are always welcome</h2>
@@ -57,7 +57,9 @@ const CommunityPage = () => {
       </BgImage>
       <div className="community-section-wrapper">
         <Container>
-          <Row className="service-mesh-projects">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="service-mesh-projects">
             <Col $sm={12} $lg={6}>
               <h2>Warm, welcoming, and encouraging. Embrace developer-defined infrastructure and help empower every engineer with us.</h2>
               <p>
@@ -69,7 +71,9 @@ const CommunityPage = () => {
               <StaticImage src={CommunityMember} alt="Community Member" placeholder="blurred" />
             </Col>
           </Row>
-          <Row className="open-source-projects">
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="open-source-projects">
             <h2>Open Source and Cloud Native</h2>
             <p>
               Layer5 projects are open source software. Anyone can download,
@@ -154,7 +158,7 @@ const CommunityPage = () => {
           </Row>
         </Container>
         <Container>
-          <InlineQuotes title={"Community Member"} quote={"Wow, you all are incredibly helpful. I wish every open source community was as friendly as Layer5's."} person={"Priyanshu Sharma"}/>
+          <InlineQuotes title={"Community Member"} quote={"Wow, you all are incredibly helpful. I wish every open source community was as friendly as Layer5's."} person={"Priyanshu Sharma"} />
         </Container>
       </div>
       <JoinCommunity image={Five} className="newcomers-join" />