From 27a98d7b9f5276e4d61dc48b6589523601e6912b Mon Sep 17 00:00:00 2001
From: F-G Fernandez <26927750+frgfm@users.noreply.github.com>
Date: Wed, 15 Nov 2023 01:47:31 +0100
Subject: [PATCH] feat: Updates hero banner and fixes responsiveness (#15)

* fix: Fixed wrap on backers icons

* style: Fixes Hero padding

* feat: Updates hero content
---
 src/components/Hero.tsx       |  7 ++++---
 src/styles/Backers.module.css | 26 +++++++++++++++++++-------
 src/styles/Hero.module.css    |  2 +-
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 72e389a..24ac309 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -29,15 +29,16 @@ const Hero: FC = () => {
               .typeString(
                 "<a href='https://marketplace.visualstudio.com/items?itemName=QuackAI.quack-companion'>companion</a>",
               )
-              .typeString(" for developer onboarding")
+              .typeString(" for dev team alignment")
               .start();
           }}
         />
       </h1>
 
       <p className={styles.description}>
-        Our VSCode extension guides developers through the best steps to make a
-        smooth contribution.
+        No more review hassle or tedious project gardening. Give shape &
+        consistency to your developer team&apos;s expectations with our VSCode
+        extension.
       </p>
 
       <div className={styles.grid}>
diff --git a/src/styles/Backers.module.css b/src/styles/Backers.module.css
index 76b0d01..66d4d09 100644
--- a/src/styles/Backers.module.css
+++ b/src/styles/Backers.module.css
@@ -9,7 +9,6 @@
 .logoGrid {
   display: flex;
   justify-content: center;
-  flex-wrap: nowrap; /* Prevents the logos from wrapping into multiple lines */
   max-width: 100%;
   margin: 0 auto;
   margin-top: 10px;
@@ -27,12 +26,6 @@
   filter: grayscale(0%); /* Returns the image to full color when hovered */
 }
 
-@media (max-width: 768px) {
-  .logoGrid {
-    flex-wrap: wrap; /* Allows the logos to wrap into multiple lines on smaller screens */
-  }
-}
-
 .logo {
   height: 64px;
   width: auto;
@@ -44,3 +37,22 @@
   font-size: 2rem;
   margin-bottom: 1rem;
 }
+
+@media (max-width: 768px) {
+  .logoGrid {
+    flex-wrap: wrap; /* Allows the logos to wrap into multiple lines on smaller screens */
+    flex-direction: column;
+    align-items: center;
+  }
+  .logoCard {
+    width: 100%; /* Full width for each logo card */
+    margin: 1rem 0; /* Adjust margin for vertical spacing */
+  }
+  .backedBySection {
+    padding: 0 20px; /* Adjust as needed */
+  }
+  .logo {
+    height: 48px; /* Adjust based on your preference */
+    width: auto; /* Maintain aspect ratio */
+  }
+}
diff --git a/src/styles/Hero.module.css b/src/styles/Hero.module.css
index bf4a3a3..c2026e5 100644
--- a/src/styles/Hero.module.css
+++ b/src/styles/Hero.module.css
@@ -1,5 +1,5 @@
 .heroSection {
-  padding: 5rem 0;
+  padding: 5rem 2rem;
   flex: 1;
   display: flex;
   flex-direction: column;