feat: roadmap page (#327)
* finished the timeline * i think i am done here * updated the signup component * modify roadmap content --------- Co-authored-by: Rotimi Best <best@classroomio.com>
This commit is contained in:
Em_Dev
@@ -34,7 +34,7 @@
|
||||
</div>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Spend less time managing your LMS and more time teaching with ClassroomIO"
|
||||
header="Spend less time managing your LMS and more time training with ClassroomIO"
|
||||
subText="Try before you buy. No credit card required."
|
||||
btnLabel="Book a demo"
|
||||
link="classroomio/demo"
|
||||
|
||||
@@ -85,6 +85,11 @@
|
||||
>
|
||||
<a href="/#ai"> AI Lesson Planner </a>
|
||||
</li>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="/#student-dashboard"> Student Dashboard </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -126,7 +131,12 @@
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="mailto:help@classroomio.com" target="_blank"> Contact us </a>
|
||||
<a href="/roadmap"> Roadmap </a>
|
||||
</li>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="mailto:help@classroomio.com" target="_blank"> Support </a>
|
||||
</li>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
|
||||
@@ -7,10 +7,12 @@
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="floating grad relative mx-auto mt-[10%] 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"
|
||||
>
|
||||
<div>
|
||||
<h1 class="font-display mt-3 text-3xl font-bold tracking-tight text-white lg:mt-2 lg:text-4xl">
|
||||
<h1
|
||||
class="font-display mt-3 text-3xl font-bold tracking-tight text-white lg:mt-2 lg:text-4xl max-w-2xl"
|
||||
>
|
||||
{header}
|
||||
</h1>
|
||||
<p class="mt-6 text-xl text-gray-300 lg:text-lg">
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
<script lang="ts">
|
||||
export let items: {
|
||||
title: string;
|
||||
desc: string;
|
||||
}[] = [];
|
||||
</script>
|
||||
|
||||
<div class="relative w-fit flex justify-center space-x-8 md:space-x-10">
|
||||
<div
|
||||
class="w-[3px] md:w-[2px] bg-blue-600 mt-10 before:bg-gradient-to-t before:from-white before:to-transparent before:w-[4px] before:h-[9rem] before:absolute before:bottom-0"
|
||||
/>
|
||||
<div class="space-y-8">
|
||||
{#each items as card, index}
|
||||
<div class="md:w-[35rem] w-full border-2 rounded-lg px-4 py-8 space-y-4 bg-white">
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class={`z-50 absolute -left-3 ${
|
||||
index > 0 &&
|
||||
'before:bg-gradient-to-t before:from-white before:to-transparent before:w-[4px] before:h-[9rem] before:absolute before:-top-36'
|
||||
} flex items-center justify-center w-7 h-7 bg-blue-100 rounded-full`}
|
||||
>
|
||||
<div class="w-4 h-4 bg-blue-800 rounded-full z-50" />
|
||||
</div>
|
||||
<h1 class="text-2xl font-bold text-blue-800">{card.title}</h1>
|
||||
</div>
|
||||
<p class="text-base text-gray-500">
|
||||
{card.desc}
|
||||
</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1 +0,0 @@
|
||||
export const prerender = false;
|
||||
@@ -0,0 +1,89 @@
|
||||
<script>
|
||||
import PageHeader from '$lib/PageHeader/PageHeader.svelte';
|
||||
import Timeline from '$lib/Timeline/Timeline.svelte';
|
||||
import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
|
||||
|
||||
const newFeatures = [
|
||||
{
|
||||
title: 'LMS Customization',
|
||||
desc: 'Right in your settings you can customize what you students see in their dashboard in few clicks.'
|
||||
},
|
||||
{
|
||||
title: 'Course Newsfeed',
|
||||
desc: 'You can now send a broadcast message to all the students participating in your course right from our dashboard.'
|
||||
},
|
||||
{
|
||||
title: 'Multi language support',
|
||||
desc: 'Our dashboard now supports 7 new languages. In addition, we allow you create course content in those any of those languages.'
|
||||
},
|
||||
{
|
||||
title: 'Security RLS',
|
||||
desc: "All the tables we've created now have role level security enabled by default"
|
||||
},
|
||||
{
|
||||
title: 'Increased video limit',
|
||||
desc: 'You can now upload a single video of about 500mb without interruption.'
|
||||
},
|
||||
{
|
||||
title: 'More certificate templates',
|
||||
desc: 'We have shipped 4 more certificate templates in which you can choose from right within your course dashboard'
|
||||
}
|
||||
];
|
||||
|
||||
const upcomingFeatures = [
|
||||
{
|
||||
title: 'Pathways',
|
||||
desc: 'This feature gives you the ability to group courses into folder which we are calling - Pathways. Students can complete a series of courses before getting a certificate'
|
||||
},
|
||||
{
|
||||
title: 'Landing page builder',
|
||||
desc: 'With more templates and pages, we will allow educators create simple web pages using our platform to showcase their programs and offerings.'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Roadmap | ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<PageHeader className="flex flex-col items-center justify-center text-center">
|
||||
<h1 class="text-start md:text-center text-5xl md:text-7xl font-bold 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
|
||||
href="https://github.com/rotimi-best/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" />
|
||||
<div class="flex flex-col items-start space-y-10 px-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Latest Features</h1>
|
||||
</div>
|
||||
|
||||
<Timeline items={newFeatures} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col items-center w-full px-4 py-20 border-b-2">
|
||||
<div class="flex flex-col items-start space-y-10 px-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Upcoming Features</h1>
|
||||
</div>
|
||||
|
||||
<Timeline items={upcomingFeatures} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Share Your First Course With Your Audience In Minutes"
|
||||
subText="In about 4 Clicks you can already start creating courses."
|
||||
btnLabel="Get started for free"
|
||||
link="/signup"
|
||||
demo={false}
|
||||
/>
|
||||
Reference in New Issue
Block a user