feat: classroomio marketing pages (#497)
* feat: init * Updated employee training and bootcamps page * updated landing pages for all solutions * feat: corrections implimented to landing pages * feat: new updates * Updates on header and footer along side corrections. * update lock-file * improvements * chore: clean up navigation * chore: use timeout to close solutions * chore: complete proof reading and improvements * move all images to CF * finish up cleaning --------- Co-authored-by: Rotimi Best <[email protected]>
This commit is contained in:
Eniola Sola-Kehinde
co-authored by
Rotimi Best
Rotimi Best
parent
bfed98b523
commit
b6c2563d79
@@ -5,7 +5,7 @@
|
||||
|
||||
<div class="border-t-[1px] px-[2%] lg:px-[14%]">
|
||||
<div class="flex flex-col items-center justify-between py-[10%] pl-5 lg:flex-row lg:pl-0">
|
||||
<div class="w-full lg:w-2/4">
|
||||
<div class="w-full min-w-[200px] lg:w-3/12">
|
||||
<img
|
||||
width="32"
|
||||
height="32"
|
||||
@@ -40,12 +40,12 @@
|
||||
</a>
|
||||
<a href="https://twitter.com/classroomio" target="_blank" aria-label="Twitter Link">
|
||||
<img
|
||||
width="10"
|
||||
height="10"
|
||||
width="20"
|
||||
height="20"
|
||||
loading="lazy"
|
||||
src="/twitter_logo.png"
|
||||
src="/twitter.svg"
|
||||
alt=""
|
||||
class="w-3 scale-90 cursor-pointer transition-all hover:scale-110 hover:fill-gray-500 lg:scale-150"
|
||||
class="scale-90 cursor-pointer transition-all hover:scale-110 hover:fill-gray-500 lg:scale-150"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/@ClassroomIO" target="_blank" aria-label="Youtube Link">
|
||||
@@ -58,9 +58,9 @@
|
||||
</div>
|
||||
|
||||
<nav
|
||||
class="mt-16 flex w-full flex-col items-start justify-between gap-3 space-y-6 lg:mt-0 lg:w-2/4 lg:flex-row lg:space-y-0"
|
||||
class="mt-16 flex w-full min-w-[400px] flex-col items-start justify-end gap-12 space-y-6 lg:mt-0 lg:w-3/4 lg:flex-row lg:space-y-0"
|
||||
>
|
||||
<div>
|
||||
<div class="max-w-[120px]">
|
||||
<p class="lg:text-base mb-3 text-base font-semibold leading-6 text-gray-900 lg:mb-10">
|
||||
Product
|
||||
</p>
|
||||
@@ -93,7 +93,30 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="max-w-[120px]">
|
||||
<p class="lg:text-base mb-3 text-base font-semibold leading-6 text-gray-900 lg:mb-10">
|
||||
Solutions
|
||||
</p>
|
||||
<ul class="space-y-2 lg:space-y-4">
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="/employee-training">Employee Training</a>
|
||||
</li>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="/bootcamps">Bootcamps</a>
|
||||
</li>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="/customer-education">Customer Education</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="max-w-[120px]">
|
||||
<p class="lg:text-base mb-3 text-base font-semibold leading-6 text-gray-900 lg:mb-10">
|
||||
Resources
|
||||
</p>
|
||||
@@ -128,7 +151,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="max-w-[120px]">
|
||||
<p class="lg:text-base mb-3 text-base font-semibold leading-6 text-gray-900 lg:mb-10">
|
||||
Company
|
||||
</p>
|
||||
|
||||
@@ -20,12 +20,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-base leading-snug text-center">
|
||||
<span class="font-bold opacity-50">“</span>
|
||||
<span class="font-bold opacity-50 text-4xl">“</span>
|
||||
<span class="text-gray-800" style="font-size: 17px;"
|
||||
>ClassroomIO really helped me bootstrap my program. The dashboard is extremely
|
||||
intuitive. I could navigate most of it without any help / support. Coming from framer, I
|
||||
can honestly say that I am extremely greatful that I found ClassroomIO.</span
|
||||
> <span class="font-bold opacity-50 inline-block">”</span>
|
||||
> <span class="font-bold opacity-50 inline-block text-4xl">”</span>
|
||||
</div>
|
||||
<div class="mx-auto flex items-center gap-2 justify-center">
|
||||
<div
|
||||
|
||||
@@ -107,46 +107,6 @@
|
||||
{/key}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- free tools section -->
|
||||
<div class="mt-10">
|
||||
<div class="text-center">
|
||||
<h1 class="text-3xl md:text-5xl font-bold m-0">
|
||||
Explore Our <span class="text-[#0233BD]">Free Tools</span>
|
||||
</h1>
|
||||
<p class="text-sm md:text-base text-[#334155] md:w-[65%] mt-5 mx-auto">
|
||||
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>
|
||||
|
||||
<div class="flex justify-evenly gap-y-8 flex-wrap w-full mt-10 mx-auto">
|
||||
{#each freeTools as tool}
|
||||
<a
|
||||
class="w-full flex flex-col gap-3 max-w-[400px] md:max-w-[300px] mt-5 p-5 border rounded-md bg-white shadow-sm hover:scale-95 transition-all ease-in-out cursor-pointer"
|
||||
href="/tools/{tool.slug}"
|
||||
>
|
||||
<img class="w-[30%] rounded-full border border-[#EAEAEA]" src={tool.src} alt="" />
|
||||
<div class="rounded-r-md p-3">
|
||||
<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 class="flex justify-center items-center mt-20">
|
||||
<a
|
||||
class="md:text-base w-full md:max-w-[300px] max-w-[400px] rounded-md bg-blue-700 px-6 py-3 lg:px-6 lg:py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl hover:scale-95 lg:font-semibold cursor-pointer"
|
||||
href="/tools"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
More Tools
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -3,50 +3,54 @@
|
||||
import TextAlignJustify from 'carbon-icons-svelte/lib/TextAlignJustify.svelte';
|
||||
import CloseLarge from 'carbon-icons-svelte/lib/CloseLarge.svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import MachineLearningModel from 'carbon-icons-svelte/lib/MachineLearningModel.svelte';
|
||||
import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
|
||||
import CourseIcon from '$lib/Icons/CourseIcon.svelte';
|
||||
import MapCenter from 'carbon-icons-svelte/lib/MapCenter.svelte';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
let showsubNav = false;
|
||||
let showNav = false;
|
||||
let showDrawer = false;
|
||||
let showSolutions = false;
|
||||
let activeLink = '';
|
||||
let closeTimeout: NodeJS.Timeout;
|
||||
|
||||
function handleShow() {
|
||||
showsubNav = !showsubNav;
|
||||
function closeSolutions() {
|
||||
closeTimeout = setTimeout(() => {
|
||||
showSolutions = false;
|
||||
}, 100);
|
||||
}
|
||||
function resetCloseTimeout() {
|
||||
clearTimeout(closeTimeout);
|
||||
}
|
||||
|
||||
function handleShowNav() {
|
||||
showNav = !showNav;
|
||||
function handleShowDrawer() {
|
||||
showDrawer = !showDrawer;
|
||||
}
|
||||
|
||||
const superpowers = [
|
||||
function handleShowSolutions() {
|
||||
showSolutions = !showSolutions;
|
||||
}
|
||||
|
||||
const solutions = [
|
||||
{
|
||||
key: 'coursemanagement',
|
||||
title: 'Course Management',
|
||||
subtitle: 'Simple course management tools'
|
||||
key: 'employee-training',
|
||||
title: 'Employee Training',
|
||||
subtitle: 'Keep your team in sync.'
|
||||
},
|
||||
{
|
||||
key: 'ai',
|
||||
title: 'AI Support',
|
||||
subtitle: 'Double your productivity with AI'
|
||||
key: 'bootcamps',
|
||||
title: 'Bootcamps',
|
||||
subtitle: 'Drive student satisfaction.'
|
||||
},
|
||||
{
|
||||
key: 'customization',
|
||||
title: 'Dashboard Customization',
|
||||
subtitle: 'Customize your classroom to your needs'
|
||||
},
|
||||
{
|
||||
key: 'collaboration',
|
||||
title: 'Community',
|
||||
subtitle: 'Seamlessly collaborate with your students'
|
||||
key: 'customer-education',
|
||||
title: 'Customer Education',
|
||||
subtitle: 'Teach customers your product.'
|
||||
}
|
||||
];
|
||||
|
||||
$: activeLink = $page.url.pathname;
|
||||
$: activeHash = $page.url.hash;
|
||||
$: isSuperpowersActive = superpowers.some((sp) => activeHash.includes(sp.key));
|
||||
$: isSolutionsActive = solutions.some((s) => activeHash.includes(s.key));
|
||||
</script>
|
||||
|
||||
<div
|
||||
@@ -67,47 +71,51 @@
|
||||
</a>
|
||||
|
||||
<nav class="w-[50%] hidden md:hidden lg:block">
|
||||
<ul class="flex items-center justify-between w-full gap-2">
|
||||
<ul class="flex justify-center items-center w-full gap-5">
|
||||
<li class="text-gray-800 font-semibold text-sm cursor-pointer relative">
|
||||
<button
|
||||
class="flex items-center hover:bg-gray-100 px-4 py-2 rounded-md"
|
||||
on:click={() => (showNav = !showNav)}
|
||||
class:active={isSuperpowersActive}
|
||||
on:focus={() => (showSolutions = true)}
|
||||
on:mouseenter={() => (showSolutions = true)}
|
||||
on:mouseleave={closeSolutions}
|
||||
class="flex items-center hover:bg-gray-100 {showSolutions &&
|
||||
'bg-gray-100'} px-4 py-2 rounded-md"
|
||||
on:click={() => (showSolutions = !showSolutions)}
|
||||
class:active={isSolutionsActive}
|
||||
>
|
||||
Our Superpowers <ChevronDown class="ml-2" />
|
||||
<span class="mr-2">Solutions</span>
|
||||
<ChevronDown size={16} />
|
||||
</button>
|
||||
{#if showNav}
|
||||
<div
|
||||
class="absolute w-[24rem] top-10 -left-10 border px-5 py-5 rounded-[30px] shadow-slate-700 z-[3001] bg-white"
|
||||
{#if showSolutions}
|
||||
<button
|
||||
class="absolute w-[20rem] top-10 -left-10 border rounded-lg px-2 py-4 shadow-slate-700 z-[3001] bg-white flex flex-col gap-3"
|
||||
on:mouseenter={resetCloseTimeout}
|
||||
on:mouseleave={() => (showSolutions = false)}
|
||||
>
|
||||
{#each superpowers as superpower}
|
||||
{#each solutions as solution}
|
||||
<a
|
||||
class="flex justify-between items-center w-full rounded-lg hover:bg-gray-100 p-5 mb-4"
|
||||
href="/#{superpower.key}"
|
||||
on:click={() => {
|
||||
showNav = !showNav;
|
||||
}}
|
||||
class="flex justify-between items-center w-full rounded-lg hover:bg-gray-100 hover:cursor-pointer p-2"
|
||||
href="/{solution.key}"
|
||||
on:click={() => (showSolutions = false)}
|
||||
>
|
||||
{#if superpower.key === 'coursemanagement'}
|
||||
{#if solution.key === 'employee-training'}
|
||||
<CourseIcon />
|
||||
{:else if superpower.key === 'customization'}
|
||||
{:else if solution.key === 'bootcamps'}
|
||||
<MapCenter size={24} />
|
||||
{:else if superpower.key === 'collaboration'}
|
||||
{:else if solution.key === 'customer-education'}
|
||||
<ForumIcon size={24} />
|
||||
{:else if superpower.key === 'ai'}
|
||||
<MachineLearningModel size={24} />
|
||||
{/if}
|
||||
<div class="w-[86%] text-start">
|
||||
|
||||
<div class="w-[84%] text-start">
|
||||
<h3 class="font-semibold text-sm text-gray-700">
|
||||
{superpower.title}
|
||||
{solution.title}
|
||||
</h3>
|
||||
<p class="font-normal text-sm text-gray-600">
|
||||
{superpower.subtitle}
|
||||
{solution.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
</li>
|
||||
<a
|
||||
@@ -117,14 +125,6 @@
|
||||
>
|
||||
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Free Tools</li>
|
||||
</a>
|
||||
<!-- <a
|
||||
href="/docs"
|
||||
target="_blank"
|
||||
class="text-gray-800 font-semibold text-sm cursor-pointer"
|
||||
class:active={activeLink.startsWith('/docs')}
|
||||
>
|
||||
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Docs</li>
|
||||
</a> -->
|
||||
|
||||
<a
|
||||
href="/blog"
|
||||
@@ -172,10 +172,12 @@
|
||||
type="button"
|
||||
aria-label="Hamburger Menu"
|
||||
class="block md:block lg:hidden"
|
||||
on:click={handleShowNav}><TextAlignJustify size={24} /></button
|
||||
on:click={handleShowSolutions}
|
||||
>
|
||||
<TextAlignJustify size={24} />
|
||||
</button>
|
||||
|
||||
{#if showNav}
|
||||
{#if showSolutions}
|
||||
<div
|
||||
in:fly={{ x: 20, duration: 700 }}
|
||||
out:fly={{ x: 20, duration: 400 }}
|
||||
@@ -190,31 +192,33 @@
|
||||
alt="classroomio logo"
|
||||
class="w-[15%]"
|
||||
/>
|
||||
<button on:click={handleShowNav}><CloseLarge size={24} class="mr-5" /></button>
|
||||
<button class="mr-5" on:click={handleShowSolutions}>
|
||||
<CloseLarge size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="flex items-center flex-col lg:flex-row justify-between w-full">
|
||||
<li class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer w-full">
|
||||
<button
|
||||
class="w-full flex items-center justify-between hover:bg-gray-100 py-3 px-4 rounded-lg"
|
||||
on:click={handleShow}
|
||||
class:active={isSuperpowersActive}
|
||||
on:click={handleShowDrawer}
|
||||
class:active={isSolutionsActive}
|
||||
>
|
||||
Our Superpowers <ChevronDown />
|
||||
</button>
|
||||
{#if showsubNav}
|
||||
{#if showDrawer}
|
||||
<div in:fly={{ y: -20, duration: 700 }} out:fly={{ y: 20, duration: 400 }}>
|
||||
{#each superpowers as superpower}
|
||||
{#each solutions as solution}
|
||||
<a
|
||||
href="/#{superpower.key}"
|
||||
href="/{solution.key}"
|
||||
on:click={() => {
|
||||
handleShowNav();
|
||||
handleShowSolutions();
|
||||
}}
|
||||
>
|
||||
<p
|
||||
class="font-normal text-xs text-gray-700 hover:bg-gray-100 rounded-lg py-2.5 pl-5"
|
||||
>
|
||||
{superpower.title}
|
||||
{solution.title}
|
||||
</p>
|
||||
</a>
|
||||
{/each}
|
||||
@@ -224,7 +228,7 @@
|
||||
<!-- 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}
|
||||
on:click={handleShowSolutions}
|
||||
href="/tools"
|
||||
>
|
||||
<li>Free Tools</li>
|
||||
@@ -232,7 +236,7 @@
|
||||
<!-- <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();
|
||||
handleShowSolutions();
|
||||
}}
|
||||
class:active={activeLink.startsWith('/docs')}
|
||||
href="/docs"
|
||||
@@ -243,7 +247,7 @@
|
||||
<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();
|
||||
handleShowSolutions();
|
||||
}}
|
||||
class:active={activeLink.startsWith('/blog')}
|
||||
href="/blog"
|
||||
@@ -254,7 +258,7 @@
|
||||
<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();
|
||||
handleShowSolutions();
|
||||
}}
|
||||
href="/pricing"
|
||||
class:active={activeLink.startsWith('/pricing')}
|
||||
@@ -264,7 +268,7 @@
|
||||
<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();
|
||||
handleShowSolutions();
|
||||
}}
|
||||
class:active={activeHash.includes('morefeatures')}
|
||||
href="/#morefeatures"
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</script>
|
||||
|
||||
<div
|
||||
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"
|
||||
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 max-w-4xl"
|
||||
>
|
||||
<div>
|
||||
<h1
|
||||
|
||||
Reference in New Issue
Block a user