@treely/strapi-slices 5.2.0 → 5.2.2

package/dist/strapi-slices.esm.js

@@ -3,7 +3,7 @@ import Head from 'next/head';
 import { Box, BoemlyModal, Flex, IconButton, useMediaQuery, DefaultSectionContainer, Wrapper, DefaultSectionHeader, Button, Gradient, Spacer, SimpleGrid, Heading, Text, useToken, Grid, GridItem, BoemlyList, PortfolioCard, RichText, BoemlyAccordion, HeroCard, Shape, QuoteCard, Center, ShapesCard, TextCardWithIcon, ContactArea, ProjectCard, Tag, Link as Link$1, DatePersonPair, BoemlyThemeProvider, Badge, useDisclosure, Container, AvatarWithName, Divider, LabelNumberPair, BoemlyFormControl, InputRightAddon, LabelTextPair } from 'boemly';
 import Image from 'next/image';
 import { useLockBodyScroll, useKey, useWindowScroll, useWindowSize, useMeasure, useCopyToClipboard } from 'react-use';
-import { CaretLeft, CaretRight, Globe, ArrowRight, MapPin, ArrowLeft, Check, Link as Link$2, FilePdf, DownloadSimple, X } from '@phosphor-icons/react';
+import { CaretLeft, CaretRight, Globe, ArrowRight, ArrowLeft, MapPin, Check, Link as Link$2, FilePdf, DownloadSimple, X } from '@phosphor-icons/react';
 import Link from 'next/link';
 import { useDetectAdBlock } from 'adblock-detect-react';
 import { useRouter } from 'next/router';
@@ -1009,9 +1009,9 @@ var IconGrid = function IconGrid(_ref) {
   })), React.createElement(Spacer, {
     h: "20"
   })) : React.createElement(React.Fragment, null), React.createElement(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.createElement(Box, {
       key: iconWithTextAndButton.id
@@ -1964,249 +1964,64 @@ var TextCardGrid = function TextCardGrid(_ref) {
 };
 
 var _templateObject$5, _templateObject2$2, _templateObject3$1;
-var CarouselContainer = /*#__PURE__*/styled(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(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(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(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(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(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 = useToken('colors', ['primary.50']),
-    primary50 = _useToken[0];
-  var containerRef = useRef(null);
-  return React.createElement(DefaultSectionContainer, {
-    backgroundColor: primary50,
-    title: slice.title
-  }, React.createElement(Wrapper, null, React.createElement(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.createElement(CarouselContainer, {
-    ref: containerRef
-  }, React.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.createElement(CardContainer, {
-      key: id,
-      numberofitems: slice.slides.length
-    }, React.createElement(TextCardWithIcon, {
-      title: title,
-      text: text,
-      icon: React.createElement(Image, {
-        src: strapiMediaUrl(icon.img, 'small'),
-        alt: icon.alt,
-        fill: true,
-        style: {
-          objectFit: icon.objectFit || 'contain'
-        }
-      }),
-      displayAs: "column"
-    }));
-  }))), React.createElement(React.Fragment, null, slice.button && React.createElement(Wrapper, null, React.createElement(Center, null, React.createElement(StrapiLinkButton, {
-    link: slice.button,
-    size: "xl",
-    mt: ['8', null, '14']
-  })))));
-};
-
-var TextWithTextCards = function TextWithTextCards(_ref) {
-  var slice = _ref.slice;
-  var _useRouter = useRouter(),
-    push = _useRouter.push;
-  var _useToken = useToken('colors', ['white']),
-    white = _useToken[0];
-  var _useMediaQuery = useMediaQuery(BREAKPOINT_LG_QUERY),
-    belowBreakpoint = _useMediaQuery[0];
-  return React.createElement(DefaultSectionContainer, {
-    backgroundColor: white,
-    title: slice.title
-  }, React.createElement(React.Fragment, null, slice.shape && React.createElement(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.createElement(Image, {
-    src: strapiMediaUrl(slice.shape.img, 'medium'),
-    alt: slice.shape.alt,
-    fill: true,
-    style: {
-      objectFit: slice.shape.objectFit || 'cover',
-      borderBottomRightRadius: 'var(--boemly-radii-full)'
-    }
-  }))), React.createElement(Wrapper, null, React.createElement(React.Fragment, null, React.createElement(Grid, {
-    templateColumns: ['repeat(8, 1fr)', null, null, null, 'repeat(16, 1fr)'],
-    templateRows: ['repeat(2, auto)', null, null, null, 'repeat(1, auto)'],
-    rowGap: "12"
-  }, React.createElement(GridItem, {
-    colSpan: [8, null, null, null, 9],
-    rowSpan: 1,
-    pr: ['0', null, null, null, '32']
-  }, React.createElement(DefaultSectionHeader, {
-    tagline: slice.tagline,
-    title: slice.title,
-    text: slice.text,
-    textProps: {
-      pr: ['0', null, null, null, '10']
-    }
-  }), slice.contact && !belowBreakpoint && React.createElement(ContactArea, {
-    title: slice.contact.title,
-    text: slice.contact.text,
-    avatar: {
-      name: slice.contact.avatar.name,
-      description: slice.contact.avatar.description,
-      image: React.createElement(Image, {
-        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.createElement(GridItem, {
-    colSpan: [8, null, null, null, 7],
-    rowSpan: 1,
-    position: "relative"
-  }, slice.cards.map(function (card) {
-    return React.createElement(TextCardWithIcon, {
-      key: card.id,
-      title: card.title,
-      text: card.text,
-      icon: React.createElement(Image, {
-        src: strapiMediaUrl(card.icon.img, 'small'),
-        alt: card.icon.alt,
-        fill: true,
-        style: {
-          objectFit: card.icon.objectFit || 'contain'
-        }
-      })
-    });
-  }))), slice.contact && belowBreakpoint && React.createElement(ContactArea, {
-    title: slice.contact.title,
-    text: slice.contact.text,
-    avatar: {
-      name: slice.contact.avatar.name,
-      description: slice.contact.avatar.description,
-      image: React.createElement(Image, {
-        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',
@@ -2221,14 +2036,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': '€',
@@ -2244,7 +2059,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',
@@ -2259,7 +2074,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'
 };
@@ -2269,7 +2089,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'
@@ -2368,6 +2188,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'
@@ -2378,7 +2203,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__*/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"])));
@@ -2406,6 +2231,273 @@ var ContextProvider = function ContextProvider(_ref) {
   }, children));
 };
 
+var TextCarousel = function TextCarousel(_ref) {
+  var slice = _ref.slice;
+  var _useToken = useToken('colors', ['primary.50']),
+    primary50 = _useToken[0];
+  var _useMeasure = useMeasure(),
+    slideRef = _useMeasure[0],
+    slideWidth = _useMeasure[1].width;
+  var _useContext = useContext(IntlContext),
+    formatMessage = _useContext.formatMessage;
+  var containerRef = useRef(null);
+  var _useWindowSize = useWindowSize(),
+    windowWidth = _useWindowSize.width;
+  var _useState = 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.createElement(DefaultSectionContainer, {
+    backgroundColor: primary50,
+    title: slice.title
+  }, React.createElement(Wrapper, null, React.createElement(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.createElement(CarouselContainer, {
+    ref: containerRef
+  }, React.createElement(Box, {
+    position: "relative",
+    width: "full"
+  }, React.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.createElement(CardContainer, {
+      key: id,
+      ref: slideRef,
+      numberofitems: slice.slides.length
+    }, React.createElement(TextCardWithIcon, {
+      title: title,
+      text: text,
+      icon: React.createElement(Image, {
+        src: strapiMediaUrl(icon.img, 'small'),
+        alt: icon.alt,
+        fill: true,
+        style: {
+          objectFit: icon.objectFit || 'contain'
+        }
+      }),
+      displayAs: "column"
+    }));
+  })), React.createElement(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.createElement(Box, null, React.createElement(AnimatePresence, null, canMoveLeft && React.createElement(IconButton, {
+    key: "leftButton",
+    as: 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.createElement(ArrowLeft, {
+      size: 16
+    }),
+    pointerEvents: "auto",
+    boxShadow: "sm"
+  }))), React.createElement(Box, null, React.createElement(AnimatePresence, null, canMoveRight && React.createElement(IconButton, {
+    key: "rightButton",
+    as: 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.createElement(ArrowRight, {
+      size: 16
+    }),
+    pointerEvents: "auto",
+    boxShadow: "md"
+  })))))), React.createElement(React.Fragment, null, slice.button && React.createElement(Wrapper, null, React.createElement(Center, null, React.createElement(StrapiLinkButton, {
+    link: slice.button,
+    size: "xl",
+    mt: ['8', null, '14']
+  })))));
+};
+
+var TextWithTextCards = function TextWithTextCards(_ref) {
+  var slice = _ref.slice;
+  var _useRouter = useRouter(),
+    push = _useRouter.push;
+  var _useToken = useToken('colors', ['white']),
+    white = _useToken[0];
+  var _useMediaQuery = useMediaQuery(BREAKPOINT_LG_QUERY),
+    belowBreakpoint = _useMediaQuery[0];
+  return React.createElement(DefaultSectionContainer, {
+    backgroundColor: white,
+    title: slice.title
+  }, React.createElement(React.Fragment, null, slice.shape && React.createElement(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.createElement(Image, {
+    src: strapiMediaUrl(slice.shape.img, 'medium'),
+    alt: slice.shape.alt,
+    fill: true,
+    style: {
+      objectFit: slice.shape.objectFit || 'cover',
+      borderBottomRightRadius: 'var(--boemly-radii-full)'
+    }
+  }))), React.createElement(Wrapper, null, React.createElement(React.Fragment, null, React.createElement(Grid, {
+    templateColumns: ['repeat(8, 1fr)', null, null, null, 'repeat(16, 1fr)'],
+    templateRows: ['repeat(2, auto)', null, null, null, 'repeat(1, auto)'],
+    rowGap: "12"
+  }, React.createElement(GridItem, {
+    colSpan: [8, null, null, null, 9],
+    rowSpan: 1,
+    pr: ['0', null, null, null, '32']
+  }, React.createElement(DefaultSectionHeader, {
+    tagline: slice.tagline,
+    title: slice.title,
+    text: slice.text,
+    textProps: {
+      pr: ['0', null, null, null, '10']
+    }
+  }), slice.contact && !belowBreakpoint && React.createElement(ContactArea, {
+    title: slice.contact.title,
+    text: slice.contact.text,
+    avatar: {
+      name: slice.contact.avatar.name,
+      description: slice.contact.avatar.description,
+      image: React.createElement(Image, {
+        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.createElement(GridItem, {
+    colSpan: [8, null, null, null, 7],
+    rowSpan: 1,
+    position: "relative"
+  }, slice.cards.map(function (card) {
+    return React.createElement(TextCardWithIcon, {
+      key: card.id,
+      title: card.title,
+      text: card.text,
+      icon: React.createElement(Image, {
+        src: strapiMediaUrl(card.icon.img, 'small'),
+        alt: card.icon.alt,
+        fill: true,
+        style: {
+          objectFit: card.icon.objectFit || 'contain'
+        }
+      })
+    });
+  }))), slice.contact && belowBreakpoint && React.createElement(ContactArea, {
+    title: slice.contact.title,
+    text: slice.contact.text,
+    avatar: {
+      name: slice.contact.avatar.name,
+      description: slice.contact.avatar.description,
+      image: React.createElement(Image, {
+        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;
@@ -3369,7 +3461,8 @@ var Cta = function Cta(_ref) {
   var _useContext = useContext(IntlContext),
     formatMessage = _useContext.formatMessage;
   return React.createElement(DefaultSectionContainer, {
-    backgroundColor: VARIANTS$3[slice.variant].backgroundColor.left
+    backgroundColor: VARIANTS$3[slice.variant].backgroundColor.left,
+    title: slice.title
   }, React.createElement(Wrapper, null, slice.title ? React.createElement(React.Fragment, null, React.createElement(Flex, {
     alignItems: "center",
     flexDirection: "column"