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 fae1343..dc11eed 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -2,6 +2,7 @@ import WhoWeAre from "@/components/about/WhoWeAre"; import Heading from "@/components/about/FourPillTitle"; import Title from "@/components/Title"; import RightLantern from "@/components/about/RightLantern"; +import Philanthropy from "@/components/about/Philanthropy"; const page = () => { return ( @@ -10,6 +11,7 @@ const page = () => { <RightLantern /> + <Philanthropy /> </div> ); }; 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"); diff --git a/src/components/about/Philanthropy.tsx b/src/components/about/Philanthropy.tsx new file mode 100644 index 0000000..35668f3 --- /dev/null +++ b/src/components/about/Philanthropy.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import Image from "next/image"; +import HeartImage from "@/public/about/heart.svg"; + +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-3xl font-bold text-csa-gray-200"> + Philanthropy + </p> + <Image + src={HeartImage} + alt="heartImage" + className="absolute right-[-40%] top-[-90%] w-7/12" + /> + </div> + </div> + ); +}; + +export default Philanthropy;