From ca466b54314b97362471117b26ddf5d3b3ed4f8d Mon Sep 17 00:00:00 2001
From: Adeyemi Adetunji <tvnji01@gmail.com>
Date: Mon, 15 Apr 2024 19:56:45 +0100
Subject: [PATCH] chore: landing page improvements (#262)

* text animation

* feat: add colors to text

* chore: add "in minutes" text

* responsiveness fix

* update

* refactor

* improvements

* Center text tags

* center text tag

* update text

---------

Co-authored-by: Rotimi Best <best@classroomio.com>
---
 apps/classroomio-com/src/lib/Body/Body.svelte | 30 +++++------
 apps/classroomio-com/src/lib/Hero/Hero.svelte | 54 +++++++++++++++----
 .../src/lib/Navigation/Navigation.svelte      | 16 +++---
 .../StudentDashboard/StudentDashboard.svelte  |  2 +-
 .../src/lib/Testimonial/Testimonial.svelte    |  6 +--
 .../contributor-guides/student-dashboard.mdx  |  2 +-
 6 files changed, 70 insertions(+), 40 deletions(-)

diff --git a/apps/classroomio-com/src/lib/Body/Body.svelte b/apps/classroomio-com/src/lib/Body/Body.svelte
index 287fc56d..d54351a5 100644
--- a/apps/classroomio-com/src/lib/Body/Body.svelte
+++ b/apps/classroomio-com/src/lib/Body/Body.svelte
@@ -6,38 +6,34 @@
 <Section
   id="coursemanagement"
   tagline="Simplified"
-  taglineIcon="simplified"
-  title="Advanced Course Management"
+  title="Course Management"
   description="ClassroomIO simplifies teaching tasks, boosts the educational experience, and is beneficial for both educators and students, providing a user-friendly platform for assessment, grading, attendance, and scorebook management."
   video="https://brand.cdn.clsrio.com/course-management.mp4"
   rightToLeft={true}
 />
+<Section
+  id="ai"
+  tagline="Efficient"
+  title="AI Support"
+  description="Our platform integrates AI to simplify lesson outline generation, streamline lesson planning and spark creative ideas. With ClassroomIO, educators can focus on what matters most: teaching."
+  rightToLeft={false}
+  video="https://brand.cdn.clsrio.com/ai-lesson.mp4"
+/>
 <Section
   id="customization"
   tagline="Flexible"
-  taglineIcon="flexible"
-  title="Customization at its Core"
+  title="Dashboard Customization"
   description="ClassroomIO offers organizations the ability to tailor our LMS to their specific requirements. With our customizable features, you can create a personalized learning environment that aligns with your organization's goals"
   rightToLeft={true}
   video="https://brand.cdn.clsrio.com/lms-customization.mp4"
 />
 <Section
   id="collaboration"
-  tagline="Collaboration"
-  taglineIcon="collaboration"
-  title="Your Knowledge Base"
+  tagline="Collaborative"
+  title="Student and Teacher Community"
   description="Our platform includes a forum-like feature where students and teachers can ask and answer questions, creating a collaborative learning environment. This fosters engagement and knowledge sharing among the community"
   video="https://brand.cdn.clsrio.com/community.mp4"
-  rightToLeft={true}
-/>
-<Section
-  id="ai"
-  tagline="Productivity"
-  taglineIcon="productivity"
-  title="AI Integration for Lesson Planning"
-  description="Our platform integrates AI to simplify lesson outline generation, streamline lesson planning and spark creative ideas. With ClassroomIO, educators can focus on what matters most: teaching."
-  rightToLeft={true}
-  video="https://brand.cdn.clsrio.com/ai-lesson.mp4"
+  rightToLeft={false}
 />
 
 <!-- body section 5 -->
diff --git a/apps/classroomio-com/src/lib/Hero/Hero.svelte b/apps/classroomio-com/src/lib/Hero/Hero.svelte
index 4704e775..2ca85817 100644
--- a/apps/classroomio-com/src/lib/Hero/Hero.svelte
+++ b/apps/classroomio-com/src/lib/Hero/Hero.svelte
@@ -1,15 +1,32 @@
-<script>
-  import { onMount } from 'svelte';
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
   import { fly } from 'svelte/transition';
   import { sineInOut } from 'svelte/easing';
   import { PUBLIC_ENABLE_USERS_COMPANIES } from '$env/static/public';
 
+  const names = [
+    { label: 'Bootcamp', color: '#3ADFEC' },
+    { label: 'Course', color: '#BF0696' },
+    { label: 'Training', color: '#0233BD' },
+    { label: 'Academy', color: '#9747FF' }
+  ];
   let animate = false;
+  let titleIndex = 0;
+  let timeout: NodeJS.Timer;
 
   onMount(() => {
     setTimeout(() => {
       animate = true;
     }, 70);
+
+    timeout = setInterval(() => {
+      const nextIndex = titleIndex + 1;
+      titleIndex = names[nextIndex] ? nextIndex : 0;
+    }, 3000);
+  });
+
+  onDestroy(() => {
+    clearTimeout(timeout);
   });
 </script>
 
@@ -26,7 +43,7 @@
       >
     </div>
 
-    <div class="justify-between w-[90%] absolute top-[10%] left-[4%] hidden lg:flex">
+    <div class="justify-between w-[90%] absolute top-[10%] left-[5%] hidden lg:flex">
       {#if animate}
         <div
           class="relative transition-all hover:scale-110 rotate-12"
@@ -73,12 +90,28 @@
       {/if}
     </div>
 
-    <div class="w-full flex flex-col">
-      <h1
-        class="mx-auto w-[89%] pr-20 lg:pr-0 lg:w-[60%] text-left lg:text-center font-bold md:leading-[1.5] text-slate-900 text-5xl lg:text-7xl"
+    <div class="w-full">
+      <div
+        class="font-bold md:leading-[1.5] text-left lg:text-center ml-6 text-slate-900 text-4xl lg:text-7xl"
       >
-        Launch Your Online Bootcamp <span class="text-blue-700">In Minutes </span>
-      </h1>
+        <span>Launch Your Online</span> <br />
+        <div class="flex-wrap flex items-center lg:gap-3">
+          <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"
+          >
+            {#key titleIndex}
+              <span
+                class="absolute left-0 right-[unset] lg:right-0 lg:left-[unset]"
+                style="color: {names[titleIndex].color}"
+                transition:fly={{ y: 100, delay: 0, easing: sineInOut }}
+              >
+                {names[titleIndex].label}
+              </span>
+            {/key}
+          </span>
+          <span>In Minutes</span>
+        </div>
+      </div>
 
       <p class="text-md mx-auto mt-10 px-4 text-slate-700 md:text-lg lg:mt-6 lg:w-[42%] lg:p-0">
         Meet a better learning management system (LMS) for teachers and students. ClassroomIO allows
@@ -86,7 +119,7 @@
       </p>
     </div>
 
-    <div class="justify-between w-[90%] absolute top-[35%] left-[4%] hidden lg:flex">
+    <div class="justify-between w-[90%] absolute top-[30%] left-[5%] hidden lg:flex">
       {#if animate}
         <div
           class="relative transition-all hover:scale-110 -rotate-12"
@@ -146,7 +179,7 @@
         href="/signup"
         rel="noopener noreferrer nofollow"
       >
-        Get Started for Free
+        Sign Up 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"
@@ -173,6 +206,7 @@
       class="mx-auto w-[85%] lg:w-[70%]"
     >
       <iframe
+        title="ClassroomIO Live Demo"
         src="https://app.supademo.com/embed/cluw8chyy06nhq2s9m697a680"
         allow="clipboard-write"
         frameborder="0"
diff --git a/apps/classroomio-com/src/lib/Navigation/Navigation.svelte b/apps/classroomio-com/src/lib/Navigation/Navigation.svelte
index 91ffd256..ddcb6f29 100644
--- a/apps/classroomio-com/src/lib/Navigation/Navigation.svelte
+++ b/apps/classroomio-com/src/lib/Navigation/Navigation.svelte
@@ -23,22 +23,22 @@
     {
       key: 'coursemanagement',
       title: 'Course Management',
-      subtitle: 'Advanced course management tools '
+      subtitle: 'Simple course management tools '
+    },
+    {
+      key: 'ai',
+      title: 'AI Support',
+      subtitle: 'Double your productivity with AI'
     },
     {
       key: 'customization',
-      title: 'Customizations',
+      title: 'Dashboard Customization',
       subtitle: 'Customize your classroom to your needs'
     },
     {
       key: 'collaboration',
-      title: 'Forum',
+      title: 'Community',
       subtitle: 'Seamlessly collaborate with your students'
-    },
-    {
-      key: 'ai',
-      title: 'AI Lesson Planner',
-      subtitle: "10x Educator's productivity with AI"
     }
   ];
 </script>
diff --git a/apps/classroomio-com/src/lib/StudentDashboard/StudentDashboard.svelte b/apps/classroomio-com/src/lib/StudentDashboard/StudentDashboard.svelte
index b38eb446..cb9821e2 100644
--- a/apps/classroomio-com/src/lib/StudentDashboard/StudentDashboard.svelte
+++ b/apps/classroomio-com/src/lib/StudentDashboard/StudentDashboard.svelte
@@ -9,7 +9,7 @@
   <h1
     class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] flex flex-col items-center gap-4"
   >
-    A Personalized Dashboard for Your Students
+    Your Student Dashboard
   </h1>
 
   <p
diff --git a/apps/classroomio-com/src/lib/Testimonial/Testimonial.svelte b/apps/classroomio-com/src/lib/Testimonial/Testimonial.svelte
index e85fc61c..ab5eb6da 100644
--- a/apps/classroomio-com/src/lib/Testimonial/Testimonial.svelte
+++ b/apps/classroomio-com/src/lib/Testimonial/Testimonial.svelte
@@ -2,20 +2,20 @@
   <h1
     class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] flex flex-col items-center gap-4"
   >
-    Our Testimonials
+    Hear from Happy ClassroomIO Users
   </h1>
 
   <p
     class="mx-auto text-center my-5 lg:mt-6 px-4 lg:p-0 text-md tracking-wide leading-6 text-gray-400 lg:w-2/4"
   >
-    Our customers love us. Here's why you will too:
+    See what excites them about building and managing bootcamps with ClassroomIO.
   </p>
   <a
     class="md:text-md w-11/12 rounded-md bg-blue-700 px-6 py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl hover:scale-95 md:w-fit lg:px-6 lg:py-5 lg:font-semibold"
     href="/signup"
     rel="noopener noreferrer nofollow"
   >
-    Get Started for Free
+    Sign Up for Free
   </a>
 
   <div class="relative my-5 md:my-10 w-[85%] lg:w-[70%]">
diff --git a/apps/docs/pages/contributor-guides/student-dashboard.mdx b/apps/docs/pages/contributor-guides/student-dashboard.mdx
index 240c6bb5..379c363d 100644
--- a/apps/docs/pages/contributor-guides/student-dashboard.mdx
+++ b/apps/docs/pages/contributor-guides/student-dashboard.mdx
@@ -21,7 +21,7 @@ In this guide I will be showing you how to set up a local student dashboard that
   <iframe
     width="560"
     height="315"
-    src="https://youtu.be/QGTnK39xexs"
+    src="https://www.youtube.com/embed/QGTnK39xexs?si=ogFbyl2KK0XaFob4"
     title="YouTube video player"
     frameborder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"