Merged in feat/SW-1383-content-card-start-page (pull request #1252)

feat(SW-1383): Implement ContentCard for the Start Page

* feat(SW-1383): Implement ContentCard

- Add ContentCard component
- Use within CarouselCards component

* fix(SW-1383): adjust carousel and content card styling

* refactor(SW-1383): optimize ContentCard component styling and props

* feat(SW-1383): move ContentCard image check out of component

* feat(SW-1383): Add optional link prop to ContentCard component

* refactor(SW-1383): Make ContentCard component linkable


Approved-by: Christian Andolf
Approved-by: Erik Tiekstra

components/Blocks/CarouselCards.tsx

@@ -1,6 +1,9 @@
+import ContentCard from "@/components/ContentCard"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 
+import styles from "./carouselCards.module.css"
+
 import type { CarouselCardsProps } from "@/types/components/blocks/carouselCards"
 
 export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
@@ -19,17 +22,27 @@ export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
       {enableFilters && (
         <details>
           <summary>Filter data</summary>
-          <p>Todo: Add filter component here</p>
-          <pre>
-            {JSON.stringify({ filterCategories, defaultFilter }, null, 2)}
-          </pre>
+          <div>
+            {/* Filter component will go here */}
+            <pre className={styles.code}>
+              {JSON.stringify({ filterCategories, defaultFilter }, null, 2)}
+            </pre>
+          </div>
         </details>
       )}
-      <details>
-        <summary>Carousel cards</summary>
-        <p>Todo: Add carousel cards component here</p>
-        <pre>{JSON.stringify({ cards }, null, 2)}</pre>
-      </details>
+      {/* Carousel functionality will go here */}
+      <div className={styles.cardsContainer}>
+        {cards.map((card) => (
+          <ContentCard
+            link={card.link}
+            key={card.heading}
+            heading={card.heading}
+            bodyText={card.bodyText}
+            image={card.image}
+            promoText={card.promoText}
+          />
+        ))}
+      </div>
     </SectionContainer>
   )
 }