basics of the slider or carousel

src/components/rameelo/landing/landing.js

@@ -3,8 +3,45 @@ import React from 'react';
 // Styles
 import './landing.scss';
 
+// Slick
+import Slider from 'react-slick';
+
 export default class Landing extends React.Component {
   render() {
+    var sliderSettings = {
+      dots: true,
+      infinite: true,
+      speed: 300,
+      slidesToShow: 4,
+      slidesToScroll: 1,
+      centerMode: true,
+      responsive: [
+        {
+          breakpoint: 1024,
+          settings: {
+            slidesToShow: 3,
+            slidesToScroll: 3,
+            infinite: true,
+            dots: true,
+          },
+        },
+        {
+          breakpoint: 600,
+          settings: {
+            slidesToShow: 2,
+            slidesToScroll: 2,
+          },
+        },
+        {
+          breakpoint: 480,
+          settings: {
+            slidesToShow: 1,
+            slidesToScroll: 1,
+          },
+        },
+      ],
+    };
+
     return (
       <div className="rameelo-wrapper">
         <div className="top-section">
@@ -112,6 +149,35 @@ export default class Landing extends React.Component {
             </div>
           </div>
         </div>
+
+        <div className="events-section">
+          <div class="events-inner-container">
+            <span>Upcoming Events</span>
+            <div class="carousel-container">
+              <Slider {...sliderSettings}>
+                <div className="event-card">
+                  <span className="event-card-graphic"></span>
+                  <span className="event-card-info"></span>
+                </div>
+                <div className="event-card">
+                  <h3>2</h3>
+                </div>
+                <div className="event-card">
+                  <h3>3</h3>
+                </div>
+                <div className="event-card">
+                  <h3>4</h3>
+                </div>
+                <div className="event-card">
+                  <h3>5</h3>
+                </div>
+                <div className="event-card">
+                  <h3>6</h3>
+                </div>
+              </Slider>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

src/components/rameelo/landing/landing.scss

@@ -135,7 +135,7 @@
   margin: 0 !important;
 
   @media only screen and (min-width: 992px) {
-    padding: 4em 6em;
+    padding: 3em 6em;
   }
 
   .row {
@@ -186,3 +186,59 @@
     }
   }
 }
+
+.events-section {
+  background: #f4f4f4 0% 0% no-repeat padding-box;
+  padding: 3em 4em;
+
+  .events-inner-container {
+    span {
+      font-size: 30px;
+    }
+
+    .carousel-container {
+      margin: 1em 0;
+
+      .slick-arrow::before {
+        color: black !important;
+      }
+
+      /* the slides */
+      .slick-slide {
+        padding: 0 20px;
+      }
+
+      ul {
+        background: #f4f4f4 0% 0% no-repeat padding-box !important;
+      }
+
+      .event-card {
+        width: 367px;
+        height: 134px;
+        /* UI Properties */
+        background: #ffffff 0% 0% no-repeat padding-box;
+        box-shadow: 5px 5px 30px #0000001c;
+        opacity: 1;
+
+        padding: 1rem;
+
+        display: flex;
+        flex-direction: row;
+
+        .event-card-graphic {
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          justify-content: flex-start;
+        }
+
+        .event-card-info {
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          justify-content: space-between;
+        }
+      }
+    }
+  }
+}