@treely/strapi-slices 3.1.1 → 3.2.0

package/dist/slices/TextWithCard/TextWithCard.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import StrapiLink from '../../models/strapi/StrapiLink';
 import StrapiProjectCard from '../../models/strapi/StrapiProjectCard';
+import { IStrapi, IStrapiData, PortfolioProject, StrapiProject } from '../..';
 interface TextWithCardSlice {
     tagline?: string;
     title: string;
@@ -11,10 +12,12 @@ interface TextWithCardSlice {
     }[];
     button?: StrapiLink;
     card?: StrapiProjectCard;
+    project?: IStrapi<IStrapiData<StrapiProject>>;
     cardPosition: 'left' | 'right';
 }
 export interface TextWithCardProps {
     slice: TextWithCardSlice;
+    projects: PortfolioProject[];
 }
 export declare const TextWithCard: React.FC<TextWithCardProps>;
 export {};

package/dist/strapi-slices.cjs.development.js

@@ -489,7 +489,7 @@ var EXTENDABLE_HEADER_SECTIONS = ['sections.hero', 'sections.map-hero', 'section
 var DARK_THEME_HEADER_SECTIONS = ['sections.hero', 'sections.small-hero'];
 var SECTIONS_WITH_BLOG_POSTS = ['sections.blog', 'sections.blog-cards'];
 var SECTIONS_WITH_CUSTOMER_STORIES = ['sections.customer-stories'];
-var SECTIONS_WITH_PROJECTS = ['sections.projects-grid', 'sections.projects-map', 'sections.project-facts'];
+var SECTIONS_WITH_PROJECTS = ['sections.projects-grid', 'sections.projects-map', 'sections.project-facts', 'sections.text-with-card'];
 
 var mergeGlobalAndStrapiPageData = function mergeGlobalAndStrapiPageData(context, global, page, blogPosts, customerStories, projects) {
   var _page$attributes$meta, _page$attributes$meta2, _page$attributes$meta3, _global$attributes$me, _page$attributes$meta4, _page$attributes, _page$attributes$slic, _page$attributes$slic2, _page$attributes$meta5, _page$attributes$meta6, _page$attributes$meta7, _page$attributes$meta8, _ref, _page$attributes$meta9, _page$attributes$meta10, _global$attributes$me2;
@@ -2127,205 +2127,26 @@ var TextWithTextCards = function TextWithTextCards(_ref) {
   }))));
 };
 
-var TextWithCard = function TextWithCard(_ref) {
-  var slice = _ref.slice;
-  var card = React__default.default.createElement(boemly.GridItem, {
-    colSpan: [4, null, null, null, 2],
-    rowSpan: 1,
-    position: "relative",
-    "data-testid": "card-position-" + slice.cardPosition
-  }, slice.card && React__default.default.createElement(boemly.ProjectCard, {
-    facts: slice.card.facts,
-    footerSubTitle: slice.card.footerSubTitle,
-    footerTitle: slice.card.footerTitle,
-    title: slice.card.title,
-    image: React__default.default.createElement(Image__default.default, {
-      src: strapiMediaUrl(slice.card.image.img, 'medium'),
-      alt: slice.card.image.alt,
-      fill: true,
-      style: {
-        objectFit: slice.card.image.objectFit || 'cover'
-      }
-    })
-  }));
-  return React__default.default.createElement(boemly.DefaultSectionContainer, {
-    title: slice.title
-  }, React__default.default.createElement(boemly.Wrapper, null, React__default.default.createElement(boemly.Grid, {
-    templateColumns: ['repeat(4, auto)', null, null, null, 'repeat(6, auto)'],
-    templateRows: ['repeat(2, auto)', null, null, null, 'repeat(1, auto)'],
-    rowGap: "12",
-    columnGap: ['0', null, null, null, '28']
-  }, slice.cardPosition === 'left' && card, React__default.default.createElement(boemly.GridItem, {
-    colSpan: 4,
-    rowSpan: 1,
-    position: "relative"
-  }, React__default.default.createElement(boemly.DefaultSectionHeader, {
-    tagline: slice.tagline,
-    title: slice.title,
-    text: slice.text
-  }), slice.listItems && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(boemly.Spacer, {
-    height: "10"
-  }), React__default.default.createElement(boemly.BoemlyList, {
-    listItems: slice.listItems
-  }), React__default.default.createElement(boemly.Spacer, {
-    height: "10"
-  })), slice.button && React__default.default.createElement(StrapiLinkButton, {
-    link: slice.button,
-    size: "md",
-    colorScheme: "white",
-    variant: "outline",
-    rightIcon: React__default.default.createElement(react.ArrowRight, null)
-  })), slice.cardPosition === 'right' && card)));
-};
-
-var MEDIUM_TRANSITION_DURATION = 0.2;
-
-var LinkCardsGrid = function LinkCardsGrid(_ref) {
-  var slice = _ref.slice;
-  return React__default.default.createElement(boemly.DefaultSectionContainer, {
-    title: slice.title
-  }, React__default.default.createElement(boemly.Wrapper, null, React__default.default.createElement(boemly.DefaultSectionHeader, {
-    tagline: slice.tagline,
-    title: slice.title,
-    text: slice.text
-  }), React__default.default.createElement(boemly.SimpleGrid, {
-    mt: "16",
-    columns: [1, null, null, null, 2],
-    gap: "4"
-  }, slice.cards.map(function (_ref2) {
-    var id = _ref2.id,
-      title = _ref2.title,
-      text = _ref2.text,
-      link = _ref2.link;
-    return React__default.default.createElement(boemly.Box, {
-      key: id,
-      as: Link__default.default,
-      href: strapiLinkUrl(link),
-      "data-testid": "link",
-      px: "10",
-      py: "8",
-      borderStyle: "solid",
-      borderWidth: "thin",
-      borderColor: "gray.200",
-      borderRadius: "2xl",
-      display: "flex",
-      flexDir: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      cursor: "pointer",
-      transitionDuration: MEDIUM_TRANSITION_DURATION + "s",
-      _hover: {
-        backgroundColor: 'gray.50'
-      }
-    }, React__default.default.createElement("div", null, React__default.default.createElement(boemly.Heading, {
-      as: "h4",
-      size: "lg"
-    }, title), text && React__default.default.createElement(boemly.Text, {
-      mt: "2",
-      size: "smRegularNormal"
-    }, text)), React__default.default.createElement(boemly.Box, {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      borderStyle: "solid",
-      borderWidth: "thin",
-      borderColor: "gray.200",
-      borderRadius: "2xl",
-      height: "12",
-      width: "12",
-      minWidth: "12",
-      minHeight: "12",
-      ml: "6",
-      backgroundColor: "white"
-    }, React__default.default.createElement(react.CaretRight, null)));
-  }))));
-};
+var CreditsAvailableState;
+(function (CreditsAvailableState) {
+  CreditsAvailableState["YES"] = "yes";
+  CreditsAvailableState["SOME"] = "some";
+  CreditsAvailableState["NO"] = "no";
+  CreditsAvailableState["NOT_YET"] = "notYet";
+})(CreditsAvailableState || (CreditsAvailableState = {}));
+var CreditsAvailableState$1 = CreditsAvailableState;
 
-var colors = {
-  dark: {
-    tagline: 'white',
-    title: 'white',
-    text: 'white',
-    background: 'gray.900'
-  },
-  light: {
-    tagline: 'primary.500',
-    title: 'black',
-    text: 'gray.500',
-    background: 'primary.50'
-  }
+var FORMAT_AS_HECTARE_CONFIG = {
+  unit: 'hectare',
+  unitDisplay: 'short',
+  style: 'unit',
+  maximumFractionDigits: 2
 };
-var SmallHero = function SmallHero(_ref) {
-  var slice = _ref.slice,
-    theme = _ref.theme;
-  return React__default.default.createElement(boemly.Box, {
-    position: "relative",
-    width: "full",
-    height: "xl",
-    backgroundColor: colors[theme].background
-  }, slice.image && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(Image__default.default, {
-    src: strapiMediaUrl(slice.image.img, 'xLarge'),
-    alt: slice.image.alt,
-    fill: true,
-    style: {
-      objectFit: slice.image.objectFit || 'cover'
-    }
-  }), slice.gradient && React__default.default.createElement(boemly.Gradient, null)), React__default.default.createElement(boemly.Box, {
-    position: "absolute",
-    left: "0",
-    top: "60%",
-    width: "full",
-    textAlign: "center",
-    transform: "translateY(-50%)"
-  }, React__default.default.createElement(boemly.Wrapper, null, React__default.default.createElement(React__default.default.Fragment, null, slice.tags && React__default.default.createElement(boemly.Flex, {
-    direction: "row",
-    justify: "center",
-    gap: "2",
-    mb: "4",
-    wrap: "wrap"
-  }, slice.tags.map(function (_ref2) {
-    var id = _ref2.id,
-      text = _ref2.text,
-      colorScheme = _ref2.colorScheme;
-    return React__default.default.createElement(boemly.Tag, {
-      key: id,
-      colorScheme: colorScheme,
-      size: "md",
-      variant: "subtle"
-    }, text);
-  })), React__default.default.createElement(boemly.DefaultSectionHeader, {
-    isHero: true,
-    tagline: slice.tagline,
-    title: slice.title,
-    text: slice.subTitle,
-    taglineProps: {
-      color: colors[theme].tagline,
-      textAlign: 'center',
-      mx: 'auto'
-    },
-    titleProps: {
-      color: colors[theme].title,
-      maxW: '4xl',
-      textAlign: 'center',
-      mx: 'auto'
-    },
-    textProps: {
-      maxW: '2xl',
-      textAlign: 'center',
-      mx: 'auto',
-      color: colors[theme].text
-    }
-  }), slice.button && React__default.default.createElement(StrapiLinkButton, {
-    link: slice.button,
-    mt: "6",
-    size: "lg"
-  })))));
+var FORMAT_AS_PERCENT_CONFIG = {
+  style: 'percent',
+  maximumFractionDigits: 2
 };
 
-var _templateObject$4, _templateObject2$1;
-var BlogItemContainer = /*#__PURE__*/styled__default.default(boemly.Link)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n\n  & div img {\n    transition: transform var(--default-ease) var(--medium-transition-duration);\n  }\n\n  &:hover {\n    text-decoration: none;\n\n    & > div:first-of-type img {\n      transform: scale(1.03);\n    }\n  }\n"])));
-var ImageContainer$1 = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: var(--boemly-sizes-xs);\n  position: relative;\n  border-radius: var(--boemly-radii-2xl);\n\n  // Fixes the flickering of borders during animation in Safari\n  -webkit-mask-image: -webkit-radial-gradient(white, black);\n\n  & span,\n  div {\n    border-radius: var(--boemly-radii-2xl);\n  }\n\n  @media screen and (max-width: ", ") {\n    height: var(--boemly-sizes-3xs);\n  }\n"])), BREAKPOINT_MD);
-
 var messagesDe$b = {
   'sections.comparison.backgroundShapes': 'Hintergrundformen'
 };
@@ -2521,8 +2342,8 @@ var messagesEn = {
 
 var rootMessagesEn = /*#__PURE__*/_extends({}, messagesEn$4, messagesEn$3, messagesEn, messagesEn$2, messagesEn$1, messagesEn$b, messagesEn$a, messagesEn$9, messagesEn$8, messagesEn$7, messagesEn$6, messagesEn$5, unitMessagesEn);
 
-var _templateObject$3;
-var GLOBAL_STYLE = /*#__PURE__*/react$1.css(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  // GintoNord\n  @font-face {\n    font-family: 'GintoNord';\n    src: url('", "/assets/v3/fonts/ABCGintoNord-Bold.woff2')\n      format('woff2');\n    font-style: normal;\n    font-weight: 700;\n    font-display: block;\n  }\n  // Inter\n  @font-face {\n    font-family: 'Inter';\n    src: url('", "/assets/v3/fonts/Inter-Regular.woff2') format('woff2');\n    font-style: normal;\n    font-weight: 400;\n    font-display: block;\n  }\n  @font-face {\n    font-family: 'Inter';\n    src: url('", "/assets/v3/fonts/Inter-Medium.woff2') format('woff2');\n    font-style: normal;\n    font-weight: 500;\n    font-display: block;\n  }\n  @font-face {\n    font-family: 'Inter';\n    src: url('", "/assets/v3/fonts/Inter-SemiBold.woff2') format('woff2');\n    font-style: normal;\n    font-weight: 600;\n    font-display: block;\n  }\n  @font-face {\n    font-family: 'Inter';\n    src: url('", "/assets/v3/fonts/Inter-Bold.woff2') format('woff2');\n    font-style: normal;\n    font-weight: 700;\n    font-display: block;\n  }\n  // SpaceMono\n  @font-face {\n    font-family: 'SpaceMono';\n    src: url('", "/assets/v3/fonts/SpaceMono-Bold.woff2') format('woff2');\n    font-style: normal;\n    font-weight: 700;\n    font-display: block;\n  }\n\n  :root {\n    --default-hero-height: calc(100vh - var(--boemly-space-24));\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), CDN_URI, CDN_URI, CDN_URI, CDN_URI, CDN_URI, CDN_URI);
+var _templateObject$4;
+var GLOBAL_STYLE = /*#__PURE__*/react$1.css(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  // GintoNord\n  @font-face {\n    font-family: 'GintoNord';\n    src: url('", "/assets/v3/fonts/ABCGintoNord-Bold.woff2')\n      format('woff2');\n    font-style: normal;\n    font-weight: 700;\n    font-display: block;\n  }\n  // Inter\n  @font-face {\n    font-family: 'Inter';\n    src: url('", "/assets/v3/fonts/Inter-Regular.woff2') format('woff2');\n    font-style: normal;\n    font-weight: 400;\n    font-display: block;\n  }\n  @font-face {\n    font-family: 'Inter';\n    src: url('", "/assets/v3/fonts/Inter-Medium.woff2') format('woff2');\n    font-style: normal;\n    font-weight: 500;\n    font-display: block;\n  }\n  @font-face {\n    font-family: 'Inter';\n    src: url('", "/assets/v3/fonts/Inter-SemiBold.woff2') format('woff2');\n    font-style: normal;\n    font-weight: 600;\n    font-display: block;\n  }\n  @font-face {\n    font-family: 'Inter';\n    src: url('", "/assets/v3/fonts/Inter-Bold.woff2') format('woff2');\n    font-style: normal;\n    font-weight: 700;\n    font-display: block;\n  }\n  // SpaceMono\n  @font-face {\n    font-family: 'SpaceMono';\n    src: url('", "/assets/v3/fonts/SpaceMono-Bold.woff2') format('woff2');\n    font-style: normal;\n    font-weight: 700;\n    font-display: block;\n  }\n\n  :root {\n    --default-hero-height: calc(100vh - var(--boemly-space-24));\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), CDN_URI, CDN_URI, CDN_URI, CDN_URI, CDN_URI, CDN_URI);
 
 var FONT_CUSTOMIZATIONS = {
   body: 'Inter',
@@ -2556,6 +2377,249 @@ var ContextProvider = function ContextProvider(_ref) {
   }, children));
 };
 
+var PortfolioProjectCard = function PortfolioProjectCard(_ref) {
+  var _creditsAvailableMess, _project$creditsAvail, _project$thumbnail, _project$thumbnail2, _project$thumbnail3;
+  var project = _ref.project;
+  var _useContext = React.useContext(IntlContext),
+    formatMessage = _useContext.formatMessage,
+    formatNumber = _useContext.formatNumber;
+  var creditsAvailableMessages = (_creditsAvailableMess = {}, _creditsAvailableMess[CreditsAvailableState$1.YES] = formatMessage({
+    id: 'components.portfolioProjectCard.text.yes'
+  }), _creditsAvailableMess[CreditsAvailableState$1.SOME] = formatMessage({
+    id: 'components.portfolioProjectCard.text.some'
+  }), _creditsAvailableMess[CreditsAvailableState$1.NO] = formatMessage({
+    id: 'components.portfolioProjectCard.text.no'
+  }), _creditsAvailableMess[CreditsAvailableState$1.NOT_YET] = formatMessage({
+    id: 'components.portfolioProjectCard.text.notYet'
+  }), _creditsAvailableMess);
+  return React__default.default.createElement(boemly.ProjectCard, {
+    title: project.title,
+    facts: [{
+      id: 1,
+      text: formatNumber((project.area || 0) / 10000, FORMAT_AS_HECTARE_CONFIG)
+    }, {
+      id: 2,
+      text: project.location || ''
+    }],
+    footerTitle: creditsAvailableMessages[(_project$creditsAvail = project.creditsAvailable) != null ? _project$creditsAvail : CreditsAvailableState$1.NOT_YET],
+    footerSubTitle: project.footerSubTitle || '',
+    image: project.thumbnail && React__default.default.createElement(Image__default.default, {
+      src: strapiMediaUrl((_project$thumbnail = project.thumbnail) == null ? void 0 : _project$thumbnail.img, 'medium'),
+      alt: (_project$thumbnail2 = project.thumbnail) == null ? void 0 : _project$thumbnail2.alt,
+      fill: true,
+      style: {
+        objectFit: ((_project$thumbnail3 = project.thumbnail) == null ? void 0 : _project$thumbnail3.objectFit) || 'cover'
+      }
+    })
+  });
+};
+
+var TextWithCard = function TextWithCard(_ref) {
+  var slice = _ref.slice,
+    projects = _ref.projects;
+  var portfolioProject = projects.find(function (p) {
+    var _slice$project, _slice$project2;
+    return ((_slice$project = slice.project) == null ? void 0 : _slice$project.data.attributes.fpmProjectId) && p.id === ((_slice$project2 = slice.project) == null ? void 0 : _slice$project2.data.attributes.fpmProjectId);
+  });
+  var card = React__default.default.createElement(boemly.GridItem, {
+    colSpan: [4, null, null, null, 2],
+    rowSpan: 1,
+    position: "relative",
+    "data-testid": "card-position-" + slice.cardPosition
+  }, portfolioProject && React__default.default.createElement(PortfolioProjectCard, {
+    project: portfolioProject
+  }), !portfolioProject && slice.card && React__default.default.createElement(boemly.ProjectCard, {
+    facts: slice.card.facts,
+    footerSubTitle: slice.card.footerSubTitle,
+    footerTitle: slice.card.footerTitle,
+    title: slice.card.title,
+    image: React__default.default.createElement(Image__default.default, {
+      src: strapiMediaUrl(slice.card.image.img, 'medium'),
+      alt: slice.card.image.alt,
+      fill: true,
+      style: {
+        objectFit: slice.card.image.objectFit || 'cover'
+      }
+    })
+  }));
+  return React__default.default.createElement(boemly.DefaultSectionContainer, {
+    title: slice.title
+  }, React__default.default.createElement(boemly.Wrapper, null, React__default.default.createElement(boemly.Grid, {
+    templateColumns: ['repeat(4, auto)', null, null, null, 'repeat(6, auto)'],
+    templateRows: ['repeat(2, auto)', null, null, null, 'repeat(1, auto)'],
+    rowGap: "12",
+    columnGap: ['0', null, null, null, '28']
+  }, slice.cardPosition === 'left' && card, React__default.default.createElement(boemly.GridItem, {
+    colSpan: 4,
+    rowSpan: 1,
+    position: "relative"
+  }, React__default.default.createElement(boemly.DefaultSectionHeader, {
+    tagline: slice.tagline,
+    title: slice.title,
+    text: slice.text
+  }), slice.listItems && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(boemly.Spacer, {
+    height: "10"
+  }), React__default.default.createElement(boemly.BoemlyList, {
+    listItems: slice.listItems
+  }), React__default.default.createElement(boemly.Spacer, {
+    height: "10"
+  })), slice.button && React__default.default.createElement(StrapiLinkButton, {
+    link: slice.button,
+    size: "md",
+    colorScheme: "white",
+    variant: "outline",
+    rightIcon: React__default.default.createElement(react.ArrowRight, null)
+  })), slice.cardPosition === 'right' && card)));
+};
+
+var MEDIUM_TRANSITION_DURATION = 0.2;
+
+var LinkCardsGrid = function LinkCardsGrid(_ref) {
+  var slice = _ref.slice;
+  return React__default.default.createElement(boemly.DefaultSectionContainer, {
+    title: slice.title
+  }, React__default.default.createElement(boemly.Wrapper, null, React__default.default.createElement(boemly.DefaultSectionHeader, {
+    tagline: slice.tagline,
+    title: slice.title,
+    text: slice.text
+  }), React__default.default.createElement(boemly.SimpleGrid, {
+    mt: "16",
+    columns: [1, null, null, null, 2],
+    gap: "4"
+  }, slice.cards.map(function (_ref2) {
+    var id = _ref2.id,
+      title = _ref2.title,
+      text = _ref2.text,
+      link = _ref2.link;
+    return React__default.default.createElement(boemly.Box, {
+      key: id,
+      as: Link__default.default,
+      href: strapiLinkUrl(link),
+      "data-testid": "link",
+      px: "10",
+      py: "8",
+      borderStyle: "solid",
+      borderWidth: "thin",
+      borderColor: "gray.200",
+      borderRadius: "2xl",
+      display: "flex",
+      flexDir: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      cursor: "pointer",
+      transitionDuration: MEDIUM_TRANSITION_DURATION + "s",
+      _hover: {
+        backgroundColor: 'gray.50'
+      }
+    }, React__default.default.createElement("div", null, React__default.default.createElement(boemly.Heading, {
+      as: "h4",
+      size: "lg"
+    }, title), text && React__default.default.createElement(boemly.Text, {
+      mt: "2",
+      size: "smRegularNormal"
+    }, text)), React__default.default.createElement(boemly.Box, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderStyle: "solid",
+      borderWidth: "thin",
+      borderColor: "gray.200",
+      borderRadius: "2xl",
+      height: "12",
+      width: "12",
+      minWidth: "12",
+      minHeight: "12",
+      ml: "6",
+      backgroundColor: "white"
+    }, React__default.default.createElement(react.CaretRight, null)));
+  }))));
+};
+
+var colors = {
+  dark: {
+    tagline: 'white',
+    title: 'white',
+    text: 'white',
+    background: 'gray.900'
+  },
+  light: {
+    tagline: 'primary.500',
+    title: 'black',
+    text: 'gray.500',
+    background: 'primary.50'
+  }
+};
+var SmallHero = function SmallHero(_ref) {
+  var slice = _ref.slice,
+    theme = _ref.theme;
+  return React__default.default.createElement(boemly.Box, {
+    position: "relative",
+    width: "full",
+    height: "xl",
+    backgroundColor: colors[theme].background
+  }, slice.image && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(Image__default.default, {
+    src: strapiMediaUrl(slice.image.img, 'xLarge'),
+    alt: slice.image.alt,
+    fill: true,
+    style: {
+      objectFit: slice.image.objectFit || 'cover'
+    }
+  }), slice.gradient && React__default.default.createElement(boemly.Gradient, null)), React__default.default.createElement(boemly.Box, {
+    position: "absolute",
+    left: "0",
+    top: "60%",
+    width: "full",
+    textAlign: "center",
+    transform: "translateY(-50%)"
+  }, React__default.default.createElement(boemly.Wrapper, null, React__default.default.createElement(React__default.default.Fragment, null, slice.tags && React__default.default.createElement(boemly.Flex, {
+    direction: "row",
+    justify: "center",
+    gap: "2",
+    mb: "4",
+    wrap: "wrap"
+  }, slice.tags.map(function (_ref2) {
+    var id = _ref2.id,
+      text = _ref2.text,
+      colorScheme = _ref2.colorScheme;
+    return React__default.default.createElement(boemly.Tag, {
+      key: id,
+      colorScheme: colorScheme,
+      size: "md",
+      variant: "subtle"
+    }, text);
+  })), React__default.default.createElement(boemly.DefaultSectionHeader, {
+    isHero: true,
+    tagline: slice.tagline,
+    title: slice.title,
+    text: slice.subTitle,
+    taglineProps: {
+      color: colors[theme].tagline,
+      textAlign: 'center',
+      mx: 'auto'
+    },
+    titleProps: {
+      color: colors[theme].title,
+      maxW: '4xl',
+      textAlign: 'center',
+      mx: 'auto'
+    },
+    textProps: {
+      maxW: '2xl',
+      textAlign: 'center',
+      mx: 'auto',
+      color: colors[theme].text
+    }
+  }), slice.button && React__default.default.createElement(StrapiLinkButton, {
+    link: slice.button,
+    mt: "6",
+    size: "lg"
+  })))));
+};
+
+var _templateObject$3, _templateObject2$1;
+var BlogItemContainer = /*#__PURE__*/styled__default.default(boemly.Link)(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n\n  & div img {\n    transition: transform var(--default-ease) var(--medium-transition-duration);\n  }\n\n  &:hover {\n    text-decoration: none;\n\n    & > div:first-of-type img {\n      transform: scale(1.03);\n    }\n  }\n"])));
+var ImageContainer$1 = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: var(--boemly-sizes-xs);\n  position: relative;\n  border-radius: var(--boemly-radii-2xl);\n\n  // Fixes the flickering of borders during animation in Safari\n  -webkit-mask-image: -webkit-radial-gradient(white, black);\n\n  & span,\n  div {\n    border-radius: var(--boemly-radii-2xl);\n  }\n\n  @media screen and (max-width: ", ") {\n    height: var(--boemly-sizes-3xs);\n  }\n"])), BREAKPOINT_MD);
+
 var Blog = function Blog(_ref) {
   var slice = _ref.slice,
     blogPosts = _ref.blogPosts;
@@ -2618,63 +2682,6 @@ var Blog = function Blog(_ref) {
   }))));
 };
 
-var CreditsAvailableState;
-(function (CreditsAvailableState) {
-  CreditsAvailableState["YES"] = "yes";
-  CreditsAvailableState["SOME"] = "some";
-  CreditsAvailableState["NO"] = "no";
-  CreditsAvailableState["NOT_YET"] = "notYet";
-})(CreditsAvailableState || (CreditsAvailableState = {}));
-var CreditsAvailableState$1 = CreditsAvailableState;
-
-var FORMAT_AS_HECTARE_CONFIG = {
-  unit: 'hectare',
-  unitDisplay: 'short',
-  style: 'unit',
-  maximumFractionDigits: 2
-};
-var FORMAT_AS_PERCENT_CONFIG = {
-  style: 'percent',
-  maximumFractionDigits: 2
-};
-
-var PortfolioProjectCard = function PortfolioProjectCard(_ref) {
-  var _creditsAvailableMess, _project$creditsAvail, _project$thumbnail, _project$thumbnail2, _project$thumbnail3;
-  var project = _ref.project;
-  var _useContext = React.useContext(IntlContext),
-    formatMessage = _useContext.formatMessage,
-    formatNumber = _useContext.formatNumber;
-  var creditsAvailableMessages = (_creditsAvailableMess = {}, _creditsAvailableMess[CreditsAvailableState$1.YES] = formatMessage({
-    id: 'components.portfolioProjectCard.text.yes'
-  }), _creditsAvailableMess[CreditsAvailableState$1.SOME] = formatMessage({
-    id: 'components.portfolioProjectCard.text.some'
-  }), _creditsAvailableMess[CreditsAvailableState$1.NO] = formatMessage({
-    id: 'components.portfolioProjectCard.text.no'
-  }), _creditsAvailableMess[CreditsAvailableState$1.NOT_YET] = formatMessage({
-    id: 'components.portfolioProjectCard.text.notYet'
-  }), _creditsAvailableMess);
-  return React__default.default.createElement(boemly.ProjectCard, {
-    title: project.title,
-    facts: [{
-      id: 1,
-      text: formatNumber((project.area || 0) / 10000, FORMAT_AS_HECTARE_CONFIG)
-    }, {
-      id: 2,
-      text: project.location || ''
-    }],
-    footerTitle: creditsAvailableMessages[(_project$creditsAvail = project.creditsAvailable) != null ? _project$creditsAvail : CreditsAvailableState$1.NOT_YET],
-    footerSubTitle: project.footerSubTitle || '',
-    image: project.thumbnail && React__default.default.createElement(Image__default.default, {
-      src: strapiMediaUrl((_project$thumbnail = project.thumbnail) == null ? void 0 : _project$thumbnail.img, 'medium'),
-      alt: (_project$thumbnail2 = project.thumbnail) == null ? void 0 : _project$thumbnail2.alt,
-      fill: true,
-      style: {
-        objectFit: ((_project$thumbnail3 = project.thumbnail) == null ? void 0 : _project$thumbnail3.objectFit) || 'cover'
-      }
-    })
-  });
-};
-
 var ConditionalWrapper = function ConditionalWrapper(_ref) {
   var condition = _ref.condition,
     wrapper = _ref.wrapper,
@@ -4724,7 +4731,8 @@ var SliceRenderer = function SliceRenderer(_ref) {
       case 'sections.text-with-card':
         return React__default.default.createElement(TextWithCard, {
           key: slice.__component + "-" + slice.id,
-          slice: slice
+          slice: slice,
+          projects: projects
         });
       case 'sections.logo-grid-with-text':
         return React__default.default.createElement(LogoGridWithText, {