Event Overview Page

gfi-ihk-2024/stories/pages/event-overview/EventOverviewPage.js

@@ -11,7 +11,8 @@ 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 = ({
 
 }) => {
@@ -39,15 +40,17 @@ export const createEventOverviewPage = ({
     listItems : null,
     smallheadline: true,
   }));
-  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({}));
+  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/EventTeaserLargeSliderComponent.js

@@ -16,7 +16,7 @@ export const createETLSlider =
     headline = 'Premium Seminare',
   }) => {
 
-    const section = createElement('section', ['rotation'], null);
+    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) {

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

@@ -21,7 +21,7 @@ class IHKETLSlider {
 export default IHKETLSlider;
 
 $('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
-  $('.rotation:not(.initiated)').each(function() {
+  $('.rotationslider:not(.initiated)').each(function() {
     new IHKETLSlider($(this));
   });
 });

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

@@ -3,8 +3,9 @@
 @import '../../components/event-teaser-large/event-teaser-large.scss';
 
 .right-open-container{
+  
   @media (min-width: 1000px) {
-    width: calc((var(--container-width) / 2) + 50vw - 20px);
+    width: calc((var(--container-width) / 2) + 50vw - var(--col-padding));
     margin-left:auto;
     margin-right:0;
     padding-right:0;
@@ -44,7 +45,7 @@
     align-items: flex-start;
     width: 80000px;
     contain: layout;
-    margin:0 -15px;
+    margin:0 calc(var(--col-padding) * -1);
     @media(max-width: 999px) {
       width: 10000%;
       margin:0;
@@ -80,7 +81,7 @@
     min-height:400px;
     
     @media(min-width: 1000px) {
-      padding:0 15px;
+      padding:var(--col-padding);
     }
   }
 
@@ -98,12 +99,16 @@
   }
 }
 
-.rotation h1{
+.rotationslider{
+  margin-bottom:calc(var(--section-margin) + 2rem) !important;
+}
+
+.rotationslider h1{
   max-width: 50%;
   display: inline-block;
 }
 
-.rotation .eventteaserlargeslider  {
+.rotationslider .eventteaserlargeslider  {
   margin-bottom:2rem;
   position: relative;
   display: block;

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

@@ -8,6 +8,7 @@ export default {
   },
   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',

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

@@ -6,6 +6,7 @@ import {createEventTeaserLarge} from "../../components/event-teaser-large/EventT
 
 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,
@@ -14,6 +15,7 @@ export const createEventTeasersLarge = ({
   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);
@@ -23,7 +25,7 @@ export const createEventTeasersLarge = ({
     if (index < 3 && index < count) {
       const col = createElement('div', ['col'], null, row);
       const teaser = createEventTeaserLarge({
-        ...event, widemode : widemode,
+        event: event, widemode : widemode,
       })
       col.appendChild(teaser);
     }

gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss

@@ -5,7 +5,7 @@
   position: relative;
   display: block;
   padding: var(--section-padding) 0;
-  margin: 0;
+  //margin: 0;
   background-color: var(--theme-color-primary-dimmed-04);
 
   @media(max-width: 767px) {
@@ -14,10 +14,11 @@
 
   h2, .like-h2 {
     margin-top: var(--section-headline-margin);
+    margin-bottom:10px;
   }
 
   .row {
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     margin: calc(var(--col-padding) * -1);
     padding-top: 0.3em;
 
@@ -52,19 +53,24 @@
     @media(max-width: 999px) {
       flex: 1 1 50%;
       max-width: 50%;
-      min-width: 44vw;
+    
+      &:last-child {
+        display:none;
+      }
     }
     @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;
+    
+      &:last-child {
+        display:block;
+      }
     }
     @media(max-width: 359px) {
-      min-width: 300px;
+   
     }
   }