Dynavera/src/views/AboutView.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>
                        &nbsp;{{ 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>