good progress on the video section

.firebase/hosting.YnVpbGQ.cache

@@ -1,20 +1,21 @@
-asset-manifest.json,1599414594462,bed79950607a7d7824a7184f5fabd9389e60a1e4127ad743c86b4869cc8d1b02
+asset-manifest.json,1599416798116,3644e9cdc1f4f6ea1aebafb601d626ed6b4502c914be9b9fc42158f61d859a68
-favicon.ico,1599414588545,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3
+precache-manifest.b15b375b262fbaaeb56751e4759c81b9.js,1599416798114,ccfe358f6c0b7b1d1a4563b5fca7871ee87a8c2b9faae4ff8c037882475ee4e3
-index.html,1599414594462,d354bddf305dfb4996f274b74c0e1fa88e5f6a0c0b5f59bed0a74bd1e0d0a929
+index.html,1599416798114,f2d0470c9f8e0a4e7f8ad32d3e1a8d80ae914726d3ddd23269bcb6e0032c3199
-manifest.json,1599414588549,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
+robots.txt,1599416789860,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-precache-manifest.84e8a07edeceaf9f94fb9f02fdac09ef.js,1599414594462,d93ed9e5485b554357e0cf8eced31d13f5a12ab83cee3175a823f573c018a225
+favicon.ico,1599416789855,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3
-robots.txt,1599414588549,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+service-worker.js,1599416798114,bb8b40b8d4ce0e8b9daa1569fc7ee9a6dced014a2a0de9ae79442d5d92b29405
-logo192.png,1599414588547,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
+logo192.png,1599416789856,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
-service-worker.js,1599414594462,9c3e09bf5049ef341ba11cb0542e3a2c1d52906991fa97bfde582c277b138fe0
+manifest.json,1599416789859,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
-static/js/2.2b242bd2.chunk.js.LICENSE.txt,1599414594464,a3e8b1ff4d8b8e727a88d96ba484b3cc1f4b6645be9f62f8445f35cb50e920cd
+logo512.png,1599416789857,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
-logo512.png,1599414588548,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
+static/js/2.0c4f093c.chunk.js.LICENSE.txt,1599416798117,a3e8b1ff4d8b8e727a88d96ba484b3cc1f4b6645be9f62f8445f35cb50e920cd
-static/css/main.9367d51f.chunk.css,1599414594464,64dab1897d3ef3e094ec64100fdf5b103aeeab688cbcd5eae6c93acde862477b
+static/css/main.7db4c47d.chunk.css,1599416798116,49fef501735bc8d6e919d66cdb27f9c0fdd9ffca8c4938d9260b483649676d65
-static/js/main.a5b91c04.chunk.js,1599414594465,9c9f6576a382928a68bd59435dd6aa9c2007cb23c0a5bd9dbf1a3c19799fa2b3
+static/js/runtime-main.fa53fba5.js,1599416798116,b9289f9a9022bc228976645ecd66e888587d9f995a502b741e475361470248f9
-static/css/main.9367d51f.chunk.css.map,1599414594465,b5dd03e8b289bf39e040c068d4bc6b1b15ef3e583cdb153eafdbb78011f819ad
+static/js/main.4d5d3f4e.chunk.js,1599416798116,66a3f165ce65248a372d8fad3ff3f42d38ebf26093967780cba0d32c8e1ab409
-static/js/runtime-main.fa53fba5.js,1599414594464,b9289f9a9022bc228976645ecd66e888587d9f995a502b741e475361470248f9
+static/js/runtime-main.fa53fba5.js.map,1599416798117,e98d47efe293730d8b3fdf7596cd1083175dffaeb1d5e4c3e07b2a92a5ecb5d8
-static/js/runtime-main.fa53fba5.js.map,1599414594464,e98d47efe293730d8b3fdf7596cd1083175dffaeb1d5e4c3e07b2a92a5ecb5d8
+static/css/main.7db4c47d.chunk.css.map,1599416798116,37ecdb96aa5a658d0e5b33544abdf5921ff5201f4910c47f74ea8fa0ef4fff38
-static/js/main.a5b91c04.chunk.js.map,1599414594465,4d1363aa543224fd3d3a9b2fe4cc72a243966f67f3f477b3149bdd1a965e65bc
+static/js/main.4d5d3f4e.chunk.js.map,1599416798116,a211a205443dfc89cf997b5f0d203b873286795712c33d11cf6cf48982243db7
-static/js/2.2b242bd2.chunk.js,1599414594463,c6143a983ca92c75ec6731366c918e32adf59e7e0466ffc11f62252c1ecb39a6
+static/media/loader.60877ab0.gif,1599416798116,8dec9f2b7cad916a9f9d3a4f084ff0054d909144c0f2866d9c98626c4d920159
-static/media/host_bg_2x.8a86e3a6.png,1599414594465,1689bee07f1c51bd50315c71085a3c507c84c53f55f6e92bb63e16009cffa1e1
+static/js/2.0c4f093c.chunk.js,1599416798116,8d2420562a98510b838c4ceeb37aff37468c9b919590513ecec58a210093f7db
-static/js/2.2b242bd2.chunk.js.map,1599414594465,c971de723d8d665df7e22ae5d2ed7fc8779e25bd8a2072751d8f7dd3f49a165b
+static/media/host_bg_2x.8a86e3a6.png,1599416798115,1689bee07f1c51bd50315c71085a3c507c84c53f55f6e92bb63e16009cffa1e1
-static/media/rameelo_cover_photo.298525d7.png,1599414594463,584a99ed276e0ed86db78cca3f84462b4d2bba931a7cb7ff335265526dfedbbc
+static/js/2.0c4f093c.chunk.js.map,1599416798117,9e285dab2cc42d97529df24773de81c80a3c7fd81374ec517295752251f30142
+static/media/rameelo_cover_photo.298525d7.png,1599416798118,584a99ed276e0ed86db78cca3f84462b4d2bba931a7cb7ff335265526dfedbbc

package.json

@@ -10,6 +10,7 @@
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-player": "2.6.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "react-slick": "^0.27.10"

src/components/rameelo/landing/landing.js

@@ -6,6 +6,9 @@ import './landing.scss';
 // Slick
 import Slider from 'react-slick';
 
+// Video Player
+import ReactPlayer from 'react-player';
+
 // Loader component
 import Loader from '../../loader';
 
@@ -13,7 +16,7 @@ export default class Landing extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isLoading: true,
+      isLoading: false,
     };
   }
 
@@ -36,7 +39,7 @@ export default class Landing extends React.Component {
 }
 
 function LandingContent(props) {
-  var sliderSettings = {
+  var eventSliderSettings = {
     infinite: true,
     speed: 300,
     slidesToShow: 4,
@@ -59,6 +62,29 @@ function LandingContent(props) {
     ],
   };
 
+  var videoSliderSettings = {
+    infinite: true,
+    speed: 300,
+    slidesToShow: 3,
+    slidesToScroll: 1,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 1,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  };
+
   return (
     <div className={`rameelo-wrapper ${props.hide ? 'cf-hide' : ''}`}>
       <div className="top-section">
@@ -169,9 +195,9 @@ function LandingContent(props) {
 
       <div className="events-section">
         <div class="events-inner-container">
-          <span>Upcoming Events</span>
+          <span className="section-title">Upcoming Events</span>
           <div class="carousel-container">
-            <Slider {...sliderSettings}>
+            <Slider {...eventSliderSettings}>
               <div className="event-card">
                 <span className="event-card-graphic">
                   <span className="date-graphic">
@@ -267,6 +293,49 @@ function LandingContent(props) {
         </div>
       </div>
 
+      <div className="highlights-section">
+        <span className="section-title">Event Highlights</span>
+        <div className="main-video-container">
+          {/* Check out for further functionality of this package:
+          https://www.npmjs.com/package/react-player */}
+          <ReactPlayer
+            controls={true}
+            url="https://www.youtube.com/watch?v=gOPEpsGJyCs"
+          />
+        </div>
+        <div className="bottom-video-content">
+          <span className="join-card">
+            <span className="card-title">Join the Fun</span>
+            <span className="card-desc">
+              Interested in attending an event? Sign up now to purchase tickets!
+            </span>
+            <span className="card-action">Sign Up Now</span>
+          </span>
+          <span className="video-slider-container">
+            <Slider {...videoSliderSettings}>
+              <span className="video-slide">
+                <ReactPlayer
+                  controls={true}
+                  url="https://www.youtube.com/watch?v=gOPEpsGJyCs"
+                />
+              </span>
+              <span className="video-slide">
+                <ReactPlayer
+                  controls={true}
+                  url="https://www.youtube.com/watch?v=gOPEpsGJyCs"
+                />
+              </span>
+              <span className="video-slide">
+                <ReactPlayer
+                  controls={true}
+                  url="https://www.youtube.com/watch?v=gOPEpsGJyCs"
+                />
+              </span>
+            </Slider>
+          </span>
+        </div>
+      </div>
+
       <div className="host-section">
         <div className="overlapping-title">HOST</div>
         <div className="main-card">

src/components/rameelo/landing/landing.scss

@@ -1,5 +1,23 @@
 @import '../../../styles/index';
 
+// Slick Slider Styles
+.slick-list {
+  padding: 1em 0 !important;
+}
+
+button.slick-arrow::before {
+  color: $red !important;
+  // height: 40px !important;
+  // width: 40px !important;
+  box-shadow: 5px 5px 30px #0000001c;
+}
+
+/* the slides */
+.slick-slide {
+  padding: 0 20px;
+}
+
+// content
 .rameelo-wrapper {
   max-width: 1920px !important;
   margin: 0 auto;
@@ -197,27 +215,12 @@
   }
 
   .events-inner-container {
-    span {
+    span.section-title {
       font-size: 30px;
     }
 
     .carousel-container {
-      .slick-list {
+      padding-top: 2rem;
-        padding: 2em 0 !important;
-      }
-
-      button.slick-arrow::before {
-        color: $red !important;
-        // height: 40px !important;
-        // width: 40px !important;
-        box-shadow: 5px 5px 30px #0000001c;
-      }
-
-      /* the slides */
-      .slick-slide {
-        padding: 0 20px;
-      }
-
       ul {
         background: #f4f4f4 0% 0% no-repeat padding-box !important;
       }
@@ -249,8 +252,9 @@
             align-items: center;
             height: 35px;
             width: 35px;
+
             span {
-              font-size: 0.5em;
+              font-size: 0.8em;
             }
           }
         }
@@ -281,6 +285,100 @@
   }
 }
 
+.highlights-section {
+  padding: 2em;
+  background-color: $white;
+
+  @media only screen and (min-width: 992px) {
+    padding: 4em 7em;
+  }
+
+  .section-title {
+    text-align: left;
+    font: normal normal normal 38px/74px Bebas Neue;
+    letter-spacing: 0px;
+    color: #000000;
+  }
+
+  .main-video-container {
+    div {
+      width: auto !important;
+
+      @media only screen and (min-width: 320px) {
+        height: 200px !important;
+      }
+      @media only screen and (min-width: 481px) {
+        height: 400px !important;
+      }
+      @media only screen and (min-width: 769px) {
+        height: 600px !important;
+      }
+
+      @media only screen and (min-width: 1201px) {
+        height: 900px !important;
+      }
+    }
+  }
+
+  .bottom-video-content {
+    display: flex;
+    flex-direction: row;
+    padding: 1.5rem 0;
+
+    .join-card {
+      width: 391px;
+      height: 246px;
+      background-color: $red;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      padding: 2em;
+
+      box-shadow: 5px 6px 10px #0000005a;
+
+      .card-title {
+        text-align: left;
+        font: normal normal normal 38px/39px Bebas Neue;
+        letter-spacing: 0px;
+        color: #f4f4f4;
+        opacity: 1;
+        margin-bottom: 0.5em;
+      }
+
+      .card-desc {
+        text-align: left;
+        font: normal normal normal 18px/25px Inter;
+        letter-spacing: 0px;
+        color: #f4f4f4;
+        opacity: 1;
+      }
+
+      .card-action {
+        text-align: left;
+        font: normal normal 600 15px/19px Inter;
+        letter-spacing: 0.3px;
+        color: $gold;
+        opacity: 1;
+        justify-self: flex-end;
+        margin-top: 4em;
+        text-decoration: underline;
+      }
+    }
+
+    .video-slider-container {
+      padding: 0 1.5em;
+
+      .video-slide {
+        div {
+          width: 320px !important;
+          height: 220px !important;
+        }
+      }
+    }
+  }
+}
+
 .host-section {
   padding: 1em;
   background-color: $white;