From a4ef95eb930e3285336953b4ade1a41645264029 Mon Sep 17 00:00:00 2001 From: Stanley Lew Date: Fri, 17 Nov 2023 00:34:38 -0800 Subject: [PATCH 1/4] added why join section + small changes to focus.jsx to fix grid content layout --- src/components/home/Focus.jsx | 8 ++++---- src/components/home/WhyJoin.jsx | 32 +++++++++++++++++++++++++++++++- 2 files changed, 35 insertions(+), 5 deletions(-) diff --git a/src/components/home/Focus.jsx b/src/components/home/Focus.jsx index 9ccf715..61bf771 100644 --- a/src/components/home/Focus.jsx +++ b/src/components/home/Focus.jsx @@ -2,15 +2,15 @@ import ArrowLink from "../ArrowLink"; const Focus = ({ title, description, link, icon }) => { return ( -
+
{icon}
-

{title}

-

+

{title}

+

{description}

- + {link !== "" && }
); }; diff --git a/src/components/home/WhyJoin.jsx b/src/components/home/WhyJoin.jsx index b931741..34e7c23 100644 --- a/src/components/home/WhyJoin.jsx +++ b/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
WhyJoin
; + return ( +
+
+ + <div className="relative text-center pt-12 ml-72 mr-72 "> + 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 mx-72"> + {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; From 50aba20dad50c96cba14dd821cfe5d8acd4a972d Mon Sep 17 00:00:00 2001 From: Stanley Lew <stanley43595@gmail.com> Date: Fri, 17 Nov 2023 14:28:30 -0800 Subject: [PATCH 2/4] made changes --- src/components/home/WhyJoin.jsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/home/WhyJoin.jsx b/src/components/home/WhyJoin.jsx index 34e7c23..ad49760 100644 --- a/src/components/home/WhyJoin.jsx +++ b/src/components/home/WhyJoin.jsx @@ -4,10 +4,14 @@ import Focus from "./Focus"; import Picture from "../Picture"; const WhyJoin = () => { return ( - <div className="p-16 flex flex-col items-center"> + <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 ml-72 mr-72 "> + <Title + className="z-10" + 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 @@ -15,7 +19,7 @@ const WhyJoin = () => { 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 mx-72"> + <div className="grid grid-cols-2 gap-4 my-12 w-2/4"> {FOCUS.map((focus, index) => ( <Focus index={index} From febcdc819a2c72c62f5993a8d2af560ad39f0fb4 Mon Sep 17 00:00:00 2001 From: Stanley Lew <stanley43595@gmail.com> Date: Fri, 17 Nov 2023 14:33:07 -0800 Subject: [PATCH 3/4] z-20 instead of z-10 --- src/components/home/WhyJoin.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/home/WhyJoin.jsx b/src/components/home/WhyJoin.jsx index ad49760..3dee8f3 100644 --- a/src/components/home/WhyJoin.jsx +++ b/src/components/home/WhyJoin.jsx @@ -7,7 +7,7 @@ const WhyJoin = () => { <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 - className="z-10" + className="z-20" subTitle="GET INVOLVED AND MAKE AN IMPACT!" title="WHY JOIN EWB" /> From 49d24ca4d1f6aa4f13e2f188480852b5426411db Mon Sep 17 00:00:00 2001 From: Stanley Lew <stanley43595@gmail.com> Date: Fri, 17 Nov 2023 14:36:58 -0800 Subject: [PATCH 4/4] formatting --- src/components/Title.jsx | 2 +- src/components/home/WhyJoin.jsx | 6 +----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/Title.jsx b/src/components/Title.jsx index 09c02b6..3804869 100644 --- a/src/components/Title.jsx +++ b/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"> diff --git a/src/components/home/WhyJoin.jsx b/src/components/home/WhyJoin.jsx index 3dee8f3..c10e57c 100644 --- a/src/components/home/WhyJoin.jsx +++ b/src/components/home/WhyJoin.jsx @@ -6,11 +6,7 @@ const WhyJoin = () => { 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 - className="z-20" - subTitle="GET INVOLVED AND MAKE AN IMPACT!" - title="WHY JOIN EWB" - /> + <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