fix(website): humanize marketing copy and drop em dashes
Update the customer education hero to "Launch an academy customers actually love", rewrite landing and solutions marketing copy with the humanizer skill, and remove em/en dashes from those pages while leaving blog and legal content untouched. Co-authored-by: Rotimi Best <[email protected]>
This commit is contained in:
Cursor Agent
committed by
Rotimi Best
Rotimi Best
co-authored by
Rotimi Best
Rotimi Best
parent
2a82abfa21
commit
52225f60fc
@@ -36,7 +36,7 @@
|
||||
<div class="mb-2 text-xs font-medium tracking-widest text-blue-700 uppercase">AI authoring</div>
|
||||
<h2 class="max-w-[760px] text-[clamp(1.75rem,3vw,2.6rem)] leading-[1.1] font-medium tracking-tight text-gray-950">
|
||||
AI that turns company knowledge into trainings that drive <em class="text-blue-700 not-italic"
|
||||
>business outcome</em
|
||||
>business outcomes</em
|
||||
>
|
||||
</h2>
|
||||
<p class="mt-3 max-w-[560px] text-sm leading-relaxed text-gray-500">
|
||||
@@ -50,7 +50,7 @@
|
||||
<div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
|
||||
<img
|
||||
src="https://assets.cdn.clsrio.com/www/home/ai-course-builder.jpeg"
|
||||
alt="Course builder — plan, approve, implement. Templates, in-editor chat, and MCP."
|
||||
alt="Course builder: plan, approve, implement. Templates, in-editor chat, and MCP."
|
||||
class="block h-auto w-full"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { BlurFade } from '@cio/ui/custom/animation/blurfade';
|
||||
import CodeBlock from './code-block.svelte';
|
||||
|
||||
// mcp.json — sky-300 keys · emerald-300 strings · slate-500 punctuation
|
||||
// mcp.json: sky-300 keys · emerald-300 strings · slate-500 punctuation
|
||||
// 2-space indent (real spaces; body uses whitespace-pre).
|
||||
const mcpJsonLines = [
|
||||
'<span class="text-slate-500">{</span>',
|
||||
|
||||
@@ -5,14 +5,14 @@
|
||||
import ArrowRight from '@lucide/svelte/icons/arrow-right';
|
||||
|
||||
/**
|
||||
* AI teaching assistant section — centered, light theme, logo on top, gradient accent,
|
||||
* AI teaching assistant section: centered, light theme, logo on top, gradient accent,
|
||||
* large heading, short subhead, optional CTA, and an image placeholder underneath.
|
||||
* Used on the homepage + each solution page with variant copy.
|
||||
*
|
||||
* @typedef {Object} Props
|
||||
* @property {string} [accent] Small gradient line above the heading (e.g. "Academy", "Compliance AI")
|
||||
* @property {string} [title] Main heading
|
||||
* @property {string} description Subhead paragraph (1–3 sentences)
|
||||
* @property {string} description Subhead paragraph (1-3 sentences)
|
||||
* @property {string} [ctaLabel] CTA button label (optional). Omit to hide the button.
|
||||
* @property {string} [ctaHref] CTA destination
|
||||
* @property {string} [imagePath] Suggested static file path for the image placeholder
|
||||
@@ -34,7 +34,7 @@
|
||||
ctaLabel,
|
||||
ctaHref = '/customer-education',
|
||||
imagePath = '/static/ai-tutor-stack.png',
|
||||
imageCaption = 'AI tutor in a lesson — lesson-aware chat, follow-ups, translation, summarisation',
|
||||
imageCaption = 'AI tutor in a lesson with chat, follow-ups, translation, and summarisation',
|
||||
showImage = true,
|
||||
imageSrc,
|
||||
imageAlt = '',
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
icon: '🤖',
|
||||
title: 'MCP server',
|
||||
description:
|
||||
'Drive course authoring from Cursor, Claude Code, Codex, or OpenCode. The MCP server exposes the API surface as agent tools — list, create, update, publish.'
|
||||
'Drive course authoring from Cursor, Claude Code, Codex, or OpenCode. The MCP server exposes the API surface as agent tools: list, create, update, publish.'
|
||||
},
|
||||
{
|
||||
icon: '🪝',
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { BlurFade } from '@cio/ui/custom/animation/blurfade';
|
||||
|
||||
/**
|
||||
* Boxed grid of cards — one outer rounded border, internal dividers between cells.
|
||||
* Boxed grid of cards: one outer rounded border, internal dividers between cells.
|
||||
* Reused by RoiBand, AutomationBand, customer-ed outcomes, etc.
|
||||
*
|
||||
* @typedef {Object} Props
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
<em class="text-blue-700 not-italic">look like yours.</em>
|
||||
</h2>
|
||||
<p class="mt-5 text-base leading-relaxed text-gray-500">
|
||||
A real design canvas — drag elements, swap brand colours and fonts, configure the ID format. Issue PDFs and
|
||||
PNGs learners actually want to share.
|
||||
A real design canvas. Drag elements, swap brand colours and fonts, configure the ID format. Issue PDFs and
|
||||
PNGs learners want to share.
|
||||
</p>
|
||||
</div>
|
||||
</BlurFade>
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
|
||||
<style>
|
||||
/* JetBrains Mono loaded via the Google Fonts link in src/app.html. System stack as fallback. */
|
||||
/* :global(...*) forces the font onto every descendant — including {@html}-rendered
|
||||
/* :global(...*) forces the font onto every descendant, including {@html}-rendered
|
||||
spans that don't carry Svelte's scope hash, and overrides any stray universal rules. */
|
||||
.cio-code-font,
|
||||
:global(.cio-code-font *) {
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
|
||||
{#if !hideCta}
|
||||
<PageSignupCTA
|
||||
header="Your Custom Academy – Up & Running in Minutes!"
|
||||
header="Your custom academy, up and running in minutes."
|
||||
subText="Try before you buy. No credit card required."
|
||||
btnLabel="Book a demo"
|
||||
link="classroomio/demo"
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<footer
|
||||
class="ui:border-border relative overflow-hidden border-t bg-[linear-gradient(to_top,#eef3fb_0%,#f8fafc_100%)] px-[5%] py-12 lg:px-[10%]"
|
||||
>
|
||||
<!-- Minor cloud — top-left, smaller than the hero -->
|
||||
<!-- Minor cloud, top-left, smaller than the hero -->
|
||||
<svg
|
||||
class="pointer-events-none absolute -top-4 left-3 z-[2] h-12 w-[160px] md:-top-5 md:left-4 md:h-16 md:w-[210px] lg:-top-6 lg:h-20 lg:w-[260px]"
|
||||
viewBox="0 0 240 110"
|
||||
@@ -214,6 +214,6 @@
|
||||
<div
|
||||
class="ui:border-border ui:text-muted-foreground relative z-10 mt-10 border-t pt-6 text-center text-xs lg:text-left"
|
||||
>
|
||||
All rights reserved — ClassroomIO © {new Date().getFullYear()}
|
||||
All rights reserved. ClassroomIO © {new Date().getFullYear()}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
class="pointer-events-none absolute inset-0 bg-[linear-gradient(135deg,#f7f9fc_0%,#eef2fa_60%,#e5ecf7_100%)]"
|
||||
></div>
|
||||
|
||||
<!-- Bordered clouds, top-left — crisp SVG silhouettes -->
|
||||
<!-- Bordered clouds, top-left: crisp SVG silhouettes -->
|
||||
<div class="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
|
||||
<!-- Cloud 1 (largest) -->
|
||||
<svg
|
||||
@@ -81,7 +81,7 @@
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Particle cloud — same component used in the footer at lower intensity -->
|
||||
<!-- Particle cloud: same component used in the footer at lower intensity -->
|
||||
<ParticleField class="pointer-events-none absolute inset-0 z-[2] hidden h-full w-full md:block" />
|
||||
|
||||
<!-- Bottom fade to next section -->
|
||||
@@ -110,7 +110,7 @@
|
||||
<div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
|
||||
<img
|
||||
src="https://assets.cdn.clsrio.com/www/home/hero-academy.jpeg"
|
||||
alt="Branded customer academy on a custom domain — catalog, cohorts, AI tutor"
|
||||
alt="Branded customer academy on a custom domain with catalog, cohorts, and AI tutor"
|
||||
width="2560"
|
||||
height="1440"
|
||||
class="block h-auto w-full"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import CodeBlock from './code-block.svelte';
|
||||
|
||||
/**
|
||||
* Shared MCP server section — dark background, copy + mcp.json on left/right.
|
||||
* Shared MCP server section: dark background, copy + mcp.json on left/right.
|
||||
* Used on /automation and /mcp-recipes.
|
||||
*
|
||||
* @typedef {Object} Props
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
* Reusable animated particle cloud, same family as the hero.
|
||||
*
|
||||
* @typedef {Object} ClusterSpec
|
||||
* @property {number} x Normalized 0–1 x position
|
||||
* @property {number} y Normalized 0–1 y position
|
||||
* @property {number} x Normalized 0-1 x position
|
||||
* @property {number} y Normalized 0-1 y position
|
||||
* @property {number} rx
|
||||
* @property {number} ry
|
||||
* @property {number} density
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
/**
|
||||
* Two-column feature split — text + optional bullets on one side, image on the other.
|
||||
* Two-column feature split: text + optional bullets on one side, image on the other.
|
||||
* Replaces bespoke per-page splits so we keep grid + spacing consistent across marketing pages.
|
||||
*
|
||||
* @typedef {Object} Props
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
<div class="mx-auto max-w-[1100px] text-center">
|
||||
<div class="mb-2 text-xs font-medium tracking-widest text-blue-700 uppercase">Testimonials</div>
|
||||
<h2 class="mb-3 text-[clamp(1.75rem,2.6vw,2.2rem)] leading-[1.15] font-medium tracking-tight">
|
||||
Hear from happy ClassroomIO users
|
||||
What teams say after they ship an academy
|
||||
</h2>
|
||||
<p class="mx-auto mb-8 max-w-[520px] text-sm leading-relaxed text-gray-500">
|
||||
See what excites them about building and managing training programs with ClassroomIO.
|
||||
Short notes from people running customer, partner, and internal training on ClassroomIO.
|
||||
</p>
|
||||
|
||||
<div class="relative mx-auto w-full">
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
bgClass = 'bg-white',
|
||||
eyebrow = 'Help docs are not an academy',
|
||||
heading = 'Reading docs isn’t the same as learning.',
|
||||
subhead = 'Intercom Articles, Zendesk Guide, and Confluence are great at one thing — answering "how do I do X?" when the user already knows what they need. They were never built to teach.',
|
||||
subhead = 'Intercom Articles, Zendesk Guide, and Confluence are great at one thing: answering "how do I do X?" when the user already knows what they need. They were never built to teach.',
|
||||
showHeading = true
|
||||
} = $props();
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
capability: 'Cohorts / multi-course paths',
|
||||
docs: false,
|
||||
academy: true,
|
||||
note: 'Onboarding week, admin track, power-user path — three audiences, three sequenced journeys, one academy.'
|
||||
note: 'Onboarding week, admin track, power-user path: three audiences, three sequenced journeys, one academy.'
|
||||
},
|
||||
{
|
||||
capability: 'AI tutor inside the lesson',
|
||||
@@ -68,7 +68,7 @@
|
||||
capability: 'Search & quick lookup',
|
||||
docs: true,
|
||||
academy: false,
|
||||
note: 'When someone already knows what they need, docs win. Pair an academy with your docs — don’t replace them.'
|
||||
note: "When someone already knows what they need, docs win. Pair an academy with your docs; don't replace them."
|
||||
},
|
||||
{
|
||||
capability: 'In-product contextual answers',
|
||||
@@ -140,7 +140,7 @@
|
||||
|
||||
<p class="mt-6 text-xs text-gray-500">
|
||||
Compared against typical capabilities of Intercom Articles, Zendesk Guide, and Confluence at time of writing. Run
|
||||
your own academy alongside your existing help center — most teams who launch a customer academy keep both.
|
||||
your own academy alongside your existing help center. Most teams who launch a customer academy keep both.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -53,13 +53,13 @@
|
||||
Icon: ShieldCheck,
|
||||
title: 'Compliance status tracking',
|
||||
description:
|
||||
'Know at a glance whether each learner is compliant, expiring soon, or non-compliant — and surface the people who need a reminder.'
|
||||
'Know at a glance whether each learner is compliant, expiring soon, or non-compliant, and surface the people who need a reminder.'
|
||||
},
|
||||
{
|
||||
Icon: RefreshCw,
|
||||
title: 'Renewals & retake intervals',
|
||||
title: 'Renewals and retake intervals',
|
||||
description:
|
||||
'Configure recurring training rules — annual, biannual, custom — so certifications refresh on schedule.'
|
||||
'Configure recurring training rules (annual, biannual, or custom) so certifications refresh on schedule.'
|
||||
},
|
||||
{
|
||||
Icon: CalendarClock,
|
||||
@@ -83,7 +83,7 @@
|
||||
Icon: FileSpreadsheet,
|
||||
title: 'Completion records & certificate ledger',
|
||||
description:
|
||||
'Every completion, mark, and issued certificate is stored against the learner — searchable from the dashboard when you need to look up who finished what.'
|
||||
'Every completion, mark, and issued certificate is stored against the learner, searchable from the dashboard when you need to look up who finished what.'
|
||||
},
|
||||
{
|
||||
Icon: KeyRound,
|
||||
@@ -169,7 +169,7 @@
|
||||
</h1>
|
||||
<HeroSubtitle class="mx-auto">
|
||||
Turn policies, SOPs, docs, and videos into assigned courses with quizzes, certificates, renewal rules, and
|
||||
completion evidence. Know exactly who is compliant — and prove it.
|
||||
completion evidence. Know exactly who is compliant, and prove it.
|
||||
</HeroSubtitle>
|
||||
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
|
||||
<Button data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">Book a Demo</Button>
|
||||
@@ -188,7 +188,7 @@
|
||||
<div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
|
||||
<img
|
||||
src="https://assets.cdn.clsrio.com/www/compliance-training/org-compliance.jpeg"
|
||||
alt="Compliance dashboard — required learners grouped by compliant, expiring soon, and non-compliant"
|
||||
alt="Compliance dashboard with required learners grouped by compliant, expiring soon, and non-compliant"
|
||||
class="block h-auto w-full"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
@@ -214,15 +214,15 @@
|
||||
<ImageDemoSection
|
||||
eyebrow="Inside a compliance program"
|
||||
title="A look inside a compliance program."
|
||||
description="From importing your team to issuing a certificate — the whole flow at a glance."
|
||||
description="From importing your team to issuing a certificate, the whole flow at a glance."
|
||||
imageSrc="https://assets.cdn.clsrio.com/www/compliance-training/compliance-dashboard.jpeg"
|
||||
imageAlt="Compliance dashboard — required learners, status, and certificates"
|
||||
imageAlt="Compliance dashboard showing required learners, status, and certificates"
|
||||
/>
|
||||
|
||||
<FeatureGrid
|
||||
eyebrow="Built for audit pressure"
|
||||
title="Everything you need when training completion is not optional."
|
||||
description={'Not a generic LMS with a "compliance" checkbox. Real workflows for the people who have to answer the auditor\u2019s questions.'}
|
||||
description={'Not a generic LMS with a "compliance" checkbox. Real workflows for the people who have to answer the auditor\'s questions.'}
|
||||
ctaLabel="Get started"
|
||||
ctaHref="/signup"
|
||||
{features}
|
||||
@@ -233,9 +233,9 @@
|
||||
bgClass="bg-gray-50"
|
||||
eyebrow="Renewals on autopilot"
|
||||
title="Training that re-runs itself."
|
||||
description="Set a retake interval once. ClassroomIO automatically moves learners back into “expiring soon”, sends reminders, holds them in a grace period, and flags non-compliance — all without admin intervention."
|
||||
description="Set a retake interval once. ClassroomIO moves learners back into "expiring soon", sends reminders, holds them in a grace period, and flags non-compliance, all without admin intervention."
|
||||
imageSrc="https://assets.cdn.clsrio.com/www/compliance-training/course-compliance.jpeg"
|
||||
imageAlt="Compliance settings panel — retake interval, grace period, reminders, waiver rules"
|
||||
imageAlt="Compliance settings panel with retake interval, grace period, reminders, and waiver rules"
|
||||
>
|
||||
{#snippet bullets()}
|
||||
<li class="flex items-start gap-2">
|
||||
@@ -262,8 +262,8 @@
|
||||
15 question types. Twelve auto-graded.
|
||||
</h2>
|
||||
<p class="mt-5 text-base leading-relaxed text-gray-500">
|
||||
Don't settle for multiple choice. Test understanding the way the policy actually requires — with partial
|
||||
credit, file uploads, video evidence, and manual override when you need a human in the loop.
|
||||
Don't settle for multiple choice. Test understanding the way the policy requires, with partial credit, file
|
||||
uploads, video evidence, and manual override when you need a human in the loop.
|
||||
</p>
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700">Auto-graded · 12</span>
|
||||
@@ -295,7 +295,7 @@
|
||||
Proof of training, designed for your brand.
|
||||
</h2>
|
||||
<p class="mt-5 text-base leading-relaxed text-gray-500">
|
||||
Configure the certificate ID format the way your records team needs it — by year, month, sequence, or a custom
|
||||
Configure the certificate ID format the way your records team needs it: by year, month, sequence, or a custom
|
||||
prefix. Download as PDF or PNG. Every issuance is logged for audit.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-3 text-sm text-gray-700">
|
||||
@@ -316,9 +316,9 @@
|
||||
<AiTutorSection
|
||||
accent="In your dashboard"
|
||||
title="A personal course-authoring assistant."
|
||||
description="Drop in a policy doc or paste a URL. The assistant plans the compliance course, drafts each lesson, writes the quiz questions, and stops for your approval before publishing — so building required training drops from a week to an afternoon."
|
||||
description="Drop in a policy doc or paste a URL. The assistant plans the compliance course, drafts each lesson, writes the quiz questions, and stops for your approval before publishing. Building required training drops from a week to an afternoon."
|
||||
imageSrc="https://assets.cdn.clsrio.com/www/compliance-training/ai-course-builder.jpeg"
|
||||
imageAlt="Course builder — plan, approve, implement. Templates, in-editor chat, and MCP."
|
||||
imageAlt="Course builder: plan, approve, implement. Templates, in-editor chat, and MCP."
|
||||
/>
|
||||
|
||||
<!-- Use cases -->
|
||||
|
||||
@@ -44,10 +44,10 @@
|
||||
{
|
||||
title: 'Publish it under your brand',
|
||||
description:
|
||||
'Custom domain, themed landing pages, public course catalog, and embeddable widgets — your academy, not ours.'
|
||||
'Custom domain, themed landing pages, public course catalog, and embeddable widgets. Your academy, not ours.'
|
||||
},
|
||||
{
|
||||
title: 'Track adoption & retention',
|
||||
title: 'Track adoption and retention',
|
||||
description: 'See progress, assessment results, certificates, and completion data across customers and cohorts.'
|
||||
}
|
||||
];
|
||||
@@ -191,12 +191,12 @@
|
||||
];
|
||||
|
||||
const outcomes = [
|
||||
{ title: 'Reduce repeat support tickets', sub: 'Self-serve education replaces 1:1 onboarding calls.' },
|
||||
{ title: 'Shorten time-to-value', sub: 'Customers learn core workflows before their first review call.' },
|
||||
{ title: 'Train admins and power users', sub: 'Multi-tier programs for end-users vs. champions.' },
|
||||
{ title: 'Certify customer champions', sub: 'Public shareable certificates fuel community advocacy.' },
|
||||
{ title: 'Drive feature adoption', sub: 'Targeted micro-courses when you ship something new.' },
|
||||
{ title: 'Build a moat of educated users', sub: 'The customers who know your product never churn quietly.' }
|
||||
{ title: 'Fewer repeat support tickets', sub: 'Self-serve education replaces a lot of 1:1 onboarding calls.' },
|
||||
{ title: 'Faster time to value', sub: 'Customers learn core workflows before their first review call.' },
|
||||
{ title: 'Train admins and power users', sub: 'Separate tracks for end users and champions.' },
|
||||
{ title: 'Certify customer champions', sub: 'Shareable certificates give people a reason to keep learning.' },
|
||||
{ title: 'Drive feature adoption', sub: 'Short courses when you ship something new.' },
|
||||
{ title: 'Keep educated customers longer', sub: 'People who know your product are harder to lose quietly.' }
|
||||
];
|
||||
</script>
|
||||
|
||||
@@ -204,7 +204,7 @@
|
||||
<title>Customer academy software for SaaS | ClassroomIO</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Launch a branded customer academy. Onboarding, feature adoption, admin training, and certification — under your own domain, with an AI tutor in every lesson."
|
||||
content="Launch a branded academy. Onboarding, feature adoption, admin training, and certification under your own domain, with an AI tutor in every lesson."
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
@@ -216,12 +216,12 @@
|
||||
Customer Education
|
||||
</Badge>
|
||||
<h1 class="text-[clamp(2rem,3.4vw,2.8rem)] leading-[1.1] font-medium tracking-tight text-gray-950">
|
||||
Launch a customer academy
|
||||
Launch an academy
|
||||
<em class="text-blue-700 not-italic">customers actually love.</em>
|
||||
</h1>
|
||||
<HeroSubtitle class="mx-auto">
|
||||
Turn your help docs, onboarding videos, and product knowledge into a branded learning portal. Train customers,
|
||||
certify power-users, and drive adoption — under your own domain, with an AI tutor in every lesson.
|
||||
certify power users, and drive adoption under your own domain, with an AI tutor in every lesson.
|
||||
</HeroSubtitle>
|
||||
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
|
||||
<Button data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">Book a Demo</Button>
|
||||
@@ -240,7 +240,7 @@
|
||||
<div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
|
||||
<img
|
||||
src="https://assets.cdn.clsrio.com/www/customer-education/beautiful-academy-site.jpeg"
|
||||
alt="Branded customer academy on a custom domain — hero, catalog, themed branding"
|
||||
alt="Branded customer academy on a custom domain: hero, catalog, and themed branding"
|
||||
class="block h-auto w-full"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
@@ -267,16 +267,16 @@
|
||||
|
||||
<ImageDemoSection
|
||||
eyebrow="Make it yours"
|
||||
title="Customize how your customer academy looks like."
|
||||
description="Theme the catalog, swap fonts and colors to match your brand, and build landing pages that feel like the rest of your product — without losing the LMS underneath."
|
||||
title="Make the academy look like the rest of your product."
|
||||
description="Theme the catalog, swap fonts and colors to match your brand, and build landing pages that feel like home, without losing the LMS underneath."
|
||||
imageSrc="https://assets.cdn.clsrio.com/www/customer-education/customizable-academy.jpeg"
|
||||
imageAlt="Customizable customer academy — catalog, course page, certificate"
|
||||
imageAlt="Customizable customer academy showing catalog, course page, and certificate"
|
||||
/>
|
||||
|
||||
<FeatureGrid
|
||||
eyebrow="Every piece, included"
|
||||
title="Everything you need to teach customers your product."
|
||||
description={'Not a "content site" bolted onto your help docs. A real LMS with cohorts, assessments, certificates, AI tutoring, community, and analytics, wrapped in your brand.'}
|
||||
description={'Not a content site bolted onto your help docs. A real LMS with cohorts, assessments, certificates, AI tutoring, community, and analytics, wrapped in your brand.'}
|
||||
ctaLabel="Get started"
|
||||
ctaHref="/signup"
|
||||
{features}
|
||||
@@ -285,9 +285,9 @@
|
||||
<AiTutorSection
|
||||
accent=""
|
||||
title="An AI tutor in every lesson."
|
||||
description="An AI tutor sits inside every lesson — lesson-aware, multilingual, and patient. It answers the questions customers would have sent to support, before they leave the page."
|
||||
description="An AI tutor sits inside every lesson. It knows the material, speaks multiple languages, and answers the questions customers would have sent to support before they leave the page."
|
||||
imagePath="/static/ai-tutor-stack.png"
|
||||
imageCaption="AI tutor in a lesson — lesson-aware chat, follow-ups, translation, summarisation"
|
||||
imageCaption="AI tutor in a lesson with chat, follow-ups, translation, and summarisation"
|
||||
vimeoVideoId="1192910311"
|
||||
/>
|
||||
|
||||
@@ -296,7 +296,7 @@
|
||||
eyebrow="Global customers"
|
||||
headlineLead="Teach customers"
|
||||
headlineAccent="in the language they bought in."
|
||||
description="Author once, publish in ten. Each lesson supports per-language variants — customers pick the language they read in, certificates render in that language, and adoption analytics roll up across regions."
|
||||
description="Author once, publish in ten. Each lesson supports per-language variants. Customers pick the language they read in, certificates render in that language, and adoption analytics roll up across regions."
|
||||
moduleLabel="Lesson 1 · Onboarding"
|
||||
footerLabel="6 lessons · 18 min"
|
||||
bgClass="bg-white"
|
||||
@@ -338,7 +338,7 @@
|
||||
</h2>
|
||||
<p class="mt-5 text-base leading-relaxed text-gray-500">
|
||||
Bundle courses into cohorts, gate them with a required exercise, and issue shareable certificates. Customer
|
||||
champions love showing off — and your product gets a quiet army of advocates.
|
||||
champions love showing them off, and your product gets a quiet army of advocates.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-3 text-sm text-gray-700">
|
||||
<li class="flex items-start gap-2">
|
||||
@@ -367,7 +367,7 @@
|
||||
<div class="mb-10 max-w-[640px]">
|
||||
<div class="mb-2 text-xs font-medium tracking-widest text-blue-700 uppercase">Why teams ship this</div>
|
||||
<h2 class="text-[clamp(1.75rem,2.6vw,2.2rem)] leading-[1.15] font-medium tracking-tight">
|
||||
Educated customers churn less. Period.
|
||||
Educated customers churn less.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
@@ -386,7 +386,7 @@
|
||||
|
||||
<PageSignupCTA
|
||||
header="Launch your customer academy."
|
||||
subText="Build a branded learning portal customers actually use. Custom domain, AI tutoring, certificates, and analytics — out of the box."
|
||||
subText="Build a branded learning portal customers actually use. Custom domain, AI tutoring, certificates, and analytics out of the box."
|
||||
btnLabel="Book a Demo"
|
||||
/>
|
||||
</section>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
{
|
||||
Icon: GraduationCap,
|
||||
title: 'Add a customer academy alongside.',
|
||||
body: "When a customer needs to learn the product — onboarding, role-based programs, certification, adoption courses for new features — that's the job an academy was built for."
|
||||
body: "When a customer needs to learn the product (onboarding, role-based programs, certification, adoption courses for new features), that's the job an academy was built for."
|
||||
}
|
||||
];
|
||||
</script>
|
||||
@@ -50,9 +50,9 @@
|
||||
</h1>
|
||||
|
||||
<HeroSubtitle>
|
||||
Intercom Articles, Zendesk Guide, and Confluence are excellent at one thing — answering "how do I do X?" when
|
||||
the user already knows what they need. They were never designed to take a brand-new customer from zero to
|
||||
confident product use. That's what a customer academy is for.
|
||||
Intercom Articles, Zendesk Guide, and Confluence are excellent at one thing: answering "how do I do X?" when the
|
||||
user already knows what they need. They were never designed to take a brand-new customer from zero to confident
|
||||
product use. That's what a customer academy is for.
|
||||
</HeroSubtitle>
|
||||
|
||||
<div class="mt-8 flex flex-wrap items-center gap-3">
|
||||
@@ -99,7 +99,7 @@
|
||||
<div class="mb-8 max-w-[640px]">
|
||||
<div class="mb-2 text-xs font-medium tracking-widest text-blue-700 uppercase">Tool-by-tool</div>
|
||||
<h2 class="text-[clamp(1.75rem,2.6vw,2.2rem)] leading-[1.15] font-medium tracking-tight">
|
||||
What the popular help-doc tools are great at — and what they aren't.
|
||||
What the popular help-doc tools are great at, and what they aren't.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -4,6 +4,6 @@ export const load = () => ({
|
||||
pageMetaTags: {
|
||||
title: 'Customer academy vs help docs (Intercom, Zendesk, Confluence) | ClassroomIO',
|
||||
description:
|
||||
'Why a customer academy outperforms help docs for onboarding, certification, and adoption — compared head-to-head with Intercom Articles, Zendesk Guide, and Confluence.'
|
||||
'Why a customer academy outperforms help docs for onboarding, certification, and adoption, compared head-to-head with Intercom Articles, Zendesk Guide, and Confluence.'
|
||||
}
|
||||
});
|
||||
|
||||
@@ -193,7 +193,7 @@
|
||||
<div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
|
||||
<img
|
||||
src="https://assets.cdn.clsrio.com/www/docs-vs-company-academy/docs-vs-customer-site.jpeg"
|
||||
alt="Docs answering questions, customer academy building capability — side by side"
|
||||
alt="Docs answering questions and a customer academy building capability, side by side"
|
||||
class="block h-auto w-full"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
@@ -262,7 +262,7 @@
|
||||
</h2>
|
||||
<p class="mt-5 text-sm leading-relaxed text-gray-500">
|
||||
Documentation works best when the user has a specific job and needs a precise answer. Easy to find, easy to
|
||||
scan, easy to trust — no enrollment required.
|
||||
scan, easy to trust, and no enrollment required.
|
||||
</p>
|
||||
|
||||
<div class="my-7 border-t border-gray-200"></div>
|
||||
|
||||
@@ -222,7 +222,7 @@
|
||||
<div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
|
||||
<img
|
||||
src="https://assets.cdn.clsrio.com/www/partner-training/latest-courses.jpeg"
|
||||
alt="Partner academy — latest courses, cohort structure, and learner state"
|
||||
alt="Partner academy with latest courses, cohort structure, and learner state"
|
||||
class="block h-auto w-full"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
@@ -255,7 +255,7 @@
|
||||
title="Open a few courses to the public, gate the rest."
|
||||
description="Pick the courses you want anyone to see. Partners (and the curious ones who aren’t partners yet) can jump in without signing up, watch a few lessons, and if they’re hooked they create an account to unlock the rest of your catalog."
|
||||
imageSrc="https://assets.cdn.clsrio.com/www/partner-training/public-courses.jpeg"
|
||||
imageAlt="Public partner course pages — open courses up front, sign-up gates the rest"
|
||||
imageAlt="Public partner course pages: open courses up front, sign-up gates the rest"
|
||||
/>
|
||||
|
||||
<FeatureGrid
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<AiTutorSection
|
||||
accent=""
|
||||
title="AI-powered Teaching Assistant"
|
||||
description="An AI teaching assistant that adapts to each student — answering questions in their own words, adjusting to their pace, and catching the ones that would otherwise land in your support inbox."
|
||||
description="An AI teaching assistant that adapts to each student: answering questions in their own words, adjusting to their pace, and catching the ones that would otherwise land in your support inbox."
|
||||
ctaLabel="See the academy"
|
||||
ctaHref="/customer-education"
|
||||
vimeoVideoId="1192910311"
|
||||
@@ -37,6 +37,6 @@
|
||||
|
||||
<PageSignupCTA
|
||||
header="Stop forwarding help articles."
|
||||
subText="Launch a branded academy on your domain in days."
|
||||
subText="Launch a branded academy on your domain in a few days."
|
||||
btnLabel="Book a Demo"
|
||||
/>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
eyebrow: '01 · Authoring',
|
||||
title: 'Generate a customer onboarding course from a doc URL',
|
||||
description:
|
||||
'The agent plans the course, drafts every lesson, and writes the quiz questions — then waits for your approval before publishing.',
|
||||
'The agent plans the course, drafts every lesson, and writes the quiz questions, then waits for your approval before publishing.',
|
||||
prompt:
|
||||
'Generate a customer onboarding course from https://docs.acme.com/getting-started. Use the "Customer Onboarding" template. Plan the course first, then wait for my approval before implementing the lessons.'
|
||||
},
|
||||
@@ -56,7 +56,7 @@
|
||||
eyebrow: '06 · Review',
|
||||
title: 'Audit every draft before publish',
|
||||
description:
|
||||
'Get a written summary of what each draft is missing — landing page, quiz questions, certificate rule, or final exam.',
|
||||
'Get a written summary of what each draft is missing: landing page, quiz questions, certificate rule, or final exam.',
|
||||
prompt:
|
||||
'List every draft course in my org. For each one, fetch its structure and tell me what is still missing before it can go live (e.g. landing page copy, final exam, certificate rule, lessons without exercises).'
|
||||
}
|
||||
|
||||
@@ -4,6 +4,6 @@ export const load = () => ({
|
||||
pageMetaTags: {
|
||||
title: 'MCP recipes for ClassroomIO | Build courses with your agent',
|
||||
description:
|
||||
'Ready-to-run prompts for the ClassroomIO MCP server. Generate courses, refresh content from updated docs, tag launches, and more — from Cursor, Claude Code, Codex, or OpenCode.'
|
||||
'Ready-to-run prompts for the ClassroomIO MCP server. Generate courses, refresh content from updated docs, tag launches, and more from Cursor, Claude Code, Codex, or OpenCode.'
|
||||
}
|
||||
});
|
||||
|
||||
@@ -32,6 +32,6 @@
|
||||
|
||||
<PageSignupCTA
|
||||
header="Stop forwarding help articles."
|
||||
subText="Launch a branded academy on your domain in days."
|
||||
subText="Launch a branded academy on your domain in a few days."
|
||||
btnLabel="Book a Demo"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user