@treely/strapi-slices 3.3.0 → 4.1.0

package/README.md

@@ -62,7 +62,7 @@ Find the build in the `dist` folder.
 Install the package:
 
 ```bash
-npm install @tree-ly/strapi-slices
+npm install @treely/strapi-slices
 ```
 
 Use the slices:
@@ -73,7 +73,7 @@ import {
   SliceRenderer,
   StrapiBlogPost,
   StrapiCustomerStory,
-} from '@tree-ly/strapi-slices';
+} from '@treely/strapi-slices';
 
 // Get the slices, blog posts, and customer stories from Strapi
 // Get the projects from the FPM API

package/dist/constants/slicesConfig.d.ts

@@ -0,0 +1,5 @@
+export declare const EXTENDABLE_HEADER_SECTIONS: string[];
+export declare const DARK_THEME_HEADER_SECTIONS: string[];
+export declare const SLICES_WITH_BLOG_POSTS: string[];
+export declare const SLICES_WITH_CUSTOMER_STORIES: string[];
+export declare const SLICES_WITH_PROJECTS: string[];

package/dist/index.d.ts

@@ -49,8 +49,7 @@ import mergeGlobalAndStrapiPageData from './utils/mergeGlobalAndStrapiPageData';
 import mergeGlobalAndStrapiProjectData from './utils/mergeGlobalAndStrapiProjectData';
 import strapiLinkUrl from './utils/strapiLinkUrl';
 import strapiMediaUrl from './utils/strapiMediaUrl';
-import { SECTIONS_WITH_BLOG_POSTS, SECTIONS_WITH_CUSTOMER_STORIES, SECTIONS_WITH_PROJECTS } from './constants/sectionsConfig';
 export * from './components/SEOTags';
 export * from './components/SliceRenderer';
-export { mergeGlobalAndStrapiBlogPostData, mergeGlobalAndStrapiCustomerStoryData, mergeGlobalAndStrapiPageData, mergeGlobalAndStrapiProjectData, strapiLinkUrl, strapiMediaUrl, SECTIONS_WITH_BLOG_POSTS, SECTIONS_WITH_CUSTOMER_STORIES, SECTIONS_WITH_PROJECTS, };
+export { mergeGlobalAndStrapiBlogPostData, mergeGlobalAndStrapiCustomerStoryData, mergeGlobalAndStrapiPageData, mergeGlobalAndStrapiProjectData, strapiLinkUrl, strapiMediaUrl, };
 export type { IStrapi, IStrapiData, IStrapiResponse, StrapiAuthor, StrapiAvatarWithName, StrapiBanner, StrapiBlogPost, StrapiBlogPostProps, StrapiButtonWithVariant, StrapiCategory, StrapiContactArea, StrapiCustomerStory, StrapiCustomerStoryProps, StrapiDefaultHeader, StrapiGlobal, StrapiGlossaryItem, StrapiHeroCard, StrapiImage, StrapiImageFormat, StrapiImageWithLink, StrapiLink, StrapiLinkList, StrapiLinkPage, StrapiLinkWithIcon, StrapiLocalization, StrapiMedia, StrapiMetadata, StrapiNavMenu, StrapiPage, StrapiPageProps, StrapiPortfolio, StrapiPortfolioCard, StrapiProject, StrapiProjectProps, StrapiProjectCard, StrapiQuoteCard, StrapiShapesCard, StrapiTextCardWithIcons, StrapiTopBanner, HeaderType, Image, Locale, PageMetadata, PageProps, PortfolioProject, };

package/dist/rootMessages.de.d.ts

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

package/dist/rootMessages.en.d.ts

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

package/dist/slices/Timeline/Timeline.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import StrapiImage from '../../models/strapi/StrapiImage';
+import StrapiLink from '../../models/strapi/StrapiLink';
+export interface TimelineProps {
+    slice: {
+        title: string;
+        text?: string;
+        tagline?: string;
+        timelineItems: TimelineItem[];
+    };
+}
+export interface TimelineItem {
+    id: number;
+    tagline?: string;
+    title: string;
+    text?: string;
+    badge?: {
+        text: string;
+        variant: 'orange' | 'green' | 'red' | 'gray';
+    };
+    logo?: StrapiImage;
+    icon?: StrapiImage;
+    image?: StrapiImage;
+    button?: StrapiLink;
+    backgroundShapes?: boolean;
+}
+export declare const Timeline: React.FC<TimelineProps>;

package/dist/slices/Timeline/index.d.ts

@@ -0,0 +1,2 @@
+import { Timeline } from './Timeline';
+export default Timeline;

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

@@ -0,0 +1,5 @@
+declare const messagesDe: {
+    'sections.timeline.backgroundShapes': string;
+    'sections.timeline.showMoreButton': string;
+};
+export default messagesDe;

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

@@ -0,0 +1,5 @@
+declare const messagesEn: {
+    'sections.timeline.backgroundShapes': string;
+    'sections.timeline.showMoreButton': string;
+};
+export default messagesEn;

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

@@ -414,14 +414,20 @@ var strapiMediaUrl = function strapiMediaUrl(media, preferredSize) {
 var DEFAULT_SHARE_IMAGE = 'https://cdn.tree.ly/assets/v3/app/share-image-generic.webp';
 var DEFAULT_SHARE_ALT = 'Share Image';
 
+var EXTENDABLE_HEADER_SECTIONS = ['sections.hero', 'sections.map-hero', 'sections.full-width-image', 'sections.small-hero', 'sections.small-hero-light'];
+var DARK_THEME_HEADER_SECTIONS = ['sections.hero', 'sections.small-hero'];
+var SLICES_WITH_BLOG_POSTS = ['sections.blog', 'sections.blog-cards'];
+var SLICES_WITH_CUSTOMER_STORIES = ['sections.customer-stories'];
+var SLICES_WITH_PROJECTS = ['sections.projects-grid', 'sections.projects-map', 'sections.project-facts', 'sections.text-with-card'];
+
 var mergeGlobalAndStrapiBlogPostData = function mergeGlobalAndStrapiBlogPostData(context, global, post, blog, projects) {
   var _post$attributes$meta, _post$attributes$meta2, _post$attributes$meta3, _global$attributes$me, _post$attributes, _post$attributes$meta4, _post$attributes$meta5, _post$attributes$meta6, _post$attributes$meta7, _ref, _post$attributes$meta8, _post$attributes$meta9, _global$attributes$me2;
   var metaShareImageUrl = (_post$attributes$meta = post.attributes.metadata) != null && _post$attributes$meta.shareImage ? strapiMediaUrl((_post$attributes$meta2 = (_post$attributes$meta3 = post.attributes.metadata) == null ? void 0 : _post$attributes$meta3.shareImage.media) != null ? _post$attributes$meta2 : (_global$attributes$me = global.attributes.metadata.shareImage) == null ? void 0 : _global$attributes$me.media, 'large') : DEFAULT_SHARE_IMAGE;
   var returnBlog = post.attributes.slices.some(function (slice) {
-    return SECTIONS_WITH_BLOG_POSTS.includes(slice.__component);
+    return SLICES_WITH_BLOG_POSTS.includes(slice.__component);
   });
   var returnProjects = post.attributes.slices.some(function (slice) {
-    return SECTIONS_WITH_PROJECTS.includes(slice.__component);
+    return SLICES_WITH_PROJECTS.includes(slice.__component);
   });
   return _extends({}, post, {
     // Portfolio Projects
@@ -460,7 +466,7 @@ var mergeGlobalAndStrapiCustomerStoryData = function mergeGlobalAndStrapiCustome
   var _customerStory$attrib, _customerStory$attrib2, _customerStory$attrib3, _global$attributes$me, _customerStory$attrib4, _customerStory$attrib5, _customerStory$attrib6, _customerStory$attrib7, _customerStory$attrib8, _ref, _customerStory$attrib9, _customerStory$attrib10, _global$attributes$me2;
   var metaShareImageUrl = (_customerStory$attrib = customerStory.attributes.metadata) != null && _customerStory$attrib.shareImage ? strapiMediaUrl((_customerStory$attrib2 = (_customerStory$attrib3 = customerStory.attributes.metadata) == null ? void 0 : _customerStory$attrib3.shareImage.media) != null ? _customerStory$attrib2 : (_global$attributes$me = global.attributes.metadata.shareImage) == null ? void 0 : _global$attributes$me.media, 'large') : DEFAULT_SHARE_IMAGE;
   var returnCustomerStories = customerStory.attributes.slices.some(function (slice) {
-    return SECTIONS_WITH_CUSTOMER_STORIES.includes(slice.__component);
+    return SLICES_WITH_CUSTOMER_STORIES.includes(slice.__component);
   });
   return _extends({}, customerStory, {
     // Portfolio Projects
@@ -494,23 +500,17 @@ var mergeGlobalAndStrapiCustomerStoryData = function mergeGlobalAndStrapiCustome
   });
 };
 
-var EXTENDABLE_HEADER_SECTIONS = ['sections.hero', 'sections.map-hero', 'sections.full-width-image', 'sections.small-hero', 'sections.small-hero-light'];
-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', '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;
   var metaShareImageUrl = (_page$attributes$meta = page.attributes.metadata) != null && _page$attributes$meta.shareImage ? strapiMediaUrl((_page$attributes$meta2 = (_page$attributes$meta3 = page.attributes.metadata) == null ? void 0 : _page$attributes$meta3.shareImage.media) != null ? _page$attributes$meta2 : (_global$attributes$me = global.attributes.metadata.shareImage) == null ? void 0 : _global$attributes$me.media, 'large') : DEFAULT_SHARE_IMAGE;
   var returnBlogPosts = page.attributes.slices.some(function (slice) {
-    return SECTIONS_WITH_BLOG_POSTS.includes(slice.__component);
+    return SLICES_WITH_BLOG_POSTS.includes(slice.__component);
   });
   var returnCustomerStories = page.attributes.slices.some(function (slice) {
-    return SECTIONS_WITH_CUSTOMER_STORIES.includes(slice.__component);
+    return SLICES_WITH_CUSTOMER_STORIES.includes(slice.__component);
   });
   var returnProjects = page.attributes.slices.some(function (slice) {
-    return SECTIONS_WITH_PROJECTS.includes(slice.__component);
+    return SLICES_WITH_PROJECTS.includes(slice.__component);
   });
   return _extends({}, page, {
     // Portfolio Projects
@@ -549,10 +549,10 @@ var mergeGlobalAndStrapiProject = function mergeGlobalAndStrapiProject(context,
   var _project$attributes$m, _project$attributes$m2, _project$attributes$m3, _global$attributes$me, _project$attributes, _project$attributes$s, _project$attributes$s2, _project$attributes$m4, _project$attributes$m5, _project$attributes$m6, _project$attributes$m7, _ref, _project$attributes$m8, _project$attributes$m9, _global$attributes$me2;
   var metaShareImageUrl = (_project$attributes$m = project.attributes.metadata) != null && _project$attributes$m.shareImage ? strapiMediaUrl((_project$attributes$m2 = (_project$attributes$m3 = project.attributes.metadata) == null ? void 0 : _project$attributes$m3.shareImage.media) != null ? _project$attributes$m2 : (_global$attributes$me = global.attributes.metadata.shareImage) == null ? void 0 : _global$attributes$me.media, 'large') : DEFAULT_SHARE_IMAGE;
   var returnBlogPosts = project.attributes.slices.some(function (slice) {
-    return SECTIONS_WITH_BLOG_POSTS.includes(slice.__component);
+    return SLICES_WITH_BLOG_POSTS.includes(slice.__component);
   });
   var returnProjects = project.attributes.slices.some(function (slice) {
-    return SECTIONS_WITH_PROJECTS.includes(slice.__component);
+    return SLICES_WITH_PROJECTS.includes(slice.__component);
   });
   return _extends({}, project, {
     // Portfolio Projects
@@ -2171,35 +2171,35 @@ var FORMAT_AS_PERCENT_CONFIG = {
   maximumFractionDigits: 2
 };
 
-var messagesDe$b = {
+var messagesDe$c = {
   'sections.comparison.backgroundShapes': 'Hintergrundformen'
 };
 
-var messagesDe$a = {
+var messagesDe$b = {
   'sections.cta.backgroundShapes': 'Dunkle Hintergrundformen',
   'sections.cta.backgroundShapesLight': 'Helle Hintergrundformen'
 };
 
-var messagesDe$9 = {
+var messagesDe$a = {
   'sections.customerStories.more': 'Weiterlesen'
 };
 
-var messagesDe$8 = {
+var messagesDe$9 = {
   '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$8 = {
   'sections.projectFacts.projectInfo.value': 'Projekt Infos',
   'projects.projectFacts.properties.area': 'Fläche'
 };
 
-var messagesDe$6 = {
+var messagesDe$7 = {
   'sections.projectsMap.link.text': 'Mehr Infos'
 };
 
-var messagesDe$5 = {
+var messagesDe$6 = {
   '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',
@@ -2214,19 +2214,19 @@ var messagesDe$5 = {
   'sections.shopCheckout.submit': 'Kaufen'
 };
 
-var messagesDe$4 = {
+var messagesDe$5 = {
   '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$3 = {
+var messagesDe$4 = {
   'features.portfolio.documentsDownloadList.projectDocuments': 'Projektdokumente',
   'features.portfolio.documentsDownloadList.downloadDocument': 'Dokument herunterladen'
 };
 
-var messagesDe$2 = {
+var messagesDe$3 = {
   'features.projectInfo.projectInfo.value': 'Projekt Infos',
   'features.projectInfo.properties.area': 'Projekt Fläche',
   'features.projectInfo.properties.location': 'Standort',
@@ -2241,7 +2241,7 @@ var messagesDe$2 = {
   'features.projectInfo.properties.year': '{years} {years, plural, one {Jahr} other {Jahre} }'
 };
 
-var messagesDe$1 = {
+var messagesDe$2 = {
   '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,49 +2257,54 @@ var messagesDe$1 = {
   'portfolio.smallCheckout.cta.button': 'Unser Vertriebsteam kontaktieren'
 };
 
-var messagesDe = {
+var messagesDe$1 = {
   '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 messagesDe = {
+  'sections.timeline.backgroundShapes': 'Hintergrundformen',
+  'sections.timeline.showMoreButton': 'Drei weitere Meilensteine anzeigen'
+};
+
 var unitMessagesEn = {
   'unit.formatter.tonsCo2': '{number} /tCO₂',
   'unit.formatter.tonsCo2PerYear': '{number} tCO₂/year'
 };
 
-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 rootMessagesDe = /*#__PURE__*/_extends({}, messagesDe$5, messagesDe$4, messagesDe$1, messagesDe$3, messagesDe$2, messagesDe$c, messagesDe$b, messagesDe$a, messagesDe$9, messagesDe$8, messagesDe$7, messagesDe$6, messagesDe, unitMessagesEn);
 
-var messagesEn$b = {
+var messagesEn$c = {
   'sections.comparison.backgroundShapes': 'Background shapes'
 };
 
-var messagesEn$a = {
+var messagesEn$b = {
   'sections.cta.backgroundShapesDark': 'Dark background shapes',
   'sections.cta.backgroundShapesLight': 'Light background shapes'
 };
 
-var messagesEn$9 = {
+var messagesEn$a = {
   'sections.customerStories.more': 'Read more'
 };
 
-var messagesEn$8 = {
+var messagesEn$9 = {
   '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$7 = {
+var messagesEn$8 = {
   'sections.projectFacts.projectInfo.value': 'Project Infos',
   'projects.projectFacts.properties.area': 'Area'
 };
 
-var messagesEn$6 = {
+var messagesEn$7 = {
   'sections.projectsMap.link.text': 'Show more info'
 };
 
-var messagesEn$5 = {
+var messagesEn$6 = {
   'sections.shopCheckout.intro.price': 'Price',
   'sections.shopCheckout.contributionValue.label.EUR': 'Enter contribution value in €',
   'sections.shopCheckout.contributionValue.label.CHF': 'Enter contribution value in CHF',
@@ -2314,19 +2319,19 @@ var messagesEn$5 = {
   'sections.shopCheckout.submit': 'Checkout'
 };
 
-var messagesEn$4 = {
+var messagesEn$5 = {
   '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$3 = {
+var messagesEn$4 = {
   'features.portfolio.documentsDownloadList.projectDocuments': 'Project documents',
   'features.portfolio.documentsDownloadList.downloadDocument': 'Download document'
 };
 
-var messagesEn$2 = {
+var messagesEn$3 = {
   'features.projectInfo.projectInfo.value': 'Project Infos',
   'features.projectInfo.properties.area': 'Project Area',
   'features.projectInfo.properties.location': 'Location',
@@ -2341,7 +2346,7 @@ var messagesEn$2 = {
   'features.projectInfo.properties.year': '{years} {years, plural, one {year} other {years} }'
 };
 
-var messagesEn$1 = {
+var messagesEn$2 = {
   'portfolio.smallCheckout.contributionValueCurrency.label.CHF': 'Contribution Amount in CHF',
   'portfolio.smallCheckout.contributionValueCurrency.label.EUR': 'Contribution Amount in €',
   'portfolio.smallCheckout.contributionValueCurrency.unit.EUR': '€',
@@ -2357,14 +2362,19 @@ var messagesEn$1 = {
   'portfolio.smallCheckout.cta.button': 'Contact our Sales Team'
 };
 
-var messagesEn = {
+var messagesEn$1 = {
   '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 messagesEn = {
+  'sections.timeline.backgroundShapes': 'Background shapes',
+  'sections.timeline.showMoreButton': 'Show three more milestones'
+};
+
+var rootMessagesEn = /*#__PURE__*/_extends({}, messagesEn$5, messagesEn$4, messagesEn$1, messagesEn$3, messagesEn$2, messagesEn$c, messagesEn$b, messagesEn$a, messagesEn$9, messagesEn$8, messagesEn$7, messagesEn$6, messagesEn, unitMessagesEn);
 
 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);
@@ -4720,6 +4730,209 @@ var Comparison = function Comparison(_ref) {
   }))));
 };
 
+var Timeline = function Timeline(_ref) {
+  var slice = _ref.slice;
+  var _useContext = React.useContext(reactIntl.IntlContext),
+    formatMessage = _useContext.formatMessage;
+  var _useState = React.useState(3),
+    visibleItems = _useState[0],
+    setVisibleItems = _useState[1];
+  var _useMediaQuery = boemly.useMediaQuery(BREAKPOINT_MD_QUERY),
+    mobile = _useMediaQuery[0];
+  var _useState2 = React.useState(false),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var showMoreItems = function showMoreItems() {
+    setVisibleItems(function (prevVisibleItems) {
+      return prevVisibleItems + 3;
+    });
+  };
+  return React__default.default.createElement(boemly.DefaultSectionContainer, null, React__default.default.createElement(boemly.Wrapper, null, React__default.default.createElement(boemly.Flex, {
+    flexDir: ['column', null, null, 'row']
+  }, React__default.default.createElement(boemly.Box, {
+    width: ['full', null, null, '50%'],
+    position: [null, null, null, 'sticky'],
+    top: ['16', null, null, '32'],
+    height: "full",
+    paddingRight: [null, null, null, '28']
+  }, React__default.default.createElement(boemly.DefaultSectionHeader, {
+    tagline: slice.tagline,
+    title: slice.title,
+    text: slice.text
+  }), mobile && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(boemly.Spacer, {
+    h: "10"
+  }), React__default.default.createElement(boemly.Flex, {
+    justifyContent: "center"
+  }, React__default.default.createElement(boemly.Box, {
+    borderRadius: "full",
+    width: "3",
+    height: "3",
+    margin: "1.5",
+    backgroundColor: "gray"
+  })), React__default.default.createElement(boemly.Box, {
+    overflow: "visible",
+    borderRight: "dashed 1px var(--boemly-colors-gray-200)",
+    transform: "translateX(-50%)",
+    position: "relative",
+    height: "20"
+  }))), React__default.default.createElement(boemly.Box, {
+    overflow: "visible",
+    maxWidth: ['full', null, null, '50%'],
+    borderLeft: [null, null, null, 'dashed 1px var(--boemly-colors-gray-200)'],
+    position: "relative"
+  }, React__default.default.createElement(boemly.Flex, {
+    flexDir: "column",
+    overflow: "visible",
+    gap: [null, null, null, '8']
+  }, slice.timelineItems.slice(0, visibleItems).map(function (item, index) {
+    return React__default.default.createElement(boemly.SimpleGrid, {
+      gap: ['none', null, null, '4'],
+      key: item.id,
+      columns: [1, null, null, 2],
+      alignContent: "center",
+      gridTemplateColumns: [null, null, null, '5% 85%'],
+      position: "relative"
+    }, React__default.default.createElement(boemly.Flex, {
+      alignItems: "center",
+      justifyContent: ['center', null, null, 'flex-start']
+    }, React__default.default.createElement(boemly.Box, {
+      position: "absolute",
+      transform: [null, null, null, 'translateX(-50%)'],
+      backgroundColor: "white"
+    }, item.icon ? React__default.default.createElement(boemly.Box, {
+      padding: "2"
+    }, React__default.default.createElement(Image__default.default, {
+      src: strapiMediaUrl(item.icon.img, 'xSmall'),
+      alt: item.icon.alt,
+      width: "21",
+      height: "21"
+    })) : React__default.default.createElement(boemly.Box, {
+      padding: "2"
+    }, React__default.default.createElement(boemly.Box, {
+      borderRadius: "full",
+      backgroundColor: "primary.800",
+      width: "2",
+      height: "2"
+    })), mobile && React__default.default.createElement(boemly.Box, {
+      overflow: "visible",
+      borderRight: "dashed 1px var(--boemly-colors-gray-200)",
+      transform: "translateX(-50%)",
+      position: "relative",
+      height: "10"
+    }))), React__default.default.createElement(boemly.Container, {
+      p: [null, null, null, '3'],
+      zIndex: "base",
+      position: "relative",
+      elevation: "none"
+    }, item.backgroundShapes ? React__default.default.createElement(boemly.Box, {
+      position: "absolute",
+      left: "0",
+      top: "0",
+      width: "full",
+      height: "full",
+      zIndex: "-1"
+    }, React__default.default.createElement(Image__default.default, {
+      src: CDN_URI + "/assets/v3/strapi-slices/timeline-shapes.svg",
+      alt: formatMessage({
+        id: 'sections.timeline.backgroundShapes'
+      }),
+      fill: true,
+      style: {
+        objectFit: 'cover',
+        borderRadius: 'var(--boemly-radii-xl)'
+      }
+    })) : React__default.default.createElement(React__default.default.Fragment, null), React__default.default.createElement(boemly.Flex, {
+      flexDir: "column"
+    }, React__default.default.createElement(boemly.Flex, {
+      alignItems: "flex-start",
+      justifyContent: "space-between"
+    }, React__default.default.createElement(boemly.Box, null, item.tagline && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(boemly.Text, {
+      color: "primary.800",
+      size: "smMonoUppercase"
+    }, item.tagline), React__default.default.createElement(boemly.Spacer, {
+      h: "2"
+    }))), React__default.default.createElement(boemly.Flex, null, item.badge && React__default.default.createElement(boemly.Tag, {
+      colorScheme: item.badge.variant,
+      borderRadius: "md"
+    }, item.badge.text), item.logo && React__default.default.createElement(boemly.Box, {
+      position: "relative",
+      height: "8",
+      width: "16"
+    }, React__default.default.createElement(Image__default.default, {
+      src: strapiMediaUrl(item.logo.img, 'small'),
+      alt: item.logo.alt,
+      fill: true,
+      style: {
+        objectFit: item.logo.objectFit
+      }
+    })))), React__default.default.createElement(boemly.Heading, {
+      size: "lg",
+      mt: ['6', null, null, '3'],
+      maxWidth: "xs"
+    }, item.title), item.text && React__default.default.createElement(boemly.Box, {
+      mt: "3"
+    }, React__default.default.createElement(boemly.RichText, {
+      content: item.text
+    })), item.button && React__default.default.createElement(boemly.Box, {
+      textAlign: "left"
+    }, React__default.default.createElement(boemly.Spacer, {
+      h: "4"
+    }), React__default.default.createElement(StrapiLinkButton, {
+      link: item.button,
+      size: "sm",
+      variant: "outline"
+    })), item.image ? React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(boemly.Box, {
+      position: "relative",
+      mt: "4",
+      height: ['2xs', null, null, null, '48'],
+      minWidth: [null, null, null, null, '50%']
+    }, React__default.default.createElement(Image__default.default, {
+      src: strapiMediaUrl(item.image.img, 'xLarge'),
+      alt: item.image.alt,
+      fill: true,
+      style: {
+        cursor: mobile ? 'unset' : 'pointer',
+        objectFit: item.image.objectFit || 'cover',
+        borderRadius: 'var(--boemly-radii-xl)'
+      },
+      onClick: function onClick() {
+        return !mobile && setIsOpen(true);
+      }
+    }), React__default.default.createElement(FullScreenImage, {
+      images: [item.image],
+      isOpen: isOpen,
+      onClose: function onClose() {
+        return setIsOpen(false);
+      }
+    }))) : React__default.default.createElement(React__default.default.Fragment, null))), mobile && index + 1 < slice.timelineItems.length && React__default.default.createElement(boemly.Box, {
+      overflow: "visible",
+      borderRight: "dashed 1px var(--boemly-colors-gray-200)",
+      transform: "translateX(-50%)",
+      position: "relative",
+      height: "20"
+    }));
+  })), visibleItems < slice.timelineItems.length && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(boemly.Box, {
+    width: "full",
+    height: ['36', null, null, '64'],
+    position: "absolute",
+    bottom: "0",
+    zIndex: "1",
+    background: "linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.98) 76.54%, #FFF 100%)"
+  }), React__default.default.createElement(boemly.Box, {
+    bottom: "0",
+    textAlign: "center",
+    zIndex: "overlay",
+    position: "relative"
+  }, React__default.default.createElement(boemly.Button, {
+    variant: "outline",
+    size: "sm",
+    onClick: showMoreItems,
+    m: [null, null, null, '8']
+  }, React__default.default.createElement(reactIntl.FormattedMessage, {
+    id: "sections.timeline.showMoreButton"
+  }))))))));
+};
+
 var SliceRenderer = function SliceRenderer(_ref) {
   var slices = _ref.slices,
     blogPosts = _ref.blogPosts,
@@ -4924,6 +5137,11 @@ var SliceRenderer = function SliceRenderer(_ref) {
           key: slice.__component + "-" + slice.id,
           slice: slice
         });
+      case 'sections.timeline':
+        return React__default.default.createElement(Timeline, {
+          key: slice.__component + "-" + slice.id,
+          slice: slice
+        });
       default:
         if (CustomSlice) {
           return React__default.default.createElement(CustomSlice, {
@@ -4939,9 +5157,6 @@ var SliceRenderer = function SliceRenderer(_ref) {
   }));
 };
 
-exports.SECTIONS_WITH_BLOG_POSTS = SECTIONS_WITH_BLOG_POSTS;
-exports.SECTIONS_WITH_CUSTOMER_STORIES = SECTIONS_WITH_CUSTOMER_STORIES;
-exports.SECTIONS_WITH_PROJECTS = SECTIONS_WITH_PROJECTS;
 exports.SEOTags = SEOTags;
 exports.SliceRenderer = SliceRenderer;
 exports.mergeGlobalAndStrapiBlogPostData = mergeGlobalAndStrapiBlogPostData;