From 05b25b237d2bc9886eb9ea14e4baf33ad09b5090 Mon Sep 17 00:00:00 2001
From: Wanjohi <elviswanjohi47@gmail.com>
Date: Tue, 22 Jul 2025 06:47:53 +0300
Subject: [PATCH] feat(web): Add more Grid columns

---
 .../src/components/astro/HeroComponent.astro  | 45 ++++++++++++++++++-
 .../src/components/solidjs/index.module.css   |  6 +++
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/astro/HeroComponent.astro b/packages/web/src/components/astro/HeroComponent.astro
index d381921b..c013abec 100644
--- a/packages/web/src/components/astro/HeroComponent.astro
+++ b/packages/web/src/components/astro/HeroComponent.astro
@@ -9,6 +9,49 @@ import { Stack, Grid } from "../solidjs/index.ts";
   stackGap="0px"
 >
   <div class="flex justify-center items-center flex-col">
-    <Grid smGridColumns={8} mdGridColumns={10} lgGridColumns={12} />
+    <Grid
+      style={{ "border-bottom": "none" }}
+      crossRow={1}
+      crossColumn={0}
+      smGridColumns={8}
+      mdGridColumns={10}
+      lgGridColumns={12}
+    />
+    <Grid
+      class="before:!border-t-0"
+      style={{ "border-bottom": "none" }}
+      smGridColumns={1}
+      mdGridColumns={1}
+      lgGridColumns={3}
+      heroHeading={true}
+    />
+    <Grid
+      style={{ "border-bottom": "none" }}
+      class="before:!border-t-0"
+      smGridColumns={8}
+      mdGridColumns={10}
+      lgGridColumns={12}
+    />
+    <Grid
+      style={{ "border-bottom": "none" }}
+      class="before:!border-t-0"
+      smGridColumns={8}
+      mdGridColumns={10}
+      lgGridColumns={12}
+    />
+    <Grid
+      style={{ "border-bottom": "none" }}
+      class="before:!border-t-0"
+      smGridColumns={8}
+      mdGridColumns={10}
+      lgGridColumns={12}
+    />
+    <Grid
+      style={{ "border-bottom": "none" }}
+      class="before:!border-t-0"
+      smGridColumns={8}
+      mdGridColumns={10}
+      lgGridColumns={12}
+    />
   </div>
 </Stack>
diff --git a/packages/web/src/components/solidjs/index.module.css b/packages/web/src/components/solidjs/index.module.css
index 7b30808d..36c93846 100644
--- a/packages/web/src/components/solidjs/index.module.css
+++ b/packages/web/src/components/solidjs/index.module.css
@@ -135,6 +135,11 @@
   display: contents;
 }
 
+.grid_headingGrid {
+  grid-template-columns: calc(var(--column-width) / 4) 1fr calc(var(--column-width) / 4) !important;
+  text-wrap: balance;
+}
+
 .grid_gridGuide {
   inset: 0;
   position: absolute;
@@ -145,6 +150,7 @@
   border: var(--guide-width) solid var(--guide-color);
   border-left: none;
   border-top: none;
+  border-bottom: none;
 }
 
 @media screen and (max-width: 400px) {