275 lines
8.8 KiB
Vue
275 lines
8.8 KiB
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>
|