Add Philanthropy component #46
Conversation
|
Also added background color in last commit |
| className="absolute left-1/2" | ||
| style={{ transform: "translateY(5%) translateX(-50%)" }} | ||
| > | ||
| <img src={Image.src} alt="heart" className="h-3/4 w-3/4" /> |
There was a problem hiding this comment.
| <img src={Image.src} alt="heart" className="h-3/4 w-3/4" /> | |
| <Image src={Image.src} alt="heart" className="h-3/4 w-3/4" /> |
Use image tag from next/image. you need to import it at the top like
Import Image from "next/Image" or something like this
| @@ -0,0 +1,22 @@ | |||
| import React from "react"; | |||
| import Image from "@/public/about/heart.svg"; | |||
There was a problem hiding this comment.
| import Image from "@/public/about/heart.svg"; | |
| import Image from "@/public/about/heart.svg"; |
Rename this to something better than Image like Heart or something
|
|
||
| const Philanthropy = () => { | ||
| return ( | ||
| <div className="relative grid grid-cols-4 p-6"> |
There was a problem hiding this comment.
grid is not needed here, try referencing the code here
<div className="flex justify-end">
<div className="relative h-[12vh] w-[25vw] border-8 border-csa-gray-100 rounded-3xl flex items-center">
......
</div>
</div>
you won't need justify-end since your component starts on the left side of the page but you'll need some margin left. and where the ... is you'll have to add the text and image.
|
|
| className="right absolute" | ||
| style={{ transform: "translateY(5%) translateX(110%)" }} | ||
| > | ||
| <Image src={HeartImage} alt="heartImage" className="h-3/4 w-3/4" /> |
There was a problem hiding this comment.
you can just absolutely position the image itself like below and then modify its location using right and top -- you don't need the outer div surrounding the image
<Image src={HeartImage} alt="heartImage" className="w-7/12 absolute right-[-40%] top-[-90%]" />
|
|
closes #31