@treely/strapi-slices 2.4.1 → 3.0.0

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

@@ -2127,234 +2127,55 @@ 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$a = {
+var messagesDe$b = {
   'sections.comparison.backgroundShapes': 'Hintergrundformen'
 };
 
-var messagesDe$9 = {
+var messagesDe$a = {
   'sections.cta.backgroundShapes': 'Dunkle Hintergrundformen',
   'sections.cta.backgroundShapesLight': 'Helle Hintergrundformen'
 };
 
-var messagesDe$8 = {
+var messagesDe$9 = {
   'sections.customerStories.more': 'Weiterlesen'
 };
 
-var messagesDe$7 = {
+var messagesDe$8 = {
   'sections.glossary.copyButtonLabel': 'Kopiere den Link zu diesem Abschnitt in die Zwischenablage',
   'sections.glossary.copySuccessMessage': 'Link in die Zwischenablage kopiert',
   'sections.glossary.copyFailureMessage': 'Link konnte nicht in die Zwischenablage kopiert werden'
 };
 
-var messagesDe$6 = {
+var messagesDe$7 = {
   'sections.projectFacts.projectInfo.value': 'Projekt Infos',
   'projects.projectFacts.properties.area': 'Fläche'
 };
 
-var messagesDe$5 = {
+var messagesDe$6 = {
   'sections.projectsMap.link.text': 'Mehr Infos'
 };
 
-var messagesDe$4 = {
+var messagesDe$5 = {
   'sections.shopCheckout.intro.price': 'Preis',
   'sections.shopCheckout.contributionValue.label.EUR': 'Geben sie einen Betrag in € ein',
   'sections.shopCheckout.contributionValue.label.CHF': 'Geben sie einen Betrag in CHF ein',
@@ -2369,19 +2190,19 @@ var messagesDe$4 = {
   'sections.shopCheckout.submit': 'Kaufen'
 };
 
-var messagesDe$3 = {
+var messagesDe$4 = {
   'components.creditsAvailableBadge.text.yes': 'Credits verfügbar',
   'components.creditsAvailableBadge.text.some': 'Einige verbleibende Credits',
   'components.creditsAvailableBadge.text.no': 'Keine verbleibenden Credits',
   'components.creditsAvailableBadge.text.notYet': 'Noch keine Credits verfügbar'
 };
 
-var messagesDe$2 = {
+var messagesDe$3 = {
   'features.portfolio.documentsDownloadList.projectDocuments': 'Projektdokumente',
   'features.portfolio.documentsDownloadList.downloadDocument': 'Dokument herunterladen'
 };
 
-var messagesDe$1 = {
+var messagesDe$2 = {
   'features.projectInfo.projectInfo.value': 'Projekt Infos',
   'features.projectInfo.properties.area': 'Projekt Fläche',
   'features.projectInfo.properties.location': 'Standort',
@@ -2396,7 +2217,7 @@ var messagesDe$1 = {
   'features.projectInfo.properties.year': '{years} {years, plural, one {Jahr} other {Jahre} }'
 };
 
-var messagesDe = {
+var messagesDe$1 = {
   'portfolio.smallCheckout.contributionValueCurrency.label.CHF': 'Geben Sie den Beitrag in Fr. ein',
   'portfolio.smallCheckout.contributionValueCurrency.label.EUR': 'Geben Sie den Beitrag in € ein',
   'portfolio.smallCheckout.contributionValueCurrency.unit.EUR': '€',
@@ -2412,42 +2233,49 @@ var messagesDe = {
   'portfolio.smallCheckout.cta.button': 'Unser Vertriebsteam kontaktieren'
 };
 
+var messagesDe = {
+  'components.portfolioProjectCard.text.yes': 'Credits verfügbar',
+  'components.portfolioProjectCard.text.some': 'Einige verbleibende Credits',
+  'components.portfolioProjectCard.text.no': 'Keine verbleibenden Credits',
+  'components.portfolioProjectCard.text.notYet': 'Noch keine Credits verfügbar'
+};
+
 var unitMessagesEn = {
   'unit.formatter.tonsCo2': '{number} /tCO₂',
   'unit.formatter.tonsCo2PerYear': '{number} tCO₂/year'
 };
 
-var rootMessagesDe = /*#__PURE__*/_extends({}, messagesDe$3, messagesDe$2, messagesDe$1, messagesDe, messagesDe$a, messagesDe$9, messagesDe$8, messagesDe$7, messagesDe$6, messagesDe$5, messagesDe$4, unitMessagesEn);
+var rootMessagesDe = /*#__PURE__*/_extends({}, messagesDe$4, messagesDe$3, messagesDe, messagesDe$2, messagesDe$1, messagesDe$b, messagesDe$a, messagesDe$9, messagesDe$8, messagesDe$7, messagesDe$6, messagesDe$5, unitMessagesEn);
 
-var messagesEn$a = {
+var messagesEn$b = {
   'sections.comparison.backgroundShapes': 'Background shapes'
 };
 
-var messagesEn$9 = {
+var messagesEn$a = {
   'sections.cta.backgroundShapesDark': 'Dark background shapes',
   'sections.cta.backgroundShapesLight': 'Light background shapes'
 };
 
-var messagesEn$8 = {
+var messagesEn$9 = {
   'sections.customerStories.more': 'Read more'
 };
 
-var messagesEn$7 = {
+var messagesEn$8 = {
   'sections.glossary.copyButtonLabel': 'Copy a link to this section to your clipboard',
   'sections.glossary.copySuccessMessage': 'Copied the link to your clipboard',
   'sections.glossary.copyFailureMessage': 'Could not copy link to clipboard'
 };
 
-var messagesEn$6 = {
+var messagesEn$7 = {
   'sections.projectFacts.projectInfo.value': 'Project Infos',
   'projects.projectFacts.properties.area': 'Area'
 };
 
-var messagesEn$5 = {
+var messagesEn$6 = {
   'sections.projectsMap.link.text': 'Show more info'
 };
 
-var messagesEn$4 = {
+var messagesEn$5 = {
   'sections.shopCheckout.intro.price': 'Price',
   'sections.shopCheckout.contributionValue.label.EUR': 'Enter contribution value in €',
   'sections.shopCheckout.contributionValue.label.CHF': 'Enter contribution value in CHF',
@@ -2462,19 +2290,19 @@ var messagesEn$4 = {
   'sections.shopCheckout.submit': 'Checkout'
 };
 
-var messagesEn$3 = {
+var messagesEn$4 = {
   'components.creditsAvailableBadge.text.yes': 'Credits available',
   'components.creditsAvailableBadge.text.some': 'Some remaining credits',
   'components.creditsAvailableBadge.text.no': 'No remaining credits',
   'components.creditsAvailableBadge.text.notYet': 'No credits available yet'
 };
 
-var messagesEn$2 = {
+var messagesEn$3 = {
   'features.portfolio.documentsDownloadList.projectDocuments': 'Project documents',
   'features.portfolio.documentsDownloadList.downloadDocument': 'Download document'
 };
 
-var messagesEn$1 = {
+var messagesEn$2 = {
   'features.projectInfo.projectInfo.value': 'Project Infos',
   'features.projectInfo.properties.area': 'Project Area',
   'features.projectInfo.properties.location': 'Location',
@@ -2489,7 +2317,7 @@ var messagesEn$1 = {
   'features.projectInfo.properties.year': '{years} {years, plural, one {year} other {years} }'
 };
 
-var messagesEn = {
+var messagesEn$1 = {
   'portfolio.smallCheckout.contributionValueCurrency.label.CHF': 'Contribution Amount in CHF',
   'portfolio.smallCheckout.contributionValueCurrency.label.EUR': 'Contribution Amount in €',
   'portfolio.smallCheckout.contributionValueCurrency.unit.EUR': '€',
@@ -2505,10 +2333,17 @@ var messagesEn = {
   'portfolio.smallCheckout.cta.button': 'Contact our Sales Team'
 };
 
-var rootMessagesEn = /*#__PURE__*/_extends({}, messagesEn$3, messagesEn$2, messagesEn$1, messagesEn, messagesEn$a, messagesEn$9, messagesEn$8, messagesEn$7, messagesEn$6, messagesEn$5, messagesEn$4, unitMessagesEn);
+var messagesEn = {
+  'components.portfolioProjectCard.text.yes': 'Credits available',
+  'components.portfolioProjectCard.text.some': 'Some remaining credits',
+  'components.portfolioProjectCard.text.no': 'No remaining credits',
+  'components.portfolioProjectCard.text.notYet': 'No credits available yet'
+};
+
+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',
@@ -2542,6 +2377,236 @@ 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 fpmData = projects.find(function (project) {
+    var _slice$card;
+    return project.slug === ((_slice$card = slice.card) == null || (_slice$card = _slice$card.project) == null ? void 0 : _slice$card.data.attributes.slug);
+  });
+  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 && fpmData && React__default.default.createElement(PortfolioProjectCard, {
+    project: _extends({}, slice.card, fpmData)
+  }));
+  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;
@@ -2611,21 +2676,22 @@ var ConditionalWrapper = function ConditionalWrapper(_ref) {
   return condition ? wrapper(children) : children;
 };
 var ProjectsGrid = function ProjectsGrid(_ref2) {
-  var slice = _ref2.slice;
+  var projects = _ref2.projects;
+  var filteredProjects = projects.filter(function (p) {
+    return p.thumbnail && p.slug && p.isPublic;
+  });
   return React__default.default.createElement(boemly.DefaultSectionContainer, null, React__default.default.createElement(boemly.Wrapper, null, React__default.default.createElement(boemly.SimpleGrid, {
     columns: [1, null, null, 2, null, 3],
     gap: "16"
-  }, slice.projects.map(function (card) {
-    var _card$project;
+  }, filteredProjects.map(function (project) {
     return React__default.default.createElement(ConditionalWrapper, {
-      key: card.id,
-      condition: !!((_card$project = card.project) != null && _card$project.data),
+      key: project.id,
+      condition: !!project.slug,
       wrapper: function wrapper(children) {
-        var _card$project2;
         return React__default.default.createElement(Link__default.default, {
-          href: "/portfolio/" + ((_card$project2 = card.project) == null || (_card$project2 = _card$project2.data) == null ? void 0 : _card$project2.attributes.slug),
+          href: "/portfolio/" + project.slug,
           passHref: true,
-          key: card.id,
+          key: project.id,
           legacyBehavior: true
         }, children);
       }
@@ -2639,19 +2705,8 @@ var ProjectsGrid = function ProjectsGrid(_ref2) {
       _hover: {
         boxShadow: 'lg'
       }
-    }, React__default.default.createElement(boemly.ProjectCard, {
-      title: card.title,
-      facts: card.facts,
-      footerTitle: card.footerTitle,
-      footerSubTitle: card.footerSubTitle,
-      image: React__default.default.createElement(Image__default.default, {
-        src: strapiMediaUrl(card.image.img, 'medium'),
-        alt: card.image.alt,
-        fill: true,
-        style: {
-          objectFit: card.image.objectFit || 'cover'
-        }
-      })
+    }, React__default.default.createElement(PortfolioProjectCard, {
+      project: project
     })));
   }))));
 };
@@ -2701,15 +2756,6 @@ var MinimalProviders = function MinimalProviders(_ref) {
   }, children));
 };
 
-var CreditsAvailableState;
-(function (CreditsAvailableState) {
-  CreditsAvailableState["YES"] = "yes";
-  CreditsAvailableState["SOME"] = "some";
-  CreditsAvailableState["NO"] = "no";
-  CreditsAvailableState["NOT_YET"] = "notYet";
-})(CreditsAvailableState || (CreditsAvailableState = {}));
-var CreditsAvailableState$1 = CreditsAvailableState;
-
 var CreditsAvailableBadge = function CreditsAvailableBadge(_ref) {
   var _variants;
   var status = _ref.status,
@@ -4108,17 +4154,6 @@ var convertCo2AmountKgToTons = function convertCo2AmountKgToTons(amount) {
   return parseInt(amount, 10) / 1000;
 };
 
-var FORMAT_AS_HECTARE_CONFIG = {
-  unit: 'hectare',
-  unitDisplay: 'short',
-  style: 'unit',
-  maximumFractionDigits: 2
-};
-var FORMAT_AS_PERCENT_CONFIG = {
-  style: 'percent',
-  maximumFractionDigits: 2
-};
-
 var getTimeSpanInYears = function getTimeSpanInYears(start, end) {
   var monthsDifference = end.getMonth() - start.getMonth();
   var yearsDifference = end.getFullYear() - start.getFullYear();
@@ -4680,7 +4715,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, {
@@ -4765,7 +4801,7 @@ var SliceRenderer = function SliceRenderer(_ref) {
       case 'sections.projects-grid':
         return React__default.default.createElement(ProjectsGrid, {
           key: slice.__component + "-" + slice.id,
-          slice: slice
+          projects: projects
         });
       case 'sections.projects-map':
         return React__default.default.createElement(ProjectsMap, {