@lightspeed/crane 1.1.1 → 1.1.3

package/template/reference/sections/about-us/showcases/2.ts

@@ -0,0 +1,160 @@
+export default {
+  showcaseId: '2',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'our_team_preview.jpg',
+      },
+    },
+  },
+  layoutId: 'Images_Without_Border_Radius',
+  blockName: '$label.showcase_2.blockName',
+  content: {
+    title: {
+      type: 'INPUTBOX',
+      text: '$label.showcase_2.section_title.text',
+    },
+    image: {
+      type: 'IMAGE',
+      imageData: {
+        set: {
+          LOW_RES: {
+            url: 'our_team.jpg',
+          },
+          MOBILE_WEBP_LOW_RES: {
+            url: 'our_team.jpg',
+          },
+          MOBILE_WEBP_HI_RES: {
+            url: 'our_team.jpg',
+          },
+          WEBP_LOW_RES: {
+            url: 'our_team.jpg',
+          },
+          WEBP_HI_2X_RES: {
+            url: 'our_team.jpg',
+          },
+        },
+        borderInfo: {},
+      },
+    },
+    stats: {
+      type: 'DECK',
+      cards: [
+        {
+          settings: {
+            stat_value: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_2.stat_value_1.label',
+              placeholder: '$label.showcase_2.stat_value_1.placeholder',
+              text: '$label.showcase_2.stat_value.default_1.text',
+              title: '$label.showcase_2.stat_value.default_1.text',
+            },
+            stat_caption: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_2.stat_caption_1.label',
+              placeholder: '$label.showcase_2.stat_caption_1.placeholder',
+              text: '$label.showcase_2.stat_caption_1.default.text',
+              title: '$label.showcase_2.stat_caption_1.default.text',
+            },
+          },
+        },
+        {
+          settings: {
+            stat_value: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_2.stat_value_2.label',
+              placeholder: '$label.showcase_2.stat_value_2.placeholder',
+              text: '$label.showcase_2.stat_value.default_2.text',
+            },
+            stat_caption: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_2.stat_caption_2.label',
+              placeholder: '$label.showcase_2.stat_caption_2.placeholder',
+              text: '$label.showcase_2.stat_caption_2.default.text',
+            },
+          },
+        },
+        {
+          settings: {
+            stat_value: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_2.stat_value_3.label',
+              placeholder: '$label.showcase_2.stat_value_3.placeholder',
+              text: '$label.showcase_2.stat_value.default_3.text',
+            },
+            stat_caption: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_2.stat_caption_3.label',
+              placeholder: '$label.showcase_2.stat_caption_3.placeholder',
+              text: '$label.showcase_2.stat_caption_3.default.text',
+            },
+          },
+        },
+        {
+          settings: {
+            stat_value: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_2.stat_value_4.label',
+              placeholder: '$label.showcase_2.stat_value_4.placeholder',
+              text: '$label.showcase_2.stat_value.default_4.text',
+            },
+            stat_caption: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_2.stat_caption_4.label',
+              placeholder: '$label.showcase_2.stat_caption_4.placeholder',
+              text: '$label.showcase_2.stat_caption_4.default.text',
+            },
+          },
+        },
+      ],
+    },
+    button: {
+      type: 'BUTTON',
+      title: '$label.showcase_2.button_content.title',
+    },
+  },
+  design: {
+    image: {
+      type: 'IMAGE',
+      overlay: 'GRADIENT',
+      color: ['#FFFFFF', '#000000'],
+    },
+    title: {
+      type: 'TEXT',
+      font: 'pt_mono',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#FFFFFF',
+    },
+    caption: {
+      type: 'TEXT',
+      font: 'inter',
+      size: 16,
+      bold: true,
+      italic: false,
+      color: '#FFFFFF',
+    },
+    value: {
+      type: 'TEXT',
+      font: 'pt_mono',
+      size: 40,
+      bold: true,
+      italic: false,
+      color: '#878787',
+    },
+    background: {
+      type: 'BACKGROUND',
+      style: 'COLOR',
+      color: '#101010',
+    },
+    button: {
+      type: 'BUTTON',
+      font: 'inter',
+      appearance: 'OUTLINE',
+      size: 'LARGE',
+      style: 'rectangle',
+      color: '#FFFFFF',
+    },
+  },
+} as const;

package/template/reference/sections/about-us/showcases/translations.ts

@@ -0,0 +1,259 @@
+export default {
+  en: {
+    '$label.showcase_1.blockName': 'Reference Section – About us',
+
+    '$label.showcase_1.section_title.text': 'Our company in numbers',
+
+    '$label.showcase_1.stat_value_1.label': 'Value',
+    '$label.showcase_1.stat_value_1.placeholder': 'Value',
+    '$label.showcase_1.stat_value.default_1.text': '120',
+
+    '$label.showcase_1.stat_caption_1.label': 'Caption',
+    '$label.showcase_1.stat_caption_1.placeholder': 'Caption',
+    '$label.showcase_1.stat_caption_1.default.text': 'People',
+
+    '$label.showcase_1.stat_value_2.label': 'Value',
+    '$label.showcase_1.stat_value_2.placeholder': 'Value',
+    '$label.showcase_1.stat_value.default_2.text': '1500',
+
+    '$label.showcase_1.stat_caption_2.label': 'Caption',
+    '$label.showcase_1.stat_caption_2.placeholder': 'Caption',
+    '$label.showcase_1.stat_caption_2.default.text': 'Customers per month',
+
+    '$label.showcase_1.stat_value_3.label': 'Value',
+    '$label.showcase_1.stat_value_3.placeholder': 'Value',
+    '$label.showcase_1.stat_value.default_3.text': '1500000',
+
+    '$label.showcase_1.stat_caption_3.label': 'Caption',
+    '$label.showcase_1.stat_caption_3.placeholder': 'Caption',
+    '$label.showcase_1.stat_caption_3.default.text': 'Unique customers so far',
+
+    '$label.showcase_1.stat_value_4.label': 'Value',
+    '$label.showcase_1.stat_value_4.placeholder': 'Value',
+    '$label.showcase_1.stat_value.default_4.text': '3.3',
+
+    '$label.showcase_1.stat_caption_4.label': 'Caption',
+    '$label.showcase_1.stat_caption_4.placeholder': 'Caption',
+    '$label.showcase_1.stat_caption_4.default.text': 'Items per order in average',
+
+    '$label.showcase_1.stat_value_5.label': 'Value',
+    '$label.showcase_1.stat_value_5.placeholder': 'Value',
+    '$label.showcase_1.stat_value.default_5.text': '15',
+
+    '$label.showcase_1.stat_caption_5.label': 'Caption',
+    '$label.showcase_1.stat_caption_5.placeholder': 'Caption',
+    '$label.showcase_1.stat_caption_5.default.text': 'Warehouses',
+
+    '$label.showcase_1.button_content.title': 'Learn more',
+
+    '$label.showcase_2.blockName': 'Our team',
+
+    '$label.showcase_2.section_title.text': 'Our team',
+
+    '$label.showcase_2.stat_value_1.label': 'Value',
+    '$label.showcase_2.stat_value_1.placeholder': 'Value',
+    '$label.showcase_2.stat_value.default_1.text': '45',
+
+    '$label.showcase_2.stat_caption_1.label': 'Caption',
+    '$label.showcase_2.stat_caption_1.placeholder': 'Caption',
+    '$label.showcase_2.stat_caption_1.default.text': 'People',
+
+    '$label.showcase_2.stat_value_2.label': 'Value',
+    '$label.showcase_2.stat_value_2.placeholder': 'Value',
+    '$label.showcase_2.stat_value.default_2.text': '15',
+
+    '$label.showcase_2.stat_caption_2.label': 'Caption',
+    '$label.showcase_2.stat_caption_2.placeholder': 'Caption',
+    '$label.showcase_2.stat_caption_2.default.text': 'Nationalities',
+
+    '$label.showcase_2.stat_value_3.label': 'Value',
+    '$label.showcase_2.stat_value_3.placeholder': 'Value',
+    '$label.showcase_2.stat_value.default_3.text': '0',
+
+    '$label.showcase_2.stat_caption_3.label': 'Caption',
+    '$label.showcase_2.stat_caption_3.placeholder': 'Caption',
+    '$label.showcase_2.stat_caption_3.default.text': 'Managers',
+
+    '$label.showcase_2.stat_value_4.label': 'Value',
+    '$label.showcase_2.stat_value_4.placeholder': 'Value',
+    '$label.showcase_2.stat_value.default_4.text': '75',
+
+    '$label.showcase_2.stat_caption_4.label': 'Caption',
+    '$label.showcase_2.stat_caption_4.placeholder': 'Caption',
+    '$label.showcase_2.stat_caption_4.default.text': 'Bikes team members have',
+
+    '$label.showcase_2.button_content.title': 'Learn more',
+  },
+
+  nl: {
+    '$label.showcase_1.blockName': 'Referentie Sectie – Over ons',
+
+    '$label.showcase_1.section_title.text': 'Ons bedrijf in cijfers',
+
+    '$label.showcase_1.stat_value_1.label': 'Waarde',
+    '$label.showcase_1.stat_value_1.placeholder': 'Waarde',
+    '$label.showcase_1.stat_value.default_1.text': '120',
+
+    '$label.showcase_1.stat_caption_1.label': 'Bijschrift',
+    '$label.showcase_1.stat_caption_1.placeholder': 'Bijschrift',
+    '$label.showcase_1.stat_caption_1.default.text': 'Mensen',
+
+    '$label.showcase_1.stat_value_2.label': 'Waarde',
+    '$label.showcase_1.stat_value_2.placeholder': 'Waarde',
+    '$label.showcase_1.stat_value.default_2.text': '1500',
+
+    '$label.showcase_1.stat_caption_2.label': 'Bijschrift',
+    '$label.showcase_1.stat_caption_2.placeholder': 'Bijschrift',
+    '$label.showcase_1.stat_caption_2.default.text': 'Klanten per maand',
+
+    '$label.showcase_1.stat_value_3.label': 'Waarde',
+    '$label.showcase_1.stat_value_3.placeholder': 'Waarde',
+    '$label.showcase_1.stat_value.default_3.text': '1500000',
+
+    '$label.showcase_1.stat_caption_3.label': 'Bijschrift',
+    '$label.showcase_1.stat_caption_3.placeholder': 'Bijschrift',
+    '$label.showcase_1.stat_caption_3.default.text': 'Unieke klanten tot nu toe',
+
+    '$label.showcase_1.stat_value_4.label': 'Waarde',
+    '$label.showcase_1.stat_value_4.placeholder': 'Waarde',
+    '$label.showcase_1.stat_value.default_4.text': '3.3',
+
+    '$label.showcase_1.stat_caption_4.label': 'Bijschrift',
+    '$label.showcase_1.stat_caption_4.placeholder': 'Bijschrift',
+    '$label.showcase_1.stat_caption_4.default.text': 'Artikelen per bestelling gemiddeld',
+
+    '$label.showcase_1.stat_value_5.label': 'Waarde',
+    '$label.showcase_1.stat_value_5.placeholder': 'Waarde',
+    '$label.showcase_1.stat_value.default_5.text': '15',
+
+    '$label.showcase_1.stat_caption_5.label': 'Bijschrift',
+    '$label.showcase_1.stat_caption_5.placeholder': 'Bijschrift',
+    '$label.showcase_1.stat_caption_5.default.text': 'Magazijnen',
+
+    '$label.showcase_1.button_content.title': 'Meer informatie',
+
+    '$label.showcase_2.blockName': 'Referentie Sectie – Ons team',
+
+    '$label.showcase_2.section_title.text': 'Ons team',
+
+    '$label.showcase_2.stat_value_1.label': 'Waarde',
+    '$label.showcase_2.stat_value_1.placeholder': 'Waarde',
+    '$label.showcase_2.stat_value.default_1.text': '45',
+
+    '$label.showcase_2.stat_caption_1.label': 'Bijschrift',
+    '$label.showcase_2.stat_caption_1.placeholder': 'Bijschrift',
+    '$label.showcase_2.stat_caption_1.default.text': 'Mensen',
+
+    '$label.showcase_2.stat_value_2.label': 'Waarde',
+    '$label.showcase_2.stat_value_2.placeholder': 'Waarde',
+    '$label.showcase_2.stat_value.default_2.text': '15',
+
+    '$label.showcase_2.stat_caption_2.label': 'Bijschrift',
+    '$label.showcase_2.stat_caption_2.placeholder': 'Bijschrift',
+    '$label.showcase_2.stat_caption_2.default.text': 'Nationaliteiten',
+
+    '$label.showcase_2.stat_value_3.label': 'Waarde',
+    '$label.showcase_2.stat_value_3.placeholder': 'Waarde',
+    '$label.showcase_2.stat_value.default_3.text': '0',
+
+    '$label.showcase_2.stat_caption_3.label': 'Bijschrift',
+    '$label.showcase_2.stat_caption_3.placeholder': 'Bijschrift',
+    '$label.showcase_2.stat_caption_3.default.text': 'Managers',
+
+    '$label.showcase_2.stat_value_4.label': 'Waarde',
+    '$label.showcase_2.stat_value_4.placeholder': 'Waarde',
+    '$label.showcase_2.stat_value.default_4.text': '75',
+
+    '$label.showcase_2.stat_caption_4.label': 'Bijschrift',
+    '$label.showcase_2.stat_caption_4.placeholder': 'Bijschrift',
+    '$label.showcase_2.stat_caption_4.default.text': 'Fietsen die teamleden hebben',
+
+    '$label.showcase_2.button_content.title': 'Meer informatie',
+  },
+
+  fr: {
+    '$label.showcase_1.blockName': 'Section de référence – À propos de nous',
+
+    '$label.showcase_1.section_title.text': 'Notre entreprise en chiffres',
+
+    '$label.showcase_1.stat_value_1.label': 'Valeur',
+    '$label.showcase_1.stat_value_1.placeholder': 'Valeur',
+    '$label.showcase_1.stat_value.default_1.text': '120',
+
+    '$label.showcase_1.stat_caption_1.label': 'Légende',
+    '$label.showcase_1.stat_caption_1.placeholder': 'Légende',
+    '$label.showcase_1.stat_caption_1.default.text': 'Personnes',
+
+    '$label.showcase_1.stat_value_2.label': 'Valeur',
+    '$label.showcase_1.stat_value_2.placeholder': 'Valeur',
+    '$label.showcase_1.stat_value.default_2.text': '1500',
+
+    '$label.showcase_1.stat_caption_2.label': 'Légende',
+    '$label.showcase_1.stat_caption_2.placeholder': 'Légende',
+    '$label.showcase_1.stat_caption_2.default.text': 'Clients par mois',
+
+    '$label.showcase_1.stat_value_3.label': 'Valeur',
+    '$label.showcase_1.stat_value_3.placeholder': 'Valeur',
+    '$label.showcase_1.stat_value.default_3.text': '1500000',
+
+    '$label.showcase_1.stat_caption_3.label': 'Légende',
+    '$label.showcase_1.stat_caption_3.placeholder': 'Légende',
+    '$label.showcase_1.stat_caption_3.default.text': 'Clients uniques jusqu\'à présent',
+
+    '$label.showcase_1.stat_value_4.label': 'Valeur',
+    '$label.showcase_1.stat_value_4.placeholder': 'Valeur',
+    '$label.showcase_1.stat_value.default_4.text': '3.3',
+
+    '$label.showcase_1.stat_caption_4.label': 'Légende',
+    '$label.showcase_1.stat_caption_4.placeholder': 'Légende',
+    '$label.showcase_1.stat_caption_4.default.text': 'Articles par commande en moyenne',
+
+    '$label.showcase_1.stat_value_5.label': 'Valeur',
+    '$label.showcase_1.stat_value_5.placeholder': 'Valeur',
+    '$label.showcase_1.stat_value.default_5.text': '15',
+
+    '$label.showcase_1.stat_caption_5.label': 'Légende',
+    '$label.showcase_1.stat_caption_5.placeholder': 'Légende',
+    '$label.showcase_1.stat_caption_5.default.text': 'Entrepôts',
+
+    '$label.showcase_1.button_content.title': 'En savoir plus',
+
+    '$label.showcase_2.blockName': 'Section de référence – Notre équipe',
+
+    '$label.showcase_2.section_title.text': 'Notre équipe',
+
+    '$label.showcase_2.stat_value_1.label': 'Valeur',
+    '$label.showcase_2.stat_value_1.placeholder': 'Valeur',
+    '$label.showcase_2.stat_value.default_1.text': '45',
+
+    '$label.showcase_2.stat_caption_1.label': 'Légende',
+    '$label.showcase_2.stat_caption_1.placeholder': 'Légende',
+    '$label.showcase_2.stat_caption_1.default.text': 'Personnes',
+
+    '$label.showcase_2.stat_value_2.label': 'Valeur',
+    '$label.showcase_2.stat_value_2.placeholder': 'Valeur',
+    '$label.showcase_2.stat_value.default_2.text': '15',
+
+    '$label.showcase_2.stat_caption_2.label': 'Légende',
+    '$label.showcase_2.stat_caption_2.placeholder': 'Légende',
+    '$label.showcase_2.stat_caption_2.default.text': 'Nationalités',
+
+    '$label.showcase_2.stat_value_3.label': 'Valeur',
+    '$label.showcase_2.stat_value_3.placeholder': 'Valeur',
+    '$label.showcase_2.stat_value.default_3.text': '0',
+
+    '$label.showcase_2.stat_caption_3.label': 'Légende',
+    '$label.showcase_2.stat_caption_3.placeholder': 'Légende',
+    '$label.showcase_2.stat_caption_3.default.text': 'Managers',
+
+    '$label.showcase_2.stat_value_4.label': 'Valeur',
+    '$label.showcase_2.stat_value_4.placeholder': 'Valeur',
+    '$label.showcase_2.stat_value.default_4.text': '75',
+
+    '$label.showcase_2.stat_caption_4.label': 'Légende',
+    '$label.showcase_2.stat_caption_4.placeholder': 'Légende',
+    '$label.showcase_2.stat_caption_4.default.text': 'Vélos que les membres de l\'équipe possèdent',
+
+    '$label.showcase_2.button_content.title': 'En savoir plus',
+  },
+} as const;

package/template/reference/sections/about-us/type.ts

@@ -0,0 +1,5 @@
+import type ContentSettings from './settings/content.ts';
+import type DesignSettings from './settings/design.ts';
+
+export type Content = InferContentType<typeof ContentSettings>;
+export type Design = InferDesignType<typeof DesignSettings>;

package/template/reference/sections/about-us/util/visibility-provider.ts

@@ -0,0 +1,27 @@
+import {
+  useButtonElementContent, useButtonElementDesign,
+  useImageElementContent,
+  useImageElementDesign,
+  useInputboxElementContent,
+  useTextElementDesign,
+} from '@lightspeed/crane';
+import { computed } from 'vue';
+
+import type { Content, Design } from '../type.ts';
+
+export const useVisibilityProvider = () => {
+  const titleContent = useInputboxElementContent<Content>('title');
+  const titleDesign = useTextElementDesign<Design>('title');
+  const imageContent = useImageElementContent<Content>('image');
+  const imageDesign = useImageElementDesign<Design>('image');
+  const buttonContent = useButtonElementContent<Content>('button');
+  const buttonDesign = useButtonElementDesign<Design>('button');
+
+  return {
+    isTitleVisible: computed(() => titleDesign.visible && titleContent.hasContent),
+    isImageVisible: computed(() => imageDesign.visible && imageContent.hasContent),
+    isButtonVisible: computed(() => buttonDesign.visible && buttonContent.hasTitle),
+  };
+};
+
+export default {};

package/template/reference/sections/intro-slider/IntroSlider.vue

@@ -0,0 +1,77 @@
+<template>
+  <section class="intro-slider-section" :style="backgroundStyle">
+    <Tagline
+      v-if="taglineDesign.visible"
+      :design="taglineDesign"
+    >
+      {{ taglineContent.value }}
+    </Tagline>
+
+    <Title />
+
+    <Button
+      v-if="buttonDesign.visible"
+      class="intro-slider-section__button"
+      :design="buttonDesign"
+      :content="buttonContent"
+    />
+    <Slider />
+  </section>
+</template>
+
+<script setup lang="ts">
+import {
+  useBackgroundElementDesign,
+  useInputboxElementContent,
+  useTextElementDesign,
+  useButtonElementContent,
+  useButtonElementDesign,
+  ButtonContent,
+} from '@lightspeed/crane';
+import { computed } from 'vue';
+import { Content, Design } from './type.ts';
+import Slider from './component/Slider.vue';
+import Title from './component/Title.vue';
+import Tagline from '../../shared/components/Tagline.vue';
+import Button from '../../shared/components/Button.vue';
+
+const backgroundDesign = useBackgroundElementDesign<Design>('background');
+const background = computed(() => ({
+  type: backgroundDesign.background?.type,
+  solidColor: backgroundDesign.background?.solid?.color as Color,
+  fromColor: backgroundDesign.background?.gradient?.fromColor as Color,
+  toColor: backgroundDesign.background?.gradient?.toColor as Color,
+}));
+
+const backgroundStyle = computed(() => {
+  if (background.value.type === 'gradient') {
+    return { 'background-image': `linear-gradient(to right, ${background.value.fromColor.hex}, ${background.value.toColor.hex})` };
+  }
+
+  return { 'background-color': background.value.solidColor.hex };
+});
+
+const taglineContent = useInputboxElementContent<Content>('section_tagline');
+const taglineDesign = useTextElementDesign<Design>('section_tagline') as TextDesignData;
+
+const buttonContent = useButtonElementContent<Content>('section_button') as ButtonContent;
+const buttonDesign = useButtonElementDesign<Design>('section_button') as ButtonDesignData;
+</script>
+
+<style scoped lang="scss">
+.intro-slider-section {
+  min-height: 810px;
+  width: 100%;
+  padding: 110px 0 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+
+  &__button {
+    margin: auto;
+    width: fit-content;
+    max-width: 360px;
+  }
+}
+</style>

package/template/reference/sections/intro-slider/client.ts

@@ -0,0 +1,5 @@
+import { createVueClientApp } from '@lightspeed/crane';
+import ExampleSection from './IntroSlider.vue';
+import { Content, Design } from './type.ts';
+
+export default createVueClientApp<Content, Design>(ExampleSection);