Add result block to ui

src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx

@@ -2,6 +2,7 @@ import { CustomerCaseSection as CustomerCaseSectionObject } from "studioShared/l
 
 import ImageSection from "./image/ImageSection";
 import QuoteBlock from "./quote/QuoteBlock";
+import ResultBlock from "./results/ResultBlock";
 import RichTextSection from "./richText/RichTextSection";
 import SplitSection from "./splitSection/SplitSection";
 
@@ -19,5 +20,7 @@ export function CustomerCaseSection({
       return <QuoteBlock section={section} />;
     case "imageBlock":
       return <ImageSection section={section} />;
+    case "resultBlock":
+      return <ResultBlock section={section} />;
   }
 }

src/components/customerCases/customerCase/sections/results/ResultBlock.tsx

@@ -0,0 +1,32 @@
+import Text from "src/components/text/Text";
+import { ResultBlock as ResultBlockObject } from "studioShared/lib/interfaces/resultBlock";
+
+import styles from "./resultBlock.module.css";
+
+export interface ResultBlockProps {
+  section: ResultBlockObject;
+}
+
+export default function QuoteBlock({ section }: ResultBlockProps) {
+  return (
+    section.resultBlockTitle && (
+      <div className={styles.wrapper}>
+        <div className={styles.resultblock}>
+          <Text type="h4" className={styles.blocktitle}>
+            {section.resultBlockTitle}
+          </Text>
+          <div className={styles.resultrow}>
+            {section.resultList?.map((result) => (
+              <div className={styles.results} key={result._key}>
+                <Text type="h2" className={styles.mainresult}>
+                  {result.result}
+                </Text>
+                <Text type="labelRegular">{result.description}</Text>
+              </div>
+            ))}{" "}
+          </div>
+        </div>
+      </div>
+    )
+  );
+}

src/components/customerCases/customerCase/sections/results/resultBlock.module.css

@@ -0,0 +1,46 @@
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.resultblock {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2.25rem;
+    max-width: 960px;
+    width: 100%;
+}
+
+.blocktitle {
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 120%;
+}
+
+.resultrow {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    align-self: stretch;
+    text-wrap: wrap;
+}
+
+.results {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: 20%;
+    align-items: center;
+}
+
+.mainresult{
+    color:  var(--blue-dark);
+    font-size: 3rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 120%;
+}