Section Development Stages Middle

The VSectionDevelopmentStagesMiddle component displays a list of development stages, each with an image, title, number, description text, and optional captions. It renders each stage item flexibly and adjusts the layout responsively for smaller screens. The component requires an array of stage objects as a prop.

Location: ui-kit/src/components/VSection/VSectionDevelopmentStagesMiddle.vue

Component Props

The component accepts the following prop:

Prop Name	Type	Required	Description
`data`	`Array<IDevelopmentStagesMiddle>`	Yes	An array of objects representing each development stage.

interface IDevelopmentStagesMiddle {
  image: string;  // URL of the stage image.
  number: string; // Stage number.
  title: string;  // Stage title.
  text: string;   // Description of the stage.
  captions?: {    // Optional captions for the stage.
    text: string;
    url?: string;  // Optional URL for each caption.
  }[];
}

Example Usage

vue

<script setup lang="ts">
import VSectionDevelopmentStagesMiddle from 'UiKit/components/VSection/VSectionDevelopmentStagesMiddle.vue';

const data = [
  {
    image: '/images/development-stages/illustration.svg',
    number: '01',
    title: 'It all starts with an idea',
    text: 'Every star project begins with an idea in your head that you have long cherished or that struck you like lightning. It’s important to share your ideas, to build a concept on paper and find weak points that need to be discussed and polished. If your blind spot is connecting business with tech implementation and you wonder which way you should go — we are here to help you. Run this idea by us and we will provide you with a cost and time-efficient way to convert your idea into a working product.',
    captions: [
      { text: 'Concept Discussion' },
      { text: 'Project Milestones' },
      { text: 'Research & Planning' },
      { text: 'Future Steps' }
    ],
  },
]
</script>

<template>
  <VSectionDevelopmentStagesMiddle
      :data="data"
      class="is--paddings is--background-gray-10"
  />
</template>

It all starts with an idea

Every star project begins with an idea in your head that you have long cherished or that struck you like lightning. It’s important to share your ideas, to build a concept on paper and find weak points that need to be discussed and polished. If your blind spot is connecting business with tech implementation and you wonder which way you should go — we are here to help you. Run this idea by us and we will provide you with a cost and time-efficient way to convert your idea into a working product.

Concept Discussion
Project Milestones
Research & Planning
Future Steps