feat: classroomio marketing pages (#497)

* feat: init * Updated employee training and bootcamps page * updated landing pages for all solutions * feat: corrections implimented to landing pages * feat: new updates * Updates on header and footer along side corrections. * update lock-file * improvements * chore: clean up navigation * chore: use timeout to close solutions * chore: complete proof reading and improvements * move all images to CF * finish up cleaning --------- Co-authored-by: Rotimi Best <[email protected]>
2024-11-19 14:42:08 +01:00
parent bfed98b523
commit b6c2563d79
12 changed files with 10614 additions and 7861 deletions
@@ -5,7 +5,7 @@

 <div class="border-t-[1px] px-[2%] lg:px-[14%]">
  <div class="flex flex-col items-center justify-between py-[10%] pl-5 lg:flex-row lg:pl-0">
-    <div class="w-full lg:w-2/4">
+    <div class="w-full min-w-[200px] lg:w-3/12">
      <img
        width="32"
        height="32"
@@ -40,12 +40,12 @@
        </a>
        <a href="https://twitter.com/classroomio" target="_blank" aria-label="Twitter Link">
          <img
-            width="10"
-            height="10"
+            width="20"
+            height="20"
            loading="lazy"
-            src="/twitter_logo.png"
+            src="/twitter.svg"
            alt=""
-            class="w-3 scale-90 cursor-pointer transition-all hover:scale-110 hover:fill-gray-500 lg:scale-150"
+            class="scale-90 cursor-pointer transition-all hover:scale-110 hover:fill-gray-500 lg:scale-150"
          />
        </a>
        <a href="https://www.youtube.com/@ClassroomIO" target="_blank" aria-label="Youtube Link">
@@ -58,9 +58,9 @@
    </div>

    <nav
-      class="mt-16 flex w-full flex-col items-start justify-between gap-3 space-y-6 lg:mt-0 lg:w-2/4 lg:flex-row lg:space-y-0"
+      class="mt-16 flex w-full min-w-[400px] flex-col items-start justify-end gap-12 space-y-6 lg:mt-0 lg:w-3/4 lg:flex-row lg:space-y-0"
    >
-      <div>
+      <div class="max-w-[120px]">
        <p class="lg:text-base mb-3 text-base font-semibold leading-6 text-gray-900 lg:mb-10">
          Product
        </p>
@@ -93,7 +93,30 @@
        </ul>
      </div>

-      <div>
+      <div class="max-w-[120px]">
+        <p class="lg:text-base mb-3 text-base font-semibold leading-6 text-gray-900 lg:mb-10">
+          Solutions
+        </p>
+        <ul class="space-y-2 lg:space-y-4">
+          <li
+            class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
+          >
+            <a href="/employee-training">Employee Training</a>
+          </li>
+          <li
+            class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
+          >
+            <a href="/bootcamps">Bootcamps</a>
+          </li>
+          <li
+            class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
+          >
+            <a href="/customer-education">Customer Education</a>
+          </li>
+        </ul>
+      </div>
+
+      <div class="max-w-[120px]">
        <p class="lg:text-base mb-3 text-base font-semibold leading-6 text-gray-900 lg:mb-10">
          Resources
        </p>
@@ -128,7 +151,7 @@
        </ul>
      </div>

-      <div>
+      <div class="max-w-[120px]">
        <p class="lg:text-base mb-3 text-base font-semibold leading-6 text-gray-900 lg:mb-10">
          Company
        </p>
@@ -20,12 +20,12 @@
          </div>
        </div>
        <div class="text-base leading-snug text-center">
-          <span class="font-bold opacity-50">“</span>
+          <span class="font-bold opacity-50 text-4xl">“</span>
          <span class="text-gray-800" style="font-size: 17px;"
            >ClassroomIO really helped me bootstrap my program. The dashboard is extremely
            intuitive. I could navigate most of it without any help / support. Coming from framer, I
            can honestly say that I am extremely greatful that I found ClassroomIO.</span
-          > <span class="font-bold opacity-50 inline-block">”</span>
+          > <span class="font-bold opacity-50 inline-block text-4xl">”</span>
        </div>
        <div class="mx-auto flex items-center gap-2 justify-center">
          <div
@@ -107,46 +107,6 @@
        {/key}
      </div>
    </div>
-
-    <!-- free tools section -->
-    <div class="mt-10">
-      <div class="text-center">
-        <h1 class="text-3xl md:text-5xl font-bold m-0">
-          Explore Our <span class="text-[#0233BD]">Free Tools</span>
-        </h1>
-        <p class="text-sm md:text-base text-[#334155] md:w-[65%] mt-5 mx-auto">
-          Innovative tools to help you aid you example preparation, as well as making learning more
-          fun for students and educator looking for engaging resources.
-        </p>
-      </div>
-
-      <div class="flex justify-evenly gap-y-8 flex-wrap w-full mt-10 mx-auto">
-        {#each freeTools as tool}
-          <a
-            class="w-full flex flex-col gap-3 max-w-[400px] md:max-w-[300px] mt-5 p-5 border rounded-md bg-white shadow-sm hover:scale-95 transition-all ease-in-out cursor-pointer"
-            href="/tools/{tool.slug}"
-          >
-            <img class="w-[30%] rounded-full border border-[#EAEAEA]" src={tool.src} alt="" />
-            <div class="rounded-r-md p-3">
-              <h1 class="font-bold text-sm md:text-base">{tool.title}</h1>
-              <p class="text-xs text-gray-600 mt-1.5">
-                {tool.subText}
-              </p>
-            </div>
-          </a>
-        {/each}
-      </div>
-
-      <div class="flex justify-center items-center mt-20">
-        <a
-          class="md:text-base w-full md:max-w-[300px] max-w-[400px] rounded-md bg-blue-700 px-6 py-3 lg:px-6 lg:py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl hover:scale-95 lg:font-semibold cursor-pointer"
-          href="/tools"
-          rel="noopener noreferrer nofollow"
-        >
-          More Tools
-        </a>
-      </div>
-    </div>
  </div>
 </section>

@@ -3,50 +3,54 @@
  import TextAlignJustify from 'carbon-icons-svelte/lib/TextAlignJustify.svelte';
  import CloseLarge from 'carbon-icons-svelte/lib/CloseLarge.svelte';
  import { fly } from 'svelte/transition';
-  import MachineLearningModel from 'carbon-icons-svelte/lib/MachineLearningModel.svelte';
  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 { page } from '$app/stores';

-  let showsubNav = false;
-  let showNav = false;
+  let showDrawer = false;
+  let showSolutions = false;
  let activeLink = '';
+  let closeTimeout: NodeJS.Timeout;

-  function handleShow() {
-    showsubNav = !showsubNav;
+  function closeSolutions() {
+    closeTimeout = setTimeout(() => {
+      showSolutions = false;
+    }, 100);
+  }
+  function resetCloseTimeout() {
+    clearTimeout(closeTimeout);
  }

-  function handleShowNav() {
-    showNav = !showNav;
+  function handleShowDrawer() {
+    showDrawer = !showDrawer;
  }

-  const superpowers = [
+  function handleShowSolutions() {
+    showSolutions = !showSolutions;
+  }
+
+  const solutions = [
    {
-      key: 'coursemanagement',
-      title: 'Course Management',
-      subtitle: 'Simple course management tools'
+      key: 'employee-training',
+      title: 'Employee Training',
+      subtitle: 'Keep your team in sync.'
    },
    {
-      key: 'ai',
-      title: 'AI Support',
-      subtitle: 'Double your productivity with AI'
+      key: 'bootcamps',
+      title: 'Bootcamps',
+      subtitle: 'Drive student satisfaction.'
    },
    {
-      key: 'customization',
-      title: 'Dashboard Customization',
-      subtitle: 'Customize your classroom to your needs'
-    },
-    {
-      key: 'collaboration',
-      title: 'Community',
-      subtitle: 'Seamlessly collaborate with your students'
+      key: 'customer-education',
+      title: 'Customer Education',
+      subtitle: 'Teach customers your product.'
    }
  ];

  $: activeLink = $page.url.pathname;
  $: activeHash = $page.url.hash;
-  $: isSuperpowersActive = superpowers.some((sp) => activeHash.includes(sp.key));
+  $: isSolutionsActive = solutions.some((s) => activeHash.includes(s.key));
 </script>

 <div
@@ -67,47 +71,51 @@
  </a>

  <nav class="w-[50%] hidden md:hidden lg:block">
-    <ul class="flex items-center justify-between w-full gap-2">
+    <ul class="flex justify-center items-center w-full gap-5">
      <li class="text-gray-800 font-semibold text-sm cursor-pointer relative">
        <button
-          class="flex items-center hover:bg-gray-100 px-4 py-2 rounded-md"
-          on:click={() => (showNav = !showNav)}
-          class:active={isSuperpowersActive}
+          on:focus={() => (showSolutions = true)}
+          on:mouseenter={() => (showSolutions = true)}
+          on:mouseleave={closeSolutions}
+          class="flex items-center hover:bg-gray-100 {showSolutions &&
+            'bg-gray-100'} px-4 py-2 rounded-md"
+          on:click={() => (showSolutions = !showSolutions)}
+          class:active={isSolutionsActive}
        >
-          Our Superpowers <ChevronDown class="ml-2" />
+          <span class="mr-2">Solutions</span>
+          <ChevronDown size={16} />
        </button>
-        {#if showNav}
-          <div
-            class="absolute w-[24rem] top-10 -left-10 border px-5 py-5 rounded-[30px] shadow-slate-700 z-[3001] bg-white"
+        {#if showSolutions}
+          <button
+            class="absolute w-[20rem] top-10 -left-10 border rounded-lg px-2 py-4 shadow-slate-700 z-[3001] bg-white flex flex-col gap-3"
+            on:mouseenter={resetCloseTimeout}
+            on:mouseleave={() => (showSolutions = false)}
          >
-            {#each superpowers as superpower}
+            {#each solutions as solution}
              <a
-                class="flex justify-between items-center w-full rounded-lg hover:bg-gray-100 p-5 mb-4"
-                href="/#{superpower.key}"
-                on:click={() => {
-                  showNav = !showNav;
-                }}
+                class="flex justify-between items-center w-full rounded-lg hover:bg-gray-100 hover:cursor-pointer p-2"
+                href="/{solution.key}"
+                on:click={() => (showSolutions = false)}
              >
-                {#if superpower.key === 'coursemanagement'}
+                {#if solution.key === 'employee-training'}
                  <CourseIcon />
-                {:else if superpower.key === 'customization'}
+                {:else if solution.key === 'bootcamps'}
                  <MapCenter size={24} />
-                {:else if superpower.key === 'collaboration'}
+                {:else if solution.key === 'customer-education'}
                  <ForumIcon size={24} />
-                {:else if superpower.key === 'ai'}
-                  <MachineLearningModel size={24} />
                {/if}
-                <div class="w-[86%] text-start">
+
+                <div class="w-[84%] text-start">
                  <h3 class="font-semibold text-sm text-gray-700">
-                    {superpower.title}
+                    {solution.title}
                  </h3>
                  <p class="font-normal text-sm text-gray-600">
-                    {superpower.subtitle}
+                    {solution.subtitle}
                  </p>
                </div>
              </a>
            {/each}
-          </div>
+          </button>
        {/if}
      </li>
      <a
@@ -117,14 +125,6 @@
      >
        <li class="hover:bg-gray-100 px-4 py-2 rounded-md">Free Tools</li>
      </a>
-      <!-- <a
-        href="/docs"
-        target="_blank"
-        class="text-gray-800 font-semibold text-sm cursor-pointer"
-        class:active={activeLink.startsWith('/docs')}
-      >
-        <li class="hover:bg-gray-100 px-4 py-2 rounded-md">Docs</li>
-      </a> -->

      <a
        href="/blog"
@@ -172,10 +172,12 @@
    type="button"
    aria-label="Hamburger Menu"
    class="block md:block lg:hidden"
-    on:click={handleShowNav}><TextAlignJustify size={24} /></button
+    on:click={handleShowSolutions}
  >
+    <TextAlignJustify size={24} />
+  </button>

-  {#if showNav}
+  {#if showSolutions}
    <div
      in:fly={{ x: 20, duration: 700 }}
      out:fly={{ x: 20, duration: 400 }}
@@ -190,31 +192,33 @@
          alt="classroomio logo"
          class="w-[15%]"
        />
-        <button on:click={handleShowNav}><CloseLarge size={24} class="mr-5" /></button>
+        <button class="mr-5" on:click={handleShowSolutions}>
+          <CloseLarge size={24} />
+        </button>
      </div>
      <nav>
        <ul class="flex items-center flex-col lg:flex-row justify-between w-full">
          <li class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer w-full">
            <button
              class="w-full flex items-center justify-between hover:bg-gray-100 py-3 px-4 rounded-lg"
-              on:click={handleShow}
-              class:active={isSuperpowersActive}
+              on:click={handleShowDrawer}
+              class:active={isSolutionsActive}
            >
              Our Superpowers <ChevronDown />
            </button>
-            {#if showsubNav}
+            {#if showDrawer}
              <div in:fly={{ y: -20, duration: 700 }} out:fly={{ y: 20, duration: 400 }}>
-                {#each superpowers as superpower}
+                {#each solutions as solution}
                  <a
-                    href="/#{superpower.key}"
+                    href="/{solution.key}"
                    on:click={() => {
-                      handleShowNav();
+                      handleShowSolutions();
                    }}
                  >
                    <p
                      class="font-normal text-xs text-gray-700 hover:bg-gray-100 rounded-lg py-2.5 pl-5"
                    >
-                      {superpower.title}
+                      {solution.title}
                    </p>
                  </a>
                {/each}
@@ -224,7 +228,7 @@
          <!-- Free Tools -->
          <a
            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"
-            on:click={handleShowNav}
+            on:click={handleShowSolutions}
            href="/tools"
          >
            <li>Free Tools</li>
@@ -232,7 +236,7 @@
          <!-- <a
            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"
            on:click={() => {
-              handleShowNav();
+              handleShowSolutions();
            }}
            class:active={activeLink.startsWith('/docs')}
            href="/docs"
@@ -243,7 +247,7 @@
          <a
            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"
            on:click={() => {
-              handleShowNav();
+              handleShowSolutions();
            }}
            class:active={activeLink.startsWith('/blog')}
            href="/blog"
@@ -254,7 +258,7 @@
          <a
            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"
            on:click={() => {
-              handleShowNav();
+              handleShowSolutions();
            }}
            href="/pricing"
            class:active={activeLink.startsWith('/pricing')}
@@ -264,7 +268,7 @@
          <a
            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"
            on:click={() => {
-              handleShowNav();
+              handleShowSolutions();
            }}
            class:active={activeHash.includes('morefeatures')}
            href="/#morefeatures"
@@ -7,7 +7,7 @@
 </script>

 <div
-  class="floating grad relative mx-auto my-[5%] flex h-[61vh] w-[100%] flex-col items-center justify-center px-[6%] py-[12%] text-center shadow-2xl lg:h-[54vh] lg:w-[70%] lg:rounded-3xl"
+  class="floating grad relative mx-auto my-[5%] flex h-[61vh] w-[100%] flex-col items-center justify-center px-[6%] py-[12%] text-center shadow-2xl lg:h-[54vh] lg:w-[70%] lg:rounded-3xl max-w-4xl"
 >
  <div>
    <h1
@@ -0,0 +1,246 @@
+<script>
+  import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
+  import PageHeader from '$lib/PageHeader/PageHeader.svelte';
+
+  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 justify-center items-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"
+  >
+    <div class="bg-[#DCE5FF] py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
+      <p class=" text-sm md:text-base text-[#4B5563] text-center font-medium">
+        Solution for Bootcamps
+      </p>
+    </div>
+    <div
+      class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-8"
+    >
+      <div
+        class="w-full max-w-screen-xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
+      >
+        <h1
+          class="mx-auto m-0 text-4xl lg:text-7xl md:text-6xl font-bold text-slate-900 lg:text-center"
+        >
+          The platform for fast
+          <span class="text-blue-700 relative"> growing bootcamps</span>
+        </h1>
+        <p class="lg:w-[60%] text-base md:text-lg lg:text-center font-normal text-slate-700">
+          From AI powered course creation to student collaboration tools, ClassroomIO provides
+          everything you need to run a cutting-edge, high-impact bootcamp.
+        </p>
+      </div>
+      <a
+        href="/signup"
+        target="_blank"
+        class="py-5 px-6 bg-[#1D4ED8] border-transparent outline-transparent rounded-lg text-white text-lg font-semibold"
+      >
+        Get Started for Free 🚀
+      </a>
+    </div>
+  </PageHeader>
+
+  <section
+    class="w-full lg:py-24 py-16 lg:px-28 md:px-16 px-6 flex flex-col lg:items-center lg:justify-between justify-center gap-y-12"
+  >
+    <div
+      class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
+    >
+      <div class="w-fit py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
+        <p class=" text-sm md:text-base font-medium">Our benefits</p>
+      </div>
+      <div
+        class="lg:w-full max-w-screen-xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
+      >
+        <h1 class="text-3xl md:text-5xl font-bold">Inspire Student Success</h1>
+        <p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
+          Scale your bootcamp with ClassroomIO's comprehensive toolkit. Create engaging content,
+          foster community, and drive student achievement.
+        </p>
+      </div>
+    </div>
+
+    <div
+      class="w-full max-w-screen-xl flex lg:flex-row flex-col lg:justify-between justify-start gap-6 lg:items-center items-start"
+    >
+      {#each benefitDetails as benefits}
+        <div class="w-full md:p-6 p-4 border border-[#D9E0F5] rounded-2xl flex flex-col gap-y-6">
+          <img
+            class="w-[48px] h-[48px]"
+            src="https://assets.cdn.clsrio.com/www/bootcamps/{benefits.icon}"
+            alt="brain"
+          />
+
+          <div class="w-full flex flex-col justify-start align-start gap-y-2">
+            <h1 class="text-xl font-medium">{benefits.title}</h1>
+
+            {#each benefits.points as point}
+              <div class="flex flex-row justify-start items-start gap-x-3">
+                <img
+                  src="https://assets.cdn.clsrio.com/www/bootcamps/{benefits.checkMark}"
+                  alt="check mark"
+                />
+                <p class="leading-8 text-gray-500 font-[#656565] font-light">
+                  {point}
+                </p>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </section>
+
+  <section
+    class="w-full bg-[#F1F6FF] flex flex-col items-center justify-center gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
+  >
+    <div
+      class="w-full max-w-screen-xl gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
+    >
+      <div class="w-fit py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
+        <p class=" text-sm md:text-base font-medium">Explore our features</p>
+      </div>
+      <div
+        class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
+      >
+        <h1 class="text-3xl md:text-5xl font-bold">Why We're the Perfect Fit</h1>
+        <p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
+          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="w-full max-w-screen-xl flex flex-col justify-start items-center lg:gap-y-24 gap-y-16"
+    >
+      {#each featureDetails as feature, i}
+        <div
+          class="w-full lg:w-[70%] flex lg:flex-row {i % 2 !== 0
+            ? 'lg:flex-row-reverse'
+            : ''} flex-col lg:justify-between justify-between lg:items-center items-start gap-10"
+        >
+          <div
+            class="w-full max-w-sm lg:w-[40%] lg:gap-y-6 gap-y-3 flex flex-col items-start justify-start"
+          >
+            <img
+              class="w-[48px] h-[48px]"
+              src="https://assets.cdn.clsrio.com/www/bootcamps/{feature.icon}"
+              alt="team icon"
+            />
+            <div class="md:w-full flex flex-col items-start justify-start gap-y-4">
+              <h1 class="font-bold text-4xl">{feature.title}</h1>
+              <p class="leading-8 text-lg text-gray-500">
+                {feature.description}
+              </p>
+            </div>
+
+            {#if feature.ctaLink}
+              <a
+                class="py-4 px-8 border border-[#1D4ED8] outline-transparent rounded text-[#1D4ED8] text-sm font-semibold"
+                href={feature.ctaLink}
+                target="_blank noopener noreferrer"
+              >
+                {feature.ctaLabel}
+              </a>
+            {:else}
+              <button
+                class="py-4 px-8 border border-[#1D4ED8] outline-transparent rounded text-[#1D4ED8] text-sm font-semibold"
+                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,213 @@
+<script>
+  import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
+  import PageHeader from '$lib/PageHeader/PageHeader.svelte';
+
+  const benefitDetails = [
+    {
+      icon: 'personalised.svg',
+      title: 'Personalized Learning',
+      description: 'Offer branded landing pages and multilingual courses for diverse customers.'
+    },
+    {
+      icon: 'structured.svg',
+      title: 'Structured Education',
+      description: 'Create engaging courses with AI-assisted content generation.'
+    },
+    {
+      icon: 'simplified.svg',
+      title: 'Simplified Management',
+      description:
+        'Centralize and easily manage, share, and distribute all customer education materials.'
+    }
+  ];
+
+  const featureDetails = [
+    {
+      icon: 'landing-i.svg',
+      img: 'landing.svg',
+      title: 'Dedicated landing page',
+      description:
+        'We give you a customisable landing page that can be shared with your customers who are interested in learning about your products'
+    },
+    {
+      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: 'globe.svg',
+      img: 'language.svg',
+      title: 'Multi language support',
+      description:
+        'We support 6 languages and you can deploy courses in different languages to support different demographics'
+    },
+    {
+      icon: 'paths.svg',
+      img: 'pathways.svg',
+      title: 'Pathways',
+      description:
+        'With the introduction of pathways, you can group multiple courses into one comprehensive learning pathway'
+    }
+  ];
+</script>
+
+<svelte:head>
+  <title>Customer Education | ClassroomIO</title>
+</svelte:head>
+
+<section class="flex flex-col justify-center items-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"
+  >
+    <div class="bg-[#DCE5FF] py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
+      <p class=" text-sm md:text-base text-[#4B5563] text-center font-medium">
+        Solution for Customer Education
+      </p>
+    </div>
+    <div
+      class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-8"
+    >
+      <div
+        class="w-full max-w-screen-xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
+      >
+        <h1
+          class="w-[95%] mx-auto m-0 text-4xl lg:text-7xl md:text-6xl font-bold text-slate-900 lg:text-center"
+        >
+          Drive retention and revenue with
+          <span class="text-blue-700 relative">Customer Education</span>
+        </h1>
+        <p class="lg:w-[60%] text-base md:text-lg lg:text-center font-normal text-slate-700">
+          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>
+      <a
+        href="/signup"
+        target="_blank"
+        class="py-5 px-6 bg-[#1D4ED8] border-transparent outline-transparent rounded-lg text-white text-lg font-semibold"
+      >
+        Get Started for Free 🚀
+      </a>
+    </div>
+  </PageHeader>
+
+  <section
+    class="w-full lg:py-24 py-16 lg:px-28 md:px-16 px-8 flex flex-col lg:items-center lg:justify-between justify-center gap-y-12"
+  >
+    <div
+      class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
+    >
+      <div class="w-fit py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
+        <p class="text-sm md:text-base font-medium">Our benefits</p>
+      </div>
+      <div
+        class="lg:w-full max-w-screen-xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
+      >
+        <h1 class="text-3xl md:text-5xl font-bold">The customer education toolkit</h1>
+        <p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
+          Create beautiful, branded landing pages to showcase your courses and get customers up to
+          speed quickly
+        </p>
+      </div>
+    </div>
+
+    <div
+      class="w-full max-w-screen-xl flex lg:flex-row flex-col lg:justify-between justify-start gap-6 lg:items-center items-start"
+    >
+      {#each benefitDetails as benefits}
+        <div class="w-full md:p-6 p-4 border border-[#D9E0F5] rounded-2xl flex flex-col gap-y-6">
+          <img
+            class="w-[48px] h-[48px]"
+            src="https://assets.cdn.clsrio.com/www/customer-education/{benefits.icon}"
+            alt="icon"
+          />
+
+          <div class="w-full flex flex-col justify-start align-start gap-y-2">
+            <h1 class="text-xl font-medium">{benefits.title}</h1>
+
+            <div class="flex flex-row justify-start items-start gap-x-3">
+              <p class="leading-8 text-gray-500 font-[#656565] font-light">
+                {benefits.description}
+              </p>
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </section>
+
+  <section
+    class="w-full bg-[#F1F6FF] flex flex-col items-center justify-center gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
+  >
+    <div
+      class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
+    >
+      <div class="w-fit py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
+        <p class=" text-sm md:text-base text-[#4B5563] text-center font-medium">
+          Explore our features
+        </p>
+      </div>
+      <div
+        class="lg:w-full max-w-screen-xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
+      >
+        <h1 class="text-3xl md:text-5xl font-bold">Why Choose Us For Education Needs</h1>
+        <p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
+          Discover how our innovative solutions can reduce stress, enhance productivity, and achieve
+          your training goals.
+        </p>
+      </div>
+    </div>
+
+    <div
+      class="w-full max-w-screen-xl flex flex-col justify-start items-center lg:gap-y-24 gap-y-16"
+    >
+      {#each featureDetails as feature, i}
+        <div
+          class="w-full lg:w-[70%] flex lg:flex-row {i % 2 !== 0
+            ? 'lg:flex-row-reverse'
+            : ''} flex-col lg:justify-between justify-start lg:items-center items-start gap-10"
+        >
+          <div
+            class="w-full max-w-sm lg:w-[40%] lg:gap-y-6 gap-y-3 flex flex-col items-start justify-start"
+          >
+            <img
+              src="https://assets.cdn.clsrio.com/www/customer-education/{feature.icon}"
+              alt="team icon"
+            />
+            <div class="md:w-full flex flex-col items-start justify-start gap-y-4">
+              <h1 class="font-bold text-4xl">{feature.title}</h1>
+              <p class="leading-8 text-lg text-gray-500">
+                {feature.description}
+              </p>
+            </div>
+            <button
+              class="py-4 px-8 border border-[#1D4ED8] outline-transparent rounded text-[#1D4ED8] text-sm font-semibold"
+              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}
+    </div>
+  </section>
+
+  <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}
+  />
+</section>
@@ -0,0 +1,233 @@
+<script>
+  import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
+  import PageHeader from '$lib/PageHeader/PageHeader.svelte';
+
+  const benefitDetails = [
+    {
+      icon: 'light-bulb.svg',
+      title: 'Increased Engagement',
+      description: 'Interactive courses and collaborative features keep employees motivated.'
+    },
+    {
+      icon: 'learning.svg',
+      title: 'Streamlined Learning',
+      description: 'Centralized platform for all training materials and progress tracking.'
+    },
+    {
+      icon: 'pie-chart.svg',
+      title: 'Data-Driven Insights',
+      description: 'Gain valuable insights into employee performance and learning patterns.'
+    },
+    {
+      icon: 'paint-brush.svg',
+      title: 'Customizable Experience',
+      description: "Tailor the learning experience to your company's specific needs and branding."
+    }
+  ];
+
+  const featureDetails = [
+    {
+      icon: 'team-mgnt.svg',
+      img: 'team-mgnt2.svg',
+      title: 'Team management',
+      description:
+        'You can invite managers and employees to create and take trainings at scale in your organization.'
+    },
+    {
+      icon: 'colour-pallete.svg',
+      img: 'custom.svg',
+      title: 'Custom branding',
+      description:
+        'With our customizable platform, you can set your company logo, brand color and add a custom domain to your employee LMS.'
+    },
+    {
+      icon: 'cup.svg',
+      img: 'progress.svg',
+      title: 'Track employee progress',
+      description: 'You can track the progress of your employees and assist whoever needs help.'
+    }
+  ];
+</script>
+
+<svelte:head>
+  <title>Employee Training | ClassroomIO</title>
+</svelte:head>
+
+<section class="flex flex-col justify-center items-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"
+  >
+    <div class="bg-[#DCE5FF] py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
+      <p class=" text-sm md:text-base text-[#4B5563] text-center font-medium">
+        Unlock your team's potential
+      </p>
+    </div>
+    <div
+      class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-8"
+    >
+      <div
+        class="w-full max-w-screen-xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
+      >
+        <h1
+          class="mx-auto m-0 text-4xl lg:text-7xl md:text-6xl font-bold text-slate-900 lg:text-center"
+        >
+          Employee training software for
+          <br /><span class="text-blue-700 relative">modern teams</span>
+        </h1>
+        <p class="lg:w-[60%] text-base md:text-lg lg:text-center font-normal text-slate-700">
+          With ClassroomIO, you can keep your teams in sync with company standards as they change
+          quickly.
+        </p>
+      </div>
+      <button
+        class="py-5 px-6 bg-[#1D4ED8] border-transparent outline-transparent rounded-lg text-white text-lg font-semibold"
+        >Get Started for Free 🚀</button
+      >
+    </div>
+  </PageHeader>
+
+  <section
+    class="w-full max-w-screen-xl lg:py-24 py-16 lg:px-28 md:px-16 px-8 flex lg:flex-row flex-col lg:items-center lg:justify-between justify-center gap-x-6 gap-y-8"
+  >
+    <div class="w-full lg:w-[35%] gap-y-4 flex flex-col items-start justify-start">
+      <div class="w-fit py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
+        <p class=" text-sm md:text-base font-medium">Amazing benefits</p>
+      </div>
+
+      <div class="md:w-full flex flex-col items-start justify-start gap-y-4">
+        <h1 class="font-bold text-4xl">Unlock your team's potential</h1>
+        <p class="leading-8 text-lg text-gray-500">
+          Modern teams require solutions that are easy to use and allows them move quickly.
+        </p>
+      </div>
+    </div>
+    <div
+      class="lg:w-[60%] lg:min-w-[450px] w-full flex flex-col lg:flex-wrap lg:flex-row justify-start items-center gap-6"
+    >
+      {#each benefitDetails as benefits}
+        <div
+          class="w-full lg:w-[47%] min-w-[220px] md:p-6 p-4 border border-[#D9E0F5] rounded-2xl flex flex-col grow gap-y-6"
+        >
+          <img
+            class="w-[48px] h-[48px]"
+            src="https://assets.cdn.clsrio.com/www/employee-training/{benefits.icon}"
+            alt="light-bulb"
+          />
+
+          <div class="w-full flex flex-col justify-start align-start gap-y-2">
+            <h1 class="text-xl font-medium">{benefits.title}</h1>
+            <p class="leading-8 text-gray-500 font-[#656565] font-light">
+              {benefits.description}
+            </p>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </section>
+
+  <section
+    class="w-full bg-[#F1F6FF] flex flex-col items-center justify-start gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
+  >
+    <div
+      class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
+    >
+      <div class="w-fit py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
+        <p class="text-sm md:text-base text-[#4B5563] text-center font-medium">
+          Explore our features
+        </p>
+      </div>
+      <div
+        class="lg:w-full max-w-screen-xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
+      >
+        <h1 class="text-3xl md:text-5xl font-bold">What makes us the right choice</h1>
+        <p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
+          Discover why we’re the perfect partner for your employee training needs. Experience
+          innovative solutions designed to reduce stress and enhance productivity.
+        </p>
+      </div>
+    </div>
+
+    <div
+      class="w-full max-w-screen-xl flex flex-col justify-start items-center lg:gap-y-24 gap-16 p-2"
+    >
+      {#each featureDetails as feature, i}
+        <div
+          class="w-full lg:w-[70%] flex lg:flex-row {i % 2 !== 0
+            ? 'lg:flex-row-reverse'
+            : ''} flex-col justify-between lg:items-center items-start gap-10"
+        >
+          <div
+            class="w-fit max-w-sm lg:w-[40%] lg:gap-y-6 gap-y-3 flex flex-col items-start justify-start"
+          >
+            <img
+              class="w-[48px] h-[48px]"
+              src="https://assets.cdn.clsrio.com/www/employee-training/{feature.icon}"
+              alt="team icon"
+            />
+            <div class="md:w-full flex flex-col items-start justify-start gap-y-4">
+              <h1 class="font-bold text-4xl">{feature.title}</h1>
+              <p class="leading-8 text-lg text-gray-500">
+                {feature.description}
+              </p>
+            </div>
+            <button
+              class="py-4 px-8 border border-[#1D4ED8] outline-transparent rounded text-[#1D4ED8] text-sm font-semibold"
+              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="team management feature ui"
+            />
+          </div>
+        </div>
+      {/each}
+    </div>
+  </section>
+
+  <section
+    class="w-full bg-[#040F2D] flex flex-col items-center justify-start gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
+  >
+    <div
+      class="w-full max-w-screen-xl flex lg:flex-row-reverse flex-col-reverse lg:justify-between justify-start lg:items-center items-start gap-y-8"
+    >
+      <div class="w-full lg:w-[40%] gap-y-4 flex flex-col items-start justify-start">
+        <div class="md:w-full flex flex-col items-start justify-start gap-y-4">
+          <h1 class="font-bold text-4xl text-white">
+            Did you know you can request for custom features?
+          </h1>
+          <p class="leading-8 text-[#DEDEDE] text-xl font-light">
+            Companies get the opportunity to request custom features from us.
+          </p>
+        </div>
+        <a
+          href="/demo"
+          target="_blank"
+          class="py-4 px-8 border border-tranparent outline-transparent bg-white rounded text-[#040F2D] text-sm font-semibold"
+        >
+          Talk to sales
+        </a>
+      </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="Give your team the training they deserve"
+    subText="It's free to sign up and start getting value out of the product."
+    btnLabel="Sign me up"
+    link="/signup"
+    demo={false}
+  />
+</section>
@@ -1,11 +1,5 @@
 import { redirect } from '@sveltejs/kit';
-import { client } from '$lib/utils/posthog';

 export const load = ({ request }) => {
-  client.capture({
-    distinctId: request.headers.get('x-forwarded-for') || new Date().getTime().toString(),
-    event: 'cal.com page visited'
-  });
-
  redirect(307, 'https://heyform.net/f/1qkguGkN');
 };
@@ -0,0 +1,15 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9364_22419)">
+<mask id="mask0_9364_22419" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="30" height="31">
+<path d="M0 0.360352H30V30.3604H0V0.360352Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_9364_22419)">
+<path d="M24.325 7.94238H27.6989L20.3289 16.3872L29 27.8807H22.2114L16.8906 20.9114L10.8091 27.8807H7.43214L15.3144 18.845L7 7.94395H13.9614L18.7637 14.313L24.325 7.94238ZM23.1386 25.8567H25.0086L12.94 9.8611H10.9349L23.1386 25.8567Z" fill="#9CA3AF"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_9364_22419">
+<rect width="30" height="30" fill="white" transform="translate(0 0.360352)"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,15 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9364_22419)">
+<mask id="mask0_9364_22419" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21">
+<path d="M0 0.360352H20V20.3604H0V0.360352Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_9364_22419)">
+<path d="M15.034 2.94238H17.5722L12.0276 9.29563L18.5511 17.9424H13.4439L9.44089 12.6992L4.8657 17.9424H2.32511L8.25512 11.1446L2 2.94357H7.23723L10.8501 7.7351L15.034 2.94238ZM14.1414 16.4197H15.5482L6.46879 4.38587H4.96028L14.1414 16.4197Z" fill="#9CA3AF"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_9364_22419">
+<rect width="20" height="20" fill="white" transform="translate(0 0.360352)"/>
+</clipPath>
+</defs>
+</svg>