Update hero header

aiur.config.js

@@ -58,6 +58,7 @@ module.exports = {
         login_form: "./lib/components/login-form/login-form.md",
         footer: "./lib/components/footer/footer.md",
         header: "./lib/components/header/header.md",
+        hero: "./lib/components/hero/hero.md",
         form: "./lib/components/form/form.md",
         navbar: "./lib/components/navbar/navbar.md",
       },

lib/components/buttons/_buttons.scss

@@ -24,69 +24,58 @@
 
 .btn {
   @extend %body-font-bold;
+  @extend %base-button;
 
-  padding: 1rem 1.5rem;
+  width: auto;
+  padding: $spacer-sm $spacer-md;
 
   font-size: $font-size-sm;
   color: $brand-text;
   text-align: center;
-  text-decoration: none;
   text-transform: uppercase;
   text-wrap: none;
   letter-spacing: 0.12rem;
   word-spacing: $spacer-3xs;
 
-  border: $spacer-3xs solid $brand-text;
-
   transition: all 0.15s ease-out;
 }
 
-.btn-size--full {
-  display: block;
-  width: 100%;
-}
-
-.btn-size--fit {
-  @include for-tablet-landscape-up {
-    display: inline-block;
-    width: auto;
-  }
-
-  display: block;
-  width: 100%;
-}
-
 .btn-type--primary {
   color: $brand-background;
   background-color: $brand-text;
-}
 
-.btn-type--primary:hover,
-.btn-type--primary:focus {
-  cursor: pointer;
-  color: $brand-background;
-  background-color: $brand-gray;
-  border: $spacer-3xs solid $brand-gray;
+  &:hover,
+  &:focus {
+    color: $brand-text;
+    background-color: $brand-primary-light;
+  }
 }
 
 .btn-type--secondary {
   color: $brand-text;
   background-color: transparent;
+  border: $spacer-3xs solid $brand-text;
+
+  &:hover,
+  &:focus {
+    background-color: $brand-secondary-light;
+  }
 }
 
-.btn-type--secondary:hover,
-.btn-type--secondary:focus {
-  cursor: pointer;
-  background-color: $brand-background-dark;
-  border: $spacer-3xs solid $brand-text;
+.btn--cta {
+  color: $brand-text;
+  background-color: $brand-primary;
+
+  &:hover,
+  &:focus {
+    color: $brand-background;
+    background-color: $brand-text;
+  }
 }
 
 .btn-state--disabled {
   background-color: $brand-gray-1;
   border-color: $brand-gray-1;
-  // color: $brand-background;
-  // background-color: $brand-background-dark;
-  // border: $spacer-3xs solid $brand-background-dark;
 }
 
 .btn-anchor {
@@ -97,6 +86,12 @@
   margin: $spacer-md 0 $spacer-base 0;
 }
 
+// Button sizes
+.btn--lg {
+  padding: $spacer-sm $spacer-base;
+  font-size: $font-size-md;
+}
+
 .button-group {
   display: flex;
   flex-direction: row;
@@ -105,3 +100,21 @@
 
   width: 100%;
 }
+
+// TODO Remove
+.btn-size--full {
+  //TODO Obsolete class
+  display: block;
+  width: 100%;
+}
+
+.btn-size--fit {
+  //TODO Obsolete Class
+  @include for-tablet-landscape-up {
+    display: inline-block;
+    width: auto;
+  }
+
+  display: block;
+  width: 100%;
+}

lib/components/buttons/buttons.md

@@ -4,17 +4,13 @@ description: Buttons
 Buttons
 
 ```html
-<a href="#" class="btn btn-type--primary btn-size--fit">Primary Button</a>
+<a href="#" class="btn btn-type--primary">Primary Button</a>
 ```
 
 ```html
-<a href="#" class="btn btn-type--secondary btn-size--fit">Secondary Button</a>
+<a href="#" class="btn btn-type--secondary">Secondary Button</a>
 ```
 
 ```html
-<a href="#" class="btn btn-type--primary btn-size--full">Primary Button Full</a>
-```
-
-```html
-<a href="#" class="btn btn-type--secondary btn-size--full">Secondary Button Full</a>
+<a href="#" class="btn btn--cta">CTA Button</a>
 ```

lib/components/headings/_headings.scss

@@ -15,7 +15,8 @@ h3 {
   font-size: $font-size-xl;
 }
 
-.section__title--small {
+.section__title--small,
+%section__title--small {
   @extend %monospace-font-regular;
 
   margin-bottom: $spacer-md;

lib/components/hero/_hero.scss

@@ -1,56 +1,98 @@
-// Hero
 .hero {
   @include for-tablet-landscape-up {
-    margin-bottom: $spacer-2xl * 1.25;
-    padding: $spacer-lg + 4rem 0 $spacer-lg 0;
+    grid-template-columns: 1fr 1fr;
+    gap: $spacer-xl;
+    padding: $spacer-xl $spacer-base $spacer-xl $spacer-base;
   }
 
-  margin-bottom: $spacer-xl;
-  padding: $spacer-lg 0 $spacer-lg 0;
-  background-color: $brand-primary-light;
+  display: grid;
+  gap: $spacer-md;
+
+  width: 100%;
+  max-width: $desktop-xl;
+  margin: 0 auto;
+  padding: $spacer-lg $spacer-xs $spacer-lg $spacer-xs;
 }
 
-.hero__teaser {
+.hero_grid-wrapper {
   @include for-tablet-landscape-up {
-    flex-direction: row-reverse;
+    align-items: flex-start;
   }
 
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
+  flex-direction: column;
+  align-items: center;
 
-.hero__image {
-  @include for-tablet-landscape-up {
-    margin-top: $spacer-lg;
+  .btn {
+    margin-top: $spacer-md;
   }
-
-  display: block;
-  max-width: 90%;
-  margin: 0 auto $spacer-lg auto;
 }
 
 .hero__heading {
-  margin-bottom: $spacer-md;
-  margin-left: -0.24rem;
-  font-size: $font-size-xxxl;
+  @include for-tablet-portrait-up {
+    font-size: $font-size-xxxl;
+  }
+
+  @include for-breakpoint-phone-up {
+    font-size: $font-size-xxl;
+  }
+
+  margin-bottom: 0; // TODO
+  font-size: $font-size-xl;
   line-height: $heading-line-height-sm;
 }
 
+.hero__text {
+  margin-top: $spacer-md;
+  margin-bottom: 0;
+}
+
+.hero__image {
+  @include for-tablet-landscape-up {
+    display: block;
+    align-self: flex-start;
+    width: 70%;
+  }
+
+  display: none;
+}
+
 .hero__logos {
+  @include for-tablet-landscape-up {
+    margin-top: $spacer-md;
+  }
+
   display: flex;
+  flex-wrap: wrap;
+  gap: $spacer-sm $spacer-md;
+  align-items: flex-end;
 }
 
-.hero__logo {
-  height: 2.5rem;
-  margin-right: $spacer-base;
+.hero__logos__caption {
+  line-height: 1;
 }
 
-.hero__logo--small {
+.hero__logo {
+  @include for-tablet-landscape-up {
+    height: 2.5rem;
+  }
+
+  display: block;
   height: 2rem;
-  // margin-top: -0.6rem;
 }
 
-.hero__aside {
-  margin-top: $spacer-2xl;
+.hero__isaqb {
+  @include for-tablet-landscape-up {
+    height: 4rem;
+  }
+
+  display: inline-block;
+  height: 3rem;
+  margin-top: $spacer-sm;
+}
+
+.hero__isaqb__wrapper {
+  display: flex;
+  gap: $spacer-xs;
+  align-items: center;
 }

lib/components/hero/hero.md

@@ -0,0 +1,25 @@
+title: Hero header
+description: Hero header
+
+```html
+<header class="hero">
+    <div class="hero_grid-wrapper">
+        <h1 class="hero__heading">Unsere Mission: <span class="marker-highlight">Softwarearchitektur</span> von den Besten lernen!</h1>
+        <p class="hero__text">
+            Für Menschen, die sich nicht nur weiterbilden, sondern auch weiterkommen wollen. Wir sind Expert:innen, die nicht nur Fachwissen, sondern auch ihre reiche Praxiserfahrung an euch
+            weitergeben können. Wir sind Trainer:innen, die Fachbücher nicht nur gelesen, sondern selbst geschrieben haben. Willkommen bei socreatory, der Software Creator’s Academy.
+        </p>
+        <a href="#"><img class="hero__isaqb" src="/snippet/images/logos/isaqb.svg" /></a>
+        <a href="#" class="btn btn--cta btn--lg">Unsere Trainings</a>
+    </div>
+
+    <div class="hero_grid-wrapper">
+        <img class="hero__image" src="/snippet/images/illustrations/Lernenvondenbesten.png" alt="" />
+        <div class="hero__logos">
+            <span class="hero__logos__caption"> Eine Kooperation von</span>
+            <a href="#"><img class="hero__logo" src="/snippet/images/logos/embarc_logo.svg" /></a>
+            <a href="#"><img class="hero__logo" src="/snippet/images/logos/innoq_logo.svg" /></a>
+        </div>
+    </div>
+</header>
+```

lib/components/text/_text.scss

@@ -1,6 +1,26 @@
 p {
   font-size: $font-size-base;
   hyphens: auto;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.marker-highlight {
+  position: relative;
+
+  &::before {
+    content: " ";
+
+    position: absolute;
+    z-index: -1;
+    top: 65%;
+    left: 0;
+
+    width: 100%;
+    height: 20%;
+
+    background-color: $brand-secondary;
+  }
 }
 
 // Bilder innerhalb von Markdown einfärben

lib/fundamentals/_base.scss

@@ -11,6 +11,8 @@
 
 html {
   font-size: 16px;
+
+  hyphenate-character: "-";
 }
 
 body {