065 home page connector gap

next/app/page.tsx

@@ -3,7 +3,7 @@ import ImageWithText from "@/components/blocks/ImageWithText";
 import Footer from "@/components/footer/footer";
 import Header from "@/components/header/header";
 import CarouselBase from "@/components/home/CarouselBase";
-import HomePageBlob from "@/components/home/HomePageBlob";
+import HomePageBlobs from "@/components/home/HomePageBlob";
 import BGWaves from "@/components/svg/BGWaves";
 import { homePageSchema } from "@/schemas/single/HomePage";
 import fetchStrapi from "@/util/strapi";
@@ -29,7 +29,7 @@ export default async function Home() {
           {data.heroParagraph}
         </p>
       </div>
-      <HomePageBlob blob1={data.blob1} blob2={data.blob2} blob3={data.blob3} />
+      <HomePageBlobs blob1={data.blob1} blob2={data.blob2} blob3={data.blob3} />
 
       <ImageWithText props={data.textWithImage} />
       <div>

next/app/test/nate/grid/page.tsx

@@ -0,0 +1,21 @@
+export default function GridPage() {
+  return (
+    <div className="border border-green-500 grid grid-cols-2 gap-4">
+      <h1 className="text-red-500">Grid Page</h1>
+      <h1 className="text-green-500 col-start-2 col-span-2 row-start-4 border border-pink-400">
+        Grid Page
+      </h1>
+      <h1 className="text-red-500">Grid Page</h1>
+      <h1 className="text-red-500">Grid Page</h1>
+      <h1 className="text-red-500">Grid Page</h1>
+      <h1 className="text-red-500">Grid Page</h1>
+      <h1 className="text-red-500">Grid Page</h1>
+      <h1 className="text-red-500">Grid Page</h1>
+      <h1 className="text-red-500">Grid Page</h1>
+      <h1 className="text-red-500">Grid Page</h1>
+      <h1 className="text-red-500">Grid Page</h1>
+      <h1 className="text-red-500">Grid Page</h1>
+      <h1 className="text-red-500">Grid Page</h1>
+    </div>
+  );
+}

next/components/home/Blob.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import RichText from "../blocks/RichText";
+
+type BlobProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export default function Blob({ children, className = "" }: BlobProps) {
+  // If children is a string, render it as a RichText component
+  const richChildren = <RichText props={{ text: children }} />;
+  children = children instanceof String ? richChildren : children;
+
+  return (
+    <div
+      className={`block rounded-3xl text-blue-950 text-lg p-8 [&_:is(h1, h2, h3)]:text-xl [&_:is(h1, h2, h3)]:font-bold ${className}`}
+    >
+      {children}
+    </div>
+  );
+}

next/components/home/ConnectorBlob.tsx

@@ -0,0 +1,19 @@
+import connector from "@/assets/home/connector.svg";
+import Image from "next/image";
+
+export default function ConnectorBlob({
+  className = "",
+}: {
+  className?: string;
+}) {
+  return (
+    <Image
+      draggable={false}
+      className={className}
+      src={connector}
+      alt=""
+      width={60}
+      height={32}
+    />
+  );
+}

next/components/home/HomePageBlob.module.css

@@ -1,78 +1,3 @@
-.container {
-  --connector-height: 2rem;
-  display: grid;
-  grid-template-columns: repeat(14, 1fr);
-  max-width: 100%;
-  margin: 6em auto 0 auto; /* shifting the container downwards */
-  padding: 20px;
-  padding-bottom: 6rem;
-  filter: drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.15));
-}
-
-.blob {
-  display: block;
-  border-radius: 20px;
-  color: #ffffff;
-  font-size: 1.125rem;
-  padding: 2rem;
-}
-
-.blob :is(h1, h2, h3) {
-  font-size: 1.5rem;
-  font-weight: bold;
-}
-
-.whiteBlob {
-  background-color: #ffffff;
-}
-
-.orangeBlob {
-  background-color: #ffaa00;
-}
-
-.blob1 {
-  grid-column: 8 / span 4;
-  color: #003366;
-  position: relative;
-}
-
-.blob2 {
-  position: relative;
-  top: calc(var(--connector-height) - 3px);
-  grid-column: 10 / span 4;
-  color: #003366;
-}
-
-.blob3 {
-  grid-column: 2 / span 4;
-  color: #003366;
-}
-
-.connector {
-  position: absolute;
-  bottom: 0;
-  right: 2rem;
-  transform: translateY(calc(100% - 2px));
-  height: var(--connector-height);
-}
-
-.container {
-  /* ... (existing styles) ... */
-  position: relative; /* Add position relative to the container */
-}
-
-/* ... (existing styles) ... */
-
-.blob1 {
-  grid-column: 8 / span 4;
-  color: #003366;
-}
-
-.blob2 {
-  grid-column: 10 / span 4;
-  color: #003366;
-}
-
 .button {
   margin-top: 15px;
   padding: 12px 25px;

next/components/home/HomePageBlob.tsx

@@ -1,36 +1,26 @@
-import connector from "@/assets/home/connector.svg";
-import React from "react";
 import RichText from "../blocks/RichText";
+import Blob from "./Blob";
+import ConnectorBlob from "./ConnectorBlob";
 import styles from "./HomePageBlob.module.css";
-import Image from "next/image";
 
-const HomePageBlob: React.FC<{
+type Props = {
   blob1: string;
   blob2: string;
   blob3: string;
-}> = ({ blob1, blob2, blob3 }) => {
+};
+
+export default function HomePageBlobs({ blob1, blob2, blob3 }: Props) {
   return (
-    <div className={styles.container}>
-      <div className={`${styles.blob} ${styles.whiteBlob} ${styles.blob1}`}>
-        <RichText props={{ text: blob1 }} />
-        <Image
-          draggable={false}
-          className={styles.connector}
-          src={connector}
-          alt=""
-          width={60}
-          height={32}
-        />
-      </div>
-      <div className={`${styles.blob} ${styles.whiteBlob} ${styles.blob2}`}>
+    <div
+      className={`${styles.container} grid grid-cols-14 my-24 p-5 drop-shadow-xl`}
+    >
+      <Blob className="bg-white col-start-8 col-span-4">{blob1}</Blob>
+      <ConnectorBlob className="col-start-10 col-end-12 justify-self-center hidden md:block" />
+      <Blob className="bg-white col-start-10 col-span-4">
         <RichText props={{ text: blob2 }} />
         <button className={styles.button}>JOIN US NOW</button>
-      </div>
-      <div className={`${styles.blob} ${styles.orangeBlob} ${styles.blob3}`}>
-        <RichText props={{ text: blob3 }} />
-      </div>
+      </Blob>
+      <Blob className="bg-[#ffaa00] text-black row-start-4 col-start-2 col-span-4">{blob3}</Blob>
     </div>
   );
-};
-
-export default HomePageBlob;
+}