Section Case Studies Main

The VSectionCaseStudiesMain component is designed for displaying case studies with a side navigation panel, optional testimonials, and navigation links for related case studies. It provides an organized structure for presenting detailed case study content with a sticky sidebar for easy navigation.

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

Features

Sticky Sidebar: Displays a side panel with table of contents and navigation links.
Customizable Content: Accepts various props to control sidebar and main section content.
Optional Testimonials: Displays client testimonials using the WhatOurClientsSaySidebar component.
Dynamic Navigation: Displays previous and next case study navigation buttons if available.

Component Props

The component accepts the following props:

Prop Name	Type	Default	Required	Description
`prev`	`String`	`undefined`	No	Slug for the previous case study in navigation.
`next`	`String`	`undefined`	No	Slug for the next case study in navigation.
`topic`	`String`	`undefined`	No	Topic used in the button's URL query parameter.
`slug`	`String`	`undefined`	Yes	Slug for the current case study page.
`sideTitle`	`String`	`undefined`	No	Title displayed in the sidebar.
`sideSubtitle`	`String`	`undefined`	No	Subtitle displayed in the sidebar.
`sideText`	`String`	`undefined`	No	Text content displayed in the sidebar.

Example

vue

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

<template>
<VSectionCaseStudiesMain
    :topic="'use-cases'"
    :slug="'current-case-study'"
    :sideTitle="'Side Title'"
    :sideSubtitle="'Side Subtitle'"
    :sideText="'Side Text Content'"
  >
    <h1>Case Study Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </VSectionCaseStudiesMain>
</template>

Side Title

Side Subtitle

Side Text Content

Have Questions?

“The development work delivered by Webdevelop PRO completely exceeded the client’s expectations for the project and enabled them to successfully launch and maintain their platform. Their team is dedicated to the long-term quality of what they create and put effort into meeting all deadlines.”

Ken Staut, Head of Corporate Development at Yieldstreet

Case Study Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.