67 lines
1.3 KiB
Vue
67 lines
1.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
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-wrap">
|
||
|
|
<header class="page-header">
|
||
|
|
<h1>Role Profiles</h1>
|
||
|
|
<p class="lead">
|
||
|
|
Pre-built role templates and suggested onboarding paths.
|
||
|
|
</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section class="profiles">
|
||
|
|
<div v-for="role in roles" :key="role.id" class="profile-card">
|
||
|
|
<h3>{{ role.title }}</h3>
|
||
|
|
<p>{{ role.summary }}</p>
|
||
|
|
<div class="actions">
|
||
|
|
<router-link :to="`/onboarding`" class="cta-small"
|
||
|
|
>Use Template</router-link
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.profiles {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
.profile-card {
|
||
|
|
background: #fff;
|
||
|
|
padding: 0.75rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||
|
|
}
|
||
|
|
.actions {
|
||
|
|
margin-top: 0.75rem;
|
||
|
|
}
|
||
|
|
.cta-small {
|
||
|
|
background: #4f46e5;
|
||
|
|
color: #fff;
|
||
|
|
padding: 0.4rem 0.6rem;
|
||
|
|
border-radius: 6px;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
</style>
|