feat: lint codebase and run precommit hook
This commit is contained in:
Rotimi Best
@@ -74,73 +74,62 @@
|
||||
<title>Bootcamps | ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="flex flex-col justify-center items-center">
|
||||
<section class="flex flex-col items-center justify-center">
|
||||
<PageHeader
|
||||
className="flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-6 lg:px-28 md:px-16 px-8"
|
||||
>
|
||||
<Badge class="py-2! px-4!" variant="outline">Solution for Bootcamps</Badge>
|
||||
|
||||
<div
|
||||
class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-8"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
|
||||
>
|
||||
<h1 class="mx-auto m-0 text-4xl md:text-6xl text-slate-900 lg:text-center">
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-8 lg:items-center lg:justify-center">
|
||||
<div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<h1 class="m-0 mx-auto text-4xl text-slate-900 md:text-6xl lg:text-center">
|
||||
The platform for fast
|
||||
<span class="text-blue-700 relative"> growing bootcamps</span>
|
||||
<span class="relative text-blue-700"> growing bootcamps</span>
|
||||
</h1>
|
||||
<p class="lg:w-[60%] text-base md:text-lg lg:text-center font-normal text-slate-700">
|
||||
From AI powered course creation to student collaboration tools, ClassroomIO provides
|
||||
everything you need to run a cutting-edge, high-impact bootcamp.
|
||||
<p class="text-base font-normal text-slate-700 md:text-lg lg:w-[60%] lg:text-center">
|
||||
From AI powered course creation to student collaboration tools, ClassroomIO provides everything you need to
|
||||
run a cutting-edge, high-impact bootcamp.
|
||||
</p>
|
||||
</div>
|
||||
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">
|
||||
Get Started for Free 🚀
|
||||
</Button>
|
||||
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Get Started for Free 🚀</Button>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<section
|
||||
class="w-full lg:py-24 py-16 lg:px-28 md:px-16 px-6 flex flex-col lg:items-center lg:justify-between justify-center gap-y-12"
|
||||
class="flex w-full flex-col justify-center gap-y-12 px-6 py-16 md:px-16 lg:items-center lg:justify-between lg:px-28 lg:py-24"
|
||||
>
|
||||
<div
|
||||
class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
|
||||
>
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<Badge class="py-2! px-4!" variant="outline">Our benefits</Badge>
|
||||
|
||||
<div
|
||||
class="lg:w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
|
||||
class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
|
||||
>
|
||||
<h1 class="text-3xl">Inspire Student Success</h1>
|
||||
<p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
|
||||
Scale your bootcamp with ClassroomIO's comprehensive toolkit. Create engaging content,
|
||||
foster community, and drive student achievement.
|
||||
<p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
|
||||
Scale your bootcamp with ClassroomIO's comprehensive toolkit. Create engaging content, foster community, and
|
||||
drive student achievement.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full max-w-7xl flex lg:flex-row flex-col lg:justify-between justify-start gap-6 lg:items-center items-start"
|
||||
class="flex w-full max-w-7xl flex-col items-start justify-start gap-6 lg:flex-row lg:items-center lg:justify-between"
|
||||
>
|
||||
{#each benefitDetails as benefits}
|
||||
<div class="w-full md:p-6 p-4 border border-[#D9E0F5] rounded-2xl flex flex-col gap-y-6">
|
||||
<div class="flex w-full flex-col gap-y-6 rounded-2xl border border-[#D9E0F5] p-4 md:p-6">
|
||||
<img
|
||||
class="w-[48px] h-[48px]"
|
||||
class="h-[48px] w-[48px]"
|
||||
src="https://assets.cdn.clsrio.com/www/bootcamps/{benefits.icon}"
|
||||
alt="brain"
|
||||
/>
|
||||
|
||||
<div class="w-full flex flex-col justify-start align-start gap-y-2">
|
||||
<div class="align-start flex w-full flex-col justify-start gap-y-2">
|
||||
<h1 class="text-md">{benefits.title}</h1>
|
||||
|
||||
{#each benefits.points as point}
|
||||
<div class="flex flex-row justify-start items-start gap-x-3">
|
||||
<img
|
||||
src="https://assets.cdn.clsrio.com/www/bootcamps/{benefits.checkMark}"
|
||||
alt="check mark"
|
||||
/>
|
||||
<p class="leading-8 text-gray-500 font-[#656565] font-light">
|
||||
<div class="flex flex-row items-start justify-start gap-x-3">
|
||||
<img src="https://assets.cdn.clsrio.com/www/bootcamps/{benefits.checkMark}" alt="check mark" />
|
||||
<p class="font-[#656565] font-light leading-8 text-gray-500">
|
||||
{point}
|
||||
</p>
|
||||
</div>
|
||||
@@ -152,43 +141,36 @@
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="w-full bg-[#F1F6FF] flex flex-col items-center justify-center gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
|
||||
class="flex w-full flex-col items-center justify-center gap-y-16 bg-[#F1F6FF] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-7xl gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
|
||||
>
|
||||
<div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<Badge class="py-2! px-4!" variant="outline">Explore our features</Badge>
|
||||
|
||||
<div
|
||||
class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
|
||||
>
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<h1 class="text-3xl">Why We're the Perfect Fit</h1>
|
||||
<p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
|
||||
Discover why we’re the ideal partner for your bootcamp training needs. Experience
|
||||
innovative solutions designed to elevate student engagement and maximize learning
|
||||
outcomes.
|
||||
<p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
|
||||
Discover why we’re the ideal partner for your bootcamp training needs. Experience innovative solutions
|
||||
designed to elevate student engagement and maximize learning outcomes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-7xl flex flex-col justify-start items-center lg:gap-y-24 gap-y-16">
|
||||
<div class="flex w-full max-w-7xl flex-col items-center justify-start gap-y-16 lg:gap-y-24">
|
||||
{#each featureDetails as feature, i}
|
||||
<div
|
||||
class="w-full lg:w-[70%] flex lg:flex-row {i % 2 !== 0
|
||||
class="flex w-full lg:w-[70%] lg:flex-row {i % 2 !== 0
|
||||
? 'lg:flex-row-reverse'
|
||||
: ''} flex-col lg:justify-between justify-between lg:items-center items-start gap-10"
|
||||
: ''} flex-col items-start justify-between gap-10 lg:items-center lg:justify-between"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-sm lg:w-[40%] lg:gap-y-6 gap-y-3 flex flex-col items-start justify-start"
|
||||
>
|
||||
<div class="flex w-full max-w-sm flex-col items-start justify-start gap-y-3 lg:w-[40%] lg:gap-y-6">
|
||||
<img
|
||||
class="w-[48px] h-[48px]"
|
||||
class="h-[48px] w-[48px]"
|
||||
src="https://assets.cdn.clsrio.com/www/bootcamps/{feature.icon}"
|
||||
alt="team icon"
|
||||
/>
|
||||
<div class="md:w-full flex flex-col items-start justify-start gap-y-4">
|
||||
<div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
|
||||
<h1 class="text-2xl">{feature.title}</h1>
|
||||
<p class="leading-8 text-lg text-gray-500">
|
||||
<p class="text-lg leading-8 text-gray-500">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -198,11 +180,7 @@
|
||||
{feature.ctaLabel}
|
||||
</Button>
|
||||
{:else}
|
||||
<Button
|
||||
variant="outline"
|
||||
data-cal-config="'layout':'month_view'"
|
||||
data-cal-link="classroomio/demo"
|
||||
>
|
||||
<Button variant="outline" data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">
|
||||
Book a Demo
|
||||
</Button>
|
||||
{/if}
|
||||
|
||||
@@ -17,8 +17,7 @@
|
||||
{
|
||||
icon: 'simplified.svg',
|
||||
title: 'Simplified Management',
|
||||
description:
|
||||
'Centralize and easily manage, share, and distribute all customer education materials.'
|
||||
description: 'Centralize and easily manage, share, and distribute all customer education materials.'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -34,8 +33,7 @@
|
||||
icon: 'link.svg',
|
||||
img: 'domain.svg',
|
||||
title: 'Custom domains',
|
||||
description:
|
||||
'Use your own domain to link to our landing page instead of using our free subdomain'
|
||||
description: 'Use your own domain to link to our landing page instead of using our free subdomain'
|
||||
},
|
||||
{
|
||||
icon: 'globe.svg',
|
||||
@@ -58,68 +56,58 @@
|
||||
<title>Customer Education | ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="flex flex-col justify-center items-center">
|
||||
<section class="flex flex-col items-center justify-center">
|
||||
<PageHeader
|
||||
className="flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-6 lg:px-28 md:px-16 px-8"
|
||||
>
|
||||
<Badge class="py-2! px-4!" variant="outline">Solution for Customer Education</Badge>
|
||||
|
||||
<div
|
||||
class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-8"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
|
||||
>
|
||||
<h1 class="w-[95%] mx-auto m-0 text-4xl md:text-6xl text-slate-900 lg:text-center">
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-8 lg:items-center lg:justify-center">
|
||||
<div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<h1 class="m-0 mx-auto w-[95%] text-4xl text-slate-900 md:text-6xl lg:text-center">
|
||||
Drive retention and revenue with
|
||||
<span class="text-blue-700 relative">Customer Education</span>
|
||||
<span class="relative text-blue-700">Customer Education</span>
|
||||
</h1>
|
||||
<p class="lg:w-[60%] text-base md:text-lg lg:text-center font-normal text-slate-700">
|
||||
Yes you are making lots of sales however you keep experiencing churn and customers leaving
|
||||
you. Without a proper customer education strategy you are leaving a lot of money on the
|
||||
table.
|
||||
<p class="text-base font-normal text-slate-700 md:text-lg lg:w-[60%] lg:text-center">
|
||||
Yes you are making lots of sales however you keep experiencing churn and customers leaving you. Without a
|
||||
proper customer education strategy you are leaving a lot of money on the table.
|
||||
</p>
|
||||
</div>
|
||||
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">
|
||||
Get Started for Free 🚀
|
||||
</Button>
|
||||
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Get Started for Free 🚀</Button>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<section
|
||||
class="w-full lg:py-24 py-16 lg:px-28 md:px-16 px-8 flex flex-col lg:items-center lg:justify-between justify-center gap-y-12"
|
||||
class="flex w-full flex-col justify-center gap-y-12 px-8 py-16 md:px-16 lg:items-center lg:justify-between lg:px-28 lg:py-24"
|
||||
>
|
||||
<div
|
||||
class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
|
||||
>
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<Badge class="py-1! px-4!" variant="outline">Our benefits</Badge>
|
||||
<div
|
||||
class="lg:w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
|
||||
class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
|
||||
>
|
||||
<h1 class="text-3xl">The customer education toolkit</h1>
|
||||
<p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
|
||||
Create beautiful, branded landing pages to showcase your courses and get customers up to
|
||||
speed quickly
|
||||
<p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
|
||||
Create beautiful, branded landing pages to showcase your courses and get customers up to speed quickly
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full max-w-7xl flex lg:flex-row flex-col lg:justify-between justify-start gap-6 lg:items-center items-start"
|
||||
class="flex w-full max-w-7xl flex-col items-start justify-start gap-6 lg:flex-row lg:items-center lg:justify-between"
|
||||
>
|
||||
{#each benefitDetails as benefits}
|
||||
<div class="w-full md:p-6 p-4 border border-[#D9E0F5] rounded-2xl flex flex-col gap-y-6">
|
||||
<div class="flex w-full flex-col gap-y-6 rounded-2xl border border-[#D9E0F5] p-4 md:p-6">
|
||||
<img
|
||||
class="w-[48px] h-[48px]"
|
||||
class="h-[48px] w-[48px]"
|
||||
src="https://assets.cdn.clsrio.com/www/customer-education/{benefits.icon}"
|
||||
alt="icon"
|
||||
/>
|
||||
|
||||
<div class="w-full flex flex-col justify-start align-start gap-y-2">
|
||||
<div class="align-start flex w-full flex-col justify-start gap-y-2">
|
||||
<p class="text-lg">{benefits.title}</p>
|
||||
|
||||
<div class="flex flex-row justify-start items-start gap-x-3">
|
||||
<p class="leading-8 text-gray-500 font-[#656565] font-light">
|
||||
<div class="flex flex-row items-start justify-start gap-x-3">
|
||||
<p class="font-[#656565] font-light leading-8 text-gray-500">
|
||||
{benefits.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -130,52 +118,39 @@
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="w-full bg-[#F1F6FF] flex flex-col items-center justify-center gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
|
||||
class="flex w-full flex-col items-center justify-center gap-y-16 bg-[#F1F6FF] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
|
||||
>
|
||||
<div
|
||||
class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
|
||||
>
|
||||
<div class="w-fit py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
|
||||
<p class="text-sm text-[#4B5563] text-center">
|
||||
Explore our features
|
||||
</p>
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<div class="w-fit rounded-full border-2 border-[#C2D2FF] px-4 py-2 text-center">
|
||||
<p class="text-center text-sm text-[#4B5563]">Explore our features</p>
|
||||
</div>
|
||||
<div
|
||||
class="lg:w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
|
||||
class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
|
||||
>
|
||||
<h1 class="text-3xl">Why Choose Us For Education Needs</h1>
|
||||
<p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
|
||||
Discover how our innovative solutions can reduce stress, enhance productivity, and achieve
|
||||
your training goals.
|
||||
<p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
|
||||
Discover how our innovative solutions can reduce stress, enhance productivity, and achieve your training
|
||||
goals.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-7xl flex flex-col justify-start items-center lg:gap-y-24 gap-y-16">
|
||||
<div class="flex w-full max-w-7xl flex-col items-center justify-start gap-y-16 lg:gap-y-24">
|
||||
{#each featureDetails as feature, i}
|
||||
<div
|
||||
class="w-full flex lg:flex-row {i % 2 !== 0
|
||||
class="flex w-full lg:flex-row {i % 2 !== 0
|
||||
? 'lg:flex-row-reverse'
|
||||
: ''} flex-col lg:justify-evenly justify-start lg:items-center items-start gap-10"
|
||||
: ''} flex-col items-start justify-start gap-10 lg:items-center lg:justify-evenly"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-sm lg:w-[40%] lg:gap-y-6 gap-y-3 flex flex-col items-start justify-start"
|
||||
>
|
||||
<img
|
||||
src="https://assets.cdn.clsrio.com/www/customer-education/{feature.icon}"
|
||||
alt="team icon"
|
||||
/>
|
||||
<div class="md:w-full flex flex-col items-start justify-start gap-y-4">
|
||||
<div class="flex w-full max-w-sm flex-col items-start justify-start gap-y-3 lg:w-[40%] lg:gap-y-6">
|
||||
<img src="https://assets.cdn.clsrio.com/www/customer-education/{feature.icon}" alt="team icon" />
|
||||
<div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
|
||||
<h1 class="text-2xl">{feature.title}</h1>
|
||||
<p class="leading-8 text-lg text-gray-500">
|
||||
<p class="text-lg leading-8 text-gray-500">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
data-cal-config="'layout':'month_view'"
|
||||
data-cal-link="classroomio/demo"
|
||||
>
|
||||
<Button variant="outline" data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">
|
||||
Book a Demo
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -31,8 +31,7 @@
|
||||
icon: 'team-mgnt.svg',
|
||||
img: 'team-mgnt2.svg',
|
||||
title: 'Team management',
|
||||
description:
|
||||
'You can invite managers and employees to create and take trainings at scale in your organization.'
|
||||
description: 'You can invite managers and employees to create and take trainings at scale in your organization.'
|
||||
},
|
||||
{
|
||||
icon: 'colour-pallete.svg',
|
||||
@@ -54,25 +53,20 @@
|
||||
<title>Employee Training | ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="flex flex-col justify-center items-center">
|
||||
<section class="flex flex-col items-center justify-center">
|
||||
<PageHeader
|
||||
className="flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-6 lg:px-28 md:px-16 px-8"
|
||||
>
|
||||
<Badge class="py-2! px-4!" variant="outline">Unlock your team's potential</Badge>
|
||||
|
||||
<div
|
||||
class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-8"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
|
||||
>
|
||||
<h1 class="mx-auto m-0 text-4xl md:text-6xl text-slate-900 lg:text-center">
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-8 lg:items-center lg:justify-center">
|
||||
<div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<h1 class="m-0 mx-auto text-4xl text-slate-900 md:text-6xl lg:text-center">
|
||||
Employee training software for
|
||||
<br /><span class="text-blue-700 relative">modern teams</span>
|
||||
<br /><span class="relative text-blue-700">modern teams</span>
|
||||
</h1>
|
||||
<p class="lg:w-[60%] text-base md:text-lg lg:text-center font-normal text-slate-700">
|
||||
With ClassroomIO, you can keep your teams in sync with company standards as they change
|
||||
quickly.
|
||||
<p class="text-base font-normal text-slate-700 md:text-lg lg:w-[60%] lg:text-center">
|
||||
With ClassroomIO, you can keep your teams in sync with company standards as they change quickly.
|
||||
</p>
|
||||
</div>
|
||||
<Button href="/signup" target="_blank">Get Started for Free 🚀</Button>
|
||||
@@ -80,34 +74,34 @@
|
||||
</PageHeader>
|
||||
|
||||
<section
|
||||
class="w-full max-w-7xl lg:py-24 py-16 lg:px-28 md:px-16 px-8 flex lg:flex-row flex-col lg:items-center lg:justify-between justify-center gap-x-6 gap-y-8"
|
||||
class="flex w-full max-w-7xl flex-col justify-center gap-x-6 gap-y-8 px-8 py-16 md:px-16 lg:flex-row lg:items-center lg:justify-between lg:px-28 lg:py-24"
|
||||
>
|
||||
<div class="w-full lg:w-[35%] gap-y-4 flex flex-col items-start justify-start">
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:w-[35%]">
|
||||
<Badge variant="outline">Amazing benefits</Badge>
|
||||
|
||||
<div class="md:w-full flex flex-col items-start justify-start gap-y-4">
|
||||
<div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
|
||||
<h1 class="text-3xl">Unlock your team's potential</h1>
|
||||
<p class="leading-8 text-lg text-gray-500">
|
||||
<p class="text-lg leading-8 text-gray-500">
|
||||
Modern teams require solutions that are easy to use and allows them move quickly.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="lg:w-[60%] lg:min-w-[450px] w-full flex flex-col lg:flex-wrap lg:flex-row justify-start items-center gap-6"
|
||||
class="flex w-full flex-col items-center justify-start gap-6 lg:w-[60%] lg:min-w-[450px] lg:flex-row lg:flex-wrap"
|
||||
>
|
||||
{#each benefitDetails as benefits}
|
||||
<div
|
||||
class="w-full lg:w-[47%] min-w-[220px] md:p-6 p-4 border border-[#D9E0F5] rounded-2xl flex flex-col grow gap-y-6"
|
||||
class="flex w-full min-w-[220px] grow flex-col gap-y-6 rounded-2xl border border-[#D9E0F5] p-4 md:p-6 lg:w-[47%]"
|
||||
>
|
||||
<img
|
||||
class="w-[48px] h-[48px]"
|
||||
class="h-[48px] w-[48px]"
|
||||
src="https://assets.cdn.clsrio.com/www/employee-training/{benefits.icon}"
|
||||
alt="light-bulb"
|
||||
/>
|
||||
|
||||
<div class="w-full flex flex-col justify-start align-start gap-y-2">
|
||||
<div class="align-start flex w-full flex-col justify-start gap-y-2">
|
||||
<h1 class="text-lg">{benefits.title}</h1>
|
||||
<p class="text-base leading-8 text-gray-500 font-[#656565] font-light">
|
||||
<p class="font-[#656565] text-base font-light leading-8 text-gray-500">
|
||||
{benefits.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -117,50 +111,42 @@
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="w-full bg-[#F1F6FF] flex flex-col items-center justify-start gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
|
||||
class="flex w-full flex-col items-center justify-start gap-y-16 bg-[#F1F6FF] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
|
||||
>
|
||||
<div
|
||||
class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
|
||||
>
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
|
||||
<Badge class="py-2! px-4!" variant="outline">Explore our features</Badge>
|
||||
|
||||
<div
|
||||
class="lg:w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
|
||||
class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
|
||||
>
|
||||
<h1 class="text-3xl">What makes us the right choice</h1>
|
||||
<p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
|
||||
Discover why we’re the perfect partner for your employee training needs. Experience
|
||||
innovative solutions designed to reduce stress and enhance productivity.
|
||||
<p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
|
||||
Discover why we’re the perfect partner for your employee training needs. Experience innovative solutions
|
||||
designed to reduce stress and enhance productivity.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-7xl flex flex-col justify-start items-center lg:gap-y-24 gap-16 p-2">
|
||||
<div class="flex w-full max-w-7xl flex-col items-center justify-start gap-16 p-2 lg:gap-y-24">
|
||||
{#each featureDetails as feature, i}
|
||||
<div
|
||||
class="w-full lg:w-[70%] flex lg:flex-row {i % 2 !== 0
|
||||
class="flex w-full lg:w-[70%] lg:flex-row {i % 2 !== 0
|
||||
? 'lg:flex-row-reverse'
|
||||
: ''} flex-col justify-between lg:items-center items-start gap-10"
|
||||
: ''} flex-col items-start justify-between gap-10 lg:items-center"
|
||||
>
|
||||
<div
|
||||
class="w-fit max-w-sm lg:w-[40%] lg:gap-y-6 gap-y-3 flex flex-col items-start justify-start"
|
||||
>
|
||||
<div class="flex w-fit max-w-sm flex-col items-start justify-start gap-y-3 lg:w-[40%] lg:gap-y-6">
|
||||
<img
|
||||
class="w-[48px] h-[48px]"
|
||||
class="h-[48px] w-[48px]"
|
||||
src="https://assets.cdn.clsrio.com/www/employee-training/{feature.icon}"
|
||||
alt="team icon"
|
||||
/>
|
||||
<div class="md:w-full flex flex-col items-start justify-start gap-y-4">
|
||||
<div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
|
||||
<h1 class="text-2xl">{feature.title}</h1>
|
||||
<p class="leading-8 text-lg text-gray-500">
|
||||
<p class="text-lg leading-8 text-gray-500">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
data-cal-config="'layout':'month_view'"
|
||||
data-cal-link="classroomio/demo"
|
||||
>
|
||||
<Button variant="outline" data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">
|
||||
Book a Demo
|
||||
</Button>
|
||||
</div>
|
||||
@@ -178,17 +164,15 @@
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="w-full bg-[#040F2D] flex flex-col items-center justify-start gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
|
||||
class="flex w-full flex-col items-center justify-start gap-y-16 bg-[#040F2D] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-7xl flex lg:flex-row-reverse flex-col-reverse lg:justify-between justify-start lg:items-center items-start gap-y-8"
|
||||
class="flex w-full max-w-7xl flex-col-reverse items-start justify-start gap-y-8 lg:flex-row-reverse lg:items-center lg:justify-between"
|
||||
>
|
||||
<div class="w-full lg:w-[40%] gap-y-4 flex flex-col items-start justify-start">
|
||||
<div class="md:w-full flex flex-col items-start justify-start gap-y-4">
|
||||
<h1 class="text-2xl text-white">
|
||||
Did you know you can request for custom features?
|
||||
</h1>
|
||||
<p class="leading-8 text-[#DEDEDE] text-base">
|
||||
<div class="flex w-full flex-col items-start justify-start gap-y-4 lg:w-[40%]">
|
||||
<div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
|
||||
<h1 class="text-2xl text-white">Did you know you can request for custom features?</h1>
|
||||
<p class="text-base leading-8 text-[#DEDEDE]">
|
||||
Companies get the opportunity to request custom features from us.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const load = async () => {
|
||||
redirect(
|
||||
307,
|
||||
'https://docs.google.com/presentation/d/1eqvNPNk167ZcP21gZGVAatdDpWAFL9lfmWJHHrzsVFc'
|
||||
);
|
||||
redirect(307, 'https://docs.google.com/presentation/d/1eqvNPNk167ZcP21gZGVAatdDpWAFL9lfmWJHHrzsVFc');
|
||||
};
|
||||
|
||||
@@ -17,9 +17,7 @@ async function getBlogPosts() {
|
||||
}
|
||||
}
|
||||
|
||||
blogPosts = blogPosts.sort(
|
||||
(first, second) => new Date(second.date).getTime() - new Date(first.date).getTime()
|
||||
);
|
||||
blogPosts = blogPosts.sort((first, second) => new Date(second.date).getTime() - new Date(first.date).getTime());
|
||||
|
||||
return blogPosts;
|
||||
}
|
||||
|
||||
@@ -1,33 +1,32 @@
|
||||
import { PUBLIC_SERVER_URL } from '$env/static/public';
|
||||
|
||||
const sendEmail =
|
||||
(sFetch: typeof fetch) => async (subject: string, content: string, replyTo?: string) => {
|
||||
try {
|
||||
const response = await sFetch(`${PUBLIC_SERVER_URL}/sendEmail`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify([
|
||||
{
|
||||
from: `"ClassroomIO Support" <notify@mail.classroomio.com>`,
|
||||
to: 'help@classroomio.com',
|
||||
subject,
|
||||
content,
|
||||
replyTo
|
||||
}
|
||||
])
|
||||
});
|
||||
const sendEmail = (sFetch: typeof fetch) => async (subject: string, content: string, replyTo?: string) => {
|
||||
try {
|
||||
const response = await sFetch(`${PUBLIC_SERVER_URL}/sendEmail`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify([
|
||||
{
|
||||
from: `"ClassroomIO Support" <notify@mail.classroomio.com>`,
|
||||
to: 'help@classroomio.com',
|
||||
subject,
|
||||
content,
|
||||
replyTo
|
||||
}
|
||||
])
|
||||
});
|
||||
|
||||
const responseData = await response.json();
|
||||
console.log('Emails sent successfully:', responseData);
|
||||
const responseData = await response.json();
|
||||
console.log('Emails sent successfully:', responseData);
|
||||
|
||||
return 'sent';
|
||||
} catch (error) {
|
||||
console.error('Error sending email', error);
|
||||
return 'failed';
|
||||
}
|
||||
};
|
||||
return 'sent';
|
||||
} catch (error) {
|
||||
console.error('Error sending email', error);
|
||||
return 'failed';
|
||||
}
|
||||
};
|
||||
|
||||
export async function POST({ request, fetch }) {
|
||||
try {
|
||||
|
||||
@@ -10,18 +10,18 @@
|
||||
|
||||
<section>
|
||||
<PageHeader className="flex flex-col items-center justify-center text-center">
|
||||
<h1 class="mx-auto text-4xl md:text-6xl text-slate-900 flex flex-col items-center">
|
||||
<h1 class="mx-auto flex flex-col items-center text-4xl text-slate-900 md:text-6xl">
|
||||
<span>What's new on</span>
|
||||
<span class="text-blue-700 relative">ClassroomIO?</span>
|
||||
<span class="relative text-blue-700">ClassroomIO?</span>
|
||||
</h1>
|
||||
<p class="w-[90%] md:w-[60%] text-center font-normal text-lg text-slate-700 mt-10 lg:mt-7">
|
||||
<p class="mt-10 w-[90%] text-center text-lg font-normal text-slate-700 md:w-[60%] lg:mt-7">
|
||||
Get the latest news from ClassroomIO, including product updates, team announcements and more!
|
||||
</p>
|
||||
</PageHeader>
|
||||
<div class="w-full flex items-center justify-center">
|
||||
<ul class="flex flex-col items-start justify-start gap-2 w-[90%] md:w-[50%]">
|
||||
<div class="flex w-full items-center justify-center">
|
||||
<ul class="flex w-[90%] flex-col items-start justify-start gap-2 md:w-[50%]">
|
||||
{#each data.posts as post}
|
||||
<li class="py-10 w-full border-b border-gray-200">
|
||||
<li class="w-full border-b border-gray-200 py-10">
|
||||
<BlogListItem {post} />
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
@@ -57,19 +57,15 @@
|
||||
<h1 class="mx-auto flex flex-col items-center text-4xl text-slate-900 md:text-6xl">
|
||||
<span>Get in touch with <span class="text-blue-700">Us</span></span>
|
||||
</h1>
|
||||
<p
|
||||
class="mt-10 w-[90%] max-w-3xl text-center text-lg font-normal text-slate-700 md:w-[60%] lg:mt-7"
|
||||
>
|
||||
Report any bugs you encounter, request new features you'd like to see, or ask any questions
|
||||
you have about ClassroomIO
|
||||
<p class="mt-10 w-[90%] max-w-3xl text-center text-lg font-normal text-slate-700 md:w-[60%] lg:mt-7">
|
||||
Report any bugs you encounter, request new features you'd like to see, or ask any questions you have about
|
||||
ClassroomIO
|
||||
</p>
|
||||
</PageHeader>
|
||||
|
||||
<div class="mx-auto my-20">
|
||||
<!-- Content here -->
|
||||
<div
|
||||
class="mx-auto grid w-[90%] grid-cols-1 place-items-center gap-10 md:grid-cols-2 lg:w-[60%]"
|
||||
>
|
||||
<div class="mx-auto grid w-[90%] grid-cols-1 place-items-center gap-10 md:grid-cols-2 lg:w-[60%]">
|
||||
{#each formList as list}
|
||||
<button
|
||||
onclick={() => onChange(list.id, list.to)}
|
||||
|
||||
@@ -11,39 +11,28 @@
|
||||
|
||||
<section>
|
||||
<PageHeader className="flex flex-col items-center justify-center text-center">
|
||||
<h1
|
||||
class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] text-slate-900 items-center"
|
||||
>
|
||||
<h1 class="mx-auto items-center text-3xl font-normal leading-[1.5] text-slate-900 md:text-4xl lg:text-6xl">
|
||||
Our <span class="text-blue-700">Open-source</span> Friends
|
||||
</h1>
|
||||
<p class="w-[90%] md:w-[60%] text-center font-normal text-lg text-slate-700 mt-10 lg:mt-7">
|
||||
In ClassroomIO, we are committed to building a commercial open source company and here are
|
||||
some of our friends on the same mission.
|
||||
<p class="mt-10 w-[90%] text-center text-lg font-normal text-slate-700 md:w-[60%] lg:mt-7">
|
||||
In ClassroomIO, we are committed to building a commercial open source company and here are some of our friends on
|
||||
the same mission.
|
||||
</p>
|
||||
</PageHeader>
|
||||
|
||||
<ul role="list" class="m-4 mt-12 grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
|
||||
{#each data.friends as friend}
|
||||
<li
|
||||
class="overflow-hidden rounded-md border border-gray-200 flex flex-col justify-between py-6"
|
||||
>
|
||||
<li class="flex flex-col justify-between overflow-hidden rounded-md border border-gray-200 py-6">
|
||||
<div>
|
||||
<div class="text-xl font-medium leading-6 text-gray-900 pb-1 px-6">
|
||||
<div class="px-6 pb-1 text-xl font-medium leading-6 text-gray-900">
|
||||
{friend.name}
|
||||
</div>
|
||||
<p class="px-6 mt-2 text-gray-600 text-sm">
|
||||
<p class="mt-2 px-6 text-sm text-gray-600">
|
||||
{friend.description}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-left px-6 mt-3">
|
||||
<Button
|
||||
href={friend.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="outline"
|
||||
>
|
||||
Learn more
|
||||
</Button>
|
||||
<div class="mt-3 px-6 text-left">
|
||||
<Button href={friend.href} target="_blank" rel="noopener noreferrer" variant="outline">Learn more</Button>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
@@ -15,8 +15,7 @@ export async function load() {
|
||||
},
|
||||
{
|
||||
name: 'Cal.com',
|
||||
description:
|
||||
'Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.',
|
||||
description: 'Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.',
|
||||
href: 'https://cal.com'
|
||||
},
|
||||
{
|
||||
@@ -74,8 +73,7 @@ export async function load() {
|
||||
},
|
||||
{
|
||||
name: 'Papermark',
|
||||
description:
|
||||
'Open-Source Docsend Alternative to securely share documents with real-time analytics.',
|
||||
description: 'Open-Source Docsend Alternative to securely share documents with real-time analytics.',
|
||||
href: 'https://papermark.io'
|
||||
},
|
||||
{
|
||||
|
||||
@@ -28,16 +28,12 @@
|
||||
</p>
|
||||
<div class="relative mt-10 flex items-center rounded-[30px] border-2 p-[2px] lg:scale-100">
|
||||
<button
|
||||
style="background-color: {isYearlyPlan ? 'initial' : '#1D4EE2'}; color: {isYearlyPlan
|
||||
? '#5e636b'
|
||||
: '#fff'}"
|
||||
style="background-color: {isYearlyPlan ? 'initial' : '#1D4EE2'}; color: {isYearlyPlan ? '#5e636b' : '#fff'}"
|
||||
class="rounded-[30px] bg-blue-700 px-3 py-1 text-xs text-white lg:px-4 lg:py-2"
|
||||
onclick={toggleIsYearlyPlan}>Monthly</button
|
||||
>
|
||||
<button
|
||||
style="background-color: {isYearlyPlan ? '#1D4EE2' : ''}; color: {isYearlyPlan
|
||||
? '#fff'
|
||||
: '#5e636b'}"
|
||||
style="background-color: {isYearlyPlan ? '#1D4EE2' : ''}; color: {isYearlyPlan ? '#fff' : '#5e636b'}"
|
||||
class="rounded-[30px] px-3 py-1 text-xs text-white lg:px-4 lg:py-2"
|
||||
onclick={toggleIsYearlyPlan}>Annually</button
|
||||
>
|
||||
@@ -108,10 +104,7 @@
|
||||
</p>
|
||||
|
||||
{#key isYearlyPlan}
|
||||
<p
|
||||
class="mt-6 flex items-baseline gap-x-1 text-4xl font-medium text-white lg:text-4xl"
|
||||
in:fade
|
||||
>
|
||||
<p class="mt-6 flex items-baseline gap-x-1 text-4xl font-medium text-white lg:text-4xl" in:fade>
|
||||
${isYearlyPlan ? PLANS.EARLY_ADOPTER.PRICE.YEARLY : PLANS.EARLY_ADOPTER.PRICE.MONTHLY}
|
||||
</p>
|
||||
<span class="text-base text-white" in:fade>
|
||||
@@ -144,9 +137,7 @@
|
||||
<p class="mt-4 text-sm font-light leading-6 text-gray-500 lg:text-base lg:leading-6">
|
||||
{PLANS.ENTERPRISE.DESCRIPTION}
|
||||
</p>
|
||||
<p class="mt-6 flex items-baseline gap-x-1 text-xl font-medium lg:mt-6 lg:text-xl">
|
||||
Request Pricing
|
||||
</p>
|
||||
<p class="mt-6 flex items-baseline gap-x-1 text-xl font-medium lg:mt-6 lg:text-xl">Request Pricing</p>
|
||||
<button
|
||||
class="mt-10 w-full rounded-md bg-slate-900 py-3 text-base font-medium text-white hover:bg-slate-700 lg:rounded-md lg:py-3 lg:text-lg lg:font-semibold"
|
||||
data-cal-config={"{'layout':'month_view'}"}
|
||||
|
||||
@@ -65,18 +65,18 @@
|
||||
</svelte:head>
|
||||
|
||||
<PageHeader className="flex flex-col items-center justify-center text-center">
|
||||
<h1 class="text-start md:text-center text-4xl md:text-6xl text-slate-900">Product Roadmap</h1>
|
||||
<p class="text-start md:text-center w-[80%] md:w-[40%] text-slate-700 mt-10">
|
||||
This is a live document, and will be updated regularly. To submit an idea, or to view a list of
|
||||
feature requests and ideas that we're considering, check out our <a
|
||||
<h1 class="text-start text-4xl text-slate-900 md:text-center md:text-6xl">Product Roadmap</h1>
|
||||
<p class="mt-10 w-[80%] text-start text-slate-700 md:w-[40%] md:text-center">
|
||||
This is a live document, and will be updated regularly. To submit an idea, or to view a list of feature requests and
|
||||
ideas that we're considering, check out our <a
|
||||
href="https://github.com/classroomio/classroomio/discussion"
|
||||
class="underline">GitHub Discussions</a
|
||||
>
|
||||
</p>
|
||||
</PageHeader>
|
||||
<section class="relative flex flex-col items-center w-full px-4 py-20 border-b-2">
|
||||
<img src="/roadmap-one.svg" alt="" class="w-60 lg:w-96 absolute bottom-0 right-0" />
|
||||
<img src="/roadmap-two.svg" alt="" class="hidden lg:block absolute top-0 left-0" />
|
||||
<section class="relative flex w-full flex-col items-center border-b-2 px-4 py-20">
|
||||
<img src="/roadmap-one.svg" alt="" class="absolute bottom-0 right-0 w-60 lg:w-96" />
|
||||
<img src="/roadmap-two.svg" alt="" class="absolute left-0 top-0 hidden lg:block" />
|
||||
<div class="flex flex-col items-start space-y-10 px-4">
|
||||
<div>
|
||||
<h1 class="text-3xl">Latest Features</h1>
|
||||
@@ -86,7 +86,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col items-center w-full px-4 py-20 border-b-2">
|
||||
<section class="flex w-full flex-col items-center border-b-2 px-4 py-20">
|
||||
<div class="flex flex-col items-start space-y-10 px-4">
|
||||
<div>
|
||||
<h1 class="text-3xl">Upcoming Features</h1>
|
||||
|
||||
@@ -89,12 +89,7 @@
|
||||
With ClassroomIO, you can make side income while teaching the subject you love
|
||||
</p>
|
||||
|
||||
<Button
|
||||
href="/teach/register"
|
||||
target="_blank"
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
<Button href="/teach/register" target="_blank">Register</Button>
|
||||
</div>
|
||||
|
||||
<div class=" ">
|
||||
@@ -144,20 +139,12 @@
|
||||
{/each}
|
||||
</div>
|
||||
<div class="mt-3 flex justify-center px-[5%]">
|
||||
<Button
|
||||
href="/teach/register"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
<Button href="/teach/register" target="_blank" rel="noopener noreferrer nofollow">Get Started</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-10 h-[75%] bg-[#F5F8FE] px-2 py-12 lg:h-[80%] lg:px-[12%]">
|
||||
<h1 class="flex items-center justify-center gap-3 text-center text-2xl">
|
||||
Word from our fufilled facilitators
|
||||
</h1>
|
||||
<h1 class="flex items-center justify-center gap-3 text-center text-2xl">Word from our fufilled facilitators</h1>
|
||||
|
||||
<div
|
||||
class="relative mx-auto mt-10 w-full rounded-md border bg-white py-6 text-center shadow-sm before:absolute before:left-0 before:top-0 before:h-full before:w-[4.5%] before:rounded-bl-md before:rounded-tl-md before:bg-[#0233BD] md:w-2/4"
|
||||
|
||||
@@ -11,22 +11,14 @@
|
||||
|
||||
<svelte:head>
|
||||
<title>Free Tools | ClassroomIO</title>
|
||||
<meta
|
||||
property="og:image"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/free-tools.png"
|
||||
/>
|
||||
<meta property="og:image" itemprop="image" content="https://brand.cdn.clsrio.com/og/free-tools.png" />
|
||||
<meta property="og:title" content="ClassroomIO Free Tools" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="At ClassroomIO, we have built a suit of tools for anyone to use freely while collaborating with students"
|
||||
/>
|
||||
|
||||
<meta
|
||||
property="og:image:secure_url"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/free-tools.png"
|
||||
/>
|
||||
<meta property="og:image:secure_url" itemprop="image" content="https://brand.cdn.clsrio.com/og/free-tools.png" />
|
||||
|
||||
<meta name="twitter:title" content="ClassroomIO Free Tools" />
|
||||
<meta
|
||||
|
||||
@@ -8,43 +8,43 @@
|
||||
<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">
|
||||
<div class="mx-auto bg-white px-7 text-left md:w-2/4 md:p-0 md:text-center">
|
||||
<h1 class="text-3xl md:text-5xl">
|
||||
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.
|
||||
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">
|
||||
<div class="relative mx-auto my-3 flex w-[90%] bg-white md:mt-10 md:w-[50%]">
|
||||
<!-- <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"
|
||||
class="absolute left-[55px] z-10 w-[18%] rounded-full border transition-all hover:z-50 hover:scale-110"
|
||||
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"
|
||||
class="absolute left-[100px] z-20 w-[18%] rounded-full border transition-all hover:z-50 hover:scale-110"
|
||||
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"
|
||||
class="absolute left-[150px] z-30 w-[18%] rounded-full border transition-all hover:z-50 hover:scale-110"
|
||||
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"
|
||||
class="absolute left-[200px] z-40 w-[18%] rounded-full border transition-all hover:z-50 hover:scale-110"
|
||||
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"
|
||||
class="absolute left-[250px] z-50 w-[18%] rounded-full border bg-white transition-all hover:z-50 hover:scale-110"
|
||||
src="/free-tools/pomodoro.svg"
|
||||
alt="Pomodoro Timer logo"
|
||||
/>
|
||||
@@ -57,19 +57,19 @@
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<div class="p-10 px-2 md:px-0 bg-white">
|
||||
<div class="bg-white p-10 px-2 md:px-0">
|
||||
<h1 class="text-center text-2xl">Featured Tools</h1>
|
||||
|
||||
<div class="flex justify-evenly gap-y-8 flex-wrap w-full md:w-[70%] mt-10 mx-auto bg-white">
|
||||
<div class="mx-auto mt-10 flex w-full flex-wrap justify-evenly gap-y-8 bg-white md:w-[70%]">
|
||||
{#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"
|
||||
class="flex w-full rounded-md border shadow-sm transition-all ease-in-out hover:scale-95 md:max-w-[370px]"
|
||||
>
|
||||
<img class="w-[30%] rounded-l-md" src={tool.src} alt="" />
|
||||
<div class="bg-[#F5F8FE] p-5 rounded-r-md w-[70%]">
|
||||
<div class="w-[70%] rounded-r-md bg-[#F5F8FE] p-5">
|
||||
<h1 class="text-sm md:text-base">{tool.title}</h1>
|
||||
<p class="text-xs text-gray-600 mt-1.5">
|
||||
<p class="mt-1.5 text-xs text-gray-600">
|
||||
{tool.subText}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -171,16 +171,11 @@
|
||||
|
||||
<section class=" w-full bg-white px-1 md:w-full md:px-0">
|
||||
<ToolsHeader>
|
||||
<img
|
||||
src="/free-tools/pomodoro.svg"
|
||||
class="mx-auto w-[15%] rounded-full border md:w-[5%]"
|
||||
alt=""
|
||||
/>
|
||||
<img src="/free-tools/pomodoro.svg" class="mx-auto w-[15%] rounded-full border md:w-[5%]" alt="" />
|
||||
<h1 class="my-3 text-3xl text-[#040F2D] md:text-5xl">Pomodoro Timer</h1>
|
||||
<p class="mx-auto mt-10 text-sm font-light text-[#656565] md:w-[45%] md:font-normal">
|
||||
Make your workday more engaging and effective with the Pomodoro timer, break work into
|
||||
25-minute focused intervals called "pomodoros," followed by 5-minute breaks. take a longer
|
||||
break.
|
||||
Make your workday more engaging and effective with the Pomodoro timer, break work into 25-minute focused intervals
|
||||
called "pomodoros," followed by 5-minute breaks. take a longer break.
|
||||
</p>
|
||||
</ToolsHeader>
|
||||
|
||||
@@ -280,12 +275,9 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => deleteTodo(i)}
|
||||
class="rounded-sm bg-[#F7F7F7] px-5 py-2 text-xs font-semibold"
|
||||
>Discard</button
|
||||
class="rounded-sm bg-[#F7F7F7] px-5 py-2 text-xs font-semibold">Discard</button
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded-sm bg-[#0D4CFF] px-5 py-2 text-xs font-semibold text-white"
|
||||
<button type="submit" class="rounded-sm bg-[#0D4CFF] px-5 py-2 text-xs font-semibold text-white"
|
||||
>Save</button
|
||||
>
|
||||
</div>
|
||||
@@ -329,9 +321,7 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-10 flex items-center justify-between">
|
||||
<p
|
||||
class="rounded-[3px] bg-[#EAEAEA] px-1.5 py-0.5 text-xs font-medium text-[#656565]"
|
||||
>
|
||||
<p class="rounded-[3px] bg-[#EAEAEA] px-1.5 py-0.5 text-xs font-medium text-[#656565]">
|
||||
{todo.time}
|
||||
</p>
|
||||
|
||||
|
||||
@@ -113,9 +113,7 @@
|
||||
transition:fly={{ x: -100, delay: 600, easing: sineInOut }}
|
||||
class="absolute top-[43%] z-[150] flex w-full flex-col items-center justify-center"
|
||||
>
|
||||
<div
|
||||
class="flex h-[8vh] w-full items-center justify-center gap-10 bg-white py-1 text-[#0233BD] md:h-[13vh]"
|
||||
>
|
||||
<div class="flex h-[8vh] w-full items-center justify-center gap-10 bg-white py-1 text-[#0233BD] md:h-[13vh]">
|
||||
{#if message != 'Tie game!'}
|
||||
<img src="/free-tools/tic-tac/winner-star-icon.svg" alt="Star icon" class="h-full" />
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user