Merge branch 'master' of ssh://gitea.spawntree.de:1122/spawntree/ihk24

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;
+        }
       }
     }
   }

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;
   }

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 {

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;

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 = {};

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;
+  }

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',
+  }
+]
+

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));
+  });
+});
+
+

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;
+  }
+
+}

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 = {};

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;
+}

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',
+    }
+  ]
+  
+  

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;
+  }
+}