diff --git a/gfi-ihk-2024/stories/components/flockler/FlocklerComponent.js b/gfi-ihk-2024/stories/components/flockler/FlocklerComponent.js index 3db1c57..52d25f6 100644 --- a/gfi-ihk-2024/stories/components/flockler/FlocklerComponent.js +++ b/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) { diff --git a/gfi-ihk-2024/stories/components/flockler/flockler.scss b/gfi-ihk-2024/stories/components/flockler/flockler.scss index 0647349..3ff2ca1 100644 --- a/gfi-ihk-2024/stories/components/flockler/flockler.scss +++ b/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 { diff --git a/gfi-ihk-2024/stories/pages/flockler/article/Article.stories.js b/gfi-ihk-2024/stories/pages/flockler/article/Article.stories.js deleted file mode 100644 index d035827..0000000 --- a/gfi-ihk-2024/stories/pages/flockler/article/Article.stories.js +++ /dev/null @@ -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; - } - ` -}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/pages/flockler/article/ArticlePage.js b/gfi-ihk-2024/stories/pages/flockler/article/ArticlePage.js deleted file mode 100644 index 972d741..0000000 --- a/gfi-ihk-2024/stories/pages/flockler/article/ArticlePage.js +++ /dev/null @@ -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 go-digital Förderprogramm 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; - } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/pages/flockler/topic/Topic.stories.js b/gfi-ihk-2024/stories/pages/flockler/topic/Topic.stories.js new file mode 100644 index 0000000..10f2d60 --- /dev/null +++ b/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 = {}; \ No newline at end of file diff --git a/gfi-ihk-2024/stories/pages/flockler/topic/TopicPage.js b/gfi-ihk-2024/stories/pages/flockler/topic/TopicPage.js new file mode 100644 index 0000000..f794eb8 --- /dev/null +++ b/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; +} \ No newline at end of file