Dynavera/site/src/views/PricingView.vue

<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 settings',
    'Run docker compose -f compose/dev/docker-compose.yml up --build for development or the prod/docker-compose.yml for production',
    'Open the site 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>