Event Teaser Large Slider Finalisierung + Neue Section Event Teasers Large

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,8 +8,9 @@ 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";
 
 export const createEventOverviewPage = ({
 
@@ -20,12 +19,25 @@ 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',
+    
+  }));
+  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(createTopicTeasersSection({maxItems: 3}));
   wrapper.appendChild(createTeasersSection({type: 'hero', maxItems: 2}));

gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSlider.stories.js

@@ -1,4 +1,4 @@
-import {createSlider} from "./EventTeaserLargeSliderComponent";
+import {createETLSlider} from "./EventTeaserLargeSliderComponent";
 import {sliderData} from "./EventTeaserLargeSliderData";
 
 export default {
@@ -16,7 +16,7 @@ export default {
 }
 
 const Template = ({...args}) => {
-  return createSlider({...args});
+  return createETLSlider({...args});
 };
 
 export const Slider = Template.bind({});

gfi-ihk-2024/stories/sections/event-teaser-large-slider/EventTeaserLargeSliderComponent.js

@@ -5,7 +5,7 @@ import {createButton} from "../../atoms/button/ButtonComponent";
 import IHKETLSlider from "./eventteaserlargeslider";
 import {sliderData} from "./EventTeaserLargeSliderData";
 
-export const createSlider =
+export const createETLSlider =
   ({
     slides = sliderData,
     widemode = true,

gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss

@@ -3,16 +3,17 @@
 @import '../../components/event-teaser-large/event-teaser-large.scss';
 
 .right-open-container{
-  width: calc((var(--container-width) / 2) + 50vw - 20px);
-  margin-left:auto;
-  margin-right:0;
-  padding-right:0;
+  @media (min-width: 1000px) {
+    width: calc((var(--container-width) / 2) + 50vw - 20px);
+    margin-left:auto;
+    margin-right:0;
+    padding-right:0;
+  }
 }
 
 .eventteaserlargeslider {
   opacity: 0;
   transition: opacity 0.4s linear;
-
   &.initiated {
     opacity: 1;
   }
@@ -44,6 +45,10 @@
     width: 80000px;
     contain: layout;
     margin:0 -15px;
+    @media(max-width: 999px) {
+      width: 10000%;
+      margin:0;
+    }
     &.no-transition {
       -webkit-user-select: none;
       -moz-user-select: none;
@@ -69,13 +74,14 @@
 
   .slide {
     position: relative;
-    //width: 100% !important;
     width:1%;
     max-width:1%;
     min-width:1%;
-    //max-width: 800px !important;
     min-height:400px;
-    padding:0 15px;
+    
+    @media(min-width: 1000px) {
+      padding:0 15px;
+    }
   }
 
   .prev-clone,
@@ -92,6 +98,11 @@
   }
 }
 
+.rotation h1{
+  max-width: 50%;
+  display: inline-block;
+}
+
 .rotation .eventteaserlargeslider  {
   margin-bottom:2rem;
   position: relative;
@@ -116,11 +127,6 @@
     font-size: 0;
     line-height: 0;
     margin: 0;
-
-    @media(max-width: 567px) {
-      margin-bottom: 12px;
-    }
-
     li {
       display: inline-block;
       vertical-align: top;
@@ -166,22 +172,30 @@
   
   .prev, .next {
     position: absolute;
-    top: -100px;
+    top: -94px;
     width: 60px;
     height: 60px;
     text-align: center;
     line-height: 60px;
     left: calc(var(--container-width) - 2 * var(--container-padding) - 60px);
-    //margin: -25px 10px;
     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) {
-      display: none;
+    
     }
-
     &:before {
       @include icon-small-arrow-right-simple;
       font-family: "Icons", sans-serif;
@@ -192,6 +206,13 @@
   .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;

gfi-ihk-2024/stories/sections/event-teasers-large/EventTeasersLarge.stories.js

@@ -0,0 +1,36 @@
+import {EventTeasersLargeData} from "./EventTeasersLargeData";
+import {createEventTeasersLarge} from "./EventTeasersLargeComponent";
+
+export default {
+  title: 'Sections/Event Teasers Large',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    headline: 'Gründung und Nachfolge',
+    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,39 @@
+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',
+  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 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, 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,75 @@
+@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);
+  }
+
+  .row {
+    flex-wrap: nowrap;
+    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%;
+      min-width: 44vw;
+    }
+    @media(max-width: 767px) {
+      padding: 6px;
+      min-width: calc(50vw - 30px);
+    }
+    @media(max-width: 567px) {
+      flex: 1 1 100%;
+      max-width: 100%;
+      min-width: 320px;
+    }
+    @media(max-width: 359px) {
+      min-width: 300px;
+    }
+  }
+
+  .all-participations {
+    text-align: center;
+    margin: calc(var(--col-padding) + 1.5em) 0 0;
+  }
+}