Marketingheader Verbesserungen

gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js

@@ -1,5 +1,5 @@
 import {createMarketingHeader} from "./MarketingHeaderComponent";
-import {searchData, teaserData, sliderData} from "./MarketingHeaderData";
+import {searchData, infoTeaserData, singleSlideData, teaserData, sliderData} from "./MarketingHeaderData";
 
 export default {
   title: 'Sections/MarketingHeader',
@@ -10,8 +10,8 @@ export default {
     type: {
       name: 'Typ',
       control: {type: 'select'},
-      options: ['standard', 'hero-fullwidth'],
-      defaultValue: 'standard',
+      options: ['infoteaser', 'hero-fullwidth'],
+      defaultValue: 'infoteaser',
     },
     artworkStyle: {
       name: 'Artwork Stil',
@@ -50,13 +50,13 @@ export const MarketingHeader = Template.bind({});
 MarketingHeader.args = {};
 
 export const MarketingHeaderSearchBackground = Template.bind({});
-MarketingHeaderSearchBackground.args = {};
+MarketingHeaderSearchBackground.args = {backgroundImage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648'};
 
 export const MarketingHeaderInfoBanner = Template.bind({});
-MarketingHeaderInfoBanner.args = {};
+MarketingHeaderInfoBanner.args = {teasers : infoTeaserData};
 
-export const MarketingHeaderSlider = Template.bind({});
-MarketingHeaderSlider.args = {};
+export const MarketingHeaderSingleSlide = Template.bind({});
+MarketingHeaderSingleSlide.args = {slides: singleSlideData};
 
 export const MarketingHeaderStage = Template.bind({});
 MarketingHeaderStage.args = {type:'hero-fullwidth'};

gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js

@@ -44,6 +44,10 @@ export const createMarketingHeader =
   }) => {
     const section = createElement('section', ['marketingheader', type], null);
     const search = createElement('div', ['search'], null, section);
+    if (backgroundImage && backgroundImage.length > 0) {
+      search.style = 'background-image: url(' + backgroundImage + ');';
+      search.classList.add('background-image');
+    }
     const artwork = createArtwork({type: artworkStyle});
     search.appendChild(artwork);
     search.dataset.type = artworkStyle;

gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js

@@ -46,6 +46,27 @@ export const teaserData = [
   }
 ]
 
+export const infoTeaserData = [
+  {
+    category: 'Wachstum durch Innovation',
+    title: 'Jetzt Teil der Digitalisierungswelle werden.',
+    link: '#',
+    icon: 'Virus',
+    buttonlabel: 'IHK-Newsletter sichern',
+    type: 'infoteaser',
+  },
+  {
+    category: 'IHK Mitgliedschaft',
+    title: 'Exklusive Einblicke und Branchen-Trends:',
+    link: '#',
+  },
+  {
+    category: 'IHK Mitgliedschaft',
+    title: 'Exklusive Einblicke und Branchen-Trends:',
+    link: '#',
+  }
+]
+
 export const sliderData = [
   {
     kicker: 'Lorem Ipsum dolor',
@@ -73,4 +94,15 @@ export const sliderData = [
     cta: 'Mehr erfahren',
     link: '#',
   }
+]
+export const singleSlideData = [
+  {
+    kicker: 'Lorem Ipsum dolor',
+    headline: 'Möglichkeiten der Integration',
+    copy: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
+    imageSrc: 'https://source.unsplash.com/9_bDrvW7bA8/900x600',
+    cta: 'Mehr erfahren',
+    link: '#',
+    contextImg: './logos/wirtschaftsdialoge.svg',
+  }
 ]

gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss

@@ -4,7 +4,12 @@ section.marketingheader{
   margin-top:0;
   .rotation .slider{
     border-bottom:0;
-     .text-box{
+    .slider-tabs{
+      li:first-child:last-child{
+        display:none;
+      }
+    }
+    .text-box{
         color:var(--theme-color-primary);
         &:not(:first-child)::before {
           background-color: var(--theme-color-primary-dimmed-04);
@@ -20,8 +25,6 @@ section.marketingheader{
   }
   .search {
     position: relative;
-    //padding: calc(0.4vw + 20px) 0 calc(1vw + 40px);
-    //min-height: calc(24vw + 220px);
     overflow: hidden;
     margin: 0;
     background-color: var(--theme-color-primary-dimmed-04);
@@ -29,26 +32,62 @@ section.marketingheader{
       padding: calc(1.5vw + 15px) 0 0;
       margin-bottom: -10px;
     }
-
+    form{
+      border-radius: 24px;
+      box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.25) !important;
+      overflow:hidden;
+      font-size: 22px;
+      max-width: 360px;
+      margin: 20px auto !important;
+    }
     + section, + #toclist > section:first-child {
       @media(min-width: 768px) {
         margin-top: 0;
       }
     }
-
+    input#search-term{
+      border-color:white !important;
+      height: 60px;
+      border-top-left-radius: 24px;
+      border-bottom-left-radius: 24px;
+      font-size: 22px;
+      &::placeholder{
+        color:var(--theme-color-primary) !important;
+      }
+    }
+    button.search-submit{
+      background-color: var(--theme-color-primary) !important;
+      color: white;
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;  
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;  
+      border-color:white !important;
+      height: 60px;
+      width:60px;
+      font-size: 22px;
+      &:before{
+        width:30px;
+        height:30px;
+        font-size:30px;
+        //border-radius: 24px;
+      }
+    }
     .container {
       position: relative;
       z-index: 1;
+      .row {
+        @media(max-width: 567px) {
+         min-height: 0;
+       }
+       > .col{
+        margin-top:0;
+        padding-top:0;
+        padding-bottom:9px;
+       }
+     }
     }
-
-    .row {
- 
-
-      @media(max-width: 567px) {
-        min-height: 0;
-      }
-    }
-
+    
     .artwork {
       @media(max-width: 420px) {
         top: 30px;
@@ -59,12 +98,11 @@ section.marketingheader{
         right: -30px;
       }
     }
-
     form {
       position: relative;
       margin: 0 0 16px;
-      box-shadow: 0 3px 20px -5px rgba(#000, 0.3);
-      border-radius: var(--border-radius-md) var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-md);
+      //box-shadow: 0 3px 20px -5px rgba(#000, 0.3);
+      //border-radius: var(--border-radius-md) var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-md);
 
       @media(max-width: 567px) {
         margin-top: 20px;
@@ -97,7 +135,10 @@ section.marketingheader{
         padding: 8px;
         flex: 1 1 33.3333%;
         max-width: 33.3333%;
-
+        margin-top:0 !important;
+        padding-top:0 !important;
+        padding-bottom:0 !important;
+        margin-bottom:16px !important;
         &::before {
           position: absolute;
           top: 8px;
@@ -282,7 +323,7 @@ section.marketingheader{
           margin-bottom: 0;
         }
       }
-
+      
       .all-button-wrapper {
         padding: 16px 8px;
         display: block;
@@ -305,18 +346,30 @@ section.marketingheader{
         }
       }
     }
+    &.background-image{
+      .artwork-wrapper{
+        display:none;
+      }
+    }
   }
   &.infoteaser{
+    max-height:427px;
+    outer{
+      max-height:427px;
+      img{
+        max-height:427px;
+      }
+    }
     .mainstage{
       .row{
         margin:30px -8px 0;
         .col{
-          flex: 1 1 66.6666%;
-          max-width: 66.6666%;
+          flex: 1 1 calc(100% - 322px);
+          max-width: calc(100% - 322px);
           padding:0 8px;
           + .col{
-            flex: 1 1 33.3333%;
-            max-width: 33.3333%;
+            flex: 1 1 322px;
+            max-width: 322px;
             display: flex;
             flex-flow: column;
             justify-content: space-between;
@@ -341,12 +394,27 @@ section.marketingheader{
       max-width: 1920px;
       width:100%;
       padding:0;
+      > .row{
+        margin:0;
+      }
     }
     .rotation{
       margin:0 !important;
       padding:0 !important;
       //max-width: 1920px;
       width:100%;
+      outer{
+        margin:0 !important;
+        position: relative;
+        justify-content: center;
+        max-height:566px;
+      }
+      .slider{
+        background-color: transparent;
+        .slide.text-only.current {
+          background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
+        }
+      }
     }
     .image-box{
       width:100%;
@@ -354,7 +422,10 @@ section.marketingheader{
       max-width: 100%;
       max-height:566px;
       position: relative;
-      
+      padding-right: 0 !important;
+      @media (min-width: 1000px) {
+          padding-right: 0 !important;
+      }
       &:after{
         position:absolute;
         top:0;
@@ -372,16 +443,24 @@ section.marketingheader{
       }
       img{
         object-fit: cover;
-        position:relative;
+        //position:relative;
         z-index: -1;
+        left:0 !important;
+        padding:0 !important;
+        width:100% !important;
       }
     }
     .text-box{
       position: absolute;
       height: 100%;
       color:white;
+      width: var(--container-width);
+      padding: 0 var(--container-padding);
+      max-width: 100%;
+      margin: 0 auto;
       *{
         color:white;
+        max-width:580px;
       }
       &:after{
         display:none;
@@ -389,6 +468,20 @@ section.marketingheader{
       &:before{
         display:none;
       }
+      .btn{
+        background-color: white !important;
+        color:var(--theme-color-primary) !important;
+        &:hover:after{
+          box-shadow: 0 0 0 var(--button-hover-shadow-size) white !important;
+        }
+      }
+    }
+    .controls{
+      width: var(--container-width);
+      padding: 0 var(--container-padding);
+      max-width: 100%;
+      margin: 0 auto;
+      position: relative;
     }
   }
   .rotation{