Dynavera/src/views/TrainingModule.vue

<script setup lang="ts">
import { ref } from 'vue';
import { Card, Typography, Row, Col, Tag, Button } from 'ant-design-vue';

const lessons = ref([
    {
        id: 'l1',
        title: 'Getting Started',
        summary: 'Overview of the codebase and conventions.',
        type: 'Video',
    },
    {
        id: 'l2',
        title: 'Core Concepts',
        summary: 'Key patterns and architecture.',
        type: 'Article',
    },
    {
        id: 'l3',
        title: 'Hands-on Lab',
        summary: 'Small task to practice.',
        type: 'Practical',
    },
]);
</script>

<template>
    <div class="page">
        <Typography.Title :level="2">Training Module</Typography.Title>
        <Typography.Paragraph type="secondary"
            >Interactive module with lessons and
            checkpoints.</Typography.Paragraph
        >

        <Row :gutter="16">
            <Col v-for="lesson in lessons" :key="lesson.id" :xs="24" :md="8">
                <Card class="card" hoverable :bordered="false">
                    <Typography.Title :level="4">{{
                        lesson.title
                    }}</Typography.Title>
                    <Typography.Paragraph>{{
                        lesson.summary
                    }}</Typography.Paragraph>
                    <div class="lesson-footer">
                        <Tag color="purple">{{ lesson.type }}</Tag>
                        <Button type="primary" size="small">Open</Button>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<style scoped>
.page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem;
}
.card {
    background: #0f172a;
    border: 1px solid #1f2937;
    color: #e5e7eb;
}
.lesson-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
}
</style>