flockler

gfi-ihk-2024/stories/components/flockler/FlocklerComponent.js

@@ -4,7 +4,7 @@ import {createElement} from "../../_global/scripts/helpers";
 export const createFlockler = ({
     isCarousel = true,
     backgroundColor = true,
-    headline = 'Social Media',
+    headline = 'Aktuelles aus Social Media',
 }) => {
     const flockler = createElement('div', ['flocker']);
     if (backgroundColor) {

gfi-ihk-2024/stories/components/flockler/flockler.scss

@@ -9,6 +9,9 @@
       margin-top: var(--section-headline-margin);
     }
   }
+  .flockler-carousel_v2-item__profile__name {
+    font-family: "Korb", sans-serif;
+  }
 }
 
 .has-sidebar {

gfi-ihk-2024/stories/pages/flockler/article/Article.stories.js

@@ -1,47 +0,0 @@
-import {createArticlePage} from "./ArticlePage";
-
-export default {
-  title: 'Pages/Flockler/Article Page',
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-
-  },
-}
-
-const Template = ({...args}) => {
-  return createArticlePage({...args});
-};
-
-export const ArticlePage = Template.bind({});
-ArticlePage.args = {};
-
-export const ArticlePageMicrosite = Template.bind({});
-ArticlePageMicrosite.args = {
-  styleBlock: `
-    :root {
-      --theme-color-primary: #E6007E !important;
-      --theme-color-primary-microsite: #000000 !important;
-      --theme-color-primary-rgb: 230,0,126 !important;
-      --theme-color-primary-dimmed-01: #EB3398 !important;
-      --theme-color-primary-dimmed-02: #F063B0 !important;
-      --theme-color-primary-dimmed-03: #F9BFDF !important;
-      --theme-color-primary-dimmed-04: #FCE6F2 !important;
-      --theme-color-secondary: #563F54 !important;
-      --theme-color-secondary-microsite: #E6007E !important;
-      --theme-color-secondary-intensed: #563F54 !important;
-      --theme-color-secondary-dimmed: #EEECEE !important;
-      --theme-color-neutral: #E6007E !important;
-      --theme-color-neutral-background: #EFF3F6 !important;
-      --theme-color-background: #FFFFFF !important;
-      --theme-color-text-intensed: #000000 !important;
-      --theme-color-text: #000000 !important;
-      --theme-color-link: #E6007E !important;
-      --theme-color-link-hover: #E6007E !important;
-      --theme-color-gradient-01: #E6007E !important;
-      --theme-color-gradient-02: #9f1f69 !important;
-      --theme-color-gradient-03: #563f54 !important;
-      }
-  `
-};

gfi-ihk-2024/stories/pages/flockler/article/ArticlePage.js

@@ -1,68 +0,0 @@
-import {createElement, createSidebarPage} from "../../../_global/scripts/helpers";
-import {createGallery} from "../../../components/gallery/GalleryComponent";
-import {createAccordion} from "../../../components/accordion/AccordionComponent";
-import {createContact} from "../../../components/contact/ContactComponent";
-import {SingleContactData} from "../../../components/contact/ContactData";
-import {createInfobox} from "../../../components/infobox/InfoboxComponent";
-import {createLinkCollection} from "../../../components/link-collection/LinkCollectionComponent";
-import {createSteps} from "../../../components/steps/StepsComponent";
-import {createPrintShare} from "../../../components/print-share/PrintShareComponent";
-import {createSurvey} from "../../../sections/survey/SurveyComponent";
-import {createAnchorLinks} from "../../../components/anchor-links/AnchorLinksComponent";
-import {lorem1, lorem2} from "../../../_global/scripts/lorem";
-import {createVideo} from "../../../components/video/VideoComponent";
-import {createFlockler} from "../../../components/flockler/FlocklerComponent";
-
-export const createArticlePage =
-  ({
-    styleBlock = '',
-  }) => {
-    const page = createSidebarPage({
-      breadcrumb: ['Start', 'Inhalte Level 1', 'Digitalisierung'],
-    });
-    const main = page.main;
-    const aside = page.aside;
-
-    // START Microsite Styling
-    const styleContent = styleBlock;
-    const styleElement = document.createElement('style');
-    styleElement.textContent = styleContent;
-    document.head.appendChild(styleElement);
-    // END
-
-    createElement('p', ['kicker'], 'Förderung', main);
-    createElement('h1', [], 'Finanzierung und Förderung für digitale Projekte', main);
-    createElement('p', ['initial', 'strong'], 'Mehrere Programme unterstützen bei der Digitalisierung und Umsetzung Ihrer innovativen Ideen. Es gibt sowohl Förderungen für eine begleitenden Beratung als auch für Investitionen und Betriebsmittel.', main);
-
-    main.appendChild(createAnchorLinks({}));
-
-    createElement('h2', [], 'Beratungsförderung zur Digitalisierung', main);
-    createElement('p', [], 'Beim Förderprogramm go-digital handelt es sich um eine. Das <a href="#">go-digital Förderprogramm</a> richtet sich an Unternehmen mit weniger als 100 Beschäftigten. Gefördert werden die Bereiche IT-Sicherheit, digitale Markterschließung und digitalisierte Geschäftsprozesse.', main);
-    createElement('p', [], lorem1, main);
-
-    main.appendChild(createGallery({}));
-    //main.appendChild(createSteps({}));
-
-    main.appendChild(createFlockler({backgroundColor: false}));
-
-    main.appendChild(createFlockler({isCarousel: false}));
-
-    main.appendChild(createAccordion({}));
-
-    createElement('h2', [], 'Eine weitere Headline zwischendurch', main);
-    createElement('p', [], lorem1, main);
-    main.appendChild(createVideo({}));
-    createElement('p', [], lorem2, main);
-
-    main.appendChild(createInfobox({type: 'success'}));
-    main.appendChild(createInfobox({type: 'warning'}));
-    main.appendChild(createInfobox({type: 'error'}));
-    main.appendChild(createSurvey({}));
-    main.appendChild(createLinkCollection({}));
-    main.appendChild(createContact({}));
-    main.appendChild(createPrintShare({}));
-
-    aside.appendChild(createContact({headline: 'Kontakt', contacts: SingleContactData}));
-
-    return page.page;
-  }

gfi-ihk-2024/stories/pages/flockler/topic/Topic.stories.js

@@ -0,0 +1,18 @@
+import {createTopicPage} from "./TopicPage";
+
+export default {
+  title: 'Pages/Flockler/Topic Page',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+
+  },
+}
+
+const Template = ({...args}) => {
+  return createTopicPage({...args});
+};
+
+export const TopicPage = Template.bind({});
+TopicPage.args = {};

gfi-ihk-2024/stories/pages/flockler/topic/TopicPage.js

@@ -0,0 +1,43 @@
+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";
+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 {createFlockler} from "../../../components/flockler/FlocklerComponent";
+
+export const createTopicPage = ({
+
+}) => {
+  const page = createElement('div', ['page']);
+  page.appendChild(createHeader({}));
+
+  const wrapper = createElement('div', ['page-wrapper'], null, page);
+  wrapper.appendChild(createPageDetails({}));
+  wrapper.appendChild(createIntro({
+    headline: 'Beratung und Service',
+    kicker: null,
+    copy: 'Wir beraten Unternehmen – ganz gleich, ob Sie Fragen zur Grün­dung haben, Fördermittel beantragen oder expandieren möchten. Wir stehen Ihnen in allen Phasen der Unter­nehmens­entwick­lung mit Rat und Tat zur Seite und sind Ihre erste Anlaufstelle. Verschaffen Sie sich einen Überblick über unsere Service- und Beratungs­angebote!',
+    capitalInitial: true,
+  }));
+  wrapper.appendChild(createTopicTeasersSection({maxItems: 3}));
+  wrapper.appendChild(createTeasersSection({type: 'hero', maxItems: 2}));
+  wrapper.appendChild(createFlockler({backgroundColor: false}));
+
+  wrapper.appendChild(createFlockler({isCarousel: false}));
+  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}))
+
+  page.appendChild(createFooter({}));
+
+  return page;
+}