diff --git a/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx b/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx index 052c7a06f..bbd6851e0 100644 --- a/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx +++ b/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 ; case "imageBlock": return ; + case "resultBlock": + return ; } } diff --git a/src/components/customerCases/customerCase/sections/results/ResultBlock.tsx b/src/components/customerCases/customerCase/sections/results/ResultBlock.tsx new file mode 100644 index 000000000..bf00b0b4a --- /dev/null +++ b/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 && ( +
+
+ + {section.resultBlockTitle} + +
+ {section.resultList?.map((result) => ( +
+ + {result.result} + + {result.description} +
+ ))}{" "} +
+
+
+ ) + ); +} diff --git a/src/components/customerCases/customerCase/sections/results/resultBlock.module.css b/src/components/customerCases/customerCase/sections/results/resultBlock.module.css new file mode 100644 index 000000000..98b4bf0f5 --- /dev/null +++ b/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%; +} \ No newline at end of file