Dynavera/src/views/RoleProfiles.vue

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

const roles = [
    {
        id: 'r1',
        title: 'Frontend Engineer',
        summary: 'Focus on UI, UX and frontend platform integrations.',
    },
    {
        id: 'r2',
        title: 'Product Manager',
        summary: 'Define goals, priorities, and track success metrics.',
    },
    {
        id: 'r3',
        title: 'Customer Success',
        summary: 'Onboard customers and reduce time-to-value.',
    },
];
</script>

<template>
    <div class="page">
        <Typography.Title :level="2">Role Profiles</Typography.Title>
        <Typography.Paragraph type="secondary"
            >Pre-built role templates and suggested onboarding
            paths.</Typography.Paragraph
        >

        <Row :gutter="16">
            <Col v-for="role in roles" :key="role.id" :xs="24" :md="8">
                <Card class="card" hoverable :bordered="false">
                    <Typography.Title :level="4">{{
                        role.title
                    }}</Typography.Title>
                    <Typography.Paragraph>{{
                        role.summary
                    }}</Typography.Paragraph>
                    <div class="actions">
                        <Tag color="purple">Template</Tag>
                        <RouterLink to="/onboarding"
                            ><Button type="primary" size="small"
                                >Use Template</Button
                            ></RouterLink
                        >
                    </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;
}
.actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
}
</style>