Section Development Process

The VSectionDevelopmentProcess component displays a development process section with a title, subtitle, and a list of items, each represented with a checkmarked item. It includes an image that adapts to different screen sizes (small image for tablets and larger image for desktop).

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

Component Props

The component accepts the following prop:

Prop Name	Type	Default	Required	Description
`data`	`IProcess`	`undefined`	Yes	Object containing the process data. This includes title, subtitle, images, and items to display in the process.

IProcess Interface

The data prop must adhere to the IProcess interface, which contains the following fields:

Field	Type	Description
`title`	`string`	The main title of the development process section.
`subtitle`	`string`	A brief subtitle explaining the development process.
`imageSmall`	`string`	The URL of the small-sized image (for tablet view).
`image`	`string`	The URL of the full-sized image (for larger screens).
`items`	`ICheckmarkedItem[]`	An array of items to display, each with a title and description.

Example Usage

vue

<script setup lang="ts">
import VSectionDevelopmentProcess from 'UiKit/components/VSection/VSectionDevelopmentProcess.vue';
import insightfulProcess from '/images/development/Rectangle-4-1.webp';
import insightfulProcessMobile from '/images/development/Rectangle 4.webp';


const data = {
  image: insightfulProcess,
  imageSmall: insightfulProcessMobile,
  title: 'Aligning Technical Efforts with Business Goals',
  subtitle: 'Building Effective Communication with the Business Side',
  items: [
    {
      title: 'Streamlining Communication',
      text: 'Conduct regular meetings with business stakeholders to review '
        + 'project progress, identify roadblocks, and gather feedback to refine development priorities.',
    },
    {
      title: 'Timely Updates',
      text: 'Provide consistent status reports and maintain up-to-date ticket management to '
        + 'highlight achievements and any timeline impacts.',
    },
    
  ],
};
</script>

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

Aligning Technical Efforts with Business Goals

Building Effective Communication with the Business Side

Conduct regular meetings with business stakeholders to review project progress, identify roadblocks, and gather feedback to refine development priorities.

Provide consistent status reports and maintain up-to-date ticket management to highlight achievements and any timeline impacts.