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 <[email protected]>
unccd · Aug 30, 2023 · cfbd03f · cfbd03f
1 parent f214e47
commit cfbd03f
Show file tree

Hide file tree

Showing 32 changed files with 612 additions and 254 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": true
+}
+
diff --git 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
@@ -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() {
       <div className='panel'>
         <Events />
       </div>
+      <div className='panel'>
+        <News />
+      </div>
       <Footer />
       {isPortraitOverlayActive ? (
         <PortraitOverlay

diff --git a/src/assets/css/Homepage.css b/src/assets/css/Homepage.css
@@ -173,7 +173,11 @@ iframe {
   background: url('../../static/events/event-4.png') no-repeat left center;
   background-size: cover;
 }
-
+.news-slide {
+  background: url('../../static/images/campaign-toolkit.jpg') no-repeat left
+    center;
+  background-size: cover;
+}
 .copywright {
   padding: 3.5rem 5rem;
   min-height: unset;

diff --git a/src/assets/css/fontSizes.js b/src/assets/css/fontSizes.js
@@ -3,11 +3,12 @@ const textH2 =
 const textBodyRegular =
   'max-sm:text-base sm:text-base md:text-base lg:text-lg xl:text-2xl 2xl:text-2xl leading-5	font-light';
 const textBodyMedium =
-  'max-sm:text-sm sm:text-base md:text-base lg:text-sm xl:text-xl 2xl:text-xl leading-5	font-light';
+  'max-sm:text-sm sm:text-base md:text-base lg:text-base xl:text-xl 2xl:text-xl leading-5	font-light';
 const textBodyMediumBold = 'lg:text-xl md:text-lg font-medium';
 const textBodyLarge =
-  'max-sm:text-lg sm:text-lg md:text-lg lg:text-base xl:text-xl 2xl:text-2xl font-light';
-const textBodyLargeBold = 'text-2xl font-medium';
+  'max-sm:text-lg sm:text-lg md:text-lg lg:text-lg xl:text-xl 2xl:text-2xl font-light';
+const textBodyLargeBold =
+  'max-sm:text-lg sm:text-lg md:text-lg lg:text-base xl:text-xl 2xl:text-2xl font-regular';
 const landingHeader =
   'max-sm:text-7xl md:text-7xl xl:text-7xl 2xl:text-9xl sm:text-6xl font-bold mt-20 mb-10  landing-text';
 const landingHeaderDescription =

diff --git a/src/overlays/PortraitOverlay.jsx b/src/overlays/PortraitOverlay.jsx
@@ -1,35 +1,32 @@
 function PortraitOverlay(props) {
   const { portraitSrc, setIsOverlayActive } = props;
   const closeOverlay = (event) => {
-    if (!event.target.classList.contains("overlay-portrait-image")) {
+    if (!event.target.classList.contains('overlay-portrait-image')) {
       setIsOverlayActive(false);
     }
   };
-  const portrait = portraitSrc.replace(/\/small-/g, "/");
+  const portrait = portraitSrc.replace(/\/small-/g, '/');
 
   return (
     <section
-      className="flex items-center justify-center overlay bg-black/75 "
+      className='flex items-center justify-center overlay bg-black/75'
       onClick={closeOverlay}
     >
-      <div className="lg:m-10 sm:m-0 max-xs:m-0">
-        <div className="relative p-1 lg:m-8 md:m-5 sm:m-2 max-xs:m-1 bg-white shadow-lg ">
-          <img src={portrait} alt="Overlay" className="w-full h-auto" />
-          <button
-            className="absolute top-3 right-3"
-            onClick={closeOverlay}
-          >
+      <div className='lg:m-10 sm:m-0 max-xs:m-0'>
+        <div className='relative p-1 lg:m-8 md:m-5 sm:m-2 max-xs:m-1 bg-white shadow-lg'>
+          <img src={portrait} alt='Overlay' className='w-full h-auto' />
+          <button className='absolute top-3 right-3' onClick={closeOverlay}>
             <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="32"
-              height="32"
-              fill="currentColor"
-              className="bi bi-x"
-              viewBox="0 0 16 16"
+              xmlns='http://www.w3.org/2000/svg'
+              width='32'
+              height='32'
+              fill='currentColor'
+              className='bi bi-x'
+              viewBox='0 0 16 16'
             >
               <path
-                d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"
-                fill="#ffffff"
+                d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'
+                fill='#ffffff'
               />
             </svg>
           </button>

diff --git a/src/overlays/VideoOverlay.jsx b/src/overlays/VideoOverlay.jsx
@@ -6,33 +6,33 @@ function VideoOverlay(props) {
   };
   return (
     <section
-      className=" flex items-center justify-center overlay bg-black/90 "
+      className='flex items-center justify-center overlay bg-black/90'
       onClick={closeOverlay}
     >
       <div>
-        <div className="relative" style={{ width: "90vw", height: "90vh" }}>
+        <div className='relative' style={{ width: '90vw', height: '90vh' }}>
           <iframe
-            width="100%"
-            height="100%"
+            width='100%'
+            height='100%'
             src={`https://www.youtube.com/embed/${url}?rel=0&modestbranding=1`}
             allowFullScreen
             modestbranding={1}
           ></iframe>
           <button
-            className="absolute top-2 right-2 text-gray-500 hover:text-gray-800"
+            className='absolute top-2 right-2 text-gray-500 hover:text-gray-800'
             onClick={closeOverlay}
           >
             <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="32"
-              height="32"
-              fill="currentColor"
-              className="bi bi-x"
-              viewBox="0 0 16 16"
+              xmlns='http://www.w3.org/2000/svg'
+              width='32'
+              height='32'
+              fill='currentColor'
+              className='bi bi-x'
+              viewBox='0 0 16 16'
             >
               <path
-                d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"
-                fill="#ffffff"
+                d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'
+                fill='#ffffff'
               />
             </svg>
           </button>

diff --git a/src/slides/CampaignVideo/CampaignVideo.jsx b/src/slides/CampaignVideo/CampaignVideo.jsx
@@ -5,8 +5,6 @@ import mainCampaignCover from '../../static/images/landing-background.jpg';
 const loadVideo = (coverId, playerId) => {
   const player = document.getElementById(playerId);
   const cover = document.getElementById(coverId);
-  console.log({ cover });
-  console.log('panret element', cover.parentElement);
 
   cover.parentElement.style.display = 'none';
   player.style.display = 'block';
@@ -15,29 +13,31 @@ const loadVideo = (coverId, playerId) => {
 
 function CampaignVideo() {
   return (
-    <section className='campaign-video-bg full-height text-white panel-inner grid content-center	'>
-      <div className='grid grid-cols-12 gap-6 md:mt-10 sm:mt-10 lg:mt-0 max-sm:mt-10'>
+    <section className='campaign-video-bg full-height text-white panel-inner grid content-center'>
+      <div className='grid grid-cols-12 gap-6 md:mt-10 sm:mt-10 lg:mt-0 max-sm:my-10'>
         <div
-          className='max-sm:col-span-12 sm:col-span-12 xl:col-span-5 lg:col-span-4 flex panel-inner relative '
+          className='max-sm:col-span-12 sm:col-span-12 xl:col-span-5 lg:col-span-4 flex panel-inner relative'
           style={{ position: 'relative' }}
         >
           <div className='cover video-thumbnail-wrapper flex justify-center'>
-            <img
-              id='main-campaign-thumb'
-              src={mainCampaignCover}
-              onClick={(event) => {
-                event.preventDefault();
-                loadVideo('main-campaign-thumb', 'main-campaign-video');
-              }}
-            />
-            <img
-              src={PlayIcon}
-              onClick={(event) => {
-                event.preventDefault();
-                loadVideo('main-campaign-thumb', 'main-campaign-video');
-              }}
-              className='play-button'
-            />
+            <div className='grid items-center	 '>
+              <img
+                id='main-campaign-thumb'
+                src={mainCampaignCover}
+                onClick={(event) => {
+                  event.preventDefault();
+                  loadVideo('main-campaign-thumb', 'main-campaign-video');
+                }}
+              />
+              <img
+                src={PlayIcon}
+                onClick={(event) => {
+                  event.preventDefault();
+                  loadVideo('main-campaign-thumb', 'main-campaign-video');
+                }}
+                className='play-button'
+              />
+            </div>
           </div>
           <iframe
             id='main-campaign-video'