🎨 allow connector to accept tailwind

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

Hide file tree

Showing 3 changed files with 10 additions and 48 deletions.
diff --git a/next/components/home/ConnectorBlob.tsx b/next/components/home/ConnectorBlob.tsx
@@ -1,11 +1,15 @@
 import connector from "@/assets/home/connector.svg";
 import Image from "next/image";
 
-export default function ConnectorBlob() {
+export default function ConnectorBlob({
+  className = "",
+}: {
+  className?: string;
+}) {
   return (
     <Image
       draggable={false}
-      // className={styles.connector}
+      className={className}
       src={connector}
       alt=""
       width={60}

diff --git a/next/components/home/HomePageBlob.module.css b/next/components/home/HomePageBlob.module.css
@@ -1,30 +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;
-}
-
-.whiteBlob {
-  background-color: #ffffff;
-}
-
-.orangeBlob {
-  background-color: #ffaa00;
-}
-
 .blob1 {
   grid-column: 8 / span 4;
   color: #003366;
@@ -51,23 +24,6 @@
   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;

diff --git a/next/components/home/HomePageBlob.tsx b/next/components/home/HomePageBlob.tsx
@@ -11,9 +11,11 @@ type Props = {
 
 export default function HomePageBlobs({ blob1, blob2, blob3 }: Props) {
   return (
-    <div className={styles.container}>
+    <div
+      className={`${styles.container} grid grid-cols-14 my-24 p-5 drop-shadow-xl`}
+    >
       <Blob className={`bg-white ${styles.blob1}`}>{blob1}</Blob>
-      <ConnectorBlob />
+      <ConnectorBlob className={styles.connector} />
       <Blob className={`bg-white ${styles.blob2}`}>
         <RichText props={{ text: blob2 }} />
         <button className={styles.button}>JOIN US NOW</button>