feat: roadmap page (#327)

* finished the timeline

* i think i am done here

* updated the signup component

* modify roadmap content

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/classroomio-com/src/lib/Faq/Faq.svelte

@@ -34,7 +34,7 @@
   </div>
 
   <PageSignupCTA
-    header="Spend less time managing your LMS and more time teaching with ClassroomIO"
+    header="Spend less time managing your LMS and more time training with ClassroomIO"
     subText="Try before you buy. No credit card required."
     btnLabel="Book a demo"
     link="classroomio/demo"

apps/classroomio-com/src/lib/Footer/Footer.svelte

@@ -85,6 +85,11 @@
           >
             <a href="/#ai"> AI Lesson Planner </a>
           </li>
+          <li
+            class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
+          >
+            <a href="/#student-dashboard"> Student Dashboard </a>
+          </li>
         </ul>
       </div>
 
@@ -126,7 +131,12 @@
           <li
             class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
           >
-            <a href="mailto:help@classroomio.com" target="_blank"> Contact us </a>
+            <a href="/roadmap"> Roadmap </a>
+          </li>
+          <li
+            class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
+          >
+            <a href="mailto:help@classroomio.com" target="_blank"> Support </a>
           </li>
           <li
             class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"

apps/classroomio-com/src/lib/PageSignupCTA/index.svelte

@@ -7,10 +7,12 @@
 </script>
 
 <div
-  class="floating grad relative mx-auto mt-[10%] 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"
 >
   <div>
-    <h1 class="font-display mt-3 text-3xl font-bold tracking-tight text-white lg:mt-2 lg:text-4xl">
+    <h1
+      class="font-display mt-3 text-3xl font-bold tracking-tight text-white lg:mt-2 lg:text-4xl max-w-2xl"
+    >
       {header}
     </h1>
     <p class="mt-6 text-xl text-gray-300 lg:text-lg">

apps/classroomio-com/src/lib/Timeline/Timeline.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  export let items: {
+    title: string;
+    desc: string;
+  }[] = [];
+</script>
+
+<div class="relative w-fit flex justify-center space-x-8 md:space-x-10">
+  <div
+    class="w-[3px] md:w-[2px] bg-blue-600 mt-10 before:bg-gradient-to-t before:from-white before:to-transparent before:w-[4px] before:h-[9rem] before:absolute before:bottom-0"
+  />
+  <div class="space-y-8">
+    {#each items as card, index}
+      <div class="md:w-[35rem] w-full border-2 rounded-lg px-4 py-8 space-y-4 bg-white">
+        <div class="flex items-center">
+          <div
+            class={`z-50 absolute -left-3 ${
+              index > 0 &&
+              'before:bg-gradient-to-t before:from-white before:to-transparent before:w-[4px] before:h-[9rem] before:absolute before:-top-36'
+            } flex items-center justify-center w-7 h-7 bg-blue-100 rounded-full`}
+          >
+            <div class="w-4 h-4 bg-blue-800 rounded-full z-50" />
+          </div>
+          <h1 class="text-2xl font-bold text-blue-800">{card.title}</h1>
+        </div>
+        <p class="text-base text-gray-500">
+          {card.desc}
+        </p>
+      </div>
+    {/each}
+  </div>
+</div>