From 41b85d64360e1c42d3fea871ce4f2b9b981ad2db Mon Sep 17 00:00:00 2001
From: Wanjohi <elviswanjohi47@gmail.com>
Date: Tue, 22 Jul 2025 15:52:21 +0300
Subject: [PATCH] feat(web): Use reusable components

---
 .../web/src/components/astro/HeroComponent.astro | 16 +++++++++-------
 packages/web/src/components/solidjs/index.ts     |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/components/astro/HeroComponent.astro b/packages/web/src/components/astro/HeroComponent.astro
index e051fb9f..4e4d5346 100644
--- a/packages/web/src/components/astro/HeroComponent.astro
+++ b/packages/web/src/components/astro/HeroComponent.astro
@@ -9,15 +9,15 @@ import { Stack, Grid } from "../solidjs/index.ts";
   stackGap="0px"
 >
   <div class="flex justify-center items-center flex-col">
-    <Grid
+    <Grid.Root
       style={{ "border-bottom": "none" }}
-      crossRow={1}
-      crossColumn={0}
       smGridColumns={8}
       mdGridColumns={10}
       lgGridColumns={12}
-    />
-    <Grid
+    >
+      <Grid.Cross crossRow={1} crossColumn={0} />
+    </Grid.Root>
+    <Grid.Root
       class="before:!border-t-0"
       style={{ "border-bottom": "none" }}
       smGridColumns={1}
@@ -25,13 +25,15 @@ import { Stack, Grid } from "../solidjs/index.ts";
       lgGridColumns={3}
       heroHeading={true}
     />
-    <Grid
+    <Grid.Root
       style={{ "border-bottom": "none" }}
       class="before:!border-t-0"
       smGridColumns={8}
       gridRows={5}
       mdGridColumns={10}
       lgGridColumns={12}
-    />
+    >
+      <Grid.Cross crossRow={-1} crossColumn={-1} />
+    </Grid.Root>
   </div>
 </Stack>
diff --git a/packages/web/src/components/solidjs/index.ts b/packages/web/src/components/solidjs/index.ts
index 71772c58..196b3836 100644
--- a/packages/web/src/components/solidjs/index.ts
+++ b/packages/web/src/components/solidjs/index.ts
@@ -1,2 +1,2 @@
 export * from "./Stack"
-export * from "./Grid"
+export { default as Grid } from "./Grid"