@treely/strapi-slices 5.0.0 → 5.1.1

package/dist/components/CustomerCard/CustomerCard.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { StrapiCustomerStory } from '../..';
+export interface CustomerCardProps {
+    customerStory: StrapiCustomerStory;
+}
+export declare const CustomerCard: ({ customerStory, }: CustomerCardProps) => JSX.Element;

package/dist/components/CustomerCard/index.d.ts

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

package/dist/{slices/CustomerStories → components/CustomerCard}/messages.de.d.ts

@@ -1,4 +1,4 @@
 declare const messagesDe: {
-    'sections.customerStories.more': string;
+    'sections.customerCard.more': string;
 };
 export default messagesDe;

package/dist/{slices/CustomerStories → components/CustomerCard}/messages.en.d.ts

@@ -1,4 +1,4 @@
 declare const messagesEn: {
-    'sections.customerStories.more': string;
+    'sections.customerCard.more': string;
 };
 export default messagesEn;

package/dist/components/CustomerQuoteCard/CustomerQuoteCard.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { StrapiCustomerStory } from '../..';
+export interface CustomerQuoteCardProps {
+    customerStory: StrapiCustomerStory;
+}
+export declare const CustomerQuoteCard: ({ customerStory, }: CustomerQuoteCardProps) => JSX.Element;

package/dist/components/CustomerQuoteCard/index.d.ts

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

package/dist/components/CustomerQuoteCard/messages.de.d.ts

@@ -0,0 +1,4 @@
+declare const messagesDe: {
+    'sections.customerQuoteCard.more': string;
+};
+export default messagesDe;

package/dist/components/CustomerQuoteCard/messages.en.d.ts

@@ -0,0 +1,4 @@
+declare const messagesEn: {
+    'sections.customerQuoteCard.more': string;
+};
+export default messagesEn;

package/dist/models/strapi/StrapiCustomerStory.d.ts

@@ -7,9 +7,11 @@ interface StrapiCustomerStory {
     title: string;
     slug: string;
     img: StrapiImage;
-    customerName: string;
-    customerIndustry: string;
-    customerLogo: StrapiImage;
+    customerName?: string;
+    customerCardCustomerIndustry?: string;
+    quoteCardCustomerTitle?: string;
+    cardImage?: StrapiImage;
+    quoteCardQuote?: string;
     locale: Locale;
     createdAt: string;
     updatedAt: string;
@@ -17,5 +19,6 @@ interface StrapiCustomerStory {
     slices: any[];
     localizations: StrapiLocalization[];
     topBanner?: StrapiTopBanner;
+    variant?: 'customerCard' | 'quoteCard';
 }
 export default StrapiCustomerStory;

package/dist/rootMessages.de.d.ts

@@ -21,7 +21,8 @@ declare const rootMessagesDe: {
     'sections.glossary.copyButtonLabel': string;
     'sections.glossary.copySuccessMessage': string;
     'sections.glossary.copyFailureMessage': string;
-    'sections.customerStories.more': string;
+    'sections.customerQuoteCard.more': string;
+    'sections.customerCard.more': string;
     'sections.cta.backgroundShapes': string;
     'sections.cta.backgroundShapesLight': string;
     'sections.comparison.backgroundShapes': string;

package/dist/rootMessages.en.d.ts

@@ -21,7 +21,8 @@ declare const rootMessagesEn: {
     'sections.glossary.copyButtonLabel': string;
     'sections.glossary.copySuccessMessage': string;
     'sections.glossary.copyFailureMessage': string;
-    'sections.customerStories.more': string;
+    'sections.customerQuoteCard.more': string;
+    'sections.customerCard.more': string;
     'sections.cta.backgroundShapesDark': string;
     'sections.cta.backgroundShapesLight': string;
     'sections.comparison.backgroundShapes': string;

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

@@ -2175,62 +2175,51 @@ var FORMAT_AS_PERCENT_CONFIG = {
   maximumFractionDigits: 2
 };
 
-var messagesDe$c = {
+var messagesDe$d = {
   'sections.comparison.backgroundShapes': 'Hintergrundformen'
 };
 
+var messagesDe$c = {
+  '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 = {
   'sections.cta.backgroundShapes': 'Dunkle Hintergrundformen',
   'sections.cta.backgroundShapesLight': 'Helle Hintergrundformen'
 };
 
 var messagesDe$a = {
-  'sections.customerStories.more': 'Weiterlesen'
+  'sections.customerCard.more': 'Weiterlesen'
 };
 
 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'
+  'sections.customerQuoteCard.more': 'Weiterlesen'
 };
 
 var messagesDe$8 = {
-  'sections.projectFacts.projectInfo.value': 'Projekt Infos',
-  'projects.projectFacts.properties.area': 'Fläche'
+  '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 = {
-  'sections.projectsMap.link.text': 'Mehr Infos'
+  'features.portfolio.documentsDownloadList.projectDocuments': 'Projektdokumente',
+  'features.portfolio.documentsDownloadList.downloadDocument': 'Dokument herunterladen'
 };
 
 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',
-  'sections.shopCheckout.contributionValue.unit.EUR': '€',
-  'sections.shopCheckout.contributionValue.unit.CHF': 'CHF',
-  'sections.shopCheckout.contributionValue.validation.empty': 'Bitte geben sie einen Betrag ein',
-  'sections.shopCheckout.contributionValue.validation.tooLow.EUR': 'Der Betrag muss mindestens 10 Euro sein',
-  'sections.shopCheckout.contributionValue.validation.tooLow.CHF': 'Der Betrag muss mindestens 10 CHF sein',
-  'sections.shopCheckout.contributionValue.validation.tooHigh': 'Für größere Einkäufe kontaktieren Sie bitte unser Verkaufsteam über office@tree.ly',
-  'sections.shopCheckout.summary.kg': 'Menge',
-  'sections.shopCheckout.summary.price': 'Preis',
-  'sections.shopCheckout.submit': 'Kaufen'
+  'sections.projectFacts.projectInfo.value': 'Projekt Infos',
+  'projects.projectFacts.properties.area': 'Fläche'
 };
 
 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'
+  'sections.projectsMap.link.text': 'Mehr Infos'
 };
 
 var messagesDe$4 = {
-  'features.portfolio.documentsDownloadList.projectDocuments': 'Projektdokumente',
-  'features.portfolio.documentsDownloadList.downloadDocument': 'Dokument herunterladen'
-};
-
-var messagesDe$3 = {
   'features.projectInfo.projectInfo.value': 'Projekt Infos',
   'features.projectInfo.properties.area': 'Projekt Fläche',
   'features.projectInfo.properties.location': 'Standort',
@@ -2245,6 +2234,13 @@ var messagesDe$3 = {
   'features.projectInfo.properties.year': '{years} {years, plural, one {Jahr} other {Jahre} }'
 };
 
+var messagesDe$3 = {
+  '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 = {
   'portfolio.smallCheckout.contributionValueCurrency.label.CHF': 'Geben Sie den Beitrag in Fr. ein',
   'portfolio.smallCheckout.contributionValueCurrency.label.EUR': 'Geben Sie den Beitrag in € ein',
@@ -2262,10 +2258,18 @@ var messagesDe$2 = {
 };
 
 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'
+  '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',
+  'sections.shopCheckout.contributionValue.unit.EUR': '€',
+  'sections.shopCheckout.contributionValue.unit.CHF': 'CHF',
+  'sections.shopCheckout.contributionValue.validation.empty': 'Bitte geben sie einen Betrag ein',
+  'sections.shopCheckout.contributionValue.validation.tooLow.EUR': 'Der Betrag muss mindestens 10 Euro sein',
+  'sections.shopCheckout.contributionValue.validation.tooLow.CHF': 'Der Betrag muss mindestens 10 CHF sein',
+  'sections.shopCheckout.contributionValue.validation.tooHigh': 'Für größere Einkäufe kontaktieren Sie bitte unser Verkaufsteam über office@tree.ly',
+  'sections.shopCheckout.summary.kg': 'Menge',
+  'sections.shopCheckout.summary.price': 'Preis',
+  'sections.shopCheckout.submit': 'Kaufen'
 };
 
 var messagesDe = {
@@ -2278,64 +2282,53 @@ var unitMessagesDe = {
   'unit.formatter.tonsCo2PerYear': '{number} tCO₂/Jahr'
 };
 
-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, unitMessagesDe);
+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 messagesEn$c = {
+var messagesEn$d = {
   'sections.comparison.backgroundShapes': 'Background shapes'
 };
 
+var messagesEn$c = {
+  'components.creditsAvailableBadge.text.yes': 'Credits available',
+  'components.creditsAvailableBadge.text.some': 'Some remaining credits',
+  'components.creditsAvailableBadge.text.no': 'No remaining credits',
+  'components.creditsAvailableBadge.text.notYet': 'Credits available soon'
+};
+
 var messagesEn$b = {
   'sections.cta.backgroundShapesDark': 'Dark background shapes',
   'sections.cta.backgroundShapesLight': 'Light background shapes'
 };
 
 var messagesEn$a = {
-  'sections.customerStories.more': 'Read more'
+  'sections.customerCard.more': 'Read more'
 };
 
 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'
+  'sections.customerQuoteCard.more': 'Read more'
 };
 
 var messagesEn$8 = {
-  'sections.projectFacts.projectInfo.value': 'Project Infos',
-  'projects.projectFacts.properties.area': 'Area'
+  '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 = {
-  'sections.projectsMap.link.text': 'Show more info'
+  'features.portfolio.documentsDownloadList.projectDocuments': 'Project documents',
+  'features.portfolio.documentsDownloadList.downloadDocument': 'Download document'
 };
 
 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',
-  'sections.shopCheckout.contributionValue.unit.EUR': '€',
-  'sections.shopCheckout.contributionValue.unit.CHF': 'CHF',
-  'sections.shopCheckout.contributionValue.validation.empty': 'Please enter a value',
-  'sections.shopCheckout.contributionValue.validation.tooLow.EUR': 'Der Betrag muss mindestens 10 Euro sein',
-  'sections.shopCheckout.contributionValue.validation.tooLow.CHF': 'Der Betrag muss mindestens 10 CHF sein',
-  'sections.shopCheckout.contributionValue.validation.tooHigh': 'For bigger purchases please contact our sales team via office@tree.ly',
-  'sections.shopCheckout.summary.kg': 'Quantity',
-  'sections.shopCheckout.summary.price': 'Price',
-  'sections.shopCheckout.submit': 'Checkout'
+  'sections.projectFacts.projectInfo.value': 'Project Infos',
+  'projects.projectFacts.properties.area': 'Area'
 };
 
 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'
+  'sections.projectsMap.link.text': 'Show more info'
 };
 
 var messagesEn$4 = {
-  'features.portfolio.documentsDownloadList.projectDocuments': 'Project documents',
-  'features.portfolio.documentsDownloadList.downloadDocument': 'Download document'
-};
-
-var messagesEn$3 = {
   'features.projectInfo.projectInfo.value': 'Project Infos',
   'features.projectInfo.properties.area': 'Project Area',
   'features.projectInfo.properties.location': 'Location',
@@ -2350,6 +2343,13 @@ var messagesEn$3 = {
   'features.projectInfo.properties.year': '{years} {years, plural, one {year} other {years} }'
 };
 
+var messagesEn$3 = {
+  'components.portfolioProjectCard.text.yes': 'Credits available',
+  'components.portfolioProjectCard.text.some': 'Some remaining credits',
+  'components.portfolioProjectCard.text.no': 'No remaining credits',
+  'components.portfolioProjectCard.text.notYet': 'Credits available soon'
+};
+
 var messagesEn$2 = {
   'portfolio.smallCheckout.contributionValueCurrency.label.CHF': 'Contribution Amount in CHF',
   'portfolio.smallCheckout.contributionValueCurrency.label.EUR': 'Contribution Amount in €',
@@ -2367,10 +2367,18 @@ var messagesEn$2 = {
 };
 
 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'
+  'sections.shopCheckout.intro.price': 'Price',
+  'sections.shopCheckout.contributionValue.label.EUR': 'Enter contribution value in €',
+  'sections.shopCheckout.contributionValue.label.CHF': 'Enter contribution value in CHF',
+  'sections.shopCheckout.contributionValue.unit.EUR': '€',
+  'sections.shopCheckout.contributionValue.unit.CHF': 'CHF',
+  'sections.shopCheckout.contributionValue.validation.empty': 'Please enter a value',
+  'sections.shopCheckout.contributionValue.validation.tooLow.EUR': 'Der Betrag muss mindestens 10 Euro sein',
+  'sections.shopCheckout.contributionValue.validation.tooLow.CHF': 'Der Betrag muss mindestens 10 CHF sein',
+  'sections.shopCheckout.contributionValue.validation.tooHigh': 'For bigger purchases please contact our sales team via office@tree.ly',
+  'sections.shopCheckout.summary.kg': 'Quantity',
+  'sections.shopCheckout.summary.price': 'Price',
+  'sections.shopCheckout.submit': 'Checkout'
 };
 
 var messagesEn = {
@@ -2383,7 +2391,7 @@ var unitMessagesEn = {
   'unit.formatter.tonsCo2PerYear': '{number} tCO₂/year'
 };
 
-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 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 _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"])));
@@ -4492,15 +4500,106 @@ var ProjectFacts = function ProjectFacts(_ref) {
   })))));
 };
 
+var CustomerCard = function CustomerCard(_ref) {
+  var customerStory = _ref.customerStory;
+  var _useContext = React.useContext(IntlContext),
+    formatMessage = _useContext.formatMessage;
+  return React__default.default.createElement(boemly.Container, {
+    padding: "none",
+    height: "full"
+  }, React__default.default.createElement(boemly.Flex, {
+    flexDir: "column",
+    height: "full"
+  }, React__default.default.createElement(boemly.Center, {
+    height: "24",
+    backgroundColor: "primary.50",
+    borderTopRadius: "xl"
+  }, customerStory.cardImage && React__default.default.createElement(boemly.Box, {
+    position: "relative",
+    height: "12",
+    width: "12"
+  }, React__default.default.createElement(Image__default.default, {
+    src: strapiMediaUrl(customerStory.cardImage.img, 'medium'),
+    alt: customerStory.cardImage.alt,
+    fill: true,
+    style: {
+      objectFit: customerStory.cardImage.objectFit
+    }
+  }))), React__default.default.createElement(boemly.Box, {
+    px: "6",
+    pt: "8",
+    pb: "6",
+    mb: "auto"
+  }, customerStory.customerCardCustomerIndustry && React__default.default.createElement(boemly.Text, {
+    size: "xsMonoUppercase",
+    color: "gray.500",
+    mb: "2"
+  }, customerStory.customerCardCustomerIndustry), customerStory.title && React__default.default.createElement(boemly.Heading, {
+    size: "md",
+    fontWeight: "500"
+  }, customerStory.title)), React__default.default.createElement(boemly.Box, {
+    px: "6",
+    pt: "8",
+    pb: "6"
+  }, React__default.default.createElement(boemly.Link, {
+    href: "/customer-stories/" + customerStory.slug
+  }, React__default.default.createElement(boemly.Button, {
+    variant: "outline",
+    size: "sm"
+  }, formatMessage({
+    id: 'sections.customerCard.more'
+  }))))));
+};
+
+var CustomerQuoteCard = function CustomerQuoteCard(_ref) {
+  var customerStory = _ref.customerStory;
+  var _useContext = React.useContext(IntlContext),
+    formatMessage = _useContext.formatMessage;
+  return React__default.default.createElement(boemly.Container, {
+    p: "1",
+    backgroundColor: "primary.100",
+    height: "full"
+  }, customerStory.cardImage ? React__default.default.createElement(boemly.Box, {
+    position: "relative",
+    height: "12",
+    width: "12",
+    borderRadius: "full",
+    overflow: "hidden"
+  }, React__default.default.createElement(Image__default.default, {
+    src: strapiMediaUrl(customerStory.cardImage.img, 'medium'),
+    alt: customerStory.cardImage.alt,
+    fill: true,
+    style: {
+      objectFit: customerStory.cardImage.objectFit
+    }
+  })) : React__default.default.createElement(React__default.default.Fragment, null), React__default.default.createElement(boemly.Box, null, React__default.default.createElement(boemly.Box, {
+    my: "8"
+  }, React__default.default.createElement(boemly.Heading, {
+    size: "md",
+    fontWeight: "500"
+  }, customerStory.customerName), React__default.default.createElement(boemly.Text, {
+    size: "xs"
+  }, customerStory.quoteCardCustomerTitle)), React__default.default.createElement(boemly.Text, {
+    size: "xs",
+    color: "black"
+  }, customerStory.quoteCardQuote), React__default.default.createElement(boemly.Link, {
+    href: "/customer-stories/" + customerStory.slug
+  }, React__default.default.createElement(boemly.Button, {
+    variant: "outline",
+    size: "sm",
+    mt: "8"
+  }, formatMessage({
+    id: 'sections.customerQuoteCard.more'
+  })))));
+};
+
 var CustomerStories = function CustomerStories(_ref) {
   var slice = _ref.slice,
     customerStories = _ref.customerStories;
-  var _useContext = React.useContext(IntlContext),
-    formatMessage = _useContext.formatMessage;
   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],
-    spacingX: 56,
-    spacingY: 24
+    columns: [1, null, null, 2, 3],
+    spacingX: 6,
+    spacingY: 6
   }, slice.customer_stories.map(function (_ref2) {
     var attributes = _ref2.attributes;
     var customerStory = customerStories.find(function (cs) {
@@ -4509,43 +4608,13 @@ var CustomerStories = function CustomerStories(_ref) {
     if (!customerStory) {
       return null;
     }
-    return React__default.default.createElement(boemly.Container, {
-      padding: "none",
+    return React__default.default.createElement(boemly.Box, {
       key: customerStory.id
-    }, React__default.default.createElement(boemly.Center, {
-      height: "24",
-      backgroundColor: "primary.50",
-      borderTopRadius: "xl"
-    }, React__default.default.createElement(boemly.Box, {
-      position: "relative",
-      height: "12",
-      width: "12"
-    }, React__default.default.createElement(Image__default.default, {
-      src: strapiMediaUrl(customerStory.attributes.customerLogo.img, 'medium'),
-      alt: customerStory.attributes.customerLogo.alt,
-      fill: true,
-      style: {
-        objectFit: customerStory.attributes.customerLogo.objectFit
-      }
-    }))), React__default.default.createElement(boemly.Box, {
-      px: "6",
-      pt: "12",
-      pb: "6"
-    }, React__default.default.createElement(boemly.Text, {
-      size: "xsMonoUppercase",
-      color: "gray.500",
-      mb: "2"
-    }, customerStory.attributes.customerIndustry), React__default.default.createElement(boemly.Heading, {
-      size: "xl"
-    }, customerStory.attributes.title), React__default.default.createElement(boemly.Button, {
-      as: Link__default.default,
-      href: "/customer-stories/" + customerStory.attributes.slug,
-      variant: "outline",
-      size: "sm",
-      mt: "12"
-    }, formatMessage({
-      id: 'sections.customerStories.more'
-    }))));
+    }, attributes.variant === 'customerCard' && React__default.default.createElement(CustomerCard, {
+      customerStory: customerStory.attributes
+    }), attributes.variant === 'quoteCard' && React__default.default.createElement(CustomerQuoteCard, {
+      customerStory: customerStory.attributes
+    }));
   }))));
 };