chore: landing page improvements (#262)
* text animation * feat: add colors to text * chore: add "in minutes" text * responsiveness fix * update * refactor * improvements * Center text tags * center text tag * update text --------- Co-authored-by: Rotimi Best <[email protected]>
This commit is contained in:
Adeyemi Adetunji
co-authored by
Rotimi Best
Rotimi Best
parent
10f85278b5
commit
ca466b5431
@@ -6,38 +6,34 @@
|
||||
<Section
|
||||
id="coursemanagement"
|
||||
tagline="Simplified"
|
||||
taglineIcon="simplified"
|
||||
title="Advanced Course Management"
|
||||
title="Course Management"
|
||||
description="ClassroomIO simplifies teaching tasks, boosts the educational experience, and is beneficial for both educators and students, providing a user-friendly platform for assessment, grading, attendance, and scorebook management."
|
||||
video="https://brand.cdn.clsrio.com/course-management.mp4"
|
||||
rightToLeft={true}
|
||||
/>
|
||||
<Section
|
||||
id="ai"
|
||||
tagline="Efficient"
|
||||
title="AI Support"
|
||||
description="Our platform integrates AI to simplify lesson outline generation, streamline lesson planning and spark creative ideas. With ClassroomIO, educators can focus on what matters most: teaching."
|
||||
rightToLeft={false}
|
||||
video="https://brand.cdn.clsrio.com/ai-lesson.mp4"
|
||||
/>
|
||||
<Section
|
||||
id="customization"
|
||||
tagline="Flexible"
|
||||
taglineIcon="flexible"
|
||||
title="Customization at its Core"
|
||||
title="Dashboard Customization"
|
||||
description="ClassroomIO offers organizations the ability to tailor our LMS to their specific requirements. With our customizable features, you can create a personalized learning environment that aligns with your organization's goals"
|
||||
rightToLeft={true}
|
||||
video="https://brand.cdn.clsrio.com/lms-customization.mp4"
|
||||
/>
|
||||
<Section
|
||||
id="collaboration"
|
||||
tagline="Collaboration"
|
||||
taglineIcon="collaboration"
|
||||
title="Your Knowledge Base"
|
||||
tagline="Collaborative"
|
||||
title="Student and Teacher Community"
|
||||
description="Our platform includes a forum-like feature where students and teachers can ask and answer questions, creating a collaborative learning environment. This fosters engagement and knowledge sharing among the community"
|
||||
video="https://brand.cdn.clsrio.com/community.mp4"
|
||||
rightToLeft={true}
|
||||
/>
|
||||
<Section
|
||||
id="ai"
|
||||
tagline="Productivity"
|
||||
taglineIcon="productivity"
|
||||
title="AI Integration for Lesson Planning"
|
||||
description="Our platform integrates AI to simplify lesson outline generation, streamline lesson planning and spark creative ideas. With ClassroomIO, educators can focus on what matters most: teaching."
|
||||
rightToLeft={true}
|
||||
video="https://brand.cdn.clsrio.com/ai-lesson.mp4"
|
||||
rightToLeft={false}
|
||||
/>
|
||||
|
||||
<!-- body section 5 -->
|
||||
|
||||
@@ -1,15 +1,32 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { sineInOut } from 'svelte/easing';
|
||||
import { PUBLIC_ENABLE_USERS_COMPANIES } from '$env/static/public';
|
||||
|
||||
const names = [
|
||||
{ label: 'Bootcamp', color: '#3ADFEC' },
|
||||
{ label: 'Course', color: '#BF0696' },
|
||||
{ label: 'Training', color: '#0233BD' },
|
||||
{ label: 'Academy', color: '#9747FF' }
|
||||
];
|
||||
let animate = false;
|
||||
let titleIndex = 0;
|
||||
let timeout: NodeJS.Timer;
|
||||
|
||||
onMount(() => {
|
||||
setTimeout(() => {
|
||||
animate = true;
|
||||
}, 70);
|
||||
|
||||
timeout = setInterval(() => {
|
||||
const nextIndex = titleIndex + 1;
|
||||
titleIndex = names[nextIndex] ? nextIndex : 0;
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
clearTimeout(timeout);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -26,7 +43,7 @@
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="justify-between w-[90%] absolute top-[10%] left-[4%] hidden lg:flex">
|
||||
<div class="justify-between w-[90%] absolute top-[10%] left-[5%] hidden lg:flex">
|
||||
{#if animate}
|
||||
<div
|
||||
class="relative transition-all hover:scale-110 rotate-12"
|
||||
@@ -73,12 +90,28 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="w-full flex flex-col">
|
||||
<h1
|
||||
class="mx-auto w-[89%] pr-20 lg:pr-0 lg:w-[60%] text-left lg:text-center font-bold md:leading-[1.5] text-slate-900 text-5xl lg:text-7xl"
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="font-bold md:leading-[1.5] text-left lg:text-center ml-6 text-slate-900 text-4xl lg:text-7xl"
|
||||
>
|
||||
Launch Your Online Bootcamp <span class="text-blue-700">In Minutes </span>
|
||||
</h1>
|
||||
<span>Launch Your Online</span> <br />
|
||||
<div class="flex-wrap flex items-center lg:gap-3">
|
||||
<span
|
||||
class="w-full lg:w-[48%] h-[40px] md:h-[50px] lg:h-[90px] mb-0 mt-1 md:mt-0 lg:-mb-4 relative inline-block"
|
||||
>
|
||||
{#key titleIndex}
|
||||
<span
|
||||
class="absolute left-0 right-[unset] lg:right-0 lg:left-[unset]"
|
||||
style="color: {names[titleIndex].color}"
|
||||
transition:fly={{ y: 100, delay: 0, easing: sineInOut }}
|
||||
>
|
||||
{names[titleIndex].label}
|
||||
</span>
|
||||
{/key}
|
||||
</span>
|
||||
<span>In Minutes</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-md mx-auto mt-10 px-4 text-slate-700 md:text-lg lg:mt-6 lg:w-[42%] lg:p-0">
|
||||
Meet a better learning management system (LMS) for teachers and students. ClassroomIO allows
|
||||
@@ -86,7 +119,7 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="justify-between w-[90%] absolute top-[35%] left-[4%] hidden lg:flex">
|
||||
<div class="justify-between w-[90%] absolute top-[30%] left-[5%] hidden lg:flex">
|
||||
{#if animate}
|
||||
<div
|
||||
class="relative transition-all hover:scale-110 -rotate-12"
|
||||
@@ -146,7 +179,7 @@
|
||||
href="/signup"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
Get Started for Free
|
||||
Sign Up for Free
|
||||
</a>
|
||||
<!-- <a
|
||||
class="font-medium lg:font-semibold text-sm md:text-md w-11/12 md:w-fit border px-6 py-3 lg:px-10 lg:py-5 rounded-md"
|
||||
@@ -173,6 +206,7 @@
|
||||
class="mx-auto w-[85%] lg:w-[70%]"
|
||||
>
|
||||
<iframe
|
||||
title="ClassroomIO Live Demo"
|
||||
src="https://app.supademo.com/embed/cluw8chyy06nhq2s9m697a680"
|
||||
allow="clipboard-write"
|
||||
frameborder="0"
|
||||
|
||||
@@ -23,22 +23,22 @@
|
||||
{
|
||||
key: 'coursemanagement',
|
||||
title: 'Course Management',
|
||||
subtitle: 'Advanced course management tools '
|
||||
subtitle: 'Simple course management tools '
|
||||
},
|
||||
{
|
||||
key: 'ai',
|
||||
title: 'AI Support',
|
||||
subtitle: 'Double your productivity with AI'
|
||||
},
|
||||
{
|
||||
key: 'customization',
|
||||
title: 'Customizations',
|
||||
title: 'Dashboard Customization',
|
||||
subtitle: 'Customize your classroom to your needs'
|
||||
},
|
||||
{
|
||||
key: 'collaboration',
|
||||
title: 'Forum',
|
||||
title: 'Community',
|
||||
subtitle: 'Seamlessly collaborate with your students'
|
||||
},
|
||||
{
|
||||
key: 'ai',
|
||||
title: 'AI Lesson Planner',
|
||||
subtitle: "10x Educator's productivity with AI"
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<h1
|
||||
class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] flex flex-col items-center gap-4"
|
||||
>
|
||||
A Personalized Dashboard for Your Students
|
||||
Your Student Dashboard
|
||||
</h1>
|
||||
|
||||
<p
|
||||
|
||||
@@ -2,20 +2,20 @@
|
||||
<h1
|
||||
class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] flex flex-col items-center gap-4"
|
||||
>
|
||||
Our Testimonials
|
||||
Hear from Happy ClassroomIO Users
|
||||
</h1>
|
||||
|
||||
<p
|
||||
class="mx-auto text-center my-5 lg:mt-6 px-4 lg:p-0 text-md tracking-wide leading-6 text-gray-400 lg:w-2/4"
|
||||
>
|
||||
Our customers love us. Here's why you will too:
|
||||
See what excites them about building and managing bootcamps with ClassroomIO.
|
||||
</p>
|
||||
<a
|
||||
class="md:text-md w-11/12 rounded-md bg-blue-700 px-6 py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl hover:scale-95 md:w-fit lg:px-6 lg:py-5 lg:font-semibold"
|
||||
href="/signup"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
Get Started for Free
|
||||
Sign Up for Free
|
||||
</a>
|
||||
|
||||
<div class="relative my-5 md:my-10 w-[85%] lg:w-[70%]">
|
||||
|
||||
@@ -21,7 +21,7 @@ In this guide I will be showing you how to set up a local student dashboard that
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://youtu.be/QGTnK39xexs"
|
||||
src="https://www.youtube.com/embed/QGTnK39xexs?si=ogFbyl2KK0XaFob4"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
|
||||
Reference in New Issue
Block a user