[Website revamp][11179 - 11180 - 11183] Implemented Quotes component, Header and Navbar

build.gradle

@@ -82,6 +82,9 @@ rat {
     "website/www/site/themes",
     "website/www/yarn.lock",
     "website/www/package.json",
+    "website/www/site/static/js/hero/lottie-light.min.js",
+    "website/www/site/static/js/keen-slider.min.js",
+    "website/www/site/assets/scss/_keen-slider.scss",
 
     // Ignore ownership files
     "ownership/**/*",

website/www/site/assets/scss/_calendar.scss

@@ -209,7 +209,7 @@
         min-height: 456px;
 
         .calendar-card-small {
-          max-width: 327px;
+          width: 327px;
           height: 216px;
           padding: 24px 20px;
 

website/www/site/assets/scss/_global.sass

@@ -26,7 +26,6 @@ body
 .body
   background: #fff
   margin: 0 auto
-  padding-top: 130px
 
   &:not(.body--index)
     .body__contained
@@ -67,4 +66,8 @@ body
 
 .container-main-content
   padding: 0 20px
-  position: relative
+  position: relative
+  margin-top: 85px
+
+  @media (min-width: $tablet) 
+    margin-top: 0

website/www/site/assets/scss/_graphic.sass

@@ -16,6 +16,8 @@
  */
 
 .graphic
+  padding: $pad-l $pad
+
   .graphic__image
     text-align: center
     line-height: 0

website/www/site/assets/scss/_hero-mobile.scss

@@ -0,0 +1,62 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+@import "media";
+
+.hero-mobile {
+  position: relative;
+  margin-bottom: 0;
+  display: none;
+
+  .hero-content {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    width: 100%;
+    max-width: 506px;
+
+    h3 {
+      @extend .hero-title;
+
+      text-transform: uppercase;
+      margin: 0 auto 16px auto;
+    }
+
+    h1 {
+      @extend .hero-heading;
+
+      width: 300px;
+      margin: 0 auto 24px auto;
+    }
+
+    h2 {
+      @extend .hero-subheading;
+
+      width: 300px;
+      margin: 0 auto;
+    }
+  }
+}
+
+@media (max-width: $mobile) {
+  .hero-mobile {
+    display: inherit;
+  }
+}