diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss b/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss index ac7cc02..f6e1ae1 100644 --- a/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss +++ b/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss @@ -43,11 +43,6 @@ width:100%; margin-right: 0; min-height:250px; - @media(max-width: 767px) { - margin-right: 12px; - justify-content: flex-start; - padding-top: 10px; - } .icon-box { font-family: 'Pictograms', sans-serif; font-size: 48px; @@ -56,10 +51,6 @@ position:absolute; top:15px; left:15px; - @media(max-width: 567px) { - font-size: 50px; - margin-top: 0; - } } .ev-title{ font-weight: 400; @@ -227,6 +218,9 @@ display:inline-block; } } + .ev-desc{ + font-size:18px; + } } } } diff --git a/gfi-ihk-2024/stories/components/image-text/ImageTextComponent.js b/gfi-ihk-2024/stories/components/image-text/ImageTextComponent.js index 436a93d..c010e78 100644 --- a/gfi-ihk-2024/stories/components/image-text/ImageTextComponent.js +++ b/gfi-ihk-2024/stories/components/image-text/ImageTextComponent.js @@ -8,28 +8,38 @@ export const createImageText = switched = 'normal', listItems: listItems = imageTextData, headline = 'Warum wählen?', + smallheadline = false, text = 'Sie können mitbestimmen, wer Sie und Ihre die Interessen Ihres Unternehmens vertritt.', image = './dummy/why-elect.jpg', - link = '', + link = '#', linkname = 'Mehr erfahren', }) => { const div = createElement('div', ['image-text', colored, switched], null); const div2 = createElement('div', ['image-text--image'], null, div); const div3 = createElement('div', ['image-text--text'], null, div); createImage(image, 400, 400, '', [], div2); - createElement('h2', [], headline, div3); + if (smallheadline){ + createElement('h3', [], headline, div3); + } + else{ + createElement('h2', [], headline, div3); + } createElement('p', [], text, div3); const ul = createElement('ul', [], null, div3); - listItems.map((item) => { - const li = createElement('li', [], null, ul); - if (item.headline && item.headline.length > 0) { - createElement('h3', [], item.headline, li); - } - if (item.text && item.text.length > 0) { - createElement('p', [], item.text, li); - } - }); - const a = createElement('a', ['btn', 'secondary', 'has-icon', 'icon-small-arrow-right-simple'], linkname, div3); - a.href = link; + if (listItems){ + listItems.map((item) => { + const li = createElement('li', [], null, ul); + if (item.headline && item.headline.length > 0) { + createElement('h3', [], item.headline, li); + } + if (item.text && item.text.length > 0) { + createElement('p', [], item.text, li); + } + }); + } + if (link) { + const a = createElement('a', ['btn', 'secondary', 'has-icon', 'icon-small-arrow-right-simple'], linkname, div3); + a.href = link; + } return div; } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/image-text/image-text.scss b/gfi-ihk-2024/stories/components/image-text/image-text.scss index 7d80352..95a401e 100644 --- a/gfi-ihk-2024/stories/components/image-text/image-text.scss +++ b/gfi-ihk-2024/stories/components/image-text/image-text.scss @@ -12,6 +12,22 @@ @media(max-width: 767px) { display: block; } + h3{ + font-size: 28px; + line-height: 120%; /* 50.4px */ + @media(min-width: 768px) { + font-size: 36px; + } + @media(min-width: 1110px) { + font-size: 42px; + } + + p { + font-size: 18px; + @media(min-width: 768px) { + font-size: 22px; + } + } + } &.colored { &:before { diff --git a/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js b/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js index 9cb2ea4..c105942 100644 --- a/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js +++ b/gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js @@ -1,7 +1,5 @@ import {createElement} from "../../_global/scripts/helpers"; import {createHeader} from "../../components/header/HeaderComponent"; -import {createPageDetails} from "../../components/page-details/PageDetailsComponent"; -import {createIntro} from "../../sections/intro/IntroComponent"; import {createTeasersSection} from "../../sections/teasers/TeasersComponent"; import {createFooter} from "../../components/footer/FooterComponent"; import {createTopicTeasersSection} from "../../sections/topic-teasers/TopicTeasersComponent"; @@ -10,9 +8,11 @@ import {createContact} from "../../components/contact/ContactComponent"; import {createEventsSection} from "../../sections/events/EventsComponent"; import {createFeature} from "../../sections/feature/FeatureComponent"; import {createImageText} from "../../components/image-text/ImageTextComponent"; - +import {createETLSlider} from "../../sections/event-teaser-large-slider/EventTeaserLargeSliderComponent"; import {createEventOverviewStage} from "../../sections/eventoverview-stage/EventOverviewStageComponent"; - +import {sliderData} from "../../sections/event-teaser-large-slider/EventTeaserLargeSliderData"; +import {createEventTeasersLarge} from "../../sections/event-teasers-large/EventTeasersLargeComponent"; +import {createSlider} from "../../sections/slider/SliderComponent"; export const createEventOverviewPage = ({ }) => { @@ -20,22 +20,37 @@ export const createEventOverviewPage = ({ page.appendChild(createHeader({})); const wrapper = createElement('div', ['page-wrapper'], null, page); - //wrapper.appendChild(createPageDetails({})); wrapper.appendChild(createEventOverviewStage({})); - wrapper.appendChild(createImageText({ - headline: 'Beratung und Service', - text: 'Wir beraten Unternehmen!', + wrapper.appendChild(createETLSlider ({ + slides : sliderData, + widemode: true, + moreCta : { + label: 'Mehr erfahren', + target: '_self', + }, + headline : 'Premium Seminare', + })); - wrapper.appendChild(createTopicTeasersSection({maxItems: 3})); - wrapper.appendChild(createTeasersSection({type: 'hero', maxItems: 2})); - wrapper.appendChild(createLinkCollection({headline: 'Meistgeklickt', addContainer: true, buttonText: null})); - wrapper.appendChild(createTopicTeasersSection({type: 'topic-linklist'})); - wrapper.appendChild(createTeasersSection({})); + const container1 = createElement('div', ['container'], null, wrapper); + container1.appendChild(createImageText({ + text: '— Karsten Meinert, Unternehmensgründer aus Musterstadt', + headline: '„Die praxisorientierten Lehrinhalte und das Engagement der Dozenten haben den Unterricht nicht nur lehrreich, sondern auch äußerst spannend gemacht.”', + link: null, + listItems : null, + smallheadline: true, + })); + wrapper.appendChild(createEventTeasersLarge({})); + //wrapper.appendChild(createTeasersSection({type: 'hero', maxItems: 2})); + //wrapper.appendChild(createLinkCollection({headline: 'Meistgeklickt', addContainer: true, buttonText: null})); + //wrapper.appendChild(createTopicTeasersSection({type: 'topic-linklist'})); + //wrapper.appendChild(createTeasersSection({})); wrapper.appendChild(createEventsSection({})); - wrapper.appendChild(createFeature({icon: null})); - wrapper.appendChild(createContact({headline: 'Ich helfe Ihnen gerne weiter', contactCount: 1, addContainer: true})) - + wrapper.appendChild(createEventTeasersLarge({})); + wrapper.appendChild(createEventTeasersLarge({})); + //wrapper.appendChild(createFeature({icon: null})); + //wrapper.appendChild(createContact({headline: 'Ich helfe Ihnen gerne weiter', contactCount: 1, addContainer: true})) + wrapper.appendChild(createSlider({})); page.appendChild(createFooter({})); return page; diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSlider.stories.js b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSlider.stories.js new file mode 100644 index 0000000..b3dba67 --- /dev/null +++ b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSlider.stories.js @@ -0,0 +1,23 @@ +import {createETLSlider} from "./EventTeaserLargeSliderComponent"; +import {sliderData} from "./EventTeaserLargeSliderData"; + +export default { + title: 'Sections/EventTeaserLargeSlider', + parameters: { + layout: 'padded', + }, + argTypes: { + slides: { + name: 'Slides', + control: {type: 'object'}, + defaultValue: sliderData, + } + } +} + +const Template = ({...args}) => { + return createETLSlider({...args}); +}; + +export const Slider = Template.bind({}); +Slider.args = {}; diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js new file mode 100644 index 0000000..507375b --- /dev/null +++ b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js @@ -0,0 +1,70 @@ +import './eventteaserlargeslider.scss'; +import {createElement} from "../../_global/scripts/helpers"; +import $ from 'jquery'; +import {createButton} from "../../atoms/button/ButtonComponent"; +import IHKETLSlider from "./eventteaserlargeslider"; +import {sliderData} from "./EventTeaserLargeSliderData"; + +export const createETLSlider = + ({ + slides = sliderData, + widemode = true, + moreCta = { + label: 'Mehr erfahren', + target: '_self', + }, + headline = 'Premium Seminare', + }) => { + + const section = createElement('section', ['rotationslider'], null); + const hcontainer = createElement('div', ['container'], null, section); + const container = createElement('div', ['container', 'right-open-container'], null, section); + if (headline && headline.length > 0) { + createElement('h1', [], headline, hcontainer); + } + const sliderComponent = createElement('div', ['eventteaserlargeslider'], null, container); + + slides.map((slideData, index) => { + const slide = createElement('div', ['slide'], null, sliderComponent); + const outer = createElement('outer', ['outer'], null, slide); + + const a = createElement('a', ['event-teaser-large'], null, outer); + if (widemode) { + a.classList.add('widemode'); + } + const blueBox = createElement('div', ['blue-box'], null, a); + const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a); + createElement('div', ['icon-box', 'pictogram-' + slideData.icon.toLowerCase().split(' ').join('-')], null, blueBox); + createElement('p', ['ev-title'], slideData.title, blueBox); + createElement('p', ['ev-cat'], slideData.category, blueBox); + createElement('p', ['ev-desc'], slideData.desc, textBox); + const detailBox = createElement('div', ['detail-box'], null, textBox); + if (slideData.details) { + for (const [key, value] of Object.entries(slideData.details)) { + if (typeof value === 'string') { + createElement('div', [key], value, detailBox); + } else if (typeof value === 'object') { + createElement('div', [key, value.type], value.label, detailBox); + } + } + } + if (moreCta) { + detailBox.appendChild(createButton({ + label: moreCta.label, + link: slideData.link, + color: 'primary', + size: 'small', + })) + } + if (slideData.bgimage && slideData.bgimage .length > 0) { + blueBox.style = 'background-image: url(' + slideData.bgimage + ');'; + blueBox.classList.add('background-image'); + } + + a.href = slideData.link; + }) + + new IHKETLSlider($(section)); + + return section; + } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js new file mode 100644 index 0000000..866cf2a --- /dev/null +++ b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderData.js @@ -0,0 +1,63 @@ +export const EventTeaserLargeTitles = [ + 'Basisseminar – Besser informiert in die Selbstständigkeit', + 'NBank-Beratungssprechtag in Göttingen', + 'Aktuelle Änderungen im Zoll- und Aussenwirtschaftsrecht zum Jahreswechsel 2022/2023', + 'Social Media Manager/-in (IHK) - Webinar', +] + +export const EventTeaserLargeStatus = [ + { + type: 'reserved', + label: 'Anmeldefrist abgelaufen', + }, + { + type: 'waiting-list', + label: 'Warteliste', + }, + { + type: 'open', + label: 'Freie Plätze vorhanden', + } +] +export const sliderData = [ + { + date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' }, + title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)], + desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', + link: '#', + details: { + date: '20.09.2022', + status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)], + }, + icon: 'Roboter', + category: 'Gründung und Nachfolge', + bgimage: null, + }, + { + date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' }, + title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)], + desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', + link: '#', + details: { + date: '20.09.2022', + status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)], + }, + icon: 'Roboter', + category: 'Gründung und Nachfolge', + bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648', + }, + { + date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' }, + title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)], + desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', + link: '#', + details: { + date: '20.09.2022', + status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)], + }, + icon: 'Roboter', + category: 'Gründung und Nachfolge', + bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648', + } +] + diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.js b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.js new file mode 100644 index 0000000..eadcef8 --- /dev/null +++ b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.js @@ -0,0 +1,29 @@ +import $ from 'jquery'; +import 'jquery.easing'; +import Slider from "../slider/slider"; + +class IHKETLSlider { + constructor(section) { + this.section = section.addClass('initiated'); + this.slides = section.children(); + this.slider = new Slider(section.find('.eventteaserlargeslider')); + this.stringLength = 0; + + this.slider.section.on('in-viewport slide-change', () => { + const curr = this.slider.currentSlide; + if (this.slides[curr].hasCounter) { + this.startCounter(curr); + } + }) + } +} + +export default IHKETLSlider; + +$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () { + $('.rotationslider:not(.initiated)').each(function() { + new IHKETLSlider($(this)); + }); +}); + + diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss new file mode 100644 index 0000000..a2126cc --- /dev/null +++ b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss @@ -0,0 +1,230 @@ +@import '../../_global/styles/mixins'; +@import '../../_global/styles/vars'; +@import '../../components/event-teaser-large/event-teaser-large.scss'; + +.right-open-container{ + + @media (min-width: 1000px) { + width: calc((var(--container-width) / 2) + 50vw - var(--col-padding)); + margin-left:auto; + margin-right:0; + padding-right:0; + } +} + +.eventteaserlargeslider { + opacity: 0; + transition: opacity 0.4s linear; + &.initiated { + opacity: 1; + } + + &.single-slide { + .controls { + display: none; + } + } + + .slide-overflow { + overflow: hidden; + transition: height 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); + } + + img.loading { + opacity: 0; + } + + img.loaded { + transition: 0.3s ease; + opacity: 1; + } + + .slide-wrapper { + position: relative; + display: flex; + align-items: flex-start; + width: 80000px; + contain: layout; + margin:0 calc(var(--col-padding) * -1); + @media(max-width: 999px) { + width: 10000%; + margin:0; + } + &.no-transition { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + .image-box:after { + content: ""; + @include full-size; + z-index: 2; + } + } + + img, a { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-user-drag: none; + -moz-user-drag: none; + } + } + + .slide { + position: relative; + width:1%; + max-width:1%; + min-width:1%; + min-height:400px; + + @media(min-width: 1000px) { + padding:var(--col-padding); + } + } + + .prev-clone, + .next-clone { + position: absolute; + display: flex; + width: 100%; + } + + .prev-clone { + position: absolute; + right: 100%; + justify-content: flex-end; + } +} + +.rotationslider{ + margin-bottom:calc(var(--section-margin) + 2rem) !important; +} + +.rotationslider h1{ + max-width: 50%; + display: inline-block; +} + +.rotationslider .eventteaserlargeslider { + margin-bottom:2rem; + position: relative; + display: block; + + button { + border: 0; + background-color: transparent; + padding: 0; + cursor: pointer; + + } + .slider-tabs, .tabs { + position: absolute; + bottom: -2rem; + left: 50%; + right: 0; + padding: 0; + list-style: none; + transform: translate(-50%, 0); + text-align: center; + font-size: 0; + line-height: 0; + margin: 0; + li { + display: inline-block; + vertical-align: top; + + &.active button:before { + background-color: var(--theme-color-primary); + box-shadow: 0 0 0 2px var(--theme-color-primary); + } + } + + .btn { + --button-min-size: 24px; + font-size: 0; + line-height: 0; + display: flex; + align-items: center; + justify-content: center; + + &::before { + content: ""; + position: relative; + display: block; + width: 10px; + height: 10px; + border: 2px solid var(--theme-color-primary); + border-radius: 5px; + transition: 0.2s ease; + } + + &::after { + display: none; + } + + &:hover { + background-color: transparent; + + &::before { + background-color: var(--theme-color-primary); + } + } + } + } + + .prev, .next { + position: absolute; + top: -94px; + width: 60px; + height: 60px; + text-align: center; + line-height: 60px; + left: calc(var(--container-width) - 2 * var(--container-padding) - 60px); + color: var(--theme-color-primary); + right:auto; + border-radius: 24px; + background: var(--theme-color-primary-dimmed-04); + @media(max-width: 1580px) { + left:auto; + right: var(--container-padding); + } + @media(max-width: 1339px) { + top: -90px; + } + @media(max-width: 999px) { + right:0px; + top: -80px; + } + @media(max-width: 767px) { + + } + &:before { + @include icon-small-arrow-right-simple; + font-family: "Icons", sans-serif; + font-size: 30px; + } + } + + .prev { + left: calc(var(--container-width) - 2 * var(--container-padding) - 140px); + transform: rotate(180deg); + @media(max-width: 1580px) { + left:auto; + right:calc(var(--container-padding) + 80px); + } + @media(max-width: 999px) { + right:80px; + } + } + .count{ + display:none; + } + h2, .like-h2 { + margin-top: 0.3em; + margin-bottom: 0.4em; + } + +} diff --git a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLarge.stories.js b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLarge.stories.js new file mode 100644 index 0000000..027f267 --- /dev/null +++ b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLarge.stories.js @@ -0,0 +1,37 @@ +import {EventTeasersLargeData} from "./EventTeasersLargeData"; +import {createEventTeasersLarge} from "./EventTeasersLargeComponent"; + +export default { + title: 'Sections/Event Teasers Large', + parameters: { + layout: 'fullscreen', + }, + args: { + headline: 'Gründung und Nachfolge', + subheadline: 'Egal, ob Startup oder Unternehmensnachfolge – mit unseren Ressourcen legen Sie den Grundstein für eine erfolgreiche Unternehmenszukunft.', + count: 9, + items: EventTeasersLargeData, + buttonLabel: 'Mehr Veranstaltungen zu Gründung und Nachfolge', + }, + argTypes: { + headline: { + name: 'Überschrift', + }, + count: { + name: 'Anzahl aller Beteiligungen', + }, + items: { + name: 'Teaser', + }, + buttonLabel: { + name: 'Button Label', + } + }, +} + +const Template = ({...args}) => { + return createEventTeasersLarge({...args}); +}; + +export const EventTeasersLarge = Template.bind({}); +EventTeasersLarge.args = {}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js new file mode 100644 index 0000000..5dc4011 --- /dev/null +++ b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeComponent.js @@ -0,0 +1,41 @@ +import './event-teasers-large.scss'; +import {EventTeasersLargeData} from "./EventTeasersLargeData"; +import {createElement} from "../../_global/scripts/helpers"; +import {createButton} from "../../atoms/button/ButtonComponent"; +import {createEventTeaserLarge} from "../../components/event-teaser-large/EventTeaserLargeComponent"; + +export const createEventTeasersLarge = ({ + headline = 'Gründung und Nachfolge', + subheadline = 'Egal, ob Startup oder Unternehmensnachfolge – mit unseren Ressourcen legen Sie den Grundstein für eine erfolgreiche Unternehmenszukunft.', + count = 9, + widemode = false, + events = EventTeasersLargeData, + buttonLabel = 'Alle aktuellen Beteiligungen', +}) => { + const section = createElement('section', ['event-teasers-large']); + const hlContainer = createElement('div', ['container'], null, section); + const hl = createElement('h2', [], headline, hlContainer); + const shl = createElement('p', [], subheadline, hlContainer); + const wrapper = createElement('div', ['overflow-wrapper'], null, section); + const container = createElement('div', ['container'], null, wrapper); + const row = createElement('div', ['row'], null, container); + + + events.map((event, index) => { + if (index < 3 && index < count) { + const col = createElement('div', ['col'], null, row); + const teaser = createEventTeaserLarge({ + event: event, widemode : widemode, + }) + col.appendChild(teaser); + } + }) + + if (count > 3) { + const all = createElement('div', ['all-participations'], null, section); + const btn = createButton({label:buttonLabel}); + all.appendChild(btn); + } + + return section; +} \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeData.js b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeData.js new file mode 100644 index 0000000..3485084 --- /dev/null +++ b/gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLargeData.js @@ -0,0 +1,65 @@ + + export const EventTeaserLargeTitles = [ + 'Basisseminar – Besser informiert in die Selbstständigkeit', + 'NBank-Beratungssprechtag in Göttingen', + 'Aktuelle Änderungen im Zoll- und Aussenwirtschaftsrecht zum Jahreswechsel 2022/2023', + 'Social Media Manager/-in (IHK) - Webinar', + ] + + export const EventTeaserLargeStatus = [ + { + type: 'reserved', + label: 'Anmeldefrist abgelaufen', + }, + { + type: 'waiting-list', + label: 'Warteliste', + }, + { + type: 'open', + label: 'Freie Plätze vorhanden', + } + ] + export const EventTeasersLargeData = [ + { + date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' }, + title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)], + desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', + link: '#', + details: { + date: '20.09.2022', + status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)], + }, + icon: 'Roboter', + category: 'Gründung und Nachfolge', + bgimage: null, + }, + { + date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' }, + title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)], + desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', + link: '#', + details: { + date: '20.09.2022', + status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)], + }, + icon: 'Roboter', + category: 'Gründung und Nachfolge', + bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648', + }, + { + date: { weekday: 'Mo.', day: '20', month: 'Sep. 2022' }, + title: EventTeaserLargeTitles[Math.floor(Math.random() * EventTeaserLargeTitles.length)], + desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', + link: '#', + details: { + date: '20.09.2022', + status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)], + }, + icon: 'Roboter', + category: 'Gründung und Nachfolge', + bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648', + } + ] + + \ No newline at end of file diff --git a/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss b/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss new file mode 100644 index 0000000..f1cd663 --- /dev/null +++ b/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss @@ -0,0 +1,81 @@ +@import '../../_global/styles/mixins'; +@import '../../_global/styles/vars'; + +.event-teasers-large { + position: relative; + display: block; + padding: var(--section-padding) 0; + //margin: 0; + background-color: var(--theme-color-primary-dimmed-04); + + @media(max-width: 767px) { + margin-top: 24px; + } + + h2, .like-h2 { + margin-top: var(--section-headline-margin); + margin-bottom:10px; + } + + .row { + flex-wrap: wrap; + margin: calc(var(--col-padding) * -1); + padding-top: 0.3em; + + @media(max-width: 999px) { + &::after { + content: ''; + position: relative; + display: block; + min-width: 50px; + } + } + @media(max-width: 767px) { + margin-left: -6px; + margin-right: -6px; + } + } + + .col { + position: relative; + display: flex; + flex: 1 1 33.3333%; + max-width: 33.3333%; + + &:first-child { + margin-left: auto; + } + + &:last-child { + margin-right: auto; + } + + @media(max-width: 999px) { + flex: 1 1 50%; + max-width: 50%; + + &:last-child { + display:none; + } + } + @media(max-width: 767px) { + + } + @media(max-width: 567px) { + flex: 1 1 100%; + max-width: 100%; + + &:last-child { + display:block; + } + } + @media(max-width: 359px) { + + } + } + + .all-participations { + text-align: center; + margin: calc(var(--col-padding) + 1.5em) 0 0; + } +} \ No newline at end of file