diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js index 7e5bc3d..228ea63 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeader.stories.js +++ b/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'}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js index e095b97..c0a6610 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/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; diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js index c74759b..c585a4a 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js +++ b/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', + } ] \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 5d43bc1..8039565 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/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{