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

chore: change classroomio tagline (#140)

Browse Source
This commit is contained in:
Rotimi Best
2024-01-26 10:06:39 +01:00
committed by GitHub
parent 326cf2d387
commit 9539e1e842
15 changed files with 111 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/classroomio-com/src/app.html
+5 -5
View File
@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="theme-color" content="#333333" />
<title>ClassroomIO –&nbsp;The Open Source Platform for Tech Bootcamps</title>
<title>ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes</title>
<meta name="description" content="ClassroomIO" />
<meta name="application-name" content="ClassroomIO">
<meta name="apple-mobile-web-app-title" content="ClassroomIO">
@@ -16,9 +16,9 @@
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://www.classroomio.com/">
<meta property="og:image" itemprop="image" content="https://classroomio.com/classroomio-opengraph-image.png">
<meta property="og:title" content="ClassroomIO –&nbsp;The Open Source Platform for Tech Bootcamps" />
<meta property="og:title" content="ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes" />
<meta property="og:description"
content="Spend less time doing the boring stuff, instead focus on impacting the lives of your students." />
content="ClassroomIO is a no-code tool that allows you build and scale your own teaching platform with ease." />
<meta property="og:type" content="website" />
@@ -31,9 +31,9 @@
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="classroomio.com">
<meta property="twitter:url" content="https://www.classroomio.com/">
<meta name="twitter:title" content="ClassroomIO – The Open Source Platform for Tech Bootcamps">
<meta name="twitter:title" content="ClassroomIO – Launch Your Online Bootcamp In Minutes">
<meta name="twitter:description"
content="Spend less time doing the boring stuff, instead focus on impacting the lives of your students.">
content="ClassroomIO is a no-code tool that allows you build and scale your own teaching platform with ease.">
<meta name="twitter:image" content="https://classroomio.com/classroomio-opengraph-image.png">
<!-- <link rel="stylesheet" href="global.css"> -->
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
apps/classroomio-com/src/lib/Body/Section.svelte
+3 -12
View File
@@ -1,11 +1,5 @@
<script>
import {
flexible,
leftFist,
rightFist,
robotArm,
thumbsUp,
} from '$lib/emojis';
import { flexible, leftFist, rightFist, robotArm, thumbsUp } from '$lib/emojis';
export let id = '';
export let rightToLeft = false;
@@ -16,10 +10,7 @@
export let taglineIcon = '';
</script>
<section
{id}
class="w-full py-32 border-b border-x-0 border-t-0 border-gray-200"
>
<section {id} class="w-full py-32 border-b border-x-0 border-t-0 border-gray-200">
<div
class="w-4/5 mx-auto flex flex-col {rightToLeft
? 'lg:flex-row-reverse'
@@ -55,7 +46,7 @@
</div>
<div class="w-[95vw] md:w-[80vw] lg:w-full">
<video
class="w-full h-auto lg:max-h-[80%] rounded-xl shadow-xl"
class="w-full h-auto lg:max-h-[80%] rounded-md shadow-xl"
autoplay
loop
muted
apps/classroomio-com/src/lib/Faq/Faq.svelte
+1 -1
View File
@@ -42,7 +42,7 @@
Try before you buy. No credit card required.
</p>
<button
class="font-semibold text-md lg:text-lg text-gray-900 bg-white px-6 lg:px-7 py-4 lg:py-3 rounded-xl mt-10 inter"
class="font-semibold text-md lg:text-lg text-gray-900 bg-white px-6 lg:px-7 py-4 lg:py-3 rounded-md mt-10 inter"
data-cal-config={"{'layout':'month_view'}"}
data-cal-link="classroomio/demo"
>
apps/classroomio-com/src/lib/Footer/Footer.svelte
+1 -1
View File
@@ -8,7 +8,7 @@
<div class="w-full lg:w-2/4">
<img src="/logo-192.png" alt="classroomio logo" class="w-[10%] lg:w-[5%] mb-5 lg:mb-10" />
<p class="text-sm lg:text-md tracking-wide leading-7 lg:leading-7 text-gray-600 inter mb-5">
The Open Source Platform for Tech Bootcamps
Launch Your Online Bootcamp In Minutes
<br />
Making teaching and learning seamless for tech bootcamps
</p>
apps/classroomio-com/src/lib/Hero/Hero.svelte
+12 -13
View File
@@ -15,14 +15,14 @@
>
</div>
<h1
class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] text-slate-900 flex flex-col items-center gap-4"
class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] text-slate-900 flex flex-col items-center"
>
<span>The Open Source Platform</span>
<span>Launch Your Online Bootcamp</span>
<span class="text-[#1D4EE2] relative"
>for Tech Bootcamps<svg
>In Minutes<svg
aria-hidden="true"
viewBox="0 0 418 42"
class="absolute left-[10%] top-3/4 h-[0.58em] fill-indigo-300/70"
class="absolute right-[-20%] top-3/4 h-[0.58em] fill-indigo-300/70"
preserveAspectRatio="none"
><path
d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"
@@ -31,27 +31,26 @@
>
</h1>
<p
class="mx-auto mt-10 lg:mt-6 px-4 lg:p-0 text-md md:text-xl tracking-wide leading-6 lg:leading-10 text-slate-700 lg:w-2/4"
>
Spend less time doing the boring stuff, instead focus on impacting the lives of your students.
<p class="mx-auto mt-10 lg:mt-6 px-4 lg:p-0 text-md md:text-lg text-slate-700 lg:w-2/4">
Meet a better collaboration tool for teachers and students. ClassroomIO is a no-code tool that
allows you build and scale your own teaching platform with ease.
</p>
<div class="mt-10 flex gap-4 items-center justify-center flex-col md:flex-row">
<a
class="font-medium lg:font-semibold text-sm md:text-md w-11/12 md:w-fit text-white px-6 py-3 lg:px-10 lg:py-5 bg-[#1D4EE2] rounded-md lg:rounded-xl"
class="font-medium lg:font-semibold text-sm md:text-md w-11/12 md:w-fit text-white px-6 py-3 lg:px-6 lg:py-5 bg-[#1D4EE2] rounded-md"
href="/signup"
rel="noopener noreferrer nofollow"
>
Create a free account 🚀
Get Started for Free 🚀
</a>
<a
class="font-medium lg:font-semibold text-sm md:text-md w-11/12 md:w-fit border px-6 py-3 lg:px-10 lg:py-5 rounded-md lg:rounded-xl"
<!-- <a
class="font-medium lg:font-semibold text-sm md:text-md w-11/12 md:w-fit border px-6 py-3 lg:px-10 lg:py-5 rounded-md"
href="/github"
target="_blank"
rel="noopener noreferrer nofollow"
>
View on Github
</a>
</a> -->
</div>
<div class="relative my-5 md:my-10">
apps/classroomio-com/src/lib/Hero/ImageCompare.svelte
+2 -4
View File
@@ -45,15 +45,13 @@
$: h = imgOffset && imgOffset.height;
$: x = w * offset;
$: opacity = hideOnSlide && sliding ? 0 : 1;
$: style = contain
? `width:100%;height:100%;`
: `width:${w}px;height:${h}px;`;
$: style = contain ? `width:100%;height:100%;` : `width:${w}px;height:${h}px;`;
</script>
<svelte:window on:resize={resize} />
<button
class="container floating w-[85%] lg:w-[70%] h-full mx-auto rounded-xl"
class="container floating w-[85%] lg:w-[70%] h-full mx-auto rounded-md"
{style}
on:touchstart={start}
on:mousedown={start}
apps/classroomio-com/src/lib/Navigation/Navigation.svelte
+3 -3
View File
@@ -65,7 +65,7 @@
</script>
<div
class="flex w-full justify-between items-center py-6 border-b-[1px] md:px-12 px-5 fixed top-0 z-[3000] filter backdrop-blur-xl shadow-sm"
class="flex w-full justify-between items-center py-6 border-b-[1px] md:px-12 px-5 fixed top-0 z-[3000] filter backdrop-blur-xl shadow-sm bg-white"
>
<a href="/">
<div class="flex items-center">
@@ -185,12 +185,12 @@
</li>
<!-- -->
<li
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full"
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
>
<a href="#morefeatures"> More features </a>
</li>
<li
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full"
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
>
<a href="#pricing"> Pricing </a>
</li>
apps/classroomio-com/src/lib/Pricing/Pricing.svelte
+28 -67
View File
@@ -14,7 +14,7 @@
'AI Course Builder (no video upload)',
'Course Landing Page',
'Live chat & Live polls',
'20 AI Prompts',
'20 AI Prompts'
];
const proFeatures = [
@@ -25,36 +25,26 @@
'Certificates',
'2000 AI Prompts',
'Remove ClassroomIO Branding',
'Email Support',
'Email Support'
];
const teamFeatures = [
'Everything in Pro',
'Unlimited students',
'Unlimited AI Prompts',
'White Labelling',
'Priority Support',
'Priority Support'
];
</script>
<section id="pricing" class="py-[12%]">
<div class="px-[6%] flex flex-col justify-center items-center">
<div class="text-center mb-[3%]">
<h3
id="pricing"
class="inter text-[#1D4EE2] text-md font-semibold tracking-wide"
>
Pricing
</h3>
<h1
class="my-5 lg:my-4 font-semibold tracking-tight text-gray-900 text-3xl lg:text-4xl"
>
<h3 id="pricing" class="inter text-[#1D4EE2] text-md font-semibold tracking-wide">Pricing</h3>
<h1 class="my-5 lg:my-4 font-semibold tracking-tight text-gray-900 text-3xl lg:text-4xl">
For teams and individuals
</h1>
<p
class="inter mt-4 text-lg text-gray-500 tracking-normal lg:tracking-wide"
>
Customizable LMS, AI integration for productive educators and many
more...
<p class="inter mt-4 text-lg text-gray-500 tracking-normal lg:tracking-wide">
Customizable LMS, AI integration for productive educators and many more...
</p>
</div>
@@ -62,16 +52,14 @@
class="flex items-center border-[2px] rounded-[30px] p-[2px] relative lg:scale-100 mt-10 lg:mt-0"
>
<button
style="background-color: {prices
? 'initial'
: '#1D4EE2'}; color: {prices ? '#777E8A' : '#fff'}"
style="background-color: {prices ? 'initial' : '#1D4EE2'}; color: {prices
? '#777E8A'
: '#fff'}"
class="bg-[#1D4EE2] text-white rounded-[30px] py-1 px-3 lg:py-2 lg:px-4 inter text-xs"
on:click={handlePriceChange}>Monthly</button
>
<button
style="background-color: {prices ? '#1D4EE2' : ''}; color: {prices
? '#fff'
: '#777E8A'}"
style="background-color: {prices ? '#1D4EE2' : ''}; color: {prices ? '#fff' : '#777E8A'}"
class="text-white rounded-[30px] py-1 lg:py-2 px-3 lg:px-4 inter text-xs"
on:click={handlePriceChange}>Annually</button
>
@@ -84,25 +72,16 @@
<div class="isolate mt-10 grid gap-10 grid-cols-1 lg:grid-cols-3">
<!-- card 1 -->
<div
class="ring-gray-200 rounded-3xl p-8 ring-1 xl:p-9 max-w-xl lg:max-w-sm"
>
<h3 class="text-gray-900 text-lg lg:text-xl font-semibold leading-8">
Hobby
</h3>
<p
class="text-gray-500 font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6 inter"
>
For personal use. Hobby plan is free for up to 5 courses forever, no
credit card required.
<div class="ring-gray-200 rounded-3xl p-8 ring-1 xl:p-9 max-w-xl lg:max-w-sm">
<h3 class="text-gray-900 text-lg lg:text-xl font-semibold leading-8">Hobby</h3>
<p class="text-gray-500 font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6 inter">
For personal use. Hobby plan is free for up to 5 courses forever, no credit card required.
</p>
<h1
class="mt-6 flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium inter"
>
<h1 class="mt-6 flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium inter">
$0 <sub class="text-base">/mo</sub>
</h1>
<button
class="font-medium lg:font-semibold text-md lg:text-lg text-white py-3 lg:py-3 w-full bg-slate-900 hover:bg-slate-700 rounded-md lg:rounded-xl mt-10 inter"
class="font-medium lg:font-semibold text-md lg:text-lg text-white py-3 lg:py-3 w-full bg-slate-900 hover:bg-slate-700 rounded-md lg:rounded-md mt-10 inter"
data-cal-config={"{'layout':'month_view'}"}
data-cal-link="classroomio/demo"
>
@@ -124,12 +103,8 @@
<!-- card 2 -->
<div class="bg-gray-900 rounded-3xl p-8 xl:p-9 max-w-xl lg:max-w-lg">
<h3 class="text-white text-lg lg:text-xl font-semibold leading-8">
Pro
</h3>
<p
class="text-white font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6 inter"
>
<h3 class="text-white text-lg lg:text-xl font-semibold leading-8">Pro</h3>
<p class="text-white font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6 inter">
Advanced features for small teaching businesses. Built for scale.
</p>
<h1
@@ -138,22 +113,16 @@
${prices ? '12' : '15'} <sub class="text-base">/member</sub>
</h1>
<button
class="font-medium lg:font-semibold text-md lg:text-lg text-slate-900 py-3 lg:py-3 w-full bg-white hover:bg-indigo-50 rounded-md lg:rounded-xl mt-10 inter"
class="font-medium lg:font-semibold text-md lg:text-lg text-slate-900 py-3 lg:py-3 w-full bg-white hover:bg-indigo-50 rounded-md lg:rounded-md mt-10 inter"
data-cal-config={"{'layout':'month_view'}"}
data-cal-link="classroomio/demo"
>
Get Started
</button>
<ul
class="text-white mt-8 space-y-3 font-light lg:space-y-5 text-sm xl:mt-10"
>
<ul class="text-white mt-8 space-y-3 font-light lg:space-y-5 text-sm xl:mt-10">
{#each proFeatures as proFeature}
<li class="flex items-center">
<Checkmark
size={24}
fill="#fff"
class="mr-2 lg:mr-3 scale-[70%] lg:scale-[100%]"
/>
<Checkmark size={24} fill="#fff" class="mr-2 lg:mr-3 scale-[70%] lg:scale-[100%]" />
{proFeature}
</li>
{/each}
@@ -161,24 +130,16 @@
</div>
<!-- card 3 -->
<div
class="ring-gray-200 rounded-3xl p-8 ring-1 xl:p-9 max-w-xl lg:max-w-sm"
>
<h3 class="text-gray-900 text-lg lg:text-xl font-semibold leading-8">
Team
</h3>
<p
class="text-gray-500 font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6 inter"
>
<div class="ring-gray-200 rounded-3xl p-8 ring-1 xl:p-9 max-w-xl lg:max-w-sm">
<h3 class="text-gray-900 text-lg lg:text-xl font-semibold leading-8">Team</h3>
<p class="text-gray-500 font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6 inter">
Best suited for teams and larger businesses that need more control.
</p>
<h1
class="mt-6 lg:mt-6 flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium inter"
>
<h1 class="mt-6 lg:mt-6 flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium inter">
${prices ? '42' : '50'} <sub class="text-base">/member</sub>
</h1>
<button
class="font-medium lg:font-semibold text-md lg:text-lg text-white py-3 lg:py-3 w-full bg-slate-900 hover:bg-slate-700 rounded-md lg:rounded-xl mt-10 inter"
class="font-medium lg:font-semibold text-md lg:text-lg text-white py-3 lg:py-3 w-full bg-slate-900 hover:bg-slate-700 rounded-md lg:rounded-md mt-10 inter"
data-cal-config={"{'layout':'month_view'}"}
data-cal-link="classroomio/demo"
>
@@ -217,7 +178,7 @@
</p>
</div>
<button
class="font-semibold text-base lg:text-md text-white leading-5 mt-5 lg:m-0 p-4 lg:py-5 ml-5 bg-[#1D4EE2] rounded-lg lg:rounded-xl inter w-[70%] lg:w-full"
class="font-semibold text-base lg:text-md text-white leading-5 mt-5 lg:m-0 p-4 lg:py-5 ml-5 bg-[#1D4EE2] rounded-lg lg:rounded-md inter w-[70%] lg:w-full"
>
Create a free account
</button>