testimonial

gfi-ihk-2024/stories/components/testimonial/Testimonial.stories.js

@@ -0,0 +1,19 @@
+import {testimonialData} from "./TestimonialData";
+import {createTestimonial} from "./TestimonialComponent";
+
+export default {
+  title: 'Components/Testimonial',
+  argTypes: {
+    listItems: {
+      name: 'listItems',
+      control: {type: 'object'},
+      defaultValue: testimonialData,
+    }
+  }
+}
+const Template = ({...args}) => {
+  return createTestimonial({...args});
+}
+
+export const Testimonial = Template.bind({});
+Testimonial.args = {};

gfi-ihk-2024/stories/components/testimonial/TestimonialComponent.js

@@ -0,0 +1,22 @@
+import './testimonial.scss';
+import {createElement, createImage} from "../../_global/scripts/helpers";
+import {testimonialData} from "./TestimonialData";
+
+export const createTestimonial =
+  ({
+     listItems: listItems = testimonialData,
+     author = 'Nadine Kurz, IHK Rhein-Neckar',
+     text = 'Mit dem modularen IHK24-System setzen wir flexibel und einfach die digitale Kommunikation unserer IHK um. Unsere Kunden und Redakteure profitieren von den modernen und nutzerfreundlichen Anwendungen.',
+     image = './dummy/why-elect.jpg',
+  }) => {
+    const div = createElement('div', ['image-text'], null);
+    const div2 = createElement('div', ['image-text--image'], null, div);
+    const div3 = createElement('div', ['image-text--text'], null, div);
+    createImage(image, 1280, 1280, '', [], div2);
+
+    const blockquote = createElement('blockquote', [], null, div3);
+    createElement('p', [], text, blockquote);
+    createElement('p', ['author'], author, blockquote);
+
+    return div;
+  }

gfi-ihk-2024/stories/components/testimonial/TestimonialData.js

@@ -0,0 +1,5 @@
+export const testimonialData = [
+  {
+    author: 'Nadine Kurz, IHK Rhein-Neckar',
+    text: 'Mit dem modularen IHK24-System setzen wir flexibel und einfach die digitale Kommunikation unserer IHK um. Unsere Kunden und Redakteure profitieren von den modernen und nutzerfreundlichen Anwendungen.',
+  },]

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

@@ -0,0 +1,131 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.image-text {
+  max-width: 1340px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto var(--section-margin) auto;
+  padding: 45px 0;
+  position: relative;
+  z-index: 1;
+  @media(max-width: 767px) {
+    display: block;
+  }
+  h3{
+    font-size: 28px;
+    line-height: 120%; /* 50.4px */
+    @media(min-width: 768px) {
+       font-size: 36px;
+    }
+    @media(min-width: 1110px) {
+      font-size: 42px;
+   }
+   + p {
+      font-size: 18px;
+      @media(min-width: 768px) {
+       font-size: 22px;
+    }
+   }
+  }
+
+
+
+  @media(max-width: 767px) {
+    display: block;
+  }
+
+  &--text,
+  &--image {
+    width: calc(50% - 30px);
+    @media(max-width: 767px) {
+      width: auto;
+      margin-bottom: 32px;
+    }
+  }
+
+  &--image {
+    position: relative;
+    &:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      display: block;
+      height: 8px;
+      background-color: var(--theme-color-secondary);
+      transition: 0.3s ease;
+      z-index: 1;
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+  }
+
+  blockquote {
+    border-left: 0;
+    font-style: normal;
+    font-weight: 300;
+    margin: calc(var(--section-margin)*.6) 0;
+    padding: 0 20px 0 40px;
+    p {
+      font-size: var(--font-size-h2);
+      line-height: 1.3;
+      &:not(.author) {
+        &:before {
+          background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xNyA4LjljLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yQzkgMTYgOC4zIDE4LjQgOC4zIDIxLjNjLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjNDLjcgMzAuNyAwIDI3LjYgMCAyMy41YzAtNC42IDEuMS04LjcgMy40LTEyLjJzNS44LTYuNCAxMC40LTguN0wxNyA4Ljl6bTIzIDBjLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yLTEuNCAxLjktMi4xIDQuMy0yLjEgNy4yLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjMtMS41LTIuMy0yLjItNS40LTIuMi05LjUgMC00LjYgMS4xLTguNyAzLjQtMTIuMlMzMi40IDUgMzcgMi43bDMgNi4yeiIgc3R5bGU9ImZpbGw6IzU2YmQ2NiIvPjwvc3ZnPg==);
+          background-size: 100%;
+          content: "";
+          display: block;
+          height: 30px;
+          margin: 2px 0 2px -40px;
+          position: relative;
+          width: 30px;
+        }
+      }
+      &.author {
+        font-family: Source Sans Pro,sans-serif;
+        font-size: 18px;
+        font-weight: 400;
+        margin-right: -20px;
+        margin-top: 36px;
+        position: relative;
+        text-align: right;
+        font-style: normal;
+        line-height: 1.2;
+        &:after {
+          left: 0;
+          position: absolute;
+          top: -36px;
+          background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xNyA4LjljLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yQzkgMTYgOC4zIDE4LjQgOC4zIDIxLjNjLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjNDLjcgMzAuNyAwIDI3LjYgMCAyMy41YzAtNC42IDEuMS04LjcgMy40LTEyLjJzNS44LTYuNCAxMC40LTguN0wxNyA4Ljl6bTIzIDBjLTIuOSAxLjUtNS4xIDMuMi02LjYgNS4yLTEuNCAxLjktMi4xIDQuMy0yLjEgNy4yLjItLjEuNS0uMSAxLS4xIDIuMSAwIDMuOC43IDUuMyAyIDEuNSAxLjIgMi4yIDMgMi4yIDUuMiAwIDIuNS0uNyA0LjQtMi4xIDUuOS0xLjQgMS40LTMuMiAyLjEtNS40IDIuMS0zLjEgMC01LjQtMS4xLTYuOS0zLjMtMS41LTIuMy0yLjItNS40LTIuMi05LjUgMC00LjYgMS4xLTguNyAzLjQtMTIuMlMzMi40IDUgMzcgMi43bDMgNi4yeiIgc3R5bGU9ImZpbGw6IzU2YmQ2NiIvPjwvc3ZnPg==);
+          background-size: 100%;
+          content: "";
+          display: block;
+          height: 30px;
+          margin: 2px 0 2px -40px;
+          transform: rotate(180deg);
+          width: 30px;
+        }
+        &:before {
+          content: "— ";
+          margin-right: 2px;
+          position: relative;
+          top: -1px;
+        }
+      }
+    }
+  }
+
+  a {
+    margin-top: 11px;
+  }
+
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: 4px;
+  }
+}
+