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}
|
||||
/>
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="384" height="946" viewBox="0 0 384 946" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M401.927 8.80726C407.623 84.1489 413.319 159.49 416.916 234.932C420.513 310.274 422.112 385.715 419.414 461.157C417.216 524.308 414.018 588.558 398.83 650.111C385.74 703.27 362.458 755.329 319.691 791.201C282.52 822.277 233.058 833.769 185.495 828.473C179.799 827.873 174.104 826.974 168.508 825.875C170.207 812.185 170.806 798.496 170.407 784.806C169.507 758.427 164.711 732.047 155.418 707.366C145.026 679.788 127.24 651.01 99.4615 638.12C74.1811 626.429 44.0044 633.024 29.016 657.205C16.2259 677.789 16.8255 704.968 23.0207 727.651C36.5102 777.712 82.4747 814.583 129.039 832.969C135.334 835.467 141.729 837.665 148.224 839.464C144.527 859.449 138.531 878.934 130.438 897.319C110.653 942.384 78.8774 982.753 37.2097 1009.33C26.9177 1015.93 16.126 1021.62 4.93468 1026.42C0.43816 1028.42 -0.561067 1035.01 1.63723 1038.91C4.33514 1043.61 9.53112 1044.11 14.1276 1042.21C62.9897 1021.02 103.259 982.853 130.338 937.288C147.424 908.611 159.515 876.735 165.71 843.861C203.681 851.455 243.95 849.057 279.922 835.167C333.58 814.483 372.45 769.518 395.233 717.758C419.813 662.001 428.507 600.849 433.203 540.496C439.298 461.956 439.998 383.017 437.8 304.278C435.501 225.04 430.305 145.901 424.41 66.8622C423.011 47.5771 421.512 28.1922 420.013 8.90711C419.214 -2.78381 401.028 -2.88378 401.927 8.80726ZM62.69 764.122C48.401 746.836 38.7085 726.152 37.2097 703.569C36.0106 684.384 40.5071 663.101 58.2934 653.908C82.7744 641.317 108.255 662.201 121.844 681.386C136.833 702.57 144.826 728.35 149.223 753.631C153.02 775.913 153.52 798.796 150.922 821.378C116.748 811.186 85.3724 791.601 62.69 764.122Z" fill="#0F62FE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="346" height="302" viewBox="0 0 346 302" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M330.802 -469.586C318.782 -405.831 306.762 -342.076 292.979 -278.705C279.219 -215.416 263.779 -152.489 244.775 -90.5164C228.917 -38.6268 211.986 13.9523 185.709 61.629C163.039 102.81 132.159 140.815 88.7151 161.063C50.9786 178.577 7.40086 177.116 -30.8715 162.153C-35.4623 160.39 -39.9864 158.378 -44.3832 156.223C-39.932 145.246 -36.3924 134.025 -33.6816 122.582C-28.5649 100.503 -26.6804 77.5575 -28.9028 55.0217C-31.3929 29.8382 -39.7495 2.01689 -59.9245 -14.8477C-78.2942 -30.1626 -104.789 -31.3992 -122.594 -14.674C-137.777 -0.443844 -143.32 22.2319 -143.223 42.4217C-143.16 86.9409 -113.231 127.738 -78.6962 153.335C-74.0301 156.806 -69.2146 160.051 -64.2273 162.986C-71.7351 178.74 -81.038 193.568 -91.8371 207.019C-118.262 239.999 -153.588 266.42 -194.055 279.205C-204.057 282.387 -214.273 284.713 -224.621 286.204C-228.795 286.862 -231.089 292.11 -230.132 295.831C-228.938 300.325 -224.74 301.895 -220.505 301.341C-175.271 294.631 -133.389 271.921 -100.803 240.147C-80.2574 220.159 -63.1454 196.408 -50.701 170.519C-20.8955 185.256 13.0368 192.216 45.9592 188.691C95.0608 183.46 137.293 154.804 167.692 116.937C200.471 76.1547 221.272 27.3662 238.58 -21.6477C261.09 -85.4343 279.213 -150.751 294.889 -216.547C310.593 -282.779 323.871 -349.572 336.547 -416.438C339.672 -432.744 342.737 -449.155 345.78 -465.483C347.715 -475.358 332.654 -479.482 330.802 -469.586ZM-118.426 81.4878C-126.436 63.9746 -129.878 44.665 -126.102 25.6018C-122.833 9.42295 -114.374 -7.2305 -97.5784 -10.9024C-74.4756 -15.9042 -57.9832 7.07978 -50.9757 26.0123C-43.252 46.9132 -42.3512 70.0719 -44.3229 92.0169C-46.1257 111.342 -50.7967 130.432 -57.9702 148.585C-84.049 132.537 -105.72 109.32 -118.426 81.4878Z" fill="#0F62FE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
Reference in New Issue
Block a user