Pfeile Event Teaser Large Slider, Icons einsetzen Event Overview Stage

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

@@ -1,18 +1,14 @@
 import {createElement} from "../../_global/scripts/helpers";
 import {createHeader} from "../../components/header/HeaderComponent";
-import {createTeasersSection} from "../../sections/teasers/TeasersComponent";
 import {createFooter} from "../../components/footer/FooterComponent";
-import {createTopicTeasersSection} from "../../sections/topic-teasers/TopicTeasersComponent";
-import {createLinkCollection} from "../../components/link-collection/LinkCollectionComponent";
-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";
+import {EventTeasersLargeSixData} from "../../sections/event-teasers-large/EventTeasersLargeData";
 export const createEventOverviewPage = ({
 
 }) => {
@@ -41,15 +37,9 @@ export const createEventOverviewPage = ({
     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(createEventTeasersLarge({}));
-  wrapper.appendChild(createEventTeasersLarge({}));
-  //wrapper.appendChild(createFeature({icon: null}));
-  //wrapper.appendChild(createContact({headline: 'Ich helfe Ihnen gerne weiter', contactCount: 1, addContainer: true}))
+  wrapper.appendChild(createEventTeasersLarge({events: EventTeasersLargeSixData}));
   wrapper.appendChild(createSlider({}));
   page.appendChild(createFooter({}));
 

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

@@ -11,7 +11,11 @@
     padding-right:0;
   }
 }
-
+.slider-tabs{
+    width: calc(var(--container-width) - 2 * var(--container-padding));
+    left: 0 !important;
+    transform: none !important;
+}
 .eventteaserlargeslider {
   opacity: 0;
   transition: opacity 0.4s linear;
@@ -187,7 +191,7 @@
     right:auto;
     border-radius: 24px;
     background: var(--theme-color-primary-dimmed-04);
-    @media(max-width: 1580px) {
+    @media(max-width: 1470px) {
       left:auto;
       right: var(--container-padding);
     }
@@ -205,13 +209,14 @@
       @include icon-small-arrow-right-simple;
       font-family: "Icons", sans-serif;
       font-size: 30px;
+      content: "\e825";
     }
   }
 
   .prev {
     left: calc(var(--container-width) - 2 * var(--container-padding) - 140px);
     transform: rotate(180deg);
-    @media(max-width: 1580px) {
+    @media(max-width: 1470px) {
       left:auto;
       right:calc(var(--container-padding) + 80px);
     }

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

@@ -1,4 +1,4 @@
-import {EventTeasersLargeData} from "./EventTeasersLargeData";
+import {EventTeasersLargeData, EventTeasersLargeImageData, EventTeasersLargeSixData} from "./EventTeasersLargeData";
 import {createEventTeasersLarge} from "./EventTeasersLargeComponent";
 
 export default {
@@ -10,7 +10,7 @@ export default {
     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,
+    events: EventTeasersLargeData,
     buttonLabel: 'Mehr Veranstaltungen zu Gründung und Nachfolge',
   },
   argTypes: {
@@ -34,4 +34,14 @@ const Template = ({...args}) => {
 };
 
 export const EventTeasersLarge = Template.bind({});
-EventTeasersLarge.args = {};
+EventTeasersLarge.args = {};
+
+export const EventTeasersLargeImage = Template.bind({});
+EventTeasersLargeImage.args = {
+  events: EventTeasersLargeImageData,
+};
+
+export const EventTeasersLargeSix = Template.bind({});
+EventTeasersLargeSix.args = {
+  events: EventTeasersLargeSixData,
+};

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

@@ -22,7 +22,7 @@ export const createEventTeasersLarge = ({
 
 
   events.map((event, index) => {
-    if (index < 3 && index < count) {
+    if (index < 6 && index < count) {
       const col = createElement('div', ['col'], null, row);
       const teaser = createEventTeaserLarge({
         event: event, widemode : widemode,

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

@@ -4,9 +4,23 @@
     'NBank-Beratungssprechtag in Göttingen',
     'Aktuelle Änderungen im Zoll- und Aussenwirtschaftsrecht zum Jahreswechsel 2022/2023',
     'Social Media Manager/-in (IHK) - Webinar',
+    'NBank-Beratungssprechtag in Göttingen',
+    'Basisseminar – Besser informiert in die Selbstständigkeit',
   ]
   
   export const EventTeaserLargeStatus = [
+    {
+      type: 'reserved',
+      label: 'Anmeldefrist abgelaufen',
+    },
+    {
+      type: 'waiting-list',
+      label: 'Warteliste',
+    },
+    {
+      type: 'open',
+      label: 'Freie Plätze vorhanden',
+    },
     {
       type: 'reserved',
       label: 'Anmeldefrist abgelaufen',
@@ -34,6 +48,48 @@
       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: 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: null,
+    }
+  ]
+  
+  export const EventTeasersLargeImageData = [
+    {
+      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)],
@@ -61,5 +117,84 @@
       bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
     }
   ]
-  
-  
+
+  export const EventTeasersLargeSixData = [
+    {
+      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: 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: 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: 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: 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: null,
+    }
+  ]

gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStage.stories.js

@@ -7,8 +7,8 @@ export default {
   },
   args: {
     backgroundImage: null,
-    kicker: 'Noch 7 Tage offen',
-    headline: 'Jetzt und digital mitreden',
+    kicker: 'Das Veranstaltungsportal der IHK Musterstadt',
+    headline: 'Veranstaltungsportal',
   },
   argTypes: {
     kicker: {

gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageData.js

@@ -1,11 +1,11 @@
 export const eventOverviewStageData = [
   {
     title: 'Alles für Gründer',
-    icon: 'Foundation',
+    icon: 'Person',
   },
   {
     title: 'Alles Wichtige zum Brexit',
-    icon: 'Brexit',
+    icon: 'Stadt',
   },
   {
     title: 'Schwerpunkt­thema Digitalisierung',
@@ -13,7 +13,7 @@ export const eventOverviewStageData = [
   },
   {
     title: 'Schwerpunkt­thema Nachfolge',
-    icon: 'Uebergabe',
+    icon: 'Treppe',
   },
   {
     title: 'Alle wichtigen Infos zum Corona-Virus',
@@ -21,6 +21,6 @@ export const eventOverviewStageData = [
   },
   {
     title: 'Alles für Auszubildende',
-    icon: 'Wissen',
+    icon: 'Waage',
   },
 ]