@treely/strapi-slices 5.2.0 → 5.2.2

package/dist/rootMessages.de.d.ts

@@ -3,6 +3,8 @@ declare const rootMessagesDe: {
     'unit.formatter.tonsCo2PerYear': string;
     'sections.timeline.backgroundShapes': string;
     'sections.timeline.showMoreButton': string;
+    'sections.textCarousel.moveRight': string;
+    'sections.textCarousel.moveLeft': string;
     'sections.shopCheckout.intro.price': string;
     'sections.shopCheckout.contributionValue.label.EUR': string;
     'sections.shopCheckout.contributionValue.label.CHF': string;

package/dist/rootMessages.en.d.ts

@@ -3,6 +3,8 @@ declare const rootMessagesEn: {
     'unit.formatter.tonsCo2PerYear': string;
     'sections.timeline.backgroundShapes': string;
     'sections.timeline.showMoreButton': string;
+    'sections.textCarousel.moveRight': string;
+    'sections.textCarousel.moveLeft': string;
     'sections.shopCheckout.intro.price': string;
     'sections.shopCheckout.contributionValue.label.EUR': string;
     'sections.shopCheckout.contributionValue.label.CHF': string;

package/dist/slices/TextCarousel/messages.de.d.ts

@@ -0,0 +1,5 @@
+declare const messagesDe: {
+    'sections.textCarousel.moveRight': string;
+    'sections.textCarousel.moveLeft': string;
+};
+export default messagesDe;

package/dist/slices/TextCarousel/messages.en.d.ts

@@ -0,0 +1,5 @@
+declare const messagesDe: {
+    'sections.textCarousel.moveRight': string;
+    'sections.textCarousel.moveLeft': string;
+};
+export default messagesDe;

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

@@ -1022,9 +1022,9 @@ var IconGrid = function IconGrid(_ref) {
   })), React__default.default.createElement(boemly.Spacer, {
     h: "20"
   })) : React__default.default.createElement(React__default.default.Fragment, null), React__default.default.createElement(boemly.SimpleGrid, {
-    columns: [1, null, null, 2],
-    gap: "32",
-    rowGap: ['16', null, null, '28']
+    columns: [1, null, null, 2, 3],
+    gap: "16",
+    rowGap: ['16', null, null, '20']
   }, slice.iconsWithTextAndButton.map(function (iconWithTextAndButton) {
     return React__default.default.createElement(boemly.Box, {
       key: iconWithTextAndButton.id
@@ -1977,249 +1977,64 @@ var TextCardGrid = function TextCardGrid(_ref) {
 };
 
 var _templateObject$5, _templateObject2$2, _templateObject3$1;
-var CarouselContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: scroll;\n\n  margin-top: var(--boemly-space-6);\n  padding: var(--boemly-space-8) 0;\n\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  @media screen and (max-width: ", ") {\n    margin-top: var(--boemly-space-4);\n  }\n"])), BREAKPOINT_MD);
-var CarouselInnerContainer = /*#__PURE__*/styled__default.default(framerMotion.motion.div)(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  width: calc(\n    (var(--boemly-sizes-sm) + var(--boemly-space-16)) *\n      ", " +\n      var(--boemly-space-16)\n  );\n  min-width: var(--boemly-sizes-full);\n\n  @media screen and (max-width: ", ") {\n    width: calc(\n      (var(--boemly-sizes-xs) + var(--boemly-space-4)) *\n        ", " +\n        var(--boemly-space-6)\n    );\n  }\n"])), function (_ref) {
+var CarouselContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: var(--boemly-space-6);\n  padding: var(--boemly-space-8) 0;\n\n  @media screen and (max-width: ", ") {\n    margin-top: var(--boemly-space-4);\n    width: var(--boemly-size-full);\n  }\n\n  width: var(--boemly-size-full);\n\n  overflow-x: hidden;\n\n  @media screen and (max-width: ", ") {\n    overflow-x: scroll;\n  }\n"])), BREAKPOINT_MD, BREAKPOINT_MD);
+var CarouselInnerContainer = /*#__PURE__*/styled__default.default(framerMotion.motion.div)(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  width: calc(\n    (var(--boemly-sizes-sm) + var(--boemly-space-16)) *\n      ", " +\n      var(--boemly-space-16)\n  );\n  min-width: var(--boemly-sizes-full);\n\n  @media screen and (max-width: ", ") {\n    justify-content: flex-start;\n    width: calc(\n      (var(--boemly-sizes-2xs) + var(--boemly-space-4)) *\n        ", " +\n        var(--boemly-space-6)\n    );\n  }\n"])), function (_ref) {
   var numberofitems = _ref.numberofitems;
   return numberofitems;
 }, BREAKPOINT_MD, function (_ref2) {
   var numberofitems = _ref2.numberofitems;
   return numberofitems;
 });
-var CardContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n\n  margin-right: var(--boemly-space-16);\n\n  &:first-of-type {\n    margin-left: var(--boemly-space-16);\n  }\n\n  @media screen and (max-width: ", ") {\n    width: var(--boemly-sizes-xs);\n\n    margin-right: var(--boemly-space-4);\n\n    &:first-of-type {\n      margin-left: var(--boemly-space-6);\n    }\n  }\n"])), function (_ref3) {
+var CardContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n\n  margin-right: var(--boemly-space-6);\n\n  &:first-of-type {\n    margin-left: var(--boemly-space-6);\n  }\n\n  @media screen and (max-width: ", ") {\n    width: var(--boemly-sizes-2xs);\n\n    margin-right: var(--boemly-space-4);\n\n    &:first-of-type {\n      margin-left: var(--boemly-space-6);\n    }\n  }\n"])), function (_ref3) {
   var numberofitems = _ref3.numberofitems;
   return numberofitems === 3 ? 'var(--boemly-sizes-xl)' : 'var(--boemly-sizes-sm)';
 }, BREAKPOINT_MD);
 
-var TextCarousel = function TextCarousel(_ref) {
-  var slice = _ref.slice;
-  var _useToken = boemly.useToken('colors', ['primary.50']),
-    primary50 = _useToken[0];
-  var containerRef = React.useRef(null);
-  return React__default.default.createElement(boemly.DefaultSectionContainer, {
-    backgroundColor: primary50,
-    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,
-    taglineProps: {
-      textAlign: 'center'
-    },
-    titleProps: {
-      textAlign: 'center',
-      maxW: '6xl',
-      marginX: 'auto'
-    },
-    textProps: {
-      textAlign: 'center',
-      maxW: '2xl',
-      marginX: 'auto'
-    }
-  })), React__default.default.createElement(CarouselContainer, {
-    ref: containerRef
-  }, React__default.default.createElement(CarouselInnerContainer, {
-    drag: "x",
-    dragConstraints: containerRef,
-    numberofitems: slice.slides.length
-  }, slice.slides.map(function (_ref2) {
-    var id = _ref2.id,
-      title = _ref2.title,
-      text = _ref2.text,
-      icon = _ref2.icon;
-    return React__default.default.createElement(CardContainer, {
-      key: id,
-      numberofitems: slice.slides.length
-    }, React__default.default.createElement(boemly.TextCardWithIcon, {
-      title: title,
-      text: text,
-      icon: React__default.default.createElement(Image__default.default, {
-        src: strapiMediaUrl(icon.img, 'small'),
-        alt: icon.alt,
-        fill: true,
-        style: {
-          objectFit: icon.objectFit || 'contain'
-        }
-      }),
-      displayAs: "column"
-    }));
-  }))), React__default.default.createElement(React__default.default.Fragment, null, slice.button && React__default.default.createElement(boemly.Wrapper, null, React__default.default.createElement(boemly.Center, null, React__default.default.createElement(StrapiLinkButton, {
-    link: slice.button,
-    size: "xl",
-    mt: ['8', null, '14']
-  })))));
-};
-
-var TextWithTextCards = function TextWithTextCards(_ref) {
-  var slice = _ref.slice;
-  var _useRouter = router.useRouter(),
-    push = _useRouter.push;
-  var _useToken = boemly.useToken('colors', ['white']),
-    white = _useToken[0];
-  var _useMediaQuery = boemly.useMediaQuery(BREAKPOINT_LG_QUERY),
-    belowBreakpoint = _useMediaQuery[0];
-  return React__default.default.createElement(boemly.DefaultSectionContainer, {
-    backgroundColor: white,
-    title: slice.title
-  }, React__default.default.createElement(React__default.default.Fragment, null, slice.shape && React__default.default.createElement(boemly.Box, {
-    position: "absolute",
-    right: ['-28', null, null, '-136'],
-    top: ['96', null, null, '-28'],
-    width: ['sm', null, null, '4xl'],
-    height: ['sm', null, null, '4xl'],
-    borderBottomRightRadius: "full"
-  }, React__default.default.createElement(Image__default.default, {
-    src: strapiMediaUrl(slice.shape.img, 'medium'),
-    alt: slice.shape.alt,
-    fill: true,
-    style: {
-      objectFit: slice.shape.objectFit || 'cover',
-      borderBottomRightRadius: 'var(--boemly-radii-full)'
-    }
-  }))), React__default.default.createElement(boemly.Wrapper, null, React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(boemly.Grid, {
-    templateColumns: ['repeat(8, 1fr)', null, null, null, 'repeat(16, 1fr)'],
-    templateRows: ['repeat(2, auto)', null, null, null, 'repeat(1, auto)'],
-    rowGap: "12"
-  }, React__default.default.createElement(boemly.GridItem, {
-    colSpan: [8, null, null, null, 9],
-    rowSpan: 1,
-    pr: ['0', null, null, null, '32']
-  }, React__default.default.createElement(boemly.DefaultSectionHeader, {
-    tagline: slice.tagline,
-    title: slice.title,
-    text: slice.text,
-    textProps: {
-      pr: ['0', null, null, null, '10']
-    }
-  }), slice.contact && !belowBreakpoint && React__default.default.createElement(boemly.ContactArea, {
-    title: slice.contact.title,
-    text: slice.contact.text,
-    avatar: {
-      name: slice.contact.avatar.name,
-      description: slice.contact.avatar.description,
-      image: React__default.default.createElement(Image__default.default, {
-        src: strapiMediaUrl(slice.contact.avatar.image.img, 'small'),
-        alt: slice.contact.avatar.image.alt,
-        fill: true,
-        style: {
-          objectFit: slice.contact.avatar.image.objectFit || 'cover'
-        }
-      })
-    },
-    link: {
-      text: slice.contact.button.text,
-      onClick: function onClick() {
-        var _slice$contact;
-        return push(strapiLinkUrl((_slice$contact = slice.contact) == null ? void 0 : _slice$contact.button));
-      }
-    }
-  })), React__default.default.createElement(boemly.GridItem, {
-    colSpan: [8, null, null, null, 7],
-    rowSpan: 1,
-    position: "relative"
-  }, slice.cards.map(function (card) {
-    return React__default.default.createElement(boemly.TextCardWithIcon, {
-      key: card.id,
-      title: card.title,
-      text: card.text,
-      icon: React__default.default.createElement(Image__default.default, {
-        src: strapiMediaUrl(card.icon.img, 'small'),
-        alt: card.icon.alt,
-        fill: true,
-        style: {
-          objectFit: card.icon.objectFit || 'contain'
-        }
-      })
-    });
-  }))), slice.contact && belowBreakpoint && React__default.default.createElement(boemly.ContactArea, {
-    title: slice.contact.title,
-    text: slice.contact.text,
-    avatar: {
-      name: slice.contact.avatar.name,
-      description: slice.contact.avatar.description,
-      image: React__default.default.createElement(Image__default.default, {
-        src: strapiMediaUrl(slice.contact.avatar.image.img, 'small'),
-        alt: slice.contact.avatar.image.alt,
-        fill: true,
-        style: {
-          objectFit: slice.contact.avatar.image.objectFit || 'cover'
-        }
-      })
-    },
-    link: {
-      text: slice.contact.button.text,
-      onClick: function onClick() {
-        var _slice$contact2;
-        return push(strapiLinkUrl((_slice$contact2 = slice.contact) == null ? void 0 : _slice$contact2.button));
-      }
-    }
-  }))));
-};
-
-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 messagesDe$d = {
+var messagesDe$f = {
   'sections.comparison.backgroundShapes': 'Hintergrundformen'
 };
 
-var messagesDe$c = {
+var messagesDe$e = {
   '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': 'Gutschriften bald verfügbar'
 };
 
-var messagesDe$b = {
+var messagesDe$d = {
   'sections.cta.backgroundShapes': 'Dunkle Hintergrundformen',
   'sections.cta.backgroundShapesLight': 'Helle Hintergrundformen'
 };
 
-var messagesDe$a = {
+var messagesDe$c = {
   'sections.customerCard.more': 'Weiterlesen'
 };
 
-var messagesDe$9 = {
+var messagesDe$b = {
   'sections.customerQuoteCard.more': 'Weiterlesen'
 };
 
-var messagesDe$8 = {
+var messagesDe$a = {
   '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$7 = {
+var messagesDe$9 = {
   'features.portfolio.documentsDownloadList.projectDocuments': 'Projektdokumente',
   'features.portfolio.documentsDownloadList.downloadDocument': 'Dokument herunterladen'
 };
 
-var messagesDe$6 = {
+var messagesDe$8 = {
   'sections.projectFacts.projectInfo.value': 'Projekt Infos',
   'projects.projectFacts.properties.area': 'Fläche'
 };
 
-var messagesDe$5 = {
+var messagesDe$7 = {
   'sections.projectsMap.link.text': 'Mehr Infos'
 };
 
-var messagesDe$4 = {
+var messagesDe$6 = {
   'features.projectInfo.projectInfo.value': 'Projekt Infos',
   'features.projectInfo.properties.area': 'Projekt Fläche',
   'features.projectInfo.properties.location': 'Standort',
@@ -2234,14 +2049,14 @@ var messagesDe$4 = {
   'features.projectInfo.properties.year': '{years} {years, plural, one {Jahr} other {Jahre} }'
 };
 
-var messagesDe$3 = {
+var messagesDe$5 = {
   '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': 'Gutschriften bald verfügbar'
 };
 
-var messagesDe$2 = {
+var messagesDe$4 = {
   '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': '€',
@@ -2257,7 +2072,7 @@ var messagesDe$2 = {
   'portfolio.smallCheckout.cta.button': 'Unser Vertriebsteam kontaktieren'
 };
 
-var messagesDe$1 = {
+var messagesDe$3 = {
   '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',
@@ -2272,7 +2087,12 @@ var messagesDe$1 = {
   'sections.shopCheckout.submit': 'Kaufen'
 };
 
-var messagesDe = {
+var messagesDe$2 = {
+  'sections.textCarousel.moveRight': 'Nach rechts bewegen',
+  'sections.textCarousel.moveLeft': 'Nach links bewegen'
+};
+
+var messagesDe$1 = {
   'sections.timeline.backgroundShapes': 'Hintergrundformen',
   'sections.timeline.showMoreButton': 'Drei weitere Meilensteine anzeigen'
 };
@@ -2282,7 +2102,7 @@ var unitMessagesDe = {
   'unit.formatter.tonsCo2PerYear': '{number} tCO₂/Jahr'
 };
 
-var rootMessagesDe = /*#__PURE__*/_extends({}, messagesDe$c, messagesDe$7, messagesDe$3, messagesDe$4, messagesDe$2, messagesDe$d, messagesDe$b, messagesDe$a, messagesDe$9, messagesDe$8, messagesDe$6, messagesDe$5, messagesDe$1, messagesDe, unitMessagesDe);
+var rootMessagesDe = /*#__PURE__*/_extends({}, messagesDe$e, messagesDe$9, messagesDe$5, messagesDe$6, messagesDe$4, messagesDe$f, messagesDe$d, messagesDe$c, messagesDe$b, messagesDe$a, messagesDe$8, messagesDe$7, messagesDe$3, messagesDe$2, messagesDe$1, unitMessagesDe);
 
 var messagesEn$d = {
   'sections.comparison.backgroundShapes': 'Background shapes'
@@ -2381,6 +2201,11 @@ var messagesEn$1 = {
   'sections.shopCheckout.submit': 'Checkout'
 };
 
+var messagesDe = {
+  'sections.textCarousel.moveRight': 'Move right',
+  'sections.textCarousel.moveLeft': 'Move left'
+};
+
 var messagesEn = {
   'sections.timeline.backgroundShapes': 'Background shapes',
   'sections.timeline.showMoreButton': 'Show three more milestones'
@@ -2391,7 +2216,7 @@ var unitMessagesEn = {
   'unit.formatter.tonsCo2PerYear': '{number} tCO₂/year'
 };
 
-var rootMessagesEn = /*#__PURE__*/_extends({}, messagesEn$c, messagesEn$7, messagesEn$3, messagesEn$4, messagesEn$2, messagesEn$d, messagesEn$b, messagesEn$a, messagesEn$9, messagesEn$8, messagesEn$6, messagesEn$5, messagesEn$1, messagesEn, unitMessagesEn);
+var rootMessagesEn = /*#__PURE__*/_extends({}, messagesEn$c, messagesEn$7, messagesEn$3, messagesEn$4, messagesEn$2, messagesEn$d, messagesEn$b, messagesEn$a, messagesEn$9, messagesEn$8, messagesEn$6, messagesEn$5, messagesEn$1, messagesDe, messagesEn, unitMessagesEn);
 
 var _templateObject$4;
 var GLOBAL_STYLE = /*#__PURE__*/react$1.css(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :root {\n    --default-hero-height: calc(100vh - var(--boemly-space-24));\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])));
@@ -2419,6 +2244,273 @@ var ContextProvider = function ContextProvider(_ref) {
   }, children));
 };
 
+var TextCarousel = function TextCarousel(_ref) {
+  var slice = _ref.slice;
+  var _useToken = boemly.useToken('colors', ['primary.50']),
+    primary50 = _useToken[0];
+  var _useMeasure = reactUse.useMeasure(),
+    slideRef = _useMeasure[0],
+    slideWidth = _useMeasure[1].width;
+  var _useContext = React.useContext(IntlContext),
+    formatMessage = _useContext.formatMessage;
+  var containerRef = React.useRef(null);
+  var _useWindowSize = reactUse.useWindowSize(),
+    windowWidth = _useWindowSize.width;
+  var _useState = React.useState(0),
+    sliderIndex = _useState[0],
+    setSliderIndex = _useState[1];
+  var allowScroll = windowWidth / 2 / slideWidth < slice.slides.length;
+  var canMoveRight = sliderIndex < slice.slides.length - 1;
+  var canMoveLeft = sliderIndex !== 0;
+  return React__default.default.createElement(boemly.DefaultSectionContainer, {
+    backgroundColor: primary50,
+    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,
+    taglineProps: {
+      textAlign: 'center'
+    },
+    titleProps: {
+      textAlign: 'center',
+      maxW: '6xl',
+      marginX: 'auto'
+    },
+    textProps: {
+      textAlign: 'center',
+      maxW: '2xl',
+      marginX: 'auto'
+    }
+  })), React__default.default.createElement(CarouselContainer, {
+    ref: containerRef
+  }, React__default.default.createElement(boemly.Box, {
+    position: "relative",
+    width: "full"
+  }, React__default.default.createElement(CarouselInnerContainer, {
+    numberofitems: slice.slides.length,
+    animate: {
+      x: slideWidth * -sliderIndex
+    },
+    transition: {
+      duration: 0.3,
+      ease: 'easeInOut'
+    }
+  }, slice.slides.map(function (_ref2) {
+    var id = _ref2.id,
+      title = _ref2.title,
+      text = _ref2.text,
+      icon = _ref2.icon;
+    return React__default.default.createElement(CardContainer, {
+      key: id,
+      ref: slideRef,
+      numberofitems: slice.slides.length
+    }, React__default.default.createElement(boemly.TextCardWithIcon, {
+      title: title,
+      text: text,
+      icon: React__default.default.createElement(Image__default.default, {
+        src: strapiMediaUrl(icon.img, 'small'),
+        alt: icon.alt,
+        fill: true,
+        style: {
+          objectFit: icon.objectFit || 'contain'
+        }
+      }),
+      displayAs: "column"
+    }));
+  })), React__default.default.createElement(boemly.Box, {
+    display: ['none', null, null, !!allowScroll ? 'flex' : 'none'],
+    pointerEvents: "none",
+    position: "absolute",
+    top: "40%",
+    left: "0",
+    width: "full",
+    py: "0",
+    px: "32",
+    justifyContent: "space-between"
+  }, React__default.default.createElement(boemly.Box, null, React__default.default.createElement(framerMotion.AnimatePresence, null, canMoveLeft && React__default.default.createElement(boemly.IconButton, {
+    key: "leftButton",
+    as: framerMotion.motion.button,
+    initial: {
+      opacity: 0
+    },
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    },
+    size: "lg",
+    variant: "outline",
+    onClick: function onClick() {
+      return setSliderIndex(sliderIndex - 1);
+    },
+    "aria-label": formatMessage({
+      id: 'sections.textCarousel.moveLeft'
+    }),
+    icon: React__default.default.createElement(react.ArrowLeft, {
+      size: 16
+    }),
+    pointerEvents: "auto",
+    boxShadow: "sm"
+  }))), React__default.default.createElement(boemly.Box, null, React__default.default.createElement(framerMotion.AnimatePresence, null, canMoveRight && React__default.default.createElement(boemly.IconButton, {
+    key: "rightButton",
+    as: framerMotion.motion.button,
+    initial: {
+      opacity: 0
+    },
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    },
+    size: "lg",
+    variant: "outline",
+    onClick: function onClick() {
+      return setSliderIndex(sliderIndex + 1);
+    },
+    "aria-label": formatMessage({
+      id: 'sections.textCarousel.moveRight'
+    }),
+    icon: React__default.default.createElement(react.ArrowRight, {
+      size: 16
+    }),
+    pointerEvents: "auto",
+    boxShadow: "md"
+  })))))), React__default.default.createElement(React__default.default.Fragment, null, slice.button && React__default.default.createElement(boemly.Wrapper, null, React__default.default.createElement(boemly.Center, null, React__default.default.createElement(StrapiLinkButton, {
+    link: slice.button,
+    size: "xl",
+    mt: ['8', null, '14']
+  })))));
+};
+
+var TextWithTextCards = function TextWithTextCards(_ref) {
+  var slice = _ref.slice;
+  var _useRouter = router.useRouter(),
+    push = _useRouter.push;
+  var _useToken = boemly.useToken('colors', ['white']),
+    white = _useToken[0];
+  var _useMediaQuery = boemly.useMediaQuery(BREAKPOINT_LG_QUERY),
+    belowBreakpoint = _useMediaQuery[0];
+  return React__default.default.createElement(boemly.DefaultSectionContainer, {
+    backgroundColor: white,
+    title: slice.title
+  }, React__default.default.createElement(React__default.default.Fragment, null, slice.shape && React__default.default.createElement(boemly.Box, {
+    position: "absolute",
+    right: ['-28', null, null, '-136'],
+    top: ['96', null, null, '-28'],
+    width: ['sm', null, null, '4xl'],
+    height: ['sm', null, null, '4xl'],
+    borderBottomRightRadius: "full"
+  }, React__default.default.createElement(Image__default.default, {
+    src: strapiMediaUrl(slice.shape.img, 'medium'),
+    alt: slice.shape.alt,
+    fill: true,
+    style: {
+      objectFit: slice.shape.objectFit || 'cover',
+      borderBottomRightRadius: 'var(--boemly-radii-full)'
+    }
+  }))), React__default.default.createElement(boemly.Wrapper, null, React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(boemly.Grid, {
+    templateColumns: ['repeat(8, 1fr)', null, null, null, 'repeat(16, 1fr)'],
+    templateRows: ['repeat(2, auto)', null, null, null, 'repeat(1, auto)'],
+    rowGap: "12"
+  }, React__default.default.createElement(boemly.GridItem, {
+    colSpan: [8, null, null, null, 9],
+    rowSpan: 1,
+    pr: ['0', null, null, null, '32']
+  }, React__default.default.createElement(boemly.DefaultSectionHeader, {
+    tagline: slice.tagline,
+    title: slice.title,
+    text: slice.text,
+    textProps: {
+      pr: ['0', null, null, null, '10']
+    }
+  }), slice.contact && !belowBreakpoint && React__default.default.createElement(boemly.ContactArea, {
+    title: slice.contact.title,
+    text: slice.contact.text,
+    avatar: {
+      name: slice.contact.avatar.name,
+      description: slice.contact.avatar.description,
+      image: React__default.default.createElement(Image__default.default, {
+        src: strapiMediaUrl(slice.contact.avatar.image.img, 'small'),
+        alt: slice.contact.avatar.image.alt,
+        fill: true,
+        style: {
+          objectFit: slice.contact.avatar.image.objectFit || 'cover'
+        }
+      })
+    },
+    link: {
+      text: slice.contact.button.text,
+      onClick: function onClick() {
+        var _slice$contact;
+        return push(strapiLinkUrl((_slice$contact = slice.contact) == null ? void 0 : _slice$contact.button));
+      }
+    }
+  })), React__default.default.createElement(boemly.GridItem, {
+    colSpan: [8, null, null, null, 7],
+    rowSpan: 1,
+    position: "relative"
+  }, slice.cards.map(function (card) {
+    return React__default.default.createElement(boemly.TextCardWithIcon, {
+      key: card.id,
+      title: card.title,
+      text: card.text,
+      icon: React__default.default.createElement(Image__default.default, {
+        src: strapiMediaUrl(card.icon.img, 'small'),
+        alt: card.icon.alt,
+        fill: true,
+        style: {
+          objectFit: card.icon.objectFit || 'contain'
+        }
+      })
+    });
+  }))), slice.contact && belowBreakpoint && React__default.default.createElement(boemly.ContactArea, {
+    title: slice.contact.title,
+    text: slice.contact.text,
+    avatar: {
+      name: slice.contact.avatar.name,
+      description: slice.contact.avatar.description,
+      image: React__default.default.createElement(Image__default.default, {
+        src: strapiMediaUrl(slice.contact.avatar.image.img, 'small'),
+        alt: slice.contact.avatar.image.alt,
+        fill: true,
+        style: {
+          objectFit: slice.contact.avatar.image.objectFit || 'cover'
+        }
+      })
+    },
+    link: {
+      text: slice.contact.button.text,
+      onClick: function onClick() {
+        var _slice$contact2;
+        return push(strapiLinkUrl((_slice$contact2 = slice.contact) == null ? void 0 : _slice$contact2.button));
+      }
+    }
+  }))));
+};
+
+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;
@@ -3382,7 +3474,8 @@ var Cta = function Cta(_ref) {
   var _useContext = React.useContext(IntlContext),
     formatMessage = _useContext.formatMessage;
   return React__default.default.createElement(boemly.DefaultSectionContainer, {
-    backgroundColor: VARIANTS$3[slice.variant].backgroundColor.left
+    backgroundColor: VARIANTS$3[slice.variant].backgroundColor.left,
+    title: slice.title
   }, React__default.default.createElement(boemly.Wrapper, null, slice.title ? React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(boemly.Flex, {
     alignItems: "center",
     flexDirection: "column"