From 28bbc96f0faf373b82fdc3d38a9c2321e3f5b68c Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Tue, 24 Mar 2026 10:23:19 +0100 Subject: [PATCH] marketing hero 2026 --- .../MarketingHeaderComponent.js | 44 +-- .../marketingheader/MarketingHeaderData.js | 4 +- .../marketingheader/marketingheader.scss | 333 ++++++++++++++---- .../marketingheader/marketingheaderslider.js | 50 ++- .../stories/sections/slider/slider.js | 2 +- .../stories/sections/slider/slider.scss | 22 +- 6 files changed, 335 insertions(+), 120 deletions(-) diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js index 443bee1..ecc936f 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js @@ -118,8 +118,11 @@ export const createMarketingHeader = const contextBoxContent = slideData.context ? slideData.context : ''; const contextBoxContentImg = slideData.contextImg ? slideData.contextImg : ''; + // Image-Box wird IMMER erstellt + const imageBox = createElement('div', ['image-box'], null, outer); + + // Bild wird nur gerendert, wenn imageSrc vorhanden if (slideData.imageSrc && slideData.imageSrc.length > 0) { - const imageBox = createElement('div', ['image-box'], null, outer); const picture = createElement('picture', [], null, imageBox); const src1 = createElement('source', [], null, picture); src1.setAttribute('media','(min-width: 1000px)'); @@ -131,23 +134,36 @@ export const createMarketingHeader = const copyright = createElement('span', ['copyright'], 'Copyright-Angabe', imageBox); copyright.setAttribute("aria-hidden", "true"); createElement('span', ['sr-only'], 'Copyright-Angabe', imageBox); - if (contextBoxContentImg) { - const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox); - createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg); - } else if (contextBoxContent) { - createElement('div', ['context-box'], contextBoxContent, imageBox); - } + } else { + const textInImageBox = createElement('div', ['text-in-image-box'], null, imageBox); + createElement('div', ['icon', 'pictogram-bueroklammer'], null, textInImageBox); + createElement('p', [], 'Wachstum durch Innovation lorem ipsum dolor sit amet', textInImageBox); + } + + // Context-Box immer in image-box (egal ob Bild oder nicht) + if (contextBoxContentImg) { + const contentBoxImg = createElement('div', ['context-box', 'context-box--image'], null, imageBox); + createImage(contextBoxContentImg, 200, 50, '', [], contentBoxImg); + } else if (contextBoxContent) { + createElement('div', ['context-box'], contextBoxContent, imageBox); } const textBox = createElement('div', ['text-box'], null, outer); + // Klasse 'context' hinzufügen, wenn kein Bild vorhanden + if (!slideData.imageSrc || slideData.imageSrc.length <= 0) { + if (contextBoxContent || contextBoxContentImg) { + textBox.classList.add('context'); + } + } + if (slideData.kicker && slideData.kicker.length > 0) { createElement('span', ['kicker'], slideData.kicker, textBox); } if (slideData.headline && slideData.headline.length > 0) { createElement('div', ['like-h2'], slideData.headline, textBox); } - if (slideData.kicker && slideData.kicker.length > 0) { + if (slideData.copy && slideData.copy.length > 0) { createElement('p', [], slideData.copy, textBox); } if (slideData.cta && slideData.link) { @@ -157,18 +173,6 @@ export const createMarketingHeader = }); buttonP.appendChild(btn); } - - if (!slideData.imageSrc || slideData.imageSrc.length <= 0) { - if (contextBoxContent) { - textBox.classList.add('context'); - if (contextBoxContentImg) { - const contentBox = createElement('div', ['context-box', 'context-box--image'], null, textBox); - createImage(contextBoxContentImg, 200, 50, '', [], contentBox); - } else if (contextBoxContent) { - createElement('div', ['context-box'], contextBoxContent, textBox); - } - } - } }); new IHKMHSlider($(sliderComponent)); diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js index 2419359..8c06cff 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js @@ -79,7 +79,7 @@ export const sliderData = [ }, { kicker: 'Lorem Ipsum dolor 2', - headline: 'Möglichkeiten der Integration', + headline: 'Weitere 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: null, cta: 'Mehr erfahren', @@ -88,7 +88,7 @@ export const sliderData = [ }, { kicker: 'Lorem Ipsum dolor 2', - headline: 'Möglichkeiten der Integration', + headline: 'Integration auf drittem Weg', 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: './dummy/placeholder-3-2.svg', cta: 'Mehr erfahren', diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 9c38807..39e4aa8 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -6,7 +6,7 @@ section.marketingheader { &.miniinfoteaser { .kicker { - color: var(--theme-color-secondary); + //color: var(--theme-color-secondary); } .mini-teaser { @@ -16,13 +16,13 @@ section.marketingheader { } .text-only .kicker { - color: white; + //color: white; } } .rotation { .slider { - @media(min-width: 901px) { + @media(min-width: 1000px) { height: 100%; .slide-overflow { height: 100% !important; @@ -42,11 +42,16 @@ section.marketingheader { .image-box { picture { width: 100%; + @media(max-width: 999px) { + position: static; + left: auto; + top: auto; + } } } .copyright { - @media(max-width: 900px) { + @media(max-width: 999px) { left: calc(100% - 30px); } @media(max-width: 767px) { @@ -591,9 +596,9 @@ section.marketingheader { padding: 0; @media screen and (max-width: 999px) { .slide:not(.text-only) .text-box { - padding: 16px 0; + //padding: 16px 0; } - .slide .image-box img { + .slide .image-box :not(.context-box--image) img { position: static; height: 300px; } @@ -604,7 +609,7 @@ section.marketingheader { margin-top: 15px; } } - @media screen and (max-width: 900px) { + @media screen and (max-width: 999px) { .slider .image-box { padding-left: var(--container-padding); padding-right: var(--container-padding); @@ -622,7 +627,7 @@ section.marketingheader { .outer { border-radius: 4px; - .image-box img { + .image-box picture img { border-radius: 4px; } } @@ -638,25 +643,27 @@ section.marketingheader { min-height: 427px; height: 100%; } - } - - img { - object-position: right; - @media(min-width: 1000px) { - min-height: 427px; - height: 100%; + img { + object-position: right; + @media(min-width: 1000px) { + min-height: 427px; + height: 100%; + } } } } .mainstage { - @media screen and (max-width: 900px) { - padding: 0; + @media screen and (max-width: 999px) { + padding: 14px 0 0 0; + } + @media screen and (max-width: 767px) { + padding-top: 4px; } .row { margin: 16px 0; - @media screen and (min-width: 901px) { + @media screen and (min-width: 1000px) { margin: 30px -8px 0; } @@ -664,7 +671,7 @@ section.marketingheader { flex: 1 1 100%; max-width: 100%; - @media screen and (min-width: 901px) { + @media screen and (min-width: 1000px) { padding: 0 8px; flex: 1 1 calc(100% - 322px); max-width: calc(100% - 322px); @@ -678,7 +685,7 @@ section.marketingheader { justify-content: space-between; margin: 0; padding: 0 var(--container-padding); - @media screen and (min-width: 901px) { + @media screen and (min-width: 1000px) { flex: 1 1 322px; max-width: 322px; padding: 0 8px; @@ -717,7 +724,10 @@ section.marketingheader { .mainstage.container { /*max-width: 1920px;*/ width: 100%; - padding: 0; + padding: 30px 0 0 0; + @media (max-width: 767px) { + padding-top: 20px; + } > .row { margin: 0; @@ -733,7 +743,9 @@ section.marketingheader { margin: 0 !important; position: relative; justify-content: center; - max-height: 566px; + @media (min-width: 1000px) { + max-height: 566px; + } } .copyright { @@ -749,31 +761,126 @@ section.marketingheader { .slider { background-color: transparent; - .image-box img { + .image-box { + &:before { + display: none; + } + :not(.context-box--image) img { + @media (max-width: 999px) { + min-height: calc(18vw + 300px) !important; + } + } + .context-box { + right: 0; + @media (max-width: 999px) { + top: 72px; + } + @media (max-width: 767px) { + top: 64px; + } + } + } + + .slide:not(.text-only) .image-box { @media (max-width: 999px) { - min-height: calc(18vw + 300px) !important; + margin: 0 30px; + width: auto; + height: auto; + &:after { + border-radius: 4px; + } + picture img { + border-radius: 4px; + min-height: auto !important; + } + } + @media (max-width: 767px) { + margin: 0 20px; + } + } + + .controls { + right: 35px; + } + + .slide.text-only { + .image-box { + &:after { + display: none; + } + } + @media (min-width: 1000px) { + .text-box { + display: flex; + height: auto; + min-height: auto; + top: 50%; + transform: translate(0,-50%); + } + } + @media (min-width: 1000px) { + .text-in-image-box { + p { + display: none; + } + } + } + + @media (min-width: 1000px) { + .image-box:has(.icon) ~ .text-box { + padding-left: 176px; + } + .image-box { + .text-in-image-box { + width: auto; + left: 36px; + transform: translate(0, -50%); + margin-top: 36px; + @media (min-width: 1230px) { + left: 50%; + margin-left: -580px; + } + @media (min-width: 1340px) { + margin-left: -695px; + } + @media (min-width: 1340px) { + margin-left: -47.5vw; + } + @media (min-width: 1460px) { + margin-left: -695px; + } + } + .icon { + width: 120px; + height: 120px; + &:before { + font-size: 120px; + } + } + } } } .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%); + //background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%); } .slide-overflow { height: 100% !important; } } - - } + .image-box { width: 100%; flex: 1 1 100%; max-width: 100%; - max-height: 566px; position: relative; padding-right: 0 !important; + @media (min-width: 1000px) { + max-height: 566px; + } &:after { position: absolute; @@ -796,7 +903,7 @@ section.marketingheader { position: static; } - img { + :not(.context-box--image) img { object-fit: cover; z-index: -1; left: 0 !important; @@ -813,15 +920,19 @@ section.marketingheader { padding: 0 var(--container-padding); max-width: 100%; margin: 0 auto; - position: absolute; + @media (min-width: 1000px) { + position: absolute; - * { - color: white; + * { + color: white; + } } .btn { - background-color: white !important; - color: var(--theme-color-primary) !important; + @media (min-width: 1000px) { + background-color: white !important; + color: var(--theme-color-primary) !important; + } &:hover:after { box-shadow: 0 0 0 var(--button-hover-shadow-size) white !important; @@ -842,20 +953,20 @@ section.marketingheader { } .slide.text-only { - @media screen and (max-width: 900px) { - padding: 16px var(--container-padding) 0; - } - - .text-box { - width: auto; - @media (max-width: 999px) { - min-height: calc(18vw + 300px) !important; - } - @media screen and (max-width: 900px) { - padding-left: 0; - padding-right: 0; - } - } + //@media screen and (max-width: 900px) { + // padding: 16px var(--container-padding) 0; + //} + // + //.text-box { + // width: auto; + // @media (max-width: 999px) { + // min-height: calc(18vw + 300px) !important; + // } + // @media screen and (max-width: 900px) { + // padding-left: 0; + // padding-right: 0; + // } + //} } .controls { @@ -866,7 +977,7 @@ section.marketingheader { position: relative; .slider-tabs { - right: 30px; + right: -10px; } } } @@ -879,6 +990,7 @@ section.marketingheader { h3, .like-h2 { margin-top: 4px; margin-bottom: 8px; + line-height: 1.1; } .kicker { @@ -943,25 +1055,36 @@ section.marketingheader { } .slide.text-only.current { - background: none; - - .outer { - background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%); - - .text-box { - justify-content: center; - max-width: 580px; - } - } + //background: none; + // + //.outer { + // background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%); + // + // .text-box { + // justify-content: center; + // max-width: 580px; + // } + //} } .text-box { color: var(--theme-color-primary); - padding: 30px 36px 24px 36px; + padding: 30px 20px 24px 20px; display: flex; flex-flow: column; justify-content: center; min-width: 324px; + @media(min-width: 1000px) { + padding-left: 36px; + padding-right: 36px; + } + @media(max-width: 999px) { + padding: 16px 30px 24px 30px; + } + @media(max-width: 767px) { + padding-left: 20px; + padding-right: 20px; + } &:not(:first-child)::before { background-color: var(--theme-color-primary-dimmed-04); @@ -978,8 +1101,53 @@ section.marketingheader { } .text-only { + .image-box { + background: linear-gradient(149deg, var(--theme-color-gradient-01) 46.62%, var(--theme-color-gradient-02) 84.79%, var(--theme-color-gradient-03) 112.16%); + @media (max-width: 999px) { + width: calc(100vw - (2 * var(--container-padding))); + height: calc((100vw - (2 * var(--container-padding))) * 2 / 3); + flex: auto; + margin: 0 auto; + border-radius: 4px; + } + .text-in-image-box { + position: absolute; + left: 50%; + top: 50%; + width: 80%; + transform: translate(-50%, -50%); + color: var(--theme-color-white); + text-align: center; + .icon { + width: 100px; + height: 100px; + overflow: hidden; + position: relative; + margin: 0 auto; + &:before { + display: block; + position: absolute; + left: 0; + top: 0; + font-family: "Pictograms",sans-serif; + color: var(--theme-color-white); + font-size: 90px; + line-height: 1; + } + } + p { + font-size: 36px; + line-height: 43.20px; + @media (max-width: 767px) { + font-size: 24px; + line-height: 28.80px; + } + } + } + } .text-box { - color: white; + display: block; + //color: white; } } } @@ -1010,46 +1178,46 @@ section.marketingheader { .image-box { order: 0; height: auto; - max-height: none !important; + //max-height: none !important; - img { - aspect-ratio: 16 / 9; + :not(.context-box--image) img { + aspect-ratio: 3 / 2; height: auto !important; max-height: none !important; min-height: 177px !important; + position: static; } &:before { display: none; } - - img { - position: static; - } } } } - @media screen and (max-width: 900px) { + @media screen and (max-width: 999px) { .slider { margin-bottom: 20px; .slide:not(.text-only) { .text-box { - padding: 16px var(--container-padding) 0; + //padding: 16px var(--container-padding) 0; } } .slide.text-only { - padding-left: var(--container-padding); - padding-right: var(--container-padding); + //padding-left: var(--container-padding); + //padding-right: var(--container-padding); } .controls { position: absolute; - right: 20px; - bottom: 27px; + right: 26px; + top: 10px; width: auto; padding: 0; + @media screen and (min-width: 768px) { + right: 36px; + } } .slider-tabs { @@ -1068,7 +1236,7 @@ section.marketingheader { @media screen and (max-width: 767px) { .slider { .slide:not(.text-only) .text-box { - padding: 16px var(--container-padding); + //padding: 16px var(--container-padding); } } } @@ -1079,8 +1247,19 @@ section.marketingheader { } } - .context-box { - display: none !important; + .image-box .context-box { + @media screen and (max-width: 999px) { + top: 74px; + &.context-box--image { + right: 30px; + } + } + @media screen and (max-width: 767px) { + top: 64px; + &.context-box--image { + right: 20px; + } + } } } } diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js b/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js index 7996570..67003fc 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheaderslider.js @@ -3,26 +3,46 @@ import 'jquery.easing'; import Slider from "../slider/slider"; class IHKMHSlider { - constructor(section) { - this.section = section.addClass('initiated'); - this.slider = new Slider(section); - this.slider.settings = { - loop: true, - autoplay: true, - infinite: true, - autoplaySpeed: 7000, - animationSpeed: 600, - startSlide: 1, - }; - } + constructor(section) { + this.section = section.addClass('initiated'); + this.slider = new Slider(section); + this.slider.settings = { + loop: true, + autoplay: true, + infinite: true, + autoplaySpeed: 700000, + animationSpeed: 600, + startSlide: 1, + }; + + this.section.on('slide-change', () => this.syncHeights()); + requestAnimationFrame(() => this.syncHeights()); + + $(window).on('resize', () => this.syncHeights()); + } + + syncHeights() { + if (!this.section.closest('.hero-fullwidth').length) return; + + this.section.find('.slide').each(function () { + const textBox = $(this).find('.text-box'); + const textInImageBox = $(this).find('.text-in-image-box'); + + if ($(window).width() > 999) { + textInImageBox.height(textBox.innerHeight() - 36); + } else { + textInImageBox.css('height', ''); + } + }); + } } export default IHKMHSlider; $('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () { - $('.slider:not(.initiated)').each(function() { - new IHKMHSlider($(this)); - }); + $('.slider:not(.initiated)').each(function () { + new IHKMHSlider($(this)); + }); }); diff --git a/gfi-ihk-2024/stories/sections/slider/slider.js b/gfi-ihk-2024/stories/sections/slider/slider.js index caae64a..097f995 100644 --- a/gfi-ihk-2024/stories/sections/slider/slider.js +++ b/gfi-ihk-2024/stories/sections/slider/slider.js @@ -59,7 +59,7 @@ class IHKSlider { const p = h3.next('p'); const dotsString = '…' - if (!slide.find('.image-box').length) { + if (!slide.find('.image-box img').length) { slide.addClass('text-only'); } else { if (h3.text().length > 48) { diff --git a/gfi-ihk-2024/stories/sections/slider/slider.scss b/gfi-ihk-2024/stories/sections/slider/slider.scss index 8b7d60a..3cc48b4 100644 --- a/gfi-ihk-2024/stories/sections/slider/slider.scss +++ b/gfi-ihk-2024/stories/sections/slider/slider.scss @@ -277,9 +277,10 @@ top: 40px; z-index: 100; min-width: 100px; - min-height: 47px; - padding: 8px 10px 10px 10px; + //min-height: 52px; + padding: 0 10px 0 10px; @include h4(); + line-height: 47px; margin: 0; text-align: right; color: var(--theme-color-white); @@ -288,10 +289,21 @@ min-height: auto; } &--image { - padding: 4px 10px; - display: flex; + //padding: 4px 10px; + //display: flex; + padding: 0; + min-width: auto; img { - height: 39px; + //height: 39px; + object-fit: unset; + top: auto; + left: auto; + width: auto; + height: 47px; + position: relative; + display: block; + max-width: none; + min-width: auto; } } }