110 lines
3.8 KiB
Vue
110 lines
3.8 KiB
Vue
<script setup lang="ts">
|
||
import { Card, Typography, Divider, List } from 'ant-design-vue'
|
||
|
||
const steps = [
|
||
'Register or login (demo credentials only).',
|
||
'Complete Onboarding and Training to simulate a role journey.',
|
||
'Managers assign employees to roles and review progress reports.',
|
||
]
|
||
|
||
const features = [
|
||
{
|
||
title: 'Modular Content',
|
||
desc: 'Compose learning journeys from small, reusable modules — mix assessments, videos and interactive checks.',
|
||
img: 'https://placehold.co/600x400?text=Modular+Content',
|
||
},
|
||
{
|
||
title: 'Agent Workflows',
|
||
desc: 'Automate guidance and triggers with configurable agents to move users through onboarding steps.',
|
||
img: 'https://placehold.co/600x400?text=Agent+Workflows',
|
||
},
|
||
{
|
||
title: 'Reporting & Insights',
|
||
desc: 'Lightweight reports showing completion, assessment scores and engagement metrics.',
|
||
img: 'https://placehold.co/600x400?text=Reporting',
|
||
},
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page">
|
||
<Card class="panel" :bordered="false">
|
||
<Typography.Title :level="2">About Dynavera</Typography.Title>
|
||
<Typography.Paragraph type="secondary">
|
||
Dynavera is a lightweight platform for onboarding, training, and assessing employees
|
||
with modular content and agent-driven workflows. It is designed for teams that want
|
||
angible learning experiences quickly without complex LMS setup.
|
||
</Typography.Paragraph>
|
||
<Divider />
|
||
<Typography.Title :level="4">Getting started</Typography.Title>
|
||
<List :data-source="steps" :bordered="false">
|
||
<template #renderItem="{ item, index }">
|
||
<List.Item class="row">
|
||
<strong>{{ index + 1 }}.</strong>
|
||
{{ item }}
|
||
</List.Item>
|
||
</template>
|
||
</List>
|
||
<Divider />
|
||
<Typography.Title :level="4">Features</Typography.Title>
|
||
<div class="features">
|
||
<div v-for="f in features" :key="f.title" class="feature-card">
|
||
<img :src="f.img" :alt="f.title" class="feature-hero" />
|
||
<div class="feature-body">
|
||
<Typography.Text strong>{{ f.title }}</Typography.Text>
|
||
<Typography.Paragraph type="secondary">{{ f.desc }}</Typography.Paragraph>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Divider />
|
||
<Typography.Title :level="4">More about Dynavera</Typography.Title>
|
||
<Typography.Paragraph>
|
||
Dynavera is built to be extensible — plug your content sources, connect an LMS, or
|
||
integrate third-party assessment engines. The platform focuses on flexibility and
|
||
ease of use, so teams can get started quickly and adapt as their needs evolve.
|
||
Whether you’re a small startup or a growing enterprise, Dynavera aims to simplify
|
||
the process of onboarding and training with modern, agent-driven approaches.
|
||
</Typography.Paragraph>
|
||
</Card>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.page {
|
||
max-width: 1100px;
|
||
}
|
||
.panel {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
}
|
||
.row {
|
||
padding: 0.5rem 0;
|
||
}
|
||
.hero {
|
||
width: 100%;
|
||
height: 320px;
|
||
object-fit: cover;
|
||
border-radius: 6px;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.features {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 1rem;
|
||
}
|
||
.feature-card {
|
||
background: var(--ant-card-background, #08121a);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.feature-hero {
|
||
width: 100%;
|
||
height: 160px;
|
||
object-fit: cover;
|
||
}
|
||
.feature-body {
|
||
padding: 0.75rem 1rem;
|
||
}
|
||
</style>
|