feat: certificates, landing pages, ai tutor, website update, compliance
This commit is contained in:
Rotimi Best
@@ -1,208 +0,0 @@
|
||||
<script>
|
||||
import { PageSignupCTA, PageHeader } from '$lib/components';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { Badge } from '@cio/ui/base/badge';
|
||||
|
||||
const benefitDetails = [
|
||||
{
|
||||
icon: 'ai.svg',
|
||||
title: 'AI-Powered Learning',
|
||||
checkMark: 'check.svg',
|
||||
points: [
|
||||
'Create engaging courses with AI-assisted content generation.',
|
||||
'Automate grading and feedback processes, saving time and effort.',
|
||||
'Personalize learning experiences based on individual student needs.'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'community.svg',
|
||||
title: 'Foster a Thriving Community',
|
||||
checkMark: 'check.svg',
|
||||
points: [
|
||||
'Create a supportive learning environment with built-in forums and interactive tools.',
|
||||
'Encourage collaboration and knowledge sharing among students.',
|
||||
'Build a strong community of learners and mentors.'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'operations.svg',
|
||||
title: 'Streamline Operations',
|
||||
checkMark: 'check.svg',
|
||||
points: [
|
||||
'Manage your courses and students efficiently with our user-friendly platform.',
|
||||
'Issue custom certificates to validate student achievements.',
|
||||
'Provide a seamless learning experience for your students.'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const featureDetails = [
|
||||
{
|
||||
icon: 'certificate-i.svg',
|
||||
img: 'certificate.svg',
|
||||
title: 'Certificates',
|
||||
description:
|
||||
'We provide pre built certificate templates anyone can choose from and provide to their students right within our dashboard'
|
||||
},
|
||||
{
|
||||
icon: 'forum-i.svg',
|
||||
img: 'forum.svg',
|
||||
title: 'Forum area for question and answer',
|
||||
description:
|
||||
'Our community section allows for a robust question and answer experience encouraging collaboration between students. This also encourages knowledge sharing amongst students.'
|
||||
},
|
||||
{
|
||||
icon: 'ai.svg',
|
||||
img: 'ai-pic.svg',
|
||||
title: 'AI Powered Content creation',
|
||||
description:
|
||||
'We give you the ability to create courses with AI, upload videos, embed slides, create quizzes and even grade quizzes with AI.'
|
||||
},
|
||||
{
|
||||
icon: 'free-tools-i.svg',
|
||||
img: 'free-tools.svg',
|
||||
title: 'Free tools for students',
|
||||
description:
|
||||
'We provide a suite of free tools like Pomodoro timer, Random name picker, and a Progress report generator to make the lives of educators and students much easier.',
|
||||
ctaLabel: 'Try it out',
|
||||
ctaLink: '/tools'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Bootcamps | ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="flex flex-col items-center justify-center">
|
||||
<PageHeader
|
||||
className="flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-6 lg:px-28 md:px-16 px-8"
|
||||
>
|
||||
<Badge class="bg-white px-4! py-2!" variant="outline">Solution for Bootcamps</Badge>
|
||||
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-8 lg:items-center lg:justify-center">
|
||||
<div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<h1 class="m-0 mx-auto text-4xl text-slate-900 md:text-6xl lg:text-center">
|
||||
The platform for fast
|
||||
<span class="relative text-blue-700"> growing bootcamps</span>
|
||||
</h1>
|
||||
<p class="text-base font-normal text-slate-700 md:text-lg lg:w-[60%] lg:text-center">
|
||||
From AI powered course creation to student collaboration tools, ClassroomIO provides everything you need to
|
||||
run a cutting-edge, high-impact bootcamp.
|
||||
</p>
|
||||
</div>
|
||||
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Get Started for Free 🚀</Button>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<section
|
||||
class="flex w-full flex-col justify-center gap-y-12 px-6 py-16 md:px-16 lg:items-center lg:justify-between lg:px-28 lg:py-24"
|
||||
>
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<Badge class="bg-white px-4! py-2!" variant="outline">Our benefits</Badge>
|
||||
|
||||
<div
|
||||
class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
|
||||
>
|
||||
<h1 class="text-3xl">Inspire Student Success</h1>
|
||||
<p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
|
||||
Scale your bootcamp with ClassroomIO's comprehensive toolkit. Create engaging content, foster community, and
|
||||
drive student achievement.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex w-full max-w-7xl flex-col items-start justify-start gap-6 lg:flex-row lg:items-center lg:justify-between"
|
||||
>
|
||||
{#each benefitDetails as benefits}
|
||||
<div class="flex w-full flex-col gap-y-6 rounded-2xl border border-[#D9E0F5] p-4 md:p-6">
|
||||
<img
|
||||
class="h-[48px] w-[48px]"
|
||||
src="https://assets.cdn.clsrio.com/www/bootcamps/{benefits.icon}"
|
||||
alt="brain"
|
||||
/>
|
||||
|
||||
<div class="align-start flex w-full flex-col justify-start gap-y-2">
|
||||
<h1 class="text-md">{benefits.title}</h1>
|
||||
|
||||
{#each benefits.points as point}
|
||||
<div class="flex flex-row items-start justify-start gap-x-3">
|
||||
<img src="https://assets.cdn.clsrio.com/www/bootcamps/{benefits.checkMark}" alt="check mark" />
|
||||
<p class="font-[#656565] leading-8 font-light text-gray-500">
|
||||
{point}
|
||||
</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="flex w-full flex-col items-center justify-center gap-y-16 bg-[#F1F6FF] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
|
||||
>
|
||||
<div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<Badge class="bg-white px-4! py-2!" variant="outline">Explore our features</Badge>
|
||||
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<h1 class="text-3xl">Why We're the Perfect Fit</h1>
|
||||
<p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
|
||||
Discover why we’re the ideal partner for your bootcamp training needs. Experience innovative solutions
|
||||
designed to elevate student engagement and maximize learning outcomes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full max-w-7xl flex-col items-center justify-start gap-y-16 lg:gap-y-24">
|
||||
{#each featureDetails as feature, i}
|
||||
<div
|
||||
class="flex w-full lg:w-[70%] lg:flex-row {i % 2 !== 0
|
||||
? 'lg:flex-row-reverse'
|
||||
: ''} flex-col items-start justify-between gap-10 lg:items-center lg:justify-between"
|
||||
>
|
||||
<div class="flex w-full max-w-sm flex-col items-start justify-start gap-y-3 lg:w-[40%] lg:gap-y-6">
|
||||
<img
|
||||
class="h-[48px] w-[48px]"
|
||||
src="https://assets.cdn.clsrio.com/www/bootcamps/{feature.icon}"
|
||||
alt="team icon"
|
||||
/>
|
||||
<div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
|
||||
<h1 class="text-2xl">{feature.title}</h1>
|
||||
<p class="text-lg leading-8 text-gray-500">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if feature.ctaLink}
|
||||
<Button variant="outline" href={feature.ctaLink} target="_blank noopener noreferrer">
|
||||
{feature.ctaLabel}
|
||||
</Button>
|
||||
{:else}
|
||||
<Button variant="outline" data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">
|
||||
Book a Demo
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img
|
||||
class="w-full lg:max-w-[380px]"
|
||||
src="https://assets.cdn.clsrio.com/www/bootcamps/{feature.img}"
|
||||
alt="team management feature ui"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Why spend time and money on building your own platform?"
|
||||
subText="Invest that time and money back into giving your students the best experience possible."
|
||||
btnLabel="Sign me up"
|
||||
link="/signup"
|
||||
demo={false}
|
||||
/>
|
||||
</section>
|
||||
@@ -0,0 +1,348 @@
|
||||
<script>
|
||||
import {
|
||||
AiTutorSection,
|
||||
CertificateMock,
|
||||
FeatureGrid,
|
||||
HeroSubtitle,
|
||||
ImageDemoSection,
|
||||
PageHeader,
|
||||
PageSignupCTA,
|
||||
SplitFeatureSection,
|
||||
TrustBand,
|
||||
WorkflowSteps
|
||||
} from '$lib/components';
|
||||
import { Badge } from '@cio/ui/base/badge';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { Meteors } from '@cio/ui/custom/animation/meteors';
|
||||
import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
|
||||
import BadgeCheck from '@lucide/svelte/icons/badge-check';
|
||||
import CalendarClock from '@lucide/svelte/icons/calendar-clock';
|
||||
import ClipboardCheck from '@lucide/svelte/icons/clipboard-check';
|
||||
import FileSpreadsheet from '@lucide/svelte/icons/file-spreadsheet';
|
||||
import FileText from '@lucide/svelte/icons/file-text';
|
||||
import GraduationCap from '@lucide/svelte/icons/graduation-cap';
|
||||
import KeyRound from '@lucide/svelte/icons/key-round';
|
||||
import RefreshCw from '@lucide/svelte/icons/refresh-cw';
|
||||
import ShieldCheck from '@lucide/svelte/icons/shield-check';
|
||||
import Users from '@lucide/svelte/icons/users';
|
||||
|
||||
const workflow = [
|
||||
{
|
||||
title: 'Start with the policies you already have',
|
||||
description:
|
||||
'Bring SOPs, PDFs, Notion pages, Google Docs, videos, and internal process notes into one structured course.'
|
||||
},
|
||||
{
|
||||
title: 'Assign training by audience',
|
||||
description:
|
||||
'Import people via CSV, group by team or role, and assign the right course to the right audience in bulk.'
|
||||
},
|
||||
{
|
||||
title: 'Set the compliance rules',
|
||||
description: 'Define passing scores, deadlines, retake intervals, grace periods, reminders, and renewal windows.'
|
||||
},
|
||||
{
|
||||
title: 'Keep proof in one place',
|
||||
description:
|
||||
'Track who is compliant, expiring, in progress, waived, or non-compliant without ever opening a spreadsheet.'
|
||||
}
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
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.'
|
||||
},
|
||||
{
|
||||
Icon: RefreshCw,
|
||||
title: 'Renewals & retake intervals',
|
||||
description:
|
||||
'Configure recurring training rules — annual, biannual, custom — so certifications refresh on schedule.'
|
||||
},
|
||||
{
|
||||
Icon: CalendarClock,
|
||||
title: 'Deadlines & grace periods',
|
||||
description:
|
||||
'Set required completion dates and grace windows. Reminders go out automatically before learners fall out of compliance.'
|
||||
},
|
||||
{
|
||||
Icon: ClipboardCheck,
|
||||
title: 'Waivers, resets, and extensions',
|
||||
description:
|
||||
'Handle real-world exceptions without losing the audit history of who was required to complete training.'
|
||||
},
|
||||
{
|
||||
Icon: BadgeCheck,
|
||||
title: 'Certificates with custom IDs',
|
||||
description:
|
||||
'Issue branded PDF/PNG certificates with configurable ID formats (year, month, sequence, org prefix) tied to course completion.'
|
||||
},
|
||||
{
|
||||
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.'
|
||||
},
|
||||
{
|
||||
Icon: KeyRound,
|
||||
title: 'SSO and domain enforcement',
|
||||
description:
|
||||
'Force SSO by email domain with Better Auth. Break-glass overrides for admins; full sign-in audit history.'
|
||||
},
|
||||
{
|
||||
Icon: Users,
|
||||
title: 'Audience targeting',
|
||||
description:
|
||||
'Bulk enrollment, role-based access, and group assignment. Onboard contractors, vendors, and full-time staff differently.'
|
||||
}
|
||||
];
|
||||
|
||||
const questionTypes = [
|
||||
'Multiple choice',
|
||||
'Checkbox',
|
||||
'True / false',
|
||||
'Short answer',
|
||||
'Paragraph',
|
||||
'Numeric',
|
||||
'Fill in the blank',
|
||||
'Matching',
|
||||
'Ordering',
|
||||
'File upload',
|
||||
'Hotspot',
|
||||
'Word bank',
|
||||
'Star rating',
|
||||
'Links',
|
||||
'Video recording'
|
||||
];
|
||||
|
||||
const useCases = [
|
||||
'Annual security awareness',
|
||||
'GDPR & privacy training',
|
||||
'HIPAA refreshers',
|
||||
'AML / KYC training',
|
||||
'Workplace conduct & harassment',
|
||||
'Contractor & vendor onboarding',
|
||||
'Healthcare SOPs',
|
||||
'Financial-services policy acks',
|
||||
'Manufacturing safety',
|
||||
'Role-based access training'
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Compliance Training | ClassroomIO</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Turn policies and SOPs into certified training. Track compliance, renewals, grace periods, and audit evidence in one place."
|
||||
/>
|
||||
<script
|
||||
type="module"
|
||||
src="https://assets.cdn.clsrio.com/embeds/question-type-picker/question-type-picker.js"
|
||||
></script>
|
||||
</svelte:head>
|
||||
|
||||
<section class="bg-white">
|
||||
<PageHeader className="px-6 lg:px-12">
|
||||
<div class="mx-auto flex max-w-[820px] flex-col items-center text-center">
|
||||
<Badge variant="outline" class="mb-6 gap-2! bg-white px-3.5! py-1.5!">
|
||||
<span class="relative flex h-2 w-2">
|
||||
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75"></span>
|
||||
<span class="relative inline-flex h-2 w-2 rounded-full bg-blue-600"></span>
|
||||
</span>
|
||||
Compliance Training
|
||||
</Badge>
|
||||
<h1 class="text-[clamp(2rem,3.4vw,2.8rem)] leading-[1.1] font-medium tracking-tight text-gray-950">
|
||||
Audit-ready training,
|
||||
<em class="text-blue-700 not-italic">without the spreadsheets.</em>
|
||||
</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.
|
||||
</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>
|
||||
<Button href="/signup" variant="outline">Start free</Button>
|
||||
</div>
|
||||
<div class="mt-7 flex flex-wrap items-center justify-center gap-5 text-xs text-gray-500">
|
||||
<span class="flex items-center gap-1.5"><span class="font-medium text-blue-700">✓</span> SOC 2-friendly</span>
|
||||
<span class="flex items-center gap-1.5"
|
||||
><span class="font-medium text-blue-700">✓</span> Self-hosted option</span
|
||||
>
|
||||
<span class="flex items-center gap-1.5"><span class="font-medium text-blue-700">✓</span> Open source</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto mt-14 w-full max-w-[1100px]">
|
||||
<div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
|
||||
<img
|
||||
src="/org-compliance.jpeg"
|
||||
alt="Compliance dashboard — required learners grouped by compliant, expiring soon, and non-compliant"
|
||||
class="block h-auto w-full"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<TrustBand
|
||||
caption="Built for evidence-based programs"
|
||||
items={[
|
||||
'SOC 2 readiness',
|
||||
'GDPR awareness',
|
||||
'HIPAA refreshers',
|
||||
'ISO 27001 controls',
|
||||
'PCI-DSS staff training',
|
||||
'AML / KYC'
|
||||
]}
|
||||
/>
|
||||
|
||||
<WorkflowSteps eyebrow="How it works" title="From policy document to provable completion." steps={workflow} />
|
||||
|
||||
<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."
|
||||
imageSrc="/compliance-dashboard.jpeg"
|
||||
imageAlt="Compliance dashboard — 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.'}
|
||||
ctaLabel="Get started"
|
||||
ctaHref="/signup"
|
||||
{features}
|
||||
/>
|
||||
|
||||
<!-- Renewal split feature -->
|
||||
<SplitFeatureSection
|
||||
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."
|
||||
imageSrc="/course-compliance.jpeg"
|
||||
imageAlt="Compliance settings panel — retake interval, grace period, reminders, waiver rules"
|
||||
>
|
||||
{#snippet bullets()}
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="mt-0.5 text-blue-700">→</span> Annual, biannual, or custom intervals per course
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="mt-0.5 text-blue-700">→</span> Reminder cadences before expiry
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="mt-0.5 text-blue-700">→</span> Configurable grace periods and waiver workflows
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="mt-0.5 text-blue-700">→</span> Pause renewals for leave, role change, or offboarding
|
||||
</li>
|
||||
{/snippet}
|
||||
</SplitFeatureSection>
|
||||
|
||||
<!-- Question types showcase -->
|
||||
<section class="px-6 py-12 lg:px-12 lg:py-16">
|
||||
<div class="mx-auto max-w-[1100px]">
|
||||
<div class="mb-10 max-w-[640px]">
|
||||
<div class="mb-2 text-xs font-medium tracking-widest text-blue-700 uppercase">Assessments</div>
|
||||
<h2 class="text-[clamp(1.75rem,2.6vw,2.2rem)] leading-[1.15] font-medium tracking-tight">
|
||||
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.
|
||||
</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>
|
||||
<span class="rounded-full bg-amber-50 px-3 py-1 text-xs font-medium text-amber-700">Partial credit · 9</span>
|
||||
<span class="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">Manual review · 3</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div data-cio-widget="question-type-picker" class="w-full max-w-[900px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Certificates split -->
|
||||
<section class="bg-gray-50 px-6 py-12 lg:px-12 lg:py-16">
|
||||
<div class="mx-auto grid max-w-[1100px] grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-20">
|
||||
<div class="order-2 lg:order-1">
|
||||
<CertificateMock
|
||||
recipient="Sarah Chen"
|
||||
achievement="Annual Security Training 2026"
|
||||
issued="11 May 2026"
|
||||
verifyValue="CIO-2026-05-0142"
|
||||
/>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
<div class="mb-2 text-xs font-medium tracking-widest text-blue-700 uppercase">Certificates & evidence</div>
|
||||
<h2 class="text-[clamp(1.75rem,2.6vw,2.2rem)] leading-[1.15] font-medium tracking-tight">
|
||||
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
|
||||
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">
|
||||
<li class="flex items-start gap-2">
|
||||
<GraduationCap size={16} class="mt-0.5 text-blue-700" /> Templated and branded with your logo and colours
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<BadgeCheck size={16} class="mt-0.5 text-blue-700" /> Tied to a required passing score and assessment
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<AlertTriangle size={16} class="mt-0.5 text-blue-700" /> Auto-revokes when a renewal lapses
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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."
|
||||
imageSrc="/ai-course-builder.jpeg"
|
||||
imageAlt="Course builder — plan, approve, implement. Templates, in-editor chat, and MCP."
|
||||
/>
|
||||
|
||||
<!-- Use cases -->
|
||||
<section class="px-6 py-12 lg:px-12 lg:py-16">
|
||||
<div class="mx-auto max-w-[1100px]">
|
||||
<div class="mb-10 max-w-[640px]">
|
||||
<div class="mb-2 text-xs font-medium tracking-widest text-blue-700 uppercase">Use cases</div>
|
||||
<h2 class="text-[clamp(1.75rem,2.6vw,2.2rem)] leading-[1.15] font-medium tracking-tight">
|
||||
Training for the work people are required to know.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden border border-gray-200 bg-white">
|
||||
<div
|
||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 [&>*:nth-child(2n)]:sm:border-r-0 [&>*:nth-child(2n)]:lg:border-r [&>*:nth-child(3n)]:lg:border-r-0 [&>*:nth-last-child(-n+2)]:sm:border-b-0 [&>*:nth-last-child(-n+3)]:lg:border-b-0"
|
||||
>
|
||||
{#each useCases as useCase, i}
|
||||
<div
|
||||
class="group relative flex items-center gap-3 border-b border-gray-200 p-6 transition-colors hover:bg-gray-50/60 sm:border-r"
|
||||
>
|
||||
<span class="font-mono text-[11px] tracking-[0.15em] text-gray-400">
|
||||
{String(i + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<span class="text-sm font-medium text-gray-900">{useCase}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Stop chasing compliance manually."
|
||||
subText="Build certified training from your existing policies, assign it to the right people, and keep proof of completion in one place."
|
||||
btnLabel="Book a Demo"
|
||||
/>
|
||||
</section>
|
||||
@@ -1,176 +1,392 @@
|
||||
<script>
|
||||
import { PageSignupCTA, PageHeader } from '$lib/components';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import {
|
||||
AiTutorSection,
|
||||
BoxedGrid,
|
||||
CertificateMock,
|
||||
EmbedCodePreview,
|
||||
FeatureGrid,
|
||||
HeroSubtitle,
|
||||
ImageDemoSection,
|
||||
LanguageReel,
|
||||
MultiAcademySection,
|
||||
PageHeader,
|
||||
PageSignupCTA,
|
||||
RoiBand,
|
||||
TrustBand,
|
||||
VsHelpDocs,
|
||||
WorkflowSteps
|
||||
} from '$lib/components';
|
||||
import { Badge } from '@cio/ui/base/badge';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { Meteors } from '@cio/ui/custom/animation/meteors';
|
||||
import BarChart3 from '@lucide/svelte/icons/bar-chart-3';
|
||||
import BookMarked from '@lucide/svelte/icons/book-marked';
|
||||
import Bot from '@lucide/svelte/icons/bot';
|
||||
import Code2 from '@lucide/svelte/icons/code-2';
|
||||
import Crown from '@lucide/svelte/icons/crown';
|
||||
import GraduationCap from '@lucide/svelte/icons/graduation-cap';
|
||||
import Languages from '@lucide/svelte/icons/languages';
|
||||
import MessagesSquare from '@lucide/svelte/icons/messages-square';
|
||||
import MonitorPlay from '@lucide/svelte/icons/monitor-play';
|
||||
import PanelTop from '@lucide/svelte/icons/panel-top';
|
||||
|
||||
const benefitDetails = [
|
||||
const workflow = [
|
||||
{
|
||||
icon: 'personalised.svg',
|
||||
title: 'Personalized Learning',
|
||||
description: 'Offer branded landing pages and multilingual courses for diverse customers.'
|
||||
title: 'Bring your product knowledge',
|
||||
description:
|
||||
'Use help docs, onboarding guides, release notes, demo videos, Looms, and internal customer success notes.'
|
||||
},
|
||||
{
|
||||
icon: 'structured.svg',
|
||||
title: 'Structured Education',
|
||||
description: 'Create engaging courses with AI-assisted content generation.'
|
||||
title: 'Build a customer academy',
|
||||
description:
|
||||
'Create structured courses for onboarding, feature adoption, admin training, and power-user education.'
|
||||
},
|
||||
{
|
||||
icon: 'simplified.svg',
|
||||
title: 'Simplified Management',
|
||||
description: 'Centralize and easily manage, share, and distribute all customer education materials.'
|
||||
title: 'Publish it under your brand',
|
||||
description:
|
||||
'Custom domain, themed landing pages, public course catalog, and embeddable widgets — your academy, not ours.'
|
||||
},
|
||||
{
|
||||
title: 'Track adoption & retention',
|
||||
description: 'See progress, assessment results, certificates, and completion data across customers and cohorts.'
|
||||
}
|
||||
];
|
||||
|
||||
const featureDetails = [
|
||||
const features = [
|
||||
{
|
||||
icon: 'landing-i.svg',
|
||||
img: 'landing.svg',
|
||||
title: 'Dedicated landing page',
|
||||
Icon: PanelTop,
|
||||
title: 'Branded learning portal',
|
||||
description:
|
||||
'We give you a customisable landing page that can be shared with your customers who are interested in learning about your products'
|
||||
'Customer-facing catalog with landing pages, themes, your logo, your domain, and SEO-ready public pages.'
|
||||
},
|
||||
{
|
||||
icon: 'link.svg',
|
||||
img: 'domain.svg',
|
||||
title: 'Custom domains',
|
||||
description: 'Use your own domain to link to our landing page instead of using our free subdomain'
|
||||
Icon: MonitorPlay,
|
||||
title: 'Video & rich media lessons',
|
||||
description:
|
||||
'Embed demos, walkthroughs, Looms, MP4s, PDFs, and slide decks. Auto-thumbnails and transcoding included.'
|
||||
},
|
||||
{
|
||||
icon: 'globe.svg',
|
||||
img: 'language.svg',
|
||||
title: 'Multi language support',
|
||||
Icon: BookMarked,
|
||||
title: 'Programs & learning paths',
|
||||
description:
|
||||
'We support 6 languages and you can deploy courses in different languages to support different demographics'
|
||||
'Bundle courses into onboarding journeys with required completion order, prerequisites, and certificates.'
|
||||
},
|
||||
{
|
||||
icon: 'paths.svg',
|
||||
img: 'pathways.svg',
|
||||
title: 'Pathways',
|
||||
Icon: Bot,
|
||||
title: 'AI lesson assistant',
|
||||
description:
|
||||
'With the introduction of pathways, you can group multiple courses into one comprehensive learning pathway'
|
||||
'Each learner gets a Claude-powered tutor inside the lesson that can answer questions and summarise content.'
|
||||
},
|
||||
{
|
||||
Icon: MessagesSquare,
|
||||
title: 'Community & Q&A',
|
||||
description: 'Per-course discussion forums and program newsfeeds with reactions, threads, and mentions.'
|
||||
},
|
||||
{
|
||||
Icon: GraduationCap,
|
||||
title: 'Certificates customers can share',
|
||||
description:
|
||||
'Issue branded PDF/PNG certificates with verifiable IDs. Great for customer champions and admin programs.'
|
||||
},
|
||||
{
|
||||
Icon: Code2,
|
||||
title: 'Embeddable widgets',
|
||||
description:
|
||||
'Drop courses into your help center, marketing site, or in-product onboarding via a single script tag.'
|
||||
},
|
||||
{
|
||||
Icon: BarChart3,
|
||||
title: 'Adoption analytics',
|
||||
description: 'See who completed onboarding, who passed assessments, and which features need more education.'
|
||||
},
|
||||
{
|
||||
Icon: Languages,
|
||||
title: 'Deliver lessons in 10 languages',
|
||||
description:
|
||||
'Per-language lesson variants for English, Spanish, Portuguese, German, French, Hindi, Vietnamese, Russian, Polish, and Danish.'
|
||||
}
|
||||
];
|
||||
|
||||
const langs = [
|
||||
{
|
||||
code: 'en',
|
||||
native: 'English',
|
||||
en: 'English',
|
||||
sample: 'Getting Started: Your First Workspace',
|
||||
tone: 'from-blue-100 to-blue-200',
|
||||
ring: 'ring-blue-200'
|
||||
},
|
||||
{
|
||||
code: 'es',
|
||||
native: 'Español',
|
||||
en: 'Spanish',
|
||||
sample: 'Primeros pasos: Tu primer espacio',
|
||||
tone: 'from-amber-100 to-rose-200',
|
||||
ring: 'ring-amber-200'
|
||||
},
|
||||
{
|
||||
code: 'pt',
|
||||
native: 'Português',
|
||||
en: 'Portuguese',
|
||||
sample: 'Primeiros passos: Seu primeiro workspace',
|
||||
tone: 'from-emerald-100 to-teal-200',
|
||||
ring: 'ring-emerald-200'
|
||||
},
|
||||
{
|
||||
code: 'de',
|
||||
native: 'Deutsch',
|
||||
en: 'German',
|
||||
sample: 'Erste Schritte: Dein erster Arbeitsbereich',
|
||||
tone: 'from-slate-100 to-slate-200',
|
||||
ring: 'ring-slate-200'
|
||||
},
|
||||
{
|
||||
code: 'fr',
|
||||
native: 'Français',
|
||||
en: 'French',
|
||||
sample: 'Premiers pas : Votre premier espace',
|
||||
tone: 'from-blue-100 to-indigo-200',
|
||||
ring: 'ring-indigo-200'
|
||||
},
|
||||
{
|
||||
code: 'hi',
|
||||
native: 'हिन्दी',
|
||||
en: 'Hindi',
|
||||
sample: 'शुरुआत: आपका पहला वर्कस्पेस',
|
||||
tone: 'from-orange-100 to-rose-200',
|
||||
ring: 'ring-orange-200'
|
||||
},
|
||||
{
|
||||
code: 'vi',
|
||||
native: 'Tiếng Việt',
|
||||
en: 'Vietnamese',
|
||||
sample: 'Bắt đầu: Không gian làm việc đầu tiên',
|
||||
tone: 'from-red-100 to-yellow-200',
|
||||
ring: 'ring-red-200'
|
||||
},
|
||||
{
|
||||
code: 'ru',
|
||||
native: 'Русский',
|
||||
en: 'Russian',
|
||||
sample: 'Начало работы: ваше рабочее пространство',
|
||||
tone: 'from-sky-100 to-blue-200',
|
||||
ring: 'ring-sky-200'
|
||||
},
|
||||
{
|
||||
code: 'pl',
|
||||
native: 'Polski',
|
||||
en: 'Polish',
|
||||
sample: 'Pierwsze kroki: Twoja przestrzeń',
|
||||
tone: 'from-rose-100 to-red-200',
|
||||
ring: 'ring-rose-200'
|
||||
},
|
||||
{
|
||||
code: 'da',
|
||||
native: 'Dansk',
|
||||
en: 'Danish',
|
||||
sample: 'Kom godt i gang: Dit første område',
|
||||
tone: 'from-red-100 to-rose-200',
|
||||
ring: 'ring-red-200'
|
||||
}
|
||||
];
|
||||
|
||||
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.' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Customer Education | ClassroomIO</title>
|
||||
<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."
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<section class="flex flex-col items-center justify-center">
|
||||
<PageHeader
|
||||
className="flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-6 lg:px-28 md:px-16 px-8"
|
||||
>
|
||||
<Badge class="bg-white px-4! py-2!" variant="outline">Solution for Customer Education</Badge>
|
||||
<section class="bg-white">
|
||||
<PageHeader className="px-6 lg:px-12">
|
||||
<div class="mx-auto flex max-w-[820px] flex-col items-center text-center">
|
||||
<Badge variant="outline" class="mb-6 gap-2! bg-white px-3.5! py-1.5!">
|
||||
<Crown size={14} class="text-blue-700" />
|
||||
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
|
||||
<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.
|
||||
</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>
|
||||
<Button href="/signup" variant="outline">Start free</Button>
|
||||
</div>
|
||||
<div class="mt-7 flex flex-wrap items-center justify-center gap-5 text-xs text-gray-500">
|
||||
<span class="flex items-center gap-1.5"><span class="font-medium text-blue-700">✓</span> Custom domain</span>
|
||||
<span class="flex items-center gap-1.5"><span class="font-medium text-blue-700">✓</span> Embed anywhere</span>
|
||||
<span class="flex items-center gap-1.5"
|
||||
><span class="font-medium text-blue-700">✓</span> AI in every lesson</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-8 lg:items-center lg:justify-center">
|
||||
<div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<h1 class="m-0 mx-auto w-[95%] text-4xl text-slate-900 md:text-6xl lg:text-center">
|
||||
Drive retention and revenue with
|
||||
<span class="relative text-blue-700">Customer Education</span>
|
||||
</h1>
|
||||
<p class="text-base font-normal text-slate-700 md:text-lg lg:w-[60%] lg:text-center">
|
||||
Yes you are making lots of sales however you keep experiencing churn and customers leaving you. Without a
|
||||
proper customer education strategy you are leaving a lot of money on the table.
|
||||
</p>
|
||||
<div class="mx-auto mt-14 w-full max-w-[1100px]">
|
||||
<div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
|
||||
<img
|
||||
src="/beautiful-academy-site.jpeg"
|
||||
alt="Branded customer academy on a custom domain — hero, catalog, themed branding"
|
||||
class="block h-auto w-full"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Get Started for Free 🚀</Button>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<section
|
||||
class="flex w-full flex-col justify-center gap-y-12 px-8 py-16 md:px-16 lg:items-center lg:justify-between lg:px-28 lg:py-24"
|
||||
>
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<Badge class="bg-white px-4! py-1!" variant="outline">Our benefits</Badge>
|
||||
<div
|
||||
class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
|
||||
>
|
||||
<h1 class="text-3xl">The customer education toolkit</h1>
|
||||
<p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
|
||||
Create beautiful, branded landing pages to showcase your courses and get customers up to speed quickly
|
||||
<TrustBand
|
||||
caption="Built for product-led teams"
|
||||
items={[
|
||||
'SaaS onboarding',
|
||||
'Developer tools',
|
||||
'B2B platforms',
|
||||
'Admin training',
|
||||
'Customer champions',
|
||||
'Open-source projects'
|
||||
]}
|
||||
/>
|
||||
|
||||
<RoiBand bgClass="bg-white" />
|
||||
|
||||
<WorkflowSteps eyebrow="How it works" title="From scattered docs to a polished academy." steps={workflow} />
|
||||
|
||||
<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."
|
||||
imageSrc="/customizable-academy.jpeg"
|
||||
imageAlt="Customizable customer academy — catalog, course page, 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 programs, assessments, certificates, AI tutoring, community, and analytics, wrapped in your brand.'}
|
||||
ctaLabel="Get started"
|
||||
ctaHref="/signup"
|
||||
{features}
|
||||
/>
|
||||
|
||||
<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."
|
||||
imagePath="/static/ai-tutor-stack.png"
|
||||
imageCaption="AI tutor in a lesson — lesson-aware chat, follow-ups, translation, summarisation"
|
||||
vimeoVideoId="1192910311"
|
||||
/>
|
||||
|
||||
<LanguageReel
|
||||
{langs}
|
||||
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."
|
||||
moduleLabel="Lesson 1 · Onboarding"
|
||||
footerLabel="6 lessons · 18 min"
|
||||
bgClass="bg-white"
|
||||
/>
|
||||
|
||||
<EmbedCodePreview
|
||||
eyebrow="Embed anywhere"
|
||||
title="Bring lessons to your help center, your app, your marketing site."
|
||||
description="Publish any course as a widget. Drop a script tag into your help center, in-product onboarding, or marketing page. Progress, marks, and certificates sync back to ClassroomIO."
|
||||
fileName="help-center.html"
|
||||
codeLines={[
|
||||
'<span class="text-slate-500"><!-- in your help center --></span>',
|
||||
'<span class="text-pink-400"><script</span> <span class="text-sky-300">src</span><span class="text-slate-500">=</span><span class="text-emerald-300">"https://cdn.classroomio.com/widget.js"</span><span class="text-pink-400">></script></span>',
|
||||
'',
|
||||
'<span class="text-pink-400"><div</span> <span class="text-sky-300">data-cio-widget</span><span class="text-slate-500">=</span><span class="text-emerald-300">"getting-started"</span>',
|
||||
' <span class="text-sky-300">data-org</span><span class="text-slate-500">=</span><span class="text-emerald-300">"yourcompany"</span>',
|
||||
' <span class="text-sky-300">data-theme</span><span class="text-slate-500">=</span><span class="text-emerald-300">"light"</span><span class="text-pink-400">></span>',
|
||||
'<span class="text-pink-400"></div></span>'
|
||||
]}
|
||||
statusBar="connected · org: yourcompany · widget: getting-started"
|
||||
previewUrl="help.yourcompany.com / getting-started"
|
||||
previewImageSrc="/embeddable-widget.jpeg"
|
||||
previewAlt="Lesson widget embedded inside a help-center page"
|
||||
capabilities={[
|
||||
{ label: 'One script tag', sub: 'Drop-in install, no SDK required' },
|
||||
{ label: 'Select from multiple themes', sub: 'Light, dark, and brand-tuned looks bundled in' },
|
||||
{ label: 'Sync back to CIO', sub: 'Progress, marks, and certs round-trip' }
|
||||
]}
|
||||
bgClass="bg-gray-50"
|
||||
/>
|
||||
|
||||
<!-- Programs / certificates split -->
|
||||
<section class="px-6 py-12 lg:px-12 lg:py-16">
|
||||
<div class="mx-auto grid max-w-[1100px] grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-20">
|
||||
<div>
|
||||
<div class="mb-2 text-xs font-medium tracking-widest text-blue-700 uppercase">Certified champions</div>
|
||||
<h2 class="text-[clamp(1.75rem,2.6vw,2.2rem)] leading-[1.15] font-medium tracking-tight">
|
||||
Turn power-users into a public community.
|
||||
</h2>
|
||||
<p class="mt-5 text-base leading-relaxed text-gray-500">
|
||||
Bundle courses into Programs, gate them with a required exercise, and issue shareable certificates. Customer
|
||||
champions love showing 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">
|
||||
<GraduationCap size={16} class="mt-0.5 text-blue-700" /> Branded PDF/PNG certificates with verifiable IDs
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<BookMarked size={16} class="mt-0.5 text-blue-700" /> Programs with required completion order
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<MessagesSquare size={16} class="mt-0.5 text-blue-700" /> Per-course Q&A and program-wide newsfeed
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex w-full max-w-7xl flex-col items-start justify-start gap-6 lg:flex-row lg:items-center lg:justify-between"
|
||||
>
|
||||
{#each benefitDetails as benefits}
|
||||
<div class="flex w-full flex-col gap-y-6 rounded-2xl border border-[#D9E0F5] p-4 md:p-6">
|
||||
<img
|
||||
class="h-[48px] w-[48px]"
|
||||
src="https://assets.cdn.clsrio.com/www/customer-education/{benefits.icon}"
|
||||
alt="icon"
|
||||
/>
|
||||
|
||||
<div class="align-start flex w-full flex-col justify-start gap-y-2">
|
||||
<p class="text-lg">{benefits.title}</p>
|
||||
|
||||
<div class="flex flex-row items-start justify-start gap-x-3">
|
||||
<p class="font-[#656565] leading-8 font-light text-gray-500">
|
||||
{benefits.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
<CertificateMock
|
||||
recipient="Alex Rivera"
|
||||
achievement="YourCo Admin Bootcamp · 2026"
|
||||
issued="11 May 2026"
|
||||
verifyValue="CIO-2026-05-0214"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="flex w-full flex-col items-center justify-center gap-y-16 bg-[#F1F6FF] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
|
||||
>
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<div class="w-fit rounded-full border-2 border-[#C2D2FF] px-4 py-2 text-center">
|
||||
<p class="text-center text-sm text-[#4B5563]">Explore our features</p>
|
||||
<!-- Outcomes -->
|
||||
<section class="bg-gray-50 px-6 py-12 lg:px-12 lg:py-16">
|
||||
<div class="mx-auto max-w-[1100px]">
|
||||
<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.
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
|
||||
>
|
||||
<h1 class="text-3xl">Why Choose Us For Education Needs</h1>
|
||||
<p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
|
||||
Discover how our innovative solutions can reduce stress, enhance productivity, and achieve your training
|
||||
goals.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full max-w-7xl flex-col items-center justify-start gap-y-16 lg:gap-y-24">
|
||||
{#each featureDetails as feature, i}
|
||||
<div
|
||||
class="flex w-full lg:flex-row {i % 2 !== 0
|
||||
? 'lg:flex-row-reverse'
|
||||
: ''} flex-col items-start justify-start gap-10 lg:items-center lg:justify-evenly"
|
||||
>
|
||||
<div class="flex w-full max-w-sm flex-col items-start justify-start gap-y-3 lg:w-[40%] lg:gap-y-6">
|
||||
<img src="https://assets.cdn.clsrio.com/www/customer-education/{feature.icon}" alt="team icon" />
|
||||
<div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
|
||||
<h1 class="text-2xl">{feature.title}</h1>
|
||||
<p class="text-lg leading-8 text-gray-500">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="outline" data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">
|
||||
Book a Demo
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img
|
||||
class="w-full lg:max-w-[380px]"
|
||||
src="https://assets.cdn.clsrio.com/www/customer-education/{feature.img}"
|
||||
alt="team management feature ui"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
<BoxedGrid items={outcomes} cols={3}>
|
||||
{#snippet cell(outcome)}
|
||||
<h3 class="text-base font-medium text-gray-950">{outcome.title}</h3>
|
||||
<p class="mt-2 text-sm leading-relaxed text-gray-500">{outcome.sub}</p>
|
||||
{/snippet}
|
||||
</BoxedGrid>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<VsHelpDocs bgClass="bg-white" />
|
||||
|
||||
<MultiAcademySection />
|
||||
|
||||
<PageSignupCTA
|
||||
header="Stop losing customers to your competitors"
|
||||
subText="We help you retain customers by helping them understand your products and services."
|
||||
btnLabel="Book a demo"
|
||||
demo={true}
|
||||
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."
|
||||
btnLabel="Book a Demo"
|
||||
/>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,141 @@
|
||||
<script lang="ts">
|
||||
import { HeroSubtitle, PageHeader, PageSignupCTA, VsHelpDocs } from '$lib/components';
|
||||
import { Badge } from '@cio/ui/base/badge';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { BlurFade } from '@cio/ui/custom/animation/blurfade';
|
||||
import FileText from '@lucide/svelte/icons/file-text';
|
||||
import GraduationCap from '@lucide/svelte/icons/graduation-cap';
|
||||
|
||||
const competitors = [
|
||||
{
|
||||
name: 'Intercom Articles',
|
||||
good: 'Best-in-class in-app help widget. Great search. Where short-form, "right-now" answers belong.',
|
||||
missing: 'No sequenced learning paths. No assessments. No certification. No per-learner progress.'
|
||||
},
|
||||
{
|
||||
name: 'Zendesk Guide',
|
||||
good: 'Mature knowledge base, deeply integrated with Zendesk tickets. Excellent for tier-1 deflection.',
|
||||
missing: 'No course structure, no grading, no certificates. Built for support, not for learning.'
|
||||
},
|
||||
{
|
||||
name: 'Confluence',
|
||||
good: 'The default internal docs tool. Cheap, ubiquitous, easy to write into.',
|
||||
missing: 'Not customer-facing by default. No course primitives. No public certs. No learner analytics.'
|
||||
}
|
||||
];
|
||||
|
||||
const verdicts = [
|
||||
{
|
||||
Icon: FileText,
|
||||
title: 'Keep your help docs.',
|
||||
body: "When a customer already knows what they need, they search. Help docs win at lookup. Don't rip out the tool that already does that job well."
|
||||
},
|
||||
{
|
||||
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."
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<section class="bg-white">
|
||||
<PageHeader className="px-6 lg:px-12">
|
||||
<div class="mx-auto max-w-[1100px]">
|
||||
<BlurFade delay={0} once>
|
||||
<Badge variant="outline" class="mb-6 gap-2! bg-white px-3.5! py-1.5!">Customer academy vs help docs</Badge>
|
||||
</BlurFade>
|
||||
|
||||
<BlurFade delay={0.1} once>
|
||||
<h1
|
||||
class="max-w-[820px] text-[clamp(2rem,3.4vw,2.8rem)] leading-[1.1] font-medium tracking-tight text-gray-950"
|
||||
>
|
||||
Why your help center
|
||||
<em class="text-blue-700 not-italic">isn't teaching</em>
|
||||
your customers.
|
||||
</h1>
|
||||
</BlurFade>
|
||||
|
||||
<BlurFade delay={0.2} once>
|
||||
<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.
|
||||
</HeroSubtitle>
|
||||
</BlurFade>
|
||||
|
||||
<BlurFade delay={0.3} once>
|
||||
<div class="mt-8 flex flex-wrap items-center gap-3">
|
||||
<Button href="/signup">Launch your academy free</Button>
|
||||
<Button href="/customer-education" variant="outline">See a live academy</Button>
|
||||
</div>
|
||||
</BlurFade>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<!-- Quick verdict cards -->
|
||||
<section class="px-6 py-12 lg:px-12 lg:py-16">
|
||||
<div class="mx-auto max-w-[1100px]">
|
||||
<div class="mb-8 max-w-[640px]">
|
||||
<div class="mb-2 text-xs font-medium tracking-widest text-blue-700 uppercase">The short answer</div>
|
||||
<h2 class="text-[clamp(1.75rem,2.6vw,2.2rem)] leading-[1.15] font-medium tracking-tight">
|
||||
You need both. They do different jobs.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
|
||||
{#each verdicts as v, i}
|
||||
<BlurFade delay={0.1 * i} once>
|
||||
<div class="h-full rounded-2xl border border-gray-200 bg-gray-50 p-7">
|
||||
<div
|
||||
class="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-white text-blue-700 ring-1 ring-gray-200"
|
||||
>
|
||||
<v.Icon size={20} strokeWidth={1.75} />
|
||||
</div>
|
||||
<h3 class="text-base font-medium text-gray-950">{v.title}</h3>
|
||||
<p class="mt-3 text-sm leading-relaxed text-gray-600">{v.body}</p>
|
||||
</div>
|
||||
</BlurFade>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- The detailed comparison -->
|
||||
<VsHelpDocs bgClass="bg-gray-50" showHeading={true} />
|
||||
|
||||
<!-- Compared head-to-head -->
|
||||
<section class="px-6 py-12 lg:px-12 lg:py-16">
|
||||
<div class="mx-auto max-w-[1100px]">
|
||||
<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.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-5 md:grid-cols-3">
|
||||
{#each competitors as competitor, i}
|
||||
<BlurFade delay={0.08 * i} once>
|
||||
<div class="flex h-full flex-col rounded-2xl border border-gray-200 bg-white p-6">
|
||||
<p class="text-base font-medium text-gray-950">{competitor.name}</p>
|
||||
<div class="mt-5">
|
||||
<p class="text-[10px] tracking-wider text-emerald-600 uppercase">Where it wins</p>
|
||||
<p class="mt-1.5 text-sm leading-relaxed text-gray-600">{competitor.good}</p>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<p class="text-[10px] tracking-wider text-rose-600 uppercase">Where it doesn't</p>
|
||||
<p class="mt-1.5 text-sm leading-relaxed text-gray-600">{competitor.missing}</p>
|
||||
</div>
|
||||
</div>
|
||||
</BlurFade>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Stop forwarding help articles to every new customer."
|
||||
subText="Bundle the articles into a real onboarding course, add a final assessment, issue a certificate, and watch retention move."
|
||||
btnLabel="Book a Demo"
|
||||
/>
|
||||
</section>
|
||||
@@ -0,0 +1,9 @@
|
||||
export const prerender = true;
|
||||
|
||||
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.'
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,394 @@
|
||||
<script lang="ts">
|
||||
import { PageHeader, PageSignupCTA, WorkflowSteps } from '$lib/components';
|
||||
import { Badge } from '@cio/ui/base/badge';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { BlurFade } from '@cio/ui/custom/animation/blurfade';
|
||||
import AlertCircle from '@lucide/svelte/icons/alert-circle';
|
||||
import BarChart3 from '@lucide/svelte/icons/bar-chart-3';
|
||||
import BookOpen from '@lucide/svelte/icons/book-open';
|
||||
import Check from '@lucide/svelte/icons/check';
|
||||
import CheckCircle2 from '@lucide/svelte/icons/check-circle-2';
|
||||
import ClipboardCheck from '@lucide/svelte/icons/clipboard-check';
|
||||
import FileText from '@lucide/svelte/icons/file-text';
|
||||
import GraduationCap from '@lucide/svelte/icons/graduation-cap';
|
||||
import Layers from '@lucide/svelte/icons/layers';
|
||||
import Route from '@lucide/svelte/icons/route';
|
||||
import Search from '@lucide/svelte/icons/search';
|
||||
import ShieldCheck from '@lucide/svelte/icons/shield-check';
|
||||
import Sparkles from '@lucide/svelte/icons/sparkles';
|
||||
import Users from '@lucide/svelte/icons/users';
|
||||
|
||||
const quickVerdicts = [
|
||||
{
|
||||
Icon: FileText,
|
||||
title: 'Use documentation when the reader knows what they need.',
|
||||
description:
|
||||
'Docs are best for lookup, reference, troubleshooting, API details, product behavior, release notes, and anything a user needs to search in the moment.'
|
||||
},
|
||||
{
|
||||
Icon: GraduationCap,
|
||||
title: 'Use a company academy when the learner needs a guided path.',
|
||||
description:
|
||||
'Academies are best when people need onboarding, role-based training, practice, proof of completion, certification, or a repeatable learning journey.'
|
||||
}
|
||||
];
|
||||
|
||||
const comparisonRows = [
|
||||
{
|
||||
need: '"How do I do X?"',
|
||||
docs: true,
|
||||
academy: false,
|
||||
note: 'The person already has a task in mind and needs the fastest reliable answer.'
|
||||
},
|
||||
{
|
||||
need: '"Teach me the product from zero"',
|
||||
docs: false,
|
||||
academy: true,
|
||||
note: 'Beginners need sequencing, context, examples, and a clear path from first step to confident use.'
|
||||
},
|
||||
{
|
||||
need: '"Prove I am an expert"',
|
||||
docs: false,
|
||||
academy: true,
|
||||
note: 'Expertise needs assessment, completion records, certificates, or some visible proof of readiness.'
|
||||
},
|
||||
{
|
||||
need: '"Onboard a new partner team"',
|
||||
docs: false,
|
||||
academy: true,
|
||||
note: 'Partner onboarding usually needs role-based paths, assignments, progress tracking, and certification.'
|
||||
},
|
||||
{
|
||||
need: '"Look something up fast"',
|
||||
docs: true,
|
||||
academy: false,
|
||||
note: 'Lookup work should stay searchable, skimmable, linkable, and easy to update.'
|
||||
},
|
||||
{
|
||||
need: '"Make sure everyone completed required training"',
|
||||
docs: false,
|
||||
academy: true,
|
||||
note: 'Completion, reminders, renewals, and audit evidence belong in an academy or LMS.'
|
||||
},
|
||||
{
|
||||
need: '"Explain a technical reference"',
|
||||
docs: true,
|
||||
academy: false,
|
||||
note: 'API details, parameters, edge cases, and error codes work best as documentation.'
|
||||
},
|
||||
{
|
||||
need: '"Launch a repeatable customer education program"',
|
||||
docs: false,
|
||||
academy: true,
|
||||
note: 'A program needs structure: lessons, cohorts or audiences, assessments, certificates, and analytics.'
|
||||
}
|
||||
];
|
||||
|
||||
const docsUseCases = [
|
||||
'Product setup steps that users need to revisit',
|
||||
'API references, SDK details, Webhooks, limits, and errors',
|
||||
'Feature explanations and configuration options',
|
||||
'Troubleshooting articles and known issue workarounds',
|
||||
'Release notes, migration notes, and changelogs',
|
||||
'Short answers that support, success, and sales teams repeatedly send'
|
||||
];
|
||||
|
||||
const academyUseCases = [
|
||||
'New employee, customer, or partner onboarding',
|
||||
'Admin training for complex products or internal systems',
|
||||
'Certification for resellers, agencies, consultants, or power users',
|
||||
'Compliance training that needs proof, renewal, and audit evidence',
|
||||
'Feature adoption programs after a major product launch',
|
||||
'Role-based enablement for sales, support, implementation, or customer success teams'
|
||||
];
|
||||
|
||||
const decisionSignals = [
|
||||
{
|
||||
Icon: Search,
|
||||
title: 'If the audience is searching, write docs.',
|
||||
description:
|
||||
'Search intent usually means the person already has context. They need precision, not a course. Make the page easy to scan, link related topics, and keep it current.'
|
||||
},
|
||||
{
|
||||
Icon: Route,
|
||||
title: 'If the audience needs sequence, build an academy.',
|
||||
description:
|
||||
'Sequence matters when concepts depend on each other. A company academy can start with foundations, add practice, check understanding, then issue proof.'
|
||||
},
|
||||
{
|
||||
Icon: ClipboardCheck,
|
||||
title: 'If the business needs proof, build an academy.',
|
||||
description:
|
||||
'Docs can inform, but they rarely prove readiness. Use courses, assessments, completion records, and certificates when managers need to know who is trained.'
|
||||
},
|
||||
{
|
||||
Icon: Users,
|
||||
title: 'If different roles need different outcomes, build paths.',
|
||||
description:
|
||||
'A support agent, admin, reseller, and executive sponsor should not read the same long documentation tree. Academies let each role follow a purpose-built path.'
|
||||
}
|
||||
];
|
||||
|
||||
const hybridModel = [
|
||||
{
|
||||
title: 'Docs stay as the source of truth',
|
||||
description:
|
||||
'Keep canonical facts in documentation: product behavior, technical references, setup options, screenshots, limitations, and troubleshooting details.'
|
||||
},
|
||||
{
|
||||
title: 'Academy packages the learning journey',
|
||||
description:
|
||||
'Turn the most important docs into guided lessons with context, order, exercises, quizzes, examples, and certificates.'
|
||||
},
|
||||
{
|
||||
title: 'Support and success route people to the right layer',
|
||||
description:
|
||||
'Send advanced users to docs for quick answers. Send new users, partners, and internal teams to academy paths when they need structured training.'
|
||||
}
|
||||
];
|
||||
|
||||
const academySignals = [
|
||||
'People keep asking for onboarding calls even though docs exist.',
|
||||
'Customers read the docs but still do not adopt the full workflow.',
|
||||
'Managers ask who has completed training.',
|
||||
'Partners need certification before they sell or implement.',
|
||||
'Compliance, policy, or process training needs renewal evidence.',
|
||||
'Product changes require more than an announcement.'
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Docs vs Company Academy | ClassroomIO</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A practical guide to when your company needs documentation, when it needs a company academy, and how both work together for onboarding, enablement, and certification."
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<section class="bg-white">
|
||||
<PageHeader className="px-6 lg:px-12">
|
||||
<div class="mx-auto flex max-w-[820px] flex-col items-center text-center">
|
||||
<BlurFade delay={0} once>
|
||||
<Badge variant="outline" class="mb-6 gap-2! bg-white px-3.5! py-1.5!">
|
||||
<BookOpen size={14} class="text-blue-700" />
|
||||
Docs vs Company Academy
|
||||
</Badge>
|
||||
</BlurFade>
|
||||
|
||||
<BlurFade delay={0.1} once>
|
||||
<h1 class="text-[clamp(2.4rem,4vw,3.6rem)] leading-[1.08] font-medium tracking-tight text-gray-950">
|
||||
Documentation answers questions.
|
||||
<em class="text-blue-700 not-italic">A company academy teaches them to do the job.</em>
|
||||
</h1>
|
||||
</BlurFade>
|
||||
|
||||
<BlurFade delay={0.2} once>
|
||||
<p class="mt-6 text-sm leading-relaxed lg:text-base">
|
||||
Most teams do not need to choose one forever. They need to understand the job each format performs. This guide
|
||||
explains when docs are enough, when a company academy is the better tool, and how the two should work
|
||||
together.
|
||||
</p>
|
||||
</BlurFade>
|
||||
|
||||
<BlurFade delay={0.3} once>
|
||||
<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>
|
||||
<Button href="/customer-education" variant="outline">Explore academies</Button>
|
||||
</div>
|
||||
</BlurFade>
|
||||
</div>
|
||||
|
||||
<BlurFade delay={0.35} once>
|
||||
<div class="mx-auto mt-14 w-full max-w-[1100px]">
|
||||
<div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
|
||||
<img
|
||||
src="/docs-vs-customer-site.jpeg"
|
||||
alt="Docs answering questions, customer academy building capability — side by side"
|
||||
class="block h-auto w-full"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BlurFade>
|
||||
</PageHeader>
|
||||
|
||||
<section class="bg-gray-50 px-6 py-16 lg:px-12 lg:py-24">
|
||||
<div class="mx-auto max-w-[1120px]">
|
||||
<div class="mb-10 max-w-[720px]">
|
||||
<div class="mb-3 text-xs font-medium tracking-widest text-blue-700 uppercase">Decision table</div>
|
||||
<h2 class="text-[clamp(2rem,3vw,2.7rem)] leading-[1.15] font-medium tracking-tight text-gray-950">
|
||||
Start with the need, then choose the format.
|
||||
</h2>
|
||||
<p class="mt-5 text-base leading-relaxed text-gray-500">
|
||||
If the person wants one answer, documentation is usually right. If the person needs a path, proof, or
|
||||
repeatable onboarding, a company academy is usually right.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden rounded-2xl border border-gray-200 bg-white">
|
||||
<div
|
||||
class="grid grid-cols-[1fr_84px_96px] border-b border-gray-200 bg-gray-950 text-white md:grid-cols-[1fr_110px_130px_1.3fr]"
|
||||
>
|
||||
<div class="px-5 py-4 text-sm font-medium">Need</div>
|
||||
<div class="px-3 py-4 text-center text-sm font-medium md:px-5">Docs</div>
|
||||
<div class="px-3 py-4 text-center text-sm font-medium md:px-5">Academy</div>
|
||||
<div class="hidden px-5 py-4 text-sm font-medium md:block">Why</div>
|
||||
</div>
|
||||
|
||||
{#each comparisonRows as row}
|
||||
<div
|
||||
class="grid grid-cols-[1fr_84px_96px] border-b border-gray-100 last:border-b-0 md:grid-cols-[1fr_110px_130px_1.3fr]"
|
||||
>
|
||||
<div class="bg-gray-50 px-5 py-5 text-sm font-medium text-gray-950">{row.need}</div>
|
||||
<div class="flex items-center justify-center px-3 py-5 md:px-5">
|
||||
{#if row.docs}
|
||||
<span class="text-xl text-green-600" aria-label="Yes">✓</span>
|
||||
{:else}
|
||||
<span class="text-xl text-red-500" aria-label="No">×</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex items-center justify-center px-3 py-5 md:px-5">
|
||||
{#if row.academy}
|
||||
<span class="text-xl text-green-600" aria-label="Yes">✓</span>
|
||||
{:else}
|
||||
<span class="text-xl text-red-500" aria-label="No">×</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="hidden px-5 py-5 text-sm leading-relaxed text-gray-600 md:block">{row.note}</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="px-6 py-12 lg:px-12 lg:py-16">
|
||||
<div class="mx-auto max-w-[1120px]">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 lg:divide-x lg:divide-gray-200">
|
||||
<!-- When docs are enough -->
|
||||
<div class="lg:pr-10">
|
||||
<div class="text-[11px] font-medium tracking-widest text-blue-700 uppercase">When docs are enough</div>
|
||||
<h2 class="mt-4 text-[clamp(1.6rem,2.6vw,2.2rem)] leading-[1.1] font-medium tracking-tight text-gray-950">
|
||||
Choose documentation when the task is searchable, narrow, and repeatable.
|
||||
</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.
|
||||
</p>
|
||||
|
||||
<div class="my-7 border-t border-gray-200"></div>
|
||||
|
||||
<ul class="space-y-4">
|
||||
{#each docsUseCases as useCase}
|
||||
<li class="flex items-start gap-3 text-sm text-gray-700">
|
||||
<span
|
||||
class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-50 text-blue-700"
|
||||
>
|
||||
<Check size={12} strokeWidth={2.5} />
|
||||
</span>
|
||||
{useCase}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<div class="mt-8">
|
||||
<span
|
||||
class="inline-flex items-center gap-2 rounded-full bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700"
|
||||
>
|
||||
<FileText size={13} strokeWidth={2} />
|
||||
Reference & retrieval
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- When an academy is better -->
|
||||
<div class="mt-12 lg:mt-0 lg:pl-10">
|
||||
<div class="text-[11px] font-medium tracking-widest text-emerald-700 uppercase">
|
||||
When an academy is better
|
||||
</div>
|
||||
<h2 class="mt-4 text-[clamp(1.6rem,2.6vw,2.2rem)] leading-[1.1] font-medium tracking-tight text-gray-950">
|
||||
Choose a company academy when capability, behavior change, or proof matters.
|
||||
</h2>
|
||||
<p class="mt-5 text-sm leading-relaxed text-gray-500">
|
||||
An academy turns scattered knowledge into a structured path. Use it when the learner needs context before
|
||||
details, practice before independence, or a certificate before being trusted with a role.
|
||||
</p>
|
||||
|
||||
<div class="my-7 border-t border-gray-200"></div>
|
||||
|
||||
<ul class="space-y-4">
|
||||
{#each academyUseCases as useCase}
|
||||
<li class="flex items-start gap-3 text-sm text-gray-700">
|
||||
<span
|
||||
class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-50 text-emerald-700"
|
||||
>
|
||||
<Check size={12} strokeWidth={2.5} />
|
||||
</span>
|
||||
{useCase}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<div class="mt-8">
|
||||
<span
|
||||
class="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1.5 text-xs font-medium text-emerald-700"
|
||||
>
|
||||
<GraduationCap size={13} strokeWidth={2} />
|
||||
Structured learning
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<WorkflowSteps
|
||||
eyebrow="Decision framework"
|
||||
title="Ask these four questions before creating another content surface."
|
||||
description="The wrong format creates expensive confusion. Long docs cannot force mastery, and long courses are frustrating when someone only needs one answer."
|
||||
steps={decisionSignals.map((signal, i) => ({
|
||||
title: signal.title,
|
||||
description: signal.description,
|
||||
label: `Question ${String(i + 1).padStart(2, '0')}`
|
||||
}))}
|
||||
/>
|
||||
|
||||
<section class="px-6 py-16 lg:px-12 lg:py-24">
|
||||
<div class="mx-auto grid max-w-[1120px] grid-cols-1 items-start gap-12 lg:grid-cols-[0.9fr_1.1fr] lg:gap-16">
|
||||
<div>
|
||||
<div class="mb-3 text-xs font-medium tracking-widest text-blue-700 uppercase">The hybrid model</div>
|
||||
<h2 class="text-[clamp(2rem,3vw,2.7rem)] leading-[1.15] font-medium tracking-tight text-gray-950">
|
||||
The strongest teams use docs and academies together.
|
||||
</h2>
|
||||
<p class="mt-5 text-base leading-relaxed text-gray-500">
|
||||
Treat documentation as the reference layer and the academy as the enablement layer. The academy should not
|
||||
duplicate every page in your docs. It should organize the important material into an outcome-driven path.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
{#each hybridModel as item, i}
|
||||
<BlurFade delay={0.08 * i} once>
|
||||
<div class="flex gap-4 rounded-2xl border border-gray-200 bg-white p-5">
|
||||
<div
|
||||
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-700 text-sm font-medium text-white"
|
||||
>
|
||||
{i + 1}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-base font-medium text-gray-950">{item.title}</h3>
|
||||
<p class="mt-2 text-sm leading-relaxed text-gray-500">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</BlurFade>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PageSignupCTA
|
||||
header="ClassroomIO can host your company academy."
|
||||
subText="Turn your docs, videos, policies, and product knowledge into a branded academy with courses, assessments, certificates, analytics, and a custom domain."
|
||||
btnLabel="Book a Demo"
|
||||
/>
|
||||
</section>
|
||||
@@ -1,199 +0,0 @@
|
||||
<script>
|
||||
import { PageSignupCTA, PageHeader } from '$lib/components';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { Badge } from '@cio/ui/base/badge';
|
||||
|
||||
const benefitDetails = [
|
||||
{
|
||||
icon: 'light-bulb.svg',
|
||||
title: 'Grow from within',
|
||||
description: 'Employees who learn new skills stay longer, perform better, and take on bigger challenges.'
|
||||
},
|
||||
{
|
||||
icon: 'learning.svg',
|
||||
title: 'Training that sticks',
|
||||
description: 'Structured courses with quizzes and certifications so your team actually retains what they learn.'
|
||||
},
|
||||
{
|
||||
icon: 'pie-chart.svg',
|
||||
title: 'See the ROI',
|
||||
description: 'Track completion rates, skill gaps, and progress across every department in real time.'
|
||||
},
|
||||
{
|
||||
icon: 'paint-brush.svg',
|
||||
title: 'Make it yours',
|
||||
description: 'Your logo, your colors, your domain. Employees see your brand, not ours.'
|
||||
}
|
||||
];
|
||||
|
||||
const featureDetails = [
|
||||
{
|
||||
icon: 'team-mgnt.svg',
|
||||
img: 'team-mgnt2.svg',
|
||||
title: 'Enroll entire teams in minutes',
|
||||
description:
|
||||
'Invite managers and employees by department or role. Assign the right training to the right people without the back and forth.'
|
||||
},
|
||||
{
|
||||
icon: 'colour-pallete.svg',
|
||||
img: 'custom.svg',
|
||||
title: 'A learning platform that feels like yours',
|
||||
description:
|
||||
'Set your company logo, brand colors, and custom domain. Your employees get a seamless experience that looks and feels internal.'
|
||||
},
|
||||
{
|
||||
icon: 'cup.svg',
|
||||
img: 'progress.svg',
|
||||
title: 'Know exactly where your team stands',
|
||||
description: 'See who completed what, who needs a nudge, and where the skill gaps are. All in one dashboard.'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Employee Training | ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="flex flex-col items-center justify-center">
|
||||
<PageHeader
|
||||
className="flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-6 lg:px-28 md:px-16 px-8"
|
||||
>
|
||||
<Badge class="bg-white px-4! py-2!" variant="outline">Invest in your people</Badge>
|
||||
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-8 lg:items-center lg:justify-center">
|
||||
<div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<h1 class="m-0 mx-auto text-4xl text-slate-900 md:text-6xl lg:text-center">
|
||||
Your best investment is
|
||||
<br /><span class="relative text-blue-700">your employees</span>
|
||||
</h1>
|
||||
<p class="text-base font-normal text-slate-700 md:text-lg lg:w-[60%] lg:text-center">
|
||||
Companies that invest in employee growth outperform the ones that don't. Give your team the tools to learn,
|
||||
grow, and lead.
|
||||
</p>
|
||||
</div>
|
||||
<Button href="/signup" target="_blank">Start investing in your team</Button>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<section
|
||||
class="flex w-full max-w-7xl flex-col justify-center gap-x-6 gap-y-8 px-8 py-16 md:px-16 lg:flex-row lg:items-center lg:justify-between lg:px-28 lg:py-24"
|
||||
>
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:w-[35%]">
|
||||
<Badge class="bg-white" variant="outline">Why it matters</Badge>
|
||||
|
||||
<div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
|
||||
<h1 class="text-3xl">Great teams are built, not hired</h1>
|
||||
<p class="text-lg leading-8 text-gray-500">
|
||||
The companies people want to work for are the ones that help them grow. Training is how you get there.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex w-full flex-col items-center justify-start gap-6 lg:w-[60%] lg:min-w-[450px] lg:flex-row lg:flex-wrap"
|
||||
>
|
||||
{#each benefitDetails as benefits}
|
||||
<div
|
||||
class="flex w-full min-w-[220px] grow flex-col gap-y-6 rounded-2xl border border-[#D9E0F5] p-4 md:p-6 lg:w-[47%]"
|
||||
>
|
||||
<img
|
||||
class="h-[48px] w-[48px]"
|
||||
src="https://assets.cdn.clsrio.com/www/employee-training/{benefits.icon}"
|
||||
alt={benefits.title}
|
||||
/>
|
||||
|
||||
<div class="align-start flex w-full flex-col justify-start gap-y-2">
|
||||
<h1 class="text-lg">{benefits.title}</h1>
|
||||
<p class="font-[#656565] text-base leading-8 font-light text-gray-500">
|
||||
{benefits.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="flex w-full flex-col items-center justify-start gap-y-16 bg-[#F1F6FF] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
|
||||
>
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<Badge class="bg-white px-4! py-2!" variant="outline">How it works</Badge>
|
||||
|
||||
<div
|
||||
class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
|
||||
>
|
||||
<h1 class="text-3xl">Everything you need to grow your team</h1>
|
||||
<p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
|
||||
From onboarding to upskilling, ClassroomIO gives you the tools to build a culture of continuous learning.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full max-w-7xl flex-col items-center justify-start gap-16 p-2 lg:gap-y-24">
|
||||
{#each featureDetails as feature, i}
|
||||
<div
|
||||
class="flex w-full lg:w-[70%] lg:flex-row {i % 2 !== 0
|
||||
? 'lg:flex-row-reverse'
|
||||
: ''} flex-col items-start justify-between gap-10 lg:items-center"
|
||||
>
|
||||
<div class="flex w-fit max-w-sm flex-col items-start justify-start gap-y-3 lg:w-[40%] lg:gap-y-6">
|
||||
<img
|
||||
class="h-[48px] w-[48px]"
|
||||
src="https://assets.cdn.clsrio.com/www/employee-training/{feature.icon}"
|
||||
alt={feature.title}
|
||||
/>
|
||||
<div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
|
||||
<h1 class="text-2xl">{feature.title}</h1>
|
||||
<p class="text-lg leading-8 text-gray-500">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="outline" data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">
|
||||
Book a Demo
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img
|
||||
class="w-full lg:max-w-[380px]"
|
||||
src="https://assets.cdn.clsrio.com/www/employee-training/{feature.img}"
|
||||
alt={feature.title}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="flex w-full flex-col items-center justify-start gap-y-16 bg-[#040F2D] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
|
||||
>
|
||||
<div
|
||||
class="flex w-full max-w-7xl flex-col-reverse items-start justify-start gap-y-8 lg:flex-row-reverse lg:items-center lg:justify-between"
|
||||
>
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:w-[40%]">
|
||||
<div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
|
||||
<h1 class="text-2xl text-white">Need something specific for your team?</h1>
|
||||
<p class="text-base leading-8 text-[#DEDEDE]">
|
||||
We work with companies to build custom training solutions. Tell us what your team needs and we'll make it
|
||||
happen.
|
||||
</p>
|
||||
</div>
|
||||
<Button href="/demo" target="_blank" variant="outline">Talk to sales</Button>
|
||||
</div>
|
||||
|
||||
<img
|
||||
class="size-96"
|
||||
src="https://assets.cdn.clsrio.com/www/employee-training/bro.svg"
|
||||
alt="male and female in an office"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PageSignupCTA
|
||||
header="The best time to invest in your team is now"
|
||||
subText="Start for free. No credit card required."
|
||||
btnLabel="Get started"
|
||||
link="/signup"
|
||||
demo={false}
|
||||
/>
|
||||
</section>
|
||||
@@ -0,0 +1,366 @@
|
||||
<script>
|
||||
import {
|
||||
EmbedCodePreview,
|
||||
FeatureGrid,
|
||||
HeroSubtitle,
|
||||
ImageDemoSection,
|
||||
LanguageReel,
|
||||
PageHeader,
|
||||
PageSignupCTA,
|
||||
TrustBand,
|
||||
WorkflowSteps
|
||||
} from '$lib/components';
|
||||
import { Badge } from '@cio/ui/base/badge';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { Meteors } from '@cio/ui/custom/animation/meteors';
|
||||
import BadgeCheck from '@lucide/svelte/icons/badge-check';
|
||||
import BookOpenCheck from '@lucide/svelte/icons/book-open-check';
|
||||
import Boxes from '@lucide/svelte/icons/boxes';
|
||||
import ChartNoAxesCombined from '@lucide/svelte/icons/chart-no-axes-combined';
|
||||
import Code2 from '@lucide/svelte/icons/code-2';
|
||||
import Globe from '@lucide/svelte/icons/globe';
|
||||
import Languages from '@lucide/svelte/icons/languages';
|
||||
import Layers from '@lucide/svelte/icons/layers';
|
||||
import MessageSquareText from '@lucide/svelte/icons/message-square-text';
|
||||
import Share2 from '@lucide/svelte/icons/share-2';
|
||||
import Sparkles from '@lucide/svelte/icons/sparkles';
|
||||
import Trophy from '@lucide/svelte/icons/trophy';
|
||||
|
||||
const steps = [
|
||||
{
|
||||
title: 'Spin up a partner workspace',
|
||||
description:
|
||||
'Add a separate partner workspace under your existing account. Its own brand, its own domain, its own catalog. Customers never see partner content, and partners never see customer content.'
|
||||
},
|
||||
{
|
||||
title: 'Package your product knowledge',
|
||||
description:
|
||||
'Bring in your docs, sales playbooks, release notes, demo videos, and enablement Looms. The AI assistant turns them into a structured course you can edit.'
|
||||
},
|
||||
{
|
||||
title: 'Design certification paths',
|
||||
description:
|
||||
'Group courses into Programs for onboarding, sales, implementation, and advanced topics, with required exercises and a final exam.'
|
||||
},
|
||||
{
|
||||
title: 'Track readiness and certify',
|
||||
description: 'See progress, marks, submissions, and issued certificates across partner orgs and individual reps.'
|
||||
}
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
Icon: Layers,
|
||||
title: 'Programs and learning paths',
|
||||
description: 'Bundle multiple courses into a certification journey with a required order and shared progress.'
|
||||
},
|
||||
{
|
||||
Icon: BadgeCheck,
|
||||
title: 'Branded partner certificates',
|
||||
description:
|
||||
'Issue PDF and PNG certificates with your logo, configurable IDs, and a public verification URL partners can share.'
|
||||
},
|
||||
{
|
||||
Icon: Globe,
|
||||
title: 'Custom domain and branded portal',
|
||||
description:
|
||||
'Run your partner academy on your own domain via Cloudflare. Theme, logo, landing pages, and SEO are all yours.'
|
||||
},
|
||||
{
|
||||
Icon: Share2,
|
||||
title: 'Public pages and embeds',
|
||||
description:
|
||||
'Publish course landing pages, or embed a learning widget on your partner portal, intranet, or marketing site.'
|
||||
},
|
||||
{
|
||||
Icon: Languages,
|
||||
title: 'Multilingual content',
|
||||
description:
|
||||
'Deliver lessons in 10 languages. Author once and publish per-language variants for English, Spanish, Portuguese, German, French, Hindi, and more.'
|
||||
},
|
||||
{
|
||||
Icon: ChartNoAxesCombined,
|
||||
title: 'Performance analytics',
|
||||
description:
|
||||
'Drill into completion, time-to-certify, exercise marks, and submission quality, by partner, cohort, or geography.'
|
||||
},
|
||||
{
|
||||
Icon: MessageSquareText,
|
||||
title: 'AI lesson assistant',
|
||||
description:
|
||||
'Each partner gets a Claude-powered tutor inside the course that can summarise lessons and answer product questions.'
|
||||
},
|
||||
{
|
||||
Icon: Boxes,
|
||||
title: 'Cohort enrolment and invites',
|
||||
description:
|
||||
'Import full partner orgs from CSV, assign by role, gate paid programs, and track who has accepted their invite.'
|
||||
}
|
||||
];
|
||||
|
||||
const langs = [
|
||||
{
|
||||
code: 'en',
|
||||
native: 'English',
|
||||
en: 'English',
|
||||
sample: 'Implementation Checklist',
|
||||
tone: 'from-blue-100 to-blue-200',
|
||||
ring: 'ring-blue-200'
|
||||
},
|
||||
{
|
||||
code: 'es',
|
||||
native: 'Español',
|
||||
en: 'Spanish',
|
||||
sample: 'Lista de implementación',
|
||||
tone: 'from-amber-100 to-rose-200',
|
||||
ring: 'ring-amber-200'
|
||||
},
|
||||
{
|
||||
code: 'pt',
|
||||
native: 'Português',
|
||||
en: 'Portuguese',
|
||||
sample: 'Lista de implementação',
|
||||
tone: 'from-emerald-100 to-teal-200',
|
||||
ring: 'ring-emerald-200'
|
||||
},
|
||||
{
|
||||
code: 'de',
|
||||
native: 'Deutsch',
|
||||
en: 'German',
|
||||
sample: 'Implementierungs-Checkliste',
|
||||
tone: 'from-slate-100 to-slate-200',
|
||||
ring: 'ring-slate-200'
|
||||
},
|
||||
{
|
||||
code: 'fr',
|
||||
native: 'Français',
|
||||
en: 'French',
|
||||
sample: 'Liste de mise en œuvre',
|
||||
tone: 'from-blue-100 to-indigo-200',
|
||||
ring: 'ring-indigo-200'
|
||||
},
|
||||
{
|
||||
code: 'hi',
|
||||
native: 'हिन्दी',
|
||||
en: 'Hindi',
|
||||
sample: 'कार्यान्वयन चेकलिस्ट',
|
||||
tone: 'from-orange-100 to-rose-200',
|
||||
ring: 'ring-orange-200'
|
||||
},
|
||||
{
|
||||
code: 'vi',
|
||||
native: 'Tiếng Việt',
|
||||
en: 'Vietnamese',
|
||||
sample: 'Danh sách triển khai',
|
||||
tone: 'from-red-100 to-yellow-200',
|
||||
ring: 'ring-red-200'
|
||||
},
|
||||
{
|
||||
code: 'ru',
|
||||
native: 'Русский',
|
||||
en: 'Russian',
|
||||
sample: 'Контрольный список',
|
||||
tone: 'from-sky-100 to-blue-200',
|
||||
ring: 'ring-sky-200'
|
||||
},
|
||||
{
|
||||
code: 'pl',
|
||||
native: 'Polski',
|
||||
en: 'Polish',
|
||||
sample: 'Lista wdrożeniowa',
|
||||
tone: 'from-rose-100 to-red-200',
|
||||
ring: 'ring-rose-200'
|
||||
},
|
||||
{
|
||||
code: 'da',
|
||||
native: 'Dansk',
|
||||
en: 'Danish',
|
||||
sample: 'Implementeringstjekliste',
|
||||
tone: 'from-red-100 to-rose-200',
|
||||
ring: 'ring-red-200'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Partner Training | ClassroomIO</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Run a partner academy alongside your customer one. Separate brand, separate domain, same account. Certify resellers, agencies, and integrators with programs, certificates, and analytics."
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<section class="bg-white">
|
||||
<PageHeader className="px-6 lg:px-12">
|
||||
<div class="mx-auto flex max-w-[820px] flex-col items-center text-center">
|
||||
<Badge variant="outline" class="mb-6 gap-2! bg-white px-3.5! py-1.5!">
|
||||
<Trophy size={14} class="text-blue-700" />
|
||||
Partner Training
|
||||
</Badge>
|
||||
<h1 class="text-[clamp(2rem,3.4vw,2.8rem)] leading-[1.1] font-medium tracking-tight text-gray-950">
|
||||
Train the partners
|
||||
<em class="text-blue-700 not-italic">who sell your product.</em>
|
||||
</h1>
|
||||
<HeroSubtitle class="mx-auto">
|
||||
Run a partner workspace alongside your customer academy. Separate brand, separate domain, same account. Certify
|
||||
resellers, agencies, and integrators with programs and assessments that stay in sync as your product changes.
|
||||
</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>
|
||||
<Button href="/signup" variant="outline">Start free</Button>
|
||||
</div>
|
||||
<div class="mt-7 flex flex-wrap items-center justify-center gap-5 text-xs text-gray-500">
|
||||
<span class="flex items-center gap-1.5"><span class="font-medium text-blue-700">✓</span> Custom domain</span>
|
||||
<span class="flex items-center gap-1.5"
|
||||
><span class="font-medium text-blue-700">✓</span> Separate workspace</span
|
||||
>
|
||||
<span class="flex items-center gap-1.5"><span class="font-medium text-blue-700">✓</span> Embeddable</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto mt-14 w-full max-w-[1100px]">
|
||||
<div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
|
||||
<img
|
||||
src="/latest-courses.jpeg"
|
||||
alt="Partner academy — latest courses, program structure, and learner state"
|
||||
class="block h-auto w-full"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<TrustBand
|
||||
caption="For partner programs at"
|
||||
items={[
|
||||
'SaaS platforms',
|
||||
'Fintech',
|
||||
'Developer tools',
|
||||
'Solution agencies',
|
||||
'Franchise networks',
|
||||
'Channel programs'
|
||||
]}
|
||||
/>
|
||||
|
||||
<WorkflowSteps
|
||||
eyebrow="Partner enablement"
|
||||
title="Give every partner the same starting point."
|
||||
{steps}
|
||||
bgClass="bg-gray-50"
|
||||
/>
|
||||
|
||||
<ImageDemoSection
|
||||
eyebrow="Public course pages"
|
||||
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="/public-courses.jpeg"
|
||||
imageAlt="Public partner course pages — open courses up front, sign-up gates the rest"
|
||||
/>
|
||||
|
||||
<FeatureGrid
|
||||
eyebrow="What you can run"
|
||||
title="Certification programs for the people who represent your product."
|
||||
{features}
|
||||
/>
|
||||
|
||||
<EmbedCodePreview
|
||||
eyebrow="Embed anywhere"
|
||||
title="Drop a learning widget into any site."
|
||||
description="Generate a published widget payload for any course, paste the snippet into your partner portal, intranet, or marketing page. Progress, marks, and certificates sync back to ClassroomIO automatically."
|
||||
fileName="partner-portal.html"
|
||||
codeLines={[
|
||||
'<span class="text-slate-500"><!-- in your partner portal --></span>',
|
||||
'<span class="text-pink-400"><script</span> <span class="text-sky-300">src</span><span class="text-slate-500">=</span><span class="text-emerald-300">"https://cdn.classroomio.com/widget.js"</span><span class="text-pink-400">></script></span>',
|
||||
'',
|
||||
'<span class="text-pink-400"><div</span> <span class="text-sky-300">data-cio-widget</span><span class="text-slate-500">=</span><span class="text-emerald-300">"partner-onboarding"</span>',
|
||||
' <span class="text-sky-300">data-org</span><span class="text-slate-500">=</span><span class="text-emerald-300">"yourcompany"</span>',
|
||||
' <span class="text-sky-300">data-theme</span><span class="text-slate-500">=</span><span class="text-emerald-300">"light"</span>',
|
||||
' <span class="text-sky-300">data-lang</span><span class="text-slate-500">=</span><span class="text-emerald-300">"auto"</span><span class="text-pink-400">></span>',
|
||||
'<span class="text-pink-400"></div></span>'
|
||||
]}
|
||||
statusBar="connected · org: yourcompany · widget: partner-onboarding"
|
||||
previewUrl="partners.yourcompany.com / academy"
|
||||
previewImageSrc="/embeddable-widget.jpeg"
|
||||
previewAlt="Course widget embedded inside a partner portal"
|
||||
capabilities={[
|
||||
{ label: 'One script tag', sub: 'Drop-in install, no SDK required' },
|
||||
{ label: 'Select from multiple themes', sub: 'Light, dark, and brand-tuned looks bundled in' },
|
||||
{ label: 'Sync back to CIO', sub: 'Progress, marks, and certs round-trip' }
|
||||
]}
|
||||
/>
|
||||
|
||||
<LanguageReel
|
||||
{langs}
|
||||
eyebrow="Global partners"
|
||||
headlineLead="Train your network"
|
||||
headlineAccent="in their language."
|
||||
description="Author once, publish in ten. Each lesson supports per-language variants. Learners pick the language they read in, certificates render in that language, and analytics roll up across regions."
|
||||
moduleLabel="Module 2 · Implementation"
|
||||
footerLabel="8 lessons"
|
||||
/>
|
||||
|
||||
<!-- Analytics split -->
|
||||
<section class="px-6 py-12 lg:px-12 lg:py-16">
|
||||
<div class="mx-auto grid max-w-[1100px] grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-20">
|
||||
<div>
|
||||
<div class="mb-2 text-xs font-medium tracking-widest text-blue-700 uppercase">Readiness analytics</div>
|
||||
<h2 class="text-[clamp(1.75rem,2.6vw,2.2rem)] leading-[1.15] font-medium tracking-tight">
|
||||
See which partners are ready to sell, and which need help.
|
||||
</h2>
|
||||
<p class="mt-5 text-base leading-relaxed text-gray-500">
|
||||
Drill into completion rates, time-to-certify, exercise marks, and submission quality. Filter by partner org,
|
||||
cohort, geography, or program. Export anything to CSV.
|
||||
</p>
|
||||
<ul class="mt-6 space-y-3 text-sm text-gray-700">
|
||||
<li class="flex items-start gap-2">
|
||||
<BookOpenCheck size={16} class="mt-0.5 text-blue-700" /> Course-level and program-level dashboards
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<ChartNoAxesCombined size={16} class="mt-0.5 text-blue-700" /> Per-learner gradebook with manual override
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<MessageSquareText size={16} class="mt-0.5 text-blue-700" /> Newsfeed activity and Q&A participation
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- IMAGE STUB: partner-analytics-dashboard.png -->
|
||||
<div class="relative overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl/5">
|
||||
<div class="aspect-[4/3] w-full bg-gradient-to-br from-blue-50 via-white to-gray-50 p-6">
|
||||
<div class="grid h-full grid-cols-2 gap-3">
|
||||
<div class="rounded-xl bg-white p-3 ring-1 ring-gray-100">
|
||||
<p class="text-[10px] text-gray-500">Time to certify</p>
|
||||
<p class="mt-1 text-xl font-medium text-gray-950">11.2d</p>
|
||||
<p class="text-[10px] text-green-600">↓ 2.4d</p>
|
||||
</div>
|
||||
<div class="rounded-xl bg-white p-3 ring-1 ring-gray-100">
|
||||
<p class="text-[10px] text-gray-500">Pass rate</p>
|
||||
<p class="mt-1 text-xl font-medium text-blue-700">87%</p>
|
||||
</div>
|
||||
<div class="col-span-2 rounded-xl bg-white p-3 ring-1 ring-gray-100">
|
||||
<p class="mb-2 text-[10px] text-gray-500">Completion by partner org</p>
|
||||
<div class="space-y-1.5">
|
||||
{#each [{ n: 'Northwind', v: 92 }, { n: 'Acme Resellers', v: 78 }, { n: 'Globex Implements', v: 64 }] as row}
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-24 text-[10px] text-gray-600">{row.n}</span>
|
||||
<div class="h-1.5 flex-1 overflow-hidden rounded-full bg-gray-100">
|
||||
<div class="h-full rounded-full bg-blue-700" style="width: {row.v}%"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-medium text-gray-700">{row.v}%</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="pb-3 text-center text-xs text-gray-400">Replace with /static/partner-analytics-dashboard.png</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Certify your next partner cohort."
|
||||
subText="Turn your product knowledge into a repeatable program. Courses, certificates, branded portal, and analytics in one place."
|
||||
btnLabel="Book a Demo"
|
||||
/>
|
||||
</section>
|
||||
@@ -5,7 +5,6 @@
|
||||
import extend from 'just-extend';
|
||||
import { onMount } from 'svelte';
|
||||
import { MetaTags } from 'svelte-meta-tags';
|
||||
import PageTransition from './transition.svelte';
|
||||
|
||||
import '../app.css';
|
||||
|
||||
@@ -25,13 +24,11 @@
|
||||
<div class="overflow-hidden bg-white">
|
||||
<Navigation stars={data.stars} />
|
||||
|
||||
<PageTransition url={data.url}>
|
||||
{#if page.status === 404}
|
||||
<NotFound className="mt-5" />
|
||||
{:else}
|
||||
{@render children?.()}
|
||||
{/if}
|
||||
</PageTransition>
|
||||
{#if page.status === 404}
|
||||
<NotFound className="mt-5" />
|
||||
{:else}
|
||||
{@render children?.()}
|
||||
{/if}
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
@@ -1,31 +1,42 @@
|
||||
<script>
|
||||
import {
|
||||
Hero,
|
||||
CertSection,
|
||||
RoiBand,
|
||||
AiBuildsSection,
|
||||
FeaturesSection,
|
||||
AiSection,
|
||||
LearnerSection,
|
||||
QuestionTypes,
|
||||
AutomateSection,
|
||||
DeploySection,
|
||||
EnterpriseSection,
|
||||
AiTutorSection,
|
||||
AutomationBand,
|
||||
MultiAcademySection,
|
||||
Testimonial,
|
||||
PageSignupCTA
|
||||
} from '$lib/components';
|
||||
</script>
|
||||
|
||||
<Hero />
|
||||
<AiSection />
|
||||
|
||||
<RoiBand />
|
||||
|
||||
<AiBuildsSection />
|
||||
|
||||
<FeaturesSection />
|
||||
<CertSection />
|
||||
<LearnerSection />
|
||||
<QuestionTypes />
|
||||
<!-- <AutomateSection /> -->
|
||||
<!-- <DeploySection /> -->
|
||||
<EnterpriseSection />
|
||||
|
||||
<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."
|
||||
ctaLabel="See the academy"
|
||||
ctaHref="/customer-education"
|
||||
vimeoVideoId="1192910311"
|
||||
/>
|
||||
|
||||
<AutomationBand />
|
||||
|
||||
<MultiAcademySection />
|
||||
|
||||
<Testimonial />
|
||||
|
||||
<PageSignupCTA
|
||||
header="Ready to replace Moodle with something you'll actually enjoy?"
|
||||
subText="Get up and running in an afternoon. No vendor calls, no implementation fees, no surprises."
|
||||
header="Stop forwarding help articles."
|
||||
subText="Launch a branded academy on your domain in days."
|
||||
btnLabel="Book a Demo"
|
||||
/>
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
import { PUBLIC_SERVER_URL } from '$env/static/public';
|
||||
|
||||
const sendEmail = (sFetch: typeof fetch) => async (subject: string, content: string, replyTo?: string) => {
|
||||
try {
|
||||
const response = await sFetch(`${PUBLIC_SERVER_URL}/sendEmail`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify([
|
||||
{
|
||||
from: `"ClassroomIO Support" <notify@mail.classroomio.com>`,
|
||||
to: 'help@classroomio.com',
|
||||
subject,
|
||||
content,
|
||||
replyTo
|
||||
}
|
||||
])
|
||||
});
|
||||
|
||||
const responseData = await response.json();
|
||||
console.log('Emails sent successfully:', responseData);
|
||||
|
||||
return 'sent';
|
||||
} catch (error) {
|
||||
console.error('Error sending email', error);
|
||||
return 'failed';
|
||||
}
|
||||
};
|
||||
|
||||
export async function POST({ request, fetch }) {
|
||||
try {
|
||||
const { title, description, replyTo } = await request.json();
|
||||
console.log(title, description, replyTo);
|
||||
const result = await sendEmail(fetch)(title, description, replyTo);
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
message: 'Issue created successfully',
|
||||
issue: result
|
||||
}),
|
||||
{
|
||||
status: 201,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}
|
||||
);
|
||||
} catch (error) {
|
||||
console.log('errors from api', error);
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
message: 'Failed to create issue',
|
||||
error: (error as Error)?.message
|
||||
}),
|
||||
{
|
||||
status: 500,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
<script lang="ts">
|
||||
import { CodeBlock, HeroSubtitle, McpServerSection, PageHeader, PageSignupCTA } from '$lib/components';
|
||||
import { Badge } from '@cio/ui/base/badge';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import Code2 from '@lucide/svelte/icons/code-2';
|
||||
import Github from '@lucide/svelte/icons/github';
|
||||
|
||||
const apiCurl = [
|
||||
'<span class="text-slate-500"># Enroll a learner in a course</span>',
|
||||
'<span class="text-pink-400">curl</span> <span class="text-emerald-300">"https://api.classroomio.com/v1/enrollments"</span> \\',
|
||||
' <span class="text-sky-300">-H</span> <span class="text-emerald-300">"Authorization: Bearer $CIO_API_KEY"</span> \\',
|
||||
' <span class="text-sky-300">-H</span> <span class="text-emerald-300">"Content-Type: application/json"</span> \\',
|
||||
' <span class="text-sky-300">-d</span> <span class="text-emerald-300">\'{ "courseId": "crs_…", "userId": "usr_…" }\'</span>'
|
||||
];
|
||||
|
||||
const webhookSample = [
|
||||
'<span class="text-slate-500">// POST https://yourapp.com/webhooks/cio</span>',
|
||||
'<span class="text-slate-500">{</span>',
|
||||
' <span class="text-sky-300">"event"</span><span class="text-slate-500">:</span> <span class="text-emerald-300">"certificate.issued"</span><span class="text-slate-500">,</span>',
|
||||
' <span class="text-sky-300">"orgId"</span><span class="text-slate-500">:</span> <span class="text-emerald-300">"org_acme"</span><span class="text-slate-500">,</span>',
|
||||
' <span class="text-sky-300">"data"</span><span class="text-slate-500">: {</span>',
|
||||
' <span class="text-sky-300">"learnerId"</span><span class="text-slate-500">:</span> <span class="text-emerald-300">"usr_…"</span><span class="text-slate-500">,</span>',
|
||||
' <span class="text-sky-300">"courseId"</span><span class="text-slate-500">:</span> <span class="text-emerald-300">"crs_…"</span><span class="text-slate-500">,</span>',
|
||||
' <span class="text-sky-300">"certificateUrl"</span><span class="text-slate-500">:</span> <span class="text-emerald-300">"https://learn.acme.com/v/CIO-…"</span>',
|
||||
' <span class="text-slate-500">},</span>',
|
||||
' <span class="text-sky-300">"createdAt"</span><span class="text-slate-500">:</span> <span class="text-emerald-300">"2026-05-15T12:04:18Z"</span>',
|
||||
'<span class="text-slate-500">}</span>'
|
||||
];
|
||||
|
||||
const events = [
|
||||
'user.created',
|
||||
'enrollment.created',
|
||||
'enrollment.completed',
|
||||
'lesson.completed',
|
||||
'exercise.submitted',
|
||||
'exercise.graded',
|
||||
'certificate.issued',
|
||||
'program.completed',
|
||||
'course.published',
|
||||
'course.unpublished'
|
||||
];
|
||||
</script>
|
||||
|
||||
<section class="bg-white">
|
||||
<PageHeader className="px-6 lg:px-12">
|
||||
<div class="mx-auto max-w-[1100px]">
|
||||
<Badge variant="outline" class="mb-6 gap-2! bg-white px-3.5! py-1.5!">
|
||||
<Code2 size={14} class="text-blue-700" />
|
||||
Developer reference
|
||||
</Badge>
|
||||
<h1 class="max-w-[820px] text-[clamp(2rem,3.4vw,2.8rem)] leading-[1.1] font-medium tracking-tight text-gray-950">
|
||||
API, Webhooks, MCP.
|
||||
<em class="text-blue-700 not-italic">No integration tax.</em>
|
||||
</h1>
|
||||
<HeroSubtitle>
|
||||
ClassroomIO ships with a public REST API, signed Webhooks, and an MCP server. No closed marketplace, no "premium
|
||||
connector" plans. Build the integration that fits your stack.
|
||||
</HeroSubtitle>
|
||||
<div class="mt-8 flex flex-wrap items-center gap-3">
|
||||
<Button href="https://docs.classroomio.com/api">Read the API docs</Button>
|
||||
<Button href="/github" variant="outline">Star on GitHub</Button>
|
||||
</div>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<!-- REST API -->
|
||||
<section class="px-6 py-12 lg:px-12 lg:py-16">
|
||||
<div class="mx-auto grid max-w-[1100px] grid-cols-1 items-center gap-12 lg:grid-cols-[1fr_1.1fr] lg:gap-20">
|
||||
<div>
|
||||
<div class="mb-2 text-xs font-medium tracking-widest text-blue-700 uppercase">REST API</div>
|
||||
<h2 class="text-[clamp(1.75rem,2.6vw,2.2rem)] leading-[1.15] font-medium tracking-tight">
|
||||
Everything in the LMS is reachable over HTTP.
|
||||
</h2>
|
||||
<p class="mt-5 text-base leading-relaxed text-gray-500">
|
||||
Bearer-token auth, JSON in, JSON out. Provision learners from your CRM, pull completion data into your
|
||||
warehouse, or build your own admin tooling on the same surface the dashboard uses.
|
||||
</p>
|
||||
|
||||
<ul class="mt-6 space-y-3 text-sm text-gray-700">
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="mt-0.5 text-blue-700">→</span> Orgs, users, courses, lessons, exercises, submissions, certificates
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="mt-0.5 text-blue-700">→</span> Per-org API keys, scoped permissions
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="mt-0.5 text-blue-700">→</span> Cursor-based pagination, rate limits documented
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="mt-0.5 text-blue-700">→</span> Same endpoints whether you self-host or run on our cloud
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<CodeBlock
|
||||
fileName="enrol-a-learner.sh"
|
||||
lang="bash"
|
||||
codeLines={apiCurl}
|
||||
statusBar="POST · application/json · authenticated"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Webhooks -->
|
||||
<section class="bg-gray-50 px-6 py-12 lg:px-12 lg:py-16">
|
||||
<div class="mx-auto grid max-w-[1100px] grid-cols-1 items-center gap-12 lg:grid-cols-[1.1fr_1fr] lg:gap-20">
|
||||
<CodeBlock
|
||||
fileName="webhook-payload.json"
|
||||
lang="JSON"
|
||||
codeLines={webhookSample}
|
||||
statusBar="signed with HMAC-SHA256 · retries up to 24h"
|
||||
/>
|
||||
<div>
|
||||
<div class="mb-2 text-xs font-medium tracking-widest text-blue-700 uppercase">Webhooks</div>
|
||||
<h2 class="text-[clamp(1.75rem,2.6vw,2.2rem)] leading-[1.15] font-medium tracking-tight">
|
||||
Subscribe to the events you care about, instead of polling.
|
||||
</h2>
|
||||
<p class="mt-5 text-base leading-relaxed text-gray-500">
|
||||
Every important state change posts to your endpoint, signed with your shared secret. We retry with exponential
|
||||
backoff, and you can replay any event from the dashboard.
|
||||
</p>
|
||||
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
{#each events as event}
|
||||
<span class="rounded-full border border-gray-200 bg-white px-3 py-1 font-mono text-xs text-blue-700">
|
||||
{event}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<McpServerSection />
|
||||
|
||||
<!-- Self-host -->
|
||||
<section class="px-6 py-12 lg:px-12 lg:py-16">
|
||||
<div class="mx-auto grid max-w-[1100px] grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-20">
|
||||
<div>
|
||||
<div class="mb-2 text-xs font-medium tracking-widest text-blue-700 uppercase">Self-host</div>
|
||||
<h2 class="text-[clamp(1.75rem,2.6vw,2.2rem)] leading-[1.15] font-medium tracking-tight">
|
||||
Or run the whole thing in your own VPC.
|
||||
</h2>
|
||||
<p class="mt-5 text-base leading-relaxed text-gray-500">
|
||||
ClassroomIO is open source on GitHub. You can self-host the dashboard, the API, the AI assistant, and the MCP
|
||||
server, and bring your own AI keys. It's the same product with the same API surface.
|
||||
</p>
|
||||
|
||||
<div class="mt-8 flex flex-wrap items-center gap-3">
|
||||
<a
|
||||
href="https://docs.classroomio.com/self-hosting"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-2 rounded-lg bg-gray-950 px-5 py-2.5 text-sm font-medium text-white no-underline transition-all hover:-translate-y-0.5 hover:bg-blue-700"
|
||||
>
|
||||
Self-hosting guide →
|
||||
</a>
|
||||
<a
|
||||
href="/github"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-950 no-underline transition-all hover:border-gray-950"
|
||||
>
|
||||
<Github size={16} />
|
||||
View the source
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-gray-200 bg-gray-50 p-6">
|
||||
<p class="text-xs font-medium tracking-widest text-gray-500 uppercase">Stack</p>
|
||||
<ul class="mt-4 space-y-3 text-sm text-gray-700">
|
||||
<li class="flex items-start gap-3">
|
||||
<span
|
||||
class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-blue-50 text-[10px] font-medium text-blue-700"
|
||||
>API</span
|
||||
>
|
||||
Hono on Node, Drizzle, Postgres
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span
|
||||
class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-blue-50 text-[10px] font-medium text-blue-700"
|
||||
>UI</span
|
||||
>
|
||||
SvelteKit 2, Svelte 5, Tailwind v4
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span
|
||||
class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-blue-50 text-[10px] font-medium text-blue-700"
|
||||
>AI</span
|
||||
>
|
||||
Bring your own keys for OpenAI, Anthropic, Google Gemini, or Moonshot
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span
|
||||
class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-blue-50 text-[10px] font-medium text-blue-700"
|
||||
>MCP</span
|
||||
>
|
||||
Open-source server, <span class="font-mono text-xs">@classroomio/mcp</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Programmable from day one."
|
||||
subText="API, Webhooks, and an MCP server in the box. Self-host it or use the hosted version. Same surface either way."
|
||||
btnLabel="Read the docs"
|
||||
link="https://docs.classroomio.com/api"
|
||||
demo={false}
|
||||
/>
|
||||
</section>
|
||||
@@ -0,0 +1,9 @@
|
||||
export const prerender = true;
|
||||
|
||||
export const load = () => ({
|
||||
pageMetaTags: {
|
||||
title: 'Open source LMS API, Webhooks, and MCP server | ClassroomIO',
|
||||
description:
|
||||
'Automate course authoring and learner provisioning with the ClassroomIO REST API, Webhooks, and MCP server. Open source, self-hostable, no integration tax.'
|
||||
}
|
||||
});
|
||||
@@ -29,9 +29,9 @@
|
||||
</div>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Ready To Scale Your Training Efforts?"
|
||||
subText="It's free to sign up and start getting value out of the product."
|
||||
btnLabel="Sign me up"
|
||||
header="Turn what your team already knows into training."
|
||||
subText="ClassroomIO helps you convert docs, policies, videos, and internal knowledge into courses, quizzes, certificates, and completion evidence."
|
||||
btnLabel="Start for free"
|
||||
link="/signup"
|
||||
demo={false}
|
||||
/>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export const prerender = true;
|
||||
@@ -1,101 +0,0 @@
|
||||
<script lang="ts">
|
||||
import ArrowUpRight from '@lucide/svelte/icons/arrow-up-right';
|
||||
|
||||
import { FORM_TYPE } from '$lib/utils/types';
|
||||
import type { FORM_TYPE_KEY } from '$lib/utils/types';
|
||||
|
||||
import HelpForm from '$lib/features/contact/help-form.svelte';
|
||||
import { PageHeader } from '$lib/components';
|
||||
import FeedbackForm from '$lib/features/contact/feedback-form.svelte';
|
||||
|
||||
let currentForm: FORM_TYPE_KEY = $state();
|
||||
|
||||
const formList = [
|
||||
{
|
||||
id: FORM_TYPE.BUG,
|
||||
title: '🐜 I want to report a bug',
|
||||
to: 'https://github.com/classroomio/classroomio/issues/new?assignees=&labels=bug&projects=&template=bug-report.yml'
|
||||
},
|
||||
{
|
||||
id: FORM_TYPE.HELP,
|
||||
title: '🙋♂️ I need help'
|
||||
},
|
||||
{
|
||||
id: FORM_TYPE.FEATURE,
|
||||
title: '📮 I want to request a feature',
|
||||
to: 'https://github.com/classroomio/classroomio/issues/new?assignees=&labels=&projects=&template=feature-request.yml'
|
||||
},
|
||||
{
|
||||
id: FORM_TYPE.FEEDBACK,
|
||||
title: '💭 I have feedback'
|
||||
}
|
||||
];
|
||||
|
||||
const onChange = (form: FORM_TYPE_KEY, to?: string) => {
|
||||
currentForm = form;
|
||||
|
||||
if (to) {
|
||||
window.open(to, '_blank');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Contact us | ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<section>
|
||||
<PageHeader className="flex flex-col items-center justify-center bg-[#F5F8FE] text-center">
|
||||
<div class="mb-2 ml-[5%] flex w-full items-center justify-center lg:ml-0">
|
||||
<span
|
||||
style="color: rgb(75, 85, 99);"
|
||||
class="rounded-full border-2 border-[#C2D2FF] bg-[#DCE5FF] px-4 py-1 text-sm font-medium text-blue-700"
|
||||
>
|
||||
Contact Us
|
||||
</span>
|
||||
</div>
|
||||
<h1 class="mx-auto flex flex-col items-center text-4xl text-slate-900 md:text-6xl">
|
||||
<span>Get in touch with <span class="text-blue-700">Us</span></span>
|
||||
</h1>
|
||||
<p class="mt-10 w-[90%] max-w-3xl text-center text-lg font-normal text-slate-700 md:w-[60%] lg:mt-7">
|
||||
Report any bugs you encounter, request new features you'd like to see, or ask any questions you have about
|
||||
ClassroomIO
|
||||
</p>
|
||||
</PageHeader>
|
||||
|
||||
<div class="mx-auto my-20">
|
||||
<!-- Content here -->
|
||||
<div class="mx-auto grid w-[90%] grid-cols-1 place-items-center gap-10 md:grid-cols-2 lg:w-[60%]">
|
||||
{#each formList as list}
|
||||
<button
|
||||
onclick={() => onChange(list.id, list.to)}
|
||||
class="w-full rounded-md border-[1.5px] p-3 text-start {currentForm === list.id
|
||||
? `border-[#0233BD]`
|
||||
: `border-gray-200`} flex items-center justify-between"
|
||||
>
|
||||
<p class="text-lg font-normal text-slate-700">{list.title}</p>
|
||||
{#if list.to}
|
||||
<ArrowUpRight size={16} />
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if currentForm === FORM_TYPE[currentForm]}
|
||||
<div class="mx-auto w-[90%] px-5 lg:w-[60%]">
|
||||
{#if currentForm === FORM_TYPE.HELP}
|
||||
<HelpForm />
|
||||
{:else if currentForm === FORM_TYPE.FEEDBACK}
|
||||
<FeedbackForm />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<!-- <PageSignupCTA
|
||||
header="Scale your Teaching Business in Minutes"
|
||||
subText="Don't wait, let's get you started."
|
||||
btnLabel="Register"
|
||||
link="/teach/register"
|
||||
demo={false}
|
||||
/> -->
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,179 @@
|
||||
<script lang="ts">
|
||||
import { HeroSubtitle, McpServerSection, PageHeader, PageSignupCTA } from '$lib/components';
|
||||
import { Badge } from '@cio/ui/base/badge';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import Sparkles from '@lucide/svelte/icons/sparkles';
|
||||
import Copy from '@lucide/svelte/icons/copy';
|
||||
import Check from '@lucide/svelte/icons/check';
|
||||
|
||||
type Recipe = {
|
||||
eyebrow: string;
|
||||
title: string;
|
||||
description: string;
|
||||
prompt: string;
|
||||
};
|
||||
|
||||
const recipes: Recipe[] = [
|
||||
{
|
||||
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.',
|
||||
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.'
|
||||
},
|
||||
{
|
||||
eyebrow: '02 · Refresh',
|
||||
title: 'Refresh a compliance course after a policy update',
|
||||
description:
|
||||
'When the policy changes, the agent identifies the affected lessons and drafts the revisions for your review.',
|
||||
prompt:
|
||||
'Open the "Annual Security Training" course. Fetch the new policy at https://wiki.acme.com/security/soc2. Update any lessons whose content is contradicted by the policy, tag the course with "needs-review", and report what you changed.'
|
||||
},
|
||||
{
|
||||
eyebrow: '03 · Launches',
|
||||
title: 'Tag every course tied to a new product launch',
|
||||
description: 'Bulk-tag drafts and published courses so you can filter, assign, or report on them in one query.',
|
||||
prompt:
|
||||
'Find every course in my org whose title or description mentions the v3.2 API. Apply the tag "launch-v3.2" to all of them and tell me how many you tagged.'
|
||||
},
|
||||
{
|
||||
eyebrow: '04 · Quiz authoring',
|
||||
title: 'Add quiz questions to an existing lesson',
|
||||
description:
|
||||
'The agent reads the lesson body and generates assessment questions you can review before publishing.',
|
||||
prompt:
|
||||
'In the "Acme 101" course, find the "Connecting your data source" lesson. Add an exercise to it with 5 quiz questions covering the key concepts in the lesson body. Use a mix of multiple choice and short answer.'
|
||||
},
|
||||
{
|
||||
eyebrow: '05 · Reorganise',
|
||||
title: 'Reorder lessons inside a course',
|
||||
description: 'Tell the agent what order matters; it reorders sections and lessons without touching the content.',
|
||||
prompt:
|
||||
'In the "Admin Bootcamp" course, move the "SSO setup" section before "Inviting your team". Keep all other ordering as-is. Show me the new structure before applying.'
|
||||
},
|
||||
{
|
||||
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.',
|
||||
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).'
|
||||
}
|
||||
];
|
||||
|
||||
let copiedIndex = $state<number | null>(null);
|
||||
|
||||
async function copyPrompt(index: number, prompt: string) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(prompt);
|
||||
copiedIndex = index;
|
||||
setTimeout(() => {
|
||||
if (copiedIndex === index) copiedIndex = null;
|
||||
}, 1800);
|
||||
} catch (e) {
|
||||
console.error('Copy failed', e);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="bg-white">
|
||||
<PageHeader className="px-6 lg:px-12">
|
||||
<div class="mx-auto max-w-[1100px]">
|
||||
<Badge variant="outline" class="mb-6 gap-2! bg-white px-3.5! py-1.5!">
|
||||
<Sparkles size={14} class="text-blue-700" />
|
||||
MCP recipes
|
||||
</Badge>
|
||||
|
||||
<h1 class="max-w-[820px] text-[clamp(2rem,3.4vw,2.8rem)] leading-[1.1] font-medium tracking-tight text-gray-950">
|
||||
Let your agent
|
||||
<em class="text-blue-700 not-italic">keep your courses up to date.</em>
|
||||
</h1>
|
||||
|
||||
<HeroSubtitle>
|
||||
Plug the ClassroomIO MCP server into Cursor, Claude Code, Codex, or OpenCode. Then paste one of these prompts.
|
||||
The agent plans the work, waits for your approval, and runs it.
|
||||
</HeroSubtitle>
|
||||
|
||||
<div class="mt-8 flex flex-wrap items-center gap-3">
|
||||
<Button href="/signup">Get an MCP key</Button>
|
||||
<Button href="/automation" variant="outline">Read the docs</Button>
|
||||
</div>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<!-- Recipe list -->
|
||||
<section class="bg-white px-6 py-12 lg:px-12 lg:py-16">
|
||||
<div class="mx-auto max-w-[1100px]">
|
||||
<div class="mb-8 max-w-[640px]">
|
||||
<div class="mb-2 text-xs font-medium tracking-widest text-blue-700 uppercase">Recipes</div>
|
||||
<h2 class="text-[clamp(1.75rem,2.6vw,2.2rem)] leading-[1.15] font-medium tracking-tight">
|
||||
Paste a prompt. Get the result.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
{#each recipes as recipe, i}
|
||||
<div
|
||||
class="group border-2 border-dotted border-gray-200 bg-white p-5 transition-colors hover:border-blue-700 lg:p-7"
|
||||
>
|
||||
<p class="font-mono text-[11px] tracking-widest text-blue-700 uppercase">{recipe.eyebrow}</p>
|
||||
<h3 class="mt-2 text-base font-medium text-gray-950 lg:text-lg">{recipe.title}</h3>
|
||||
<p class="mt-1.5 text-sm leading-relaxed text-gray-500">{recipe.description}</p>
|
||||
|
||||
<!-- Prompt block -->
|
||||
<div class="relative mt-5 border border-gray-200 bg-gray-50">
|
||||
<div class="flex items-center justify-between border-b border-gray-200 bg-white px-3 py-2">
|
||||
<span class="cio-code-font text-[10px] tracking-widest text-gray-500 uppercase">Prompt</span>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => copyPrompt(i, recipe.prompt)}
|
||||
class="cio-code-font inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-medium tracking-wide opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus:opacity-100 {copiedIndex ===
|
||||
i
|
||||
? 'bg-emerald-50 text-emerald-700 opacity-100! ring-1 ring-emerald-200'
|
||||
: 'bg-blue-50 text-blue-700 ring-1 ring-blue-100 hover:bg-blue-100'}"
|
||||
aria-label="Copy prompt"
|
||||
>
|
||||
{#if copiedIndex === i}
|
||||
<Check size={12} strokeWidth={2.5} />
|
||||
Copied
|
||||
{:else}
|
||||
<Copy size={12} strokeWidth={2} />
|
||||
Copy
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
<pre
|
||||
class="cio-code-font overflow-x-auto px-4 py-3.5 text-[12.5px] leading-[1.6] break-words whitespace-pre-wrap text-gray-800">{recipe.prompt}</pre>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<McpServerSection
|
||||
eyebrow="Setup"
|
||||
title="Two minutes to wire it up."
|
||||
description="Drop this into your agent's MCP config, restart the client, and you're ready to run any of the recipes above."
|
||||
showTools={false}
|
||||
/>
|
||||
|
||||
<PageSignupCTA
|
||||
header="One prompt away from a real course."
|
||||
subText="Spin up a free workspace, paste a recipe, and watch your agent build it."
|
||||
btnLabel="Get started free"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.cio-code-font,
|
||||
:global(.cio-code-font *) {
|
||||
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
|
||||
font-feature-settings:
|
||||
'liga' 0,
|
||||
'calt' 0;
|
||||
font-variant-ligatures: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,9 @@
|
||||
export const prerender = true;
|
||||
|
||||
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.'
|
||||
}
|
||||
});
|
||||
@@ -17,11 +17,12 @@
|
||||
<section>
|
||||
<PageHeader className="flex flex-col items-center justify-center text-center">
|
||||
<h1 class="mx-auto flex flex-col items-center text-4xl text-slate-900 md:text-6xl">
|
||||
<span>There is room for</span>
|
||||
<span class="relative text-blue-700">Everyone.</span>
|
||||
<span>Certified training for</span>
|
||||
<span class="relative text-blue-700">every team.</span>
|
||||
</h1>
|
||||
<p class="mt-10 w-[90%] text-center text-lg font-normal text-slate-700 md:w-[60%] lg:mt-7">
|
||||
You get a customizable LMS, AI integration for productive educators and many more...
|
||||
Start with your docs, policies, and videos. Choose the plan that helps you turn them into courses, certificates,
|
||||
and completion evidence.
|
||||
</p>
|
||||
<div class="mt-8">
|
||||
<PricingToggle
|
||||
@@ -76,8 +77,8 @@
|
||||
</section>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Migrate your certification program to ClassroomIO"
|
||||
subText="Try before you buy. No credit card required."
|
||||
header="Choose the plan that fits your training program."
|
||||
subText="Start small, prove completion, and scale certified training across your teams, customers, and partners."
|
||||
btnLabel="Sign up for free"
|
||||
link="/signup"
|
||||
demo={false}
|
||||
|
||||
@@ -31,9 +31,7 @@
|
||||
{@render children?.()}
|
||||
|
||||
<PageSignupCTA
|
||||
header="Scale Your Bootcamp Today with ClassroomIO"
|
||||
subText="ClassroomIO gives small and medium bootcamps the power of online learning, simplified."
|
||||
btnLabel="Sign me up"
|
||||
link="/signup"
|
||||
demo={false}
|
||||
header="Stop forwarding help articles."
|
||||
subText="Launch a branded academy on your domain in days."
|
||||
btnLabel="Book a Demo"
|
||||
/>
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
interface Props {
|
||||
url: string;
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { url, children }: Props = $props();
|
||||
</script>
|
||||
|
||||
{#key url}
|
||||
<div class="transition" in:fade>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
{/key}
|
||||
|
||||
<style>
|
||||
.transition {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user