diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss index a16b6af..96fff17 100644 --- a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss +++ b/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; } } diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js index b297ae6..84b70e8 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/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; + } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/marketingheader/beteiligung-cover.jpg b/gfi-ihk-2024/stories/sections/marketingheader/beteiligung-cover.jpg new file mode 100644 index 0000000..6f93b6a Binary files /dev/null and b/gfi-ihk-2024/stories/sections/marketingheader/beteiligung-cover.jpg differ diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index c7819dd..545b5ab 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/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);