docs: let the launch week begin 🚀 (#491)

* docs: update meta tags * fix: make env dynamic * docs: let the launch week begin 🚀
2024-10-07 01:36:07 +01:00
parent 22f0d868d5
commit c7722cb18a
25 changed files with 9371 additions and 7297 deletions
@@ -6,7 +6,7 @@
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <meta name="theme-color" content="#333333" />

-  <!-- <title>ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes</title>
+  <!-- <title>ClassroomIO –&nbsp;The Open Source Learning Management System for Companies</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://brand.cdn.clsrio.com/og/classroomio-og.png" />
-  <meta property="og:title" content="ClassroomIO –&nbsp;Launch Your Online Bootcamp In Minutes" />
+  <meta property="og:title" content="ClassroomIO –&nbsp;The Open Source Learning Management System for Companies" />
  <meta property="og:description"
-    content="Launch your bootcamp quickly and affordably with ClassroomIO, the customizable online teaching platform." />
+    content="A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations" />

  <meta property="og:type" content="website" />
  <meta property="og:image:type" content="image/png" />
@@ -29,7 +29,7 @@
  <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 –&nbsp;Launch Your Online Bootcamp In Minutes" />
+  <meta name="twitter:title" content="ClassroomIO –&nbsp;The Open Source Learning Management System for Companies" />
  <meta name="twitter:description"
    content="Launch your bootcamp quichttps://brand.cdn.clsrio.com/og/classroomio-og.pngnline teaching platform." />
  <meta name="twitter:image" content="https://classroomio.com/classroomio-opengraph-image.png" /> -->
@@ -0,0 +1,42 @@
+---
+title: 'Welcome to Launch Week <i>001</i>'
+description: 'We are excited to announce our first launch week for ClassroomIO.com. We will be sharing a new feature every day for 5 days.'
+imageUrl: 'https://assets.cdn.clsrio.com/blog/launch-week-001.png'
+date: '2024-10-07'
+author: Rotimi Best
+avatar: /blog/best.jpg
+role: Founder
+tags: ['Launch Week']
+published: true
+---
+
+![classroomio-launch-week-001](https://assets.cdn.clsrio.com/blog/launch-week-001.png)
+_ClassroomIO Launch Week 001_
+
+Welcome to our first launch week for ClassroomIO.com.
+
+I have personally enjoyed watching the likes of Supabase, Resend, Documenso and many other amazing products do launch weeks and I decided why not give it a try.
+
+In this launch week, we want to share 5+ cool features with you, showing off some of the things we've built to make it easier for anyone to build a brand friendly alternative to Teachable/Thinkific/Edx/Google Classroom and the likes.
+
+### What's the problem with these platforms?
+
+The summary is that they are not brand friendly and for the simplest of things the tool starts to get pretty complex. To get a brand friendly learning managements system (LMS) right now means 2 things:
+
+1. You build it yourself
+2. You white label an existing one
+
+This first is time consuming while the second can cost thousands of dollars. We have solved both problems by building a very simple yet robust LMS that is fully open source and you can customise to whatever you want. Even with our cloud version, we are striving to make the product look and feel the way you want it to.
+
+In this launch week, we will show you some of the steps we've taken to allow companies and startups deploy their custom training platform that is brand friendly and super easy to get started witih.
+
+Below are all the features for each day that we will be sharing. As the day goes by, this list will be updated:
+
+1. Day 1 - 😎
+2. Day 2 - 😁
+3. Day 3 - 🤩
+4. Day 4 - 🤯
+5. Day 5 - 😉
+6. Extras - 😍😍😍😍
+
+### Let the launch week begin 🚀
@@ -15,7 +15,7 @@
        class="mb-5"
      />
      <p class="lg:text-base mb-5 mr-2 text-sm leading-7 tracking-wide text-gray-600 lg:leading-7">
-        Launch Your Online Bootcamp In Minutes
+        The Open Source Learning Management System for Companies
        <br />
        ClassroomIO is the easiest way to grow your teaching business.
      </p>
@@ -34,7 +34,7 @@
  </div>

  <PageSignupCTA
-    header="Spend less time managing your LMS and more time training with ClassroomIO"
+    header="Your Custom Academy – Up & Running in Minutes!"
    subText="Try before you buy. No credit card required."
    btnLabel="Book a demo"
    link="classroomio/demo"
@@ -5,10 +5,10 @@
  import { env } from '$env/dynamic/public';

  const names = [
-    { label: 'Bootcamp', color: '#3ADFEC' },
-    { label: 'Course', color: '#BF0696' },
-    { label: 'Training', color: '#0233BD' },
-    { label: 'Academy', color: '#9747FF' }
+    { label: 'Audience', color: '#3ADFEC' },
+    { label: 'Employees', color: '#BF0696' },
+    { label: 'Customers', color: '#0233BD' },
+    { label: 'Students', color: '#9747FF' }
  ];
  let animate = false;
  let titleIndex = 0;
@@ -94,28 +94,30 @@
      <div
        class="font-bold md:leading-[1.5] text-left lg:text-center ml-6 text-slate-900 text-4xl lg:text-7xl"
      >
-        <span>Launch Your Online</span> <br />
-        <div class="flex-wrap flex items-center lg:gap-3">
+        <span>Educate Your</span>
+        <div class="flex-wrap flex items-center justify-center lg:gap-3 mb-2">
          <span
-            class="w-full lg:w-[48%] h-[40px] md:h-[50px] lg:h-[90px] mb-0 mt-1 md:mt-0 lg:-mb-4 relative inline-block overflow-hidden"
+            class="w-full lg:w-[48%] h-[40px] md:h-[50px] lg:h-[75px] mb-0 mt-1 md:mt-0 lg:-mb-4 relative inline-block overflow-hidden lg:text-center"
          >
            {#key titleIndex}
              <span
-                class="absolute left-0 right-[unset] lg:right-0 lg:left-[unset]"
+                class="absolute left-0 right-[unset] lg:right-0 lg:left-[unset] w-full"
                style="color: {names[titleIndex].color}"
                transition:fly={{ y: 100, delay: 0, easing: sineInOut }}
              >
-                {names[titleIndex].label}
+                <span class="w-full text-center m-auto">
+                  {names[titleIndex].label}
+                </span>
              </span>
            {/key}
          </span>
-          <span>In Minutes</span>
        </div>
+        <span>from one Platform</span>
      </div>

      <p class="text-base mx-auto mt-10 px-4 text-slate-700 md:text-lg lg:mt-6 lg:w-[42%] lg:p-0">
-        ClassroomIO is an open source learning management system for small and medium bootcamps that
-        wants to set up a fully customizable online teaching platform quickly.
+        ClassroomIO is an open source learning management system for companies. We give you a suite
+        of tools to help you achieve your training, onboarding and certification goals.
      </p>
    </div>

@@ -113,7 +113,7 @@
      <div class="flex justify-evenly gap-y-8 flex-wrap w-full mt-10 mx-auto">
        <div class="text-center">
          <h1 class="text-3xl md:text-5xl font-bold">
-            Play With Our <span class="text-[#0233BD]">Free Tools</span>
+            Explore Our <span class="text-[#0233BD]">Free Tools</span>
          </h1>
          <p class="text-sm md:text-base text-[#334155] md:w-[65%] mt-5 md:mt-10 mx-auto">
            Innovative tools to help you aid you example preparation, as well as making learning
@@ -11,17 +11,17 @@ export function load({ url }) {

 function getBaseMetaTags(url: URL) {
  const metatags = Object.freeze({
-    title: 'ClassroomIO – Launch Your Online Bootcamp In Minutes',
+    title: 'ClassroomIO | The Open Source Learning Management System for Companies',
    description:
-      'Launch your bootcamp quickly and affordably with ClassroomIO, the customizable online teaching platform.',
+      'A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations',
    canonical: new URL(url.pathname, url.origin).href,
    openGraph: {
      type: 'website',
      url: new URL(url.pathname, url.origin).href,
      locale: 'en_IE',
-      title: 'ClassroomIO – Launch Your Online Bootcamp In Minutes',
+      title: 'ClassroomIO | The Open Source Learning Management System for Companies',
      description:
-        'Launch your bootcamp quickly and affordably with ClassroomIO, the customizable online teaching platform.',
+        'A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations',
      siteName: 'ClassroomIO',
      images: [
        {
@@ -38,9 +38,9 @@ function getBaseMetaTags(url: URL) {
      handle: '@classroomio',
      site: '@classroomio',
      cardType: 'summary_large_image' as const,
-      title: 'ClassroomIO – Launch Your Online Bootcamp In Minutes',
+      title: 'ClassroomIO | The Open Source Learning Management System for Companies',
      description:
-        'Launch your bootcamp quickly and affordably with ClassroomIO, the customizable online teaching platform.',
+        'A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations',
      image: 'https://brand.cdn.clsrio.com/og/classroomio-og.png',
      imageAlt: 'ClassroomIO OG Image'
    }
@@ -12,7 +12,7 @@
      <!-- Title -->
      <hgroup class="flex flex-col items-center justify-center text-center w-full">
        <p class="text-sm text-gray-500">{formatDate(data.meta.date)}</p>
-        <p class="font-bold text-3xl py-2 text-center md:w-[60%]">{data.meta.title}</p>
+        <p class="font-bold text-3xl py-2 text-center md:w-[60%]">{@html data.meta.title}</p>
      </hgroup>
      <main class="mx-auto max-w-screen-md px-4 lg:px-8">
        <div class="flex items-center justify-start gap-4 my-2 border-y border-gray-200 py-4">
@@ -50,10 +50,6 @@
    margin-inline: auto;
  }

-  h1 {
-    text-transform: capitalize;
-  }
-
  :global(.prose a) {
    text-decoration: underline;
    font-weight: bold;