Dynavera/src/views/HomeView.vue

<script setup lang="ts">
import {
    Row,
    Col,
    Card,
    Button,
    Typography,
    Tag,
    Statistic,
    Carousel,
    Avatar,
    Space,
    Divider,
} from 'ant-design-vue'
import { CheckCircleTwoTone, ThunderboltTwoTone, CloudTwoTone } from '@ant-design/icons-vue'

const heroImage =
    'https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1400&q=80'

const stats = [
    { title: 'Teams Onboarded', value: '240+' },
    { title: 'Avg. Time Saved', value: '38%' },
    { title: 'Playbooks Ready', value: '120' },
]

const features = [
    {
        title: 'Adaptive AI Guides',
        description:
            'Role-specific checklists, interactive tours, and contextual help tuned to your stack.',
        icon: CheckCircleTwoTone,
    },
    {
        title: 'Skills & Assessments',
        description:
            'Scenario-based quizzes and code tasks with instant insights and coach-like feedback.',
        icon: ThunderboltTwoTone,
    },
    {
        title: 'Knowledge Mesh',
        description:
            'Ingest docs, wikis, and repos — keep assistants current with zero manual updates.',
        icon: CloudTwoTone,
    },
]

const journeys = [
    {
        name: 'Engineer Launch',
        steps: 'Access, environments, codebase tour, first PR, observability basics.',
        image: 'https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?auto=format&fit=crop&w=800&q=80',
    },
    {
        name: 'Customer Success Ramp',
        steps: 'Playbooks, product scenarios, objection handling, success plans, CRM hygiene.',
        image: 'https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=900&q=80',
    },
    {
        name: 'Product Discovery',
        steps: 'Interview templates, JTBD mapping, experiment cards, roadmap debates.',
        image: 'https://images.unsplash.com/photo-1483478550801-ceba5fe50e8e?auto=format&fit=crop&w=900&q=80',
    },
]

const testimonials = [
    {
        name: 'Amira Chen',
        role: 'VP Engineering, Nimbus',
        quote: 'We cut onboarding from weeks to days. The guided flows and assessments keep everyone aligned.',
        avatar: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=200&q=80',
    },
    {
        name: 'Luis Ortega',
        role: 'Head of Success, Calypso',
        quote: 'Playbooks stay fresh automatically. New CSMs ship value on day one.',
        avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=200&q=80',
    },
]

const logos = [
    'https://dummyimage.com/120x40/111827/ffffff&text=Nova',
    'https://dummyimage.com/120x40/1f2937/ffffff&text=Helio',
    'https://dummyimage.com/120x40/111827/ffffff&text=Arcus',
    'https://dummyimage.com/120x40/1f2937/ffffff&text=Vertex',
]
</script>

<template>
    <main class="page">
        <section class="hero">
            <Row :gutter="32" :align="'middle'">
                <Col :xs="24" :md="14">
                    <Typography.Title :level="1" class="hero-title">
                        Build agentic onboarding that feels bespoke to every role
                    </Typography.Title>
                    <Typography.Paragraph class="hero-sub">
                        AI-led workflows, assessments, and knowledge delivery that adapt to your
                        stack, your rituals, and your teams - so every new hire ships confidently,
                        faster.
                    </Typography.Paragraph>
                    <Space>
                        <RouterLink to="/about">
                            <Button type="primary" size="large">Learn More</Button>
                        </RouterLink>
                        <RouterLink to="/onboarding">
                            <Button size="large">See Onboarding Flows</Button>
                        </RouterLink>
                    </Space>
                    <Divider />
                    <Row :gutter="16">
                        <Col v-for="stat in stats" :key="stat.title" :xs="24" :sm="8">
                            <Card :bordered="false" class="stat-card" hoverable>
                                <Statistic :title="stat.title" :value="stat.value" />
                            </Card>
                        </Col>
                    </Row>
                </Col>
                <Col :xs="24" :md="10">
                    <Card class="hero-card" hoverable :cover="null">
                        <img :src="heroImage" alt="Team collaborating" class="hero-img" />
                        <div class="hero-overlay">Adaptive AI playbooks</div>
                    </Card>
                </Col>
            </Row>
        </section>

        <section class="trusted">
            <Typography.Text type="secondary">Trusted by modern teams</Typography.Text>
            <div class="logo-row">
                <img v-for="logo in logos" :key="logo" :src="logo" alt="logo" />
            </div>
        </section>

        <section class="features">
            <Typography.Title :level="2">Everything you need to ramp faster</Typography.Title>
            <Row :gutter="16">
                <Col v-for="feature in features" :key="feature.title" :xs="24" :md="8">
                    <Card hoverable class="feature-card">
                        <feature.icon two-tone-color="#8b5cf6" style="font-size: 28px" />
                        <Typography.Title :level="4">{{ feature.title }}</Typography.Title>
                        <Typography.Paragraph>{{ feature.description }}</Typography.Paragraph>
                        <Tag color="purple">Live</Tag>
                    </Card>
                </Col>
            </Row>
        </section>

        <section class="journeys">
            <Typography.Title :level="2">Prebuilt journeys, tailored in minutes</Typography.Title>
            <Row :gutter="16">
                <Col v-for="journey in journeys" :key="journey.name" :xs="24" :md="8">
                    <Card hoverable class="journey-card">
                        <template #cover>
                            <img :alt="journey.name" :src="journey.image" />
                        </template>
                        <Typography.Title :level="4">{{ journey.name }}</Typography.Title>
                        <Typography.Text>{{ journey.steps }}</Typography.Text>
                    </Card>
                </Col>
            </Row>
        </section>

        <section class="testimonials">
            <Typography.Title :level="2">What teams are saying</Typography.Title>
            <Typography.Text
                type="secondary"
                style="display: block; text-align: center; margin-bottom: 1rem"
            >
                (Demo testimonials, real feedback coming soon...)
            </Typography.Text>
            <Carousel autoplay dot-position="bottom">
                <div v-for="t in testimonials" :key="t.name" class="testimonial-slide">
                    <Card :bordered="false" class="testimonial-card">
                        <Typography.Paragraph>“{{ t.quote }}”</Typography.Paragraph>
                        <Space>
                            <Avatar :src="t.avatar" size="large" />
                            <div>
                                <div class="t-name">{{ t.name }}</div>
                                <Typography.Text type="secondary">{{ t.role }}</Typography.Text>
                            </div>
                        </Space>
                    </Card>
                </div>
            </Carousel>
        </section>
    </main>
</template>

<style scoped>
.page {
    padding: 2rem 1.5rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
}
.hero {
    margin-bottom: 2.5rem;
}
.hero-title {
    margin-bottom: 1rem;
}
.hero-sub {
    font-size: 1.05rem;
    color: #cbd5e1;
}
.hero-card {
    border: none;
}
.hero-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 8px;
}
.hero-overlay {
    margin-top: 0.75rem;
    color: #8b5cf6;
    font-weight: 600;
}
.stat-card {
    background: #0f172a;
    border: 1px solid #1f2937;
}
.trusted {
    text-align: center;
    margin: 2rem 0;
}
.logo-row {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}
.logo-row img {
    opacity: 0.8;
    height: 32px;
}
.features {
    margin: 2.5rem 0;
}
.feature-card {
    height: 100%;
    background: #0f172a;
    border: 1px solid #1f2937;
    color: #e5e7eb;
}
.journeys {
    margin: 2.5rem 0;
}
.journey-card {
    background: #0f172a;
    border: 1px solid #1f2937;
    color: #e5e7eb;
}
.testimonials {
    margin: 2.5rem 0;
}
.testimonial-slide {
    padding: 0 6px;
}
.testimonial-card {
    background: #0f172a;
    border: 1px solid #1f2937;
    color: #e5e7eb;
}
@media (max-width: 768px) {
    .page {
        padding: 1.25rem 1rem 2.5rem;
    }
    .hero-img {
        height: 220px;
    }
}
</style>