Dynavera/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 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>