Offer

The VCardOffer component is a Vue 3 component designed to display investment offers in a card format. It includes details such as the offer name, image, minimum investment, valuation, and funding status. Location: ui-kit/src/components/VCard/VCardOffer.vue

Props

Name	Type	Default	Description
`offer`	`IOffer`	`undefined`	The investment offer object.
`funded`	`Boolean`	`false`	Indicates if the offer is fully funded.
`routeName`	`String`	`undefined`	The route name for navigation.
`link`	`String`	`undefined`	The URL to navigate to when the card is clicked.
`imageLoading`	`String`	`'lazy'`	The loading behavior for the offer image.

Computed Properties

Name	Type	Description
`offerImage`	`string`	Determines the offer image URL, falling back to a default image if none is provided.
`isDefaultImage`	`boolean`	Checks if the default image is being used.
`minInvestment`	`number`	Calculates the minimum investment amount.
`amountPercent`	`number`	Retrieves the percentage of the offer that has been funded.
`isClosingSoon`	`boolean`	Determines if the offer is close to full funding (above 90%).
`isNew`	`boolean`	Placeholder for checking if the offer is new (currently disabled).
`tagText`	`string`	Returns the tag text (`🔥 Closing Soon` or `New`).
`tagBackground`	`string`	Sets the background class for the offer tag.
`showTag`	`boolean`	Determines if the offer should display a tag.
`infoTags`	`string[]`	A list of predefined offer categories.
`minInvestmentValue`	`string`	Formats the minimum investment amount as currency.

Example

vue

<script setup lang="ts">
import VOfferCard from 'UiKit/components/VCard/VCardOffer';
</script>

<template>
  <VOfferCard
  :offer="offer"
  :funded="false"
  routeName="offer-details"
  link="/invest/offer-123"
  imageLoading="eager"
/>
</template>

VSectionCardOfferGrid Component

The VSectionCardOfferGrid component is a Vue 3 component used to display a list of offers in a grid format. It features dynamic rendering based on loading state and provides an option to display placeholder cards when data is still being fetched. The component uses VSection for layout and VCardOffer for rendering individual offers.

Props

Prop	Type	Description
`title`	`String`	The title displayed at the top of the section.
`subTitle`	`String`	The subtitle displayed below the title.
`items`	`Array` (`IOffer[]`)	An array of offers to be displayed. Each offer follows the `IOffer` interface.
`buttonHref`	`String`	The URL that the section's button links to.
`buttonText`	`String`	The text displayed on the section's button.
`loading`	`Boolean`	A flag indicating whether the section is in loading state or not.

Slots

Slot Name	Description
`infoShort`	Content displayed in the section header's short info area.

Example

vue

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

</script>
<template>
  <VSectionCardOfferGrid
      :items="offers"
      :button-href="explore[0].url"
      button-text="View More Offerings"
      title="Invest Now"
      sub-title="Building wealth, securing tomorrow"
      :loading="isGetOffersLoading"
      class="is--paddings"
    />
</template>