redesign homepage desktop

src/components/theme/Header/HomepageSlider.jsx

@@ -112,6 +112,21 @@ class HomepageSlider extends Component {
     );
   };
 
+  createDescription(children) {
+    const items = children.map( (child) => (
+      <div className="slider-child">
+        <span>{child.text}</span> <br></br>
+        <a href={child.link} style={{ borderRadius: '20% / 100%' }} > {child.linkText}</a>
+      </div>
+
+    ));
+    return (
+      <div className="slider-text" >
+          {items}
+      </div>
+    );
+  };
+
   getSlides(items) {
     const slidesArr = items ? items : this.props.items;
 
@@ -122,7 +137,7 @@ class HomepageSlider extends Component {
             original: item.image,
             thumbnail: item.image,
             title: item.title,
-            description: item.description,
+            description: this.createDescription(item.children || [{text: "Monocultures harbour less biodiversity than mixed forests.", link:"google.com", linkText: "Learn more about forest management"}, {text: "Natural disturbances like droughts and pests and storms decrease forest health", link: "google.com", linkText:"Learn more about forest health and resilience."}])
           };
         })) ||
       [];
@@ -179,11 +194,15 @@ class HomepageSlider extends Component {
         </Slider> */}
         {/* <img className="slider-caret" src={SliderCaret} alt="" /> */}
         <ImageGallery
-          className="mainSlider"
+          //className="mainSlider"
           items={slides}
+          showThumbnails={false}
+          showNav={false}
+          showBullets ={true}
+          disableThumbnailScroll={false}
           showFullscreenButton={false}
           showPlayButton={false}
-          autoPlay
+          autoplay
           renderItem={this.renderSlide}
           renderThumbInner={this.renderThumbnail}
           slideDuration={300}

theme/addons/volto-addons/imagecards/carousel.overrides

@@ -65,6 +65,36 @@
   }
 }
 
+.slider-text {
+  display: flex;
+  justify-content: space-around;
+}
+
+.slider-child {
+  width: 345px;
+  span {
+    position: relative;
+    top: 30px;
+    font-weight: normal;
+  }
+
+  a {
+    font-weight: bold;
+    color: white;
+    border-style: solid;
+    border-color: white;
+    position:relative;
+    top: 100px;
+    padding: 10px;
+    display: block;
+    height:80px;
+  }
+  a:hover {
+    border-color: #006b96;
+  }
+
+}
+
 .slide-overlay {
   position: absolute;
   top: 0;
@@ -185,10 +215,10 @@
     .slide-body {
       position: absolute;
       // bottom     : 40%;
-      bottom: 30%;
+      top: 20%;
+      text-align: center;
+      width: 100%;
       left: unset;
-      max-width: 600px;
-      margin-left: 4rem;
       color: white;
 
       @media (max-width: 700px) {
@@ -212,6 +242,7 @@
       }
 
       .slide-description {
+        max-width: 100% !important;
         font-size: 1.2rem;
         font-weight: 200;
         line-height: 1.2;

theme/site/globals/site.overrides

@@ -1305,10 +1305,10 @@ h5 {
 
     .slide-body {
       position: absolute;
-      bottom: 30%;
+      top: 20%;
+      text-align: center;
       left: unset;
-      max-width: 600px;
-      margin-left: 4rem;
+      width: 100%;
       color: #fff;
 
       @media (max-width: 700px) {
@@ -3220,7 +3220,7 @@ body.mosaic-view .content-area main {
     position: absolute;
     bottom: 35%;
     left: 19em;
-    max-width: 600px;
+    width: 100%;
     color: white;
     text-align: left;
 
@@ -3250,7 +3250,6 @@ body.mosaic-view .content-area main {
     }
 
     .slide-description {
-      max-width: 540px;
       font-size: 24px;
       font-weight: 200;
       line-height: 1.2;