Marketing Header + Mini-Teaser

gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js

@@ -9,18 +9,23 @@ export const createMiniTeaser = ({
   icon = 'Roboter',
   buttonlabel = 'IHK-Newsletter sichern',
 }) => {
-  const tile = createElement('div', ['tile',  'mini-teaser', type], null);
-  tile.href = link;
   
-  const textBox = createElement('div', ['text-box'], null, tile);
   if (type === 'standard') {
+    const tile = createElement('a', ['tile',  'mini-teaser', type], null);
+    tile.href = link;
+    const textBox = createElement('div', ['text-box'], null, tile);
     createElement('h5', ['category'], category, textBox);
+    createElement('h4', ['title'], title, textBox);
+    return tile;
   }else{
+    const tile = createElement('div', ['tile',  'mini-teaser', type], null);
+    const textBox = createElement('div', ['text-box'], null, tile);
     createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox);
+    createElement('h4', ['title'], title, textBox);
+    textBox.appendChild(createButton({color: 'white', label: buttonlabel,link: link, iconPosition: 'icon-right', icon: null}))
+    return tile;
   }
-  createElement('h4', ['title'], title, textBox);
-  if (type === 'infoteaser') {
-    textBox.appendChild(createButton({color: 'white', label: buttonlabel, iconPosition: 'icon-right', icon: null}))
-  }
-  return tile;
+  
+
+  
 }

gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss

@@ -14,6 +14,7 @@
   text-align: center;
   text-decoration: none;
   background-color: var(--theme-grey-light);
+  display: block;
   .title{
     font-size: 22px;
   }
@@ -24,12 +25,12 @@
     top: 0;
     left: 0;
     right: 0;
-    height: var(--border-width);
+    height: 4px;
     background-color: var(--theme-color-secondary);
     transition: 0.2s ease;
   }
   &.standard:hover::before {
-    height: var(--border-width-hover);
+    height: 8px;
   }
   h4{
     font-size: 22px;
@@ -95,6 +96,9 @@
     padding:0;
     margin:0;
     margin-bottom:8px;
+    font-size:16px;
+    text-transform: uppercase;
+    line-height: 18px;
   }
   .title{
     text-align: left;

gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js

@@ -1,4 +1,5 @@
 import './event-teasers-large.scss';
+//import '../../components/mini-teaser/miniteaser.scss';
 import {EventTeasersLargeData} from "./EventTeasersLargeData";
 import {createElement} from "../../_global/scripts/helpers";
 import {createButton} from "../../atoms/button/ButtonComponent";

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

@@ -7,6 +7,12 @@ export default {
     layout: 'fullscreen',
   },
   argTypes: {
+    type: {
+      name: 'Typ',
+      control: {type: 'select'},
+      options: ['standard', 'hero-fullwidth'],
+      defaultValue: 'standard',
+    },
     artworkStyle: {
       name: 'Artwork Stil',
       control: {type: 'select'},
@@ -53,4 +59,4 @@ export const MarketingHeaderSlider = Template.bind({});
 MarketingHeaderSlider.args = {};
 
 export const MarketingHeaderStage = Template.bind({});
-MarketingHeaderStage.args = {};
+MarketingHeaderStage.args = {type:'hero-fullwidth'};

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

@@ -10,6 +10,7 @@ import IHKSearchTypeahead from "./marketingheader-typeahead";
 import {createButton} from "../../atoms/button/ButtonComponent";
 import IHKMHSlider from "./marketingheaderslider";
 import {searchData, teaserData, sliderData} from "./MarketingHeaderData";
+import {createMiniTeaser} from "../../components/mini-teaser/MiniTeaserComponent";
 
 
 export const createMarketingHeader =
@@ -38,8 +39,10 @@ export const createMarketingHeader =
     isFirstElement = false,
     slides = sliderData,
     teasers = teaserData,
+    maxItems = 3,
+    type = 'infoteaser',
   }) => {
-    const section = createElement('section', ['marketingheader'], null);
+    const section = createElement('section', ['marketingheader', type], null);
     const search = createElement('div', ['search'], null, section);
     const artwork = createArtwork({type: artworkStyle});
     search.appendChild(artwork);
@@ -72,8 +75,13 @@ export const createMarketingHeader =
 
     /* SLIDER */
    
-    const container2 = createElement('div', ['container', 'slidercontainer', 'rotation'], null, section);
-    const sliderComponent = createElement('div', ['slider'], null, container2);
+    const container2 = createElement('div', ['container', 'mainstage'], null, section);
+    const row2 = createElement('div', ['row'], null, container2);
+    const colslider = createElement('div', ['col', 'slidercontainer', 'rotation'], null, row2);
+
+    
+    //const col2 = createElement('div', ['col'], null, row2);
+    const sliderComponent = createElement('div', ['slider'], null, colslider);
     slides.map((slideData, index) => {
       const slide = createElement('div', ['slide'], null, sliderComponent);
       const outer = createElement('outer', ['outer'], null, slide);
@@ -122,8 +130,27 @@ export const createMarketingHeader =
         }
       }
     })
+
     new IHKMHSlider($(sliderComponent));
 
+    if (type === 'infoteaser') {
+      const col3 = createElement('div', ['col'], null, row2);
+
+      //const teasers = createMiniTeaser({teasers.type: 'standard'});
+      //col3.appendChild(teasers);
+
+      teasers.map((t, i) => {
+        if (i < maxItems) {
+          var typ = 'standard'; 
+          if (i == 0 && t.type == 'infoteaser') typ = 'infoteaser';
+          const col4 = createElement('div', ['mt'], null, col3);
+          const tea = createMiniTeaser({
+            type : typ,
+          })
+          col4.appendChild(tea);
+        }
+      })
+    }
     /*
     const hasImage = imageSrc && imageSrc.length > 0;
     const stage = createElement('div', ['participation', 'participation-stage'], null, section);

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

@@ -31,18 +31,18 @@ export const teaserData = [
     title: 'Jetzt Teil der Digitalisierungswelle werden.',
     link: '#',
     icon: 'Virus',
+    buttonlabel: 'IHK-Newsletter sichern',
+    type: 'standard',
   },
   {
     category: 'IHK Mitgliedschaft',
     title: 'Exklusive Einblicke und Branchen-Trends:',
     link: '#',
-    icon: 'Roboter',
   },
   {
     category: 'IHK Mitgliedschaft',
     title: 'Exklusive Einblicke und Branchen-Trends:',
     link: '#',
-    icon: 'Stadt',
   }
 ]
 

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

@@ -2,6 +2,22 @@
 @import '../../_global/styles/vars';
 section.marketingheader{
   margin-top:0;
+  .rotation .slider{
+    border-bottom:0;
+     .text-box{
+        color:var(--theme-color-primary);
+        &:not(:first-child)::before {
+          background-color: var(--theme-color-primary-dimmed-04);
+        }
+        .btn{
+          background-color: var(--theme-color-primary);
+          color:white;
+          &:hover:after{
+            box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--theme-color-primary);
+          }
+        }
+      }
+  }
   .search {
     position: relative;
     //padding: calc(0.4vw + 20px) 0 calc(1vw + 40px);
@@ -290,4 +306,92 @@ section.marketingheader{
       }
     }
   }
+  &.infoteaser{
+    .mainstage{
+      .row{
+        margin:30px -8px 0;
+        .col{
+          flex: 1 1 66.6666%;
+          max-width: 66.6666%;
+          padding:0 8px;
+          + .col{
+            flex: 1 1 33.3333%;
+            max-width: 33.3333%;
+            display: flex;
+            flex-flow: column;
+            justify-content: space-between;
+            margin: -8px 0;
+            padding:0 8px;
+            .mt{
+              height: 100%;
+              padding: 8px 0;
+              .mini-teaser{
+                height: 100%;
+              } 
+            }
+          }
+        }
+      }
+  }
+  
+  }
+  &.hero-fullwidth{
+    max-height:566px;
+    .mainstage.container{
+      max-width: 1920px;
+      width:100%;
+      padding:0;
+    }
+    .rotation{
+      margin:0 !important;
+      padding:0 !important;
+      //max-width: 1920px;
+      width:100%;
+    }
+    .image-box{
+      width:100%;
+      flex: 1 1 100%;
+      max-width: 100%;
+      max-height:566px;
+      position: relative;
+      
+      &:after{
+        position:absolute;
+        top:0;
+        left:0;
+        bottom:0;
+        right:0;
+        z-index: 0;
+        content:"";
+        opacity: 0.6;
+        background: linear-gradient(87deg, #036 12.55%, rgba(1, 40, 81, 0.86) 56.52%, rgba(0, 51, 102, 0.00) 94.05%);
+        background-blend-mode: overlay;
+        &:before{
+          display:none;
+        }
+      }
+      img{
+        object-fit: cover;
+        position:relative;
+        z-index: -1;
+      }
+    }
+    .text-box{
+      position: absolute;
+      height: 100%;
+      color:white;
+      *{
+        color:white;
+      }
+      &:after{
+        display:none;
+      }
+      &:before{
+        display:none;
+      }
+    }
+  }
+  .rotation{
+    margin:0;
+  }
 }