@lightspeed/crane 1.1.1 → 1.1.3

package/template/reference/sections/about-us/component/Stats.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="stats">
+    <div
+      v-for="stat in stats"
+      :key="stat.value?.value"
+      class="stats__element"
+    >
+      <div
+        v-if="isValueVisible && stat.value?.value"
+        class="stats__number"
+      >
+        {{ stat.value?.value }}
+      </div>
+
+      <div
+        v-if="isCaptionVisible && stat.caption?.value"
+        class="stats__caption"
+      >
+        {{ stat.caption?.value }}
+      </div>
+    </div>
+
+    <Button
+      v-if="isButtonVisible"
+      class="stats__button"
+      :design="buttonDesign"
+      :content="buttonContent"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Card, InputBoxContent, ButtonContent } from '@lightspeed/crane';
+import {
+  useTextElementDesign,
+  EditorTypes,
+  useDeckElementContent,
+  useButtonElementContent,
+  useButtonElementDesign,
+} from '@lightspeed/crane';
+import { computed, CSSProperties } from 'vue';
+
+import type { Content, Design } from '../type.ts';
+import Button from '../../../shared/components/Button.vue';
+import { useVisibilityProvider } from '../util/visibility-provider.ts';
+
+const buttonContent = useButtonElementContent<Content>('button') as ButtonContent;
+const buttonDesign = useButtonElementDesign<Design>('button') as ButtonDesignData;
+
+const { isButtonVisible } = useVisibilityProvider();
+
+const statsDesk = useDeckElementContent<Content>('stats');
+const stats = computed(() => (
+  statsDesk?.cards?.map((card: Card) => ({
+    value: statsDesk.getReactiveRef(card, EditorTypes.INPUTBOX, 'stat_value') as unknown as InputBoxContent | undefined,
+    caption: statsDesk.getReactiveRef(card, EditorTypes.INPUTBOX, 'stat_caption') as unknown as InputBoxContent | undefined,
+  }))
+    .filter((stat) => {
+      const hasValue = stat.value !== undefined && stat.value.hasContent;
+      const hasCaption = stat.caption !== undefined && stat.caption.hasContent;
+      return hasValue || hasCaption;
+    })
+));
+
+const valueDesign = useTextElementDesign<Design>('value');
+const captionDesign = useTextElementDesign<Design>('caption');
+
+const isValueVisible = computed<boolean>(() => valueDesign.visible ?? false);
+const isCaptionVisible = computed<boolean>(() => captionDesign.visible ?? false);
+
+const valueStyle = computed<CSSProperties>(() => ({
+  fontSize: `${valueDesign.size}px`,
+  fontFamily: valueDesign.font,
+  color: (valueDesign.color as Color).hex,
+  fontStyle: valueDesign.italic ? 'italic' : 'normal',
+  fontWeight: valueDesign.bold ? 'bold' : 'normal',
+}));
+
+const captionStyle = computed<CSSProperties>(() => ({
+  fontSize: `${captionDesign.size}px`,
+  fontFamily: captionDesign.font,
+  color: (captionDesign.color as Color).hex,
+  fontStyle: captionDesign.italic ? 'italic' : 'normal',
+  fontWeight: captionDesign.bold ? 'bold' : 'normal',
+}));
+</script>
+
+<style scoped lang="scss">
+.stats {
+  --value-font-size: v-bind(valueStyle.fontSize);
+  --value-font-family: v-bind(valueStyle.fontFamily);
+  --value-color: v-bind(valueStyle.color);
+  --value-font-style: v-bind(valueStyle.fontStyle);
+  --value-font-weight: v-bind(valueStyle.fontWeight);
+  --value-font-modifier: 1;
+
+  --caption-font-size: v-bind(captionStyle.fontSize);
+  --caption-font-family: v-bind(captionStyle.fontFamily);
+  --caption-color: v-bind(captionStyle.color);
+  --caption-font-style: v-bind(captionStyle.fontStyle);
+  --caption-font-weight: v-bind(captionStyle.fontWeight);
+  --caption-font-modifier: 1;
+
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin: 20px 0;
+
+  &__element {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &__button {
+    align-self: start;
+    margin-top: 20px;
+    width: fit-content;
+    max-width: 360px;
+
+    @media screen and (max-width: 700px) {
+      align-self: center;
+    }
+  }
+
+  &__number {
+    --value-font-modifier: 0.8;
+
+    max-width: 100%;
+    margin-bottom: 8px;
+    overflow: hidden;
+    word-wrap: break-word;
+    font-size: var(--value-font-size);
+    font-family: calc(var(--value-font-family) * var(--value-font-modifier));
+    color: var(--value-color);
+    font-style: var(--value-font-style);
+    font-weight: var(--value-font-weight);
+
+    @media screen and (min-width: 700px) {
+      --value-font-modifier: 1;
+    }
+  }
+
+  &__caption {
+    max-width: 100%;
+    overflow: hidden;
+    word-wrap: break-word;
+    font-size: var(--caption-font-size);
+    font-family: calc(var(--caption-font-family) * var(--caption-font-modifier));
+    color: var(--caption-color);
+    font-style: var(--caption-font-style);
+    font-weight: var(--caption-font-weight);
+  }
+}
+</style>

package/template/reference/sections/about-us/component/Title.vue

@@ -0,0 +1,32 @@
+<template>
+  <h1
+    class="section-title"
+    :style="titleStyle"
+  >
+    {{ titleContent.value }}
+  </h1>
+</template>
+
+<script setup lang="ts">
+import { useInputboxElementContent, useTextElementDesign } from '@lightspeed/crane';
+import { computed, CSSProperties } from 'vue';
+
+import type { Content, Design } from '../type.ts';
+
+const titleContent = useInputboxElementContent<Content>('title');
+const titleDesign = useTextElementDesign<Design>('title');
+
+const titleStyle = computed<CSSProperties>(() => ({
+  'font-size': `${titleDesign.size}px`,
+  'font-family': titleDesign.font,
+  color: (titleDesign.color as Color).hex,
+  'font-style': titleDesign.italic ? 'italic' : 'normal',
+  'font-weight': titleDesign.bold ? 'bold' : 'normal',
+}));
+</script>
+
+<style lang="scss" scoped>
+.section-title {
+  margin-bottom: 20px;
+}
+</style>

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

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

package/template/reference/sections/about-us/settings/content.ts

@@ -0,0 +1,64 @@
+const content: ContentEditor = {
+  title: {
+    type: 'INPUTBOX',
+    label: '$label.section_title.label',
+    placeholder: '$label.section_title.placeholder',
+  },
+  stats: {
+    type: 'DECK',
+    label: '$label.stats.deck_title',
+    addButtonLabel: '$label.stats.add_card_button',
+    maxCards: 5,
+    cards: {
+      defaultCardContent: {
+        label: '$label.images.card_title',
+        settings: {
+          stat_value: {
+            type: 'INPUTBOX',
+            label: '$label.stat_value.label',
+            placeholder: '$label.stat_value.placeholder',
+            text: '$label.stat_value.default.text',
+            title: '$label.stat_value.default.text',
+          },
+          stat_caption: {
+            type: 'INPUTBOX',
+            label: '$label.stat_caption.label',
+            placeholder: '$label.stat_caption.placeholder',
+            text: '$label.stat_caption.default.text',
+            title: '$label.stat_caption.default.text',
+          },
+        },
+      },
+    },
+  },
+  button: {
+    type: 'BUTTON',
+    label: '$label.button_content.label',
+    title: '$label.button_content.title',
+  },
+  image: {
+    type: 'IMAGE',
+    label: '$label.image_content.label',
+    defaults: {
+      set: {
+        LOW_RES: {
+          url: 'section_picture.jpg',
+        },
+        MOBILE_WEBP_LOW_RES: {
+          url: 'section_picture.jpg',
+        },
+        MOBILE_WEBP_HI_RES: {
+          url: 'section_picture@2x.jpg',
+        },
+        WEBP_LOW_RES: {
+          url: 'section_picture@2x.jpg',
+        },
+        WEBP_HI_2X_RES: {
+          url: 'section_picture@2x.jpg',
+        },
+      },
+      borderInfo: {},
+    },
+  },
+};
+export default content;

package/template/reference/sections/about-us/settings/design.ts

@@ -0,0 +1,74 @@
+export default {
+  image: {
+    type: 'IMAGE',
+    label: '$label.image_content.label',
+    colors: ['#000000', '#FFFFFF', '#333333', '#6281C5', '#C8D9FF', '#878787', '#101010'],
+    defaults: {
+      overlay: 'GRADIENT',
+      color: ['#FFFFFF', '#000000'],
+    },
+  },
+  title: {
+    type: 'TEXT',
+    label: '$label.section_title.label',
+    colors: ['#000000', '#FFFFFF', '#333333', '#6281C5', '#C8D9FF', '#878787', '#101010'],
+    sizes: [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60],
+    defaults: {
+      font: 'noto_serif',
+      size: 44,
+      bold: true,
+      italic: false,
+      color: '#333333',
+      visible: true,
+    },
+  },
+  caption: {
+    type: 'TEXT',
+    label: '$label.caption.label',
+    colors: ['#000000', '#FFFFFF', '#333333', '#6281C5', '#C8D9FF', '#878787', '#101010'],
+    sizes: [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60],
+    defaults: {
+      font: 'inter',
+      size: 16,
+      bold: true,
+      italic: false,
+      color: '#000000',
+      visible: true,
+    },
+  },
+  value: {
+    type: 'TEXT',
+    label: '$label.value.label',
+    colors: ['#000000', '#FFFFFF', '#333333', '#6281C5', '#C8D9FF', '#878787', '#101010'],
+    sizes: [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60],
+    defaults: {
+      font: 'noto_serif',
+      size: 40,
+      bold: true,
+      italic: false,
+      color: '#6281C5',
+      visible: true,
+    },
+  },
+  background: {
+    type: 'BACKGROUND',
+    label: '$label.background.label',
+    colors: ['#000000', '#FFFFFF', '#333333', '#6281C5', '#C8D9FF', '#878787', '#101010'],
+    defaults: {
+      style: 'COLOR',
+      color: '#C8D9FF',
+    },
+  },
+  button: {
+    type: 'BUTTON',
+    label: '$label.button.label',
+    colors: ['#000000', '#FFFFFF', '#333333', '#6281C5', '#C8D9FF', '#878787', '#101010'],
+    defaults: {
+      appearance: 'SOLID',
+      size: 'MEDIUM',
+      style: 'pill',
+      color: '#000000',
+      visible: true,
+    },
+  },
+} as const;

package/template/reference/sections/about-us/settings/layout.ts

@@ -0,0 +1,12 @@
+export default [
+  {
+    layoutId: 'Images_With_Border_Radius',
+    selectedContentSettings: [],
+    selectedDesignSettings: [],
+  },
+  {
+    layoutId: 'Images_Without_Border_Radius',
+    selectedContentSettings: [],
+    selectedDesignSettings: [],
+  },
+] as const;

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

@@ -0,0 +1,151 @@
+export default {
+  en: {
+    '$label.section_title.label': 'Main title',
+    '$label.caption.label': 'Caption',
+    '$label.value.label': 'Value',
+    '$label.section_title.placeholder': 'This will be the main title for this section',
+    '$label.image_content.label': 'Image Content',
+    '$label.stats.deck_title': 'Highlights',
+    '$label.stats.add_card_button': 'Add Highlight',
+    '$label.images.card_title': 'Highlight',
+    '$label.images.card_title_1': 'People',
+    '$label.images.card_title_2': 'Customers per month',
+    '$label.images.card_title_3': 'Unique customers so far',
+    '$label.stat_value.label': 'Value',
+    '$label.stat_value.placeholder': 'Value Placeholder',
+    '$label.stat_value.default.text': 'Value',
+    '$label.stat_caption.label': 'Caption',
+    '$label.stat_caption.placeholder': 'Caption Placeholder',
+    '$label.stat_caption.default.text': 'Caption',
+    '$label.button_content.label': 'Button',
+    '$label.button_content.title': 'Learn More',
+    '$label.background.label': 'Background',
+    '$label.button.label': 'Button',
+  },
+
+  fr: {
+    '$label.showcase_1.blockName': 'Section d\'information sur l\'entreprise',
+    '$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': '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',
+  },
+
+  nl: {
+    '$label.showcase_1.blockName': 'Bedrijfsinformatie sectie',
+    '$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': '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',
+  },
+} as const;

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

@@ -0,0 +1,176 @@
+export default {
+  showcaseId: '1',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'our_company_in_numbers_preview.jpg',
+      },
+    },
+  },
+  layoutId: 'Images_With_Border_Radius',
+  blockName: '$label.showcase_1.blockName',
+  content: {
+    title: {
+      type: 'INPUTBOX',
+      text: '$label.showcase_1.section_title.text',
+    },
+    image: {
+      type: 'IMAGE',
+      imageData: {
+        set: {
+          LOW_RES: {
+            url: 'our_company_in_numbers.jpg',
+          },
+          MOBILE_WEBP_LOW_RES: {
+            url: 'our_company_in_numbers.jpg',
+          },
+          MOBILE_WEBP_HI_RES: {
+            url: 'our_company_in_numbers.jpg',
+          },
+          WEBP_LOW_RES: {
+            url: 'our_company_in_numbers.jpg',
+          },
+          WEBP_HI_2X_RES: {
+            url: 'our_company_in_numbers.jpg',
+          },
+        },
+        borderInfo: {},
+      },
+    },
+    stats: {
+      type: 'DECK',
+      cards: [
+        {
+          settings: {
+            stat_value: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_1.stat_value_1.label',
+              placeholder: '$label.showcase_1.stat_value_1.placeholder',
+              text: '$label.showcase_1.stat_value.default_1.text',
+              title: '$label.showcase_1.stat_value.default_1.text',
+            },
+            stat_caption: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_1.stat_caption_1.label',
+              placeholder: '$label.showcase_1.stat_caption_1.placeholder',
+              text: '$label.showcase_1.stat_caption_1.default.text',
+              title: '$label.showcase_1.stat_caption_1.default.text',
+            },
+          },
+        },
+        {
+          settings: {
+            stat_value: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_1.stat_value_2.label',
+              placeholder: '$label.showcase_1.stat_value_2.placeholder',
+              text: '$label.showcase_1.stat_value.default_2.text',
+            },
+            stat_caption: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_1.stat_caption_2.label',
+              placeholder: '$label.showcase_1.stat_caption_2.placeholder',
+              text: '$label.showcase_1.stat_caption_2.default.text',
+            },
+          },
+        },
+        {
+          settings: {
+            stat_value: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_1.stat_value_3.label',
+              placeholder: '$label.showcase_1.stat_value_3.placeholder',
+              text: '$label.showcase_1.stat_value.default_3.text',
+            },
+            stat_caption: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_1.stat_caption_3.label',
+              placeholder: '$label.showcase_1.stat_caption_3.placeholder',
+              text: '$label.showcase_1.stat_caption_3.default.text',
+            },
+          },
+        },
+        {
+          settings: {
+            stat_value: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_1.stat_value_4.label',
+              placeholder: '$label.showcase_1.stat_value_4.placeholder',
+              text: '$label.showcase_1.stat_value.default_4.text',
+            },
+            stat_caption: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_1.stat_caption_4.label',
+              placeholder: '$label.showcase_1.stat_caption_4.placeholder',
+              text: '$label.showcase_1.stat_caption_4.default.text',
+            },
+          },
+        },
+        {
+          settings: {
+            stat_value: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_1.stat_value_5.label',
+              placeholder: '$label.showcase_1.stat_value_5.placeholder',
+              text: '$label.showcase_1.stat_value.default_5.text',
+            },
+            stat_caption: {
+              type: 'INPUTBOX',
+              label: '$label.showcase_1.stat_caption_5.label',
+              placeholder: '$label.showcase_1.stat_caption_5.placeholder',
+              text: '$label.showcase_1.stat_caption_5.default.text',
+            },
+          },
+        },
+      ],
+    },
+    button: {
+      type: 'BUTTON',
+      title: '$label.showcase_1.button_content.title',
+    },
+  },
+  design: {
+    image: {
+      type: 'IMAGE',
+      overlay: 'GRADIENT',
+      color: ['#FFFFFF', '#000000'],
+    },
+    title: {
+      type: 'TEXT',
+      font: 'noto_serif',
+      size: 44,
+      bold: true,
+      italic: false,
+      color: '#333333',
+    },
+    caption: {
+      type: 'TEXT',
+      font: 'inter',
+      size: 16,
+      bold: true,
+      italic: false,
+      color: '#000000',
+    },
+    value: {
+      type: 'TEXT',
+      font: 'noto_serif',
+      size: 40,
+      bold: true,
+      italic: false,
+      color: '#6281C5',
+    },
+    background: {
+      type: 'BACKGROUND',
+      style: 'COLOR',
+      color: '#C8D9FF',
+    },
+    button: {
+      type: 'BUTTON',
+      font: 'inter',
+      appearance: 'OUTLINE',
+      size: 'LARGE',
+      style: 'pill',
+      color: '#000000',
+    },
+  },
+} as const;