The VSectionTopCaseStudies component is designed to display the top section of a case studies page. It integrates multiple child components for structured information presentation, including highlights, tags, and detailed descriptions.

Props

ICaseStudies Object Structure

The data prop must adhere to the ICaseStudies interface, which includes:

• title (string): The title of the case study.
• subtitle (string): The subtitle of the case study.
• description (string): A detailed description of the case study.
• tags (Array<string>): Tags related to the case study.
• expertise (string): Key areas of expertise.
• deliverables (string): Items delivered in the project.
• techStack (string): Technologies used in the case study.

Example

<script setup lang="ts">
import VSectionTopCaseStudies from 'UiKit/components/VSectionTop/VSectionTopCaseStudies.vue';
</script>
<template>
  <VSectionTopCaseStudies
    :data="{
      title: 'E-commerce Platform Optimization',
      subtitle: 'Improving speed and scalability',
      description: 'Our team redesigned the e-commerce platform...',
      tags: ['E-commerce', 'Performance'],
      expertise: 'Performance Tuning, Cloud Architecture',
      deliverables: 'Scalable Backend, CI/CD Pipeline',
      techStack: 'Vue.js, AWS, Docker',
    }"
  />
</template>