ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove BlurFade component from hero and various sections for cleaner markup and improved performance

Browse Source
This commit is contained in:
Rotimi Best
2026-05-19 07:02:50 +01:00
parent 3562bd570e
commit 19a1243215
6 changed files with 69 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/website/src/lib/components/hero.svelte
+23 -32
View File
@@ -1,5 +1,4 @@
<script>
import { BlurFade } from '@cio/ui/custom/animation/blurfade';
import { Button } from '@cio/ui/base/button';
import ParticleField from './particle-field.svelte';
</script>
@@ -91,42 +90,34 @@
></div>
<div class="relative z-10 mx-auto flex max-w-[1100px] flex-col items-center text-center">
<BlurFade delay={0} once>
<h1 class="max-w-[820px] text-[clamp(2rem,4vw,3.25rem)] leading-[1.1] font-medium tracking-tight text-gray-950">
Teach your customers your product
<em class="text-blue-700 not-italic">before support has to.</em>
</h1>
</BlurFade>
<h1 class="max-w-[820px] text-[clamp(2rem,4vw,3.25rem)] leading-[1.1] font-medium tracking-tight text-gray-950">
Teach your customers your product
<em class="text-blue-700 not-italic">before support has to.</em>
</h1>
<BlurFade delay={0.1} once>
<p class="mt-5 max-w-[580px] text-sm leading-relaxed lg:text-base">
Launch a branded customer academy in days. Train customers, certify power users, and drive adoption on your own
domain, with an AI tutor in every lesson.
</p>
</BlurFade>
<p class="mt-5 max-w-[580px] text-sm leading-relaxed lg:text-base">
Launch a branded customer academy in days. Train customers, certify power users, and drive adoption on your own
domain, with an AI tutor in every lesson.
</p>
<BlurFade delay={0.2} once>
<div class="mt-7 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>
</BlurFade>
<div class="mt-7 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>
<div class="relative z-30 mx-auto mt-14 w-full max-w-[1100px]">
<BlurFade delay={0.3} once>
<div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
<img
src="/hero-academy.jpeg"
alt="Branded customer academy on a custom domain — catalog, programs, AI tutor"
width="2560"
height="1440"
class="block h-auto w-full"
loading="eager"
decoding="async"
/>
</div>
</BlurFade>
<div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
<img
src="/hero-academy.jpeg"
alt="Branded customer academy on a custom domain — catalog, programs, AI tutor"
width="2560"
height="1440"
class="block h-auto w-full"
loading="eager"
decoding="async"
/>
</div>
</div>
</section>
apps/website/src/lib/components/navigation.svelte
+1 -1
View File
@@ -96,7 +96,7 @@
key: 'self-hosting',
title: 'Self-hosting & Docs',
subtitle: 'Run ClassroomIO in your own VPC.',
href: 'https://docs.classroomio.com'
href: 'https://classroomio.com/docs'
},
{
key: 'mcp-recipes',
apps/website/src/lib/components/oss-section.svelte
+1 -1
View File
@@ -73,7 +73,7 @@
{#if stars}<span class="text-blue-300">{stars}</span>{/if}
</a>
<a
href="https://docs.classroomio.com/self-hosting"
href="https://classroomio.com/docs/self-hosting"
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"
apps/website/src/routes/(marketing)/customer-education/vs-help-docs/+page.svelte
+15 -25
View File
@@ -41,34 +41,24 @@
<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>
<Badge variant="outline" class="mb-6 gap-2! bg-white px-3.5! py-1.5!">Customer academy vs help docs</Badge>
<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>
<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 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>
<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 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 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>
</div>
</PageHeader>
apps/website/src/routes/(marketing)/docs-vs-company-academy/+page.svelte
+26 -37
View File
@@ -168,49 +168,38 @@
<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>
<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 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>
<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 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>
<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 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 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>
</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 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>
</BlurFade>
</div>
</PageHeader>
<section class="bg-gray-50 px-6 py-16 lg:px-12 lg:py-24">
apps/website/src/routes/automation/+page.svelte
+3 -3
View File
@@ -57,7 +57,7 @@
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="https://classroomio.com/docs/api">Read the API docs</Button>
<Button href="/github" variant="outline">Star on GitHub</Button>
</div>
</div>
@@ -147,7 +147,7 @@
<div class="mt-8 flex flex-wrap items-center gap-3">
<a
href="https://docs.classroomio.com/self-hosting"
href="https://classroomio.com/docs/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"
@@ -206,7 +206,7 @@
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"
link="https://classroomio.com/docs/api"
demo={false}
/>
</section>