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

feat: classroomio blog v1 (#142)

Browse Source 
* style: Improved font size of the answers in the FAQ section of the landing page

* working on the classroomio blog

* there is a bit of a git issue

* changed the footer route

* Merge branch 'main' into issue-139

* Added syntax higlighting,blockquotes styling and image stylings

* restyle and add first blog

* make tagline match home page

* add docs route

---------

Co-authored-by: Rotimi Best <best@classroomio.com>
This commit is contained in:
Em_Dev
2024-02-02 08:18:26 +01:00
committed by GitHub
co-authored by Rotimi Best
parent cadfa81913
commit f828b170b9
32 changed files with 743 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/classroomio-com/src/lib/Body/Body.svelte
+6 -10
View File
@@ -48,27 +48,23 @@
>
<div class="w-full">
<h2
class="w-full order-first text-3xl font-semibold inter tracking-tight text-gray-900 sm:text-5xl"
class="w-full order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
>
1 thousand
</h2>
<p class="text-base leading-7 text-gray-600 inter">Feedback collected</p>
<p class="text-base leading-7 text-gray-600">Feedback collected</p>
</div>
<div class="w-full">
<h2
class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl inter"
>
<h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
5 thousand
</h2>
<p class="text-base leading-7 text-gray-600 inter">Documents processed</p>
<p class="text-base leading-7 text-gray-600">Documents processed</p>
</div>
<div class="w-full">
<h2
class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl inter"
>
<h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
1 million
</h2>
<p class="text-base leading-7 text-gray-600 inter">Page views recorded</p>
<p class="text-base leading-7 text-gray-600">Page views recorded</p>
</div>
</div>
{/if}
apps/classroomio-com/src/lib/Chip/Chip.svelte
+7
View File
@@ -0,0 +1,7 @@
<script lang="ts">
export let label: string;
</script>
<p class="whitespace-nowrap bg-gray-200 px-2 py-1 rounded-full text-xs font-normal text-black">
{label}
</p>
apps/classroomio-com/src/lib/Faq/Faq.svelte
+5 -5
View File
@@ -8,7 +8,7 @@
Questions & Answers
</h1>
<h3
class="lg:px-[20%] mt-4 text-lg lg:text-xl text-gray-500 inter font-normal tracking-normal lg:tracking-wide"
class="lg:px-[20%] mt-4 text-lg lg:text-xl text-gray-500 font-normal tracking-normal lg:tracking-wide"
>
Can’t find the answer you’re looking for?
<a class="text-[#1D4EE2]" href="mailto:help@classroomio.com" target="_blank"
@@ -20,11 +20,11 @@
<div class="grid grid-cols-1 lg:grid-cols-3 gap-10 lg:gap-20 lg:px-[13%] mt-[20%] lg:m-0">
{#each faqs as faq}
<div class="max-w-[100%] px-6 lg:p-0">
<h1 class="text:md lg:text-md font-semibold leading-8 text-gray-800 inter">
<h1 class="text:md lg:text-md font-semibold leading-8 text-gray-800">
{faq.question}
</h1>
<p
class="mt-2 text:md lg:text-md font-light leading-7 lg:leading-9 text-gray-600 inter tracking-wide"
class="mt-2 text:md lg:text-md font-light leading-7 lg:leading-9 text-gray-600 tracking-wide"
>
{faq.answer}
</p>
@@ -38,11 +38,11 @@
<h1 class="mt-3 lg:mt-2 text-3xl lg:text-4xl font-bold font-display tracking-tight text-white">
Supercharge your Classroom Today
</h1>
<p class="mt-6 text-xl lg:text-lg text-gray-300 inter">
<p class="mt-6 text-xl lg:text-lg text-gray-300">
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-md 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"
data-cal-config={"{'layout':'month_view'}"}
data-cal-link="classroomio/demo"
>
apps/classroomio-com/src/lib/Footer/Footer.svelte
+9 -9
View File
@@ -7,7 +7,7 @@
<div class="flex flex-col lg:flex-row justify-between items-center py-[10%] pl-5 lg:pl-0">
<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">
<p class="text-sm lg:text-md tracking-wide leading-7 lg:leading-7 text-gray-600 mb-5 mr-2">
Launch Your Online Bootcamp In Minutes
<br />
Making teaching and learning seamless for tech bootcamps
@@ -50,32 +50,32 @@
class="flex justify-between items-start flex-col lg:flex-row w-full lg:w-2/4 pr-[5%] mt-16 lg:mt-0 space-y-6 lg:space-y-0"
>
<div>
<h3 class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900 inter">
<h3 class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900">
Product
</h3>
<ul class="space-y-2 lg:space-y-4">
<li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
<a href="#coursemanagement"> Course Management </a>
<a href="/#coursemanagement"> Course Management </a>
</li>
<li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
<a href="#customization"> Customizations </a>
<a href="/#customization"> Customizations </a>
</li>
<li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
<a href="#collaboration"> Forum </a>
<a href="/#collaboration"> Forum </a>
</li>
<li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
<a href="#ai"> AI Lesson Planner </a>
<a href="/#ai"> AI Lesson Planner </a>
</li>
</ul>
</div>
<div>
<h3 class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900 inter">
<h3 class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900">
Resources
</h3>
<ul class="space-y-2 lg:space-y-4">
<li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
<a target="_blank" href="https://classroomio.substack.com/"> Blog </a>
<a href="/blog"> Blog </a>
</li>
<li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
<a target="_blank" href="https://classroomio.com/docs/"> Help center </a>
@@ -94,7 +94,7 @@
</div>
<div>
<h3 class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900 inter">
<h3 class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900">
Company
</h3>
<ul class="space-y-2 lg:space-y-4">
apps/classroomio-com/src/lib/Hero/Hero.svelte
+8 -6
View File
@@ -19,16 +19,18 @@
>
<span>Launch Your Online Bootcamp</span>
<span class="text-[#1D4EE2] relative"
>In Minutes<svg
>In Minutes
<svg
aria-hidden="true"
viewBox="0 0 418 42"
class="absolute right-[-20%] top-3/4 h-[0.58em] fill-indigo-300/70"
preserveAspectRatio="none"
><path
>
<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"
/></svg
></span
>
/>
</svg>
</span>
</h1>
<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">
@@ -76,7 +78,7 @@
{#if PUBLIC_ENABLE_USERS_COMPANIES}
<div class="px-[15%] mb-[10%]">
<h2 class="inter text-base lg:text-xl font-semibold text-gray-900">Used at</h2>
<h2 class="text-base lg:text-xl font-semibold text-gray-900">Used at</h2>
<div class="w-full flex flex-wrap flex-row gap-5 justify-between items-center py-[5%]">
<img src="/hero-1.svg" alt="" class="w-[30%] lg:w-[13%]" />
<img src="/hero-2.svg" alt="" class="w-[30%] lg:w-[13%]" />
apps/classroomio-com/src/lib/MoreFeatures/MoreFeatures.svelte
+11 -18
View File
@@ -4,7 +4,7 @@
import { folder, globe, team, transcription } from '$lib/emojis';
let selected = 0;
let interval = 0;
let interval: NodeJS.Timer;
const moreFeatures = [
{
@@ -12,29 +12,28 @@
title: 'Customizable Landing Page',
description:
'A minimalistic landing page template out of the box to share your courses with the world',
image: '/landing-page-builder.png',
image: '/landing-page-builder.png'
},
{
icon: team,
title: 'Team management',
description:
'Extend invitations and manage your teaching institution seamlessly through ClassroomIO.',
image: '/team-management.png',
image: '/team-management.png'
},
{
icon: transcription,
title: 'Auto Video Transcription',
description:
'AI automatically transcribes videos, making content searchable for seamless student access.',
image: '/video-transcription.png',
image: '/video-transcription.png'
},
{
icon: folder,
title: 'Downloadable Lesson PDF',
description:
'Students can download lessons automatically for offline access.',
image: '/download-pdf.png',
},
description: 'Students can download lessons automatically for offline access.',
image: '/download-pdf.png'
}
];
onMount(() => {
@@ -50,21 +49,15 @@
<section id="morefeatures" class="py-[10%] px-3 lg:px-0 bg-gray-50">
<div class="mx-0 lg:mx-[12%]">
<div class="w-full lg:w-4/5 mx-4 lg:mx-0 mb-14">
<h2
class="mt-2 text-3xl font-bold font-display tracking-tight lg:text-4xl"
>
<h2 class="mt-2 text-3xl font-bold font-display tracking-tight lg:text-4xl">
There is More...
</h2>
<p class="mt-4 text-lg inter text-gray-500 w-[94%] lg:w-4/5">
ClassroomIO is packed with useful features while we try to make it easy
to use.
<p class="mt-4 text-lg text-gray-500 w-[94%] lg:w-4/5">
ClassroomIO is packed with useful features while we try to make it easy to use.
</p>
</div>
<div
class="flex flex-col-reverse lg:flex-row gap-3 md:gap-10"
id="image-container"
>
<div class="flex flex-col-reverse lg:flex-row gap-3 md:gap-10" id="image-container">
<div
class="w-[95%] p-3 mt-5 overflow-auto lg:overflow-hidden lg:mt-0 lg:w-[45%] flex lg:block"
>
apps/classroomio-com/src/lib/Navigation/Navigation.svelte
+39 -10
View File
@@ -8,6 +8,7 @@
import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
import CourseIcon from '$lib/Icons/CourseIcon.svelte';
import MapCenter from 'carbon-icons-svelte/lib/MapCenter.svelte';
import { goto } from '$app/navigation';
let showsubNav = false;
let showNav = false;
@@ -89,7 +90,10 @@
<button
use:melt={$item}
class="flex justify-between items-center w-full rounded-lg hover:bg-slate-100 p-5 mb-4"
on:m-click={() => scroll(superpower.key)}
on:m-click={() => {
goto('/');
setTimeout(() => scroll(superpower.key), 200);
}}
>
{#if superpower.key === 'coursemanagement'}
<CourseIcon />
@@ -114,13 +118,22 @@
<div use:melt={$arrow} />
</div>
</li>
<!-- -->
<a href="#morefeatures">
<!-- More Features -->
<!-- <a href="/#morefeatures">
<li class="text-gray-800 font-semibold text-sm cursor-pointer">More features</li>
</a>
<a href="#pricing">
</a> -->
<!-- Pricing -->
<a href="/#pricing">
<li class="text-gray-800 font-semibold text-sm cursor-pointer">Pricing</li>
</a>
<!-- Docs -->
<a href="/docs">
<li class="text-gray-800 font-semibold text-sm cursor-pointer">Docs</li>
</a>
<!-- Blog -->
<a href="/blog">
<li class="text-gray-800 font-semibold text-sm cursor-pointer">Blog</li>
</a>
</ul>
</nav>
@@ -172,7 +185,7 @@
{#if showsubNav}
<div in:fly={{ y: -20, duration: 700 }} out:fly={{ y: 20, duration: 400 }}>
{#each superpowers as superpower}
<a href="#{superpower.key}">
<a href="/#{superpower.key}">
<p
class="font-normal text-xs text-gray-700 hover:bg-gray-100 rounded-lg py-2.5 pl-5"
>
@@ -183,16 +196,32 @@
</div>
{/if}
</li>
<!-- -->
<!-- Pricing -->
<li
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"
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"
>
<a href="#morefeatures"> More features </a>
<a on:click={handleShowNav} href="/#pricing"> Pricing </a>
</li>
<!-- Docs -->
<li
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>
<a on:click={handleShowNav} href="/docs"> Docs </a>
</li>
<!-- Blog -->
<li
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 on:click={handleShowNav} href="/blog"> Blog </a>
</li>
<!-- More Features -->
<li
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 on:click={handleShowNav} href="/#morefeatures"> More features </a>
</li>
</ul>
</nav>
apps/classroomio-com/src/lib/Pricing/Pricing.svelte
+15 -17
View File
@@ -39,11 +39,11 @@
<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>
<h3 id="pricing" class="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">
<p class="mt-4 text-lg text-gray-500 tracking-normal lg:tracking-wide">
Customizable LMS, AI integration for productive educators and many more...
</p>
</div>
@@ -55,12 +55,12 @@
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"
class="bg-[#1D4EE2] text-white rounded-[30px] py-1 px-3 lg:py-2 lg:px-4 text-xs"
on:click={handlePriceChange}>Monthly</button
>
<button
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"
class="text-white rounded-[30px] py-1 lg:py-2 px-3 lg:px-4 text-xs"
on:click={handlePriceChange}>Annually</button
>
<div
@@ -74,14 +74,14 @@
<!-- 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">
<p class="text-gray-500 font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6">
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">
$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-md 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"
data-cal-config={"{'layout':'month_view'}"}
data-cal-link="classroomio/demo"
>
@@ -104,16 +104,14 @@
<!-- 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">
<p class="text-white font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6">
Advanced features for small teaching businesses. Built for scale.
</p>
<h1
class="mt-6 text-white flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium inter"
>
<h1 class="mt-6 text-white flex items-baseline gap-x-1 text-4xl lg:text-4xl font-medium">
${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-md 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"
data-cal-config={"{'layout':'month_view'}"}
data-cal-link="classroomio/demo"
>
@@ -132,14 +130,14 @@
<!-- 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">
<p class="text-gray-500 font-light mt-4 text-sm lg:text-md leading-6 lg:leading-6">
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">
${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-md 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"
data-cal-config={"{'layout':'month_view'}"}
data-cal-link="classroomio/demo"
>
@@ -171,14 +169,14 @@
Hobby
</h2>
<p
class="m-0 lg:mt-1 text-md leading-7 lg:leading-6 text-gray-600 inter"
class="m-0 lg:mt-1 text-md leading-7 lg:leading-6 text-gray-600"
>
For personal use. Hobby plan is free for up to 5 courses forever, no
credit card required.
</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-md 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 w-[70%] lg:w-full"
>
Create a free account
</button>
apps/classroomio-com/src/lib/custom/img.svelte
+13
View File
@@ -0,0 +1,13 @@
<script lang="ts">
export let src: string;
export let alt: string;
</script>
<figure>
<img
{src}
{alt}
loading="lazy"
class="max-w-full w-full h-[400px] object-cover my-2 rounded-lg"
/>
</figure>
apps/classroomio-com/src/lib/custom/index.ts
+2
View File
@@ -0,0 +1,2 @@
import img from './img.svelte';
export { img };
apps/classroomio-com/src/lib/types.ts
+14
View File
@@ -0,0 +1,14 @@
export type Categories = 'sveltekit' | 'svelte';
export type BlogPost = {
title: string;
slug: string;
description: string;
tags: string[];
author: string;
role: string;
avatar: string;
date: string;
categories: Categories[];
published: boolean;
};
apps/classroomio-com/src/lib/utils/formatDate.ts
+8
View File
@@ -0,0 +1,8 @@
type DateStyle = Intl.DateTimeFormatOptions['dateStyle'];
export function formatDate(date: string, dateStyle: DateStyle = 'medium', locales = 'en') {
// Safari is mad about dashes in the date
const dateToFormat = new Date(date.replaceAll('-', '/'));
const dateFormatter = new Intl.DateTimeFormat(locales, { dateStyle });
return dateFormatter.format(dateToFormat);
}