feat: replace video with image on landing page (#78)

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

@@ -5,22 +5,25 @@
 </script>
 
 <div class="px-[2%] lg:px-[14%] border-t-[1px]">
-  <div
+  <div class="flex flex-col lg:flex-row justify-between items-center py-[10%] pl-5 lg:pl-0">
-    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
+      <img src="/logo-192.png" alt="classroomio logo" class="w-[10%] lg:w-[5%] mb-5 lg:mb-10" />
-        src="/logo-192.png"
+      <p class="text-sm lg:text-md tracking-wide leading-7 lg:leading-7 text-gray-600 inter mb-5">
-        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"
-      >
         The Open Source Platform for Tech Bootcamps
         <br />
         Making teaching and learning seamless for tech bootcamps
       </p>
+      <a
+        href="https://www.producthunt.com/posts/classroomio?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-classroomio"
+        target="_blank"
+        ><img
+          src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=425236&theme=light"
+          alt="ClassroomIO - The&#0032;Open&#0032;Source&#0032;Platform&#0032;for&#0032;Tech&#0032;Bootcamps | Product Hunt"
+          style="width: 250px; height: 54px;"
+          width="250"
+          height="54"
+        /></a
+      >
       <div class="flex items-center mt-5 lg:mt-10 gap-3 lg:gap-7">
         <a href="https://www.facebook.com/classroomiohq" target="_blank">
           <LogoFacebook
@@ -48,73 +51,43 @@
       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
+        <h3 class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900 inter">
-          class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900 inter"
-        >
           Product
         </h3>
         <ul class="space-y-2 lg:space-y-4">
-          <li
+          <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
-            class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900"
-          >
             <a href="#coursemanagement"> Course Management </a>
           </li>
-          <li
+          <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
-            class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900"
-          >
             <a href="#customization"> Customizations </a>
           </li>
-          <li
+          <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
-            class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900"
-          >
             <a href="#collaboration"> Forum </a>
           </li>
-          <li
+          <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
-            class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900"
-          >
             <a href="#ai"> AI Lesson Planner </a>
           </li>
         </ul>
       </div>
 
       <div>
-        <h3
+        <h3 class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900 inter">
-          class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900 inter"
-        >
           Resources
         </h3>
         <ul class="space-y-2 lg:space-y-4">
-          <li
+          <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
-            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 target="_blank" href="https://classroomio.substack.com/">
-              Blog
-            </a>
           </li>
-          <li
+          <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
-            class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900"
+            <a target="_blank" href="https://docs.classroomio.com/"> Help center </a>
-          >
-            <a target="_blank" href="https://docs.classroomio.com/">
-              Help center
-            </a>
           </li>
-          <li
+          <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
-            class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900"
+            <a target="_blank" href="https://docs.classroomio.com/what-is-classroomio">
-          >
-            <a
-              target="_blank"
-              href="https://docs.classroomio.com/what-is-classroomio"
-            >
               What is ClassroomIO?
             </a>
           </li>
-          <li
+          <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
-            class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900"
+            <a target="_blank" href="https://docs.classroomio.com/getting-started">
-          >
-            <a
-              target="_blank"
-              href="https://docs.classroomio.com/getting-started"
-            >
               Getting Started
             </a>
           </li>
@@ -122,22 +95,14 @@
       </div>
 
       <div>
-        <h3
+        <h3 class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900 inter">
-          class="mb-3 lg:mb-10 text-base lg:text-md font-semibold leading-6 text-gray-900 inter"
-        >
           Company
         </h3>
         <ul class="space-y-2 lg:space-y-4">
-          <li
+          <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
-            class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900"
+            <a href="mailto:help@classroomio.com" target="_blank"> Contact us </a>
-          >
-            <a href="mailto:help@classroomio.com" target="_blank">
-              Contact us
-            </a>
           </li>
-          <li
+          <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
-            class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900"
-          >
             <a
               href="https://app.enzuzo.com/policies/privacy/958fc978-5477-11ee-a03b-7b111830c594"
               target="_blank"
@@ -145,19 +110,12 @@
               Privacy policy
             </a>
           </li>
-          <li
+          <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
-            class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900"
+            <a target="_blank" href="https://docs.classroomio.com/getting-started">
-          >
-            <a
-              target="_blank"
-              href="https://docs.classroomio.com/getting-started"
-            >
               Getting Started
             </a>
           </li>
-          <li
+          <li class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900">
-            class="text-sm lg:text-md tracking-wide leading-6 text-gray-600 hover:text-gray-900"
-          >
             <a
               href="https://app.enzuzo.com/policies/tos/958fc978-5477-11ee-a03b-7b111830c594"
               target="_blank"
@@ -175,10 +133,8 @@
     <p>All rights reserved.</p>
     <p class="flex items-center">
       ClassroomIO © {new Date().getFullYear()} by
-      <a
+      <a href="https://twitter.com/rotimi_best" target="_blank" class="underline text-blue-700 mx-1"
-        href="https://twitter.com/rotimi_best"
+        >Rotimi Best</a
-        target="_blank"
-        class="underline text-blue-700 mx-1">Rotimi Best</a
       >
       from
       <img alt="Nigerian Flag" src="/ng.png" class="ml-2 h-3 w-3" />

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

@@ -5,24 +5,13 @@
 
 <div class="text-center mt-[30%] md:mt-36 border-b-2 relative">
   <div class="mb-10 flex items-center justify-center w-full">
-    <!-- <a
+    <a
       target="_blank"
       rel="noopener noreferrer nofollow"
       href="https://github.com/rotimi-best/quizify"
       style="color: rgb(75, 85, 99);"
       class="border border-gray-300 rounded-full px-4 py-1 text-sm font-medium hover:underline"
       >Give us a <span class="text-[#1D4EE2]">star</span> on github</a
-    > -->
-    <a
-      href="https://www.producthunt.com/posts/classroomio?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-classroomio"
-      target="_blank"
-      ><img
-        src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=425236&theme=light"
-        alt="ClassroomIO - The&#0032;Open&#0032;Source&#0032;Platform&#0032;for&#0032;Tech&#0032;Bootcamps | Product Hunt"
-        style="width: 250px; height: 54px;"
-        width="250"
-        height="54"
-      /></a
     >
   </div>
   <h1
@@ -45,8 +34,7 @@
   <p
     class="mx-auto mt-10 lg:mt-6 px-4 lg:p-0 text-md md:text-xl tracking-wide leading-6 lg:leading-10 text-slate-700 lg:w-2/4"
   >
-    Spend less time doing the boring stuff, instead focus on impacting the
+    Spend less time doing the boring stuff, instead focus on impacting the lives of your students.
-    lives of your students.
   </p>
   <button
     class="font-medium lg:font-semibold text-sm md:text-md text-white px-6 py-3 lg:px-10 lg:py-5 bg-[#1D4EE2] rounded-md lg:rounded-xl mt-10"
@@ -57,7 +45,7 @@
   </button>
 
   <div class="relative my-5 md:my-10">
-    <video
+    <!-- <video
       class="floating w-[85%] lg:w-[70%] mx-auto rounded-lg shadow-lg"
       autoplay
       loop
@@ -66,22 +54,21 @@
       playsinline
       preload="auto"
     >
-      <source
+      <source src="./dark-light-mode.mp4" type="video/mp4" />
-        src="./dark-light-mode.mp4"
-        type="video/mp4"
-      />
       <track kind="captions" />
-    </video>
+    </video> -->
+
+    <img
+      src="./hero-section.png"
+      alt="hero section with dark vs light mode"
+      class="floating w-[85%] lg:w-[70%] mx-auto rounded-lg shadow-lg"
+    />
   </div>
 
   {#if PUBLIC_ENABLE_USERS_COMPANIES}
     <div class="px-[15%] mb-[10%]">
-      <h2 class="inter text-base lg:text-xl font-semibold text-gray-900">
+      <h2 class="inter text-base lg:text-xl font-semibold text-gray-900">Used at</h2>
-        Used at
+      <div class="w-full flex flex-wrap flex-row gap-5 justify-between items-center py-[5%]">
-      </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%]" />
         <img src="/hero-3.svg" alt="" class="w-[30%] lg:w-[13%]" />