Added pricing, tweaked home and about content

src/App.vue

@@ -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: '/pricing', label: 'Pricing', icon: PayCircleOutlined, path: '/pricing' },
-    { key: '/roles', label: 'Roles', icon: TeamOutlined, path: '/roles', manager: true },
     { 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' },
         ],

src/router/index.ts

@@ -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',

src/views/AboutView.vue

@@ -1,71 +1,40 @@
 <script setup lang="ts">
-import { Card, Typography, Divider, List, Timeline, Space } from 'ant-design-vue'
+import { Card, Typography, Divider, List } 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.',
-        ],
-    },
-]
 
 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
+                Dynavera is a lightweight platform for onboarding, training, and assessing employees
-                employees with modular content and agent-driven workflows. It is designed for teams
+                with modular content and agent-driven workflows. It is designed for teams that want
-                that want to ship tangible learning experiences quickly without complex LMS setup.
+                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>
+            <Typography.Title :level="4">Features</Typography.Title>
-            <Space :size="24" direction="vertical" style="width: 100%">
+            <div class="features">
-                <Timeline>
+                <div v-for="f in features" :key="f.title" class="feature-card">
-                    <Timeline.Item v-for="bucket in roadmap" :key="bucket.title">
+                    <img :src="f.img" :alt="f.title" class="feature-hero" />
-                        <Typography.Text strong>{{ bucket.title }}</Typography.Text>
+                    <div class="feature-body">
-                        <List :data-source="bucket.items" :bordered="false">
+                        <Typography.Text strong>{{ f.title }}</Typography.Text>
-                            <template #renderItem="{ item }">
+                        <Typography.Paragraph type="secondary">{{ f.desc }}</Typography.Paragraph>
-                                <List.Item class="row">{{ item }}</List.Item>
+                    </div>
-                            </template>
+                </div>
-                        </List>
+            </div>
-                    </Timeline.Item>
+            <Divider />
-                </Timeline>
+            <Typography.Title :level="4">More about Dynavera</Typography.Title>
-            </Space>
+            <Typography.Paragraph>
-
+                Dynavera is built to be extensible — plug your content sources, connect an LMS, or
-            <Typography.Paragraph type="secondary" style="margin-top: 1rem">
+                integrate third-party assessment engines. The platform focuses on flexibility and
-                Demo-only auth; integrate a real identity provider for production use.
+                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>

src/views/PricingView.vue

@@ -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>