Refined instructions and added links with general refactors

site/src/App.vue

@@ -10,6 +10,7 @@ import {
     UserAddOutlined,
     BuildOutlined,
     PayCircleOutlined,
+    QuestionCircleOutlined,
 } from '@ant-design/icons-vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useUserStore } from './stores/userStore'
@@ -30,6 +31,7 @@ type NavItem = {
 const navItems: NavItem[] = [
     { key: '/', label: 'Home', icon: HomeOutlined, path: '/' },
     { key: '/about', label: 'About', icon: InfoCircleOutlined, path: '/about' },
+    { key: '/getting-started', label: 'Get Started', icon: QuestionCircleOutlined, path: '/getting-started' },
     { key: '/pricing', label: 'Pricing', icon: PayCircleOutlined, path: '/pricing' },
     { key: '/agents', label: 'Agents', icon: RobotOutlined, path: '/agents', manager: true },
     { key: '/organization', label: 'Organizations', icon: BuildOutlined, path: '/organization' },

site/src/router/index.ts

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

site/src/views/AboutView.vue

@@ -1,5 +1,29 @@
 <script setup lang="ts">
-import { Card, Typography, Divider, List } from 'ant-design-vue'
+import { useRouter } from 'vue-router'
+import { Card, Typography, Divider, List, Button, Space } from 'ant-design-vue'
+import { PlayCircleOutlined, GithubOutlined, CodeOutlined } from '@ant-design/icons-vue'
+
+const router = useRouter()
+
+const REPO = 'https://git.cs.bham.ac.uk/projects-2025-26/vxn217'
+
+const composeLinks = [
+    {
+        label: 'Development compose',
+        path: 'compose/dev/docker-compose.yml',
+        desc: 'Local development stack with hot-reload and dev tooling. (Recommended for inspectors)',
+    },
+    {
+        label: 'Production compose',
+        path: 'compose/prod/docker-compose.yml',
+        desc: 'Production stack with Traefik reverse proxy and optimised builds.',
+    },
+    {
+        label: 'Production inference compose',
+        path: 'compose/prod/docker-compose.inference.yml',
+        desc: 'Separate GPU inference service for the production environment.',
+    },
+]
 
 const steps = [
     'Register or login.',
@@ -45,6 +69,44 @@ const features = [
                     </List.Item>
                 </template>
             </List>
+            <Space style="margin-top: 1rem">
+                <Button type="primary" @click="router.push('/getting-started')">
+                    <PlayCircleOutlined />
+                    Get started
+                </Button>
+                <Button @click="router.push('/register')">Register now</Button>
+            </Space>
+            <Divider />
+            <Typography.Title :level="4">Self-host</Typography.Title>
+            <Typography.Paragraph type="secondary">
+                Dynavera runs entirely on your own infrastructure. Clone the repository and use one
+                of the Docker Compose stacks below to get up and running.
+            </Typography.Paragraph>
+            <div class="compose-list">
+                <div v-for="c in composeLinks" :key="c.path" class="compose-row">
+                    <div class="compose-info">
+                        <Typography.Text strong>{{ c.label }}</Typography.Text>
+                        <Typography.Text type="secondary" class="compose-desc">{{ c.desc }}</Typography.Text>
+                    </div>
+                    <a :href="`${REPO}/-/blob/main/${c.path}`" target="_blank" rel="noopener">
+                        <Button size="small">
+                            <CodeOutlined />
+                            View file
+                        </Button>
+                    </a>
+                </div>
+            </div>
+            <Space style="margin-top: 1rem">
+                <a :href="REPO" target="_blank" rel="noopener">
+                    <Button type="primary">
+                        <GithubOutlined />
+                        View repository
+                    </Button>
+                </a>
+                <a :href="`${REPO}/-/blob/main/compose/prod/docker-compose.yml`" target="_blank" rel="noopener">
+                    <Button>Self host</Button>
+                </a>
+            </Space>
             <Divider />
             <Typography.Title :level="4">Features</Typography.Title>
             <div class="features">
@@ -80,12 +142,29 @@ const features = [
 .row {
     padding: 0.5rem 0;
 }
-.hero {
+.compose-list {
-    width: 100%;
+    display: flex;
-    height: 320px;
+    flex-direction: column;
-    object-fit: cover;
+    gap: 0.6rem;
+    margin-bottom: 0.25rem;
+}
+.compose-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    background: #f8fafc;
+    border: 1px solid #dbe3ec;
     border-radius: 6px;
-    margin-bottom: 1rem;
+    padding: 0.65rem 1rem;
+}
+.compose-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+}
+.compose-desc {
+    font-size: 0.85rem;
 }
 .features {
     display: grid;
@@ -108,7 +187,6 @@ const features = [
 .feature-body {
     padding: 0.75rem 1rem;
 }
-
 .feature-body :deep(.ant-typography-secondary) {
     color: #4b5563 !important;
 }

site/src/views/AgentDetailView.vue

@@ -49,7 +49,7 @@ const agentTypeOptions = [
 ]
 
 const agentTypeDescriptions: Record<string, string> = {
-    curriculum: 'Guides new hires through a structured onboarding path — presenting content, tasks, and milestones in a defined sequence for a given role.',
+    curriculum: 'Guides new hires through a structured onboarding path, presenting content, tasks, and milestones in a defined sequence for a given role.',
     knowledge: 'Answers ad-hoc questions by searching your uploaded training documents and knowledge base. Use this for open-ended Q&A during onboarding.',
     assessment: 'Tests understanding through role-specific questions and scenarios, then reports results back to the onboarding session so progress can be tracked.',
     monitor: 'Tracks overall session progress and surfaces completions or blockers for manager review without directly interacting with the new hire.',

site/src/views/HomeView.vue

@@ -39,7 +39,7 @@ const features = [
     {
         title: 'Knowledge Mesh',
         description:
-            'Ingest docs, wikis, and repos — keep assistants current with zero manual updates.',
+            'Ingest docs, wikis, and repos to keep assistants current with zero manual updates.',
         icon: CloudTwoTone,
     },
 ]
@@ -99,11 +99,11 @@ const logos = [
                         faster.
                     </Typography.Paragraph>
                     <Space>
-                        <RouterLink to="/about">
+                        <RouterLink to="/getting-started">
-                            <Button type="primary" size="large">Learn More</Button>
+                            <Button type="primary" size="large">Get Started</Button>
                         </RouterLink>
-                        <RouterLink to="/organization">
+                        <RouterLink to="/about">
-                            <Button size="large">See Onboarding Flows</Button>
+                            <Button size="large">Learn More</Button>
                         </RouterLink>
                     </Space>
                     <Divider />

site/src/views/OnboardingView.vue

@@ -56,7 +56,7 @@ const fetchTrainingFileWarning = async () => {
         const allFiles: { status: string; scope?: string }[] = Array.isArray(res.data)
             ? res.data
             : (res.data as { results?: { status: string; scope?: string }[] }).results ?? []
-        // Only consider role-scoped files — org-wide files apply to all roles
+        // Only consider role-scoped files; org-wide files apply to all roles
         // and their ingestion state shouldn't block a specific role's onboarding
         const files = allFiles.filter((f) => f.scope === 'role')
         const ingesting = files.filter((f) => f.status === 'ingesting').length

site/src/views/OrganizationManage.vue

@@ -962,7 +962,7 @@ onUnmounted(() => {
                                 size="small"
                             />
                             <Typography.Paragraph v-else type="secondary">
-                                No training files uploaded yet. Use the Upload Training File button to add files — you can scope them to a specific role or make them available to all roles.
+                                No training files uploaded yet. Use the Upload Training File button to add files. You can scope them to a specific role or make them available to all roles.
                             </Typography.Paragraph>
                         </div>
                     </Tabs.TabPane>

site/src/views/PricingView.vue

@@ -32,6 +32,10 @@ authentication, and connectivity to internal systems.`
 
 const router = useRouter()
 
+const REPO = 'https://git.cs.bham.ac.uk/projects-2025-26/vxn217'
+const DEV_COMPOSE = `${REPO}/-/blob/main/compose/dev/docker-compose.yml`
+const PROD_COMPOSE = `${REPO}/-/blob/main/compose/prod/docker-compose.yml`
+
 const selfHostSteps = [
     'Clone the repository locally',
     'Copy and edit .env.template (or create .env) with your settings',
@@ -73,11 +77,13 @@ const selfHostSteps = [
                             <Button
                                 type="primary"
                                 v-if="plan.name === 'Community'"
-                                @click="router.push('/login')"
+                                @click="router.push('/getting-started')"
                             >
                                 Get Started
                             </Button>
-                            <Button v-else>Self-Host</Button>
+                            <a v-else :href="PROD_COMPOSE" target="_blank" rel="noopener">
+                                <Button>Self-Host</Button>
+                            </a>
                         </Space>
                     </Card>
                 </Col>
@@ -106,8 +112,12 @@ const selfHostSteps = [
                 the the production compose when preparing a production deployment.
             </Typography.Paragraph>
             <Space>
-                <Button>Use development compose</Button>
+                <a :href="DEV_COMPOSE" target="_blank" rel="noopener">
-                <Button>Use production compose</Button>
+                    <Button>Development compose</Button>
+                </a>
+                <a :href="PROD_COMPOSE" target="_blank" rel="noopener">
+                    <Button type="primary">Production compose</Button>
+                </a>
             </Space>
 
             <Divider />