feat: setup drizzle (#594)
* chore: migration to SvelteKit 2 * stage 1: migrate to svelte 5 and fix rerendering issues * stage 2: fix more $: reactivity across dashboard * fix merge conflicts * chore: migrate code in main to svelte 5 * chore: update preventDefault * chore: simplify tsconfig and remove unused mobileMenuRef in MobileMenu.svelte * chore: enforce .ts across dashboard * rename from classroomio-com to website * stage-3: Replace carbon icon svelte with lucide icon * update lock file * chore: finish icon replacement * fix: settings and setup page multiple rerender * stage 3: More icon and rerendering fixes * feat: setup drizzle and better auth * fix: onboarding validation error showing translation key #586 (#593) * fix: onboarding validation error showing translation key #586 * fix: remove debug log for profile update errors * chore: add a clean command * fix: remove message from email verification response
This commit is contained in:
Rotimi Best
@@ -0,0 +1,129 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.floating {
|
||||
-webkit-animation: floating 2.5s linear infinite;
|
||||
animation: floating 2.5s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes floating {
|
||||
0%,
|
||||
100% {
|
||||
-webkit-transform: translateY(0rem);
|
||||
transform: translateY(0rem);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translateY(1rem);
|
||||
transform: translateY(1rem);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floating {
|
||||
0%,
|
||||
100% {
|
||||
-webkit-transform: translateY(0rem);
|
||||
transform: translateY(0rem);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translateY(1rem);
|
||||
transform: translateY(1rem);
|
||||
}
|
||||
}
|
||||
.prose {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.prose :is(h1, h2, h3, h4, h5, h6) {
|
||||
font-weight: 700;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.prose :is(h1) {
|
||||
font-size: 2em;
|
||||
}
|
||||
.prose :is(h2) {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.prose :is(h3) {
|
||||
font-size: 1.17em;
|
||||
}
|
||||
.prose :is(h4) {
|
||||
font-size: 1em;
|
||||
}
|
||||
.prose :is(h5) {
|
||||
font-size: 0.83em;
|
||||
}
|
||||
.prose :is(h6) {
|
||||
font-size: 0.67em;
|
||||
}
|
||||
|
||||
.prose :is(p, li) {
|
||||
margin-top: 0.7em;
|
||||
margin-bottom: 0em;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.prose :is(ul, ol) {
|
||||
list-style-type: disc;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
.prose pre {
|
||||
max-inline-size: 100%;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
tab-size: 2;
|
||||
}
|
||||
.prose blockquote {
|
||||
border-left: 4px solid gray;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
padding-left: 16px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.prose figure + em {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
margin-bottom: 40px;
|
||||
border: none;
|
||||
padding: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
background-image: url('https://assets.cdn.clsrio.com/www/hero-bg.svg');
|
||||
}
|
||||
|
||||
.tools-hero-bg {
|
||||
background-image: url('https://assets.cdn.clsrio.com/www/tools-hero-bg.svg');
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.tools-hero-bg {
|
||||
min-height: 350px;
|
||||
}
|
||||
}
|
||||
.cio-bg-blue {
|
||||
background: rgb(2, 51, 189);
|
||||
background-size: cover;
|
||||
background: radial-gradient(circle at 50% 100%, rgba(2, 51, 189, 1) 1%, rgb(4, 2, 56) 100%);
|
||||
}
|
||||
|
||||
.embed {
|
||||
width: 100%;
|
||||
height: 315px;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.embed {
|
||||
width: 560px;
|
||||
}
|
||||
}
|
||||
Vendored
+12
@@ -0,0 +1,12 @@
|
||||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
@@ -0,0 +1,108 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="scroll-smooth">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#333333" />
|
||||
|
||||
<!-- <title>ClassroomIO – The Open Source Learning Management System for Companies</title>
|
||||
<meta name="description" content="ClassroomIO" />
|
||||
<meta name="application-name" content="ClassroomIO" />
|
||||
<meta name="apple-mobile-web-app-title" content="ClassroomIO" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" /> -->
|
||||
|
||||
<!-- Facebook Meta Tags -->
|
||||
<!-- <meta property="og:url" content="https://www.classroomio.com/" />
|
||||
<meta property="og:image" itemprop="image" content="https://brand.cdn.clsrio.com/og/classroomio-og.png" />
|
||||
<meta property="og:title" content="ClassroomIO – The Open Source Learning Management System for Companies" />
|
||||
<meta property="og:description"
|
||||
content="A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations" />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="1920" />
|
||||
<meta property="og:image:height" content="1080" />
|
||||
<meta property="og:image:secure_url" itemprop="image" content="https://brand.cdn.clsrio.com/og/classroomio-og.png" />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:domain" content="classroomio.com" />
|
||||
<meta property="twitter:url" content="https://www.classroomio.com/" />
|
||||
<meta name="twitter:title" content="ClassroomIO – The Open Source Learning Management System for Companies" />
|
||||
<meta name="twitter:description"
|
||||
content="Launch your bootcamp quichttps://brand.cdn.clsrio.com/og/classroomio-og.pngnline teaching platform." />
|
||||
<meta name="twitter:image" content="https://classroomio.com/classroomio-opengraph-image.png" /> -->
|
||||
|
||||
<!-- <link rel="stylesheet" href="global.css"> -->
|
||||
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
|
||||
<link rel="icon" type="image/png" href="/favicon.ico" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png" />
|
||||
|
||||
|
||||
<!-- <link rel="stylesheet" href="global.css"> -->
|
||||
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
|
||||
<link rel="icon" type="image/png" href="/favicon.ico" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png" />
|
||||
|
||||
<script defer src="https://umami.hz.oncws.com/script.js"
|
||||
data-website-id="5321d227-751a-4d43-8556-f516fba60891"></script>
|
||||
|
||||
<script defer type="text/javascript">
|
||||
window.$crisp = [];
|
||||
window.CRISP_WEBSITE_ID = '69176b47-5f63-42cc-bb9b-68d4927b6276';
|
||||
(function () {
|
||||
d = document;
|
||||
s = d.createElement('script');
|
||||
s.src = 'https://client.crisp.chat/l.js';
|
||||
s.async = 1;
|
||||
d.getElementsByTagName('head')[0].appendChild(s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script defer type="text/javascript">
|
||||
(function (C, A, L) {
|
||||
let p = function (a, ar) {
|
||||
a.q.push(ar);
|
||||
};
|
||||
let d = C.document;
|
||||
C.Cal =
|
||||
C.Cal ||
|
||||
function () {
|
||||
let cal = C.Cal;
|
||||
let ar = arguments;
|
||||
if (!cal.loaded) {
|
||||
cal.ns = {};
|
||||
cal.q = cal.q || [];
|
||||
d.head.appendChild(d.createElement('script')).src = A;
|
||||
cal.loaded = true;
|
||||
}
|
||||
if (ar[0] === L) {
|
||||
const api = function () {
|
||||
p(api, arguments);
|
||||
};
|
||||
const namespace = ar[1];
|
||||
api.q = api.q || [];
|
||||
typeof namespace === 'string' ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar);
|
||||
return;
|
||||
}
|
||||
p(cal, ar);
|
||||
};
|
||||
})(window, 'https://app.cal.com/embed/embed.js', 'init');
|
||||
Cal('init', { origin: 'https://cal.com' });
|
||||
|
||||
Cal('ui', {
|
||||
theme: 'light',
|
||||
styles: { branding: { brandColor: '#1D4EE2' } },
|
||||
hideEventTypeDetails: false,
|
||||
layout: 'month_view'
|
||||
});
|
||||
</script>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: 'LMS: Brand Customisations'
|
||||
description: 'You can now customise your student dashboard to look like your brand and determine what features you want to enable or disable.'
|
||||
imageUrl: 'https://assets.cdn.clsrio.com/blog/brand-customisations.png'
|
||||
date: '2024-10-07'
|
||||
author: Rotimi Best
|
||||
avatar: /blog/best.jpg
|
||||
role: Founder
|
||||
tags: ['Launch Week', 'LMS']
|
||||
published: true
|
||||
---
|
||||
|
||||
|
||||
_ClassroomIO Brand Customisations_
|
||||
|
||||
We are excited to announce more customisations coming into our learning management system (LMS). In this blog post, we will like to share with you how we've made *YOUR* *STUDENT DASHBOARD* much more customisable than before.
|
||||
|
||||
## Demo
|
||||
|
||||
<iframe class="embed mb-5" src="https://www.youtube.com/embed/y46mvF_1IWk?si=W39qbrW3KJ3DGO3Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
|
||||
## Your Student Dashboard
|
||||
|
||||
Firstly let me quickly break down what we mean when we say _YOUR STUDENT DASHBOARD._ As an organisation or educator when you sign up on [classroomio.com](https://classroomio.com), you'd have to first create your organisation and then create your first course. This whole process is done within the admin dashboard - [app.classroomio.com](https://app.classroomio.com).
|
||||
|
||||
|
||||
_The admin dashboard - app.classroomio.com_
|
||||
|
||||
Within your dashboard you can do the following:
|
||||
|
||||
- Create multiple courses
|
||||
- Create and Grade exercises
|
||||
- Generate certificates
|
||||
- Customise a course landing page
|
||||
- Answer students questions in a forum
|
||||
- Manage your students and much more
|
||||
|
||||
However that is not the UI that your audience will see when they consume your course. When a student signs up for your course, they get redirected to this UI
|
||||
|
||||
|
||||
_The LMS aka Student dashboard - yourorg.classroomio.com_
|
||||
|
||||
Typically this page can be found at *yourorg.classroomio.com*, where *yourorg* is a slug you set when you first set up your account. For example, we've built an internal bootcamp called ClassroomIO Developers, in this bootcamp we train other developers on some of the key tools we use internally. You can checkout our page here: [ciodevs.classroomio.com](https://ciodevs.classroomio.com), in this case you can see that our slug is *ciodevs* and you should be able to easily see yours when you log into the dashboard `/org/{yourorg}`.
|
||||
|
||||
In your student dashboard, your audience can:
|
||||
|
||||
- Consume enrolled courses
|
||||
- Submit exercises
|
||||
- Track the progress of their submitted exercises
|
||||
- Engage with other students in a forum
|
||||
- Explore other courses you've created.
|
||||
|
||||
## Now to Brand Customisation
|
||||
|
||||
With the above foundation I already laid out, I will like to share some of the new things you can do within Your Student dashboard to make it feel more like your brand
|
||||
|
||||
### Feature 1: Enable/Disable Features
|
||||
|
||||
|
||||
_Customise LMS settings in admin dashboard_
|
||||
|
||||
You can now go into your [settings page](https://app.classroomio.com/org/*/settings/customize-lms) and now disable the features within the student dashboard you don't need. For example, if you run a certificate program and you don't want students talking to other students rather you only need the students to take the course and then take tests - thanks to this feature you can now achieve that.
|
||||
|
||||
Any setting you disable within your dashboard will be reflected in your student dashboard on refresh.
|
||||
|
||||
### Feature 2 - Brand Colour Customisation
|
||||
|
||||
|
||||
_Select your brand color_
|
||||
|
||||
This has been one of the most requested customisation so far. Users loved that we allowed them set the brand color that reflected across the student dashboard, however that was limiting. Most companies had specific brand primary color which we didn't have in the list, so we added - A COLOUR PICKER 😍.
|
||||
|
||||
Now within the dashboard, you can enter the hex code of your brand/company and instantly across the app the colour will be applied. You can watch the video at the top of the blog post to see this feature in action
|
||||
|
||||
## Conclusion
|
||||
|
||||
Thank you very much for reading till the end, I know this was a lot 😅. Please give this update a try and let us know what you think about it on [X](https://x.com/classroomio).
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
title: 'Sharing ClassroomIO with Educators at the University of Lagos'
|
||||
description: 'EduAI Hub invited us to talk about ClassroomIO to Edtech AI reserchers and educators at the University of Lagos, Nigeria'
|
||||
imageUrl: 'https://assets.cdn.clsrio.com/blog/classroomio-at-unilag-eduai-research.png'
|
||||
date: '2024-09-25'
|
||||
author: Rotimi Best
|
||||
avatar: /blog/best.jpg
|
||||
role: Founder
|
||||
tags: ['Educators', 'University', 'AI']
|
||||
published: true
|
||||
---
|
||||
|
||||
|
||||
_Rotimi Best at the 2 day EduAI Hub Summit held at the University of Lagos_
|
||||
|
||||
I was invited by [EduAI Hub](https://eduaihub.org/) to their 2 day summit at the University of Lagos to talk about the progress we've made as a company and how we are using AI in education.
|
||||
|
||||
A bit about EduAI Hub before I jump into my experience at the summit:
|
||||
|
||||
> The EduAI hub is an African based research network on responsible artificial intelligence innovations that seek to advance education across Africa.
|
||||
>
|
||||
> The EduAI hub is located within the University of Lagos main campus. The Hub network presently comprises the University of Lagos, Université d’Abomey Calavi, in Benin Republic, and Data Science Nigeria (DSN).
|
||||
>
|
||||
> Learn more [here](https://eduaihub.org/).
|
||||
|
||||
### My experience
|
||||
|
||||
Now to my experience - __it was nothing less than amazing__.
|
||||
|
||||
I could see how the eyes of some of the educators lite up when I said we can allow them build a customisable alternative to Google Classroom without writing a single line of code. I spoke about the importance of a customisable no-code elearning platform that anyone could use to deploy their own learning management system that suits their brand. I also gave an analogy using Shopify and Wordpress, how Shopify is allowing businesses create ecommerce stores in minutes or Wordpress allowing writters and businesses create robust websites in minutes - that's exactly what we want to do in the educational space starting with bootcamps.
|
||||
|
||||
You can find my slides [here](https://docs.google.com/presentation/d/1yU9EFmYA5OJ9PmM4vQp39100vryRBdz3fCAVLktrUEI/edit?usp=sharing)
|
||||
|
||||
This was my first actual event speaking about ClassroomIO and I was amazed by the amount of people that wanted to chat about how they could use the product for their online courses.
|
||||
|
||||
Apart from the talk, I met amazing people working on other edtech related products and how they also use AI to empower their users.
|
||||
|
||||
### Unexpected learning
|
||||
|
||||
One interesting thing I discovered was that people found it much easier to remember our product's name because it included a familiar word—**Classroom**. All they had to do was add **IO** at the end! 😃😃 Compared to other projects that were demoed, our name actually stuck with the teachers. This was something I had initially overlooked, but now I realize how important a name can be in connecting with your audience.
|
||||
|
||||
Thanks to this summit and actually talking to real users, I know exactly some of the things we are missing and we will get them in ASAP.
|
||||
|
||||
### Some pictures 😉
|
||||
|
||||
<div class="gallery mt-2 max-w-full overflow-x-scroll">
|
||||
<div class="flex space-x-4 gap-2">
|
||||
<img src="https://assets.cdn.clsrio.com/blog/eduaihub-summit/speaking.JPG" alt="Speaking at EduAI Summit">
|
||||
<img src="https://assets.cdn.clsrio.com/blog/eduaihub-summit/speaking-2.JPG" alt="Speaking at EduAI Summit">
|
||||
<img src="https://assets.cdn.clsrio.com/blog/eduaihub-summit/market-size.JPG" alt="ClassroomIO market size at EduAI Summit">
|
||||
<img src="https://assets.cdn.clsrio.com/blog/eduaihub-summit/chatting.JPG" alt="Chatting at EduAI Summit">
|
||||
<img src="https://assets.cdn.clsrio.com/blog/eduaihub-summit/gmind-ai.jpg" alt="Gmind AI at EduAI Summit">
|
||||
<img src="https://assets.cdn.clsrio.com/blog/eduaihub-summit/chioma-cio.jpg" alt="Chioma, CIO at EduAI Summit">
|
||||
<img src="https://assets.cdn.clsrio.com/blog/eduaihub-summit/teacher-pic.jpg" alt="With a teacher at EduAI Summit">
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: 'Introducing Custom Domains'
|
||||
description: 'We are excited to announce that we have added support for custom domains into our admin dashboard.'
|
||||
imageUrl: 'https://assets.cdn.clsrio.com/blog/custom-domain.png'
|
||||
date: '2024-10-11'
|
||||
author: Rotimi Best
|
||||
avatar: /blog/best.jpg
|
||||
role: Founder
|
||||
tags: ['Launch Week', 'Custom Domains', 'Company Update']
|
||||
published: true
|
||||
---
|
||||
|
||||
|
||||
_ClassroomIO Custom Domains Banner_
|
||||
|
||||
Today I am happy to announce that we've added support for custom domains into our admin dashboard. Companies and Training organisations can now take advantage of this feature to strengthen their brand using our learning management system.
|
||||
|
||||
## Benefits of setting up a custom domain
|
||||
|
||||
1. Brand consistency. This means that your student platform won't be hosted on our free subdomain that we provide to you, instead they will be on your own brand domain like courses.yourdomain.com or training.yourdomain.com
|
||||
|
||||
2. Increased credibility: Using your custom domain lends more professionalism and legitimacy to your organisation. It shows that you have invested in your online presence, which can build trust with customers.
|
||||
|
||||
3. Improved user experience: Users can easily remember and access your service using your branded URL. It creates a seamless experience between your website and the SaaS application.
|
||||
|
||||
4. Better SEO: Custom domains can contribute to improved search engine optimization (SEO) for your brand. All traffic and links associated with the SaaS application will be attributed to your domain.
|
||||
|
||||
## Who has access to custom domains?
|
||||
|
||||
Custom domains are only available within our [Early Adopters plan](https://classroomio.com/pricing). This is our only paid plan for now except our enterprise plans. If you need a demo of the product or contemplating on whether this plan is right for you, please [schedule a demo with us](https://classroomio.com/demo).
|
||||
|
||||
## Demo
|
||||
|
||||
<iframe class="embed my-5" src="https://www.youtube.com/embed/Taohblykd8g?si=SfNf2wQ1N4I9mOfP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
title: 'Introducing Free Tools'
|
||||
description: 'We are excited to announce that we have built 5 free tools for educators and students to use.'
|
||||
imageUrl: 'https://assets.cdn.clsrio.com/blog/free-tools.png'
|
||||
date: '2024-10-10'
|
||||
author: Rotimi Best
|
||||
avatar: /blog/best.jpg
|
||||
role: Founder
|
||||
tags: ['Launch Week', 'Free tools']
|
||||
published: true
|
||||
---
|
||||
|
||||
|
||||
_ClassroomIO Free Tools_
|
||||
|
||||
For a while now, we've been looking to build tools that will help educators and students be more productive. The only rule of thumb for every tool is that it must be FREE to use. I spent time conducting research, examining existing options, and talking to students. As a result, I came up with several tools that can help educators and students enhance their productivity.
|
||||
|
||||
We didn't build just 1 or 3, but 5 [FREE tools](/tools) available for anyone to try out. We've released them for a while now and have been receiving feedback. We will continue to improve them and enhance the user experience.
|
||||
|
||||
Here are the 5 tools we've built:
|
||||
|
||||
### 1. Progress Report
|
||||
|
||||
This tool allows students to share their learning progress with their peers. It is not only useful for students but for anyone learning anything at all. You can share your progress, add an avatar of your choice, and download an image that you can share on social media.
|
||||
|
||||
<video controls class="embed my-5">
|
||||
<source src="https://assets.cdn.clsrio.com/blog/tools-demo/progress-report.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
### 2. Pomodoro Timer
|
||||
|
||||
Pomodoro is, at this point, a pretty well-known tool. One of the things students find particularly useful is anything that helps them focus on getting things done, which the Pomodoro technique excels at. You simply add your to-do list, start the timer, and get to work. You can mark each to-do as done once you've completed the task. We also persist the data in your browser so that even after reloading the page, you don't lose your to-do list.
|
||||
|
||||
<video controls class="embed my-5">
|
||||
<source src="https://assets.cdn.clsrio.com/blog/tools-demo/pomodoro-tool.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
### 3. Random Name Picker
|
||||
|
||||
In a classroom setting, an educator might want to call on a student to solve a particular task or answer a question. Rather than manually deciding which student to pick, why not use a tool to help randomly select students to participate in your lesson? This approach can help avoid bias in selecting specific types of students and ensure fair participation across the class.
|
||||
|
||||
<video controls class="embed my-5">
|
||||
<source src="https://assets.cdn.clsrio.com/blog/tools-demo/random-name-picker.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
### 4. Activity Stopwatch
|
||||
|
||||
Live classes often include timed group activities where students are assigned tasks. With our stopwatch, you can now easily track these activities from one central location. Simply name your activity and set the desired duration. Once the time is up, you'll hear the stopwatch ringing, signaling the end of the activity.
|
||||
|
||||
<video controls class="embed my-5">
|
||||
<source src="https://assets.cdn.clsrio.com/blog/tools-demo/activity-stopwatch.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
### 5. Tic Tac Toe Game
|
||||
|
||||
This is my favorite because you can play with someone else. With our simple online Tic-Tac-Toe, you can either choose to play against the computer or physically play with someone else. If you're on a quick break or you want to have a little fun, you should come and try out this tool.
|
||||
|
||||
<video controls class="embed my-5">
|
||||
<source src="https://assets.cdn.clsrio.com/blog/tools-demo/tictactoe.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
## What's Next?
|
||||
|
||||
Please try them out and give us feedback. We'd love to hear from you. If you experience any issues, please create a ticket on our [GitHub repository](https://github.com/classroomio/classroomio/issues).
|
||||
|
||||
Don't forget to give us a star on [GitHub](https://github.com/classroomio/classroomio).
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: 'Google Open Source Peer Bonus'
|
||||
description: 'I am happy to announce that we were selected for the 2024 Google Peer Open Source Bonus'
|
||||
imageUrl: 'https://assets.cdn.clsrio.com/blog/google-os-peer-bonus-classroomio.png'
|
||||
date: '2024-05-25'
|
||||
author: Rotimi Best
|
||||
avatar: /blog/best.jpg
|
||||
role: Founder
|
||||
tags: ['Sponsorship', 'Google']
|
||||
published: true
|
||||
---
|
||||
|
||||
|
||||
_Our announcement flyer of the Google Open Source Peer Bonus_
|
||||
|
||||
I started my open source journey in October of 2023 by working on [Formbricks](https://formbricks.com). It was the first time I got to really work on a project that was used by hundreds of people and at the same time the [code was public](https://github.com/formbricks/formbricks/commits?author=rotimi-best) for everyone to see.
|
||||
|
||||
Later in November, a project I have been working on for over 3 years got accepted into an open source program by the amazing Codacy called [Codacy Pioneers](https://codacy.com/pioneers). Where they provide open source contributors with financial support, training from mentors and access to their suite of tools.
|
||||
|
||||
After I made [ClassroomIO](https://git.new/class) open source, a lot of people helped us get traction from the community and soon enough we got noticed by several educators in the community.
|
||||
|
||||
## What is the Google Open Source Peer Bonus?
|
||||
|
||||
I will quote the official [documentation](https://opensource.google/documentation/reference/growing/peer-bonus) by Google:
|
||||
|
||||
> In the same way that a Google Peer Bonus is used to recognize a fellow Googler who has gone above and beyond, an Open Source Peer Bonus recognizes external people who have made exceptional contributions to open source. Googlers can nominate contributors who they feel deserve our recognition (and some cash)!
|
||||
|
||||
I want to use this opportunity to thank [Ada Nduka Oyom](https://x.com/Kolokodess) for reaching out to me and recommending [ClassroomIO](https://git.new/class) internally at Google to receive the Google Open Source Peer Bonus.
|
||||
|
||||
I received the award letter this week and the official blog post will be made on their website in the coming weeks.
|
||||
|
||||
|
||||
_OS Peer Bonus H1 2024 - Best Ibitoye-Rotimi - OSPB Award Letter_
|
||||
|
||||
As regards the financial bonus, I have no idea how much Google is giving out to each person that was selected however we've been told to setup a Pionner account and in few days the payout will be made. Once I receive it, I will share exactly how much we received 😉.
|
||||
|
||||
**Update:**
|
||||
I received confirmation of acceptance on May 23rd, 2024. The payout with the sum of $250 was sent to my Payoneer account on June 10th 2024, taking about two weeks to process.
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: 'Welcome to Launch Week <i>001</i>'
|
||||
description: 'We are excited to announce our first launch week for ClassroomIO.com. We will be sharing a new feature every day for 5 days.'
|
||||
imageUrl: 'https://assets.cdn.clsrio.com/blog/launch-week-001.png'
|
||||
date: '2024-10-07'
|
||||
author: Rotimi Best
|
||||
avatar: /blog/best.jpg
|
||||
role: Founder
|
||||
tags: ['Launch Week', 'Company Update']
|
||||
published: true
|
||||
---
|
||||
|
||||
|
||||
_ClassroomIO Launch Week 001_
|
||||
|
||||
Welcome to our first launch week for ClassroomIO.com.
|
||||
|
||||
I have personally enjoyed watching the likes of Supabase, Resend, Documenso and many other amazing products do launch weeks and I decided why not give it a try.
|
||||
|
||||
In this launch week, we want to share 5+ cool features with you, showing off some of the things we've built to make it easier for anyone to build a brand friendly alternative to Teachable/Thinkific/Edx/Google Classroom and the likes.
|
||||
|
||||
### What's the problem with these platforms?
|
||||
|
||||
The summary is that they are not brand friendly and for the simplest of things the tool starts to get pretty complex. To get a brand friendly learning managements system (LMS) right now means 2 things:
|
||||
|
||||
1. You build it yourself
|
||||
2. You white label an existing one
|
||||
|
||||
This first is time consuming while the second can cost thousands of dollars. We have solved both problems by building a very simple yet robust LMS that is fully open source and you can customise to whatever you want. Even with our cloud version, we are striving to make the product look and feel the way you want it to.
|
||||
|
||||
In this launch week, we will show you some of the steps we've taken to allow companies and startups deploy their custom training platform that is brand friendly and super easy to get started witih.
|
||||
|
||||
Below are all the features for each day that we will be sharing. As the day goes by, this list will be updated:
|
||||
|
||||
1. Day 1 - [Brand Customisations](/blog/brand-customisations)
|
||||
2. Day 2 - [Multi-Language Support](/blog/multi-language)
|
||||
3. Day 3 - [Self-host ClassroomIO on your Servers](/blog/self-host)
|
||||
4. Day 4 - [Free Tools](/blog/free-tools)
|
||||
5. Day 5 - [Custom Domains](/blog/custom-domain)
|
||||
6. Extras - 😍😍😍😍
|
||||
|
||||
### Let the launch week begin 🚀
|
||||
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title: 'Learn from the Best and Bypass the Gatekeepers'
|
||||
description: 'In today’s digital age, many industries have embraced online solutions, yet education in Africa remains largely tied to physical locations, limiting access to quality learning. Every student should have access to the best teachers in Africa.'
|
||||
imageUrl: 'https://assets.cdn.clsrio.com/blog/learn-from-the-best.png'
|
||||
date: '2024-11-13'
|
||||
author: Rotimi Best
|
||||
avatar: /blog/best.jpg
|
||||
role: Founder
|
||||
tags: ['Marketplace', 'Future of Education']
|
||||
published: true
|
||||
---
|
||||
|
||||
|
||||
_Learn from the best and bypass the gatekeepers_
|
||||
|
||||
### Introduction
|
||||
|
||||
There’s a major shift happening right now in Nigeria — everything is moving online and becoming digital, disrupting traditional systems across industries. Look around:
|
||||
|
||||
1. Movies (Nollywood on YouTube)
|
||||
2. E-commerce (Jumia, Konga)
|
||||
3. Food delivery (Chowdeck)
|
||||
4. Advertisements (Online influencers)
|
||||
5. Payments (Moniepoint, Opay)
|
||||
6. Transportation (Uber, Bolt)
|
||||
|
||||
These platforms have broken records because they solve painful, real-world problems. Online solutions have removed the barrier of a physical location. All these examples — e-commerce, food delivery, transportation — were traditionally tied to specific places.
|
||||
|
||||
Take food delivery, previously if you wanted fast food, you’d go to a restaurant, eat in, or take out. Now with Chowdeck, you can order multiple meals from any restaurant of your choice, and they’re delivered to your doorstep in minutes.
|
||||
|
||||
Or consider transportation. Traditionally, you’d need to go to a bus stop or car park, and you’d have to know the area to navigate. With Uber and Bolt, you don’t even need to know the neighborhood. You choose your destination, book a driver, and they come right to your doorstep. I experienced this firsthand last week in Kenya—my first time in Nairobi. Using my Uber app, I navigated the city as if I were a local. It was amazing.
|
||||
|
||||
### The Problem
|
||||
|
||||
So why haven’t we seen the same radical transformation in education, especially with the rise of mobile devices and the internet? Why is learning in Africa still tied to a physical location? Why are students limited to the teachers within their reach? Why can’t a student in Ibadan learn from a teacher in Abuja, or a student in Lagos learn from the best teacher in Kano? Why is attending classes still a requirement for passing a course?
|
||||
|
||||
In my opinion, our institutions are the gatekeepers. In Africa, many educational institutions remain comfortable, not thinking on a global scale. For example, Edx, an online e-learning platform with over 40 million users, was founded in May 2012 by MIT and Harvard. These two universities created a platform where their top lecturers essentially teach the world. This means that I, from Nigeria, can learn from professors in the U.S.
|
||||
|
||||
_But why isn’t it the other way around?_ I feel a deep frustration about this because we have so many outstanding lecturers and educators in Nigeria — yet, no one even knows about them. Quality education isn’t evenly distributed across our country. The best educator should be able to reach that 15-year-old girl sitting in her room with a lantern, a Tecno Camon, a power bank, and a 5GB MTN internet subscription as she prepares for WAEC, tries to get ahead in high school, or brushes up on a university course.
|
||||
|
||||
This shift would also open up new revenue streams for lecturers. Income wouldn’t be tied to one physical institution. Students from across the country, and even the continent, would be willing to pay for access to excellent teachers.
|
||||
|
||||
### The Solution
|
||||
|
||||
At ClassroomIO, these are the ideas driving us. We’re committed to building tools that break down these barriers and democratize access to quality education for every student and teacher across Nigeria. So far we’ve built an advanced course builder that allows any educator to create their own school, create courses and invite students. In each course you can upload videos, slides, notes, give assignments, grade and even assign certificates after successfully completing this course. All these have been built and can be used by any educator today. We are working on another platform that allows students to find the best educator for any given topic, this will be the game changer.
|
||||
|
||||
### Conclusion
|
||||
|
||||
This new age of technology is here, and we must embrace it with enthusiasm. Together, let’s break the educational barriers and create a future where every student in Africa can learn from the best, no matter where they are. Let’s work together to make this vision a reality.
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: 'Introducing Multi-language Support'
|
||||
description: 'We now support 8 languages in both our admin dashboard and student dashboard.'
|
||||
imageUrl: 'https://assets.cdn.clsrio.com/blog/multi-language-support.png'
|
||||
date: '2024-10-08'
|
||||
author: Rotimi Best
|
||||
avatar: /blog/best.jpg
|
||||
role: Founder
|
||||
tags: ['Launch Week', 'LMS', 'Internationalisation']
|
||||
published: true
|
||||
---
|
||||
|
||||
|
||||
_ClassroomIO now supports 8 languages_
|
||||
|
||||
We are happy to share that within the ClassroomIO dashboard and your dedicated student dashboard we now support 8 languages including English. These 8 languages include:
|
||||
|
||||
1. English
|
||||
2. French
|
||||
3. German
|
||||
4. Portugese
|
||||
5. Spanish
|
||||
6. Russian
|
||||
7. Hindi
|
||||
8. Vietnamese
|
||||
|
||||
The best thing about this feature is that you can have students from different countries use your LMS in any of the above languages without any extra effort on your end. This means that educators can create a localised experience for each student consuming their content from different countries around the world.
|
||||
|
||||
To change your language within the dashboard, you can go to the settings page by clicking your profile picture at the bottom left and select your preferred language in the drop down in the Profiles tab.
|
||||
|
||||
|
||||
_Language selector in ClassroomIO Dashboard._
|
||||
|
||||
## We went a step further 😁
|
||||
|
||||
Now that our whole application is in 8 languages, that means you should be able to also add content for your courses in those languages right? YES YES YES. For customers creating international courses that can be consumed by people from different countries, this is a very crucial feature.
|
||||
|
||||
Well how does it work? You can go into the course builder, open a lesson you want to add content into and start typing. By default the content will be stored in English language. If you want to add content for another language, just change the language at the top right and start typing. ITS THAT SIMPLE
|
||||
|
||||
Oh we even hooked up our AI content generator with it as well, you can switch to any language and the AI will generate content for the specific lesson, in your selected language.
|
||||
|
||||
### Quick demo
|
||||
|
||||
<video class="embed mb-5" controls poster="https://assets.cdn.clsrio.com/blog/multi-language-support.png">
|
||||
<source src="https://assets.cdn.clsrio.com/blog/language-editor-demo.mov" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
## Next steps
|
||||
|
||||
All translations in our app are stored in a JSON file which we generate and keep up to date using Google translate. This means that it might not be 100% accurate and there could be some mistakes when use our dashboard in other languages. If you do find any issues with our translations, please do open an [issue on Github](https://github.com/classroomio/classroomio/issues/new/choose) with the correct translation and we'd be so happy to fix it.
|
||||
|
||||
If you are a native speaker of any of the 7 languages and want to contribute, please feel free to nitpick into our [translations](https://github.com/classroomio/classroomio/tree/main/apps/dashboard/src/lib/utils/translations) and open a PR with the fixes. Every contribution is valuable and will be gladly welcomed 😊
|
||||
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: 'Our first customer to hit 100 students'
|
||||
description: 'Paranv Singhal, a Web3 instructor, is the first customer to hit 100 students on ClassroomIO.'
|
||||
imageUrl: 'https://assets.cdn.clsrio.com/blog/pranav-web3-bootcamp-hit-100students.png'
|
||||
date: '2024-08-25'
|
||||
author: Rotimi Best
|
||||
avatar: /blog/best.jpg
|
||||
role: Founder
|
||||
tags: ['Customers', 'Testimonials']
|
||||
published: true
|
||||
---
|
||||
|
||||
|
||||
_Paranv Singhal, a ClassroomIO customer hits 100 students in his Web3 bootcamp._
|
||||
|
||||
Today is an exciting day for both Pranav and me.
|
||||
|
||||
A few months ago, Pranav reached out to share his idea for a Web3 course he's been working on. He wanted to share it with as many Web3 enthusiasts as possible.
|
||||
|
||||
He started building the course site using Framer, but he told me it was becoming quite expensive. He had to create a template, install plugins, and each of these had its own monthly cost.
|
||||
|
||||
He then asked me how much it would cost to launch his course on ClassroomIO.I replied that we only have one paid plan, which costs a flat fee of $35 per month or $350 per year. This plan includes many features, such as 10,000 students, unlimited collaborators, Slack support, and much more.
|
||||
|
||||
It was a no-brainer for him, and long story short, Pranav is a happy customer with over 100 students.
|
||||
|
||||
Here is what he has to say:
|
||||
|
||||
|
||||
_Pranav's experience using ClassroomIO_
|
||||
|
||||
> ClassroomIO really helped me [bootstrap my program](https://dblocked.io/).
|
||||
>
|
||||
> 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.
|
||||
>
|
||||
> PS- Rotimi is also extremely supportive in new feature requests. I love how responsive he is towards all feedback
|
||||
|
||||
Are you looking to launch your course or bootcamp? Register for a free account today and start building.
|
||||
|
||||
<div class="flex justify-center">
|
||||
<a href="https://app.classroomio.com/login" target="_blank" nofollow="nofollow" class="bg-black text-white px-4 py-2 rounded-md">Register for free</a>
|
||||
</div>
|
||||
@@ -0,0 +1,30 @@
|
||||
---
|
||||
title: 'Self-host ClassroomIO on your Servers'
|
||||
description: 'On Day 3 of our launch week, we are excited to announce that you can now easily self-host ClassroomIO on your servers using our pre-built Railway template.'
|
||||
imageUrl: 'https://assets.cdn.clsrio.com/blog/self-host.png'
|
||||
date: '2024-10-09'
|
||||
author: Rotimi Best
|
||||
avatar: /blog/best.jpg
|
||||
role: Founder
|
||||
tags: ['Launch Week', 'Self-host', 'Company Update']
|
||||
published: true
|
||||
---
|
||||
|
||||
|
||||
_Selfhost ClassroomIO on your Servers_
|
||||
|
||||
Today we are happy to share that you can now easily self-host classroomio and use it for whatever purpose you want without paying us a dime. Our mission is to build the simplest yet customisable open source learning management system on the planet, and this is taking us 1 step closer to that goal.
|
||||
|
||||
If you are interested in just trying out the product, it is advisable to use the [cloud version](https://app.classroomio.com). You can use almost all the features for free on the cloud version unless you need more students. Right now the main reason you'd have to upgrade is because your students are growing. If you don't want to upgrade and/or face this, then you'd be fine self hosting the whole application.
|
||||
|
||||
For self-hosting, we have written up a [guide that uses Railway](https://classroomio.com/docs/quickstart/self-hosting) to help deploy our stack and you get to manage the servers on Railway as you wish. We hope this is a good step in helping you educate your audience at ease.
|
||||
|
||||
Below is a demo showing you step by step how to self host the project
|
||||
|
||||
<iframe class="embed my-5" src="https://www.youtube.com/embed/3TMWPgoSPZ0?si=cbpN6ZC0-sevAL-i" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
|
||||
### Next steps
|
||||
|
||||
We want to support self-hosting using a Coolify template or just using a Dockerfile. We currently have Dockerfiles for both our api and dashboard projects however contributions from the open source community would help us in properly testing and improving them.
|
||||
|
||||
If you prefer deployment with Docker, do checkout our [docker-compose.yaml](https://github.com/classroomio/classroomio/blob/main/docker-compose.yaml) file to get started and we can kick off a conversation on Github.
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
title: 'Introducing Student Analytics'
|
||||
description: 'As we end 2024, we are releasing students analytics to all organisation on ClassroomIO. You can now view analytics on your students, including their last login date, course completion status, and much more.'
|
||||
imageUrl: 'https://assets.cdn.clsrio.com/blog/students-analytics.png'
|
||||
date: '2024-12-31'
|
||||
author: Rotimi Best
|
||||
avatar: /blog/best.jpg
|
||||
role: Founder
|
||||
tags: ['Analytics', 'Company Update']
|
||||
published: true
|
||||
---
|
||||
|
||||
|
||||
_ClassroomIO Students Analytics_
|
||||
|
||||
As we end the year, we are excited to announce that we have added student analytics to our platform. This is a feature that we have been working on for a while and we are happy to finally launch it. With this new feature, you can better understand the progress of specific students in your course or your organisation.
|
||||
|
||||
## Audience Analytics
|
||||
|
||||
The audience page as you already know allows you to view the students in your **organisation**. With audience analytics, you can drill into each registered student of yours to understand the last time they logged in, all the courses they are enrolled in and the progress they have made.
|
||||
|
||||
<br />
|
||||
|
||||
<video
|
||||
loop
|
||||
muted
|
||||
autoplay
|
||||
preload="auto"
|
||||
autoPictureInPicture
|
||||
class="rounded-md" src="https://assets.cdn.clsrio.com/blog/organisation-student-analytics.mp4" controls
|
||||
>
|
||||
</video>
|
||||
|
||||
## Course Student Analytics
|
||||
|
||||
Further more, when you go into any course and go to the people tab, you can view all the students currently enrolled in that course. With this new release, you can now also drill into each enrolled student to see their course progress. You can see:
|
||||
|
||||
- The last time they logged in
|
||||
- The progress they have made in the course
|
||||
- The average grade they have received in the course
|
||||
- Their submitted assignments and the score they received
|
||||
|
||||
<br />
|
||||
|
||||
<video loop
|
||||
muted
|
||||
autoplay
|
||||
preload="auto"
|
||||
autoPictureInPicture
|
||||
class="rounded-md"
|
||||
src="https://assets.cdn.clsrio.com/blog/course-students-analytics.mp4" controls
|
||||
>
|
||||
</video>
|
||||
|
||||
## What's Next?
|
||||
|
||||
We are working on adding more analytics to the platform to help you better understand what's going on in your organisation. You will know the coutries of your students, their overall performance and more.
|
||||
|
||||
Give us feedback on what you think about this feature and what you would like to see next on [Discord](https://classroomio.com/discord).
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: 'Teach with Data and Analytics'
|
||||
description: 'Insights to how students are picking up the concepts you teach are very crucial and we think you should track that metric to enhance your students learning outcome.'
|
||||
imageUrl: 'https://classroomio.com/blog/analytics-classroom-by-dalle3-classroomio.jpeg'
|
||||
date: '2024-01-02'
|
||||
author: Rotimi Best
|
||||
avatar: /blog/best.jpg
|
||||
role: Founder
|
||||
tags: ['Analytics', 'Educators']
|
||||
published: true
|
||||
---
|
||||
|
||||
|
||||
_Analytics Driven Classroom generated by DALL.E 3_
|
||||
|
||||
In the pursuit of educational excellence, it's paramount that teachers comprehend the level of their students' understanding immediately after a lesson. The gap between teaching and assessing student understanding can often widen, leaving educators in the dark until formal testing occurs. Enter ClassroomIO, a revolutionary platform tailored for educators who are ready to bridge this gap with the power of analytics and AI.
|
||||
|
||||
With ClassroomIO, the post-lesson period becomes a goldmine of insights. By converting lesson notes into quizzes directly on our platform, teachers can assess understanding without delay. As students submit quiz responses, ClassroomIO works its magic, offering in-depth analytics that reveals the distribution of answers and pinpoints common misconceptions.
|
||||
|
||||
## Strategic Intervention for Misunderstood Concepts
|
||||
|
||||
Imagine knowing, at a glance, what percentage of your class misunderstood a critical concept from yesterday's lesson. ClassroomIO makes this possible. Such timely feedback allows for swift intervention, ensuring that no student is left behind as the curriculum advances. Teachers can readdress topics with precision, fostering a responsive learning environment.
|
||||
|
||||
## Tailored Support for Every Student
|
||||
|
||||
Beyond class-wide trends, ClassroomIO's analytics enable personalized student support. With data revealing individual struggles, teachers can recommend targeted learning materials to students requiring additional aid. This individualized approach not only supports students but also frees up valuable teacher time.
|
||||
|
||||
## The Future is Here
|
||||
|
||||
ClassroomIO isn't just about quizzes and data; it's about empowering educators to make informed decisions that elevate their teaching and enrich student learning. As we harness the power of AI to streamline the educational process, teachers can focus on what they do best — inspiring and instructing the minds of tomorrow.
|
||||
|
||||
## Join the Movement
|
||||
|
||||
We invite you to be part of the change. Whether you're a classroom teacher, school principal, or online educator, [ClassroomIO](https://classroomio.com) is your partner in crafting the future of education. Embrace the shift to a data-informed teaching approach with [ClassroomIO](https://classroomio.com) — where every lesson becomes an opportunity for growth, for you and your students.
|
||||
@@ -0,0 +1,48 @@
|
||||
<script>
|
||||
import Chip from '$lib/Chip/Chip.svelte';
|
||||
import { formatDate } from '$lib/utils/formatDate';
|
||||
|
||||
export let post;
|
||||
export let isRecommended = false;
|
||||
</script>
|
||||
|
||||
{#if !isRecommended}
|
||||
<div class="mb-5 flex md:flex-row flex-col md:items-center gap-2">
|
||||
<!-- Date -->
|
||||
<p class="text-sm text-slate-500">{formatDate(post.date)}</p>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#each post.tags as tag}
|
||||
<Chip label={tag} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<a href="/blog/{post.slug}" class="group">
|
||||
<img
|
||||
loading="lazy"
|
||||
src={post.imageUrl}
|
||||
alt={post.title}
|
||||
class="w-70 h-48 object-cover rounded-md"
|
||||
/>
|
||||
<p
|
||||
class="font-bold text-lg py-2 {isRecommended &&
|
||||
'h-[60px]'} line-clamp-2 group-hover:text-slate-500"
|
||||
>
|
||||
{@html post.title}
|
||||
</p>
|
||||
|
||||
<p class="text-slate-500 pt-2 mb-4 line-clamp-3">{post.description}</p>
|
||||
</a>
|
||||
|
||||
<div class="flex items-center justify-start gap-4 my-2">
|
||||
<img loading="lazy" src={post.avatar} alt="avatar" class="w-10 h-10 rounded-full" />
|
||||
<span>
|
||||
<p class="font-semibold">{post.author}</p>
|
||||
<p class="text-slate-500">{post.role}</p>
|
||||
</span>
|
||||
</div>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script>
|
||||
import Renew from 'carbon-icons-svelte/lib/Renew.svelte';
|
||||
export let label = '';
|
||||
export let className = '';
|
||||
export let isLoading = false;
|
||||
export let isDisabled = false;
|
||||
export let onClick = () => {};
|
||||
</script>
|
||||
|
||||
<div class="w-full flex items-center justify-center pt-5">
|
||||
<button
|
||||
class="bg-[#0233BD] text-white font-medium text-sm py-4 {className}"
|
||||
disabled={isDisabled}
|
||||
on:click={onClick}
|
||||
>
|
||||
{#if isLoading}
|
||||
<Renew size={24} class="animate-spin" />
|
||||
{:else}
|
||||
{label}
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
export let label: string;
|
||||
</script>
|
||||
|
||||
<p class="whitespace-nowrap bg-gray-200 px-2 py-1 rounded-full text-xs font-normal text-black">
|
||||
{label}
|
||||
</p>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script>
|
||||
import Button from '$lib/Button/Button.svelte';
|
||||
import TextArea from '$lib/Input/TextArea.svelte';
|
||||
import TextField from '$lib/Input/TextField.svelte';
|
||||
import { isFormValid } from '$lib/utils/isFormValid';
|
||||
import { submitForm } from '$lib/utils/submitForm';
|
||||
import Sucess from '$lib/Contact/Sucess.svelte';
|
||||
|
||||
let name = '';
|
||||
let email = '';
|
||||
let title = '';
|
||||
let description = '';
|
||||
|
||||
let isLoading = false;
|
||||
let errorMessage = '';
|
||||
let sent = false;
|
||||
|
||||
const handleClick = async () => {
|
||||
const data = { name, email, title, description };
|
||||
|
||||
if (!isFormValid(data)) {
|
||||
errorMessage = 'Please fill out all required fields.';
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading = true;
|
||||
|
||||
const formData = {
|
||||
title: `[FEEDBACK] ${title}`,
|
||||
description: `My name is ${JSON.stringify(name)}, email is ${JSON.stringify(
|
||||
email
|
||||
)}. \n\n${JSON.stringify(description)}.`,
|
||||
replyTo: email
|
||||
};
|
||||
|
||||
try {
|
||||
await submitForm(formData);
|
||||
sent = true;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if sent}
|
||||
<Sucess />
|
||||
{:else}
|
||||
<div class="w-full my-10 space-y-5">
|
||||
<div class="flex flex-col md:flex-row gap-10">
|
||||
<TextField label="Your Name" isRequired className="w-full" bind:value={name} />
|
||||
<TextField label="Your Email" isRequired className="w-full" bind:value={email} />
|
||||
</div>
|
||||
<TextField label="Subject" isRequired bind:value={title} />
|
||||
<TextArea label="Message" isRequired bind:value={description} />
|
||||
{#if !!errorMessage}
|
||||
<p class="text-left text-sm text-red-500">{errorMessage}</p>
|
||||
{/if}
|
||||
<Button
|
||||
label="Submit"
|
||||
className="px-32"
|
||||
onClick={handleClick}
|
||||
isDisabled={isLoading}
|
||||
{isLoading}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script>
|
||||
import Button from '$lib/Button/Button.svelte';
|
||||
import TextArea from '$lib/Input/TextArea.svelte';
|
||||
import TextField from '$lib/Input/TextField.svelte';
|
||||
import { isFormValid } from '$lib/utils/isFormValid';
|
||||
import { submitForm } from '$lib/utils/submitForm';
|
||||
import Sucess from './Sucess.svelte';
|
||||
|
||||
let name = '';
|
||||
let email = '';
|
||||
let title = '';
|
||||
let description = '';
|
||||
|
||||
let isLoading = false;
|
||||
let errorMessage = '';
|
||||
let sent = false;
|
||||
|
||||
async function handleClick() {
|
||||
const data = { name, email, title, description };
|
||||
|
||||
if (!isFormValid(data)) {
|
||||
errorMessage = 'Please fill out all required fields.';
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading = true;
|
||||
|
||||
const formData = {
|
||||
title: `[HELP] ${title}`,
|
||||
description: `My name is ${JSON.stringify(name)}, email is ${JSON.stringify(
|
||||
email
|
||||
)}. \n\n${JSON.stringify(description)}.`,
|
||||
replyTo: email
|
||||
};
|
||||
|
||||
try {
|
||||
await submitForm(formData);
|
||||
sent = true;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if sent}
|
||||
<Sucess />
|
||||
{:else}
|
||||
<div class="w-full my-10 space-y-5">
|
||||
<div class="flex flex-col md:flex-row gap-10">
|
||||
<TextField label="Your Name" isRequired className="w-full" bind:value={name} />
|
||||
<TextField label="Your Email" isRequired className="w-full" bind:value={email} />
|
||||
</div>
|
||||
<TextField label="Subject" isRequired bind:value={title} />
|
||||
<TextArea label="Message" isRequired bind:value={description} />
|
||||
{#if !!errorMessage}
|
||||
<p class="text-left text-sm text-red-500">{errorMessage}</p>
|
||||
{/if}
|
||||
<Button
|
||||
label="Submit"
|
||||
className="px-32"
|
||||
onClick={handleClick}
|
||||
isDisabled={isLoading}
|
||||
{isLoading}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import Button from '$lib/Button/Button.svelte';
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative overflow-hidden mt-10 flex space-y-3 flex-col text-center items-center border border-[#D9E0F5] justify-center w-full rounded-md min-h-[300px] p-4 bg-[#F5F8FE]"
|
||||
>
|
||||
<div class="absolute w-20 h-20 bg-[#0233BD] -top-14 -left-9 rotate-[50deg]" />
|
||||
<h1 class="font-bold text-3xl">Your message has been sent 🎉</h1>
|
||||
<p class="w-[70%] font-normal text-sm">
|
||||
We'll get back to you as soon as possible. In the meantime, Explore and enjoy features on our
|
||||
website
|
||||
</p>
|
||||
<Button label="Go to Home" className="px-10 md:px-20" onClick={() => goto('/')} />
|
||||
</div>
|
||||
@@ -0,0 +1,213 @@
|
||||
<script>
|
||||
import LogoYoutube from 'carbon-icons-svelte/lib/LogoYoutube.svelte';
|
||||
import LogoFacebook from 'carbon-icons-svelte/lib/LogoFacebook.svelte';
|
||||
</script>
|
||||
|
||||
<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 min-w-[200px] lg:w-3/12">
|
||||
<img
|
||||
width="32"
|
||||
height="32"
|
||||
loading="lazy"
|
||||
src="/logo-192.png"
|
||||
alt="classroomio logo"
|
||||
class="mb-5"
|
||||
/>
|
||||
<p class="lg:text-base mb-5 mr-2 text-sm leading-7 tracking-wide text-gray-600 lg:leading-7">
|
||||
The Open Source Learning Management System for Companies
|
||||
<br />
|
||||
ClassroomIO is the easiest way to grow your teaching business.
|
||||
</p>
|
||||
<!-- <a
|
||||
href="https://www.producthunt.com/posts/classroomio?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-classroomio"
|
||||
target="_blank"
|
||||
><img
|
||||
loading="lazy"
|
||||
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=425236&theme=light"
|
||||
alt="ClassroomIO - The Open Source Platform for Tech Bootcamps | Product Hunt"
|
||||
style="width: 250px; height: 54px;"
|
||||
width="250"
|
||||
height="54"
|
||||
/></a
|
||||
> -->
|
||||
<div class="mt-5 flex items-center gap-3 lg:mt-10 lg:gap-7">
|
||||
<a href="https://www.facebook.com/classroomiohq" target="_blank" aria-label="Facebook Link">
|
||||
<LogoFacebook
|
||||
class="scale-90 cursor-pointer fill-gray-400 transition-all hover:scale-110 hover:fill-gray-500 lg:scale-150"
|
||||
size={20}
|
||||
/>
|
||||
</a>
|
||||
<a href="https://twitter.com/classroomio" target="_blank" aria-label="Twitter Link">
|
||||
<img
|
||||
width="20"
|
||||
height="20"
|
||||
loading="lazy"
|
||||
src="/twitter.svg"
|
||||
alt=""
|
||||
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">
|
||||
<LogoYoutube
|
||||
class="scale-90 cursor-pointer fill-gray-400 transition-all hover:scale-110 hover:fill-gray-500 lg:scale-150"
|
||||
size={20}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
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 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>
|
||||
<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="/#coursemanagement"> Course Management </a>
|
||||
</li>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="/#customization"> Customizations </a>
|
||||
</li>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="/#collaboration"> Forum </a>
|
||||
</li>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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="/contact">Contact us</a>
|
||||
</li>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="/teach">Teach with us</a>
|
||||
</li>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a target="_blank" href="https://classroomio.com/docs/"> Help center </a>
|
||||
</li>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a target="_blank" href="https://classroomio.com/docs/quickstart/signup">
|
||||
Getting Started
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a href="/oss-friends"> OSS Friends </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">
|
||||
Company
|
||||
</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="/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:[email protected]" target="_blank"> Support </a>
|
||||
</li>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a
|
||||
href="https://app.enzuzo.com/policies/privacy/958fc978-5477-11ee-a03b-7b111830c594"
|
||||
target="_blank"
|
||||
>
|
||||
Privacy policy
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a target="_blank" href="https://classroomio.com/docs/quickstart/signup">
|
||||
Getting Started
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="lg:text-base text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<a
|
||||
href="https://app.enzuzo.com/policies/tos/958fc978-5477-11ee-a03b-7b111830c594"
|
||||
target="_blank"
|
||||
>
|
||||
Terms of use
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<footer
|
||||
class="lg:text-base border-t-[1px] py-[3%] text-center text-xs font-light leading-5 text-gray-500 lg:text-left"
|
||||
>
|
||||
<p>All rights reserved.</p>
|
||||
<p class="flex items-center">
|
||||
ClassroomIO © {new Date().getFullYear()} by
|
||||
<a href="https://twitter.com/rotimi_best" target="_blank" class="mx-1 text-blue-700 underline"
|
||||
>Rotimi Best</a
|
||||
>
|
||||
from
|
||||
<img loading="lazy" alt="Nigerian Flag" src="/ng.png" class="ml-2 h-3 w-3" />
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -0,0 +1,64 @@
|
||||
<script>
|
||||
import { flexible, leftFist, rightFist, robotArm, thumbsUp } from '$lib/emojis';
|
||||
|
||||
export let id = '';
|
||||
export let rightToLeft = false;
|
||||
export let tagline = '';
|
||||
export let title = '';
|
||||
export let description = '';
|
||||
export let video = '';
|
||||
export let taglineIcon = '';
|
||||
</script>
|
||||
|
||||
<section {id} class="w-full py-32 border-b border-x-0 border-t-0 border-gray-200">
|
||||
<div
|
||||
class="w-4/5 mx-auto flex flex-col {rightToLeft
|
||||
? 'lg:flex-row-reverse'
|
||||
: 'lg:flex-row'} items-center justify-between gap-8 lg:gap-28"
|
||||
>
|
||||
<div class="w-[80vw] flex flex-col">
|
||||
<div class="my-2 lg:my-4 ml-1 flex gap-2 items-center">
|
||||
{#if taglineIcon === 'simplified'}
|
||||
<img width="27" height="27" loading="lazy" src={thumbsUp} alt="" class="w-7" />
|
||||
{:else if taglineIcon === 'flexible'}
|
||||
<img width="27" height="27" loading="lazy" src={flexible} alt="" class="w-7" />
|
||||
{:else if taglineIcon === 'collaboration'}
|
||||
<div class="flex items-center">
|
||||
<img width="24" height="24" loading="lazy" src={leftFist} alt="" class="w-6" />
|
||||
<img width="24" height="24" loading="lazy" src={rightFist} alt="" class="w-6" />
|
||||
</div>
|
||||
{:else if taglineIcon === 'productivity'}
|
||||
<img width="27" height="27" loading="lazy" src={robotArm} alt="" class="w-7" />
|
||||
{/if}
|
||||
<p class="font-medium text-base">{tagline}</p>
|
||||
</div>
|
||||
<h2 class="font-bold text-4xl mb-3 lg:mb-6">{title}</h2>
|
||||
<p class="leading-8 text-lg text-gray-500">
|
||||
{description}
|
||||
</p>
|
||||
{#if $$slots.more}
|
||||
<br />
|
||||
|
||||
<p class="leading-8 text-lg text-gray-500">
|
||||
<slot name="more" />
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="w-[80vw] md:w-[80vw] lg:w-full">
|
||||
<video
|
||||
width="100%"
|
||||
height="100%"
|
||||
class="w-full h-auto lg:max-h-[80%] rounded-md shadow-xl"
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
defaultMuted
|
||||
playsinline
|
||||
preload="auto"
|
||||
>
|
||||
<source src={video} type="video/mp4" />
|
||||
<track kind="captions" />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,106 @@
|
||||
<script lang="ts">
|
||||
import Section from './CoreFeatureSection.svelte';
|
||||
import { PUBLIC_ENABLE_STATS } from '$env/static/public';
|
||||
</script>
|
||||
|
||||
<section class="w-full py-32 border-b border-x-0 border-t-0 border-gray-200">
|
||||
<div class="justify-center flex text-center flex-wrap gap-x-12 gap-y-16">
|
||||
<div class="w-full min-w-0" style="max-width: 1000px; flex: 1 1 550px;">
|
||||
<div class="mx-auto flex max-w-lg flex-col items-center gap-2">
|
||||
<div class="flex-none">
|
||||
<div class="">
|
||||
<img
|
||||
src="https://senjaio.b-cdn.net/public/avatar/406f29d4-5811-4f2e-90c1-e586fce3b3a7_me.JPEG?width=78&height=78&format=webp"
|
||||
alt="Pranav Singhal avatar"
|
||||
class="rounded-full"
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer"
|
||||
style="width: 52px; height: 52px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-base leading-snug text-center">
|
||||
<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 text-4xl">”</span>
|
||||
</div>
|
||||
<div class="mx-auto flex items-center gap-2 justify-center">
|
||||
<div
|
||||
class="flex max-w-[200px] flex-none flex-col overflow-hidden text-left"
|
||||
style="color: var(--clr-text);"
|
||||
>
|
||||
<div class="text-center text-sm font-medium opacity-90">
|
||||
Pranav Singhal <div class="block text-xs font-medium opacity-70 hover:opacity-50">
|
||||
Founder at <a href="https://www.dblocked.io/" target="_blank">DBlockEd</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Section
|
||||
id="coursemanagement"
|
||||
tagline="Simplified"
|
||||
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"
|
||||
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="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={false}
|
||||
/>
|
||||
|
||||
<!-- body section 5 -->
|
||||
{#if PUBLIC_ENABLE_STATS}
|
||||
<div
|
||||
class="flex justify-between flex-row flex-wrap lg:flex-nowrap items-center text-center px-[10%] py-[7%] border-b-[1px] gap-y-20 gap-x-20 mx-0 lg:mx-[12%]"
|
||||
>
|
||||
<div class="w-full">
|
||||
<h2
|
||||
class="w-full order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
|
||||
>
|
||||
1 thousand
|
||||
</h2>
|
||||
<p class="text-base leading-7 text-gray-600">Feedback collected</p>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
|
||||
5 thousand
|
||||
</h2>
|
||||
<p class="text-base leading-7 text-gray-600">Documents processed</p>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
|
||||
1 million
|
||||
</h2>
|
||||
<p class="text-base leading-7 text-gray-600">Page views recorded</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,42 @@
|
||||
<script>
|
||||
import { faqs } from './faqs';
|
||||
import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
|
||||
</script>
|
||||
|
||||
<div class="mb-[15%] mt-[5%]">
|
||||
<header class="mb-[5%] px-[8%] text-center">
|
||||
<h1 class="mt-2 text-4xl font-medium tracking-tight text-gray-900 lg:text-4xl">
|
||||
Questions & Answers
|
||||
</h1>
|
||||
<p
|
||||
class="mt-4 text-lg font-normal tracking-normal text-gray-600 lg:px-[20%] lg:text-xl lg:tracking-wide"
|
||||
>
|
||||
Can’t find the answer you’re looking for?
|
||||
<a class="font-semibold text-blue-700" href="mailto:[email protected]" target="_blank"
|
||||
>Shoot us an email</a
|
||||
> and we’ll get back to you ASAP.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="mt-[20%] grid grid-cols-1 gap-10 lg:m-0 lg:grid-cols-3 lg:gap-20 lg:px-[13%]">
|
||||
{#each faqs as faq}
|
||||
<div class="max-w-[100%] px-6 lg:p-0">
|
||||
<h1 class="text:md lg:text-base font-semibold leading-8 text-gray-800">
|
||||
{faq.question}
|
||||
</h1>
|
||||
<p
|
||||
class="text:md lg:text-base mt-2 font-light leading-7 tracking-wide text-gray-600 lg:leading-9"
|
||||
>
|
||||
{faq.answer}
|
||||
</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Your Custom Academy – Up & Running in Minutes!"
|
||||
subText="Try before you buy. No credit card required."
|
||||
btnLabel="Book a demo"
|
||||
link="classroomio/demo"
|
||||
/>
|
||||
</div>
|
||||
@@ -0,0 +1,236 @@
|
||||
<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: 'Audience', color: '#3ADFEC' },
|
||||
{ label: 'Employees', color: '#BF0696' },
|
||||
{ label: 'Customers', color: '#0233BD' },
|
||||
{ label: 'Students', color: '#9747FF' }
|
||||
];
|
||||
let animate = false;
|
||||
let titleIndex = 0;
|
||||
let timeout: NodeJS.Timeout;
|
||||
|
||||
onMount(() => {
|
||||
setTimeout(() => {
|
||||
animate = true;
|
||||
}, 70);
|
||||
|
||||
timeout = setInterval(() => {
|
||||
const nextIndex = titleIndex + 1;
|
||||
titleIndex = names[nextIndex] ? nextIndex : 0;
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
clearTimeout(timeout);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="hero-bg relative border-b-2 text-center bg-[#F5F8FE] h-full mt-[5%] w-full">
|
||||
<div class="pt-24 w-full">
|
||||
<div class="mb-10 ml-[5%] lg:ml-0 flex w-full items-center justify-start lg:justify-center">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
href="/github"
|
||||
style="color: rgb(75, 85, 99);"
|
||||
class="rounded-full border-2 border-[#C2D2FF] px-4 py-1 text-sm font-medium bg-[#DCE5FF] text-[#4B5563] hover:underline"
|
||||
>We are <span class="text-blue-700">100%</span> open source</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
transition:fly={{ y: 100, delay: 0, easing: sineInOut }}
|
||||
>
|
||||
<a
|
||||
href="/#collaboration"
|
||||
class="px-6 py-2 border-[1.5px] border-[#3ADFEC] rounded-[4px] bg-white text-[#3ADFEC] text-lg font-bold"
|
||||
>Collaboration</a
|
||||
>
|
||||
<svg
|
||||
class="absolute -right-1 -bottom-2.5"
|
||||
width="11"
|
||||
height="11"
|
||||
viewBox="0 0 11 11"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="10.9223" height="10.9223" fill="#3ADFEC" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative transition-all hover:scale-110 -rotate-12"
|
||||
transition:fly={{ x: 100, delay: 50, easing: sineInOut }}
|
||||
>
|
||||
<a
|
||||
href="/github"
|
||||
target="_blank"
|
||||
class="px-6 py-2 border-[1.5px] border-[#BF0696] rounded-[4px] bg-white text-[#BF0696] text-lg font-bold"
|
||||
>Open Source</a
|
||||
>
|
||||
<svg
|
||||
class="absolute -right-1 -bottom-2.5"
|
||||
width="11"
|
||||
height="11"
|
||||
viewBox="0 0 11 11"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="10.9223" height="10.9223" fill="#BF0696" />
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<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"
|
||||
>
|
||||
<span>Educate Your</span>
|
||||
<div class="flex-wrap flex items-center justify-center lg:gap-3 mb-2">
|
||||
<span
|
||||
class="w-full lg:w-[48%] h-[40px] md:h-[50px] lg:h-[75px] mb-0 mt-1 md:mt-0 lg:-mb-4 relative inline-block overflow-hidden lg:text-center"
|
||||
>
|
||||
{#key titleIndex}
|
||||
<span
|
||||
class="absolute left-0 right-[unset] lg:right-0 lg:left-[unset] w-full"
|
||||
style="color: {names[titleIndex].color}"
|
||||
transition:fly={{ y: 100, delay: 0, easing: sineInOut }}
|
||||
>
|
||||
<span class="w-full text-center m-auto">
|
||||
{names[titleIndex].label}
|
||||
</span>
|
||||
</span>
|
||||
{/key}
|
||||
</span>
|
||||
</div>
|
||||
<span>from one Platform</span>
|
||||
</div>
|
||||
|
||||
<p class="text-base mx-auto mt-10 px-4 text-slate-700 md:text-lg lg:mt-6 lg:w-[42%] lg:p-0">
|
||||
ClassroomIO is an open source learning management system for companies. We give you a suite
|
||||
of tools to help you achieve your training, onboarding and certification goals.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
transition:fly={{ x: -100, delay: 100, easing: sineInOut }}
|
||||
>
|
||||
<a
|
||||
href="/#customization"
|
||||
class="px-6 py-2 border-[1.5px] border-[#0233BD] rounded-[4px] bg-white text-[#0233BD] text-lg font-bold"
|
||||
>
|
||||
Customizable LMS
|
||||
</a>
|
||||
|
||||
<svg
|
||||
class="absolute -right-1 -bottom-2.5"
|
||||
width="11"
|
||||
height="11"
|
||||
viewBox="0 0 11 11"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="10.9223" height="10.9223" fill="#0233BD" />
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="relative transition-all hover:scale-110 rotate-12"
|
||||
transition:fly={{ y: 100, delay: 150, easing: sineInOut }}
|
||||
>
|
||||
<a
|
||||
href="/#ai"
|
||||
class="px-6 py-2 border-[1.5px] border-[#9747FF] rounded-[4px] bg-white text-[#9747FF] text-lg font-bold"
|
||||
>AI Support</a
|
||||
>
|
||||
|
||||
<svg
|
||||
class="absolute -right-1 -bottom-2.5"
|
||||
width="11"
|
||||
height="11"
|
||||
viewBox="0 0 11 11"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="10.9223" height="10.9223" fill="#9747FF" />
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="my-10 flex flex-col items-center justify-center gap-4 md:flex-row">
|
||||
<a
|
||||
class="md:text-base w-11/12 rounded-md border-gray-200 border-2 px-6 py-3 text-sm font-medium text-center transition-all delay-100 hover:bg-gray-200 hover:shadow-xl hover:scale-95 md:w-fit lg:px-6 lg:py-4 lg:font-semibold"
|
||||
href="/demo"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
Book a demo
|
||||
</a>
|
||||
<a
|
||||
class="md:text-base 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-4 lg:font-semibold"
|
||||
href="/signup"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
Sign Up for Free
|
||||
</a>
|
||||
<!-- <a
|
||||
class="font-medium lg:font-semibold text-sm md:text-base w-11/12 md:w-fit border px-6 py-3 lg:px-10 lg:py-5 rounded-md"
|
||||
href="/github"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
View on Github
|
||||
</a> -->
|
||||
</div>
|
||||
|
||||
<!-- <div class="relative my-5 md:my-10">
|
||||
<img
|
||||
width="710"
|
||||
height="710"
|
||||
src="./cio-hero.webp"
|
||||
alt="hero section with dark vs light mode"
|
||||
class=""
|
||||
/>
|
||||
|
||||
</div> -->
|
||||
<div
|
||||
style="position: relative; padding-bottom: calc(50% + 42px);"
|
||||
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"
|
||||
webkitallowfullscreen="true"
|
||||
mozallowfullscreen="true"
|
||||
allowfullscreen
|
||||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
{#if PUBLIC_ENABLE_USERS_COMPANIES}
|
||||
<div class="mb-[10%] px-[15%]">
|
||||
<h2 class="text-base font-semibold text-gray-900 lg:text-xl">Used at</h2>
|
||||
<div class="flex w-full flex-row flex-wrap items-center justify-between gap-5 py-[5%]">
|
||||
<img loading="lazy" src="/hero-1.svg" alt="" class="w-[30%] lg:w-[13%]" />
|
||||
<img loading="lazy" src="/hero-2.svg" alt="" class="w-[30%] lg:w-[13%]" />
|
||||
<img loading="lazy" src="/hero-3.svg" alt="" class="w-[30%] lg:w-[13%]" />
|
||||
<img loading="lazy" src="/hero-4.svg" alt="" class="w-[30%] lg:w-[13%]" />
|
||||
<img loading="lazy" src="/hero-5.svg" alt="" class="w-[30%] lg:w-[13%]" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,122 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { folder, globe, team, transcription } from '$lib/emojis';
|
||||
import { tools } from '$lib/utils/constants/tools';
|
||||
|
||||
let selected = 0;
|
||||
let interval: NodeJS.Timer;
|
||||
|
||||
const moreFeatures = [
|
||||
{
|
||||
icon: globe,
|
||||
title: 'Customizable Landing Page',
|
||||
description:
|
||||
'A minimalistic landing page template out of the box to share your courses with the world',
|
||||
image: '/landing-page-builder.webp'
|
||||
},
|
||||
{
|
||||
icon: team,
|
||||
title: 'Team management',
|
||||
description:
|
||||
'Extend invitations and manage your teaching institution seamlessly through ClassroomIO.',
|
||||
image: '/team-management.png'
|
||||
},
|
||||
{
|
||||
icon: transcription,
|
||||
title: 'Auto Video Transcription',
|
||||
description:
|
||||
'AI automatically transcribes videos, making content searchable for seamless student access.',
|
||||
image: '/video-transcription.png'
|
||||
},
|
||||
{
|
||||
icon: folder,
|
||||
title: 'Downloadable Lesson PDF',
|
||||
description: 'Students can download lessons automatically for offline access.',
|
||||
image: '/download-pdf.png'
|
||||
}
|
||||
];
|
||||
|
||||
const freeTools = tools.filter((item) => item.showFeature);
|
||||
|
||||
onMount(() => {
|
||||
if (window.innerWidth > 768) {
|
||||
interval = setInterval(() => {
|
||||
selected = moreFeatures[selected + 1] ? selected + 1 : 0;
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- More Features -->
|
||||
<section id="morefeatures" class="py-[10%] px-3 lg:px-0 bg-gray-50">
|
||||
<div class="mx-0 lg:mx-[12%]">
|
||||
<div class="w-full lg:w-4/5 mx-4 lg:mx-0 mb-14">
|
||||
<h2 class="mt-2 text-3xl font-bold font-display tracking-tight lg:text-4xl">
|
||||
There is More...
|
||||
</h2>
|
||||
<p class="mt-4 text-lg text-gray-500 w-[94%] lg:w-4/5">
|
||||
ClassroomIO is packed with useful features while we try to make it easy to use.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col-reverse lg:flex-row gap-3 md:gap-10" id="image-container">
|
||||
<div
|
||||
class="w-[95%] p-3 mt-5 overflow-auto lg:overflow-hidden lg:mt-0 lg:w-[45%] flex lg:block"
|
||||
>
|
||||
{#each moreFeatures as moreFeature, i}
|
||||
<button
|
||||
class="p-4 rounded-md {i === selected &&
|
||||
'selected'} mb-3 text-start min-w-[75vw] lg:min-w-[unset]"
|
||||
on:mouseenter={() => {
|
||||
selected = i;
|
||||
clearInterval(interval);
|
||||
}}
|
||||
>
|
||||
<div class="flex gap-1 items-center">
|
||||
<img
|
||||
loading="lazy"
|
||||
width="32"
|
||||
height="32"
|
||||
src={moreFeature.icon}
|
||||
alt=""
|
||||
class="w-8"
|
||||
/>
|
||||
<p class="text-lg font-semibold">
|
||||
{moreFeature.title}
|
||||
</p>
|
||||
</div>
|
||||
<p>{moreFeature.description}</p>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Video -->
|
||||
<div class="h-full w-full p-3 lg:w-2/3 lg:p-0">
|
||||
{#key selected}
|
||||
<img
|
||||
width="100%"
|
||||
height="100%"
|
||||
loading="lazy"
|
||||
id="image"
|
||||
in:fly={{ y: 100, duration: 1000 }}
|
||||
class="w-full flex flex-col items-center"
|
||||
src={moreFeatures[selected].image}
|
||||
alt={moreFeatures[selected].title}
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
#morefeatures .selected {
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgb(253, 239, 132),
|
||||
rgb(247, 198, 169),
|
||||
rgb(21, 186, 196)
|
||||
);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<section id="student-dashboard" class="text-center text-white py-[10%] px-3 lg:px-0 bg-black">
|
||||
<div class="mb-10">
|
||||
<a
|
||||
href="#student-dashboard"
|
||||
class="rounded-full px-4 py-2 text-sm font-medium hover:underline bg-blue-700 underline"
|
||||
><span class="">yourorg</span>.classroomio.com</a
|
||||
>
|
||||
</div>
|
||||
<h1
|
||||
class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] flex flex-col items-center gap-4"
|
||||
>
|
||||
Your Student Dashboard
|
||||
</h1>
|
||||
|
||||
<p
|
||||
class="mx-auto mt-10 lg:mt-6 px-4 lg:p-0 text-base tracking-wide leading-6 text-gray-400 lg:w-2/4"
|
||||
>
|
||||
Once you create an account, you get a dedicated dashboard where your students can access all
|
||||
their courses, assignments, and more.
|
||||
</p>
|
||||
|
||||
<div class="relative my-5 md:my-10">
|
||||
<video
|
||||
class="floating w-[85%] lg:w-[70%] mx-auto rounded-lg shadow-lg"
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
defaultMuted
|
||||
playsinline
|
||||
preload="auto"
|
||||
>
|
||||
<source src="https://video.cdn.clsrio.com/student-dashboard.mp4" type="video/mp4" />
|
||||
<track kind="captions" />
|
||||
</video>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script>
|
||||
import SenjaEmbed from '$lib/Senja/Embed.svelte';
|
||||
</script>
|
||||
|
||||
<section id="testimonial" class="flex flex-col items-center py-[5%] px-3 lg:px-0">
|
||||
<h1
|
||||
class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] flex flex-col items-center gap-4"
|
||||
>
|
||||
Hear from Happy ClassroomIO Users
|
||||
</h1>
|
||||
|
||||
<p
|
||||
class="mx-auto text-center my-5 lg:mt-6 px-4 lg:p-0 text-base tracking-wide leading-6 text-gray-400 lg:w-2/4"
|
||||
>
|
||||
See what excites them about building and managing bootcamps with ClassroomIO.
|
||||
</p>
|
||||
<a
|
||||
class="md:text-base 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"
|
||||
>
|
||||
Sign Up for Free
|
||||
</a>
|
||||
|
||||
<div class="relative my-5 md:my-10 w-[85%] lg:w-[70%]">
|
||||
<SenjaEmbed id="3e847d7a-13d3-483e-8a71-5b35273dcc6c" />
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,32 @@
|
||||
export const faqs = [
|
||||
{
|
||||
question: 'Who can benefit from ClassroomIO?',
|
||||
answer:
|
||||
'We built ClassroomIO from the ground up for Educators, meaning if you teach online or in a physical classroom you are good to go. It works best for Educators who already have students and want an efficient way to manage their learning experience.',
|
||||
},
|
||||
{
|
||||
question: 'Will I be able to set up ClassroomIO without technical skills?',
|
||||
answer:
|
||||
'Most definitely. You can use ClassroomIO as a no-code tool to build your own LMS platform. We provide an intuitive user interface and documentation to help you give your students the best learning experience.',
|
||||
},
|
||||
{
|
||||
question: 'How much customization can I do with ClassroomIO?',
|
||||
answer:
|
||||
'Things like theming, organization name, landing pages, content that your students see and many more customization options to come.',
|
||||
},
|
||||
{
|
||||
question: 'Is ClassroomIO suitable for a large number of students?',
|
||||
answer:
|
||||
'Absolutely. ClassroomIO is built for a large number of students in any course. You can have multiple courses with as many students as you need.',
|
||||
},
|
||||
{
|
||||
question: 'What kind of team plans does ClassroomIO offer?',
|
||||
answer:
|
||||
'ClassroomIO offers a Team plan designed to cater to organizations of any size. Depending on the plan you select, you can invite other teachers into your organization.',
|
||||
},
|
||||
{
|
||||
question: 'Can I try ClassroomIO before I buy it?',
|
||||
answer:
|
||||
'Definitely. We’ve got a generous free plan to help you get started with the platform. As your requirements grow, we’ve got other plans that can grow with you.',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,17 @@
|
||||
<script>
|
||||
export let color = 'currentColor';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="dark"
|
||||
>
|
||||
<path
|
||||
d="M18 22.5H6C5.60232 22.4995 5.22105 22.3414 4.93984 22.0602C4.65864 21.7789 4.50046 21.3977 4.5 21V3C4.5004 2.6023 4.65856 2.221 4.93978 1.93978C5.221 1.65856 5.6023 1.5004 6 1.5H18C18.3977 1.50046 18.779 1.65864 19.0602 1.93984C19.3414 2.22105 19.4995 2.60232 19.5 3V15.4636L15.75 13.5886L12 15.4636V3H6V21H18V18H19.5V21C19.4995 21.3977 19.3413 21.7789 19.0601 22.0601C18.7789 22.3413 18.3977 22.4995 18 22.5ZM15.75 11.9114L18 13.0364V3H13.5V13.0364L15.75 11.9114Z"
|
||||
fill={color}
|
||||
/>
|
||||
</svg>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script lang="ts">
|
||||
export let label = '';
|
||||
export let disabled = false;
|
||||
export let placeholder = '';
|
||||
export let value = '';
|
||||
export let rows = 3;
|
||||
export let className = '';
|
||||
export let labelClassName = '';
|
||||
export let bgColor = 'bg-gray-50 focus:bg-primary-50 dark:bg-neutral-700 dark:text-white';
|
||||
export let helperMessage = '';
|
||||
export let errorMessage = '';
|
||||
export let isRequired = false;
|
||||
export let onChange = () => {}; // This is to know if element is 'dirty'
|
||||
export let ref = null;
|
||||
</script>
|
||||
|
||||
<label for="text-field" class="block w-full relative {className}">
|
||||
{#if label}
|
||||
<p class="dark:text-white text-left w-full flex items-center justify-between {labelClassName}">
|
||||
<span>
|
||||
{label}
|
||||
{#if isRequired}
|
||||
<span class="text-red-700">*</span>
|
||||
{/if}
|
||||
</span>
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<textarea
|
||||
{disabled}
|
||||
{rows}
|
||||
{placeholder}
|
||||
bind:value
|
||||
bind:this={ref}
|
||||
required={isRequired}
|
||||
class="form-textarea p-2 border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 dark:border-neutral-600 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-primary-600 mt-1 block w-full
|
||||
{bgColor} {!!errorMessage ? 'border-red-500' : 'border-gray-300'}"
|
||||
on:change={onChange}
|
||||
/>
|
||||
{#if !!errorMessage}
|
||||
<p class="text-sm text-red-500">
|
||||
{errorMessage}
|
||||
</p>
|
||||
{:else if helperMessage}
|
||||
<p class="text-sm text-gray-500 dark:text-white">
|
||||
{helperMessage}
|
||||
</p>
|
||||
{/if}
|
||||
<slot name="iconbutton" />
|
||||
</label>
|
||||
|
||||
<style>
|
||||
.form-textarea {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let label = '';
|
||||
export let placeholder = '';
|
||||
export let value: string | number | null = null;
|
||||
export let name = '';
|
||||
export let className = '';
|
||||
export let inputClassName = '';
|
||||
export let labelClassName = '';
|
||||
export let bgColor = 'bg-gray-100 focus:bg-primary-50 dark:bg-neutral-700 dark:text-white';
|
||||
export let autoFocus = false;
|
||||
export let isRequired = false;
|
||||
export let isDisabled = false;
|
||||
export let errorMessage = '';
|
||||
export let helperMessage = '';
|
||||
export let autoComplete = true;
|
||||
|
||||
let ref: HTMLInputElement | undefined = undefined;
|
||||
let focusClass = '';
|
||||
|
||||
onMount(() => {
|
||||
if (autoFocus && ref) {
|
||||
ref.focus();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<label class="block relative {className}">
|
||||
{#if label}
|
||||
<p class=" dark:text-white text-left m-0 {labelClassName}">
|
||||
{label}
|
||||
{#if isRequired}
|
||||
<span class="text-red-700">*</span>
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<input
|
||||
class="form-input border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 dark:border-neutral-600 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 {inputClassName} {focusClass} {isDisabled &&
|
||||
'hover:cursor-not-allowed opacity-50'} dark:text-black p-2 mt-1 block w-full {bgColor} {errorMessage
|
||||
? 'border-red-600'
|
||||
: ''}"
|
||||
{placeholder}
|
||||
bind:value
|
||||
bind:this={ref}
|
||||
required={isRequired}
|
||||
disabled={isDisabled}
|
||||
autocomplete={autoComplete ? 'on' : 'off'}
|
||||
on:blur={(e) => {
|
||||
if (focusClass.includes('border-primary-600')) {
|
||||
focusClass = focusClass.replace('border-primary-600', '');
|
||||
}
|
||||
}}
|
||||
on:focus={() => (focusClass += ' border-primary-600')}
|
||||
{name}
|
||||
/>
|
||||
{#if errorMessage}
|
||||
<p class="text-sm text-red-500">{errorMessage}</p>
|
||||
{:else if helperMessage}
|
||||
<p class="dark:text-white text-sm">
|
||||
{helperMessage}
|
||||
</p>
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
<style>
|
||||
.form-input {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.password-eye {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 6px;
|
||||
}
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script>
|
||||
export let className = '';
|
||||
export let open = false;
|
||||
</script>
|
||||
|
||||
{#if open}
|
||||
<div class="relative flex items-center justify-center">
|
||||
<!-- black background -->
|
||||
<div class="fixed z-[3000] top-0 left-0 w-full h-full bg-black opacity-[0.7]"></div>
|
||||
<div
|
||||
class="fixed z-[3001] {className} w-full md:w-[30%] md:min-w-[500px] bg-white rounded-md mx-auto py-6 px-7"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,347 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import CourseIcon from '$lib/Icons/CourseIcon.svelte';
|
||||
import ChevronDown from 'carbon-icons-svelte/lib/ChevronDown.svelte';
|
||||
import CloseLarge from 'carbon-icons-svelte/lib/CloseLarge.svelte';
|
||||
import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
|
||||
import MapCenter from 'carbon-icons-svelte/lib/MapCenter.svelte';
|
||||
import TextAlignJustify from 'carbon-icons-svelte/lib/TextAlignJustify.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
let stars = 0;
|
||||
let showDrawer = false;
|
||||
let showSolutions = false;
|
||||
let activeLink = '';
|
||||
let closeTimeout: NodeJS.Timeout;
|
||||
|
||||
function closeSolutions() {
|
||||
closeTimeout = setTimeout(() => {
|
||||
showSolutions = false;
|
||||
}, 100);
|
||||
}
|
||||
function resetCloseTimeout() {
|
||||
clearTimeout(closeTimeout);
|
||||
}
|
||||
|
||||
function handleShowDrawer() {
|
||||
showDrawer = !showDrawer;
|
||||
}
|
||||
|
||||
function handleShowSolutions() {
|
||||
showSolutions = !showSolutions;
|
||||
}
|
||||
|
||||
const solutions = [
|
||||
{
|
||||
key: 'employee-training',
|
||||
title: 'Employee Training',
|
||||
subtitle: 'Keep your team in sync.'
|
||||
},
|
||||
{
|
||||
key: 'bootcamps',
|
||||
title: 'Bootcamps',
|
||||
subtitle: 'Drive student satisfaction.'
|
||||
},
|
||||
{
|
||||
key: 'customer-education',
|
||||
title: 'Customer Education',
|
||||
subtitle: 'Teach customers your product.'
|
||||
}
|
||||
];
|
||||
|
||||
$: activeLink = $page.url.pathname;
|
||||
$: activeHash = $page.url.hash;
|
||||
$: isSolutionsActive = solutions.some((s) => activeHash.includes(s.key));
|
||||
|
||||
async function setStars() {
|
||||
try {
|
||||
const response = await fetch('https://api.github.com/repos/classroomio/classroomio');
|
||||
const data = await response.json();
|
||||
stars = data?.stargazers_count || 0;
|
||||
} catch (error) {
|
||||
console.error('Error fetching GitHub stars:', error);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
setStars();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex w-full justify-between items-center py-6 border-b-[1px] md:px-12 px-5 fixed top-0 z-[3000] filter backdrop-blur-xl shadow-sm bg-white"
|
||||
>
|
||||
<a href="/" class="w-[10%]">
|
||||
<div class="flex items-center w-full">
|
||||
<img
|
||||
loading="lazy"
|
||||
width="28"
|
||||
height="28"
|
||||
src="/logo-512.png"
|
||||
alt="classroomio logo"
|
||||
class="w-6 md:w-10"
|
||||
/>
|
||||
<h1 class="text-xs md:text-lg font-medium ml-2">ClassroomIO</h1>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<nav class="w-[50%] hidden md:hidden lg:block">
|
||||
<ul class="flex justify-center items-center w-full gap-5">
|
||||
<li class="text-gray-800 font-semibold text-sm cursor-pointer relative">
|
||||
<button
|
||||
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 transition-all duration-200"
|
||||
on:click={() => (showSolutions = !showSolutions)}
|
||||
class:active={isSolutionsActive}
|
||||
>
|
||||
<span class="mr-2">Solutions</span>
|
||||
<ChevronDown size={16} />
|
||||
</button>
|
||||
{#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 solutions as solution}
|
||||
<a
|
||||
class="flex justify-between items-center w-full rounded-lg hover:bg-gray-100 hover:cursor-pointer p-2 transition-colors duration-200"
|
||||
href="/{solution.key}"
|
||||
on:click={() => (showSolutions = false)}
|
||||
>
|
||||
{#if solution.key === 'employee-training'}
|
||||
<CourseIcon />
|
||||
{:else if solution.key === 'bootcamps'}
|
||||
<MapCenter size={24} />
|
||||
{:else if solution.key === 'customer-education'}
|
||||
<ForumIcon size={24} />
|
||||
{/if}
|
||||
|
||||
<div class="w-[84%] text-start">
|
||||
<h3 class="font-semibold text-sm text-gray-700">
|
||||
{solution.title}
|
||||
</h3>
|
||||
<p class="font-normal text-sm text-gray-600">
|
||||
{solution.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</button>
|
||||
{/if}
|
||||
</li>
|
||||
<a
|
||||
href="/tools"
|
||||
class="text-gray-800 font-semibold text-sm cursor-pointer"
|
||||
class:active={activeLink.startsWith('/tools')}
|
||||
>
|
||||
<li class="hover:bg-gray-100 px-4 py-2 rounded-md transition-all duration-200">
|
||||
Free Tools
|
||||
</li>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/blog"
|
||||
class="text-gray-800 font-semibold text-sm cursor-pointer"
|
||||
class:active={activeLink.startsWith('/blog')}
|
||||
>
|
||||
<li class="hover:bg-gray-100 px-4 py-2 rounded-md transition-all duration-200">Blog</li>
|
||||
</a>
|
||||
<a
|
||||
href="/pricing"
|
||||
class="text-gray-800 font-semibold text-sm cursor-pointer"
|
||||
class:active={activeLink.startsWith('/pricing')}
|
||||
>
|
||||
<li class="hover:bg-gray-100 px-4 py-2 rounded-md transition-all duration-200">Pricing</li>
|
||||
</a>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="justify-between items-center flex-row hidden md:hidden lg:flex gap-3">
|
||||
<a
|
||||
href="/discord"
|
||||
target="_blank"
|
||||
class="flex items-center hover:opacity-80 transition-opacity duration-200"
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
alt="discord logo"
|
||||
src="/discord-blue.png"
|
||||
class="w-6 h-5 cursor-pointer"
|
||||
/>
|
||||
</a>
|
||||
<div class="flex items-center">
|
||||
<a
|
||||
href="/github"
|
||||
target="_blank"
|
||||
class="flex items-center gap-1.5 p-2 rounded-md transition-all duration-200 ease-in-out hover:bg-gray-100 group"
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
alt="github logo"
|
||||
src="/github-mark.png"
|
||||
class="w-5 h-5 cursor-pointer transition-transform duration-200 group-hover:scale-110"
|
||||
/>
|
||||
<span
|
||||
class="text-sm text-gray-600 font-medium leading-none transition-colors duration-200 group-hover:text-black"
|
||||
>
|
||||
{stars}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
class="font-medium text-sm after:content-['→'] after:ml-2 hover:opacity-80 transition-opacity duration-200"
|
||||
href="https://app.classroomio.com"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Hamburger Menu"
|
||||
class="block md:block lg:hidden"
|
||||
on:click={handleShowSolutions}
|
||||
>
|
||||
<TextAlignJustify size={24} />
|
||||
</button>
|
||||
|
||||
{#if showSolutions}
|
||||
<div
|
||||
in:fly={{ x: 20, duration: 700 }}
|
||||
out:fly={{ x: 20, duration: 400 }}
|
||||
class="w-[60%] md:w-[40%] h-[100vh] border-2 sm:block lg:hidden px-3 pt-3 pb-2 md:p-7 absolute right-0 top-0 bg-white"
|
||||
>
|
||||
<div class="flex justify-between py-2 mb-5">
|
||||
<img
|
||||
loading="lazy"
|
||||
width="20"
|
||||
height="20"
|
||||
src="/logo-512.png"
|
||||
alt="classroomio logo"
|
||||
class="w-[15%]"
|
||||
/>
|
||||
<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 transition-all duration-200"
|
||||
on:click={handleShowDrawer}
|
||||
class:active={isSolutionsActive}
|
||||
>
|
||||
Our Superpowers <ChevronDown />
|
||||
</button>
|
||||
{#if showDrawer}
|
||||
<div in:fly={{ y: -20, duration: 700 }} out:fly={{ y: 20, duration: 400 }}>
|
||||
{#each solutions as solution}
|
||||
<a
|
||||
href="/{solution.key}"
|
||||
on:click={() => {
|
||||
handleShowSolutions();
|
||||
}}
|
||||
>
|
||||
<p
|
||||
class="font-normal text-xs text-gray-700 hover:bg-gray-100 rounded-lg py-2.5 pl-5 transition-colors duration-200"
|
||||
>
|
||||
{solution.title}
|
||||
</p>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</li>
|
||||
<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 transition-all duration-200"
|
||||
on:click={handleShowSolutions}
|
||||
href="/tools"
|
||||
>
|
||||
<li>Free Tools</li>
|
||||
</a>
|
||||
<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 transition-all duration-200"
|
||||
on:click={() => {
|
||||
handleShowSolutions();
|
||||
}}
|
||||
class:active={activeLink.startsWith('/blog')}
|
||||
href="/blog"
|
||||
>
|
||||
<li>Blog</li>
|
||||
</a>
|
||||
<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 transition-all duration-200"
|
||||
on:click={() => {
|
||||
handleShowSolutions();
|
||||
}}
|
||||
href="/pricing"
|
||||
class:active={activeLink.startsWith('/pricing')}
|
||||
>
|
||||
<li>Pricing</li>
|
||||
</a>
|
||||
<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 transition-all duration-200"
|
||||
on:click={() => {
|
||||
handleShowSolutions();
|
||||
}}
|
||||
class:active={activeHash.includes('morefeatures')}
|
||||
href="/#morefeatures"
|
||||
>
|
||||
<li>More features</li>
|
||||
</a>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="flex items-start flex-col gap-y-2 mt-5 border-t-[1px] pt-5">
|
||||
<a
|
||||
href="/discord"
|
||||
target="_blank"
|
||||
class="flex items-center rounded-md w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg transition-all duration-200"
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
alt="discord logo"
|
||||
src="/discord-blue.png"
|
||||
class="w-6 h-5 mr-2 cursor-pointer"
|
||||
/>
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
<a
|
||||
href="/github"
|
||||
target="_blank"
|
||||
class="flex items-center rounded-md w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg group transition-all duration-200"
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
alt="github logo"
|
||||
src="/github-mark.png"
|
||||
class="w-5 h-5 cursor-pointer transition-transform duration-200 group-hover:scale-110"
|
||||
/>
|
||||
<span class="ml-3 transition-colors duration-200 group-hover:text-black">Github</span>
|
||||
<span
|
||||
class="text-sm text-gray-600 font-medium ml-1 transition-colors duration-200 group-hover:text-black"
|
||||
>({stars})</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
class="font-semibold after:content-['→'] rounded-md after:ml-2 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg transition-all duration-200"
|
||||
href="https://app.classroomio.com"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.active {
|
||||
background-color: #f3f4f6;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let isOrg = false;
|
||||
export let className = '';
|
||||
|
||||
function handleClick() {
|
||||
if (!isOrg) {
|
||||
return goto('/');
|
||||
}
|
||||
|
||||
return goto('https://classroomio.com');
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="{className} min-h-[80vh] flex items-center justify-center flex-col w-screen">
|
||||
<img src="https://brand.cdn.clsrio.com/404.png" alt="classroomio_error_image" />
|
||||
|
||||
<div class="flex flex-col items-center justify-center dark:text-white gap-3 w-4/5 lg:w-2/5">
|
||||
<p class="text-4xl dark:text-white font-semibold mb-5">
|
||||
{#if isOrg}
|
||||
Organization doesn't exist!
|
||||
{:else}
|
||||
Page not found
|
||||
{/if}
|
||||
</p>
|
||||
<p class=" text-gray-700 text-lg text-center dark:text-white mb-5">
|
||||
The page you are looking for doesn't exist or has been moved. Please go back to the homepage.
|
||||
</p>
|
||||
|
||||
<button
|
||||
class="text-base rounded-md bg-black transition-all delay-100 hover:shadow-xl hover:scale-95 px-6 py-4 font-semibold text-white lg:px-7 lg:py-3 lg:text-lg"
|
||||
on:click={handleClick}
|
||||
>
|
||||
Go Home
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
<script>
|
||||
export let className = '';
|
||||
</script>
|
||||
|
||||
<header
|
||||
class="hero-bg lg:min-h-[20rem] mt-[10%] md:mt-16 pt-24 pb-16 w-full border-b border-slate-100 {className}"
|
||||
>
|
||||
<slot />
|
||||
</header>
|
||||
@@ -0,0 +1,52 @@
|
||||
<script>
|
||||
export let header = '';
|
||||
export let subText = '';
|
||||
export let btnLabel = '';
|
||||
export let link = '';
|
||||
export let demo = true;
|
||||
</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 max-w-4xl"
|
||||
>
|
||||
<div>
|
||||
<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">
|
||||
{subText}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if demo}
|
||||
<button
|
||||
class="text-base mt-10 rounded-md bg-white px-6 py-4 font-semibold text-gray-900 lg:px-7 lg:py-3 lg:text-lg"
|
||||
data-cal-config="'layout':'month_view'"
|
||||
data-cal-link="classroomio/demo"
|
||||
>
|
||||
{btnLabel}
|
||||
</button>
|
||||
{:else}
|
||||
<a
|
||||
class="text-base mt-10 rounded-md bg-white px-6 py-4 font-semibold text-gray-900 lg:px-7 lg:py-3 lg:text-lg"
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
{btnLabel}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.grad {
|
||||
/* background: rgb(2, 51, 189);
|
||||
background: radial-gradient(circle at 50% 100%, rgba(2, 51, 189, 1) 1%, rgb(4, 2, 56) 100%); */
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-image: url('https://brand.cdn.clsrio.com/cta-bg.png');
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { embedSenjaWidget } from '@cio/utils/senja';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let id = '';
|
||||
|
||||
onMount(() => {
|
||||
embedSenjaWidget(id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="senja-embed" data-id={id} data-lazyload="false" data-spinner="false"></div>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export let className = '';
|
||||
</script>
|
||||
|
||||
<header class="tools-hero-bg text-center py-14 {className} border-b border-slate-100 bg-white">
|
||||
<slot />
|
||||
</header>
|
||||
@@ -0,0 +1,76 @@
|
||||
<script lang="ts">
|
||||
import ImageCopy from 'carbon-icons-svelte/lib/ImageCopy.svelte';
|
||||
import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte';
|
||||
|
||||
export let imageURL = '';
|
||||
export let label = '';
|
||||
export let isRequired = false;
|
||||
export let labelClassName = '';
|
||||
let isUploading = false;
|
||||
let fileInput: HTMLInputElement;
|
||||
|
||||
const onFileSelected = () => {
|
||||
const file = fileInput?.files?.[0];
|
||||
const sizeInkb = file?.size! / 1024;
|
||||
if (sizeInkb > 500) {
|
||||
return;
|
||||
}
|
||||
if (file) {
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onloadend = () => {
|
||||
imageURL = reader.result as string;
|
||||
};
|
||||
}
|
||||
};
|
||||
const deleteImage = () => {
|
||||
imageURL = '';
|
||||
if (fileInput) {
|
||||
fileInput.value = '';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div>
|
||||
{#if label}
|
||||
<p class="dark:text-white text-left w-full flex items-center justify-between {labelClassName}">
|
||||
<span>
|
||||
{label}
|
||||
{#if isRequired}
|
||||
<span class="text-red-700">*</span>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
{#if imageURL}
|
||||
<span title="clear image" on:click={deleteImage}>
|
||||
<TrashCan class="fill-red-500 " />
|
||||
</span>
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
<div
|
||||
class="flex items-center justify-center w-full border rounded-md min-h-[200px] p-4"
|
||||
on:click={() => fileInput.click()}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
style="display: none;"
|
||||
bind:this={fileInput}
|
||||
on:change={onFileSelected}
|
||||
disabled={isUploading}
|
||||
required={isRequired}
|
||||
/>
|
||||
{#if imageURL}
|
||||
<img src={imageURL} alt="selected file" class="w-[30%] h-auto mt-4" />
|
||||
{:else}
|
||||
<div class="space-y-4">
|
||||
<ImageCopy size={24} class="mx-auto" />
|
||||
<p class="text-center text-sm text-gray-500 my-2">
|
||||
Max file size: 10MB, accepted: jpeg, jpg, png, gif
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script lang="ts">
|
||||
export let src: string;
|
||||
export let alt: string;
|
||||
</script>
|
||||
|
||||
<figure>
|
||||
<img
|
||||
{src}
|
||||
{alt}
|
||||
loading="lazy"
|
||||
class="max-w-full w-full h-full md:min-h-[400px] object-cover my-2 rounded-lg"
|
||||
/>
|
||||
</figure>
|
||||
@@ -0,0 +1,2 @@
|
||||
import img from './img.svelte';
|
||||
export { img };
|
||||
@@ -0,0 +1,150 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M38.738 31.651C38.9137 31.2946 39.1044 30.9081 39.3002 30.4914C42.5482 23.7043 48.5221 9.78361 49.6315 8.09184C50.8062 6.29465 52.508 5.32581 55.3243 6.54067C58.1406 7.75552 58.3865 10.9633 56.5341 14.3418C54.6817 17.7203 51.1627 30.3057 49.5211 36.3599C46.6396 46.9824 43.1255 53.7946 43.1255 53.7946L34.486 42.2836L38.738 31.651Z" fill="url(#paint0_linear)"/>
|
||||
<path opacity="0.16" d="M52.2921 6.93728C52.7439 6.16921 54.6716 6.93728 55.4748 7.866C56.278 8.79471 56.5692 10.1702 56.1123 10.9383C55.6605 11.7064 54.516 11.104 53.5019 10.5869C51.765 9.69331 51.8403 7.70535 52.2921 6.93728Z" fill="url(#paint1_radial)"/>
|
||||
<path d="M49.6315 8.09128C49.0592 8.96979 47.1817 13.1214 45.0532 17.8704C43.0702 22.288 42.9648 27.4638 47.7791 13.8242C49.7821 8.14651 52.6134 6.013 53.6576 6.0632C51.8001 5.80216 50.5501 6.68566 49.6315 8.09128Z" fill="url(#paint2_linear)"/>
|
||||
<path d="M49.5161 36.3594C51.1576 30.3052 54.6767 17.7199 56.5291 14.3364C57.5332 12.499 57.8996 10.7269 57.5934 9.28613C55.7058 14.3865 50.9619 21.1687 49.1898 28.1064C45.8514 41.1536 47.6386 43.2871 49.5161 36.3594Z" fill="url(#paint3_linear)"/>
|
||||
<path d="M38.738 31.651C38.9137 31.2946 39.1044 30.9081 39.3002 30.4914C42.5482 23.7043 48.5221 9.78361 49.6315 8.09184C50.8062 6.29465 52.508 5.32581 55.3243 6.54067C58.1406 7.75552 58.3865 10.9633 56.5341 14.3418C54.6817 17.7203 51.1627 30.3057 49.5211 36.3599C46.6396 46.9824 43.1255 53.7946 43.1255 53.7946L34.486 42.2836L38.738 31.651Z" fill="url(#paint4_linear)"/>
|
||||
<path d="M49.1998 8.875C48.4518 10.3258 47.0964 13.3177 45.5402 16.7766L46.4137 18.8298L50.751 30.9633C50.751 30.9633 50.8765 30.893 51.0622 30.7826C51.8705 27.9262 52.7942 24.7735 53.6928 21.9472C51.3886 18.7796 49.4357 13.1471 49.1998 8.875Z" fill="url(#paint5_linear)"/>
|
||||
<path d="M42.6285 23.2578C41.9609 24.7438 41.3032 26.1895 40.6908 27.5148C42.5532 31.1092 41.5743 38.4184 39.9629 40.9034C38.5773 43.0419 43.989 44.0961 46.9709 44.5027C47.8093 42.1483 48.6878 39.4174 49.5161 36.3602C49.5713 36.1494 49.6366 35.9084 49.7018 35.6825L50.0331 32.314L42.6285 23.2578Z" fill="url(#paint6_linear)"/>
|
||||
<path d="M46.3733 41.4742C46.308 41.0826 45.3191 36.1228 45.2387 35.671C43.8783 28.2714 39.5912 13.2514 39.4907 11.2333C39.3853 9.08973 40.1885 7.30759 43.1805 6.62988C46.1725 5.95217 48.2558 8.40697 48.7478 12.2323C49.2397 16.0576 54.2247 27.8196 56.5389 33.6479C60.7257 44.1801 61.0921 52.0314 61.0921 52.0314L47.3371 47.7995L46.3733 41.4742Z" fill="url(#paint7_linear)"/>
|
||||
<path opacity="0.16" d="M40.9669 8.7339C40.8815 7.84535 42.8896 7.33833 44.0894 7.61444C45.2891 7.89054 46.3283 8.83431 46.4136 9.72287C46.499 10.6114 45.2189 10.7972 44.0994 10.9729C42.1566 11.2691 41.0522 9.62246 40.9669 8.7339Z" fill="url(#paint8_radial)"/>
|
||||
<path d="M41.5492 7.22363C39.8976 8.10215 39.4056 9.55294 39.4859 11.2296C39.5863 13.2527 43.8735 28.2678 45.2339 35.6674C45.3192 36.1192 46.3032 41.079 46.3684 41.4706L47.2319 47.1282C49.3453 50.5369 51.5843 45.1553 41.3584 16.9576C39.3052 11.2949 40.6807 7.80094 41.5492 7.22363Z" fill="url(#paint9_linear)"/>
|
||||
<path d="M56.5292 33.6139C54.2049 27.7755 49.235 16.0486 48.7481 12.2284V12.2233C48.6828 11.7163 48.5874 11.2394 48.467 10.7876C48.4469 10.7173 48.4218 10.6621 48.4017 10.5918C48.2862 10.2002 48.1607 9.82373 48.0101 9.48236C48.0001 9.45726 47.985 9.43716 47.975 9.41206C47.6236 8.64399 47.1718 8.00146 46.6396 7.51953C48.1105 12.7555 48.2611 21.0285 50.9017 27.6851C55.8716 40.2002 53.0503 41.1239 51.6647 42.9562C54.5965 42.901 58.7179 51.0686 61.0924 52.0325C60.8013 51.5807 60.6557 50.6721 60.6005 49.4673C60.4699 45.7022 58.6828 39.7183 56.5292 33.6139Z" fill="url(#paint10_linear)"/>
|
||||
<path d="M18.4117 50.6274C18.4117 52.9366 19.5412 53.9708 20.1085 54.3473C20.2993 54.4728 20.4248 54.523 20.4248 54.523L30.977 62.1535L50.2892 58.1977L49.6968 45.9788C42.4629 45.0501 35.7109 42.3493 28.6426 40.4919C28.5222 40.4618 28.1507 37.4497 28.0252 37.4196C27.8344 37.3694 27.8946 40.3011 27.7039 40.2509C24.8876 39.5431 22.0212 38.9909 19.0442 38.7449C17.8545 42.6204 18.4117 47.9366 18.4117 50.6274Z" fill="url(#paint11_linear)"/>
|
||||
<path d="M38.9789 50.9872C43.738 50.4852 46.755 54.3807 47.1315 56.4038L48.6878 55.8366L47.9799 48.0655L42.9398 44.8175L36.2028 43.1207L29.3705 39.5414L28.0653 35.4601C28.0302 35.4601 27.7039 35.4551 27.6687 35.4551L21.1175 36.1227C20.4097 36.3838 19.8976 36.7302 19.6667 37.187C18.7982 38.8838 18.4619 41.0926 18.3464 43.2964C19.3705 45.3546 21.6647 46.4189 23.6727 46.4189C26.0272 46.4189 27.4428 44.6267 28.2912 43.1207C28.2912 43.1207 28.4468 45.8516 32.232 46.8908C32.2269 46.8908 35.0432 51.4038 38.9789 50.9872Z" fill="url(#paint12_linear)"/>
|
||||
<path d="M23.6175 45.4768C20.8414 45.4768 18.5472 43.2178 18.1607 38.9759C18.1205 38.514 17.3424 30.2158 22.0864 30.2158C26.489 30.2158 27.734 31.9126 28.0201 37.5652C28.3062 43.2178 26.489 45.4768 23.6175 45.4768Z" fill="url(#paint13_linear)"/>
|
||||
<path d="M34.1294 46.1384C30.7007 46.1384 28.9889 44.6323 28.512 40.3452C28.0351 36.058 25.9718 28.3322 32.267 27.9155C38.2961 27.5189 38.4116 31.2488 38.4116 37.4687C38.4116 43.6886 37.0812 46.1384 34.1294 46.1384Z" fill="url(#paint14_linear)"/>
|
||||
<path d="M33.9388 40.2003C31.3233 41.5206 29.5612 41.5457 28.4418 39.7485C28.4669 39.9493 28.497 40.1551 28.5171 40.3459C28.994 44.633 30.7058 46.139 34.1345 46.139C36.5442 46.139 37.8745 44.5025 38.2811 40.5166C37.6034 39.3519 35.4799 39.4222 33.9388 40.2003Z" fill="url(#paint15_linear)"/>
|
||||
<path d="M23.522 40.015C21.1876 40.015 19.2549 38.5642 18.9336 35.8433C19.0591 36.8975 18.0852 30.2158 22.2368 30.2158C25.9417 30.2158 26.9858 31.3052 27.2318 34.9347C27.4678 38.5642 25.9366 40.015 23.522 40.015Z" fill="url(#paint16_linear)"/>
|
||||
<path d="M33.6576 39.7293C30.8464 39.7293 29.5813 38.2484 29.1044 35.2112C28.8584 33.65 27.262 28.1982 32.4227 27.907C37.3725 27.6259 37.3725 31.2403 37.4729 34.3126C37.6235 38.7303 36.0773 39.7293 33.6576 39.7293Z" fill="url(#paint17_linear)"/>
|
||||
<path d="M32.0863 45.8821C32.6887 46.0478 33.3614 46.1382 34.1295 46.1382C37.0813 46.1382 38.4116 43.6884 38.4116 37.4685C38.4116 31.4745 38.2911 27.8049 32.8795 27.9003C35.008 29.1703 36.7399 32.0569 36.7399 37.2777C36.7449 44.7075 35.0783 45.8671 32.0863 45.8821Z" fill="url(#paint18_linear)"/>
|
||||
<path d="M32.2269 43.8444C32.2269 41.3344 34.004 41.2541 38.758 40.8274C42.1616 40.5262 45.8564 39.6326 50.5652 41.4549C55.9417 43.5332 60.9919 46.5402 61.0572 51.9468C61.1124 56.7812 57.3523 73.995 40.8965 73.995C24.4407 73.995 18.9136 65.1998 18.4116 50.6316L47.1315 56.4097C47.1315 56.4097 47.7439 51.2741 44.2248 49.7531C42.7238 49.1055 39.516 49.6276 37.3775 49.6276C35.2439 49.6225 32.2269 47.238 32.2269 43.8444Z" fill="url(#paint19_linear)"/>
|
||||
<path d="M52.6435 63.0958C45.6706 68.1812 46.2379 71.0125 39.7369 71.0125C33.2359 71.0125 29.0441 67.5737 26.0773 64.6069C23.1104 61.64 20.6104 56.6903 19.3855 52.9252C19.0943 52.0366 18.758 51.2936 18.4116 50.6611C18.9186 65.2143 24.4508 73.9995 40.8965 73.9995C57.3523 73.9995 61.1174 56.7906 61.0572 51.9513C61.0321 49.8378 60.2339 48.0909 58.9638 46.625C59.3252 53.5276 58.3664 58.9141 52.6435 63.0958Z" fill="url(#paint20_radial)"/>
|
||||
<path d="M23.6426 42.841C20.8213 42.841 18.4869 40.597 18 36.4053C18.0201 37.2486 18.0803 38.1171 18.1606 38.9756C18.5422 43.2175 20.8414 45.4766 23.6175 45.4766C26.3132 45.4766 28.0552 43.4485 28.0251 38.5338C27.4478 41.5509 25.8464 42.841 23.6426 42.841Z" fill="url(#paint21_linear)"/>
|
||||
<path d="M28.0201 37.5648C27.749 32.1783 26.5994 30.3911 22.6837 30.2305C24.7369 30.5668 28.7078 38.4734 23.2409 45.4413C23.3665 45.4513 23.492 45.4814 23.6175 45.4814C26.4889 45.4764 28.3062 43.2174 28.0201 37.5648Z" fill="url(#paint22_linear)"/>
|
||||
<path d="M48.8082 51.3804C48.6827 48.3633 44.9779 45.3513 41.9006 45.6625C39.2449 45.9336 34.4307 46.295 32.2821 44.3271C32.5582 47.4547 35.3494 49.6233 37.3775 49.6233C39.511 49.6233 42.7239 49.1012 44.2249 49.7488C47.7439 51.2699 47.1315 56.4055 47.1315 56.4055C47.1315 56.4055 48.9337 54.3974 48.8082 51.3804Z" fill="url(#paint23_linear)"/>
|
||||
<path d="M61.0571 51.9468C60.9969 46.5452 55.9417 43.5382 50.5652 41.4549C45.8563 39.6326 42.1565 40.5262 38.7579 40.8274C35.1284 41.1487 33.2459 41.2792 32.5481 42.4338C37.021 41.3294 41.2077 40.8776 46.3684 41.4699C53.0953 42.238 58.1806 46.3846 59.1043 49.5573C60.0179 52.6898 59.8824 58.5281 59.8824 58.6687C60.7559 55.8625 61.0772 53.3675 61.0571 51.9468Z" fill="url(#paint24_linear)"/>
|
||||
<path d="M47.1315 56.4057C47.2168 55.1858 47.1164 53.9358 46.7249 52.7762C46.3534 51.6266 45.6154 50.5423 44.5261 50.0051C43.4668 49.4127 42.1716 49.5232 40.9718 49.5483C39.7469 49.5985 38.5271 49.744 37.2821 49.734C34.7269 49.5081 32.6486 47.3344 32.1817 44.8746C32.0662 44.2571 32.0361 43.6196 32.1616 42.982C32.2972 42.3394 32.7841 41.7571 33.3865 41.5161C34.5763 41.0091 35.8263 40.9489 37.0411 40.8033C39.4959 40.6527 41.9106 40.2109 44.3955 40.1959C46.8754 40.1607 49.3503 40.733 51.5993 41.737C53.8584 42.6959 56.0923 43.8254 57.9548 45.472C59.8122 47.0885 61.1023 49.4579 61.0572 51.9428C61.0371 49.4529 59.7068 47.1537 57.8393 45.6025C55.9869 44.0011 53.768 42.8917 51.509 41.9579C49.265 40.979 46.8453 40.4419 44.4006 40.4921C41.9658 40.5222 39.5261 40.984 37.0763 41.1547C35.8664 41.2853 34.6114 41.3505 33.5221 41.8073C32.9749 42.0282 32.5933 42.485 32.4628 43.0473C32.3423 43.6145 32.3624 44.232 32.4678 44.8143C32.8745 47.1436 34.8925 49.2722 37.2871 49.4931C38.502 49.5131 39.7319 49.3776 40.9568 49.3375C42.1666 49.3274 43.4819 49.2069 44.6064 49.8495C45.7259 50.4418 46.4538 51.5764 46.8052 52.7461C47.1716 53.9358 47.2419 55.1858 47.1315 56.4057Z" fill="#975500"/>
|
||||
<path d="M27.8394 35.4512C28.0653 37.2484 28.2912 39.0757 28.01 40.898C27.8845 41.8016 27.6636 42.7102 27.2219 43.5385C26.8002 44.3719 26.0572 45.0596 25.1636 45.401C23.3614 45.9933 21.2681 45.4411 20.0331 44.0305C18.748 42.66 18.2661 40.7725 18.1606 38.9753C18.4016 40.7574 18.9639 42.5697 20.2038 43.8648C21.4086 45.1851 23.4016 45.6419 25.0432 45.0646C26.75 44.4873 27.5281 42.5897 27.7791 40.8628C28.0703 39.0857 27.9297 37.2634 27.8394 35.4512Z" fill="#975500"/>
|
||||
<path d="M32.7791 46.0233C32.2018 46.209 31.6696 45.953 31.1877 45.702C30.7008 45.446 30.259 45.0896 29.9026 44.6729C29.1747 43.8345 28.7982 42.7803 28.5672 41.7361C28.3564 40.6769 28.3313 39.6227 28.1807 38.5785C28.0502 37.5293 27.9347 36.4801 27.8895 35.4209C28.0251 36.4701 28.2058 37.5092 28.3765 38.5484C28.5773 39.5876 28.6676 40.6518 28.9136 41.6558C29.1496 42.6599 29.5261 43.6538 30.1988 44.4118C30.5301 44.7883 30.9317 45.1046 31.3785 45.3355C31.8303 45.5815 32.3222 45.6418 32.7791 46.0233Z" fill="#975500"/>
|
||||
<path d="M35.1084 28.1162C35.6857 28.2618 36.253 28.5027 36.7349 28.8893C37.2118 29.2758 37.5482 29.813 37.7941 30.3702C38.2911 31.4947 38.4217 32.7196 38.5271 33.9194C38.5823 35.1242 38.5873 36.324 38.5622 37.5238C38.5522 38.1212 38.5672 38.7186 38.5371 39.326C38.517 39.6272 38.512 39.9334 38.4467 40.2346C38.3915 40.5007 38.256 40.9425 37.8895 40.9124C38.1907 40.8069 38.1807 40.4656 38.2459 40.1995C38.2811 39.9134 38.3162 39.6172 38.3162 39.321C38.3263 38.7287 38.2911 38.1313 38.2761 37.5289C38.2409 36.3291 38.256 35.1343 38.1757 33.9445C38.1104 32.7648 38.0301 31.555 37.5984 30.4606C37.2018 29.3361 36.258 28.4777 35.1084 28.1162Z" fill="#975500"/>
|
||||
<path d="M38.9788 49.5718C35.0431 49.9885 32.2318 45.4754 32.2318 45.4754C28.4467 44.4413 28.2911 41.7054 28.2911 41.7054C27.4427 43.2114 26.0321 45.0035 23.6726 45.0035C21.6696 45.0035 19.3704 43.9343 18.3463 41.8811C18.3714 41.4243 18.4116 40.9674 18.4568 40.5156H18.4417C18.3112 41.7556 18.281 43.0206 18.2911 44.2355C20.3192 46.5598 23.4919 46.8861 25.52 46.2887C26.0672 46.1281 28.6324 44.1903 30.6104 46.1381C32.7589 48.2465 35.2539 50.9423 39.5411 50.8469C43.8282 50.7515 47.1364 54.9935 47.1364 54.9935C46.7549 52.9654 43.7328 49.0698 38.9788 49.5718Z" fill="url(#paint25_linear)"/>
|
||||
<path opacity="0.16" d="M21.4438 51.1245C19.9328 52.9418 24.5262 63.4187 29.0643 66.0592C33.6025 68.6998 39.2802 67.8865 40.3896 65.7932C41.4991 63.6948 36.7852 60.4367 32.9298 56.8273C26.2681 50.5974 22.9549 49.3072 21.4438 51.1245Z" fill="url(#paint26_radial)"/>
|
||||
<path opacity="0.16" d="M58.3965 52.465C59.1997 51.3856 55.1837 44.6788 51.9758 42.8666C48.768 41.0593 42.4578 42.1336 41.9407 43.4037C41.4287 44.6738 47.508 46.1045 50.3694 48.4941C55.3142 52.6256 57.5933 53.5493 58.3965 52.465Z" fill="url(#paint27_radial)"/>
|
||||
<path d="M42.4779 23.749L44.6566 31.9719C44.9829 33.3524 45.3193 34.7329 45.5853 36.1285C45.7209 36.8263 45.8464 37.5241 45.9568 38.2269C46.0622 38.9297 46.2128 39.6275 46.1576 40.3504C45.9317 39.6627 45.8765 38.9599 45.7359 38.2671C45.6054 37.5743 45.4598 36.8815 45.2992 36.1888C44.9829 34.8082 44.6616 33.4327 44.3153 32.0572C43.6978 29.2862 42.9749 26.5402 42.4779 23.749Z" fill="#975500"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="24.8698" y1="77.9331" x2="35.395" y2="54.869" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(54.1858 9.02708) rotate(-131.033) scale(2.78955 1.48287)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="paint2_linear" x1="133.685" y1="-74.5082" x2="164.412" y2="-106.262" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D2A374" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#B88653"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear" x1="451.914" y1="-90.475" x2="494.367" y2="-102.731" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D2A374" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#B88653"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear" x1="44.8255" y1="9.41291" x2="52.0853" y2="104.853" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#473226" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#3D2A20"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear" x1="51.7462" y1="8.40022" x2="48.0158" y2="27.5918" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear" x1="34.4359" y1="10.6354" x2="54.6218" y2="61.6314" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear" x1="59.1061" y1="55.0907" x2="50.261" y2="34.5995" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint8_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(43.7157 9.32748) rotate(-167.041) scale(2.78984 1.48338)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="paint9_linear" x1="43.2927" y1="30.3309" x2="30.8979" y2="55.2387" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B37E53"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint10_linear" x1="55.9817" y1="24.9419" x2="21.7037" y2="103.206" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D2A374" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#B88653"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint11_linear" x1="19.4901" y1="49.7848" x2="59.3364" y2="49.7848" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint12_linear" x1="34.4718" y1="27.2084" x2="32.7897" y2="66.5178" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#473226" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#3D2A20"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint13_linear" x1="23.0685" y1="36.5274" x2="23.0685" y2="53.983" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint14_linear" x1="33.1136" y1="36.5263" x2="33.1136" y2="53.9819" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint15_linear" x1="33.3597" y1="36.0915" x2="33.3597" y2="59.222" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8D562E" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#8D562E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint16_linear" x1="23.0825" y1="44.2268" x2="23.0825" y2="28.1569" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint17_linear" x1="33.0802" y1="44.2273" x2="33.0802" y2="28.1573" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint18_linear" x1="26.359" y1="32.822" x2="69.3981" y2="57.2717" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8D562E" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#8D562E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint19_linear" x1="19.4899" y1="57.1687" x2="59.3363" y2="57.1687" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint20_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(39.912 38.6941) scale(29.5447 39.8115)">
|
||||
<stop offset="0.6147" stop-color="#B37E53" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#B37E53"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="paint21_linear" x1="22.9191" y1="36.0852" x2="24.1132" y2="55.8824" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8D562E" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#8D562E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint22_linear" x1="12.4524" y1="30.5772" x2="78.873" y2="72.753" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8D562E" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#8D562E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint23_linear" x1="40.5486" y1="54.9751" x2="40.5486" y2="27.3499" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B37E53"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint24_linear" x1="41.2618" y1="39.6175" x2="72.6621" y2="73.8509" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8D562E" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#8D562E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint25_linear" x1="29.908" y1="56.5277" x2="39.047" y2="28.6395" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint26_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(30.3808 60.1682) rotate(-138.967) scale(13.2034 6.02487)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint27_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(50.6751 45.9397) rotate(38.2129) scale(10.1808 3.74864)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 19 KiB |
@@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" ?>
|
||||
␍<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
|
||||
␍<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 8.66 8.66" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
|
||||
␍<defs>
|
||||
␍<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:none}
|
||||
.fil2 {fill:#2554B0;fill-rule:nonzero}
|
||||
.fil1 {fill:#479DFF;fill-rule:nonzero}
|
||||
]]>
|
||||
</style>
|
||||
␍</defs>
|
||||
␍<g id="Layer_x0020_1">
|
||||
␍<rect class="fil0" height="8.66" width="8.66"/>
|
||||
␍<path class="fil1" d="M2.88 4.08l0 -0.95c0,-0.1 0.04,-0.19 0.11,-0.26l0 0c0.07,-0.07 0.17,-0.11 0.27,-0.11l1.46 0c0.06,0 0.11,0.03 0.13,0.08l0.24 0.43 0.77 0c0.1,0 0.19,0.04 0.26,0.11l0 0c0.07,0.07 0.11,0.17 0.11,0.27l0 2.11 -0.28 0 0 -2.11c0,-0.03 -0.01,-0.05 -0.02,-0.07 -0.02,-0.02 -0.05,-0.03 -0.07,-0.03l-0.86 0 0 0c-0.05,0 -0.09,-0.02 -0.12,-0.07l-0.24 -0.44 -1.38 0c-0.03,0 -0.05,0.01 -0.07,0.02 -0.02,0.02 -0.03,0.05 -0.03,0.07l0 0.95 -0.28 0z"/>
|
||||
␍<path class="fil2" d="M6.09 5.9l-2.89 0c-0.08,0 -0.16,-0.03 -0.23,-0.08 -0.06,-0.05 -0.11,-0.11 -0.13,-0.2l-0.33 -1.2c-0.02,-0.06 -0.02,-0.12 -0.01,-0.17l0 0c0.01,-0.06 0.04,-0.11 0.07,-0.16 0.04,-0.05 0.09,-0.08 0.14,-0.11 0.05,-0.02 0.1,-0.04 0.16,-0.04l2.58 0c0.09,0 0.17,0.03 0.23,0.08 0.07,0.05 0.12,0.12 0.14,0.2l0.41 1.5c0.02,0.08 -0.03,0.16 -0.1,0.18 -0.01,0 -0.02,0 -0.04,0l0 0zm-2.89 -0.28l2.71 0 -0.36 -1.33c-0.01,-0.02 -0.02,-0.04 -0.04,-0.05 -0.01,-0.01 -0.03,-0.02 -0.06,-0.02l-2.58 0c-0.01,0 -0.03,0.01 -0.04,0.01 -0.01,0.01 -0.02,0.02 -0.03,0.03 -0.01,0.01 -0.02,0.03 -0.02,0.04 0,0.02 0,0.03 0,0.05l0.33 1.2c0,0.02 0.02,0.04 0.03,0.05 0.02,0.01 0.04,0.02 0.06,0.02z"/>
|
||||
␍</g>
|
||||
␍</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" ?>
|
||||
␍<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
|
||||
␍<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 11.32 11.32" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
|
||||
␍<defs>
|
||||
␍<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:none}
|
||||
.fil1 {fill:#2554B0;fill-rule:nonzero}
|
||||
.fil2 {fill:#479DFF;fill-rule:nonzero}
|
||||
]]>
|
||||
</style>
|
||||
␍</defs>
|
||||
␍<g id="Layer_x0020_1">
|
||||
␍<rect class="fil0" height="11.32" width="11.32"/>
|
||||
␍<path class="fil1" d="M5.66 8.08c-0.67,0 -1.27,-0.27 -1.71,-0.71 -0.44,-0.43 -0.71,-1.04 -0.71,-1.71 0,-0.67 0.27,-1.27 0.71,-1.71 0.44,-0.44 1.04,-0.71 1.71,-0.71 0.67,0 1.28,0.27 1.71,0.71 0.44,0.44 0.71,1.04 0.71,1.71 0,0.67 -0.27,1.28 -0.71,1.71 -0.43,0.44 -1.04,0.71 -1.71,0.71zm-1.45 -0.96c0.37,0.37 0.88,0.6 1.45,0.6 0.57,0 1.08,-0.23 1.46,-0.6 0.37,-0.38 0.6,-0.89 0.6,-1.46 0,-0.57 -0.23,-1.08 -0.6,-1.45 -0.38,-0.37 -0.89,-0.6 -1.46,-0.6 -0.57,0 -1.08,0.23 -1.45,0.6 -0.37,0.37 -0.6,0.88 -0.6,1.45 0,0.57 0.23,1.08 0.6,1.46z"/>
|
||||
␍<path class="fil1" d="M5.66 8.08c-0.45,0 -0.85,-0.28 -1.14,-0.74 -0.26,-0.43 -0.43,-1.03 -0.43,-1.68 0,-0.65 0.17,-1.24 0.43,-1.68 0.29,-0.46 0.69,-0.74 1.14,-0.74 0.45,0 0.86,0.28 1.14,0.74 0.27,0.44 0.43,1.03 0.43,1.68 0,0.65 -0.16,1.25 -0.43,1.68 -0.28,0.46 -0.69,0.74 -1.14,0.74zm-0.82 -0.93c0.21,0.35 0.51,0.57 0.82,0.57 0.32,0 0.61,-0.22 0.83,-0.57 0.23,-0.38 0.38,-0.9 0.38,-1.49 0,-0.58 -0.15,-1.11 -0.38,-1.48 -0.22,-0.36 -0.51,-0.57 -0.83,-0.57 -0.31,0 -0.61,0.21 -0.82,0.57 -0.24,0.37 -0.38,0.9 -0.38,1.48 0,0.59 0.14,1.11 0.38,1.49z"/>
|
||||
␍<polygon class="fil1" points="5.85,3.42 5.85,7.9 5.48,7.9 5.48,3.42 "/>
|
||||
␍<polygon class="fil1" points="7.9,5.85 3.42,5.85 3.42,5.48 7.9,5.48 "/>
|
||||
␍<path class="fil1" d="M7.51 4.43c-0.23,0.14 -0.51,0.25 -0.83,0.33 -0.31,0.07 -0.66,0.11 -1.02,0.11 -0.35,0 -0.7,-0.04 -1.01,-0.11 -0.32,-0.08 -0.61,-0.19 -0.84,-0.33l0.19 -0.31c0.2,0.12 0.45,0.21 0.73,0.28 0.29,0.07 0.6,0.11 0.93,0.11 0.33,0 0.65,-0.04 0.93,-0.11 0.29,-0.07 0.54,-0.16 0.73,-0.28l0.19 0.31z"/>
|
||||
␍<path class="fil2" d="M8.12 4.55c-0.1,-0.02 -0.16,-0.12 -0.14,-0.22 0.02,-0.1 0.12,-0.16 0.22,-0.14 0.13,0.03 0.25,0.08 0.33,0.14 0.11,0.06 0.18,0.15 0.21,0.25 0.12,0.33 -0.15,0.74 -0.68,1.14 -0.48,0.36 -1.18,0.73 -2,1.03 -0.82,0.3 -1.59,0.47 -2.19,0.51 -0.67,0.03 -1.14,-0.11 -1.26,-0.44 -0.03,-0.09 -0.04,-0.19 -0.01,-0.3l0 0c0.02,-0.1 0.07,-0.2 0.15,-0.3 0.05,-0.08 0.17,-0.1 0.25,-0.04 0.08,0.05 0.1,0.17 0.04,0.25 -0.04,0.06 -0.07,0.12 -0.08,0.18l0 0c-0.01,0.03 -0.01,0.06 0,0.09 0.05,0.16 0.39,0.22 0.89,0.19 0.56,-0.03 1.3,-0.19 2.09,-0.48 0.78,-0.29 1.45,-0.64 1.9,-0.98 0.4,-0.3 0.62,-0.57 0.56,-0.72 -0.01,-0.03 -0.03,-0.05 -0.07,-0.08 -0.05,-0.03 -0.12,-0.06 -0.21,-0.08z"/>
|
||||
␍</g>
|
||||
␍</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1,22 @@
|
||||
import robotArm from './robot-arm.svg';
|
||||
import thumbsUp from './thumbs-up.svg';
|
||||
import flexible from './crossed-fingers.svg';
|
||||
import rightFist from './left-fist.svg';
|
||||
import leftFist from './right-fist.svg';
|
||||
|
||||
import globe from './globe.svg';
|
||||
import team from './team.svg';
|
||||
import transcription from './printer.svg';
|
||||
import folder from './folder.svg';
|
||||
|
||||
export {
|
||||
flexible,
|
||||
robotArm,
|
||||
thumbsUp,
|
||||
leftFist,
|
||||
rightFist,
|
||||
globe,
|
||||
team,
|
||||
transcription,
|
||||
folder,
|
||||
};
|
||||
@@ -0,0 +1,97 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30.8833 36.4135C34.7826 40.861 34.3285 47.6365 29.8706 51.5463C25.4127 55.4561 18.6319 55.0229 14.7325 50.5754C10.8332 46.128 11.2873 39.3524 15.7452 35.4426C20.2083 31.5328 26.9839 31.966 30.8833 36.4135Z" fill="url(#paint0_linear)"/>
|
||||
<path d="M30.8833 36.4135C34.7826 40.861 34.3285 47.6365 29.8706 51.5463C25.4127 55.4561 18.6319 55.0229 14.7325 50.5754C10.8332 46.128 11.2873 39.3524 15.7452 35.4426C20.2083 31.5328 26.9839 31.966 30.8833 36.4135Z" fill="url(#paint1_linear)"/>
|
||||
<path d="M30.8833 36.4135C34.7826 40.861 34.3285 47.6365 29.8706 51.5463C25.4127 55.4561 18.6319 55.0229 14.7325 50.5754C10.8332 46.128 11.2873 39.3524 15.7452 35.4426C20.2083 31.5328 26.9839 31.966 30.8833 36.4135Z" fill="url(#paint2_linear)"/>
|
||||
<path d="M61.0811 40.4436C66.9746 38.2355 73.9694 17.0005 68.812 17.0005C63.6546 17.0005 38.7395 20.6806 32.9713 19.9446C27.2032 19.2086 15.2337 17.7939 10.139 22.8887C5.04422 27.9834 6.08822 45.5957 6.08822 49.5264C6.08822 53.4571 9.523 55.1745 13.3284 54.5585C17.1338 53.9426 28.1167 43.205 28.1167 39.3996C28.1167 39.3996 22.286 38.1102 20.4485 38.7262C18.6111 39.3422 19.3419 41.5502 19.3419 41.5502C19.3419 41.5502 15.8444 45.0477 15.2911 45.601C15.2911 45.601 18.1151 42.5316 18.1151 40.4436C18.1151 38.3556 18.3605 35.4115 16.0271 33.6941C16.0271 33.6941 19.8952 38.1155 23.6379 38.1155C28.3046 38.1155 27.506 37.3168 28.3046 38.1155L61.0811 40.4436Z" fill="url(#paint3_linear)"/>
|
||||
<path d="M68.8172 17C73.9746 17 74.7106 28.9069 73.4839 34.5549C72.2572 40.203 66.9798 38.235 61.0864 40.4483C55.193 42.6616 52.2228 50.0688 46.6008 54.3179C41.5687 58.1233 39.6269 55.4454 23.6484 63.1554C20.9809 64.4395 13.3388 63.4269 15.218 53.8012C23.1577 49.8966 29.1085 38.9136 28.3151 38.115C28.3151 38.115 36.474 38.115 40.0079 38.115C43.5419 38.115 59.1184 17 68.8172 17Z" fill="url(#paint4_linear)"/>
|
||||
<path d="M15.0875 58.3841V58.4259C16.0898 63.7242 21.4925 64.1888 23.6484 63.15C39.6268 55.44 41.5687 58.1179 46.6008 54.3125C52.2228 50.0582 55.193 42.651 61.0864 40.4429C66.9798 38.2348 72.2572 40.1976 73.4839 34.5495C73.6562 33.7665 73.7815 32.853 73.8702 31.8769C69.5532 32.8582 64.7717 31.1147 60.2251 31.1147C54.577 31.1147 47.8275 49.1551 36.6567 54.6831C25.4858 60.2059 15.0875 58.3841 15.0875 58.3841Z" fill="url(#paint5_linear)"/>
|
||||
<path d="M29.7819 53.9112C26.8743 53.7807 21.837 54.214 19.8221 50.6278C18.397 51.8859 16.8519 52.9978 15.2128 53.8016C13.3336 63.4274 20.9757 64.44 23.6431 63.1559C39.6216 55.4459 41.5634 58.1238 46.5956 54.3184C51.3928 50.6905 54.269 44.771 58.6695 41.7382L58.6799 41.7173C58.6799 41.7173 55.8037 43.2102 49.1795 49.2863C42.5553 55.3624 33.3419 54.0731 29.7819 53.9112Z" fill="url(#paint6_linear)"/>
|
||||
<path d="M73.5153 34.3618C71.2498 34.6646 67.9977 34.8734 64.1506 34.4349C56.665 33.5736 48.929 51.1285 44.6329 53.9526C40.3368 56.7766 26.4672 59.6006 22.0459 59.6006C18.7781 59.6006 16.3195 58.1808 14.9623 55.7065C14.3985 63.5522 21.1637 64.3561 23.6432 63.1607C39.6217 55.4507 41.5635 58.1286 46.5956 54.3232C52.2176 50.0689 55.1878 42.6617 61.0812 40.4536C66.9746 38.2455 72.252 40.2083 73.4787 34.5602C73.4944 34.4923 73.4996 34.4245 73.5153 34.3618Z" fill="url(#paint7_linear)"/>
|
||||
<path d="M6.08826 49.5313C6.08826 53.4568 9.52304 55.1794 13.3284 54.5634C15.5365 54.2084 20.1458 50.45 23.638 46.6081C17.1077 51.588 13.7513 51.4993 11.2404 51.2487C6.2031 50.7424 8.05099 43.1472 8.05099 39.6498C8.05099 36.1524 6.82429 29.168 10.139 22.8936C5.04948 27.9883 6.08826 45.6006 6.08826 49.5313Z" fill="url(#paint8_linear)"/>
|
||||
<path d="M69.2766 17.0679C69.1356 17.0261 68.9791 17 68.812 17C63.6546 17 38.7395 20.6801 32.9713 19.9441C27.2032 19.2081 15.2337 17.7987 10.139 22.8882C9.3664 23.6607 16.6431 18.2215 30.022 20.6801C40.1802 22.5437 55.1877 17.2453 71.7926 18.8844C71.1297 17.8978 70.3049 17.2245 69.2766 17.0679Z" fill="url(#paint9_linear)"/>
|
||||
<path d="M15.2129 53.8015C20.1301 55.2213 31.7447 42.2861 31.7447 34.9206C31.7447 33.3233 27.0936 35.474 23.0272 35.474C19.8535 35.474 17.6872 33.386 15.4791 32.5299C14.0227 31.9661 18.1204 39.7752 14.8214 44.9587C12.4567 48.6702 16.5857 45.6008 17.4157 44.4994C18.2457 43.3927 21.6178 42.8446 21.6178 42.8446C21.6178 42.8446 20.8192 39.7126 23.0272 40.0832C25.2353 40.4539 27.078 40.3077 27.078 40.3077C27.078 40.3077 19.8169 51.7761 15.2129 53.8015Z" fill="url(#paint10_linear)"/>
|
||||
<path d="M28.9519 37.2852C27.9706 35.3224 25.9139 38.0316 22.4843 36.9459C19.8587 36.1159 17.1129 33.2762 16.4291 34.3567C15.7453 35.4373 17.2904 38.538 17.2904 40.2293C17.2904 41.9153 15.3277 44.8333 14.8683 45.538C14.409 46.2427 16.5596 45.2353 17.661 44.0033C18.4597 43.1107 19.6499 42.145 20.1562 42.0772C20.6626 42.0093 20.365 39.3158 22.3434 39.3158C24.3166 39.3158 26.9579 39.1331 27.9967 39.7281C26.9631 42.2181 23.9251 47.0101 19.8639 50.6014C19.8482 50.6119 19.8378 50.6275 19.8221 50.638C19.5142 50.9094 19.2009 51.1704 18.8773 51.4262C18.8199 51.468 18.7677 51.5149 18.7155 51.5619C18.4284 51.7916 18.1308 52.0056 17.8333 52.2144C17.7498 52.2771 17.6663 52.3397 17.5775 52.4023C17.2904 52.6007 16.9981 52.7834 16.7058 52.9661C16.6066 53.0288 16.5126 53.0966 16.4135 53.154C16.0272 53.3837 15.6357 53.5925 15.2442 53.7909C15.2337 53.7961 15.2285 53.8013 15.2181 53.8013C14.8213 55.8215 14.8631 57.4397 15.1763 58.7603C15.6461 55.3099 20.2606 51.6559 23.6797 47.9653C27.1093 44.2487 29.9333 39.2479 28.9519 37.2852ZM20.4537 38.7259C18.6111 39.3419 19.3471 41.5499 19.3471 41.5499C19.3471 41.5499 15.8497 45.0473 15.2964 45.6007C15.2964 45.6007 18.1204 42.5313 18.1204 40.4433C18.1204 38.705 18.2718 36.3717 16.972 34.649C18.3449 35.9488 21.0227 38.1099 23.6432 38.1099C28.3099 38.1099 27.5112 37.3113 28.3099 38.1099C28.4508 38.2509 28.3725 38.7207 28.1167 39.3993C28.0593 39.3888 22.286 38.1151 20.4537 38.7259Z" fill="url(#paint11_linear)"/>
|
||||
<path d="M28.122 39.3993C26.2689 39.227 24.4627 38.7886 22.6149 38.7103C21.717 38.6842 20.72 38.6111 19.9944 39.1018C19.2636 39.6081 19.201 40.6678 19.4411 41.5082V41.5134C19.4515 41.5499 19.4411 41.5917 19.415 41.6178L15.3799 45.6842C15.3329 45.7312 15.2546 45.7312 15.2024 45.6842C15.1554 45.6372 15.1554 45.5589 15.1972 45.5119C15.9228 44.6872 16.5857 43.7998 17.139 42.8549C17.7028 41.8997 18.0682 40.8922 17.969 39.7699C17.9743 38.6685 17.9377 37.5619 17.6193 36.5231C17.3217 35.4791 16.7006 34.5603 15.9071 33.8243L16.1577 33.579C17.1338 34.623 18.2248 35.5887 19.415 36.3821C20.5999 37.1651 21.931 37.8333 23.3404 37.9168C24.7707 37.9638 26.2167 37.9064 27.6417 37.6036C27.8505 37.5305 28.1637 37.708 28.2577 37.8385C28.3308 37.922 28.3778 37.9272 28.4665 38.0734C28.5552 38.2248 28.5291 38.324 28.5344 38.4336C28.4978 38.8407 28.3725 39.1853 28.242 39.535C27.9758 40.224 27.6417 40.8766 27.292 41.5186C25.8721 44.0712 24.1287 46.4307 22.1451 48.5709C20.1614 50.6902 17.8959 52.6529 15.2076 53.8065C17.7289 52.3554 19.9631 50.4971 21.931 48.3725C23.8885 46.2427 25.6164 43.8937 27.0101 41.3672C27.3546 40.7304 27.6783 40.0883 27.9341 39.4202C28.0593 39.0913 28.1742 38.7416 28.2003 38.4232C28.2055 38.2509 28.1951 38.2457 28.028 38.0891C27.8766 37.9586 27.8453 37.9116 27.6835 37.9429C26.2689 38.2509 24.7812 38.3188 23.3196 38.2718C21.811 38.183 20.4329 37.4888 19.2166 36.6953C17.9847 35.8862 16.8885 34.9048 15.8967 33.8191C15.834 33.746 15.834 33.6364 15.9071 33.5738C15.975 33.5111 16.0794 33.5163 16.1472 33.579C16.972 34.3567 17.6245 35.3433 17.9325 36.4448C18.2561 37.5358 18.2822 38.6789 18.2718 39.7856C18.2718 40.3232 18.277 40.9288 18.0839 41.4716C17.9116 42.0145 17.6663 42.5261 17.3792 43.0115C16.805 43.9773 16.1316 44.8647 15.3851 45.6999L15.2076 45.5276L19.274 41.4925L19.2479 41.5969L19.2427 41.5865C18.9713 40.7147 18.966 39.5298 19.8378 38.9034C20.6991 38.3396 21.7118 38.4492 22.6253 38.4701C23.5597 38.5223 24.4836 38.6424 25.4023 38.7886C26.3211 38.9191 27.2398 39.0861 28.122 39.3993Z" fill="#804B24"/>
|
||||
<path d="M19.2323 41.0073L19.4307 41.5241L19.3837 41.4667C20.0466 41.6755 20.673 41.9835 21.2316 42.4063C21.7745 42.8187 22.3121 43.3772 22.4374 44.0767C22.0772 43.4868 21.5657 43.0744 21.0228 42.6882C20.4799 42.3071 19.9057 41.9574 19.321 41.6233L19.2949 41.6076C19.2793 41.5972 19.2688 41.5815 19.2688 41.5659L19.2323 41.0073Z" fill="#804B24"/>
|
||||
<path d="M9.40302 52.0475C5.2792 50.7269 6.76169 36.2726 7.06967 30.3218L6.97571 30.3897C5.5924 37.5359 6.0883 46.8118 6.0883 49.5315C6.0883 53.4569 9.52308 55.1795 13.3285 54.5636C14.7483 54.3339 17.1704 52.6843 19.6447 50.518C17.2487 51.9379 13.0727 53.222 9.40302 52.0475Z" fill="url(#paint12_linear)"/>
|
||||
<path d="M72.941 36.1055C69.3862 37.28 65.3407 36.2725 62.6785 36.2725C59.3638 36.2725 51.2623 49.4061 47.2115 52.9661C43.1608 56.5262 31.8699 58.4889 26.4672 60.697C21.2106 62.8476 16.7945 61.7253 15.0875 58.3845C16.0689 63.7194 21.4821 64.1944 23.6431 63.1556C39.6216 55.4456 41.5635 58.1235 46.5956 54.3181C52.2175 50.0638 55.1877 42.6566 61.0811 40.4485C66.3429 38.4701 71.1088 39.8117 72.941 36.1055Z" fill="url(#paint13_linear)"/>
|
||||
<path d="M12.9265 37.0975C13.4328 32.8067 11.9033 26.4695 12.8638 21.0303C11.8355 21.5262 10.9011 22.1265 10.139 22.8938C5.04422 27.9886 6.08822 45.6009 6.08822 49.5316C6.08822 53.457 9.523 55.1796 13.3284 54.5637C14.3463 54.4019 15.8862 53.4936 17.5879 52.2095C7.56549 48.6703 12.0704 44.3429 12.9265 37.0975Z" fill="url(#paint14_linear)"/>
|
||||
<path opacity="0.16" d="M48.1511 29.2354C51.2466 31.313 49.1951 37.4099 45.5985 43.2198C42.6596 47.97 36.4896 51.3683 33.5194 49.2646C30.5492 47.1609 28.2942 44.7493 35.1428 35.3637C39.1831 29.8253 45.1287 27.2048 48.1511 29.2354Z" fill="url(#paint15_radial)"/>
|
||||
<path opacity="0.16" d="M69.1775 22.0478C69.689 24.2768 55.9082 26.5736 40.5404 28.1344C27.9758 29.4081 13.4067 28.7712 13.1144 26.5788C12.8221 24.3812 14.0697 22.3036 40.3368 20.1791C55.8142 18.9263 68.6816 19.8711 69.1775 22.0478Z" fill="url(#paint16_radial)"/>
|
||||
<path opacity="0.16" d="M22.8393 43.9878C23.7476 45.1049 22.1294 47.2712 19.9526 49.1713C18.1726 50.7269 15.3329 51.4316 14.4768 50.3197C13.6207 49.2078 13.0779 48.0438 16.9981 45.0736C19.3001 43.3249 21.9519 42.8968 22.8393 43.9878Z" fill="url(#paint17_radial)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="14.7329" y1="50.5825" x2="30.8847" y2="36.4204" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#FFCB4B"/>
|
||||
<stop offset="1" stop-color="#FFD748"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="22.2663" y1="42.1538" x2="27.1148" y2="54.1217" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear" x1="24.961" y1="28.7801" x2="23.2118" y2="40.7481" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear" x1="9.4884" y1="-7.12923" x2="33.7925" y2="28.2222" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear" x1="46.855" y1="53.2493" x2="44.4" y2="41.4655" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear" x1="37.0232" y1="31.8806" x2="66.4827" y2="85.8284" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear" x1="29.23" y1="56.0975" x2="17.0779" y2="69.1702" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D2A374" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#B88653"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear" x1="43.5933" y1="42.7063" x2="54.7634" y2="100.766" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear" x1="18.7839" y1="10.4893" x2="5.03616" y2="119.858" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D2A374" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#B88653"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear" x1="41.5517" y1="27.2265" x2="37.5011" y2="-14.5078" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B37E53"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint10_linear" x1="37.2206" y1="24.7227" x2="-29.3089" y2="85.6058" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint11_linear" x1="48.3872" y1="27.9684" x2="2.18355" y2="54.278" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint12_linear" x1="19.9767" y1="-30.4889" x2="6.96542" y2="106.007" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D2A374" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#B88653"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint13_linear" x1="36.1977" y1="7.86253" x2="52.8501" y2="91.7652" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint14_linear" x1="19.4915" y1="37.3747" x2="-21.3836" y2="40.1979" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D2A374" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#B88653"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint15_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(40.5737 39.0639) rotate(-53.8439) scale(12.7303 6.65798)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint16_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(41.1238 24.1246) rotate(-4.61835) scale(28.8709 4.04572)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint17_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.5751 47.0505) rotate(-37.1319) scale(5.38479 2.57216)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" ?>
|
||||
␍<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
|
||||
␍<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 10.51 10.51" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
|
||||
␍<defs>
|
||||
␍<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:none}
|
||||
.fil1 {fill:#2554B0;fill-rule:nonzero}
|
||||
.fil2 {fill:#479DFF;fill-rule:nonzero}
|
||||
]]>
|
||||
</style>
|
||||
␍</defs>
|
||||
␍<g id="Layer_x0020_1">
|
||||
␍<rect class="fil0" height="10.51" width="10.51"/>
|
||||
␍<path class="fil1" d="M3.82 6.75l-0.84 0c-0.13,0 -0.24,-0.06 -0.33,-0.14l0 0c-0.08,-0.08 -0.13,-0.2 -0.13,-0.32l0 -1.91c0,-0.13 0.05,-0.24 0.13,-0.32l0 0c0.09,-0.09 0.2,-0.14 0.33,-0.14l4.56 0c0.12,0 0.24,0.05 0.32,0.14l0 0c0.08,0.08 0.14,0.2 0.14,0.32l0 1.91c0,0.12 -0.06,0.24 -0.14,0.32l0 0c-0.08,0.08 -0.2,0.14 -0.32,0.14l-0.84 0 0 -0.34 0.84 0c0.03,0 0.06,-0.02 0.08,-0.04 0.02,-0.02 0.04,-0.05 0.04,-0.08l0 -1.91c0,-0.03 -0.02,-0.06 -0.04,-0.08l0 0c-0.02,-0.02 -0.05,-0.04 -0.08,-0.04l-4.56 0c-0.04,0 -0.07,0.02 -0.09,0.04l0 0c-0.02,0.02 -0.03,0.05 -0.03,0.08l0 1.91c0,0.03 0.01,0.06 0.03,0.08 0.02,0.02 0.05,0.04 0.09,0.04l0.84 0 0 0.34z"/>
|
||||
␍<path class="fil2" d="M6.87 5.18l0 2.2c0,0.12 -0.06,0.24 -0.14,0.32l0 0c-0.08,0.08 -0.2,0.13 -0.32,0.13l-2.3 0c-0.13,0 -0.24,-0.05 -0.33,-0.13l-0.01 -0.01c-0.07,-0.08 -0.12,-0.19 -0.12,-0.31l0 -2.2 0.34 0 0 2.2c0,0.03 0.01,0.05 0.03,0.07l0 0.01c0.03,0.02 0.06,0.03 0.09,0.03l2.3 0c0.03,0 0.06,-0.01 0.08,-0.03l0 0c0.02,-0.02 0.04,-0.05 0.04,-0.08l0 -2.2 0.34 0z"/>
|
||||
␍<path class="fil1" d="M4.11 2.68l2.3 0c0.12,0 0.24,0.05 0.32,0.13l0.01 0.02c0.08,0.08 0.13,0.19 0.13,0.31l0 0.95c0,0.1 -0.08,0.17 -0.17,0.17l-2.88 0c-0.1,0 -0.17,-0.07 -0.17,-0.17l0 -0.95c0,-0.13 0.05,-0.24 0.13,-0.33l0 0c0.09,-0.08 0.2,-0.13 0.33,-0.13zm2.3 0.34l-2.3 0c-0.03,0 -0.06,0.01 -0.09,0.04l0 0c-0.02,0.02 -0.03,0.05 -0.03,0.08l0 0.78 2.54 0 0 -0.78c0,-0.03 -0.02,-0.06 -0.03,-0.08l-0.01 0c-0.02,-0.03 -0.05,-0.04 -0.08,-0.04z"/>
|
||||
␍<path class="fil1" d="M3.43 5.35c-0.09,0 -0.17,-0.08 -0.17,-0.17 0,-0.09 0.08,-0.17 0.17,-0.17l3.65 0c0.1,0 0.18,0.08 0.18,0.17 0,0.09 -0.08,0.17 -0.18,0.17l-3.65 0z"/>
|
||||
␍<path class="fil2" d="M4.54 6.29c-0.09,0 -0.17,-0.08 -0.17,-0.17 0,-0.09 0.08,-0.17 0.17,-0.17l1.43 0c0.09,0 0.17,0.08 0.17,0.17 0,0.09 -0.08,0.17 -0.17,0.17l-1.43 0z"/>
|
||||
␍<path class="fil2" d="M4.54 6.98c-0.09,0 -0.17,-0.08 -0.17,-0.17 0,-0.09 0.08,-0.17 0.17,-0.17l1.06 0c0.09,0 0.17,0.08 0.17,0.17 0,0.09 -0.08,0.17 -0.17,0.17l-1.06 0z"/>
|
||||
␍</g>
|
||||
␍</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -0,0 +1,97 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M49.1167 36.4135C45.2174 40.861 45.6715 47.6365 50.1294 51.5463C54.5873 55.4561 61.3681 55.0229 65.2675 50.5754C69.1668 46.128 68.7127 39.3524 64.2548 35.4426C59.7917 31.5328 53.0161 31.966 49.1167 36.4135Z" fill="url(#paint0_linear)"/>
|
||||
<path d="M49.1167 36.4135C45.2174 40.861 45.6715 47.6365 50.1294 51.5463C54.5873 55.4561 61.3681 55.0229 65.2675 50.5754C69.1668 46.128 68.7127 39.3524 64.2548 35.4426C59.7917 31.5328 53.0161 31.966 49.1167 36.4135Z" fill="url(#paint1_linear)"/>
|
||||
<path d="M49.1167 36.4135C45.2174 40.861 45.6715 47.6365 50.1294 51.5463C54.5873 55.4561 61.3681 55.0229 65.2675 50.5754C69.1668 46.128 68.7127 39.3524 64.2548 35.4426C59.7917 31.5328 53.0161 31.966 49.1167 36.4135Z" fill="url(#paint2_linear)"/>
|
||||
<path d="M18.9189 40.4436C13.0254 38.2355 6.03062 17.0005 11.188 17.0005C16.3454 17.0005 41.2605 20.6806 47.0287 19.9446C52.7968 19.2086 64.7663 17.7939 69.861 22.8887C74.9558 27.9834 73.9118 45.5957 73.9118 49.5264C73.9118 53.4571 70.477 55.1745 66.6716 54.5585C62.8662 53.9426 51.8833 43.205 51.8833 39.3996C51.8833 39.3996 57.714 38.1102 59.5515 38.7262C61.3889 39.3422 60.6581 41.5502 60.6581 41.5502C60.6581 41.5502 64.1556 45.0477 64.7089 45.601C64.7089 45.601 61.8849 42.5316 61.8849 40.4436C61.8849 38.3556 61.6395 35.4115 63.9729 33.6941C63.9729 33.6941 60.1048 38.1155 56.3621 38.1155C51.6954 38.1155 52.494 37.3168 51.6954 38.1155L18.9189 40.4436Z" fill="url(#paint3_linear)"/>
|
||||
<path d="M11.1828 17C6.0254 17 5.28937 28.9069 6.51608 34.5549C7.74278 40.203 13.0202 38.235 18.9136 40.4483C24.807 42.6616 27.7772 50.0688 33.3992 54.3179C38.4313 58.1233 40.3731 55.4454 56.3516 63.1554C59.0191 64.4395 66.6612 63.4269 64.782 53.8012C56.8423 49.8966 50.8915 38.9136 51.6849 38.115C51.6849 38.115 43.526 38.115 39.9921 38.115C36.4581 38.115 20.8816 17 11.1828 17Z" fill="url(#paint4_linear)"/>
|
||||
<path d="M64.9125 58.3841V58.4259C63.9102 63.7242 58.5075 64.1888 56.3516 63.15C40.3732 55.44 38.4313 58.1179 33.3992 54.3125C27.7772 50.0582 24.807 42.651 18.9136 40.4429C13.0202 38.2348 7.74279 40.1976 6.51608 34.5495C6.34382 33.7665 6.21855 32.853 6.12981 31.8769C10.4468 32.8582 15.2283 31.1147 19.7749 31.1147C25.423 31.1147 32.1725 49.1551 43.3433 54.6831C54.5142 60.2059 64.9125 58.3841 64.9125 58.3841Z" fill="url(#paint5_linear)"/>
|
||||
<path d="M50.2181 53.9112C53.1257 53.7807 58.163 54.214 60.1779 50.6278C61.603 51.8859 63.1481 52.9978 64.7872 53.8016C66.6664 63.4274 59.0243 64.44 56.3569 63.1559C40.3784 55.4459 38.4366 58.1238 33.4044 54.3184C28.6072 50.6905 25.731 44.771 21.3305 41.7382L21.3201 41.7173C21.3201 41.7173 24.1963 43.2102 30.8205 49.2863C37.4447 55.3624 46.6581 54.0731 50.2181 53.9112Z" fill="url(#paint6_linear)"/>
|
||||
<path d="M6.48473 34.3618C8.75022 34.6646 12.0023 34.8734 15.8494 34.4349C23.335 33.5736 31.071 51.1285 35.3671 53.9526C39.6632 56.7766 53.5328 59.6006 57.9541 59.6006C61.2219 59.6006 63.6805 58.1808 65.0377 55.7065C65.6015 63.5522 58.8363 64.3561 56.3568 63.1607C40.3783 55.4507 38.4365 58.1286 33.4044 54.3232C27.7824 50.0689 24.8122 42.6617 18.9188 40.4536C13.0254 38.2455 7.74797 40.2083 6.52127 34.5602C6.50561 34.4923 6.50039 34.4245 6.48473 34.3618Z" fill="url(#paint7_linear)"/>
|
||||
<path d="M73.9117 49.5313C73.9117 53.4568 70.477 55.1794 66.6716 54.5634C64.4635 54.2084 59.8542 50.45 56.362 46.6081C62.8923 51.588 66.2487 51.4993 68.7596 51.2487C73.7969 50.7424 71.949 43.1472 71.949 39.6498C71.949 36.1524 73.1757 29.168 69.861 22.8936C74.9505 27.9883 73.9117 45.6006 73.9117 49.5313Z" fill="url(#paint8_linear)"/>
|
||||
<path d="M10.7234 17.0679C10.8644 17.0261 11.0209 17 11.188 17C16.3454 17 41.2605 20.6801 47.0287 19.9441C52.7968 19.2081 64.7663 17.7987 69.861 22.8882C70.6336 23.6607 63.3569 18.2215 49.978 20.6801C39.8198 22.5437 24.8123 17.2453 8.20736 18.8844C8.8703 17.8978 9.69507 17.2245 10.7234 17.0679Z" fill="url(#paint9_linear)"/>
|
||||
<path d="M64.7871 53.8015C59.8699 55.2213 48.2553 42.2861 48.2553 34.9206C48.2553 33.3233 52.9064 35.474 56.9728 35.474C60.1465 35.474 62.3128 33.386 64.5209 32.5299C65.9773 31.9661 61.8796 39.7752 65.1786 44.9587C67.5433 48.6702 63.4143 45.6008 62.5843 44.4994C61.7543 43.3927 58.3822 42.8446 58.3822 42.8446C58.3822 42.8446 59.1808 39.7126 56.9728 40.0832C54.7647 40.4539 52.922 40.3077 52.922 40.3077C52.922 40.3077 60.1831 51.7761 64.7871 53.8015Z" fill="url(#paint10_linear)"/>
|
||||
<path d="M51.0481 37.2852C52.0294 35.3224 54.0861 38.0316 57.5157 36.9459C60.1413 36.1159 62.8871 33.2762 63.5709 34.3567C64.2547 35.4373 62.7096 38.538 62.7096 40.2293C62.7096 41.9153 64.6723 44.8333 65.1317 45.538C65.591 46.2427 63.4404 45.2353 62.339 44.0033C61.5403 43.1107 60.3501 42.145 59.8438 42.0772C59.3374 42.0093 59.635 39.3158 57.6566 39.3158C55.6834 39.3158 53.0421 39.1331 52.0033 39.7281C53.0369 42.2181 56.0749 47.0101 60.1361 50.6014C60.1518 50.6119 60.1622 50.6275 60.1779 50.638C60.4858 50.9094 60.7991 51.1704 61.1227 51.4262C61.1801 51.468 61.2323 51.5149 61.2845 51.5619C61.5716 51.7916 61.8692 52.0056 62.1667 52.2144C62.2502 52.2771 62.3337 52.3397 62.4225 52.4023C62.7096 52.6007 63.0019 52.7834 63.2942 52.9661C63.3934 53.0288 63.4874 53.0966 63.5865 53.154C63.9728 53.3837 64.3643 53.5925 64.7558 53.7909C64.7663 53.7961 64.7715 53.8013 64.7819 53.8013C65.1787 55.8215 65.1369 57.4397 64.8237 58.7603C64.3539 55.3099 59.7394 51.6559 56.3203 47.9653C52.8907 44.2487 50.0667 39.2479 51.0481 37.2852ZM59.5463 38.7259C61.3889 39.3419 60.6529 41.5499 60.6529 41.5499C60.6529 41.5499 64.1503 45.0473 64.7036 45.6007C64.7036 45.6007 61.8796 42.5313 61.8796 40.4433C61.8796 38.705 61.7282 36.3717 63.028 34.649C61.6551 35.9488 58.9773 38.1099 56.3568 38.1099C51.6901 38.1099 52.4888 37.3113 51.6901 38.1099C51.5492 38.2509 51.6275 38.7207 51.8833 39.3993C51.9407 39.3888 57.714 38.1151 59.5463 38.7259Z" fill="url(#paint11_linear)"/>
|
||||
<path d="M51.878 39.3993C53.7311 39.227 55.5373 38.7886 57.3851 38.7103C58.283 38.6842 59.28 38.6111 60.0056 39.1018C60.7364 39.6081 60.799 40.6678 60.5589 41.5082V41.5134C60.5485 41.5499 60.5589 41.5917 60.585 41.6178L64.6201 45.6842C64.6671 45.7312 64.7454 45.7312 64.7976 45.6842C64.8446 45.6372 64.8446 45.5589 64.8028 45.5119C64.0772 44.6872 63.4143 43.7998 62.861 42.8549C62.2972 41.8997 61.9318 40.8922 62.031 39.7699C62.0257 38.6685 62.0623 37.5619 62.3807 36.5231C62.6783 35.4791 63.2994 34.5603 64.0929 33.8243L63.8423 33.579C62.8662 34.623 61.7752 35.5887 60.585 36.3821C59.4001 37.1651 58.069 37.8333 56.6596 37.9168C55.2293 37.9638 53.7833 37.9064 52.3583 37.6036C52.1495 37.5305 51.8363 37.708 51.7423 37.8385C51.6692 37.922 51.6222 37.9272 51.5335 38.0734C51.4448 38.2248 51.4709 38.324 51.4656 38.4336C51.5022 38.8407 51.6275 39.1853 51.758 39.535C52.0242 40.224 52.3583 40.8766 52.708 41.5186C54.1279 44.0712 55.8713 46.4307 57.8549 48.5709C59.8386 50.6902 62.1041 52.6529 64.7924 53.8065C62.2711 52.3554 60.0369 50.4971 58.069 48.3725C56.1115 46.2427 54.3836 43.8937 52.9899 41.3672C52.6454 40.7304 52.3217 40.0883 52.0659 39.4202C51.9407 39.0913 51.8258 38.7416 51.7997 38.4232C51.7945 38.2509 51.8049 38.2457 51.972 38.0891C52.1234 37.9586 52.1547 37.9116 52.3165 37.9429C53.7311 38.2509 55.2188 38.3188 56.6804 38.2718C58.189 38.183 59.5671 37.4888 60.7834 36.6953C62.0153 35.8862 63.1115 34.9048 64.1033 33.8191C64.166 33.746 64.166 33.6364 64.0929 33.5738C64.025 33.5111 63.9206 33.5163 63.8528 33.579C63.028 34.3567 62.3755 35.3433 62.0675 36.4448C61.7439 37.5358 61.7178 38.6789 61.7282 39.7856C61.7282 40.3232 61.723 40.9288 61.9161 41.4716C62.0884 42.0145 62.3337 42.5261 62.6208 43.0115C63.195 43.9773 63.8684 44.8647 64.6149 45.6999L64.7924 45.5276L60.726 41.4925L60.7521 41.5969L60.7573 41.5865C61.0287 40.7147 61.034 39.5298 60.1622 38.9034C59.3009 38.3396 58.2882 38.4492 57.3747 38.4701C56.4403 38.5223 55.5164 38.6424 54.5977 38.7886C53.6789 38.9191 52.7602 39.0861 51.878 39.3993Z" fill="#804B24"/>
|
||||
<path d="M60.7677 41.0073L60.5693 41.5241L60.6163 41.4667C59.9534 41.6755 59.327 41.9835 58.7684 42.4063C58.2255 42.8187 57.6879 43.3772 57.5626 44.0767C57.9228 43.4868 58.4343 43.0744 58.9772 42.6882C59.5201 42.3071 60.0943 41.9574 60.679 41.6233L60.7051 41.6076C60.7207 41.5972 60.7312 41.5815 60.7312 41.5659L60.7677 41.0073Z" fill="#804B24"/>
|
||||
<path d="M70.597 52.0475C74.7208 50.7269 73.2383 36.2726 72.9303 30.3218L73.0243 30.3897C74.4076 37.5359 73.9117 46.8118 73.9117 49.5315C73.9117 53.4569 70.4769 55.1795 66.6715 54.5636C65.2517 54.3339 62.8296 52.6843 60.3553 50.518C62.7513 51.9379 66.9273 53.222 70.597 52.0475Z" fill="url(#paint12_linear)"/>
|
||||
<path d="M7.05898 36.1055C10.6138 37.28 14.6593 36.2725 17.3215 36.2725C20.6362 36.2725 28.7377 49.4061 32.7885 52.9661C36.8392 56.5262 48.1301 58.4889 53.5328 60.697C58.7894 62.8476 63.2055 61.7253 64.9125 58.3845C63.9311 63.7194 58.5179 64.1944 56.3569 63.1556C40.3784 55.4456 38.4365 58.1235 33.4044 54.3181C27.7825 50.0638 24.8123 42.6566 18.9189 40.4485C13.6571 38.4701 8.8912 39.8117 7.05898 36.1055Z" fill="url(#paint13_linear)"/>
|
||||
<path d="M67.0735 37.0975C66.5672 32.8067 68.0967 26.4695 67.1362 21.0303C68.1645 21.5262 69.0989 22.1265 69.861 22.8938C74.9558 27.9886 73.9118 45.6009 73.9118 49.5316C73.9118 53.457 70.477 55.1796 66.6716 54.5637C65.6537 54.4019 64.1138 53.4936 62.4121 52.2095C72.4345 48.6703 67.9296 44.3429 67.0735 37.0975Z" fill="url(#paint14_linear)"/>
|
||||
<path opacity="0.16" d="M31.8489 29.2354C28.7534 31.313 30.8049 37.4099 34.4015 43.2198C37.3404 47.97 43.5104 51.3683 46.4806 49.2646C49.4508 47.1609 51.7058 44.7493 44.8572 35.3637C40.8169 29.8253 34.8713 27.2048 31.8489 29.2354Z" fill="url(#paint15_radial)"/>
|
||||
<path opacity="0.16" d="M10.8225 22.0478C10.311 24.2768 24.0918 26.5736 39.4596 28.1344C52.0242 29.4081 66.5933 28.7712 66.8856 26.5788C67.1779 24.3812 65.9303 22.3036 39.6632 20.1791C24.1858 18.9263 11.3184 19.8711 10.8225 22.0478Z" fill="url(#paint16_radial)"/>
|
||||
<path opacity="0.16" d="M57.1607 43.9878C56.2524 45.1049 57.8706 47.2712 60.0474 49.1713C61.8274 50.7269 64.6671 51.4316 65.5232 50.3197C66.3793 49.2078 66.9221 48.0438 63.0019 45.0736C60.6999 43.3249 58.0481 42.8968 57.1607 43.9878Z" fill="url(#paint17_radial)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="65.2671" y1="50.5825" x2="49.1153" y2="36.4204" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#FFCB4B"/>
|
||||
<stop offset="1" stop-color="#FFD748"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="57.7337" y1="42.1538" x2="52.8852" y2="54.1217" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear" x1="55.039" y1="28.7801" x2="56.7882" y2="40.7481" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear" x1="70.5116" y1="-7.12923" x2="46.2075" y2="28.2222" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear" x1="33.145" y1="53.2493" x2="35.6" y2="41.4655" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear" x1="42.9768" y1="31.8806" x2="13.5173" y2="85.8284" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear" x1="50.77" y1="56.0975" x2="62.9221" y2="69.1702" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D2A374" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#B88653"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear" x1="36.4067" y1="42.7063" x2="25.2366" y2="100.766" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear" x1="61.2161" y1="10.4893" x2="74.9638" y2="119.858" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D2A374" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#B88653"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear" x1="38.4483" y1="27.2265" x2="42.4989" y2="-14.5078" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B37E53"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint10_linear" x1="42.7794" y1="24.7227" x2="109.309" y2="85.6058" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint11_linear" x1="31.6128" y1="27.9684" x2="77.8164" y2="54.278" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint12_linear" x1="60.0233" y1="-30.4889" x2="73.0346" y2="106.007" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D2A374" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#B88653"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint13_linear" x1="43.8023" y1="7.86253" x2="27.1499" y2="91.7652" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint14_linear" x1="60.5085" y1="37.3747" x2="101.384" y2="40.1979" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D2A374" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#B88653"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint15_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(39.4263 39.0639) rotate(-126.156) scale(12.7303 6.65798)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint16_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(38.8762 24.1246) rotate(-175.382) scale(28.8709 4.04572)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint17_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(61.4249 47.0505) rotate(-142.868) scale(5.38479 2.57216)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,144 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
␍<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--noto" preserveAspectRatio="xMidYMid meet">
|
||||
␍<path d="M69.19 71.88c-19.34-.75-25.48 11.45-32.74 16.57c-5.57 3.93-14.76 3.28-14.76 3.28c-6.98 1.2-11.57 5.04-11.57 11.94c0 6.55 3.53 12.91 12.93 12.91l63.22-2.2s2.58-41.74-17.08-42.5z" fill="#d3cac3">
|
||||
␍</path>
|
||||
␍<path d="M9.96 84.32l19.91-50.01l13.81 5.3s-4.6 24.51-5.13 30.6c-.53 6.09 5.13 20.37 3.95 32.98c-1.32 14.13-6.89 17.83-17.52 19.04c-7.44.85-15.83-2.52-18.16-6.79c-3.44-6.3-4.43-14.18 3.14-31.12z" fill="#90a4ae">
|
||||
␍</path>
|
||||
␍<path d="M28.43 37.83c.77-.05 1.92-.37 3.97 2.11c1.52 1.84 4.92 4.98 8.9 5.19c.69-3.36 1.19-5.71 1.19-5.71l-12.63-5.1l-1.43 3.51z" fill="#466b7d">
|
||||
␍</path>
|
||||
␍<linearGradient id="IconifyId17ecdb2904d178eab13600" gradientUnits="userSpaceOnUse" x1="42.234" y1="41.429" x2="-3.656" y2="163.116">
|
||||
␍<stop offset=".308" stop-color="#d3cac3">
|
||||
␍</stop>
|
||||
␍<stop offset=".744" stop-color="#6d94a5">
|
||||
␍</stop>
|
||||
␍</linearGradient>
|
||||
␍<path d="M14.13 98.73s15.13-45.62 21.08-62.25l-5.35-2.16l-19.9 50c-7.57 16.94-6.58 24.81-3.14 31.12c2.33 4.28 9.16 7.86 16.6 7.01c1.84-.21 3.48-.57 4.97-1.07c-5.3-8.63-14.26-22.65-14.26-22.65z" fill="url(#IconifyId17ecdb2904d178eab13600)">
|
||||
␍</path>
|
||||
␍<path d="M28.43 37.83c.77-.05 1.92-.37 3.97 2.11c1.52 1.84 6.11 5.86 10.09 6.07c.69-3.36 1.18-6.39 1.18-6.39l-13.81-5.3l-1.43 3.51z" fill="#466b7d">
|
||||
␍</path>
|
||||
␍<path d="M39.09 76.07s.06 5.87-4.94 10.17c-7.74 6.66-23.47 2.86-26.26 21.28c-.74 4.87-2.74 4.06-2.74 4.06s2.6 11.75 17.94 10.9c11.31-1.01 17.63-9.15 19.07-18.43c1.51-9.65-3.07-27.98-3.07-27.98z" fill="#466b7d">
|
||||
␍</path>
|
||||
␍<linearGradient id="IconifyId17ecdb2904d178eab13601" gradientUnits="userSpaceOnUse" x1="53.649" y1="100.495" x2="53.649" y2="122.038">
|
||||
␍<stop offset=".292" stop-color="#d3cac3">
|
||||
␍</stop>
|
||||
␍<stop offset="1" stop-color="#6d94a5">
|
||||
␍</stop>
|
||||
␍</linearGradient>
|
||||
␍<path d="M81.58 71.13c-25.26 0-32.72 7.64-38.7 13.78c-2.92 3-5.23 5.37-9.31 6.43c-3.6.94-9.18 2.09-10.8 2.42c-.02 0-.04.01-.06.01c-7.86 1.36-12.54 6.85-12.54 14.68c0 3.93 1.31 7.35 3.79 9.87c1.95 1.99 5.64 4.35 12.1 4.35h.1l68.95-2.27s6.21-33.08-3.09-44.41c-2.62-3.18-6.23-4.86-10.44-4.86z" fill="url(#IconifyId17ecdb2904d178eab13601)">
|
||||
␍</path>
|
||||
␍<path d="M76.08 80.35C58.7 77.27 51.93 86.21 42.5 93.56c-4.28 3.34-15.86 4.56-15.86 4.56c-6.98 1.2-11.57 5.04-11.57 11.94c0 7.18 3.53 12.56 12.93 12.56l63.22-2.2c0 .01 4.23-36.64-15.14-40.07z" fill="#90a4ae">
|
||||
␍</path>
|
||||
␍<path d="M70.82 88.15c.03-4.01-.08-7.17-.16-9.47v-.12c-.1-2.86-.46-5.05-.93-6.75c-.2.03-.41.05-.61.08c-4.25-.27-8.48.6-8.48.6s4.87 1.23 5.41 9.04c.18 2.59.25 3.26.19 7.5c-.47 34.51 27.89 31.43 27.89 31.43l.31-1.71c-16.92-3.08-23.76-11.94-23.62-30.6z" fill="#466b7d">
|
||||
␍</path>
|
||||
␍<circle cx="28.27" cy="110.96" r="7.42" fill="#466b7d">
|
||||
␍</circle>
|
||||
␍<circle cx="28.45" cy="109.74" r="6.55" fill="#a38e7a">
|
||||
␍</circle>
|
||||
␍<radialGradient id="IconifyId17ecdb2904d178eab13602" cx="26.668" cy="105.722" r="10.024" gradientUnits="userSpaceOnUse">
|
||||
␍<stop offset="0" stop-color="#ffffff">
|
||||
␍</stop>
|
||||
␍<stop offset=".921" stop-color="#cdd7db" stop-opacity="0">
|
||||
␍</stop>
|
||||
␍</radialGradient>
|
||||
␍<circle cx="28.45" cy="109.74" r="6.55" fill="url(#IconifyId17ecdb2904d178eab13602)">
|
||||
␍</circle>
|
||||
␍<circle cx="29.39" cy="110.16" r="5.39" fill="#c6b3a1">
|
||||
␍</circle>
|
||||
␍<path d="M121.79 88.89h.02c.01-17.13-14.62-28.3-31.06-27.66c-15.19.6-23.27 10.67-23.27 10.67s4.67 4.46 2.5 16.15l.02.02c-.08.32-.15.65-.22.98c-2.83 14.38 6.53 28.33 20.9 31.16c14.37 2.83 28.31-6.54 31.13-20.92c.7-3.55.66-7.07-.02-10.4z" fill="#90a4ae">
|
||||
␍</path>
|
||||
␍<linearGradient id="IconifyId17ecdb2904d178eab13603" gradientUnits="userSpaceOnUse" x1="67.478" y1="90.967" x2="123.505" y2="90.967">
|
||||
␍<stop offset=".292" stop-color="#d3cac3">
|
||||
␍</stop>
|
||||
␍<stop offset="1" stop-color="#6d94a5">
|
||||
␍</stop>
|
||||
␍</linearGradient>
|
||||
␍<path d="M121.79 88.89l1.71.17c-.45-16.8-16.31-28.47-32.75-27.83c-15.19.6-23.27 10.67-23.27 10.67s.83.66 1.19 7.76c.12 2.37.19 5.45.16 9.47c-.12 16.06 7.49 28.25 21.86 31.08c14.37 2.83 29.3-6.08 32.12-20.46c.69-3.55-.34-7.53-1.02-10.86z" fill="url(#IconifyId17ecdb2904d178eab13603)">
|
||||
␍</path>
|
||||
␍<circle cx="98.03" cy="92.75" r="25.74" fill="#90a4ae">
|
||||
␍</circle>
|
||||
␍<g>
|
||||
␍<circle cx="100.55" cy="94.98" r="15.37" fill="#466b7d">
|
||||
␍</circle>
|
||||
␍<circle cx="101.06" cy="92.86" r="14.25" fill="#a38e7a">
|
||||
␍</circle>
|
||||
␍<radialGradient id="IconifyId17ecdb2904d178eab13604" cx="95.821" cy="81.892" r="20.256" gradientUnits="userSpaceOnUse">
|
||||
␍<stop offset="0" stop-color="#ffffff">
|
||||
␍</stop>
|
||||
␍<stop offset=".921" stop-color="#cdd7db" stop-opacity="0">
|
||||
␍</stop>
|
||||
␍</radialGradient>
|
||||
␍<circle cx="101.06" cy="92.86" r="14.25" fill="url(#IconifyId17ecdb2904d178eab13604)">
|
||||
␍</circle>
|
||||
␍<circle cx="102.82" cy="93.28" r="12.5" fill="#c6b3a1">
|
||||
␍</circle>
|
||||
␍</g>
|
||||
␍<g>
|
||||
␍<path d="M68.35 20.1l-8.67-4.53l-7.93 8.47l-.25 6.79l12.76 4.65s6.56-3.38 6.83-3.51s-.11-5.54-.11-5.54l-2.63-6.33z" fill="#212121">
|
||||
␍</path>
|
||||
␍<path d="M57.25 22.24c1.38-3.39 2.68-3.27 4.19-2.84c1.54.44 2.57 2.24 1.38 4.89l-2.05 6.11l6.88-2.1l2.88 2.99l1.65 3.62s-6.4 2.36-10.42 2.52s-6.23-3.14-6.23-3.14l-2.82-1.3c.01 0 4.12-9.7 4.54-10.75z" fill="#466b7d">
|
||||
␍</path>
|
||||
␍<path d="M64.23 13.41c.12-2.62.26-5.99.26-6.06l-.06-.02c-.4-.08-3.03-.59-6.42-.98c-3.92-.45-6.04.24-7.96 2.45L38.9 20.09c-3.13 3.9-.64 9.19-.64 9.19l14.1 2.44s8.82-11.54 11.13-14.57c.13-.63.42-2.11.74-3.74z" fill="#6d94a5">
|
||||
␍</path>
|
||||
␍<path d="M38.26 29.28s-2.48-5.29.64-9.19l11.16-11.3c1.91-2.21 4.04-2.9 7.96-2.45c3.68.43 6.47.99 6.47.99s-.35 8.92-.45 9.08c-.11.16-11.68 15.3-11.68 15.3l-14.1-2.43z" fill="#d3cac3">
|
||||
␍</path>
|
||||
␍<path fill="#90a4ae" d="M45.97 22.63l14.59-14.7l1.65 11.34l-8.8 11.13l-4.92-4.76z">
|
||||
␍</path>
|
||||
␍<path d="M68.4 11.42c-.81-2.65-1.68-3.47-3.91-4.08c-4.32-1.19-7.45 3.49-4.81 8.23c2.87 5.16 7 13.66 7 13.66l6.36 5.09c.92-.34 1.97-1.95 1.19-4.57L68.4 11.42z" fill="#90a4ae">
|
||||
␍</path>
|
||||
␍<path d="M67.33 9.54c-.12-.11-.03-.76-.95-1.42c-.56-.4-1.24-.61-1.9-.79c-4.32-1.19-7.45 3.49-4.81 8.23c2.34 4.21 6.89 13.56 6.89 13.56s.68 2.4 1.12 2.52c.54.14 1.11-.2 1.39-.68c.28-.48.08-.95.05-1.5c0 0-6.37-13.02-7-14.21s4.22-6.61 5.21-5.71z" fill="#466b7d">
|
||||
␍</path>
|
||||
␍<circle cx="64.55" cy="12.72" r="4.6" fill="#466b7d">
|
||||
␍</circle>
|
||||
␍<circle cx="64.94" cy="12.22" r="4.29" fill="#a38e7a">
|
||||
␍</circle>
|
||||
␍<radialGradient id="IconifyId17ecdb2904d178eab13605" cx="61.144" cy="5.681" r="6.568" gradientTransform="rotate(12.17 45.284 22.59)" gradientUnits="userSpaceOnUse">
|
||||
␍<stop offset="0" stop-color="#ffffff">
|
||||
␍</stop>
|
||||
␍<stop offset=".921" stop-color="#cdd7db" stop-opacity="0">
|
||||
␍</stop>
|
||||
␍</radialGradient>
|
||||
␍<circle cx="64.94" cy="12.22" r="4.29" fill="url(#IconifyId17ecdb2904d178eab13605)">
|
||||
␍</circle>
|
||||
␍<circle cx="65.7" cy="12.25" r="3.46" fill="#c6b3a1">
|
||||
␍</circle>
|
||||
␍<circle cx="70.66" cy="31.29" r="3.96" fill="#466b7d">
|
||||
␍</circle>
|
||||
␍<circle cx="70.86" cy="31.11" r="3.52" fill="#a38e7a">
|
||||
␍</circle>
|
||||
␍<radialGradient id="IconifyId17ecdb2904d178eab13606" cx="71.125" cy="23.363" r="5.386" gradientTransform="rotate(12.17 45.284 22.59)" gradientUnits="userSpaceOnUse">
|
||||
␍<stop offset="0" stop-color="#ffffff">
|
||||
␍</stop>
|
||||
␍<stop offset=".921" stop-color="#cdd7db" stop-opacity="0">
|
||||
␍</stop>
|
||||
␍</radialGradient>
|
||||
␍<circle cx="70.86" cy="31.11" r="3.52" fill="url(#IconifyId17ecdb2904d178eab13606)">
|
||||
␍</circle>
|
||||
␍<circle cx="71.58" cy="31.3" r="2.84" fill="#c6b3a1">
|
||||
␍</circle>
|
||||
␍<path d="M27.73 27.46c1.25-6.16 6.84-8.05 12.21-7.55c4.69.43 7.59 1.15 7.59 1.15c-.57 2.14-.59 17.32-1.83 19.16c-1.38 2.03-8.15.61-12.48-2.65c-2.57-1.93-4.07-1.47-4.07-1.47s-2.19-4.88-1.42-8.64z" fill="#d9c6b6">
|
||||
␍</path>
|
||||
␍<ellipse transform="rotate(-75.072 43.516 30.68)" cx="43.51" cy="30.68" rx="10.44" ry="9.86" fill="#90a4ae">
|
||||
␍</ellipse>
|
||||
␍<path d="M38.13 29.42c.8-3.18 4.02-5.63 8.01-4.38c3.17.99 18.86 6.8 18.86 6.8l.36 7.67s-18.16-.72-19.9-.92c-7.53-.87-8.14-5.95-7.33-9.17z" fill="#466b7d">
|
||||
␍</path>
|
||||
␍<path d="M67.91 36.95c.39-1.8-.69-3.56-2.42-4.08v-.03s-14.51-5.46-17.76-6.17a6.013 6.013 0 0 0-7.15 4.61a6.013 6.013 0 0 0 4.61 7.15c1.59.34 16.94 1.16 19.15 1.28c.04 0 .09.01.13.01c.09 0 .14.01.14.01v-.02c1.58-.08 2.95-1.17 3.3-2.76z" fill="#90a4ae">
|
||||
␍</path>
|
||||
␍<g>
|
||||
␍<circle cx="47.29" cy="33.09" r="4.6" fill="#466b7d">
|
||||
␍</circle>
|
||||
␍<circle cx="47.68" cy="32.6" r="4.29" fill="#a38e7a">
|
||||
␍</circle>
|
||||
␍<radialGradient id="IconifyId17ecdb2904d178eab13607" cx="48.566" cy="29.233" r="6.568" gradientTransform="rotate(12.17 45.284 22.59)" gradientUnits="userSpaceOnUse">
|
||||
␍<stop offset="0" stop-color="#ffffff">
|
||||
␍</stop>
|
||||
␍<stop offset=".921" stop-color="#cdd7db" stop-opacity="0">
|
||||
␍</stop>
|
||||
␍</radialGradient>
|
||||
␍<circle cx="47.68" cy="32.6" r="4.29" fill="url(#IconifyId17ecdb2904d178eab13607)">
|
||||
␍</circle>
|
||||
␍<circle cx="48.42" cy="32.86" r="3.46" fill="#c6b3a1">
|
||||
␍</circle>
|
||||
␍</g>
|
||||
␍</g>
|
||||
␍</svg>
|
||||
|
After Width: | Height: | Size: 8.7 KiB |
@@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" ?>
|
||||
␍<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
|
||||
␍<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 8.66 8.66" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
|
||||
␍<defs>
|
||||
␍<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:none}
|
||||
.fil1 {fill:#2554B0;fill-rule:nonzero}
|
||||
.fil2 {fill:#479DFF;fill-rule:nonzero}
|
||||
]]>
|
||||
</style>
|
||||
␍</defs>
|
||||
␍<g id="Layer_x0020_1">
|
||||
␍<rect class="fil0" height="8.66" width="8.66"/>
|
||||
␍<path class="fil1" d="M2.8 4.55c-0.17,0 -0.33,-0.07 -0.45,-0.18 -0.11,-0.12 -0.19,-0.28 -0.19,-0.46 0,-0.17 0.08,-0.33 0.19,-0.45 0.12,-0.11 0.28,-0.18 0.45,-0.18 0.18,0 0.34,0.07 0.45,0.18 0.12,0.12 0.19,0.28 0.19,0.45 0,0.18 -0.07,0.34 -0.19,0.46 -0.11,0.11 -0.27,0.18 -0.45,0.18zm-0.25 -0.38c0.06,0.06 0.15,0.1 0.25,0.1 0.1,0 0.19,-0.04 0.26,-0.1 0.06,-0.07 0.1,-0.16 0.1,-0.26 0,-0.1 -0.04,-0.18 -0.1,-0.25 -0.07,-0.06 -0.16,-0.1 -0.26,-0.1 -0.1,0 -0.19,0.04 -0.25,0.1 -0.07,0.07 -0.11,0.15 -0.11,0.25 0,0.1 0.04,0.19 0.11,0.26z"/>
|
||||
␍<path class="fil1" d="M2.8 5.76l-0.8 0c-0.08,0 -0.14,-0.06 -0.14,-0.14l0 -0.34c0,-0.29 0.25,-0.47 0.58,-0.55 0.12,-0.02 0.24,-0.04 0.36,-0.04 0.12,0 0.25,0.02 0.36,0.04 0.11,0.03 0.21,0.06 0.3,0.11 -0.11,0.05 -0.2,0.12 -0.26,0.19 -0.03,-0.01 -0.06,-0.02 -0.1,-0.03 -0.09,-0.02 -0.19,-0.03 -0.3,-0.03 -0.1,0 -0.2,0.01 -0.3,0.03 -0.2,0.05 -0.36,0.14 -0.36,0.28l0 0.2 1 0 0 0.14 0.61 0c0,0.08 -0.06,0.14 -0.14,0.14l-0.81 0z"/>
|
||||
␍<path class="fil1" d="M5.85 4.55c-0.17,0 -0.33,-0.07 -0.45,-0.18 -0.11,-0.12 -0.18,-0.28 -0.18,-0.46 0,-0.17 0.07,-0.33 0.18,-0.45 0.12,-0.11 0.28,-0.18 0.45,-0.18 0.18,0 0.34,0.07 0.46,0.18 0.11,0.12 0.18,0.28 0.18,0.45 0,0.18 -0.07,0.34 -0.18,0.46 -0.12,0.11 -0.28,0.18 -0.46,0.18zm-0.25 -0.38c0.07,0.06 0.16,0.1 0.25,0.1 0.1,0 0.19,-0.04 0.26,-0.1 0.06,-0.07 0.1,-0.16 0.1,-0.26 0,-0.1 -0.04,-0.18 -0.1,-0.25 -0.07,-0.06 -0.16,-0.1 -0.26,-0.1 -0.09,0 -0.18,0.04 -0.25,0.1 -0.06,0.07 -0.1,0.15 -0.1,0.25 0,0.1 0.04,0.19 0.1,0.26z"/>
|
||||
␍<path class="fil1" d="M5.85 5.76l-0.8 0c-0.08,0 -0.14,-0.06 -0.14,-0.14l0.6 0 0 -0.14 1.01 0 0 -0.2c0,-0.14 -0.16,-0.23 -0.37,-0.28 -0.09,-0.02 -0.19,-0.03 -0.3,-0.03 -0.1,0 -0.2,0.01 -0.29,0.03 -0.04,0.01 -0.07,0.02 -0.11,0.03 -0.05,-0.07 -0.14,-0.14 -0.25,-0.19 0.08,-0.05 0.19,-0.08 0.29,-0.11 0.12,-0.02 0.24,-0.04 0.36,-0.04 0.13,0 0.25,0.02 0.36,0.04 0.33,0.08 0.59,0.26 0.59,0.55l0 0.34c0,0.08 -0.06,0.14 -0.14,0.14l-0.81 0z"/>
|
||||
␍<path class="fil2" d="M4.33 4.36c-0.2,0 -0.39,-0.08 -0.52,-0.21l0 0c-0.13,-0.14 -0.21,-0.32 -0.21,-0.52 0,-0.2 0.08,-0.39 0.21,-0.52l0 0c0.13,-0.13 0.32,-0.21 0.52,-0.21 0.2,0 0.38,0.08 0.52,0.21 0.13,0.13 0.21,0.32 0.21,0.52 0,0.2 -0.08,0.39 -0.21,0.52 -0.14,0.13 -0.32,0.21 -0.52,0.21zm-0.32 -0.41c0.08,0.08 0.19,0.13 0.32,0.13 0.12,0 0.24,-0.05 0.32,-0.13 0.08,-0.08 0.13,-0.2 0.13,-0.32 0,-0.13 -0.05,-0.24 -0.13,-0.32 -0.08,-0.08 -0.2,-0.13 -0.32,-0.13 -0.13,0 -0.24,0.05 -0.32,0.13l0 0c-0.08,0.08 -0.13,0.19 -0.13,0.32 0,0.12 0.05,0.24 0.13,0.32l0 0z"/>
|
||||
␍<path class="fil2" d="M4.33 5.76l-1.19 0c-0.07,0 -0.14,-0.06 -0.14,-0.14l0 -0.4c0,-0.34 0.36,-0.55 0.82,-0.63 0.16,-0.03 0.34,-0.05 0.51,-0.05 0.17,0 0.35,0.02 0.51,0.05 0.46,0.08 0.81,0.29 0.81,0.63l0 0.4c0,0.08 -0.06,0.14 -0.14,0.14l-1.18 0zm-1.05 -0.28l2.09 0 0 -0.26c0,-0.18 -0.25,-0.3 -0.58,-0.36 -0.14,-0.02 -0.3,-0.04 -0.46,-0.04 -0.16,0 -0.32,0.02 -0.46,0.04 -0.33,0.06 -0.59,0.18 -0.59,0.36l0 0.26z"/>
|
||||
␍</g>
|
||||
␍</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
@@ -0,0 +1,197 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M39.8084 8.00098C37.3296 8.00098 36.3871 9.98493 36.5803 13.8256C36.7075 16.3563 37.5605 23.4204 33.9837 26.9972C30.6472 30.3336 29.6764 30.0368 25.8781 34.344C22.0798 38.6513 18.913 37.7653 14.4785 37.3836C8.9083 36.9076 10.8075 67.8077 14.733 67.2704C17.5181 66.8887 23.8517 66.13 24.8649 66.13C25.8781 66.13 32.8244 71.5164 38.9224 71.5777C48.7999 71.6814 54.2475 69.933 54.2475 69.933L57.141 63.3685L58.1071 43.3449L53.4841 33.7125C53.4841 33.7125 47.2777 34.7257 45.5058 31.9406C43.7339 29.1555 46.9007 25.7342 46.9007 17.7559C46.9007 9.7776 41.076 8.00098 39.8084 8.00098Z" fill="url(#paint0_linear)"/>
|
||||
<path d="M54.5916 69.8707L54.2146 68.4994C53.1024 68.3816 51.6698 68.8858 49.7141 68.8717C40.3739 68.801 31.4436 66.1195 27.6124 63.0847C25.1053 61.1007 24.0026 58.4523 22.2306 59.2157C20.044 60.1535 13.8376 61.6097 11.5568 58.7256C12.193 63.669 13.3334 67.4626 14.733 67.2694C17.5181 66.8877 23.8518 66.129 24.8649 66.129C25.8781 66.129 32.6312 71.3693 38.9224 71.5767C47.061 71.8406 54.29 70.441 54.29 70.441L54.5916 69.8707Z" fill="url(#paint1_linear)"/>
|
||||
<path d="M45.5104 31.9398C43.7385 29.1547 46.9053 25.7334 46.9053 17.7551C46.9053 9.77681 41.0807 8.00488 39.813 8.00488C39.4784 8.00488 39.1815 8.04257 38.9176 8.11326C44.0825 8.43843 47.1975 14.9512 45.4162 21.6712C43.9694 27.1236 43.2531 31.4921 45.6094 34.0605C47.1363 35.7193 50.1711 35.4365 53.4935 33.7164C53.4887 33.7117 47.2823 34.7249 45.5104 31.9398Z" fill="url(#paint2_linear)"/>
|
||||
<path d="M45.8546 34.7812C42.815 35.7944 35.1383 38.179 29.323 43.4523C14.587 56.8123 39.7472 58.49 44.9404 69.9132C45.9347 72.0998 51.7405 58.457 51.7405 58.457L53.6161 55.2996L48.192 40.8557L45.8546 34.7812Z" fill="url(#paint3_linear)"/>
|
||||
<path d="M46.3022 35.9355C43.2626 36.9487 30.8451 44.9035 30.8451 48.829C30.8451 60.1626 39.4455 54.5689 44.092 67.9431C44.7376 69.7951 47.0091 71.3549 47.0091 71.3549C48.8941 69.8186 51.7452 58.452 51.7452 58.452L53.6208 55.2946L48.1966 40.8507L46.3022 35.9355Z" fill="url(#paint4_linear)"/>
|
||||
<path d="M53.3191 70.6813L59.1391 64.0319L60.4209 36.2468L45.8591 34.7812C42.518 36.5814 42.1315 39.0414 43.3709 42.9905C43.894 44.654 41.7687 45.13 41.632 49.9697C41.5378 53.325 43.7338 53.3439 43.7338 54.3383C43.7338 55.3373 42.6405 55.2478 42.2776 58.1365C41.7592 62.2694 45.223 62.3495 45.223 63.2355C45.223 64.1215 43.3002 64.6446 43.4181 68.014C43.5689 72.2883 35.6282 71.4259 30.2607 67.5333C28.0552 65.9358 26.1325 65.7708 24.6339 66.1337C24.7282 66.129 24.8083 66.1243 24.8648 66.1243C25.878 66.1243 32.6829 71.44 38.9223 71.572C46.3021 71.7322 51.2644 71.1525 53.3191 70.6813Z" fill="url(#paint5_linear)"/>
|
||||
<path d="M54.6575 36.6094C50.1618 36.6094 47.6924 41.0015 49.4031 44.3804C51.1137 47.7545 46.2363 52.222 46.7452 54.4227C47.2494 56.6235 48.1401 62.189 48.8329 63.1079C49.5303 64.0269 47.6924 66.1192 47.6924 66.1192L53.3899 66.8167L58.7103 64.4699L58.5218 48.386L59.092 38.3153L54.6575 36.6094Z" fill="url(#paint6_linear)"/>
|
||||
<path d="M39.8083 8C37.3295 8 36.387 9.98396 36.5802 13.8247C36.7074 16.3553 37.5604 23.4194 33.9836 26.9962C30.6471 30.3327 29.6764 30.0358 25.8781 34.343C23.4087 37.1423 21.2079 37.7455 18.7574 37.7219C17.4332 37.7078 16.0336 37.5146 14.4832 37.3826C14.4832 38.344 14.7659 38.3204 18.437 39.3336C18.8564 39.4514 19.2569 39.5268 19.6434 39.5786C19.8319 40.1583 19.9356 40.7521 19.9073 41.3364C19.7753 44.5362 20.4775 48.4759 21.0147 44.376C21.2221 42.7879 21.8771 41.0065 22.8008 39.2063C24.191 38.6503 25.3173 37.6088 26.3163 36.393C28.1825 34.1263 29.7989 32.1187 34.4831 29.0791C39.1674 26.0396 38.5689 17.6795 38.1872 14.8944C37.8102 12.1046 38.0647 8 39.8083 8Z" fill="url(#paint7_linear)"/>
|
||||
<path d="M58.06 33.5847C52.7442 33.3821 43.1872 33.0805 42.9751 38.6507C42.8196 42.6893 45.6849 44.0136 50.1146 44.1832C54.5444 44.3529 56.7593 44.4377 58.5925 44.5084C60.4256 44.579 66.1985 44.5414 66.255 39.6686C66.3304 33.5706 58.06 33.5847 58.06 33.5847Z" fill="url(#paint8_linear)"/>
|
||||
<path d="M49.3182 53.717C47.895 53.6746 43.6631 54.7444 43.2673 57.4305C42.9563 59.5464 44.0354 62.275 47.7159 62.9206C52.3813 63.7359 60.1523 64.1647 63.0599 63.0761C64.3559 62.5907 65.4869 61.2335 65.5481 59.1741C65.6094 57.1148 64.0778 54.3438 60.7555 54.2448C57.4331 54.1506 55.6989 54.2024 53.8045 53.9762C51.5283 53.7076 50.4586 53.75 49.3182 53.717Z" fill="url(#paint9_linear)"/>
|
||||
<path d="M47.8338 63.1074C46.2174 63.1074 44.224 64.5306 44.224 66.9057C44.224 69.2809 44.8413 71.0386 48.3098 71.7031C51.7782 72.3676 57.3343 71.7973 59.4219 71.1329C61.0477 70.6145 61.6556 69.0924 61.6556 66.5759C61.6556 64.0594 60.0864 63.6211 58.3804 63.6211C56.6745 63.6211 54.5963 63.9321 53.4087 63.8709C50.1005 63.6918 49.4502 63.1074 47.8338 63.1074Z" fill="url(#paint10_linear)"/>
|
||||
<path d="M57.6075 34.71C52.9657 34.5309 44.6198 34.267 44.4549 38.6685C44.3323 41.8589 46.8394 42.9192 50.7084 43.0653C54.5774 43.2113 64.7517 43.3998 64.7847 39.545C64.8271 34.7241 57.6075 34.71 57.6075 34.71Z" fill="url(#paint11_linear)"/>
|
||||
<path d="M49.7471 54.8525C48.5077 54.8148 45.0345 55.1117 44.7 57.68C44.4738 59.419 45.3738 61.648 48.5831 62.1805C52.6453 62.8544 59.4125 63.2173 61.9384 62.3313C63.0647 61.9355 64.0496 60.8233 64.0967 59.1409C64.1438 57.4538 62.5934 55.385 59.6999 55.3002C56.8064 55.2154 55.2702 55.484 53.6208 55.3002C51.6368 55.074 50.7367 54.8808 49.7471 54.8525Z" fill="url(#paint12_linear)"/>
|
||||
<path d="M48.5265 63.9756C47.1316 63.9756 45.4021 65.1207 45.4021 67.034C45.4021 68.9473 45.9346 70.361 48.9365 70.8983C51.9384 71.4355 56.7404 70.9737 58.5501 70.4412C59.9591 70.0218 60.4822 68.7965 60.4822 66.7701C60.4822 64.7437 59.125 64.3903 57.65 64.3903C56.1749 64.3903 54.3748 64.64 53.3521 64.5929C50.4822 64.4468 49.9214 63.9756 48.5265 63.9756Z" fill="url(#paint13_linear)"/>
|
||||
<path d="M18.1825 66.831C14.4454 65.224 10.9488 43.2165 17.8432 37.6887C16.7923 37.6227 15.6848 37.4861 14.4832 37.3824C8.91294 36.9064 10.8121 67.8065 14.7376 67.2692C15.6189 67.1514 16.863 66.9912 18.1825 66.831Z" fill="url(#paint14_linear)"/>
|
||||
<path d="M47.6735 38.6692C47.7913 35.6343 50.2089 34.1829 53.2626 33.5137C48.3851 33.6268 43.1307 34.5363 42.9751 38.6503C42.8196 42.689 45.6849 44.0132 50.1146 44.1829C50.6 44.2017 51.0618 44.2205 51.5001 44.2347C49.0119 43.5042 47.551 41.8643 47.6735 38.6692Z" fill="url(#paint15_linear)"/>
|
||||
<path opacity="0.16" d="M40.5341 65.9681C39.7848 67.6928 36.2127 67.8012 32.5558 66.2084C28.8989 64.6155 26.5426 61.9294 27.2966 60.2046C28.0459 58.4799 31.618 58.3714 35.2749 59.9643C38.9271 61.5571 41.2834 64.2433 40.5341 65.9681Z" fill="url(#paint16_radial)"/>
|
||||
<path opacity="0.16" d="M62.042 39.4842C62.0043 41.8122 58.8893 42.9196 55.4775 43.127C52.6876 43.2966 49.5962 41.3221 49.6763 39.0459C49.7564 36.7698 50.1617 34.7528 55.9534 34.9555C59.37 35.0686 62.0797 37.2033 62.042 39.4842Z" fill="url(#paint17_radial)"/>
|
||||
<path opacity="0.16" d="M62.664 59.9654C62.6452 63.1935 59.0967 62.5715 55.6895 62.7977C51.3681 63.0804 48.5029 61.7373 48.4982 59.4612C48.4935 57.185 50.1381 55.5262 55.9346 55.5168C59.3511 55.5074 62.6876 55.8184 62.664 59.9654Z" fill="url(#paint18_radial)"/>
|
||||
<path opacity="0.16" d="M59.535 68.0993C59.5161 70.8514 56.2927 71.2237 53.239 71.2284C50.1853 71.2331 46.8677 69.612 46.8677 67.6704C46.8677 65.7289 48.3333 64.3151 53.5171 64.3057C56.5755 64.301 59.5585 64.5649 59.535 68.0993Z" fill="url(#paint19_radial)"/>
|
||||
<path d="M47.2305 58.0806C47.7159 54.4096 50.534 54.6216 53.7668 54.2399C50.0486 53.9619 48.4888 53.9195 48.4888 53.9195C48.1401 53.8865 47.7536 53.8818 47.3484 53.9242C46.1419 54.1881 44.7706 54.7394 43.96 55.7715C43.682 56.1626 43.4605 56.6292 43.3144 57.1758C43.3003 57.256 43.2862 57.336 43.272 57.4209C43.0081 59.5415 44.0402 62.2653 47.7206 62.911C48.2532 63.0052 48.8234 63.0901 49.4266 63.1749C49.714 63.2126 50.0251 63.2503 50.3644 63.2927C50.4539 63.3021 50.5434 63.3163 50.6377 63.3257C48.5972 62.3691 46.8724 60.7809 47.2305 58.0806Z" fill="url(#paint20_linear)"/>
|
||||
<path opacity="0.5" d="M51.3257 63.6682C49.7046 63.4326 49.0354 63.1074 47.8384 63.1074C46.222 63.1074 44.2286 64.5306 44.2286 66.9057C44.2286 67.7681 44.3088 68.5504 44.5821 69.2243C44.8554 69.7851 45.2513 70.3082 45.7979 70.7465C46.3964 71.1659 47.2117 71.4863 48.3144 71.6984C49.0543 71.8397 49.8931 71.9246 50.7696 71.967C49.0731 70.9821 46.2032 70.4543 46.8064 67.1602C47.4709 63.5268 49.6386 64.017 51.3257 63.6682Z" fill="url(#paint21_linear)"/>
|
||||
<path d="M47.7631 63.1074C46.1608 63.1498 44.224 64.5636 44.224 66.9057C44.224 69.0829 44.7424 70.737 47.4992 71.5099C43.2014 68.7483 44.5822 64.0876 47.7631 63.1074Z" fill="url(#paint22_linear)"/>
|
||||
<path d="M66.2598 39.6628C66.2645 39.1162 66.2032 38.6213 66.0901 38.1689C66.519 40.0728 64.8225 41.9625 60.3267 42.8815C57.3484 43.4894 49.436 44.2481 43.9601 42.0757C45.1429 43.5035 47.3154 44.0738 50.1194 44.1822C54.5491 44.3518 56.764 44.4366 58.5972 44.5073C60.4304 44.5733 66.2032 44.5403 66.2598 39.6628Z" fill="url(#paint23_linear)"/>
|
||||
<path d="M65.5482 59.0463C65.5434 57.0011 64.0072 54.3432 60.7555 54.249C57.4332 54.1547 55.699 54.2066 53.8045 53.9804C51.5284 53.7117 50.4586 53.7542 49.3182 53.7212C48.4558 53.6976 46.3352 53.9568 44.8884 54.8522C46.5143 55.4177 49.158 56.2612 52.8809 56.0256C61.8064 55.446 64.3465 56.5251 65.5482 59.0463Z" fill="url(#paint24_linear)"/>
|
||||
<path d="M47.405 44.5032C45.5058 44.4655 42.4898 45.5824 42.4097 49.5268C42.3296 53.4664 45.7792 54.409 47.3013 54.4372C48.8235 54.4655 54.1345 54.8284 60.6849 54.9604C67.2353 55.0923 68.1165 51.5767 68.1542 49.7341C68.1919 47.8915 67.0232 44.5598 63.0836 44.4797C51.684 44.2488 47.405 44.5032 47.405 44.5032Z" fill="url(#paint25_linear)"/>
|
||||
<path d="M48.4228 45.6434C46.7734 45.6104 44.1533 46.4681 44.092 49.5077C44.0307 52.5473 47.0326 53.2824 48.3521 53.306C49.6716 53.3342 53.7998 53.9705 59.9874 53.7348C65.6801 53.5181 66.4388 51.1382 66.4671 49.715C66.4954 48.2918 66.2974 45.7188 62.8714 45.6528C52.9704 45.4596 48.4228 45.6434 48.4228 45.6434Z" fill="url(#paint26_linear)"/>
|
||||
<path d="M46.486 49.1454C46.6745 45.0973 49.5021 45.0879 52.6924 44.3857C48.9648 44.4093 47.405 44.5036 47.405 44.5036C45.5058 44.4659 42.4898 45.5827 42.4097 49.5271C42.3296 53.4668 45.7792 54.4093 47.3013 54.4376C47.848 54.447 48.8894 54.5036 50.3032 54.5742C48.2014 53.7024 46.3494 52.1237 46.486 49.1454Z" fill="url(#paint27_linear)"/>
|
||||
<path opacity="0.16" d="M64.8177 49.5649C64.9496 52.7883 61.3681 53.3961 57.9562 53.5564C54.5444 53.7213 50.7508 51.9965 50.6424 49.7204C50.534 47.4442 52.0986 45.71 57.8856 45.432C61.2974 45.267 64.648 45.4226 64.8177 49.5649Z" fill="url(#paint28_radial)"/>
|
||||
<path opacity="0.5" d="M68.1448 49.334C67.3201 55.1681 51.9007 54.0984 43.569 52.8448C44.6953 54.0512 46.3682 54.4141 47.306 54.433C48.8234 54.4612 54.1392 54.8241 60.6896 54.956C67.24 55.088 68.1213 51.5725 68.159 49.7299C68.1542 49.6026 68.1542 49.4706 68.1448 49.334Z" fill="url(#paint29_linear)"/>
|
||||
<path opacity="0.5" d="M60.4162 62.3216C57.4284 62.4536 49.5255 63.4338 43.7621 60.3471C44.403 61.5393 45.6518 62.5573 47.7112 62.9154C52.3766 63.7307 60.1476 64.1595 63.0552 63.0709C64.3511 62.5855 65.4821 61.2283 65.5434 59.1689C65.3549 60.9644 63.649 62.1802 60.4162 62.3216Z" fill="url(#paint30_linear)"/>
|
||||
<path d="M61.4247 68.8008C59.469 70.2899 56.0854 71.1712 51.2032 70.3465C48.1872 69.8376 46.1231 69.6632 44.7659 69.6255C45.3078 70.6057 46.3587 71.3267 48.3097 71.7037C51.7781 72.3682 57.3342 71.798 59.4218 71.1335C60.4963 70.7942 61.1231 70.0119 61.4247 68.8008Z" fill="url(#paint31_linear)"/>
|
||||
<path d="M44.865 64.7709C48.4795 63.4561 50.2561 65.4071 54.1251 65.4071C58.1449 65.4071 60.0582 63.7861 61.4861 65.3271C61.0384 63.9039 59.7566 63.6164 58.3805 63.6164C56.6699 63.6164 54.5964 63.9274 53.4088 63.8662C50.1006 63.6918 49.4503 63.1074 47.8386 63.1074C46.7924 63.1074 45.586 63.7059 44.865 64.7709Z" fill="url(#paint32_linear)"/>
|
||||
<path d="M14.7329 67.269C17.518 66.8872 23.8517 66.1286 24.8649 66.1286C15.6802 59.564 19.7659 45.6008 23.1542 38.5367C23.6302 37.5471 23.9224 36.7318 24.0826 36.0391C21.0242 38.3718 18.2014 37.6978 14.4832 37.3774C8.91296 36.9061 10.8074 67.8062 14.7329 67.269Z" fill="url(#paint33_linear)"/>
|
||||
<path d="M20.5247 60.9269C19.5727 59.6592 20.3974 62.383 21.1561 64.3481C21.8018 66.0164 16.8489 65.0315 13.0553 65.4415C13.5501 66.6667 14.1156 67.3548 14.733 67.2747C17.5181 66.8929 23.8517 66.1342 24.8649 66.1342C23.437 64.9184 21.4766 62.1945 20.5247 60.9269Z" fill="url(#paint34_linear)"/>
|
||||
<path d="M24.865 66.1339C24.078 65.4647 23.126 64.3337 22.2731 63.2451C22.2731 63.2451 17.6642 65.6061 12.7161 64.4939C13.2863 66.2988 13.9696 67.378 14.733 67.2743C17.5181 66.8926 23.8518 66.1339 24.865 66.1339Z" fill="url(#paint35_linear)"/>
|
||||
<path opacity="0.16" d="M42.7632 19.6175C40.9583 20.0086 39.4974 17.5157 38.668 14.6033C37.9941 12.2235 38.9083 9.19333 40.685 8.85403C42.4616 8.51473 44.0921 8.4959 45.0723 13.5383C45.6473 16.5119 44.5304 19.2358 42.7632 19.6175Z" fill="url(#paint36_radial)"/>
|
||||
<path d="M47.8008 63.0946C46.8064 63.1983 45.9063 63.7308 45.289 64.4612C44.6622 65.2011 44.3701 66.1625 44.4313 67.1332C44.436 68.1087 44.5821 69.1031 45.1382 69.8948C45.6849 70.6912 46.6085 71.1672 47.5369 71.5018C46.5802 71.285 45.5765 70.8891 44.9356 70.0503C44.2852 69.2209 44.1344 68.137 44.1014 67.1474C44.059 66.1295 44.3842 65.0503 45.1005 64.301C45.7932 63.5376 46.797 63.071 47.8008 63.0946Z" fill="#804B24"/>
|
||||
<path d="M46.2079 54.2578C45.5528 54.5406 44.9496 54.9317 44.4548 55.4124C43.9459 55.8883 43.6772 56.5434 43.4887 57.2078V57.1984C43.2484 58.4096 43.451 59.6961 44.1626 60.6999C44.8554 61.7178 45.9817 62.3869 47.1787 62.7734C45.944 62.5377 44.7046 61.9345 43.927 60.8648C43.5406 60.337 43.272 59.7243 43.1447 59.0787C43.0128 58.4331 43.074 57.7639 43.1966 57.1371L43.2013 57.1278C43.3945 56.4303 43.7432 55.7328 44.3134 55.2616C44.8601 54.7762 45.534 54.4746 46.2079 54.2578Z" fill="#804B24"/>
|
||||
<path d="M47.0891 44.4902C45.9157 44.6222 44.78 45.1123 43.9694 45.9323C43.1589 46.7522 42.7206 47.8833 42.6499 49.0378C42.5321 50.1877 42.7159 51.3847 43.3757 52.3366C44.0213 53.2932 45.0816 53.9341 46.2173 54.264C45.058 54.0519 43.9035 53.4817 43.1683 52.4827C42.419 51.493 42.2211 50.2018 42.3201 49.0048C42.419 47.8031 42.8903 46.5779 43.7951 45.7437C44.6857 44.9096 45.9063 44.5044 47.0891 44.4902Z" fill="#804B24"/>
|
||||
<path d="M48.1259 34.042C46.8724 34.386 45.6236 34.862 44.6339 35.6725C43.6349 36.4831 43.0929 37.7319 43.1778 39.0137C43.1636 40.2861 43.5783 41.582 44.5444 42.4303C45.4963 43.2833 46.7828 43.6979 48.0552 43.9666C46.7687 43.8158 45.4256 43.4906 44.3794 42.6235C43.305 41.7658 42.8526 40.3379 42.8479 39.0184C42.7772 37.68 43.3804 36.2757 44.4737 35.4746C45.5482 34.6594 46.8441 34.2682 48.1259 34.042Z" fill="#804B24"/>
|
||||
<path d="M43.8044 60.3291C44.6668 61.8277 46.3304 62.6006 47.9703 62.822C49.6386 63.0812 51.3209 63.2556 53.008 63.364C54.6904 63.5054 56.3822 63.5949 58.0693 63.5902C58.9128 63.5808 59.7611 63.5572 60.5999 63.4771C61.4387 63.4111 62.287 63.3216 63.0928 63.0577C61.4953 63.6562 59.7611 63.7551 58.074 63.8117C56.3775 63.8541 54.6762 63.8069 52.9797 63.6986C51.2879 63.5525 49.6009 63.3404 47.9279 63.0435C47.0891 62.9069 46.2502 62.643 45.5104 62.1953C44.7847 61.7429 44.1814 61.0878 43.8044 60.3291Z" fill="#804B24"/>
|
||||
<path d="M43.6019 52.8262C44.2475 53.4718 45.0817 53.896 45.9535 54.1127C46.8206 54.3719 47.7301 54.3153 48.6443 54.3577L54.1062 54.5133L59.568 54.7819C61.3776 54.8903 63.2249 54.9186 64.9591 54.3248C63.2673 55.0458 61.3682 55.1023 59.5633 55.0034L54.1014 54.8432L48.6396 54.5745C47.7395 54.5133 46.797 54.5557 45.9111 54.2682C45.0298 53.9949 44.2098 53.5095 43.6019 52.8262Z" fill="#804B24"/>
|
||||
<path d="M63.1164 44.4563C61.8111 44.461 60.501 44.4987 59.1956 44.4845L55.2748 44.494L51.3587 44.5458C50.0533 44.5553 48.7479 44.5599 47.4473 44.6118H47.4378C46.1513 44.5929 44.8224 45.0312 43.894 45.9502C42.9515 46.8597 42.5038 48.1839 42.4473 49.5034C42.4567 48.8436 42.5274 48.1745 42.73 47.5336C42.9374 46.8974 43.2861 46.2989 43.7621 45.8182C44.714 44.8427 46.0853 44.3573 47.4378 44.3526H47.4284C50.0439 44.1971 52.6593 44.1924 55.2748 44.2348C57.8949 44.2631 60.5057 44.3149 63.1164 44.4563Z" fill="#804B24"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="53.6922" y1="39.2638" x2="34.6401" y2="40.0287" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="22.0707" y1="92.0009" x2="33.0889" y2="64.2654" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B37E53"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear" x1="58.1908" y1="6.77171" x2="19.3105" y2="52.6175" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear" x1="87.7653" y1="51.9804" x2="21.6561" y2="52.7403" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B37E53"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear" x1="75.9638" y1="52.8746" x2="18.4032" y2="54.3944" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B37E53"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear" x1="16.5626" y1="50.9121" x2="112.307" y2="59.3658" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#473226" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#3D2A20"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear" x1="45.0348" y1="52.866" x2="58.1857" y2="51.1381" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#643800" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#643800"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear" x1="3.01749" y1="14.6139" x2="49.3699" y2="35.8905" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B37E53"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear" x1="54.626" y1="42.1771" x2="54.5627" y2="26.188" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear" x1="71.7609" y1="60.1868" x2="51.4818" y2="58.4296" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint10_linear" x1="70.0569" y1="67.9283" x2="52.1049" y2="67.5959" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint11_linear" x1="51.9444" y1="48.9743" x2="56.187" y2="33.2702" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B37E53"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint12_linear" x1="51.1065" y1="68.7643" x2="55.6025" y2="54.8966" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B37E53"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint13_linear" x1="49.1003" y1="84.0535" x2="53.7545" y2="63.6318" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B37E53"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint14_linear" x1="20.4093" y1="47.1771" x2="3.59711" y2="65.6991" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.3105" stop-color="#D2A374" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#B88653"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint15_linear" x1="52.9172" y1="38.7408" x2="39.3344" y2="40.2606" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.3131" stop-color="#8D562E" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#8D562E"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint16_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(33.9456 63.0875) rotate(7.56189) scale(5.64393 2.68239)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint17_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(55.8996 39.0561) rotate(2.02657) scale(6.34898 4.1659)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint18_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(55.5702 59.5059) rotate(-0.0543808) scale(6.81944 3.67442)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint19_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(53.2376 67.7656) rotate(-0.053942) scale(6.24297 3.90581)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="paint20_linear" x1="51.0354" y1="58.595" x2="34.6031" y2="58.7849" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8D562E" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#8D562E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint21_linear" x1="62.6247" y1="65.9636" x2="37.1689" y2="68.9557" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.3131" stop-color="#8D562E" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#8D562E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint22_linear" x1="49.7849" y1="62.8705" x2="38.1018" y2="79.9676" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D2A374" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#99643E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint23_linear" x1="54.5524" y1="37.8328" x2="56.9586" y2="49.4843" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint24_linear" x1="58.7661" y1="48.2896" x2="51.9905" y2="64.817" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint25_linear" x1="73.0179" y1="52.6491" x2="56.1106" y2="49.6096" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.00132565" stop-color="#BE8D68"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint26_linear" x1="51.8423" y1="63.0415" x2="57.1614" y2="42.2082" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B37E53"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint27_linear" x1="49.4319" y1="49.4788" x2="38.7518" y2="49.4788" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.2173" stop-color="#8D562E" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#8D562E"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint28_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(57.6501 49.5032) rotate(-2.73364) scale(7.24677 4.75256)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="paint29_linear" x1="55.438" y1="48.4384" x2="57.4644" y2="61.3246" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint30_linear" x1="54.8092" y1="57.4575" x2="54.1918" y2="66.861" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint31_linear" x1="52.9974" y1="68.2932" x2="53.7573" y2="75.4171" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A46C3F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#804B24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint32_linear" x1="53.1769" y1="67.2117" x2="53.1769" y2="62.0586" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B37E53"/>
|
||||
<stop offset="1" stop-color="#A46C3F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint33_linear" x1="18.3689" y1="52.9858" x2="2.22158" y2="77.3968" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.3105" stop-color="#D2A374" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#B88653"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint34_linear" x1="18.2287" y1="56.3489" x2="20.1284" y2="80.855" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B37E53"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint35_linear" x1="18.0974" y1="56.3588" x2="19.9971" y2="80.8648" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B37E53"/>
|
||||
<stop offset="1" stop-color="#CD9870"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint36_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(41.8352 14.2213) rotate(79.0615) scale(5.24755 3.18567)">
|
||||
<stop stop-color="#F8DBBA"/>
|
||||
<stop offset="1" stop-color="#CD9870" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,35 @@
|
||||
export type Categories = 'sveltekit' | 'svelte';
|
||||
|
||||
export type RawBlogPost = {
|
||||
metadata: BlogPost;
|
||||
default: any;
|
||||
};
|
||||
|
||||
export type BlogPost = {
|
||||
title: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
tags: string[];
|
||||
author: string;
|
||||
imageUrl: string;
|
||||
role: string;
|
||||
avatar: string;
|
||||
date: string;
|
||||
categories: Categories[];
|
||||
published: boolean;
|
||||
};
|
||||
|
||||
export type OssFriend = {
|
||||
name: string;
|
||||
description: string;
|
||||
href: string;
|
||||
};
|
||||
|
||||
export type FORM_TYPE_KEY = keyof typeof FORM_TYPE;
|
||||
|
||||
export enum FORM_TYPE {
|
||||
BUG = 'BUG',
|
||||
HELP = 'HELP',
|
||||
FEATURE = 'FEATURE',
|
||||
FEEDBACK = 'FEEDBACK'
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
interface Tool {
|
||||
src: string;
|
||||
title: string;
|
||||
subText: string;
|
||||
slug: string;
|
||||
show: boolean;
|
||||
showFeature: boolean;
|
||||
}
|
||||
|
||||
export const tools: Tool[] = [
|
||||
{
|
||||
src: '/free-tools/progress-report.svg',
|
||||
title: 'Progress Report',
|
||||
subText: 'Monitor your progress with a system to check and share your progress with others',
|
||||
slug: 'progress',
|
||||
show: true,
|
||||
showFeature: true
|
||||
},
|
||||
{
|
||||
src: '/free-tools/pomodoro.svg',
|
||||
title: 'Pomodoro Timer',
|
||||
subText:
|
||||
'Make your workday more engaging and effective with the Pomodoro timer, break work into 25-minute focused intervals called "pomodoros".',
|
||||
slug: 'pomodoro',
|
||||
show: true,
|
||||
showFeature: false
|
||||
},
|
||||
{
|
||||
src: '/free-tools/name-picker.svg',
|
||||
title: 'Random Name Picker',
|
||||
subText: 'Effortlessly choose names for class participation or group activities',
|
||||
slug: 'name-picker',
|
||||
show: true,
|
||||
showFeature: false
|
||||
},
|
||||
{
|
||||
src: '/free-tools/activity-stopwatch.svg',
|
||||
title: 'Activity Stopwatch',
|
||||
subText:
|
||||
'Stay on track and enhance productivity with our customizable stopwatch for timed tasks, quizzes, and study sessions',
|
||||
slug: 'stopwatch',
|
||||
show: true,
|
||||
showFeature: true
|
||||
},
|
||||
{
|
||||
src: '/free-tools/tic-tac.svg',
|
||||
title: 'Tic tac toe game',
|
||||
subText:
|
||||
"More than just a game; it's an educational tool that teaches pattern recognition, and decision-making.",
|
||||
slug: 'tic-tac-toe',
|
||||
show: true,
|
||||
showFeature: true
|
||||
},
|
||||
{
|
||||
src: '/free-tools/waec.svg',
|
||||
title: 'WAEC Practice tool',
|
||||
subText: 'Ace your WAEC exams with comprehensive study materials, past questions',
|
||||
slug: 'waec',
|
||||
show: false,
|
||||
showFeature: false
|
||||
},
|
||||
{
|
||||
src: '/free-tools/jamb.svg',
|
||||
title: 'JAMB Practice tool',
|
||||
subText:
|
||||
'Prepare for JAMB with past questions and instant feedback for effective exam readiness',
|
||||
slug: 'jamb',
|
||||
show: false,
|
||||
showFeature: false
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,8 @@
|
||||
type DateStyle = Intl.DateTimeFormatOptions['dateStyle'];
|
||||
|
||||
export function formatDate(date: string, dateStyle: DateStyle = 'medium', locales = 'en') {
|
||||
// Safari is mad about dashes in the date
|
||||
const dateToFormat = new Date(date.replaceAll('-', '/'));
|
||||
const dateFormatter = new Intl.DateTimeFormat(locales, { dateStyle });
|
||||
return dateFormatter.format(dateToFormat);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export const isFormValid = (data: { [x: string]: any }) => {
|
||||
for (const key in data) {
|
||||
if (!data[key]) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
};
|
||||
@@ -0,0 +1,9 @@
|
||||
import { PostHog } from 'posthog-node';
|
||||
|
||||
export const client = new PostHog(
|
||||
'phc_JfdHOZ6v0cVlGELBYx1Tmoen2nxNOrAzvgvrPA6Ksov',
|
||||
|
||||
{ host: 'https://app.posthog.com' }
|
||||
);
|
||||
|
||||
await client.shutdownAsync();
|
||||
@@ -0,0 +1,20 @@
|
||||
export const submitForm = async (formData: any) => {
|
||||
try {
|
||||
const response = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to submit the form');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Response from API:', data);
|
||||
} catch (error) {
|
||||
console.error('Error submitting form:', error);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
<script lang="ts" context="module">
|
||||
import { img } from '$lib/custom/index';
|
||||
export { img };
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
@@ -0,0 +1,246 @@
|
||||
<script>
|
||||
import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
|
||||
import PageHeader from '$lib/PageHeader/PageHeader.svelte';
|
||||
|
||||
const benefitDetails = [
|
||||
{
|
||||
icon: 'ai.svg',
|
||||
title: 'AI-Powered Learning',
|
||||
checkMark: 'check.svg',
|
||||
points: [
|
||||
'Create engaging courses with AI-assisted content generation.',
|
||||
'Automate grading and feedback processes, saving time and effort.',
|
||||
'Personalize learning experiences based on individual student needs.'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'community.svg',
|
||||
title: 'Foster a Thriving Community',
|
||||
checkMark: 'check.svg',
|
||||
points: [
|
||||
'Create a supportive learning environment with built-in forums and interactive tools.',
|
||||
'Encourage collaboration and knowledge sharing among students.',
|
||||
'Build a strong community of learners and mentors.'
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'operations.svg',
|
||||
title: 'Streamline Operations',
|
||||
checkMark: 'check.svg',
|
||||
points: [
|
||||
'Manage your courses and students efficiently with our user-friendly platform.',
|
||||
'Issue custom certificates to validate student achievements.',
|
||||
'Provide a seamless learning experience for your students.'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const featureDetails = [
|
||||
{
|
||||
icon: 'certificate-i.svg',
|
||||
img: 'certificate.svg',
|
||||
title: 'Certificates',
|
||||
description:
|
||||
'We provide pre built certificate templates anyone can choose from and provide to their students right within our dashboard'
|
||||
},
|
||||
{
|
||||
icon: 'forum-i.svg',
|
||||
img: 'forum.svg',
|
||||
title: 'Forum area for question and answer',
|
||||
description:
|
||||
'Our community section allows for a robust question and answer experience encouraging collaboration between students. This also encourages knowledge sharing amongst students.'
|
||||
},
|
||||
{
|
||||
icon: 'ai.svg',
|
||||
img: 'ai-pic.svg',
|
||||
title: 'AI Powered Content creation',
|
||||
description:
|
||||
'We give you the ability to create courses with AI, upload videos, embed slides, create quizzes and even grade quizzes with AI.'
|
||||
},
|
||||
{
|
||||
icon: 'free-tools-i.svg',
|
||||
img: 'free-tools.svg',
|
||||
title: 'Free tools for students',
|
||||
description:
|
||||
'We provide a suite of free tools like Pomodoro timer, Random name picker, and a Progress report generator to make the lives of educators and students much easier.',
|
||||
ctaLabel: 'Try it out',
|
||||
ctaLink: '/tools'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Bootcamps | ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="flex flex-col justify-center items-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"
|
||||
>
|
||||
<div class="bg-[#DCE5FF] py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
|
||||
<p class=" text-sm md:text-base text-[#4B5563] text-center font-medium">
|
||||
Solution for Bootcamps
|
||||
</p>
|
||||
</div>
|
||||
<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-screen-xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
|
||||
>
|
||||
<h1
|
||||
class="mx-auto m-0 text-4xl lg:text-7xl md:text-6xl font-bold text-slate-900 lg:text-center"
|
||||
>
|
||||
The platform for fast
|
||||
<span class="text-blue-700 relative"> 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>
|
||||
</div>
|
||||
<a
|
||||
href="/signup"
|
||||
target="_blank"
|
||||
class="py-5 px-6 bg-[#1D4ED8] border-transparent outline-transparent rounded-lg text-white text-lg font-semibold"
|
||||
>
|
||||
Get Started for Free 🚀
|
||||
</a>
|
||||
</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"
|
||||
>
|
||||
<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 md:text-base font-medium">Our benefits</p>
|
||||
</div>
|
||||
<div
|
||||
class="lg:w-full max-w-screen-xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
|
||||
>
|
||||
<h1 class="text-3xl md:text-5xl font-bold">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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full max-w-screen-xl flex lg:flex-row flex-col lg:justify-between justify-start gap-6 lg:items-center items-start"
|
||||
>
|
||||
{#each benefitDetails as benefits}
|
||||
<div class="w-full md:p-6 p-4 border border-[#D9E0F5] rounded-2xl flex flex-col gap-y-6">
|
||||
<img
|
||||
class="w-[48px] h-[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">
|
||||
<h1 class="text-xl font-medium">{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">
|
||||
{point}
|
||||
</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</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"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-screen-xl 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 md:text-base font-medium">Explore our features</p>
|
||||
</div>
|
||||
<div
|
||||
class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
|
||||
>
|
||||
<h1 class="text-3xl md:text-5xl font-bold">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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full max-w-screen-xl flex flex-col justify-start items-center lg:gap-y-24 gap-y-16"
|
||||
>
|
||||
{#each featureDetails as feature, i}
|
||||
<div
|
||||
class="w-full lg:w-[70%] flex lg:flex-row {i % 2 !== 0
|
||||
? 'lg:flex-row-reverse'
|
||||
: ''} flex-col lg:justify-between justify-between lg:items-center items-start gap-10"
|
||||
>
|
||||
<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
|
||||
class="w-[48px] h-[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">
|
||||
<h1 class="font-bold text-4xl">{feature.title}</h1>
|
||||
<p class="leading-8 text-lg text-gray-500">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if feature.ctaLink}
|
||||
<a
|
||||
class="py-4 px-8 border border-[#1D4ED8] outline-transparent rounded text-[#1D4ED8] text-sm font-semibold"
|
||||
href={feature.ctaLink}
|
||||
target="_blank noopener noreferrer"
|
||||
>
|
||||
{feature.ctaLabel}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
class="py-4 px-8 border border-[#1D4ED8] outline-transparent rounded text-[#1D4ED8] text-sm font-semibold"
|
||||
data-cal-config="'layout':'month_view'"
|
||||
data-cal-link="classroomio/demo"
|
||||
>
|
||||
Book a Demo
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img
|
||||
class="w-full lg:max-w-[380px]"
|
||||
src="https://assets.cdn.clsrio.com/www/bootcamps/{feature.img}"
|
||||
alt="team management feature ui"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Why spend time and money on building your own platform?"
|
||||
subText="Invest that time and money back into giving your students the best experience possible."
|
||||
btnLabel="Sign me up"
|
||||
link="/signup"
|
||||
demo={false}
|
||||
/>
|
||||
</section>
|
||||
@@ -0,0 +1,213 @@
|
||||
<script>
|
||||
import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
|
||||
import PageHeader from '$lib/PageHeader/PageHeader.svelte';
|
||||
|
||||
const benefitDetails = [
|
||||
{
|
||||
icon: 'personalised.svg',
|
||||
title: 'Personalized Learning',
|
||||
description: 'Offer branded landing pages and multilingual courses for diverse customers.'
|
||||
},
|
||||
{
|
||||
icon: 'structured.svg',
|
||||
title: 'Structured Education',
|
||||
description: 'Create engaging courses with AI-assisted content generation.'
|
||||
},
|
||||
{
|
||||
icon: 'simplified.svg',
|
||||
title: 'Simplified Management',
|
||||
description:
|
||||
'Centralize and easily manage, share, and distribute all customer education materials.'
|
||||
}
|
||||
];
|
||||
|
||||
const featureDetails = [
|
||||
{
|
||||
icon: 'landing-i.svg',
|
||||
img: 'landing.svg',
|
||||
title: 'Dedicated landing page',
|
||||
description:
|
||||
'We give you a customisable landing page that can be shared with your customers who are interested in learning about your products'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
icon: 'globe.svg',
|
||||
img: 'language.svg',
|
||||
title: 'Multi language support',
|
||||
description:
|
||||
'We support 6 languages and you can deploy courses in different languages to support different demographics'
|
||||
},
|
||||
{
|
||||
icon: 'paths.svg',
|
||||
img: 'pathways.svg',
|
||||
title: 'Pathways',
|
||||
description:
|
||||
'With the introduction of pathways, you can group multiple courses into one comprehensive learning pathway'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Customer Education | ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="flex flex-col justify-center items-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"
|
||||
>
|
||||
<div class="bg-[#DCE5FF] py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
|
||||
<p class=" text-sm md:text-base text-[#4B5563] text-center font-medium">
|
||||
Solution for Customer Education
|
||||
</p>
|
||||
</div>
|
||||
<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-screen-xl 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 lg:text-7xl md:text-6xl font-bold text-slate-900 lg:text-center"
|
||||
>
|
||||
Drive retention and revenue with
|
||||
<span class="text-blue-700 relative">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>
|
||||
</div>
|
||||
<a
|
||||
href="/signup"
|
||||
target="_blank"
|
||||
class="py-5 px-6 bg-[#1D4ED8] border-transparent outline-transparent rounded-lg text-white text-lg font-semibold"
|
||||
>
|
||||
Get Started for Free 🚀
|
||||
</a>
|
||||
</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"
|
||||
>
|
||||
<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 md:text-base font-medium">Our benefits</p>
|
||||
</div>
|
||||
<div
|
||||
class="lg:w-full max-w-screen-xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
|
||||
>
|
||||
<h1 class="text-3xl md:text-5xl font-bold">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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full max-w-screen-xl flex lg:flex-row flex-col lg:justify-between justify-start gap-6 lg:items-center items-start"
|
||||
>
|
||||
{#each benefitDetails as benefits}
|
||||
<div class="w-full md:p-6 p-4 border border-[#D9E0F5] rounded-2xl flex flex-col gap-y-6">
|
||||
<img
|
||||
class="w-[48px] h-[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">
|
||||
<h1 class="text-xl font-medium">{benefits.title}</h1>
|
||||
|
||||
<div class="flex flex-row justify-start items-start gap-x-3">
|
||||
<p class="leading-8 text-gray-500 font-[#656565] font-light">
|
||||
{benefits.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</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"
|
||||
>
|
||||
<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 md:text-base text-[#4B5563] text-center font-medium">
|
||||
Explore our features
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="lg:w-full max-w-screen-xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
|
||||
>
|
||||
<h1 class="text-3xl md:text-5xl font-bold">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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full max-w-screen-xl flex flex-col justify-start items-center lg:gap-y-24 gap-y-16"
|
||||
>
|
||||
{#each featureDetails as feature, i}
|
||||
<div
|
||||
class="w-full lg:w-[70%] flex lg:flex-row {i % 2 !== 0
|
||||
? 'lg:flex-row-reverse'
|
||||
: ''} flex-col lg:justify-between justify-start lg:items-center items-start gap-10"
|
||||
>
|
||||
<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">
|
||||
<h1 class="font-bold text-4xl">{feature.title}</h1>
|
||||
<p class="leading-8 text-lg text-gray-500">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="py-4 px-8 border border-[#1D4ED8] outline-transparent rounded text-[#1D4ED8] text-sm font-semibold"
|
||||
data-cal-config="'layout':'month_view'"
|
||||
data-cal-link="classroomio/demo"
|
||||
>
|
||||
Book a Demo
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img
|
||||
class="w-full lg:max-w-[380px]"
|
||||
src="https://assets.cdn.clsrio.com/www/customer-education/{feature.img}"
|
||||
alt="team management feature ui"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Stop losing customers to your competitors"
|
||||
subText="We help you retain customers by helping them understand your products and services."
|
||||
btnLabel="Book a demo"
|
||||
demo={true}
|
||||
/>
|
||||
</section>
|
||||
@@ -0,0 +1,236 @@
|
||||
<script>
|
||||
import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
|
||||
import PageHeader from '$lib/PageHeader/PageHeader.svelte';
|
||||
|
||||
const benefitDetails = [
|
||||
{
|
||||
icon: 'light-bulb.svg',
|
||||
title: 'Increased Engagement',
|
||||
description: 'Interactive courses and collaborative features keep employees motivated.'
|
||||
},
|
||||
{
|
||||
icon: 'learning.svg',
|
||||
title: 'Streamlined Learning',
|
||||
description: 'Centralized platform for all training materials and progress tracking.'
|
||||
},
|
||||
{
|
||||
icon: 'pie-chart.svg',
|
||||
title: 'Data-Driven Insights',
|
||||
description: 'Gain valuable insights into employee performance and learning patterns.'
|
||||
},
|
||||
{
|
||||
icon: 'paint-brush.svg',
|
||||
title: 'Customizable Experience',
|
||||
description: "Tailor the learning experience to your company's specific needs and branding."
|
||||
}
|
||||
];
|
||||
|
||||
const featureDetails = [
|
||||
{
|
||||
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.'
|
||||
},
|
||||
{
|
||||
icon: 'colour-pallete.svg',
|
||||
img: 'custom.svg',
|
||||
title: 'Custom branding',
|
||||
description:
|
||||
'With our customizable platform, you can set your company logo, brand color and add a custom domain to your employee LMS.'
|
||||
},
|
||||
{
|
||||
icon: 'cup.svg',
|
||||
img: 'progress.svg',
|
||||
title: 'Track employee progress',
|
||||
description: 'You can track the progress of your employees and assist whoever needs help.'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Employee Training | ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="flex flex-col justify-center items-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"
|
||||
>
|
||||
<div class="bg-[#DCE5FF] py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
|
||||
<p class=" text-sm md:text-base text-[#4B5563] text-center font-medium">
|
||||
Unlock your team's potential
|
||||
</p>
|
||||
</div>
|
||||
<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-screen-xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
|
||||
>
|
||||
<h1
|
||||
class="mx-auto m-0 text-4xl lg:text-7xl md:text-6xl font-bold text-slate-900 lg:text-center"
|
||||
>
|
||||
Employee training software for
|
||||
<br /><span class="text-blue-700 relative">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>
|
||||
</div>
|
||||
<a
|
||||
href="/signup"
|
||||
target="_blank"
|
||||
class="py-5 px-6 bg-[#1D4ED8] border-transparent outline-transparent rounded-lg text-white text-lg font-semibold"
|
||||
>
|
||||
Get Started for Free 🚀
|
||||
</a>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<section
|
||||
class="w-full max-w-screen-xl 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"
|
||||
>
|
||||
<div class="w-full lg:w-[35%] gap-y-4 flex flex-col items-start justify-start">
|
||||
<div class="w-fit py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
|
||||
<p class=" text-sm md:text-base font-medium">Amazing benefits</p>
|
||||
</div>
|
||||
|
||||
<div class="md:w-full flex flex-col items-start justify-start gap-y-4">
|
||||
<h1 class="font-bold text-4xl">Unlock your team's potential</h1>
|
||||
<p class="leading-8 text-lg 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"
|
||||
>
|
||||
{#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"
|
||||
>
|
||||
<img
|
||||
class="w-[48px] h-[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">
|
||||
<h1 class="text-xl font-medium">{benefits.title}</h1>
|
||||
<p class="leading-8 text-gray-500 font-[#656565] font-light">
|
||||
{benefits.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</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"
|
||||
>
|
||||
<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 md:text-base text-[#4B5563] text-center font-medium">
|
||||
Explore our features
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="lg:w-full max-w-screen-xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
|
||||
>
|
||||
<h1 class="text-3xl md:text-5xl font-bold">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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full max-w-screen-xl flex flex-col justify-start items-center lg:gap-y-24 gap-16 p-2"
|
||||
>
|
||||
{#each featureDetails as feature, i}
|
||||
<div
|
||||
class="w-full lg:w-[70%] flex lg:flex-row {i % 2 !== 0
|
||||
? 'lg:flex-row-reverse'
|
||||
: ''} flex-col justify-between lg:items-center items-start gap-10"
|
||||
>
|
||||
<div
|
||||
class="w-fit max-w-sm lg:w-[40%] lg:gap-y-6 gap-y-3 flex flex-col items-start justify-start"
|
||||
>
|
||||
<img
|
||||
class="w-[48px] h-[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">
|
||||
<h1 class="font-bold text-4xl">{feature.title}</h1>
|
||||
<p class="leading-8 text-lg text-gray-500">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="py-4 px-8 border border-[#1D4ED8] outline-transparent rounded text-[#1D4ED8] text-sm font-semibold"
|
||||
data-cal-config="'layout':'month_view'"
|
||||
data-cal-link="classroomio/demo"
|
||||
>
|
||||
Book a Demo
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img
|
||||
class="w-full lg:max-w-[380px]"
|
||||
src="https://assets.cdn.clsrio.com/www/employee-training/{feature.img}"
|
||||
alt="team management feature ui"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</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"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-screen-xl flex lg:flex-row-reverse flex-col-reverse lg:justify-between justify-start lg:items-center items-start gap-y-8"
|
||||
>
|
||||
<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="font-bold text-4xl text-white">
|
||||
Did you know you can request for custom features?
|
||||
</h1>
|
||||
<p class="leading-8 text-[#DEDEDE] text-xl font-light">
|
||||
Companies get the opportunity to request custom features from us.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href="/demo"
|
||||
target="_blank"
|
||||
class="py-4 px-8 border border-tranparent outline-transparent bg-white rounded text-[#040F2D] text-sm font-semibold"
|
||||
>
|
||||
Talk to sales
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<img
|
||||
class="size-96"
|
||||
src="https://assets.cdn.clsrio.com/www/employee-training/bro.svg"
|
||||
alt="male and female in an office"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Give your team the training they deserve"
|
||||
subText="It's free to sign up and start getting value out of the product."
|
||||
btnLabel="Sign me up"
|
||||
link="/signup"
|
||||
demo={false}
|
||||
/>
|
||||
</section>
|
||||
@@ -0,0 +1,11 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { client } from '$lib/utils/posthog';
|
||||
|
||||
export const load = ({ request }) => {
|
||||
client.capture({
|
||||
distinctId: request.headers.get('x-forwarded-for') || new Date().getTime().toString(),
|
||||
event: 'cal.com page visited'
|
||||
});
|
||||
|
||||
redirect(307, 'https://cal.com/classroomio/demo');
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const load = async () => {
|
||||
redirect(307, 'https://docs.google.com/presentation/d/1eqvNPNk167ZcP21gZGVAatdDpWAFL9lfmWJHHrzsVFc');
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { client } from '$lib/utils/posthog';
|
||||
|
||||
export const load = ({ request }) => {
|
||||
client.capture({
|
||||
distinctId: request.headers.get('x-forwarded-for') || new Date().getTime().toString(),
|
||||
event: 'discord page visited'
|
||||
});
|
||||
|
||||
redirect(307, 'https://discord.gg/dRmxBpJw59');
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
<slot />
|
||||
@@ -0,0 +1,11 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { client } from '$lib/utils/posthog';
|
||||
|
||||
export const load = async ({ request }) => {
|
||||
client.capture({
|
||||
distinctId: request.headers.get('x-forwarded-for') || new Date().getTime().toString(),
|
||||
event: 'github page visited'
|
||||
});
|
||||
|
||||
redirect(307, 'https://github.com/rotimi-best/classroomio');
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const load = async () => {
|
||||
redirect(307, 'https://t.me/thebestafricans');
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
import { dev } from '$app/environment';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const load = async () => {
|
||||
const url = dev ? 'http://localhost:5173' : 'https://app.classroomio.com';
|
||||
|
||||
redirect(307, `${url}/org/*/courses?create=true`);
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const load = async () => {
|
||||
redirect(307, 'https://www.producthunt.com/posts/classroomio-2');
|
||||
};
|
||||
@@ -0,0 +1,14 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { client } from '$lib/utils/posthog';
|
||||
|
||||
export const load = async ({ request }) => {
|
||||
client.capture({
|
||||
distinctId: request.headers.get('x-forwarded-for') || new Date().getTime().toString(),
|
||||
event: 'privacy page visited'
|
||||
});
|
||||
|
||||
redirect(
|
||||
307,
|
||||
'https://app.enzuzo.com/policies/privacy/958fc978-5477-11ee-a03b-7b111830c594'
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { client } from '$lib/utils/posthog';
|
||||
|
||||
export const load = ({ request }) => {
|
||||
client.capture({
|
||||
distinctId: request.headers.get('x-forwarded-for') || new Date().getTime().toString(),
|
||||
event: 'signup'
|
||||
});
|
||||
|
||||
redirect(307, 'https://app.classroomio.com/signup');
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { client } from '$lib/utils/posthog';
|
||||
|
||||
export const load = async ({ request }) => {
|
||||
client.capture({
|
||||
distinctId: request.headers.get('x-forwarded-for') || new Date().getTime().toString(),
|
||||
event: 'privacy page visited'
|
||||
});
|
||||
|
||||
redirect(307, 'https://app.enzuzo.com/policies/tos/958fc978-5477-11ee-a03b-7b111830c594');
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const load = async () => {
|
||||
redirect(307, 'https://form.classroomio.com/f/1v25DtmN');
|
||||
};
|
||||
@@ -0,0 +1,39 @@
|
||||
<script>
|
||||
import { dev } from '$app/environment';
|
||||
import { page } from '$app/stores';
|
||||
import Footer from '$lib/Footer/Footer.svelte';
|
||||
import Navigation from '$lib/Navigation/Navigation.svelte';
|
||||
import NotFound from '$lib/NotFound/NotFound.svelte';
|
||||
import extend from 'just-extend';
|
||||
import { onMount } from 'svelte';
|
||||
import { MetaTags } from 'svelte-meta-tags';
|
||||
import PageTransition from './transition.svelte';
|
||||
|
||||
import '../app.css';
|
||||
|
||||
export let data;
|
||||
|
||||
onMount(() => {
|
||||
if (dev) {
|
||||
localStorage.setItem('umami.disabled', '1');
|
||||
}
|
||||
});
|
||||
|
||||
$: metaTags = extend(true, {}, data.baseMetaTags, $page.data.pageMetaTags);
|
||||
</script>
|
||||
|
||||
<MetaTags {...metaTags} />
|
||||
|
||||
<div class="overflow-hidden bg-white">
|
||||
<Navigation />
|
||||
|
||||
<PageTransition url={data.url}>
|
||||
{#if $page.status === 404}
|
||||
<NotFound className="mt-5" />
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
</PageTransition>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
@@ -0,0 +1,50 @@
|
||||
import type { MetaTagsProps } from 'svelte-meta-tags';
|
||||
|
||||
export const prerender = true;
|
||||
|
||||
export function load({ url }) {
|
||||
return {
|
||||
baseMetaTags: getBaseMetaTags(url),
|
||||
url: url.pathname
|
||||
};
|
||||
}
|
||||
|
||||
function getBaseMetaTags(url: URL) {
|
||||
const metatags = Object.freeze({
|
||||
title: 'ClassroomIO | The Open Source Learning Management System for Companies',
|
||||
description:
|
||||
'A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations',
|
||||
canonical: new URL(url.pathname, url.origin).href,
|
||||
openGraph: {
|
||||
type: 'website',
|
||||
url: new URL(url.pathname, url.origin).href,
|
||||
locale: 'en_IE',
|
||||
title: 'ClassroomIO | The Open Source Learning Management System for Companies',
|
||||
description:
|
||||
'A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations',
|
||||
siteName: 'ClassroomIO',
|
||||
images: [
|
||||
{
|
||||
url: 'https://brand.cdn.clsrio.com/og/classroomio-og.png',
|
||||
alt: 'ClassroomIO OG Image',
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
secureUrl: 'https://brand.cdn.clsrio.com/og/classroomio-og.png',
|
||||
type: 'image/jpeg'
|
||||
}
|
||||
]
|
||||
},
|
||||
twitter: {
|
||||
handle: '@classroomio',
|
||||
site: '@classroomio',
|
||||
cardType: 'summary_large_image' as const,
|
||||
title: 'ClassroomIO | The Open Source Learning Management System for Companies',
|
||||
description:
|
||||
'A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations',
|
||||
image: 'https://brand.cdn.clsrio.com/og/classroomio-og.png',
|
||||
imageAlt: 'ClassroomIO OG Image'
|
||||
}
|
||||
}) satisfies MetaTagsProps;
|
||||
|
||||
return metatags;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
<script>
|
||||
import Hero from '$lib/Home/Hero.svelte';
|
||||
import CoreFeatures from '$lib/Home/CoreFeatures.svelte';
|
||||
import Faq from '$lib/Home/Faq.svelte';
|
||||
import StudentDashboard from '$lib/Home/StudentDashboard.svelte';
|
||||
import MoreFeatures from '$lib/Home/MoreFeatures.svelte';
|
||||
import Testimonial from '$lib/Home/Testimonial.svelte';
|
||||
import { PUBLIC_ENABLE_FAQ } from '$env/static/public';
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
onMount(() => {
|
||||
console.log('Welcome to CIO');
|
||||
});
|
||||
</script>
|
||||
|
||||
<Hero />
|
||||
<CoreFeatures />
|
||||
<StudentDashboard />
|
||||
<Testimonial />
|
||||
<MoreFeatures />
|
||||
|
||||
{#if PUBLIC_ENABLE_FAQ}
|
||||
<Faq />
|
||||
{/if}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { json } from '@sveltejs/kit';
|
||||
import type { BlogPost } from '$lib/types';
|
||||
|
||||
async function getBlogPosts() {
|
||||
let blogPosts: BlogPost[] = [];
|
||||
|
||||
const paths = import.meta.glob('/src/blog/*.md', { eager: true });
|
||||
|
||||
for (const path in paths) {
|
||||
const file = paths[path];
|
||||
const slug = path.split('/').at(-1)?.replace('.md', '');
|
||||
|
||||
if (file && typeof file === 'object' && 'metadata' in file && slug) {
|
||||
const metadata = file.metadata as Omit<BlogPost, 'slug'>;
|
||||
const blogPost = { ...metadata, slug } satisfies BlogPost;
|
||||
blogPost.published && blogPosts.push(blogPost);
|
||||
}
|
||||
}
|
||||
|
||||
blogPosts = blogPosts.sort(
|
||||
(first, second) => new Date(second.date).getTime() - new Date(first.date).getTime()
|
||||
);
|
||||
|
||||
return blogPosts;
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
const blogPosts = await getBlogPosts();
|
||||
|
||||
return json(blogPosts);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { PUBLIC_SERVER_URL } from '$env/static/public';
|
||||
|
||||
const sendEmail = async (subject: string, content: string, replyTo?: string) => {
|
||||
try {
|
||||
const response = await fetch(`${PUBLIC_SERVER_URL}/sendEmail`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify([
|
||||
{
|
||||
from: `"ClassroomIO Support" <[email protected]>`,
|
||||
to: '[email protected]',
|
||||
subject,
|
||||
content,
|
||||
replyTo
|
||||
}
|
||||
])
|
||||
});
|
||||
|
||||
const responseData = await response.json();
|
||||
console.log('Emails sent successfully:', responseData);
|
||||
|
||||
return 'sent';
|
||||
} catch (error) {
|
||||
console.error('Error sending email', error);
|
||||
return 'failed';
|
||||
}
|
||||
};
|
||||
|
||||
export async function POST({ request }) {
|
||||
try {
|
||||
const { title, description, replyTo } = await request.json();
|
||||
console.log(title, description, replyTo);
|
||||
const result = await sendEmail(title, description, replyTo);
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
message: 'Issue created successfully',
|
||||
issue: result
|
||||
}),
|
||||
{
|
||||
status: 201,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}
|
||||
);
|
||||
} catch (error) {
|
||||
console.log('errors from api', error);
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
message: 'Failed to create issue',
|
||||
error: (error as Error)?.message
|
||||
}),
|
||||
{
|
||||
status: 500,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
<script>
|
||||
import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
|
||||
import PageHeader from '$lib/PageHeader/PageHeader.svelte';
|
||||
import BlogListItem from '$lib/Blog/BlogListItem.svelte';
|
||||
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Blog | ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<section>
|
||||
<PageHeader className="flex flex-col items-center justify-center text-center">
|
||||
<h1
|
||||
class="mx-auto text-4xl md:text-7xl lg:text-6xl font-bold text-slate-900 flex flex-col items-center"
|
||||
>
|
||||
<span>What's new on</span>
|
||||
<span class="text-blue-700 relative">ClassroomIO?</span>
|
||||
</h1>
|
||||
<p class="w-[90%] md:w-[60%] text-center font-normal text-lg text-slate-700 mt-10 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%]">
|
||||
{#each data.posts as post}
|
||||
<li class="py-10 w-full border-b border-gray-200">
|
||||
<BlogListItem {post} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Ready To Scale Your Training Efforts?"
|
||||
subText="It's free to sign up and start getting value out of the product."
|
||||
btnLabel="Sign me up"
|
||||
link="/signup"
|
||||
demo={false}
|
||||
/>
|
||||
</section>
|
||||
@@ -0,0 +1,8 @@
|
||||
import type { BlogPost } from '$lib/types';
|
||||
|
||||
/** @type {import('./$types').PageLoad} */
|
||||
export async function load({ fetch }) {
|
||||
const response = await fetch('api/blog');
|
||||
const posts: BlogPost[] = await response.json();
|
||||
return { posts };
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
<script lang="ts">
|
||||
import { ChevronLeft } from 'carbon-icons-svelte';
|
||||
import Chip from '$lib/Chip/Chip.svelte';
|
||||
import { formatDate } from '$lib/utils/formatDate';
|
||||
import BlogListItem from '$lib/Blog/BlogListItem.svelte';
|
||||
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<div class=" mt-[10%] md:mt-16">
|
||||
{#if data}
|
||||
<article class="py-16">
|
||||
<!-- Title -->
|
||||
<hgroup class="flex flex-col items-center justify-center text-center w-full">
|
||||
<p class="text-sm text-gray-500">{formatDate(data.meta.date)}</p>
|
||||
<p class="font-bold text-3xl py-2 text-center md:w-[60%]">{@html data.meta.title}</p>
|
||||
</hgroup>
|
||||
<main class="mx-auto max-w-screen-md px-4 lg:px-8">
|
||||
<div class="flex items-center justify-start gap-4 my-2 border-y border-gray-200 py-4">
|
||||
<img loading="lazy" src={data.meta.avatar} alt="avatar" class="w-10 h-10 rounded-full" />
|
||||
<span>
|
||||
<p class="font-semibold">{data.meta.author}</p>
|
||||
<p class="text-gray-500">{data.meta.role}</p>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Post -->
|
||||
<div class="prose pt-2 pb-4 border-b-2 border-gray-200">
|
||||
<svelte:component this={data.content} />
|
||||
<!-- Tags -->
|
||||
<div class="flex gap-2 py-4">
|
||||
{#each data.meta.tags as tag}
|
||||
<Chip label={tag} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if data.relatedPosts.length > 0}
|
||||
<section class="mt-5">
|
||||
<p class="text-xl font-semibold">Related Posts</p>
|
||||
<ul class="flex items-start justify-start gap-3 overflow-x-scroll">
|
||||
{#each data.relatedPosts as post}
|
||||
<li class="py-10 min-w-[80%] sm:w-80 sm:min-w-0">
|
||||
<BlogListItem {post} isRecommended />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<a
|
||||
href="/blog"
|
||||
class="flex font-medium items-center gap-2 text-slate-700 text-lg underline my-10"
|
||||
>
|
||||
<ChevronLeft class=" w-6 h-6 font-medium" /> Back to all posts
|
||||
</a>
|
||||
</main>
|
||||
</article>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
article {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
:global(.prose a) {
|
||||
text-decoration: underline;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:global(.prose .gallery img) {
|
||||
max-height: 300px;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
:global(.prose .gallery) {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
import { error } from '@sveltejs/kit';
|
||||
import type { BlogPost, RawBlogPost } from '$lib/types';
|
||||
import type { MetaTagsProps } from 'svelte-meta-tags';
|
||||
|
||||
/** @type {import('./$types').PageLoad} */
|
||||
export async function load({ params, fetch }) {
|
||||
try {
|
||||
const response = await fetch('/api/blog');
|
||||
const posts: BlogPost[] = await response.json();
|
||||
|
||||
const blog: RawBlogPost = await import(`../../../blog/${params.slug}.md`);
|
||||
|
||||
return {
|
||||
content: blog.default,
|
||||
meta: blog.metadata,
|
||||
slug: params.slug,
|
||||
pageMetaTags: getPageMetaTags(blog),
|
||||
relatedPosts: getRelatedPosts(posts, blog.metadata.tags, params.slug)
|
||||
};
|
||||
} catch (e) {
|
||||
error(404, `Could not find ${params.slug}`);
|
||||
}
|
||||
}
|
||||
|
||||
function getRelatedPosts(posts: BlogPost[], tags: string[], slug: string) {
|
||||
const related = posts
|
||||
.filter((post) => post.tags.some((tag) => tags.includes(tag)) && post.slug !== slug)
|
||||
.map((post) => ({
|
||||
...post,
|
||||
rank: post.tags.filter((tag) => tags.includes(tag)).length
|
||||
}))
|
||||
.sort((a, b) => b.rank - a.rank);
|
||||
|
||||
const topPosts = related.filter((post) => post.rank > 1);
|
||||
|
||||
if (topPosts.length > 2) {
|
||||
return topPosts.sort(() => Math.random() - 0.5).slice(0, 2);
|
||||
}
|
||||
|
||||
return related.slice(0, 2);
|
||||
}
|
||||
|
||||
function getPageMetaTags(blog: RawBlogPost): MetaTagsProps {
|
||||
return Object.freeze({
|
||||
title: blog.metadata.title,
|
||||
description: blog.metadata.description,
|
||||
openGraph: {
|
||||
title: blog.metadata.title,
|
||||
description: blog.metadata.description,
|
||||
images: [
|
||||
{
|
||||
url: blog.metadata.imageUrl,
|
||||
alt: blog.metadata.title,
|
||||
width: 280,
|
||||
height: 200,
|
||||
secureUrl: blog.metadata.imageUrl,
|
||||
type: 'image/jpeg'
|
||||
}
|
||||
]
|
||||
},
|
||||
twitter: {
|
||||
handle: '@classroomio',
|
||||
site: '@classroomio',
|
||||
cardType: 'summary_large_image' as const,
|
||||
title: blog.metadata.title,
|
||||
description: blog.metadata.description,
|
||||
image: blog.metadata.imageUrl,
|
||||
imageAlt: `${blog.metadata.title} OG`
|
||||
}
|
||||
}) satisfies MetaTagsProps;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export const prerender = true;
|
||||
@@ -0,0 +1,106 @@
|
||||
<script lang="ts">
|
||||
import ArrowUpRight from 'carbon-icons-svelte/lib/ArrowUpRight.svelte';
|
||||
import PageHeader from '$lib/PageHeader/PageHeader.svelte';
|
||||
|
||||
import FeedbackForm from '$lib/Contact/FeedbackForm.svelte';
|
||||
import HelpForm from '$lib/Contact/HelpForm.svelte';
|
||||
import { FORM_TYPE } from '$lib/types';
|
||||
import type { FORM_TYPE_KEY } from '$lib/types';
|
||||
|
||||
let currentForm: FORM_TYPE_KEY;
|
||||
|
||||
const formList = [
|
||||
{
|
||||
id: FORM_TYPE.BUG,
|
||||
title: '🐜 I want to report a bug',
|
||||
to: 'https://github.com/classroomio/classroomio/issues/new?assignees=&labels=bug&projects=&template=bug-report.yml'
|
||||
},
|
||||
{
|
||||
id: FORM_TYPE.HELP,
|
||||
title: '🙋♂️ I need help'
|
||||
},
|
||||
{
|
||||
id: FORM_TYPE.FEATURE,
|
||||
title: '📮 I want to request a feature',
|
||||
to: 'https://github.com/classroomio/classroomio/issues/new?assignees=&labels=&projects=&template=feature-request.yml'
|
||||
},
|
||||
{
|
||||
id: FORM_TYPE.FEEDBACK,
|
||||
title: '💭 I have feedback'
|
||||
}
|
||||
];
|
||||
|
||||
const onChange = (form: FORM_TYPE_KEY, to?: string) => {
|
||||
currentForm = form;
|
||||
|
||||
if (to) {
|
||||
window.open(to, '_blank');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Contact us | ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<section>
|
||||
<PageHeader className="flex flex-col items-center justify-center bg-[#F5F8FE] text-center">
|
||||
<div class="mb-2 ml-[5%] lg:ml-0 flex w-full items-center justify-center">
|
||||
<span
|
||||
style="color: rgb(75, 85, 99);"
|
||||
class="rounded-full border-2 border-[#C2D2FF] px-4 py-1 text-sm font-medium bg-[#DCE5FF] text-blue-700"
|
||||
>
|
||||
Contact Us
|
||||
</span>
|
||||
</div>
|
||||
<h1
|
||||
class="mx-auto text-4xl md:text-7xl lg:text-6xl font-bold text-slate-900 flex flex-col items-center"
|
||||
>
|
||||
<span>Get in touch with <span class="text-blue-700">Us</span></span>
|
||||
</h1>
|
||||
<p
|
||||
class="w-[90%] md:w-[60%] max-w-3xl text-center font-normal text-lg text-slate-700 mt-10 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="my-20 mx-auto">
|
||||
<!-- Content here -->
|
||||
<div
|
||||
class="mx-auto w-[90%] lg:w-[60%] place-items-center grid grid-cols-1 md:grid-cols-2 gap-10"
|
||||
>
|
||||
{#each formList as list}
|
||||
<button
|
||||
on:click={() => onChange(list.id, list.to)}
|
||||
class="text-start border-[1.5px] w-full rounded-md p-3 {currentForm === list.id
|
||||
? `border-[#0233BD]`
|
||||
: `border-gray-200`} flex items-center justify-between"
|
||||
>
|
||||
<p class="text-lg text-slate-700 font-normal">{list.title}</p>
|
||||
{#if list.to}
|
||||
<ArrowUpRight size={16} />
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if currentForm === FORM_TYPE[currentForm]}
|
||||
<div class="mx-auto w-[90%] lg:w-[60%] px-5">
|
||||
{#if currentForm === FORM_TYPE.HELP}
|
||||
<HelpForm />
|
||||
{:else if currentForm === FORM_TYPE.FEEDBACK}
|
||||
<FeedbackForm />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<!-- <PageSignupCTA
|
||||
header="Scale your Teaching Business in Minutes"
|
||||
subText="Don't wait, let's get you started."
|
||||
btnLabel="Register"
|
||||
link="/teach/register"
|
||||
demo={false}
|
||||
/> -->
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script>
|
||||
import PageHeader from '$lib/PageHeader/PageHeader.svelte';
|
||||
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Our Open-source Friends | ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<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"
|
||||
>
|
||||
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>
|
||||
</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"
|
||||
>
|
||||
<div>
|
||||
<div class="text-xl font-medium leading-6 text-gray-900 pb-1 px-6">
|
||||
{friend.name}
|
||||
</div>
|
||||
<p class="px-6 mt-2 text-gray-600 text-sm">
|
||||
{friend.description}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-left px-6 mt-3">
|
||||
<a
|
||||
href={friend.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-block w-full"
|
||||
>
|
||||
<button
|
||||
class="font-semibold text-base text-white bg-gray-800 hover:bg-gray-900 hover:shadow-xl transition-all delay-100 px-4 py-3 rounded-md"
|
||||
>
|
||||
Learn more
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
@@ -0,0 +1,100 @@
|
||||
import type { OssFriend } from '$lib/types';
|
||||
|
||||
export async function load() {
|
||||
const friends: OssFriend[] = [
|
||||
{
|
||||
name: 'Appsmith',
|
||||
description: 'Build custom software on top of your data.',
|
||||
href: 'https://www.appsmith.com'
|
||||
},
|
||||
{
|
||||
name: 'BoxyHQ',
|
||||
description:
|
||||
'BoxyHQ’s suite of APIs for security and privacy helps engineering teams build and ship compliant cloud applications faster.',
|
||||
href: 'https://boxyhq.com'
|
||||
},
|
||||
{
|
||||
name: 'Cal.com',
|
||||
description:
|
||||
'Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.',
|
||||
href: 'https://cal.com'
|
||||
},
|
||||
{
|
||||
name: 'Crowd.dev',
|
||||
description:
|
||||
'Centralize community, product, and customer data to understand which companies are engaging with your open source project.',
|
||||
href: 'https://www.crowd.dev'
|
||||
},
|
||||
{
|
||||
name: 'Documenso',
|
||||
description:
|
||||
'The Open-Source DocuSign Alternative. We aim to earn your trust by enabling you to self-host the platform and examine its inner workings.',
|
||||
href: 'https://documenso.com'
|
||||
},
|
||||
{
|
||||
name: 'Dub',
|
||||
description:
|
||||
'Dub is an open-source link management tool for modern marketing teams to create, share, and track short links.',
|
||||
href: 'https://dub.co'
|
||||
},
|
||||
{
|
||||
name: 'Formbricks',
|
||||
description:
|
||||
'Survey granular user segments at any point in the user journey. Gather up to 6x more insights with targeted micro-surveys. All open-source.',
|
||||
href: 'https://formbricks.com'
|
||||
},
|
||||
{
|
||||
name: 'Hanko',
|
||||
description:
|
||||
'Open-source authentication and user management for the passkey era. Integrated in minutes, for web and mobile apps.',
|
||||
href: 'https://www.hanko.io'
|
||||
},
|
||||
{
|
||||
name: 'Infisical',
|
||||
description:
|
||||
'Open source, end-to-end encrypted platform that lets you securely manage secrets and configs across your team, devices, and infrastructure.',
|
||||
href: 'https://infisical.com'
|
||||
},
|
||||
{
|
||||
name: 'Novu',
|
||||
description:
|
||||
'The open-source notification infrastructure for developers. Simple components and APIs for managing all communication channels in one place.',
|
||||
href: 'https://novu.co'
|
||||
},
|
||||
{
|
||||
name: 'OpenBB',
|
||||
description:
|
||||
'Democratizing investment research through an open source financial ecosystem. The OpenBB Terminal allows everyone to perform investment research, from everywhere.',
|
||||
href: 'https://openbb.co'
|
||||
},
|
||||
{
|
||||
name: 'OpenStatus',
|
||||
description: 'Open-source monitoring platform with beautiful status pages.',
|
||||
href: 'https://www.openstatus.dev'
|
||||
},
|
||||
{
|
||||
name: 'Papermark',
|
||||
description:
|
||||
'Open-Source Docsend Alternative to securely share documents with real-time analytics.',
|
||||
href: 'https://papermark.io'
|
||||
},
|
||||
{
|
||||
name: 'Trigger',
|
||||
description:
|
||||
'Create long-running Jobs directly in your codebase with features like API integrations, webhooks, scheduling and delays.',
|
||||
href: 'https://trigger.dev'
|
||||
},
|
||||
{
|
||||
name: 'UnInbox',
|
||||
description: 'Open Source Email + Chat communication platform',
|
||||
href: 'https://uninbox.com'
|
||||
},
|
||||
{
|
||||
name: 'Webstudio',
|
||||
description:
|
||||
'Webstudio visually translates CSS without obscuring it, giving designers superpowers that were exclusive to developers in the past.',
|
||||
href: 'https://webstudio.is'
|
||||
}
|
||||
];
|
||||
return { friends };
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export const prerender = false;
|
||||
@@ -0,0 +1,209 @@
|
||||
<script>
|
||||
import { fade } from 'svelte/transition';
|
||||
import Checkmark from 'carbon-icons-svelte/lib/Checkmark.svelte';
|
||||
import { PLANS } from '@cio/utils/plans';
|
||||
import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
|
||||
import PageHeader from '$lib/PageHeader/PageHeader.svelte';
|
||||
|
||||
let isYearlyPlan = false;
|
||||
|
||||
function toggleIsYearlyPlan() {
|
||||
isYearlyPlan = !isYearlyPlan;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Pricing | ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<section>
|
||||
<PageHeader className="flex flex-col items-center justify-center text-center">
|
||||
<h1
|
||||
class="mx-auto text-4xl md:text-7xl lg:text-6xl font-bold text-slate-900 flex flex-col items-center"
|
||||
>
|
||||
<span>There is room for</span>
|
||||
<span class="text-blue-700 relative">Everyone.</span>
|
||||
</h1>
|
||||
<p class="w-[90%] md:w-[60%] text-center font-normal text-lg text-slate-700 mt-10 lg:mt-7">
|
||||
You get a customizable LMS, AI integration for productive educators and many more...
|
||||
</p>
|
||||
<div class="relative mt-10 flex items-center rounded-[30px] border-[2px] p-[2px] lg:scale-100">
|
||||
<button
|
||||
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"
|
||||
on:click={toggleIsYearlyPlan}>Monthly</button
|
||||
>
|
||||
<button
|
||||
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"
|
||||
on:click={toggleIsYearlyPlan}>Annually</button
|
||||
>
|
||||
<div
|
||||
class="absolute right-[-40%] top-[-85%] scale-[90%] rounded-full bg-[#006600] px-3.5 py-1.5 text-xs text-white lg:right-[-43%] lg:top-[-75%] lg:scale-100"
|
||||
>
|
||||
Save 2 months
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script
|
||||
src="https://widget.senja.io/widget/b43ac234-427e-4d6f-8c23-633208154e54/platform.js"
|
||||
type="text/javascript"
|
||||
async
|
||||
></script>
|
||||
<div
|
||||
class="senja-embed mt-5"
|
||||
data-id="b43ac234-427e-4d6f-8c23-633208154e54"
|
||||
data-mode="shadow"
|
||||
data-lazyload="false"
|
||||
style="display: block;"
|
||||
></div>
|
||||
</PageHeader>
|
||||
|
||||
<div class="flex flex-col items-center justify-center px-[6%]">
|
||||
<div class="isolate mt-10 grid grid-cols-1 gap-10 lg:grid-cols-3">
|
||||
<!-- Card 1 -->
|
||||
<div class="max-w-xl rounded-3xl p-8 ring-1 ring-gray-200 lg:max-w-sm xl:p-9">
|
||||
<p class="text-lg font-semibold leading-8 text-gray-900 lg:text-xl">
|
||||
{PLANS.BASIC.NAME}
|
||||
</p>
|
||||
|
||||
<p class="lg:text-base mt-4 text-sm font-light leading-6 text-gray-500 lg:leading-6">
|
||||
{PLANS.BASIC.DESCRIPTION}
|
||||
</p>
|
||||
|
||||
<p class="mt-6 flex items-baseline gap-x-1 text-4xl font-medium lg:text-4xl">
|
||||
${PLANS.BASIC.PRICE.MONTHLY}
|
||||
</p>
|
||||
<span class="text-base">Free forever</span>
|
||||
|
||||
<a
|
||||
class="text-base mt-10 block w-full rounded-md bg-slate-900 py-3 text-center font-medium text-white hover:bg-slate-700 lg:rounded-md lg:py-3 lg:text-lg lg:font-semibold"
|
||||
href={PLANS.BASIC.CTA.LINK}
|
||||
target="_blank"
|
||||
>
|
||||
{PLANS.BASIC.CTA.LABEL}
|
||||
</a>
|
||||
|
||||
<ul class="mt-8 space-y-2 text-sm text-gray-600 lg:space-y-5 xl:mt-10">
|
||||
{#each PLANS.BASIC.FEATURES as feature}
|
||||
<li class="flex items-center">
|
||||
<Checkmark
|
||||
size={24}
|
||||
fill="#1D4EE2"
|
||||
class="mr-2 scale-[70%] lg:mr-3 lg:scale-[100%]"
|
||||
/>
|
||||
{feature}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="cio-bg-blue max-w-xl rounded-3xl p-8 lg:max-w-lg xl:p-9">
|
||||
<p class="text-lg font-semibold leading-8 text-white lg:text-xl">
|
||||
{PLANS.EARLY_ADOPTER.NAME}
|
||||
</p>
|
||||
|
||||
<p class="lg:text-base mt-4 text-sm font-light leading-6 text-white lg:leading-6">
|
||||
{PLANS.EARLY_ADOPTER.DESCRIPTION}
|
||||
</p>
|
||||
|
||||
{#key isYearlyPlan}
|
||||
<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>
|
||||
per {isYearlyPlan ? 'year' : 'month'}
|
||||
</span>
|
||||
{/key}
|
||||
|
||||
<a
|
||||
class="text-base mt-10 block w-full rounded-md bg-white py-3 text-center font-medium text-slate-900 hover:bg-indigo-50 lg:rounded-md lg:py-3 lg:text-lg lg:font-semibold"
|
||||
href={PLANS.EARLY_ADOPTER.CTA.LINK}
|
||||
target="_blank"
|
||||
>
|
||||
{PLANS.EARLY_ADOPTER.CTA.LABEL}
|
||||
</a>
|
||||
<ul class="mt-8 space-y-3 text-sm font-light text-white lg:space-y-5 xl:mt-10">
|
||||
{#each PLANS.EARLY_ADOPTER.FEATURES as features}
|
||||
<li class="flex items-center">
|
||||
<Checkmark size={24} fill="#fff" class="mr-2 scale-[70%] lg:mr-3 lg:scale-[100%]" />
|
||||
{features}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="max-w-xl rounded-3xl p-8 ring-1 ring-gray-200 lg:max-w-sm xl:p-9">
|
||||
<p class="text-lg font-semibold leading-8 text-gray-900 lg:text-xl">
|
||||
{PLANS.ENTERPRISE.NAME}
|
||||
</p>
|
||||
<p class="lg:text-base mt-4 text-sm font-light leading-6 text-gray-500 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>
|
||||
<button
|
||||
class="text-base mt-10 w-full rounded-md bg-slate-900 py-3 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'}"}
|
||||
data-cal-link="classroomio/enterprise"
|
||||
>
|
||||
{PLANS.ENTERPRISE.CTA.LABEL}
|
||||
</button>
|
||||
|
||||
<ul class="mt-8 space-y-2 text-sm text-gray-600 lg:space-y-5 xl:mt-10">
|
||||
{#each PLANS.ENTERPRISE.FEATURES as features}
|
||||
<li class="flex items-center">
|
||||
<Checkmark
|
||||
size={24}
|
||||
fill="#1D4EE2"
|
||||
class="mr-2 scale-[70%] lg:mr-3 lg:scale-[100%]"
|
||||
/>
|
||||
{features}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div
|
||||
class="flex flex-col lg:flex-row items-start lg:items-center mx-auto lg:mx-10 mt-[5%] border-[1px] rounded-[30px] py-[10%] lg:py-[5%] px-[10px] lg:px-[30px] lg:w-full md:max-w-[550px] lg:max-w-full"
|
||||
>
|
||||
<div class="mr-5 pl-5">
|
||||
<h2
|
||||
class="text-base lg:text-xl font-semibold font-display leading-8 tracking-wide lg:tracking-tight text-blue-700 mb-0 lg:mb-4"
|
||||
>
|
||||
Hobby
|
||||
</h2>
|
||||
<p
|
||||
class="m-0 lg:mt-1 text-base leading-7 lg:leading-6 text-gray-600"
|
||||
>
|
||||
For personal use. Hobby plan is free for up to 5 courses forever, no
|
||||
credit Card required.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="font-semibold text-base lg:text-base text-white leading-5 mt-5 lg:m-0 p-4 lg:py-5 ml-5 bg-blue-700 rounded-lg lg:rounded-md w-[70%] lg:w-full"
|
||||
>
|
||||
Create a free account
|
||||
</button>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Bring your bootcamp vision online"
|
||||
subText="Try before you buy. No credit card required."
|
||||
btnLabel="Sign up for free"
|
||||
link="/signup"
|
||||
demo={false}
|
||||
/>
|
||||
@@ -0,0 +1,109 @@
|
||||
<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: 'Course Batches',
|
||||
desc: 'A course can be taken in batches, meaning that you can create different cohorts of students within one course. The benefit of this is that you can teach a course multiple times to different groups of students. This is useful mainly for bootcamps and teaching organizations.'
|
||||
},
|
||||
{
|
||||
title: 'Tags',
|
||||
desc: 'With tags you can group your courses into categories. This is useful for organizing your courses and making them easier to find.'
|
||||
},
|
||||
{
|
||||
title: 'API',
|
||||
desc: 'We are working on our public API which allows you to perform CRUD operations against your classroomio organization.'
|
||||
},
|
||||
{
|
||||
title: 'Embedable Course',
|
||||
desc: 'You can embed selected course form ClassroomIO on any website of your choice'
|
||||
},
|
||||
{
|
||||
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.'
|
||||
},
|
||||
{
|
||||
title: 'Analytics',
|
||||
desc: 'Educators can easily track students course completion rating, understand what topics are not clearly understood and much more.'
|
||||
}
|
||||
];
|
||||
</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 @@
|
||||
export const prerender = true;
|
||||
@@ -0,0 +1,227 @@
|
||||
<script lang="ts">
|
||||
import { slide } from 'svelte/transition';
|
||||
import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
|
||||
import PageHeader from '$lib/PageHeader/PageHeader.svelte';
|
||||
|
||||
const whyStart = [
|
||||
{
|
||||
src: '/teach/teach-from-anywhere.svg',
|
||||
header: 'Fully Online; Teach from anywhere',
|
||||
subText:
|
||||
' Facilitate a subject from the comfort of your space, engaging students from highly diverse background'
|
||||
},
|
||||
{
|
||||
src: '/teach/get-paid.svg',
|
||||
header: 'Get paid extra commission',
|
||||
subText:
|
||||
'Get paid for the course you design and earn extra comission based on course perfomance'
|
||||
},
|
||||
{
|
||||
src: '/teach/inspire-learners.svg',
|
||||
header: 'Inspire learners',
|
||||
subText:
|
||||
'Your opportunity to inspire thousands of learners to achieve dreams and academic pursue exellence'
|
||||
}
|
||||
];
|
||||
|
||||
const steps = [
|
||||
{
|
||||
title: 'Sign up',
|
||||
subText: 'Create a free account on our platform by going to classroomio.com/signup'
|
||||
},
|
||||
{
|
||||
title: 'Record a course',
|
||||
subText: 'Prepare your content however you want and then upload them onto our platform.'
|
||||
},
|
||||
{
|
||||
title: 'Launch the course',
|
||||
subText: 'Polish your course, make sure it is ready for students. Then publish it.'
|
||||
},
|
||||
{
|
||||
title: 'Start making sales',
|
||||
subText:
|
||||
'Share your course with your audience and on social media and start earning money on the courses you create'
|
||||
}
|
||||
];
|
||||
|
||||
let faqs = [
|
||||
{
|
||||
question: 'What kind of tutors does ClassroomIO look for?',
|
||||
answer:
|
||||
'We are looking for all kinds of tutors. The most important thing is that you have some experience teaching and you have proven track record of excellent communication',
|
||||
showAnswer: false
|
||||
},
|
||||
{
|
||||
question: 'What equipment do I need to teach on ClassroomIO?',
|
||||
answer: 'You just need internet access and a laptop.',
|
||||
showAnswer: false
|
||||
},
|
||||
{
|
||||
question: 'What happens after I apply?',
|
||||
answer:
|
||||
'We will get your application and review it. You should get a response from us within 2-5 working days depending on the volume of applications',
|
||||
showAnswer: false
|
||||
},
|
||||
{
|
||||
question: 'How much can I earn?',
|
||||
answer:
|
||||
'That depends on how much your course sells for and how many students buy your course. Your income is limitless, you can keep making money while you sleep.',
|
||||
showAnswer: false
|
||||
}
|
||||
];
|
||||
|
||||
function toggleAnswer(index: number) {
|
||||
faqs[index].showAnswer = !faqs[index].showAnswer;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Teach | ClassroomIO</title>
|
||||
<meta property="og:image" itemprop="image" content="https://brand.cdn.clsrio.com/og/teach.png" />
|
||||
<meta property="og:title" content="Teach on ClassroomIO" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="On ClassroomIO you can make side income while doing what you love."
|
||||
/>
|
||||
|
||||
<meta
|
||||
property="og:image:secure_url"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/teach.png"
|
||||
/>
|
||||
|
||||
<meta name="twitter:title" content="Teach on ClassroomIO" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="On ClassroomIO you can make side income while doing what you love."
|
||||
/>
|
||||
<meta name="twitter:image" content="https://brand.cdn.clsrio.com/og/teach.png" />
|
||||
</svelte:head>
|
||||
|
||||
<section>
|
||||
<PageHeader className="flex items-center justify-evenly px-5 flex-wrap text-left">
|
||||
<div>
|
||||
<h1 class="text-5xl font-bold">Teach with us</h1>
|
||||
<p class="my-5 lg:w-[77%] lg:text-left text-center">
|
||||
With ClassroomIO, you can make side income while teaching the subject you love
|
||||
</p>
|
||||
|
||||
<a
|
||||
href="/teach/register"
|
||||
target="_blank"
|
||||
class="w-full block text-center lg:w-[30%] py-3 text-base text-white rounded-md bg-blue-700"
|
||||
>
|
||||
Register
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class=" ">
|
||||
<img src="/teach/teacher-hero.png" alt="" class="w-full" />
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<div class="mt-10 mx-auto">
|
||||
<div class="px-[10%] pb-10 border-b border-slate-100">
|
||||
<h1 class="text-4xl pb-28 text-center font-bold flex gap-3 justify-center items-center">
|
||||
Why you should teach with us? <img src="/teach/star.svg" alt="" />
|
||||
</h1>
|
||||
|
||||
<div class="flex flex-wrap justify-center lg:justify-between mt-10">
|
||||
{#each whyStart as why}
|
||||
<figure
|
||||
class="flex gap-3 flex-col justify-center items-center px-2 w-full h-full max-w-[250px] max-h-[380px] text-center"
|
||||
>
|
||||
<img src={why.src} alt="" class="w-[80px] h-[80px]" />
|
||||
<figcaption>
|
||||
<h1 class="font-bold text-base">{why.header}</h1>
|
||||
<p class="text-sm mt-1">
|
||||
{why.subText}
|
||||
</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-[10%] mt-10 py-10">
|
||||
<h1 class="text-4xl mb-28 text-center font-bold flex gap-3 justify-center items-center">
|
||||
How to get started <img src="/teach/thumbs-up.svg" alt="" />
|
||||
</h1>
|
||||
|
||||
<div class="flex flex-wrap justify-between gap-y-10 mx-auto mt-5">
|
||||
{#each steps as step, i}
|
||||
<div class="lg:max-w-[40%] px-10 py-5">
|
||||
<h1 class="font-bold text-2xl">
|
||||
<span class="px-2 py-1 mr-3 bg-[#F7F7F7] rounded-md">{i + 1}</span>
|
||||
{step.title}
|
||||
</h1>
|
||||
<p class="text-base text-gray-600 mt-5">
|
||||
{step.subText}
|
||||
</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="flex justify-center px-[5%] mt-3">
|
||||
<a
|
||||
href="/teach/register"
|
||||
target="_blank"
|
||||
class="w-full lg:max-w-[20%] py-3 text-base text-white rounded-md bg-blue-700 text-center"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-2 lg:px-[12%] bg-[#F5F8FE] my-10 py-12 h-[75%] lg:h-[80%]">
|
||||
<h1 class="text-2xl text-center font-bold flex gap-3 justify-center items-center">
|
||||
Word from our fufilled facilitators
|
||||
</h1>
|
||||
|
||||
<div
|
||||
class="mt-10 w-full md:w-2/4 mx-auto border shadow-sm bg-white rounded-md text-center py-6 relative before:w-[4.5%] before:absolute before:left-0 before:top-0 before:h-full before:bg-[#0233BD] before:rounded-tl-md before:rounded-bl-md"
|
||||
>
|
||||
<h1 class="text-base font-medium leading-5 w-[77%] mx-auto">
|
||||
With ClassroomIO, I am training over 100 students. I am making more money than expected
|
||||
with little effort and my students are happy. Love the product
|
||||
</h1>
|
||||
<div class="flex flex-row gap-4 justify-center items-center mt-3">
|
||||
<img src="/teach/user-profile.png" alt="" class="w-8" />
|
||||
<p class="text-sm">
|
||||
<span class="font-semibold mr-2"> Bilik Diana </span> English tutor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-10 lg:px-[15%] lg:max-w-[65%] my-10 mt-10 mx-auto">
|
||||
<h1 class="text-2xl text-center font-bold">Frequently asked questions</h1>
|
||||
|
||||
<div class="mt-10">
|
||||
{#each faqs as faq, index}
|
||||
<div class="border-b border-black lg:px-3 pt-1 pb-2">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full font-medium text-sm md:text-lg my-2 flex justify-between text-left md:text-center"
|
||||
on:click={() => toggleAnswer(index)}
|
||||
>
|
||||
{faq.question} <span>{faq.showAnswer ? '-' : '+'}</span>
|
||||
</button>
|
||||
</div>
|
||||
{#if faq.showAnswer}
|
||||
<div transition:slide class="text-base font-light leading-5">{faq.answer}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Kick off your Teaching Business in Minutes"
|
||||
subText="Don't wait, let's get you started."
|
||||
btnLabel="Register"
|
||||
link="/teach/register"
|
||||
demo={false}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,5 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const load = ({ request }) => {
|
||||
redirect(307, 'https://heyform.net/f/1qkguGkN');
|
||||
};
|
||||
@@ -0,0 +1,40 @@
|
||||
<script>
|
||||
import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
|
||||
</script>
|
||||
|
||||
<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: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 name="twitter:title" content="ClassroomIO Free Tools" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="At ClassroomIO, we have built a suit of tools for anyone to use freely while collaborating with students"
|
||||
/>
|
||||
<meta name="twitter:image" content="https://brand.cdn.clsrio.com/og/free-tools.png" />
|
||||
</svelte:head>
|
||||
|
||||
<slot />
|
||||
|
||||
<PageSignupCTA
|
||||
header="Scale Your Bootcamp Today with ClassroomIO"
|
||||
subText="ClassroomIO gives small and medium bootcamps the power of online learning, simplified."
|
||||
btnLabel="Sign me up"
|
||||
link="/signup"
|
||||
demo={false}
|
||||
/>
|
||||
@@ -0,0 +1 @@
|
||||
export const prerender = true;
|
||||
@@ -0,0 +1,80 @@
|
||||
<script>
|
||||
import PageHeader from '$lib/PageHeader/PageHeader.svelte';
|
||||
import { tools } from '$lib/utils/constants/tools';
|
||||
|
||||
const freeTools = tools.filter((item) => item.show);
|
||||
</script>
|
||||
|
||||
<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">
|
||||
<h1 class="text-5xl md:text-6xl font-bold">
|
||||
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.
|
||||
</p>
|
||||
|
||||
<div class="flex relative w-[90%] md:w-[50%] my-3 md:mt-10 mx-auto bg-white">
|
||||
<!-- <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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
src="/free-tools/pomodoro.svg"
|
||||
alt="Pomodoro Timer logo"
|
||||
/>
|
||||
<!-- <img
|
||||
class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[250px] z-50"
|
||||
src="/free-tools/jamb.svg"
|
||||
alt="Jamb logo"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<div class="p-10 px-2 md:px-0 bg-white">
|
||||
<h1 class="text-center font-bold text-3xl">Featured Tools</h1>
|
||||
|
||||
<div class="flex justify-evenly gap-y-8 flex-wrap w-full md:w-[70%] mt-10 mx-auto bg-white">
|
||||
{#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"
|
||||
>
|
||||
<img class="w-[30%] rounded-l-md" src={tool.src} alt="" />
|
||||
<div class="bg-[#F5F8FE] p-5 rounded-r-md w-[70%]">
|
||||
<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>
|
||||
</section>
|
||||
@@ -0,0 +1,258 @@
|
||||
<script lang="ts">
|
||||
import ToolsHeader from '$lib/ToolsHeader/ToolsHeader.svelte';
|
||||
|
||||
let namesInput = '';
|
||||
let numNames = 0;
|
||||
let wordCount = 0;
|
||||
let selectedNames: string[] = [];
|
||||
let avatarUrls: string[] = [];
|
||||
let avatarUrlsFetched = false;
|
||||
|
||||
// function to shuffle an array
|
||||
const shuffleArray = (array: string[]) => {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
return array;
|
||||
};
|
||||
|
||||
// function to reset entries
|
||||
const resetEntry = () => {
|
||||
namesInput = '';
|
||||
numNames = 0;
|
||||
wordCount = 0;
|
||||
selectedNames = [];
|
||||
};
|
||||
|
||||
// function to sort the input alphabetically
|
||||
const sortRandom = () => {
|
||||
const sortedNames = namesInput
|
||||
.split(',')
|
||||
.map((name) => name.trim())
|
||||
.sort((a, b) => a.localeCompare(b));
|
||||
namesInput = sortedNames.join(', ');
|
||||
};
|
||||
|
||||
// function to unsort
|
||||
const unsortRandom = () => {
|
||||
const unsortedNames = namesInput
|
||||
.split(',')
|
||||
.map((name) => name.trim())
|
||||
.sort(() => 0.5 - Math.random());
|
||||
namesInput = unsortedNames.join(', ');
|
||||
};
|
||||
|
||||
const selectName = async () => {
|
||||
const namesArray = namesInput.split(',').map((name) => name.trim());
|
||||
|
||||
if (numNames > namesArray.length) {
|
||||
console.error('Number of names to pick exceeds the length of the name list.');
|
||||
return;
|
||||
}
|
||||
|
||||
wordCount = namesArray.length;
|
||||
const shuffledNames = shuffleArray(namesArray);
|
||||
|
||||
selectedNames = shuffledNames.slice(0, numNames);
|
||||
avatarUrls = []; // reset avatar URLs
|
||||
avatarUrlsFetched = false; // reset avatarUrlsFetched flag
|
||||
|
||||
try {
|
||||
// set loading state
|
||||
avatarUrlsFetched = false;
|
||||
|
||||
// generate avatar for each selected name
|
||||
for (const name of selectedNames) {
|
||||
const avatarUrl = await generateRandomAvatar('pixel-art');
|
||||
if (avatarUrl) {
|
||||
avatarUrls.push(avatarUrl);
|
||||
}
|
||||
}
|
||||
|
||||
// set avatarUrlsFetched to true after avatars are fetched
|
||||
avatarUrlsFetched = true;
|
||||
} catch (error) {
|
||||
console.error('Error fetching avatars:', error);
|
||||
avatarUrlsFetched = true;
|
||||
}
|
||||
};
|
||||
|
||||
// function to generate a random avatar
|
||||
async function generateRandomAvatar(styleName: string, format = 'svg') {
|
||||
const baseUrl = 'https://api.dicebear.com/8.x/';
|
||||
const randomSeed = Math.random().toString(36).substring(7);
|
||||
|
||||
try {
|
||||
const apiUrl = `${baseUrl}${styleName}/svg?seed=${randomSeed}`;
|
||||
const response = await fetch(apiUrl);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch avatar');
|
||||
}
|
||||
|
||||
return response.url;
|
||||
} catch (error) {
|
||||
console.error('Error generating random avatar:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
$: wordCount = namesInput?.split(',').filter((name) => name.trim())?.length ?? 0;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Random Name Picker | ClassroomIO</title>
|
||||
<meta
|
||||
property="og:image"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/free-tools.png"
|
||||
/>
|
||||
<meta property="og:title" content="Random Name Picker | ClassroomIO" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Use this online name picker to draw a random name from a list of names for your online or physical classroom."
|
||||
/>
|
||||
|
||||
<meta
|
||||
property="og:image:secure_url"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/free-tools.png"
|
||||
/>
|
||||
|
||||
<meta name="twitter:title" content="Random Name Picker | ClassroomIO" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Use this online name picker to draw a random name from a list of names for your online or physical classroom."
|
||||
/>
|
||||
<meta name="twitter:image" content="https://brand.cdn.clsrio.com/og/free-tools.png" />
|
||||
</svelte:head>
|
||||
|
||||
<section class="mt-[10%] md:mt-16 px-5 md:px-0 bg-white">
|
||||
<ToolsHeader>
|
||||
<img
|
||||
src="/free-tools/name-picker.svg"
|
||||
class="w-[15%] md:w-[5%] mx-auto border rounded-full"
|
||||
alt=""
|
||||
/>
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-[#040F2D] my-3">Random Name Picker</h1>
|
||||
<p class="text-md text-[#656565] font-light md:font-normal md:w-[45%] mx-auto">
|
||||
Use this online name picker to draw a random name from a list of names, or to draw several
|
||||
names randomly out of a list. You can use it as a name randomizer for a class activities.
|
||||
</p>
|
||||
</ToolsHeader>
|
||||
|
||||
<div class="border rounded-md md:w-[60%] my-10 py-8 md:py-[3%] mx-auto shadow-md bg-white">
|
||||
<div class="w-[85%] md:w-[70%] mx-auto bg-white">
|
||||
<h1 class="font-bold text-sm">List of names</h1>
|
||||
|
||||
<!-- container -->
|
||||
<div
|
||||
class="relative focus-within:border-[#0233BD] border-2 mt-5 h-[12rem] pl-3 pt-2 overflow-hidden rounded-sm bg-[#F1F2F4]"
|
||||
>
|
||||
<!-- sidebar -->
|
||||
<div class="flex flex-col gap-y-3 absolute right-2 md:right-7 top-3">
|
||||
<button
|
||||
type="button"
|
||||
on:click={sortRandom}
|
||||
class="p-1.5 rounded-full bg-[#D9E0F5] flex justify-center items-center"
|
||||
>
|
||||
<img src="/sort-icon.svg" class="w-2.5" alt="" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={unsortRandom}
|
||||
class="p-1.5 rounded-full bg-[#D9E0F5] flex justify-center items-center"
|
||||
>
|
||||
<img src="/unsort-icon.svg" class="w-2.5" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- content -->
|
||||
<div class="z-10 h-[80%]">
|
||||
<span
|
||||
role="textbox"
|
||||
tabindex={0}
|
||||
contenteditable
|
||||
bind:textContent={namesInput}
|
||||
class="w-full pr-9 md:pr-14 overflow-y-auto text-xs block border-0 outline-none h-full"
|
||||
></span>
|
||||
</div>
|
||||
|
||||
<!-- word count -->
|
||||
<p
|
||||
class="rounded-xl w-[80px] mt-1 py-1 bg-[#D9E0F5] text-center text-[#0F62FE] text-[10px] font-semibold"
|
||||
>
|
||||
name count: {wordCount}
|
||||
</p>
|
||||
</div>
|
||||
<p class="py-4 border-b text-xs">Each name must be separated by a comma</p>
|
||||
|
||||
<div class="mt-10">
|
||||
<h1 class="font-bold text-sm">Number of Names</h1>
|
||||
<!-- number input & button -->
|
||||
<div class="flex flex-wrap gap-y-3 justify-between w-full mt-5">
|
||||
<input
|
||||
type="number"
|
||||
bind:value={numNames}
|
||||
class="px-3 py-2 text-sm w-full md:w-2/4 border-2 rounded-sm outline focus:border-[#0233BD] bg-[#F1F2F4] outline-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
on:click={selectName}
|
||||
class="bg-[#0F62FE] rounded-md text-sm py-3 md:py-0 text-white w-[70%] md:w-[35%]"
|
||||
>Select name(s) at random</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer logo -->
|
||||
<div class="py-3 mt-10 mb-5 bg-[#F1F6FF] flex justify-center items-center gap-3">
|
||||
<img src="/free-tools/name-picker.svg" class="w-[12%] md:w-[9%]" alt="" />
|
||||
{#if selectedNames.length > 0}
|
||||
<h1 class="text-[#0233BD] text-xl font-bold">Selected Names</h1>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- loading state -->
|
||||
{#if selectedNames.length > 0 && !avatarUrlsFetched}
|
||||
<div class="w-full flex justify-center items-center">
|
||||
<p class="font-bold">Loading...</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- generated name -->
|
||||
{#if selectedNames.length > 0 && avatarUrlsFetched}
|
||||
<div>
|
||||
<ul>
|
||||
{#each selectedNames as name, index}
|
||||
<li class="py-2 border-b">
|
||||
<div class="flex item-center gap-3 md:gap-5 justify-center">
|
||||
<img src={avatarUrls[index]} alt="" class="w-7" />
|
||||
<p class="font-medium text-sm md:text-base flex justify-center items-center">
|
||||
{name}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<div class="flex flex-wrap justify-between md:justify-center items-center md:gap-3 mt-3">
|
||||
<button
|
||||
type="button"
|
||||
on:click={resetEntry}
|
||||
class="py-2 border text-xs md:text-sm rounded-md w-[45%] md:w-[20%]"
|
||||
>Reset Entries</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
on:click={selectName}
|
||||
class="py-2 bg-[#0F62FE] rounded-md text-xs md:text-sm text-white w-[45%] md:w-[27%]"
|
||||
>Select other names</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user