fishy/Dynavera
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added pricing, tweaked home and about content

Browse source
This commit is contained in:
Viswamedha Nalabotu 2026-01-18 14:53:43 +00:00
parent 5a01226b83
commit 05c9f95398
4 changed files with 225 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/App.vue
View file

@ -5,7 +5,6 @@ import {
HomeOutlined,
InfoCircleOutlined,
RocketOutlined,
ReadOutlined,
TeamOutlined,
RobotOutlined,
BulbOutlined,
@ -14,6 +13,7 @@ import {
LoginOutlined,
UserAddOutlined,
BuildOutlined,
PayCircleOutlined,
} from '@ant-design/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from './stores/userStore'
@ -34,17 +34,17 @@ type NavItem = {
const navItems: NavItem[] = [
{ key: '/', label: 'Home', icon: HomeOutlined, path: '/' },
{ key: '/about', label: 'About', icon: InfoCircleOutlined, path: '/about' },
{ key: '/onboarding', label: 'Onboarding', icon: RocketOutlined, path: '/onboarding' },
{ key: '/roles', label: 'Roles', icon: TeamOutlined, path: '/roles', manager: true },
{ key: '/pricing', label: 'Pricing', icon: PayCircleOutlined, path: '/pricing' },
{ key: '/agents', label: 'Agents', icon: RobotOutlined, path: '/agents', manager: true },
{ key: '/progress', label: 'Progress', icon: DashboardOutlined, path: '/progress' },
{
key: '/organizations',
label: 'Organizations',
icon: BuildOutlined,
path: '/organizations',
children: [
{ key: '/training', label: 'Training', icon: ReadOutlined, path: '/training' },
{ key: '/roles', label: 'Roles', icon: TeamOutlined, path: '/roles', manager: true },
{ key: '/onboarding', label: 'Onboarding', icon: RocketOutlined, path: '/onboarding' },
{ key: '/progress', label: 'Progress', icon: DashboardOutlined, path: '/progress' },
{ key: '/assessments', label: 'Assessments', icon: BulbOutlined, path: '/assessments' },
{ key: '/resources', label: 'Resources', icon: AppstoreOutlined, path: '/resources' },
],

5
src/router/index.ts
View file

@ -15,6 +15,11 @@ const router = createRouter({
name: 'about',
component: () => import('../views/AboutView.vue'),
},
{
path: '/pricing',
name: 'pricing',
component: () => import('../views/PricingView.vue'),
},
{
path: '/login',
name: 'login',

141
src/views/AboutView.vue
View file

@ -1,71 +1,40 @@
<script setup lang="ts">
import { Card, Typography, Divider, List, Timeline, Space } from 'ant-design-vue'
const pathways = [
'Admin: system settings, user management, reporting, invitations.',
'Manager: create onboarding flows, assign roles, monitor team progress.',
'Employee: complete training modules, assessments, and track personal progress.',
]
const highlights = [
'Ready for agent-driven workflows that guide people through onboarding tasks.',
'Flexible role-based gating across pages (managers/admins vs employees).',
'Django REST API + Vue 3 frontend with a shared Pinia auth/session store.',
'Docker-friendly dev setup (frontend on 5173, API on 8000).',
]
const roadmap = [
{
title: 'Short term',
items: [
'Add richer assessments with adaptive scoring.',
'Improve content versioning for training modules.',
'Expose activity feed for audits.',
],
},
{
title: 'Next',
items: [
'Integrate external IDP (SSO) and SCIM user sync.',
'Launch webhooks for downstream HRIS updates.',
'Add multilingual content support.',
],
},
]
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 Agentic Trainers</Typography.Title>
<Typography.Title :level="2">About Dynavera</Typography.Title>
<Typography.Paragraph type="secondary">
Agentic Trainers is a lightweight platform for onboarding, training, and assessing
employees with modular content and agent-driven workflows. It is designed for teams
that want to ship tangible learning experiences quickly without complex LMS setup.
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">Role pathways</Typography.Title>
<List :data-source="pathways" :bordered="false">
<template #renderItem="{ item }">
<List.Item class="row">{{ item }}</List.Item>
</template>
</List>
<Divider />
<Typography.Title :level="4">Highlights</Typography.Title>
<List :data-source="highlights" :bordered="false">
<template #renderItem="{ item }">
<List.Item class="row">{{ item }}</List.Item>
</template>
</List>
<Divider />
<Typography.Title :level="4">Getting started</Typography.Title>
<List :data-source="steps" :bordered="false">
@ -76,24 +45,25 @@ const steps = [
</List.Item>
</template>
</List>
<Divider />
<Typography.Title :level="4">Roadmap</Typography.Title>
<Space :size="24" direction="vertical" style="width: 100%">
<Timeline>
<Timeline.Item v-for="bucket in roadmap" :key="bucket.title">
<Typography.Text strong>{{ bucket.title }}</Typography.Text>
<List :data-source="bucket.items" :bordered="false">
<template #renderItem="{ item }">
<List.Item class="row">{{ item }}</List.Item>
</template>
</List>
</Timeline.Item>
</Timeline>
</Space>
<Typography.Paragraph type="secondary" style="margin-top: 1rem">
Demo-only auth; integrate a real identity provider for production use.
<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>
@ -104,10 +74,37 @@ const steps = [
padding: 2rem 1.5rem;
}
.panel {
max-width: 900px;
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>

146
src/views/PricingView.vue Normal file
View file

@ -0,0 +1,146 @@
<script setup lang="ts">
import { Card, Typography, Divider, Row, Col, Button, Space, List } from 'ant-design-vue'
import { useRouter } from 'vue-router'
const plans = [
{
name: 'Community',
price: '$0',
summary: 'Completely free — full feature development preview',
bullets: [
'Single project, unlimited users',
'Onboarding flows, assessments, and reporting',
'Community support via repo issues',
],
},
{
name: 'Self-hosted',
price: 'Self-host',
summary: 'Run Dynavera on your own infrastructure',
bullets: [
'Deploy with Docker Compose',
'Connect to your DB and identity provider',
'Full control over data and backups',
],
},
]
const caveat = `Dynavera is currently available completely free for evaluation and development use. If you
prefer to run the platform on your own machines or servers, you can deploy a self-hosted instance
using the included Docker Compose manifests. Self-hosting gives you full control over your data,
authentication, and connectivity to internal systems.`
const router = useRouter()
const selfHostSteps = [
'Clone the repository locally',
'Copy and edit `.env.template` (or create `.env`) with your database credentials and POSTGRES_DB',
'Run `docker compose -f compose/dev/docker-compose.yml up --build`',
'Open the frontend at http://localhost:5173 and the API at http://localhost:8000',
]
</script>
<template>
<div class="pricing-page">
<Card class="panel" :bordered="false">
<Typography.Title :level="2">Pricing & Deployment</Typography.Title>
<Typography.Paragraph>
<strong>Free for now.</strong>
Dynavera is currently provided free for evaluation and development. Below are the
options to use it today — either run the hosted demo locally or deploy a self-hosted
instance on your own infrastructure.
</Typography.Paragraph>
<Divider />
<Row :gutter="24">
<Col :span="12" v-for="plan in plans" :key="plan.name">
<Card class="plan-card" :bordered="true">
<div class="plan-head">
<Typography.Title :level="4">{{ plan.name }}</Typography.Title>
<div class="plan-price">{{ plan.price }}</div>
</div>
<Typography.Paragraph type="secondary">
{{ plan.summary }}
</Typography.Paragraph>
<List :data-source="plan.bullets" :bordered="false">
<template #renderItem="{ item }">
<List.Item class="row">{{ item }}</List.Item>
</template>
</List>
<Space style="margin-top: 1rem">
<Button
type="primary"
v-if="plan.name === 'Community'"
@click="router.push('/login')"
>
Get Started
</Button>
<Button v-else>Self-Host</Button>
</Space>
</Card>
</Col>
</Row>
<Divider />
<Typography.Title :level="4">Self-hosting notes</Typography.Title>
<Typography.Paragraph>{{ caveat }}</Typography.Paragraph>
<Typography.Title :level="5">Quick start</Typography.Title>
<List :data-source="selfHostSteps" :bordered="false">
<template #renderItem="{ item, index }">
<List.Item class="row">
<strong>{{ index + 1 }}.</strong>
&nbsp;{{ item }}
</List.Item>
</template>
</List>
<Divider />
<Typography.Title :level="5">Deployment options</Typography.Title>
<Typography.Paragraph>
Choose which compose setup you want to run on your host. Commands and file paths are
intentionally not shown here — run the development compose for local development or
the the production compose when preparing a production deployment.
</Typography.Paragraph>
<Space>
<Button>Use development compose</Button>
<Button>Use production compose</Button>
</Space>
<Divider />
<Typography.Paragraph type="secondary">
If you need help deploying in production (SSL, external DB, backup strategy, or
scaling), get in touch with support for assistance with self-hosting and production
deployment.
</Typography.Paragraph>
</Card>
</div>
</template>
<style scoped>
.pricing-page {
padding: 2rem 1.5rem;
}
.panel {
max-width: 1000px;
margin: 0 auto;
}
.plan-card {
min-height: 240px;
}
.plan-head {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.plan-price {
font-size: 1.25rem;
font-weight: 700;
}
.row {
padding: 0.35rem 0;
}
</style>