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

@@ -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}>

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 */
+  }
+}

src/styles/Hero.module.css

@@ -1,5 +1,5 @@
 .heroSection {
-  padding: 5rem 0;
+  padding: 5rem 2rem;
   flex: 1;
   display: flex;
   flex-direction: column;