How We Can Assist You

Overview

The VHowWeCanAssistYou component is a section that highlights the ways a business or service can assist users, with customizable text, buttons, and images. This component also supports dynamic data injection and provides a responsive design for various screen sizes.

Location: ui-kit/src/components/VAds/VHowWeCanAssistYou.vue

Features

Customizable Content: Display a title, description, and a dynamic button linking to a URL.
Dynamic Item List: Render a list of items with images, titles, descriptions, and links.
Background Image: Optionally display a background image for the section.
Responsive Layout: The layout adapts to different screen sizes with a mobile-friendly two-column design.

Importing the Component

To use the VHowWeCanAssistYou component, import it as follows:

vue

import VHowWeCanAssistYou from 'UiKit/components/VAds/VHowWeCanAssistYou.vue';

Component Props

The component accepts the following props:

Prop Name	Type	Default	Required	Description
`backgroundImage`	`String`	`undefined`	No	URL of the background image to display behind the content.
`data`	`Object`	`howWeCanAssist`	Yes	Data object containing the content to display in the section.

Data Structure for data Prop

The data prop is an object of type IHowWeCanAssistYou. Below is the structure of this object:

interface IHowWeCanAssistYou {
  title: string;
  description: string;
  url: string;
  buttonText: string;
  items: {
    title: string;
    description: string;
    image: string;
    url: string;
  }[];
}

Example

As we have default data in the component you can just import component and call it with no props where you would like to display it

vue

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

<VHowWeCanAssistYou />

How we can assist you

Explore personalized support options designed for a smooth and enjoyable experience with us.

How We Can Assist

Development Stages

Navigate through our developmental stages, tracing the journey from concept to fruition.

Learn More Development Stages

Our Process

Explore our pipelines, revealing diverse pathways shaping our future offerings.

Learn More Our Process