phoebe_prop_update

src/app/page.tsx

@@ -5,7 +5,7 @@ const Home = () => {
   return (
     <div>
       <MainText />
-      <BlurbHome title={""} description={""} image={""} />
+      <BlurbHome />
     </div>
   );
 };

src/components/home/BlurbHome.tsx

@@ -1,21 +1,20 @@
-import Image from "next/image";
+import Cupcakes from "@/public/home/cupcakes.webp";
+import BlurbHomeProps from "./BlurbHomeProps";
 
-interface CardProps {
-  title: string;
-  description: string;
-  image: string;
-}
-const BlurbHome: React.FC<CardProps> = ({ title, description, image }) => {
+const BlurbHome = () => {
   return (
     <div>
-      <div className="flex w-[30vw] flex-col items-center">
-        <Image src={image} alt="" />
-      </div>
-      <h2 className="my-[1vh] text-[1.7vw] font-medium">{title}</h2>
-      <p className="w-[18vw] text-center text-[0.9vw] font-light leading-tight">
-        {description}
-      </p>
+      <BlurbHomeProps
+        title="Collaborations"
+        description="We collaborate with various organizations, including SAGE and St. John
+        Ambulance (SJA) Canada. We plan to host campus-wide events and are
+        actively networking with other groups focused on cardiovascular disease
+        initiatives!"
+        image={Cupcakes}
+        alt="12 Cupcakes on the table with two people sitting behind it"
+      />
     </div>
   );
 };
+
 export default BlurbHome;

src/components/home/BlurbHomeProps.tsx

@@ -0,0 +1,31 @@
+import Image, { StaticImageData } from "next/image";
+
+interface CardProps {
+  title: string;
+  description: string;
+  image: StaticImageData;
+  alt: string;
+}
+const BlurbHomeProps: React.FC<CardProps> = ({
+  title,
+  description,
+  image,
+  alt,
+}) => {
+  return (
+    <div className="flex w-[30vw] flex-col items-center">
+      <div>
+        <Image
+          src={image}
+          alt={alt}
+          className="h-[37vh] w-[20vw] rounded-[15%] border-2 border-cvdsa-cornflower-100"
+        />
+      </div>
+      <h2 className="my-[1vh] text-[1.7vw] font-medium">{title}</h2>
+      <p className="w-[18vw] text-center text-[0.9vw] font-light leading-tight">
+        {description}
+      </p>
+    </div>
+  );
+};
+export default BlurbHomeProps;