@lightspeed/crane 1.1.2 → 1.2.0

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);

package/template/reference/sections/intro-slider/component/Slider.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="slider-container">
+    <div class="slider-track" :style="animationStyle">
+      <div
+        v-for="(image, index) in repeatedItems"
+        :key="`${image.text?.value}__${index}`"
+        :class="sliderItemClass"
+      >
+        <img
+          v-if="slideImageDesign.visible && image.content?.hasContent"
+          class="slider-item__image"
+          :src="image.content.highResolutionMobileImage"
+          loading="lazy"
+          :alt="image.text?.value"
+        />
+
+        <div class="slider-item__wrapper">
+          <div
+            v-if="slideTextDesign.visible"
+            class="slider-item__text"
+          >
+            {{ image.text?.value }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  CSSProperties,
+  watch,
+} from 'vue';
+import {
+  useDeckElementContent,
+  EditorTypes,
+  Card,
+  TextAreaContent,
+  ImageContent,
+  useLayoutElementDesign,
+  useImageElementDesign,
+  useTextElementDesign,
+} from '@lightspeed/crane';
+import { Content, Design } from '../type.ts';
+
+type Slide = {
+  text?: TextAreaContent;
+  content?: ImageContent;
+}
+
+const slideImageDesign = useImageElementDesign<Design>('image_content');
+const slideTextDesign = useTextElementDesign<Design>('image_text');
+
+const slideOverlayConfig = computed(() => ({
+  solidOverlay: (slideImageDesign.overlay?.solid?.color as Color).raw,
+  gradientOverlay: 'linear-gradient(180deg, '
+      + `${(slideImageDesign.overlay?.gradient?.fromColor as Color).raw}1A 0%, `
+      + `${(slideImageDesign.overlay?.gradient?.toColor as Color).raw}70 100%)`,
+}));
+
+const slideImageStyles = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+
+  if (slideImageDesign.overlay?.type === 'gradient') {
+    style.background = slideOverlayConfig.value.gradientOverlay;
+  }
+  if (slideImageDesign.overlay?.type === 'solid') {
+    style.background = slideOverlayConfig.value.solidOverlay;
+  }
+
+  return style;
+});
+
+const slideTextStyles = computed<CSSProperties>(() => ({
+  fontSize: `${slideTextDesign.size}px`,
+  fontFamily: slideTextDesign.font,
+  color: (slideTextDesign.color as Color).hex,
+  fontStyle: slideTextDesign.italic ? 'italic' : 'normal',
+  fontWeight: slideTextDesign.bold ? 'bold' : 'normal',
+}));
+
+const sliderContent = useDeckElementContent<Content>('slider');
+
+const slides = computed<Slide[]>(() => (
+  (sliderContent?.cards?.map((card: Card) => ({
+    text: sliderContent.getReactiveRef(card, EditorTypes.TEXTAREA, 'image_text') as TextAreaContent | undefined,
+    content: sliderContent.getReactiveRef(card, EditorTypes.IMAGE, 'image_content') as ImageContent | undefined,
+  })) ?? []).filter((image) => (image.content !== undefined && image.content.hasContent))
+));
+
+const layoutDesign = useLayoutElementDesign();
+const sliderItemClass = computed(() => [
+  'slider-item',
+  {
+    'slider-item--with-border-radius': layoutDesign.layout === 'Narrow_Title_And_Images_With_Border_Radius',
+  },
+]);
+
+const windowWidth = ref<number>(typeof window !== 'undefined' ? window.innerWidth : 0);
+
+const repeatedItems = ref<Slide[]>([]);
+
+const isSmallWindow = computed<boolean>(() => windowWidth.value < 800);
+
+const slideWidth = computed<number>(() => (isSmallWindow.value ? 167 : 256));
+const formattedSlideWidth = computed<string>(() => `${slideWidth.value}px`);
+
+const slideGap = computed<number>(() => (isSmallWindow.value ? 20 : 32));
+const formattedSlideGap = computed<string>(() => `${slideGap.value}px`);
+
+const slideSize = computed<number>(() => slideWidth.value + slideGap.value);
+
+function initializeItems(): void {
+  windowWidth.value = window.innerWidth;
+  const minItemsToFillViewport = Math.ceil(windowWidth.value / slideSize.value);
+  const repeats = Math.ceil(minItemsToFillViewport / (slides.value?.length as number)) + 1;
+
+  repeatedItems.value = Array(repeats).fill(slides.value).flat();
+}
+
+const animationStyle = computed<CSSProperties>(() => {
+  const totalWidth = repeatedItems.value.length * slideSize.value;
+
+  return {
+    width: `${totalWidth}px`,
+  };
+});
+
+watch(slides, initializeItems);
+
+onMounted(() => {
+  initializeItems();
+  window.addEventListener('resize', initializeItems);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', initializeItems);
+});
+</script>
+
+<style lang="scss" scoped>
+.slider-container {
+  overflow: hidden;
+  width: 100%;
+  white-space: nowrap;
+  margin-top: 48px;
+
+  --slide-width: v-bind(formattedSlideWidth);
+  --slide-gap: v-bind(formattedSlideGap);
+}
+
+.slider-track {
+  display: flex;
+  align-items: center;
+  animation: scroll 40s linear infinite 1s;
+  -webkit-animation: scroll 40s linear infinite 1s;
+}
+
+.slider-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: var(--slide-width);
+  margin-right: var(--slide-gap);
+  height: 218px;
+
+  flex-shrink: 0;
+  overflow: hidden;
+
+  &--with-border-radius {
+    border-radius: 16px;
+  }
+
+  @media screen and (min-width: 800px) {
+    height: 334px;
+
+    &--with-border-radius {
+      border-radius: 24px;
+    }
+  }
+
+  &__wrapper {
+    --slider-item-background: v-bind(slideImageStyles.background);
+
+    position: absolute;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    bottom: 0;
+    padding: 16px;
+    background: var(--slider-item-background);
+  }
+
+  &__text {
+    --slider-item-text-font-size: v-bind(slideTextStyles.fontSize);
+    --slider-item-text-font-family: v-bind(slideTextStyles.fontFamily);
+    --slider-item-text-color: v-bind(slideTextStyles.color);
+    --slider-item-text-font-style: v-bind(slideTextStyles.fontStyle);
+    --slider-item-text-font-weight: v-bind(slideTextStyles.fontWeight);
+
+    margin: auto 0 0;
+    line-height: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: var(--slider-item-text-font-family);
+    font-size: var(--slider-item-text-font-size);
+    font-style: var(--slider-item-text-font-style);
+    font-weight: var(--slider-item-text-font-weight);
+    color: var(--slider-item-text-color);
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-50%);
+  }
+}
+</style>