From cfbd03f37e394279b2029eb1be8f09eba28d895b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrei=20Meli=C8=99?= Date: Wed, 30 Aug 2023 17:20:52 +0300 Subject: [PATCH] News & events updates (#1) * feat: design changes * chore: clean code * fix: update readme * feat: design changes * fix: clean code * chore: add links for production/develop version, fix steps typo * chore: add .prettierrc config, to use singlequotes in .js and .jsx files, applied formatting for all the files * feat: add news slide * feat: change news obj key name * feat: add content * fix: change news slide bg color * feat: add feature to partially see next carousel items * chore: add readme steps on how to add news items * feat: add new news items, fix design * feat: add new news item, fix design --------- Co-authored-by: hazigabriel --- .prettierrc | 8 + README.md | 80 ++++++--- src/Homepage.jsx | 4 + src/assets/css/Homepage.css | 6 +- src/assets/css/fontSizes.js | 7 +- src/overlays/PortraitOverlay.jsx | 33 ++-- src/overlays/VideoOverlay.jsx | 26 +-- src/slides/CampaignVideo/CampaignVideo.jsx | 42 ++--- src/slides/Events/Events.jsx | 159 +++++++++++------- src/slides/Events/eventsData.js | 33 ++++ src/slides/Healverse/Healverse.jsx | 38 ++--- src/slides/HerlandCTA/HerlandCTA.jsx | 4 +- src/slides/HerlandStories/HerlandStories.jsx | 17 +- src/slides/Landing/LandingPanel.jsx | 1 + src/slides/News/News.jsx | 113 +++++++++++++ src/slides/News/newsData.js | 41 +++++ .../PhotoExhibition/PhotoExhibition.jsx | 92 +++++----- src/slides/PhotoExhibition/importPortraits.js | 1 - src/slides/Plegdes/pledgeData.js | 56 +++--- .../VideoExhibition/VideoExhibition.jsx | 8 +- .../VirtualExhibition/VirtualExhibition.jsx | 28 +-- src/static/events/event-card-1.png | Bin 0 -> 97744 bytes src/static/events/event-card-2.png | Bin 0 -> 394241 bytes src/static/events/event-card-3.png | Bin 0 -> 311319 bytes src/static/events/event-card-4.jpg | Bin 0 -> 125676 bytes src/static/icons/CarouselLeftArrow.jsx | 35 ++++ src/static/icons/CarouselRightArrow.jsx | 34 ++++ src/static/news/Inna_with_daughter.jpg.webp | Bin 0 -> 16772 bytes src/static/news/Suhucam-Cameroon.jpg.webp | Bin 0 -> 37020 bytes src/static/news/UN_HQ_NY_2.jpg.webp | Bin 0 -> 34586 bytes src/static/news/Unccd_Tschad.jpg.webp | Bin 0 -> 18302 bytes src/static/news/Uzbekisan_marathon_2.jpg.webp | Bin 0 -> 55606 bytes 32 files changed, 612 insertions(+), 254 deletions(-) create mode 100644 .prettierrc create mode 100644 src/slides/Events/eventsData.js create mode 100644 src/slides/News/News.jsx create mode 100644 src/slides/News/newsData.js create mode 100644 src/static/events/event-card-1.png create mode 100644 src/static/events/event-card-2.png create mode 100644 src/static/events/event-card-3.png create mode 100644 src/static/events/event-card-4.jpg create mode 100644 src/static/icons/CarouselLeftArrow.jsx create mode 100644 src/static/icons/CarouselRightArrow.jsx create mode 100644 src/static/news/Inna_with_daughter.jpg.webp create mode 100644 src/static/news/Suhucam-Cameroon.jpg.webp create mode 100644 src/static/news/UN_HQ_NY_2.jpg.webp create mode 100644 src/static/news/Unccd_Tschad.jpg.webp create mode 100644 src/static/news/Uzbekisan_marathon_2.jpg.webp diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..0e7f30a --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "trailingComma": "es5", + "semi": true, + "tabWidth": 2, + "singleQuote": true, + "jsxSingleQuote": true +} + diff --git a/README.md b/README.md index 6b73531..54290e3 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,12 @@ Welcome to the **Herland** project, a React application built using Vite and Taiwind CSS. This documentation provides step-by-step instructions for various scenarios you might encounter during your work on the project. + +You can access the live version of the project via the following links: + +- **Main Branch (Production):** [herland.global](https://herland.global/) +- **Develop Branch (Staging):** [staging-herland](https://staging-herland.netlify.app/) + ## Table of Contents 1. Prerequisites 2. Getting Started @@ -52,7 +58,7 @@ To add a new slide to the website, follow these steps: 1. Create a new folder in the `src/slides` directory with the name of your component, e.g., *DemoComponent*. -2. Inside the folder, create a React component file (e.g., *TestComponent.jsx*). +2. Inside the folder, create a React component file (e.g., *DemoComponent.jsx*). 3. Structure the component: @@ -69,7 +75,7 @@ export default DemoComponent; ``` 4. Import your component in src/Homepage.jsx: ```jsx -import TestComponent from './slides/TestComponent'; +import DemoComponent from './slides/DemoComponent'; ... return ( ... @@ -84,35 +90,69 @@ return ( ***Note***: If a panel's height exceeds `100vh` the scroll mode would switch to regular scroll, in order for the scroll effect to function each slide must be max 100vh. -## Adding a New Pledge Card +## Adding a new Image to the Carousel +To add a new image to the carousel, follow these steps: + +1. Add a small resolution image to `src/static/small-portraits`, to be displayed as preview in the carousel. + +2. Add the corresponding full resolution image to `src/static/portraits` with the same exact name. + + +## Adding a new Event -To add a new Pledge Card for the Pledges slide, follow these steps: +To add a new Event Card for the Events carousel, follow these steps: -1. Open `src/Pledges/pledgeData.jsx`. +1. Open `src/slides/Events/eventsData.js`. -2. Locate the pledgeData array and add a new object: +2. Add a new image for the Event Card in `src/static/events` and import it in `eventsData.js` + +```js +import event1Img from "../../static/events/event-card-1.png"; +import event2Img from "../../static/events/event-card-2.png"; +... +import yourEventImage from "../../static/events/yourEventImage.png" + +``` +3. Locate the `events` array and add a new object: ```jsx - const pledgeData = [ + const events = [ ... - { - author: "Author name", - authorOccupation: "Author occupation", - paragraphs: [ - "Paragraphs of text", - "Separated by vertical space", - ], - } + { + imageSrc: yourEventImage, + href: "event href", + title: "Event title", + subtitle: "Event subtitle, can be used for location and dates", + }, ... ] ``` -3. Customize the fields with the appropriate information. +4. Customize the fields with the appropriate information. +## Adding a new News Item -## Adding a New Image to the Carousel -To add a new image to the carousel, follow these steps: +To add a new News Item for the News carousel, follow these steps: -1. Add a small resolution image to `src/static/small-portraits`, to be displayed as preview in the carousel. +1. Open `src/slides/News/newsData.js`. -2. Add the corresponding full resolution image to `src/static/portraits` with the same name. +2. Add a new image for the News Item in `src/static/news` and import it in `newsData.js` + +```js +import yourNewsImage from "../../static/news/yourNewsImage.png" + +``` +3. Locate the `events` array and add a new object: +```jsx + const news = [ + ... + { + imageSrc: yourNewsImage, + href: "news href", + title: "News title", + subtitle: "News subtitle, can be used for the date", + }, + ... +] +``` +4. Customize the fields with the appropriate information. diff --git a/src/Homepage.jsx b/src/Homepage.jsx index 4ae1431..144e6aa 100644 --- a/src/Homepage.jsx +++ b/src/Homepage.jsx @@ -14,6 +14,7 @@ import Healverse from './slides/Healverse/Healverse'; import Footer from './slides/Footer/Footer'; import HerlandCTA from './slides/HerlandCTA/HerlandCTA'; import Pledges from './slides/Plegdes/Pledges'; +import News from './slides/News/News'; function Homepage() { const [isPortraitOverlayActive, setIsPortraitOverlayActive] = useState(false); @@ -167,6 +168,9 @@ function Homepage() {
+
+ +