Höhe Blue Box Event Teasers, Texte

gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeData.js

@@ -1,7 +1,7 @@
 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',
+  'Vertiefungsseminar zur Existenzgründung',
+  'Erfolgreiche Unternehmensgründung: Strategien und Fallstudien',
+  'Nachhaltige Firmenübergabe',
   'Social Media Manager/-in (IHK) - Webinar',
 ]
 

gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss

@@ -9,8 +9,16 @@
   transition: 0.3s ease;
   text-decoration: none;
   min-height:400px;
-  //max-width:800px;
+
   flex-wrap: wrap;
+  &:not(.widemode){
+    flex-wrap: wrap;
+    align-content: baseline;
+    flex-flow: column;
+    justify-content: flex-start;
+    background-color: var(--theme-grey-light);
+
+  }
   @include focus-visible;
 
   &:hover {

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

@@ -1,5 +1,5 @@
 import {createETLSlider} from "./EventTeaserLargeSliderComponent";
-import {sliderData} from "./EventTeaserLargeSliderData";
+import {sliderData,sliderImageData} from "./EventTeaserLargeSliderData";
 
 export default {
   title: 'Sections/EventTeaserLargeSlider',
@@ -21,3 +21,6 @@ const Template = ({...args}) => {
 
 export const Slider = Template.bind({});
 Slider.args = {};
+
+export const SliderWithImage = Template.bind({});
+SliderWithImage.args = {slides: sliderImageData};

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

@@ -1,7 +1,7 @@
 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',
+  'Vertiefungsseminar zur Existenzgründung',
+  'Erfolgreiche Unternehmensgründung: Strategien und Fallstudien',
+  'Nachhaltige Firmenübergabe',
   'Social Media Manager/-in (IHK) - Webinar',
 ]
 
@@ -26,7 +26,7 @@ export const sliderData = [
     desc: 'Entfesseln Sie das volle Potenzial der generativen KI  und beherrschen Sie die Kunst des Prompt-Engineerings!',
     link: '#',
     details: {
-      date: '20.09.2022',
+      date: '20.09.2024',
       status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)],
     },
     icon: 'Roboter',
@@ -39,11 +39,40 @@ export const sliderData = [
     desc: 'Entfesseln Sie das volle Potenzial der generativen KI  und beherrschen Sie die Kunst des Prompt-Engineerings!',
     link: '#',
     details: {
-      date: '20.09.2022',
+      date: '20.09.2024',
       status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)],
     },
     icon: 'Roboter',
-    category: 'Gründung und Nachfolge',
+    category: 'Innovation und Umwelt',
+    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.2024',
+      status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)],
+    },
+    icon: 'Roboter',
+    category: 'Aus- und Weiterbildung',
+    bgimage: null,
+  }
+]
+
+export const sliderImageData = [
+  {
+    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.2024',
+      status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)],
+    },
+    icon: 'Roboter',
+    category: 'Aus- und Weiterbildung',
     bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
   },
   {
@@ -52,12 +81,24 @@ export const sliderData = [
     desc: 'Entfesseln Sie das volle Potenzial der generativen KI  und beherrschen Sie die Kunst des Prompt-Engineerings!',
     link: '#',
     details: {
-      date: '20.09.2022',
+      date: '20.09.2024',
       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.2024',
+      status: EventTeaserLargeStatus[Math.floor(Math.random() * EventTeaserLargeStatus.length)],
+    },
+    icon: 'Roboter',
+    category: 'Innovation und Umwelt',
+    bgimage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648',
   }
 ]
-

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

@@ -11,17 +11,18 @@
     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;
   &.initiated {
     opacity: 1;
   }
+  .slider-tabs{
+    width: calc(var(--container-width) - 2 * var(--container-padding));
+    left: 0 !important;
+    transform: none !important;
+}
 
   &.single-slide {
     .controls {

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

@@ -1,8 +1,8 @@
 
   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',
+    'Vertiefungsseminar zur Existenzgründung',
+    'Erfolgreiche Unternehmensgründung: Strategien und Fallstudien',
+    'Nachhaltige Firmenübergabe',
     'Social Media Manager/-in (IHK) - Webinar',
     'NBank-Beratungssprechtag in Göttingen',
     'Basisseminar – Besser informiert in die Selbstständigkeit',

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

@@ -11,8 +11,8 @@ import IHKEventOverviewTiles from "./eventoverview";
 
 export const createEventOverviewStage = ({
   backgroundImage = null,
-  kicker = 'Noch 7 Tage offen',
-  headline = 'Jetzt und digital mitreden',
+  kicker = 'Das Veranstaltungsportal der IHK Musterstadt',
+  headline = 'Veranstaltungsportal',
   maxItems = 6,
   placeholder = 'Veranstaltungssuche, z.B. „Existenzgründung”',
   api = 'services/search/{SEARCHTERM}.json',

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

@@ -1,26 +1,26 @@
 export const eventOverviewStageData = [
   {
-    title: 'Alles für Gründer',
+    title: 'Aus- und Weiterbildung',
     icon: 'Person',
   },
   {
-    title: 'Alles Wichtige zum Brexit',
+    title: 'Alles für Gründer',
     icon: 'Stadt',
   },
   {
-    title: 'Schwerpunkt­thema Digitalisierung',
+    title: 'Innovation und Umwelt',
     icon: 'Roboter',
   },
   {
-    title: 'Schwerpunkt­thema Nachfolge',
+    title: 'International',
     icon: 'Treppe',
   },
   {
-    title: 'Alle wichtigen Infos zum Corona-Virus',
+    title: 'Recht und Steuern',
     icon: 'Virus',
   },
   {
-    title: 'Alles für Auszubildende',
+    title: 'Fachveranstaltungen und Branchen- veranstaltungen',
     icon: 'Waage',
   },
 ]

gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss

@@ -205,17 +205,16 @@ background: linear-gradient(0deg, 0%, 100%), linear-gradient(88deg, #003366 0%,
     flex: 1 1 16.6666666667%;
     max-width: 16.6666666667%;
     padding: 10px;
-    @media(max-width: 1080px) {
+    @media(max-width: 1480px) {
       flex: 1 1 33.3333333333%;
       max-width: 33.3333333333%;
     }
     @media(max-width: 767px) {
       padding: 6px;
-    }
-    @media(max-width: 567px) {
       flex: 1 1 50%;
       max-width: 50%;
     }
+ 
     
     .topic-teaser{
       --topic-tile-padding: 10px;