Marketing Header

gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss

@@ -222,6 +222,7 @@ background: linear-gradient(0deg, 0%, 100%), linear-gradient(88deg, #003366 0%,
       border-radius: 0.75rem;
       //box-shadow: 0px 0px 15px 0px rgba(0, 51, 102, 0.20), 0px 0px 46px 0px rgba(0, 51, 102, 0.12), 0px 0px 38px 0px rgba(0, 51, 102, 0.14);
       box-shadow: var(--theme-24dp);
+      min-height:138px;
     }
   }
 

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

@@ -1,12 +1,14 @@
 import './marketingheader.scss';
 import '../../components/artwork/artwork.scss';
 import $ from 'jquery';
-import {createElement} from "../../_global/scripts/helpers";
+import {createElement, createImage} from "../../_global/scripts/helpers";
 import {marketingHeaderData} from "./MarketingHeaderData";
 import {createArtwork} from "../../components/artwork/ArtworkComponent";
 import {createSearchInput} from "../../atoms/search-input/SearchInputComponent";
 import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";
 import IHKSearchTypeahead from "./marketingheader-typeahead";
+import {createProgressBar} from "../../atoms/progress-bar/ProgressBarComponent";
+import {createButton} from "../../atoms/button/ButtonComponent";
 
 export const createMarketingHeader =
   ({
@@ -16,13 +18,32 @@ export const createMarketingHeader =
     placeholder = 'Tippe "Taxischein" für Autocomplete',
     api = 'services/search/{SEARCHTERM}.json',
     tiles = marketingHeaderData,
+    imageSrc = 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
+    kicker = 'Noch 7 Tage offen',
+    headline = 'Jetzt und digital mitreden',
+    copy = 'Mit der digitalen Beteiligung erhalten Mitgliedsunternehmen die Möglichkeit, sich einfach und schnell über laufende Verfahren und Abstimmungen zu informieren und sich aktiv daran zu beteiligen.',
+    moreCta = {
+      label: 'Mehr Infos',
+      link: '#',
+      target: '_self',
+    },
+    buttonCta = {
+      label: 'Jetzt beteiligen',
+      link: '#',
+      target: '_self',
+    },
+    showProgress = true,
+    progress = 60,
+    backgroundImage = null,
+    isFirstElement = false,
   }) => {
-    const section = createElement('section', ['search'], null);
+    const section = createElement('section', ['marketingheader'], null);
+    const search = createElement('div', ['search'], null, section);
     const artwork = createArtwork({type: artworkStyle});
-    section.appendChild(artwork);
-    section.dataset.type = artworkStyle;
+    search.appendChild(artwork);
+    search.dataset.type = artworkStyle;
 
-    const container = createElement('div', ['container', 'small'], null, section);
+    const container = createElement('div', ['container', 'small'], null, search);
     const row = createElement('div', ['row'], null, container);
     const col = createElement('div', ['col'], null, row);
 
@@ -49,5 +70,53 @@ export const createMarketingHeader =
       new IHKSearchTypeahead($(form).find('input.typeahead'));
     }
 
-    return section;
+    const hasImage = imageSrc && imageSrc.length > 0;
+    const stage = createElement('div', ['participation', 'participation-stage'], null, section);
+    const container2 = createElement('div', ['container'], null, stage);
+    const row2 = createElement('div', ['row'], null, container2);
+    const col2 = createElement('div', ['col'], null, row2);
+    const tb2 = createElement('div', ['text-box'], null, col2);
+  
+    if (backgroundImage && backgroundImage.length > 0) {
+      //section.content('style=background: red;');
+      stage.style = 'background-image: url(' + backgroundImage + ');';
+      stage.classList.add('background-image');
+    }
+  
+    if (isFirstElement) {
+      stage.classList.add('first-element');
+    }
+  
+    if (kicker && kicker.length > 0) {
+      createElement('p', ['kicker'], kicker, tb2);
+    }
+    if (showProgress) {
+      tb2.appendChild(createProgressBar({progress}));
+    }
+    createElement('h1', ['like-h2'], headline, tb2);
+    createElement('p', [], copy, tb2);
+    if (moreCta) {
+      const more = createElement('a', [], moreCta.label, tb2);
+      more.href = moreCta.link;
+      more.target = moreCta.target;
+    }
+    if (buttonCta) {
+      const button2 = createButton({
+        elementType: 'a',
+        link: buttonCta.link,
+        color: 'white',
+        label: buttonCta.label,
+        iconPosition: 'icon-right',
+        icon: 'small-arrow-right-simple',
+      });
+      tb2.appendChild(button2);
+    }
+  
+    if (hasImage) {
+      stage.classList.add('image-stage');
+      const ib2 = createElement('div', ['image-box'], null, col2);
+      createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib2);
+    }
+    return section;   
+  
   }

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

@@ -1,7 +1,7 @@
 @import '../../_global/styles/mixins';
 @import '../../_global/styles/vars';
 
-section.search {
+section.marketingheader .search {
   position: relative;
   padding: calc(0.4vw + 20px) 0 calc(1vw + 40px);
   min-height: calc(24vw + 220px);