71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
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>
|