Merge branch 'main' into rebrand-sugcon-eu

Sitecore · Oct 6, 2023 · 3c65a03 · 3c65a03
2 parents d1e1a3d + b309245
commit 3c65a03
Show file tree

Hide file tree

Showing 10 changed files with 306 additions and 284 deletions.
diff --git a/src/Project/Sugcon/SugconAnzSxa/src/Layout.tsx b/src/Project/Sugcon/SugconAnzSxa/src/Layout.tsx
@@ -83,7 +83,7 @@ const Layout = ({ layoutData }: LayoutProps): JSX.Element => {
         )}
       </Head>
 
-      {/* root placeholder for the app, which we add components to using route data */}
+      {/* Root placeholder for the app, which we add components to using route data */}
       <div className={mainClassPageEditing}>
         <header>
           <div id="header" className="container-fluid">

diff --git a/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss b/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss
@@ -49,8 +49,6 @@
 // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
 @import "bootstrap/scss/utilities/api";
 
-@import 'AvenirNext.scss';
-
 a[target='_blank']:after {
     content: '\1F5D7'
 }
@@ -80,11 +78,17 @@ header {
     background-color: white;
     display: grid;
     width: 100%;
+    img {
+        width: 250px;
+        margin: 15px;
+        @media (min-width: 576px)  {
+            width: 315px;        
+        }
+    }
     .navigation {
-        margin-top: 50px;
+        margin-top: 25px;        
     }
-    .richtext {
-        background-color: #666;
+    .richtext {        
         font-size: 0.8em;
         a {
             text-decoration: none;
@@ -105,21 +109,22 @@ footer {
     color: white;
     display: grid;
     width: 100%;
+    margin-top: 25px;
     .component {
         padding: 20px;
         margin-top: 0px;
     }
 }
 p{
-    font-family: 'AvenirNextW05-Regular','Arial';
+    font-family: 'Mulish', 'AvenirNextW05-Regular', 'Arial';
     color: #707070;
       font-size: 18px;
   }
 h1 {
     margin-top: 0;
     color: #232323;
     font-weight: 900;
-    font-family: 'AvenirNextW05-Bold';
+    font-family: 'Mulish', 'AvenirNextW05-Bold';
     font-size: 48px;
     line-height: 50px;
 
@@ -130,13 +135,13 @@ h1 {
 h2{
     color: #232323;
     font-weight: 900;
-    font-family: 'AvenirNextW05-Bold';
+    font-family: 'Mulish', 'AvenirNextW05-Bold';
     font-size: 36px;
 }
 h3 {
     color: #232323;
     font-weight: 900;
-    font-family: 'AvenirNextW05-Bold',Arial, Helvetica, sans-serif;;
+    font-family: 'Mulish', 'AvenirNextW05-Bold', Arial, Helvetica, sans-serif;
     font-size: 24px;
   }
  .centered-block {
@@ -146,7 +151,7 @@ h3 {
  } 
 
 .background-dark-grey {
-    background-color: #666;
+    background-color: #707070;
  }
 
 .background-light-grey {

diff --git a/src/Project/Sugcon/SugconAnzSxa/src/assets/components/cta.scss b/src/Project/Sugcon/SugconAnzSxa/src/assets/components/cta.scss
@@ -1,51 +1,51 @@
 .cta {
-    position: relative;
-    padding-bottom: 20px;
-
-    .col-7 {
-        padding-top: 140px;
-        z-index: 5;
-    }
-
-    .red-color {
-        color: var(--bs-red);
-    }
-
-    .link-wrapper {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-    }
-
-    .link-arrow, .link-arrow a {
-        color: #000;
-        font-weight: 700;
-        font-size: 17px;
-        text-decoration: none;
-        letter-spacing: 0.5px;
-        line-height: 26px;
-    }
-
-    .ctaImage {
-        width: 100%;
-        object-fit: cover;
-    }
-
+  position: relative;
+  padding-bottom: 20px;
+
+  .col-7 {
+    padding-top: 140px;
+    z-index: 5;
+  }
+
+  .red-color {
+    color: var(--bs-red);
+  }
+
+  .link-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .link-arrow,
+  .link-arrow a {
+    color: #28327d;
+    font-weight: bold;
+    font-size: 17px;
+    text-decoration: underline;
+    letter-spacing: 0.5px;
+    line-height: 26px;
+  }
+
+  .ctaImage {
+    width: 100%;
+    object-fit: cover;
+  }
 }
 
 .ctaText {
-    background-color: greenyellow;
-    padding: 50px 50px 66px;
-
-    &::after {
-        display: block;
-        content: " ";
-        width: 175px;
-        height: 175px;
-        position: absolute;
-        top: -15px;
-        left: -15px;
-        border-top: 15px solid #fe2911;
-        border-left: 15px solid #fe2911;
-    }
-}
+  background-color: greenyellow;
+  padding: 50px 50px 66px;
+
+  &::after {
+    display: block;
+    content: ' ';
+    width: 175px;
+    height: 175px;
+    position: absolute;
+    top: -15px;
+    left: -15px;
+    border-top: 15px solid #fe2911;
+    border-left: 15px solid #fe2911;
+  }
+}
diff --git a/src/Project/Sugcon/SugconAnzSxa/src/assets/components/hero.scss b/src/Project/Sugcon/SugconAnzSxa/src/assets/components/hero.scss
@@ -1,122 +1,121 @@
 .thumbnail {
-    position: relative;
-    padding: 60px 20px;
+  position: relative;
+  padding: 60px 20px;
 }
 
 .caption {
+  color: black;
+  padding-left: 20px;
+  padding-right: 20px;
+  font-size: 40px;
+  background-color: white;
+  //opacity: 80%;
+
+  padding: 2rem;
+  background-color: rgba(255, 255, 255, 0.85);
+
+  @media (min-width: 1024px) {
+    position: absolute;
+    top: 30%;
+    left: 10%;
+    width: 30%;
+  }
+}
 
+@media (min-width: 1824px) {
+  .caption {
+    position: absolute;
+    //top: 20%;
+    //left: 30%;
+    width: 20%;
     color: black;
     padding-left: 20px;
     padding-right: 20px;
     font-size: 40px;
     background-color: white;
     //opacity: 80%;
-
     padding: 2rem;
     background-color: rgba(255, 255, 255, 0.85);
-
-    @media (min-width: 1024px) {
-        position: absolute;
-        top: 30%;
-        left: 10%;
-        width: 30%;
-    }
-}
-
-@media (min-width: 1824px) {
-    .caption {
-        position: absolute;
-        //top: 20%;
-        //left: 30%;
-        width: 20%;
-        color: black;
-        padding-left: 20px;
-        padding-right: 20px;
-        font-size: 40px;
-        background-color: white;
-        //opacity: 80%;    
-        padding: 2rem;
-        background-color: rgba(255, 255, 255, 0.85);
-    }
   }
+}
 
 .heroimage {
-    top: 0;
-    left: 0;
-    height: 100%;
-    position: absolute;
-    object-fit: cover;
+  top: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  object-fit: cover;
 
-    @media (min-width: 1024px) {
+  @media (min-width: 1024px) {
     width: 3000px;
     height: 650px;
-        position: relative;
-    }
+    position: relative;
+  }
 }
 
 .hero-label {
-    font-weight: 900;
-    font-size: 14px;
-    color: #666;
-    letter-spacing: 2.8px;
-    text-transform: uppercase;
-    font-family: "AvenirNextW05-Regular", "Arial";
+  font-weight: 900;
+  font-size: 14px;
+  color: #666;
+  letter-spacing: 2.8px;
+  text-transform: uppercase;
+  font-family: 'Mulish', 'AvenirNextW05-Regular', 'Arial';
 }
 
 .hero h1 {
-    font-size: 60px;
-    font-weight: 900;
-    line-height: 60px;
-    margin-bottom: 20px;
-    position: relative;
+  font-size: 60px;
+  font-weight: 900;
+  line-height: 60px;
+  margin-bottom: 20px;
+  position: relative;
 }
 
 .hero-backdrop {
-    z-index: 1;
-    position: relative;
-    width: 100%;
-    padding: 2rem;
-    background-color: rgba(255, 255, 255, 0.85);
-
-    @media (min-width: 1024px) {
-        width: 60%;
-        position: absolute;
-    }
+  z-index: 1;
+  position: relative;
+  width: 100%;
+  padding: 2rem;
+  background-color: rgba(255, 255, 255, 0.85);
+
+  @media (min-width: 1024px) {
+    width: 60%;
+    position: absolute;
+  }
 }
 
 .hero-text {
-    p {
-        color: #000;
-    }
+  p {
+    color: #000;
+  }
 }
 
-.link-button  {
-    display: inline-block;
-    font-weight: 400;
-    text-decoration: none;
-    transition: 0.3s all;
-    font-size: 17px;
-    letter-spacing: 0.5px;
-    cursor: pointer;
-    min-width: 229px;
-    text-align: center;
-    padding: 16px 30px 17px;
+.link-button {
+  display: inline-block;
+  font-weight: bold;
+  text-decoration: none;
+  transition: 0.3s all;
+  font-size: 17px;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  min-width: 229px;
+  text-align: center;
+  padding: 16px 30px 17px;
 }
 
-.link-button.primary, .link-button.primary a {
-    border: 1px solid #AB0000;
-    background-color: #AB0000;
-    color: #fff;
-    opacity: 1;
-    transition: opacity 0.5s;
-    text-decoration: none;
-
-    &:hover {
-        opacity: 0.5;
-    }
-
-    &::after {
-        content: none;
-    }
+.link-button.primary,
+.link-button.primary a {
+  border: 1px solid #ab0000;
+  background-color: #ab0000;
+  color: #fff;
+  opacity: 1;
+  transition: opacity 0.5s;
+  text-decoration: none;
+
+  &:hover {
+    opacity: 0.5;
+  }
 
-}
+  &::after {
+    content: none;
+  }
+}