From 73833fbe326a14db117a6f6d113174eb3e876dd8 Mon Sep 17 00:00:00 2001 From: Sookie Drabla Date: Mon, 20 Jan 2025 14:20:00 -0800 Subject: [PATCH 1/9] Add Philanthropy --- public/about/heart.svg | 27 +++++++++++++++++++++++++++ src/app/about/page.tsx | 2 ++ src/components/about/Philanthropy.tsx | 18 ++++++++++++++++++ 3 files changed, 47 insertions(+) create mode 100644 public/about/heart.svg create mode 100644 src/components/about/Philanthropy.tsx diff --git a/public/about/heart.svg b/public/about/heart.svg new file mode 100644 index 0000000..f32fbfe --- /dev/null +++ b/public/about/heart.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index b73b5f2..f096096 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -1,6 +1,7 @@ import WhoWeAre from "@/components/about/WhoWeAre"; import Heading from "@/components/about/FourPillTitle"; import Title from "@/components/Title"; +import Philanthropy from "@/components/about/Philanthropy"; const page = () => { return ( @@ -8,6 +9,7 @@ const page = () => { + <Philanthropy /> </div> ); }; diff --git a/src/components/about/Philanthropy.tsx b/src/components/about/Philanthropy.tsx new file mode 100644 index 0000000..16f8c66 --- /dev/null +++ b/src/components/about/Philanthropy.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import Image from "@/public/about/heart.svg"; + +const Philanthropy = () => { + return ( + <div className="relative grid grid-cols-4 p-6"> + <div className="col-span-2 flex items-center border-8 rounded-3xl border-csa-gray-200 p-2"> + <p className=" text-left text-5xl font-lora font-bold text-csa-gray-200 p-4">Philanthropy</p> + <div className="absolute left-1/2 " style={{transform: 'translateY(5%) translateX(-50%)'}}> + <img src={Image.src} alt="heart" className="w-3/4 h-3/4" /> + </div> + </div> + </div> + ); +}; + +export default Philanthropy; + \ No newline at end of file From 4bd971fdef4db06300755764d12b6d4167b69234 Mon Sep 17 00:00:00 2001 From: Sookie Drabla <sookie.sd@@gmail.com> Date: Mon, 20 Jan 2025 14:21:26 -0800 Subject: [PATCH 2/9] run format --- src/components/about/Philanthropy.tsx | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/about/Philanthropy.tsx b/src/components/about/Philanthropy.tsx index 16f8c66..761e2c9 100644 --- a/src/components/about/Philanthropy.tsx +++ b/src/components/about/Philanthropy.tsx @@ -2,17 +2,21 @@ import React from "react"; import Image from "@/public/about/heart.svg"; const Philanthropy = () => { - return ( - <div className="relative grid grid-cols-4 p-6"> - <div className="col-span-2 flex items-center border-8 rounded-3xl border-csa-gray-200 p-2"> - <p className=" text-left text-5xl font-lora font-bold text-csa-gray-200 p-4">Philanthropy</p> - <div className="absolute left-1/2 " style={{transform: 'translateY(5%) translateX(-50%)'}}> - <img src={Image.src} alt="heart" className="w-3/4 h-3/4" /> - </div> - </div> + return ( + <div className="relative grid grid-cols-4 p-6"> + <div className="col-span-2 flex items-center rounded-3xl border-8 border-csa-gray-200 p-2"> + <p className="font-lora p-4 text-left text-5xl font-bold text-csa-gray-200"> + Philanthropy + </p> + <div + className="absolute left-1/2" + style={{ transform: "translateY(5%) translateX(-50%)" }} + > + <img src={Image.src} alt="heart" className="h-3/4 w-3/4" /> </div> - ); + </div> + </div> + ); }; export default Philanthropy; - \ No newline at end of file From 99eb5fe49afca963d1754a834af7baf3f728a0e2 Mon Sep 17 00:00:00 2001 From: Sookie Drabla <sookie.sd@@gmail.com> Date: Mon, 20 Jan 2025 14:29:06 -0800 Subject: [PATCH 3/9] fix border color --- src/components/about/Philanthropy.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/about/Philanthropy.tsx b/src/components/about/Philanthropy.tsx index 761e2c9..a57bbd3 100644 --- a/src/components/about/Philanthropy.tsx +++ b/src/components/about/Philanthropy.tsx @@ -4,7 +4,7 @@ import Image from "@/public/about/heart.svg"; const Philanthropy = () => { return ( <div className="relative grid grid-cols-4 p-6"> - <div className="col-span-2 flex items-center rounded-3xl border-8 border-csa-gray-200 p-2"> + <div className="col-span-2 flex items-center rounded-3xl border-8 border-csa-green-100 bg-white p-2"> <p className="font-lora p-4 text-left text-5xl font-bold text-csa-gray-200"> Philanthropy </p> From 76518b553c530217f0f8d6a90c9e9e6019404edb Mon Sep 17 00:00:00 2001 From: Sookie Drabla <sookie.sd@@gmail.com> Date: Mon, 20 Jan 2025 22:47:03 -0800 Subject: [PATCH 4/9] add requested changes --- src/components/about/Philanthropy.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/about/Philanthropy.tsx b/src/components/about/Philanthropy.tsx index a57bbd3..6f73360 100644 --- a/src/components/about/Philanthropy.tsx +++ b/src/components/about/Philanthropy.tsx @@ -1,18 +1,19 @@ import React from "react"; -import Image from "@/public/about/heart.svg"; +import Image from "next/image"; +import HeartImage from "@/public/about/heart.svg"; const Philanthropy = () => { return ( - <div className="relative grid grid-cols-4 p-6"> - <div className="col-span-2 flex items-center rounded-3xl border-8 border-csa-green-100 bg-white p-2"> - <p className="font-lora p-4 text-left text-5xl font-bold text-csa-gray-200"> + <div className="flex m-6"> + <div className="relative h-[12vh] w-[25vw] border-8 border-csa-green-100 rounded-3xl flex items-center"> + <p className="font-lora p-4 text-5xl font-bold text-csa-gray-200"> Philanthropy </p> <div - className="absolute left-1/2" - style={{ transform: "translateY(5%) translateX(-50%)" }} + className="absolute right" + style={{ transform: "translateY(5%) translateX(110%)" }} > - <img src={Image.src} alt="heart" className="h-3/4 w-3/4" /> + <Image src={HeartImage} alt="heartImage" className="h-3/4 w-3/4" /> </div> </div> </div> From 316bf36c95b10c8be04e457504a084e9a43e939c Mon Sep 17 00:00:00 2001 From: Sookie Drabla <sookie.sd@@gmail.com> Date: Mon, 20 Jan 2025 22:47:51 -0800 Subject: [PATCH 5/9] run format --- src/components/about/Philanthropy.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/about/Philanthropy.tsx b/src/components/about/Philanthropy.tsx index 6f73360..728d027 100644 --- a/src/components/about/Philanthropy.tsx +++ b/src/components/about/Philanthropy.tsx @@ -4,13 +4,13 @@ import HeartImage from "@/public/about/heart.svg"; const Philanthropy = () => { return ( - <div className="flex m-6"> - <div className="relative h-[12vh] w-[25vw] border-8 border-csa-green-100 rounded-3xl flex items-center"> + <div className="m-6 flex"> + <div className="relative flex h-[12vh] w-[25vw] items-center rounded-3xl border-8 border-csa-green-100"> <p className="font-lora p-4 text-5xl font-bold text-csa-gray-200"> Philanthropy </p> <div - className="absolute right" + className="right absolute" style={{ transform: "translateY(5%) translateX(110%)" }} > <Image src={HeartImage} alt="heartImage" className="h-3/4 w-3/4" /> From 748da5d9b64366a333d556cd601dbe4332362c54 Mon Sep 17 00:00:00 2001 From: Sookie Drabla <sookie.sd@@gmail.com> Date: Tue, 21 Jan 2025 15:31:49 -0800 Subject: [PATCH 6/9] cleanup --- src/components/about/Philanthropy.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/about/Philanthropy.tsx b/src/components/about/Philanthropy.tsx index 728d027..38bd383 100644 --- a/src/components/about/Philanthropy.tsx +++ b/src/components/about/Philanthropy.tsx @@ -9,12 +9,7 @@ const Philanthropy = () => { <p className="font-lora p-4 text-5xl font-bold text-csa-gray-200"> Philanthropy </p> - <div - className="right absolute" - style={{ transform: "translateY(5%) translateX(110%)" }} - > - <Image src={HeartImage} alt="heartImage" className="h-3/4 w-3/4" /> - </div> + <Image src={HeartImage} alt="heartImage" className="w-7/12 absolute right-[-40%] top-[-90%]" /> </div> </div> ); From 63bc21958bda0fd94d41bbb3e0382cdc1fdafa90 Mon Sep 17 00:00:00 2001 From: Sookie Drabla <sookie.sd@@gmail.com> Date: Tue, 21 Jan 2025 15:32:33 -0800 Subject: [PATCH 7/9] run format --- src/components/about/Philanthropy.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/about/Philanthropy.tsx b/src/components/about/Philanthropy.tsx index 38bd383..dae1f0d 100644 --- a/src/components/about/Philanthropy.tsx +++ b/src/components/about/Philanthropy.tsx @@ -9,7 +9,11 @@ const Philanthropy = () => { <p className="font-lora p-4 text-5xl font-bold text-csa-gray-200"> Philanthropy </p> - <Image src={HeartImage} alt="heartImage" className="w-7/12 absolute right-[-40%] top-[-90%]" /> + <Image + src={HeartImage} + alt="heartImage" + className="absolute right-[-40%] top-[-90%] w-7/12" + /> </div> </div> ); From 8be79c1861e8e2b77f29fce47fe6120a21817f74 Mon Sep 17 00:00:00 2001 From: Sookie Drabla <sookie.sd@@gmail.com> Date: Tue, 21 Jan 2025 15:38:24 -0800 Subject: [PATCH 8/9] change txt size --- src/components/about/Philanthropy.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/about/Philanthropy.tsx b/src/components/about/Philanthropy.tsx index dae1f0d..35668f3 100644 --- a/src/components/about/Philanthropy.tsx +++ b/src/components/about/Philanthropy.tsx @@ -6,7 +6,7 @@ const Philanthropy = () => { return ( <div className="m-6 flex"> <div className="relative flex h-[12vh] w-[25vw] items-center rounded-3xl border-8 border-csa-green-100"> - <p className="font-lora p-4 text-5xl font-bold text-csa-gray-200"> + <p className="font-lora p-4 text-3xl font-bold text-csa-gray-200"> Philanthropy </p> <Image From e50053654d6cbf4b9f8b0ccd319fe7baf8df6887 Mon Sep 17 00:00:00 2001 From: Stanley Lew <stanley43595@gmail.com> Date: Tue, 21 Jan 2025 15:50:10 -0800 Subject: [PATCH 9/9] Fix navbar so ignore --- src/components/NavBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index e8697bf..9ebfb90 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -16,7 +16,7 @@ const Navigation = () => { }; return ( - <div className="fixed top-0 flex w-full items-center justify-between border-b-8 border-csa-yellow-100 bg-csa-red-200"> + <div className="top-0 flex w-full items-center justify-between border-b-8 border-csa-yellow-100 bg-csa-red-200"> <Link onClick={() => { setClicked("Home");