Rotimi Best
b96d91cd7c
* chore: migration to SvelteKit 2 * stage 1: migrate to svelte 5 and fix rerendering issues * stage 2: fix more $: reactivity across dashboard * fix merge conflicts * chore: migrate code in main to svelte 5 * chore: update preventDefault * chore: simplify tsconfig and remove unused mobileMenuRef in MobileMenu.svelte * chore: enforce .ts across dashboard * rename from classroomio-com to website * stage-3: Replace carbon icon svelte with lucide icon * update lock file * chore: finish icon replacement * fix: settings and setup page multiple rerender * stage 3: More icon and rerendering fixes * feat: setup drizzle and better auth * fix: onboarding validation error showing translation key #586 (#593) * fix: onboarding validation error showing translation key #586 * fix: remove debug log for profile update errors * chore: add a clean command * fix: remove message from email verification response
81 lines
3.1 KiB
Svelte
81 lines
3.1 KiB
Svelte
<script>
|
|
import PageHeader from '$lib/PageHeader/PageHeader.svelte';
|
|
import { tools } from '$lib/utils/constants/tools';
|
|
|
|
const freeTools = tools.filter((item) => item.show);
|
|
</script>
|
|
|
|
<section>
|
|
<PageHeader>
|
|
<!-- added bg-white to keep the background white on devices that are on darkmode -->
|
|
<div class="bg-white 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 w-[90%] md:w-[50%] my-3 md:mt-10 mx-auto bg-white">
|
|
<!-- <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-[55px] z-10"
|
|
src="/free-tools/progress-report.svg"
|
|
alt="Progress Report"
|
|
/>
|
|
<img
|
|
class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[100px] z-20"
|
|
src="/free-tools/activity-stopwatch.svg"
|
|
alt="Activity Stopwatch 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 bg-white"
|
|
src="/free-tools/pomodoro.svg"
|
|
alt="Pomodoro Timer 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 bg-white">
|
|
<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 bg-white">
|
|
{#each freeTools as tool}
|
|
<a
|
|
href="/tools/{tool.slug}"
|
|
class="w-full flex md:max-w-[370px] border rounded-md shadow-sm hover:scale-95 transition-all ease-in-out"
|
|
>
|
|
<img class="w-[30%] rounded-l-md" src={tool.src} alt="" />
|
|
<div class="bg-[#F5F8FE] p-5 rounded-r-md w-[70%]">
|
|
<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>
|