Section Top Products

The VSectionTopProducts component is designed to display a visually appealing top section for products, featuring a customizable title, subtitle, text content, and an image on the right. It leverages the VSectionTop component for its layout and functionality.

Props

Name	Type	Required	Description
`title`	`String`	`false`	The title displayed at the top of the section.
`subtitle`	`String`	`false`	The subtitle displayed beneath the title.
`text`	`String`	`false`	Additional descriptive text displayed in the section.
`image`	`String`	`true`	URL of the image to display on the right side.
`getInTouchUrl`	`String`	`false`	URL used for the "Get in Touch" button (from `VSectionTop`).

Features

Dynamic Content:
- Title, subtitle, and text content are customizable through props.
- Supports adding a "Get in Touch" button if the getInTouchUrl is provided.
Right-Side Image:
- Displays an image on the right side using the VImage component.
- The image is lazy-loaded for performance and styled to fit the layout.
Reusable Layout:
- Built on the VSectionTop component, ensuring consistency with other top sections in the application.

Template Structure

The component's layout consists of:

Left Section: Title, subtitle, text, and optional "Get in Touch" button (handled by VSectionTop).
Right Section: An image displayed inside a styled container.

Slots

right: Overrides the default right content of the VSectionTop with the provided image.

Example Usage

vue

<script setup lang="ts">
import VSectionTopProducts from 'UiKit/components/VSectionTop/VSectionTopProducts.vue';
</script>
<template>
  <VSectionTopProducts
    title="Our Products"
    subtitle="Innovative Solutions for Your Needs"
    text="Discover how our products can elevate your business to the next level."
    image="/images/products/distributed-network-and-blockchain-development copy.svg"
    getInTouchUrl="/contact-us"
  />
</template>

Our Products

Innovative Solutions for Your Needs

Discover how our products can elevate your business to the next level.