-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5564632
commit 5c04cde
Showing
10 changed files
with
174 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,142 @@ | ||
| import React from 'react' | ||
| import React from "react"; | ||
| import ArrowRight from "../../static/icons/arrow-right.svg"; | ||
| import Carousel from "react-multi-carousel"; | ||
|
|
||
| import "react-multi-carousel/lib/styles.css"; | ||
| function Pledge(props) { | ||
| const { author, authorOccupation, paragraphs } = props; | ||
| return ( | ||
| <div className="pledge-card bg-violet-800 text-white grid content-between sm:p-4 md:p-8 max-sm:p-4 m-2"> | ||
| <div> | ||
| {paragraphs.map((paragraph, index) => ( | ||
| <p key={index} className="max-sm:text-sm md:text-sm mb-2">{paragraph}</p> | ||
| ))} | ||
| </div> | ||
| <div className="text-right"> | ||
| <h3 className="sm:text-xl md:text-lg max-sm:text-xl">{author}</h3> | ||
| <h4 className="sm:text-base md:text-base font-light">{authorOccupation}</h4> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| function Pledges() { | ||
| const carouselResponsive = { | ||
| desktop: { | ||
| breakpoint: { | ||
| max: 3000, | ||
| min: 1024, | ||
| }, | ||
| items: 3, | ||
| partialVisibilityGutter: 40, | ||
| }, | ||
| mobile: { | ||
| breakpoint: { | ||
| max: 768, | ||
| min: 0, | ||
| }, | ||
| items: 1, | ||
| partialVisibilityGutter: 30, | ||
| }, | ||
| tablet: { | ||
| breakpoint: { | ||
| max: 1024, | ||
| min: 768, | ||
| }, | ||
| items: 2, | ||
| partialVisibilityGutter: 30, | ||
| }, | ||
| }; | ||
| const pledgesArr = [ | ||
| { | ||
| author: "António Guterres", | ||
| authorOccupation: "United Nations Secretary General", | ||
| paragraphs: [ | ||
| "We depend on land for our survival. Yet, we treat it like dirt.", | ||
| ], | ||
| }, | ||
| { | ||
| author: "Ibrahim Thiaw", | ||
| authorOccupation: "UNCCD Executive Secretary", | ||
| paragraphs: [ | ||
| "Investing in women's equal access to land is not just an act of justice.", | ||
| "It is an investment in our future, a commitment to the prosperity of our planet. It is an affirmation that we value not only the land beneath our feet, but the hands that work on it.", | ||
| ], | ||
| }, | ||
| { | ||
| author: "Hindou Oumarou Ibrahim", | ||
| authorOccupation: "Indigenous leader from Chad", | ||
| paragraphs: [ | ||
| "Despite our innovation, despite the determination of the women of my community to preserve ecosystems to block the desert, despite our collective efforts to save and share water, our land is dying.", | ||
| "Stop pledging and start putting cash on the table to help us win the most important battle of our life.", | ||
| ], | ||
| }, | ||
| { | ||
| author: "António Guterres", | ||
| authorOccupation: "United Nations Secretary General", | ||
| paragraphs: [ | ||
| "We depend on land for our survival. Yet, we treat it like dirt.", | ||
| ], | ||
| }, | ||
| { | ||
| author: "Ibrahim Thiaw", | ||
| authorOccupation: "UNCCD Executive Secretary", | ||
| paragraphs: [ | ||
| "Investing in women's equal access to land is not just an act of justice.", | ||
| "It is an investment in our future, a commitment to the prosperity of our planet. It is an affirmation that we value not only the land beneath our feet, but the hands that work on it.", | ||
| ], | ||
| }, | ||
| { | ||
| author: "Hindou Oumarou Ibrahim", | ||
| authorOccupation: "Indigenous leader from Chad", | ||
| paragraphs: [ | ||
| "Despite our innovation, despite the determination of the women of my community to preserve ecosystems to block the desert, despite our collective efforts to save and share water, our land is dying.", | ||
| "Stop pledging and start putting cash on the table to help us win the most important battle of our life.", | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <section className='panel-inner bg-amber-500'>Pledges</section> | ||
| ) | ||
| <section className="panel-inner grid grid-cols-12 items-center bg-white"> | ||
| <div className="col-span-12 grid grid-cols-12 gap-4 mt-10 max-sm:mt-12 mb-32 max-sm:mb-50"> | ||
| <div className="col-span-12"> | ||
| <h2 className="max-sm:text-xl sm:text-2xl md:text-2xl lg:text-3xl xl:text-4xl lg:my-16 md:mt-32"> | ||
| Global leaders call to action on women’s land rights{" "} | ||
| </h2> | ||
| <p className="font-light mt-6 max-sm:text-base sm:text-xl"> | ||
| United Nations General Assembly event to mark Desertification and | ||
| Drought Day brings together leaders to advance gender equality and | ||
| land restoration goals.{" "} | ||
| </p> | ||
| <a href="" target="_blank"> | ||
| <div className="flex max-sm:gap-2 sm:gap-2 md:gap-5 mt-4 cursor-pointer text-violet-700"> | ||
| <img src={ArrowRight} className="icon scale-150" /> | ||
| <p className="font-bold m-0">Access the portal</p> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div className="col-span-12"> | ||
| <Carousel | ||
| arrows | ||
| draggable | ||
| infinite | ||
| keyBoardControl | ||
| responsive={carouselResponsive} | ||
| slidesToSlide={1} | ||
| swipeable | ||
| > | ||
| {pledgesArr.map((pledge, index) => ( | ||
| <Pledge | ||
| key={index} | ||
| author={pledge.author} | ||
| authorOccupation={pledge.authorOccupation} | ||
| paragraphs={pledge.paragraphs} | ||
| /> | ||
| ))} | ||
| </Carousel> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } | ||
|
|
||
| export default Pledges | ||
| export default Pledges; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters