add fact box block

web/src/components/blocks/Blocks.tsx

@@ -4,6 +4,7 @@ import { ImageSliderBlock } from "./ImageSliderBlock";
 import { HorizontalRuleBlock } from "./HorizontalRuleBlock";
 import { FeaturedBlock } from "./FeaturedBlock";
 import { AccordionBlock } from "./AccordionBlock";
+import { FactBoxBlock } from "./FactBoxBlock";
 import { PageSectionBlock, PageSectionNavigationBlock } from "./PageSection";
 import { ContactSectionBlock, ContactSubsectionBlock } from "./ContactSection";
 import { ContactListBlock } from "./ContactListBlock";
@@ -11,7 +12,6 @@ import { ContactEntityBlock } from "./ContactEntityBlock";
 import { NeufAddressSectionBlock } from "./NeufAddressSectionBlock";
 import { OpeningHoursSectionBlock } from "./OpeningHoursSectionBlock";
 
-
 export const Blocks = ({ blocks }: any) => {
   const sections = blocks.filter(
     (block: any) => block.__typename === "PageSectionBlock"
@@ -37,6 +37,9 @@ export const Blocks = ({ blocks }: any) => {
       case "AccordionBlock":
         return <AccordionBlock block={block} />;
         break;
+      case "FactBoxBlock":
+        return <FactBoxBlock block={block} />;
+        break;
       case "PageSectionBlock":
         return <PageSectionBlock block={block} />;
         break;

web/src/components/blocks/FactBoxBlock.tsx

@@ -0,0 +1,20 @@
+import { useId, useState } from "react";
+import { FactBoxBlock as FactBoxBlockType } from "@/gql/graphql";
+import styles from "./factBoxBlock.module.scss";
+import { Blocks } from "./Blocks";
+
+export const FactBoxBlock = ({ block }: { block: FactBoxBlockType }) => {
+  return (
+    <section
+      className={styles.factBox}
+      data-background-color={block.backgroundColor ?? ""}
+    >
+      <div className={styles.factBoxHeader}>
+        <span>{block.heading}</span>
+      </div>
+      <div className={styles.factBoxContent}>
+        <Blocks blocks={block.body} />
+      </div>
+    </section>
+  );
+};

web/src/components/blocks/factBoxBlock.module.scss

@@ -0,0 +1,39 @@
+.factBox {
+  /* TODO: default fact box color if none is chosen
+  background: var(--color-background-secondary);
+  */
+
+  &[data-background-color="betongGray"] {
+    background-color: var(--color-betongGray);
+  }
+
+  &[data-background-color="deepBrick"] {
+    background-color: var(--color-deepBrick);
+  }
+
+  &[data-background-color="neufPink"] {
+    background-color: var(--color-neufPink);
+  }
+
+  &[data-background-color="goldenOrange"] {
+    background-color: var(--color-goldenOrange);
+    color: var(--color-deepBrick);
+  }
+
+  &[data-background-color="goldenBeige"] {
+    background-color: var(--color-goldenBeige);
+  }
+
+  &[data-background-color="chateauBlue"] {
+    background-color: var(--color-chateauBlue);
+    color: var(--color-betongGray);
+  }
+}
+
+.factBoxHeader {
+
+}
+
+.factBoxContent {
+
+}