🎨 refactor homepage blob to tailwind css

UoaWDCC · Aug 6, 2024 · 1a17074 · 1a17074
1 parent fb5e584
commit 1a17074
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/next/app/test/belle/tutorial.tsx b/next/app/test/belle/tutorial.tsx
diff --git a/next/components/home/Blob.tsx b/next/components/home/Blob.tsx
@@ -13,7 +13,7 @@ export default function Blob({ children, className = "" }: BlobProps) {
 
   return (
     <div
-      className={`block rounded-3xl text-white text-lg p-8 [&_:is(h1, h2, h3)]:text-xl [&_:is(h1, h2, h3)]:font-bold ${className}`}
+      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>

diff --git a/next/components/home/HomePageBlob.tsx b/next/components/home/HomePageBlob.tsx
@@ -14,13 +14,13 @@ export default function HomePageBlobs({ blob1, blob2, blob3 }: Props) {
     <div
       className={`${styles.container} grid grid-cols-14 my-24 p-5 drop-shadow-xl`}
     >
-      <Blob className={`bg-white ${styles.blob1}`}>{blob1}</Blob>
-      <ConnectorBlob className={styles.connector} />
-      <Blob className={`bg-white ${styles.blob2}`}>
+      <Blob className="bg-white col-start-8 col-span-4">{blob1}</Blob>
+      <ConnectorBlob className="col-start-10 col-end-12 justify-self-center" />
+      <Blob className="bg-white col-start-10 col-span-4">
         <RichText props={{ text: blob2 }} />
         <button className={styles.button}>JOIN US NOW</button>
       </Blob>
-      <Blob className={`bg-[#ffaa00] ${styles.blob3}`}>{blob3}</Blob>
+      <Blob className="bg-[#ffaa00] text-black row-start-4 col-start-2 col-span-4">{blob3}</Blob>
     </div>
   );
 }