feat: [lw] free tools

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

@@ -46,7 +46,7 @@
 <div
   class="flex w-full justify-between items-center py-6 border-b-[1px] md:px-12 px-5 fixed top-0 z-[3000] filter backdrop-blur-xl shadow-sm bg-white"
 >
-  <a href="/" class="w-[20%]">
+  <a href="/" class="w-[10%]">
     <div class="flex items-center w-full">
       <img
         loading="lazy"
@@ -60,7 +60,7 @@
     </div>
   </a>
 
-  <nav class="w-[40%] hidden md:hidden lg:block">
+  <nav class="w-[50%] hidden md:hidden lg:block">
     <ul class="flex items-center justify-between w-full gap-2">
       <!--  -->
       <li class="text-gray-800 font-semibold text-sm cursor-pointer relative">
@@ -104,13 +104,16 @@
         <li class="text-gray-800 font-semibold text-sm cursor-pointer">More features</li>
       </a> -->
       <!-- Pricing -->
+      <a href="/tools">
+        <li class="text-gray-800 font-semibold text-sm cursor-pointer">Free Tools</li>
+      </a>
       <a href="/pricing">
         <li class="text-gray-800 font-semibold text-sm cursor-pointer">Pricing</li>
       </a>
-      <!-- Docs -->
+      <!-- Docs 
       <a href="/docs" target="_blank">
         <li class="text-gray-800 font-semibold text-sm cursor-pointer">Docs</li>
-      </a>
+      </a>-->
       <!-- Blog -->
       <a href="/blog">
         <li class="text-gray-800 font-semibold text-sm cursor-pointer">Blog</li>
@@ -197,6 +200,14 @@
               </div>
             {/if}
           </li>
+          <!-- 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}
+            href="/tools"
+          >
+            <li>Free Tools</li>
+          </a>
           <!-- Pricing -->
           <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"
@@ -205,15 +216,15 @@
           >
             <li>Pricing</li>
           </a>
-          <!-- Docs -->
+          <!-- Docs
           <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}
             href="/docs"
             target="_blank"
           >
             <li>Docs</li>
-          </a>
+          </a> -->
 
           <!-- Blog -->
           <a

apps/classroomio-com/src/routes/teach/+page.svelte

@@ -113,7 +113,7 @@
       <a
         href="/teach/register"
         target="_blank"
-        class="w-full block text-center lg:w-[30%] py-3 text-base text-white rounded-md bg-[#1D4ED8]"
+        class="w-full block text-center lg:w-[30%] py-3 text-base text-white rounded-md bg-blue-700"
       >
         Register
       </a>
@@ -169,7 +169,7 @@
         <a
           href="/teach/register"
           target="_blank"
-          class="w-full lg:max-w-[20%] py-3 text-base text-white rounded-md bg-[#1D4ED8] text-center"
+          class="w-full lg:max-w-[20%] py-3 text-base text-white rounded-md bg-blue-700 text-center"
         >
           Get Started
         </a>

apps/classroomio-com/src/routes/tools/+layout.ts

@@ -0,0 +1 @@
+export const prerender = false;

apps/classroomio-com/src/routes/tools/+page.svelte

@@ -0,0 +1,139 @@
+<script>
+  import PageHeader from '$lib/PageHeader/PageHeader.svelte';
+
+  const tools = [
+    {
+      src: '/free-tools/name-picker.svg',
+      title: 'Random Name Picker',
+      subText: 'Effortlessly choose names for class participation or group activities',
+      slug: 'name-picker',
+      show: true
+    },
+    {
+      src: '/free-tools/activity-timer.svg',
+      title: 'Timed Activity Timer',
+      subText:
+        'Stay on track and enhance productivity with our customizable timer for timed tasks, quizzes, and study sessions',
+      slug: 'timer',
+      show: true
+    },
+    {
+      src: '/free-tools/tic-tac.svg',
+      title: 'Tic tac toe game',
+      subText:
+        "More than just a game; it's an educational ool that teaches pattern recognition, and decision-making.",
+      slug: 'tic-tac-toe',
+      show: true
+    },
+    {
+      src: '/free-tools/question-of-the-day.svg',
+      title: 'Question of the day ',
+      subText:
+        "Find thought-provoking 'Question of the Day' to spark discussions and promote critical thinking",
+      slug: 'question-of-the-day',
+      show: true
+    },
+    {
+      src: '/free-tools/waec.svg',
+      title: 'WAEC Practice tool',
+      subText: 'Ace your WAEC exams with comprehensive study materials, past questions',
+      slug: 'waec',
+      show: false
+    },
+    {
+      src: '/free-tools/jamb.svg',
+      title: 'JAMB Practice tool',
+      subText:
+        'Prepare for JAMB with past questions and instant feedback for effective exam readiness',
+      slug: 'jamb',
+      show: false
+    }
+  ].filter((item) => item.show);
+</script>
+
+<svelte:head>
+  <title>Free Tools | ClassroomIO</title>
+  <meta property="og:image" itemprop="image" content="" />
+  <meta property="og:title" content="Free Tools" />
+  <meta
+    property="og:description"
+    content="At ClassroomIO, we have built a suit of tools for anyone to use freely when training their students"
+  />
+
+  <meta property="og:image:secure_url" itemprop="image" content="" />
+
+  <meta name="twitter:title" content="Free Tools" />
+  <meta
+    name="twitter:description"
+    content="At ClassroomIO, we have built a suit of tools for anyone to use freely when training their students"
+  />
+  <meta name="twitter:image" content="" />
+</svelte:head>
+
+<section>
+  <PageHeader>
+    <div class="text-left md:text-center md:w-2/4 px-7 md:p-0 mx-auto">
+      <h1 class="text-5xl md:text-6xl font-bold">
+        Explore our free <span class="text-blue-700">tools</span>
+      </h1>
+      <p class="my-4 md:my-8">
+        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 class="flex relative md:w-[50%] my-3 md:mt-10 mx-auto">
+        <img
+          class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-0 z-0"
+          src="/free-tools/waec.svg"
+          alt="Waec logo"
+        />
+        <img
+          class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[50px] z-10"
+          src="/free-tools/question-of-the-day.svg"
+          alt="Question of the day logo"
+        />
+        <img
+          class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[100px] z-20"
+          src="/free-tools/activity-timer.svg"
+          alt="Activity timer logo"
+        />
+        <img
+          class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[150px] z-30"
+          src="/free-tools/name-picker.svg"
+          alt="Name picker logo"
+        />
+        <img
+          class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[200px] z-40"
+          src="/free-tools/tic-tac.svg"
+          alt="Tic tac logo"
+        />
+        <img
+          class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[250px] z-50"
+          src="/free-tools/jamb.svg"
+          alt="Jamb logo"
+        />
+      </div>
+    </div>
+  </PageHeader>
+
+  <div class="p-10 px-2 md:px-0">
+    <h1 class="text-center font-bold text-3xl">Featured Tools</h1>
+
+    <div class="flex justify-evenly gap-y-8 flex-wrap w-full md:w-[70%] mt-10 mx-auto">
+      {#each tools as tool}
+        <a
+          href="/tools/{tool.slug}"
+          class="w-full flex md:max-w-[370px] border rounded-md shadow-sm"
+        >
+          <img class="w-[30%] rounded-l-md" src={tool.src} alt="" />
+          <div class="bg-[#F5F8FE] p-5 rounded-r-md">
+            <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>
+</section>