stanley/whyjoin

src/components/Title.jsx

@@ -14,7 +14,7 @@ const Title = ({ subTitle, title }) => {
         duration: 0.5,
         delay: 0.1,
       }}
-      className="relative flex flex-col justify-center items-center"
+      className="relative flex flex-col justify-center items-center z-20"
     >
       <p className={COLORS.green.text + " font-semibold mb-0"}>{subTitle}</p>
       <p className="mt-0 font-bold text-2xl md:text-3xl">

src/components/home/Focus.jsx

@@ -2,15 +2,15 @@ import ArrowLink from "../ArrowLink";
 
 const Focus = ({ title, description, link, icon }) => {
   return (
-    <div className="flex flex-col items-center bg-blue-100 w-1/5">
+    <div className="relative flex flex-col items-center bg-blue-100 p-2">
       <div className="flex justify-center text-3xl text-ewb-green my-2">
         {icon}
       </div>
-      <p className="font-bold text-2xl">{title}</p>
-      <p className="font-normal text-xl whitespace-normal text-center break-keep w-3/4">
+      <p className="font-bold text-2xl text-center py-2">{title}</p>
+      <p className="font-normal text-xl whitespace-normal text-center break-keep w-3/4 pt-2 pb-4">
         {description}
       </p>
-      <ArrowLink text="learn more" link={link} />
+      {link !== "" && <ArrowLink text="learn more" link={link} />}
     </div>
   );
 };

src/components/home/WhyJoin.jsx

@@ -1,5 +1,35 @@
+import Title from "../Title";
+import { FOCUS } from "@/data/focus";
+import Focus from "./Focus";
+import Picture from "../Picture";
 const WhyJoin = () => {
-  return <div>WhyJoin</div>;
+  return (
+    <div className="py-16 w-11/12 flex flex-col items-center">
+      <div className="absolute w-1/3 aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" />
+      <Title subTitle="GET INVOLVED AND MAKE AN IMPACT!" title="WHY JOIN EWB" />
+      <div className="relative text-center pt-12 w-1/2">
+        Engineers Without Borders at UCR currently hosts several projects,
+        professional development events, and club activities for members to
+        actively participate in. We highly encourage all students to broaden
+        their learning experience by participating in our organization
+        activities. We hope that through these activities, students will grow as
+        skilled professionals and leaders.
+      </div>
+      <div className="grid grid-cols-2 gap-4 my-12 w-2/4">
+        {FOCUS.map((focus, index) => (
+          <Focus
+            index={index}
+            key={index}
+            title={focus.title}
+            description={focus.description}
+            icon={focus.icon}
+            link=""
+          />
+        ))}
+      </div>
+      <Picture picture="/images/CostaRica/CostaRica1.gif" />
+    </div>
+  );
 };
 
 export default WhyJoin;