ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add bootcamp template - course-appv0.0.12

Browse Source
This commit is contained in:
Rotimi Best
2024-12-18 03:49:49 +01:00
parent 3ee7cf10e3
commit 295e4b5c6f
51 changed files with 890 additions and 4978 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/course-app/src/lib/components/animation/blurfade/blurfade.svelte
+2 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Motion, AnimatePresence, useAnimation } from 'svelte-motion';
import { Motion, AnimatePresence } from 'svelte-motion';
import { inview } from 'svelte-inview';
import { cn } from '$lib/utils';
@@ -37,7 +37,7 @@
<div
use:inview={{ rootMargin: inViewMargin, unobserveOnEnter: once }}
use:motion
on:inview_change={({ detail }) => {
oninview_change={({ detail }) => {
isInView = detail.inView ? 'visible' : 'hidden';
}}
class={cn(className)}
apps/course-app/static/favicon.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

packages/course-app/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@classroomio/course-app",
"version": "0.0.11",
"version": "0.0.12",
"private": false,
"main": "dist/create-template.js",
"scripts": {
packages/course-app/src/template/package-lock.json
Generated
-4728
View File
File diff suppressed because it is too large Load Diff
packages/course-app/src/template/src/app.css
+5
View File
@@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:wght@100..900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -47,8 +49,11 @@
--classic-secondary: 300 100% 95%;
--examprep-primary: 224 98% 37%;
--webflow-primary: 224 93% 39%;
--webflow-secondary: 224 93% 39%;
--bootcamp-primary: 151 100% 43%;
}
.dark {
packages/course-app/src/template/src/lib/components/bootcamp/CourseCard.svelte
+34
View File
@@ -0,0 +1,34 @@
<script lang="ts">
import PrimaryButton from './PrimaryButton.svelte';
interface Props {
className?: string;
bannerImage?: string;
slug: string;
title: string;
}
let { className, bannerImage, title, slug }: Props = $props();
function getCourseUrl() {
return `/course/${slug}`;
}
</script>
<div class="h-fit min-w-[250px] max-w-[350px] space-y-4 md:w-[300px] md:min-w-[300px]">
<div class="space-y-4 rounded-sm border border-gray-100 p-4 {className} w-full bg-gray-50">
<div class="flex items-center justify-between">
<p class="font-slab line-clamp-2 w-full text-lg font-normal capitalize">{title}</p>
</div>
<div class="overflow-hidden rounded-sm">
<img
src={bannerImage ? bannerImage : '/course-banner.jpg'}
alt="course banner"
class="h-44 w-full"
/>
</div>
<PrimaryButton label="Start Course" href={`/course/${slug}`} class="w-full text-start" />
</div>
</div>
packages/course-app/src/template/src/lib/components/bootcamp/EmptyState.svelte
+26
View File
@@ -0,0 +1,26 @@
<script lang="ts">
import emptyBanner from './assets/empty.svg';
interface Props {
className?: string;
headerClassName?: string;
subtitleClassName?: string;
}
let { className = '', headerClassName = '', subtitleClassName = '' }: Props = $props();
</script>
<section
class="{className} my-2 flex w-full items-center justify-center rounded-md border p-2 py-4"
>
<div
class="flex flex-col items-center justify-center gap-6 p-2 text-center md:flex-row md:text-start"
>
<img src={emptyBanner} alt="empty" />
<div>
<h3 class="font-semibold {headerClassName}">"No Course yet"</h3>
<p class="text-sm md:text-base {subtitleClassName}">
Looks like courses have not been added yet.<br /> Kindly check back later
</p>
</div>
</div>
</section>
packages/course-app/src/template/src/lib/components/bootcamp/Footer.svelte
+40
View File
@@ -0,0 +1,40 @@
<script>
import { SECTION } from '@/utils/constants/page';
import { getPageSection } from '@/utils/helpers/page';
import { sharedPage } from '@/utils/stores/pages';
import Logo from '@/components/ui/_custom/Logo.svelte';
const content = $derived(getPageSection($sharedPage, SECTION.FOOTER));
const seo = $derived(getPageSection($sharedPage, SECTION.SEO));
</script>
{#if content?.show}
<nav
class="flex w-full flex-col items-start gap-4 bg-white px-6 py-4 md:flex-row md:items-center md:justify-between"
>
<Logo src={seo?.settings.logo} alt={seo?.settings.title} />
<ul class="-md:gap-8 flex flex-col items-start gap-4 underline md:flex-row md:items-center">
{#if content.settings.twitter}
<a href={content.settings.twitter} target="_blank" title="twitter">Twitter</a>
{/if}
{#if content.settings?.youtube}
<a href={content.settings?.youtube} target="_blank">Youtube</a>
{/if}
{#if content.settings.linkedin}
<a href={content.settings.linkedin} target="_blank" title="linkedin">LinkedIn</a>
{/if}
{#if content.settings.facebook}
<a href={content.settings.facebook} target="_blank" title="facebook">Facebook</a>
{/if}
</ul>
<a
href="https://classroomio.com"
target="_blank"
rel="noopener noreferrer"
class="flex items-center gap-1"
>
<p class="text-base font-semibold text-blue-800 underline">Built on ClassroomIO</p>
</a>
</nav>
{/if}
packages/course-app/src/template/src/lib/components/bootcamp/Navigation.svelte
+94
View File
@@ -0,0 +1,94 @@
<script>
import { ArrowRight, ArrowUpRight, Close } from 'carbon-icons-svelte';
import Menu from 'carbon-icons-svelte/lib/Menu.svelte';
import { getPageSection } from '@/utils/helpers/page';
import { sharedPage } from '@/utils/stores/pages';
import Logo from '@/components/ui/_custom/Logo.svelte';
const seo = $derived(getPageSection($sharedPage, 'seo'));
const content = $derived(getPageSection($sharedPage, 'navigation'));
let { backgroundColor = 'bg-white dark:bg-black' } = $props()
let open = $state(false);
// Function to toggle the mobile menu
function toggleMenu() {
console.log('clicked');
open = !open;
}
</script>
{#snippet cta()}
<a href="/courses" class="flex items-center gap-1 py-4 px-6 border-b" onclick={toggleMenu}>
<p class="font-bold text-gray-800 text-base">Learn with me</p>
<ArrowRight size={16} class="fill-gray-800 font-bold" />
</a>
{/snippet}
<nav class={`relative w-full flex items-center justify-between pl-6 ${backgroundColor}`}>
<!-- Logo Section -->
<Logo src={seo?.settings.logo} alt={seo?.settings.title} addAcademy />
<!-- Mobile Menu Button (Visible only on mobile and when logged in) -->
<button onclick={toggleMenu} class="lg:hidden px-6 py-4">
<Menu size={24} />
</button>
<!-- Desktop Navigation Menu (Hidden on mobile) -->
<ul
class="hidden lg:flex items-center space-x-8 text-base font-bold text-gray-800 list-none hover:no-underline"
>
{#each content?.settings.navItems as navItem}
<li><a href={navItem.link}
class="flex items-center gap-1"
target={navItem.redirect ? '_blank' : undefined}>{navItem.title} {#if navItem.redirect}
<ArrowUpRight />
{/if}</a></li>
{/each}
</ul>
<!-- Mobile Sidebar Menu (Visible only on mobile) -->
<ul
class={`fixed top-0 left-0 h-full bg-white w-full transform hover:no-underline ${
open ? 'translate-y-0' : '-translate-y-full'
} transition-transform duration-300 ease-in-out lg:hidden text-base font-bold text-gray-800 list-none cursor-pointer`}
>
<button onclick={toggleMenu} class="absolute right-4 top-4 lg:hidden z-20">
<Close size={24} />
</button>
{#each content?.settings.navItems as navItem}
<li class="py-4 px-6 border-b">
<a href={navItem.link} class="flex items-center gap-1" target={navItem.redirect ? '_blank' : undefined} onclick={toggleMenu}>{navItem.title} {#if navItem.redirect}
<ArrowUpRight />
{/if}</a>
</li>
{/each}
<div class="lg:hidden">
{@render cta()}
</div>
</ul>
<!-- Learn with Me Button (Visible on desktop when logged in) -->
<div class="hidden lg:flex">
{@render cta()}
</div>
</nav>
<style>
nav {
position: relative;
}
ul {
z-index: 10;
}
</style>
packages/course-app/src/template/src/lib/components/bootcamp/PrimaryButton.svelte
+29
View File
@@ -0,0 +1,29 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import { cn } from '$lib/utils.js';
interface Props {
onClick?: () => void;
label: string;
href?: string | undefined;
class?: string | undefined;
children?: any;
}
const { onClick, children, label, href, class: className, ...restProps }: Props = $props();
</script>
<Button
{href}
class={cn(
'bg-bootcamp text-black font-semibold p-2 px-4 hover:bg-bootcamp rounded-none hover:bg-bootcamp/90 hover:scale-95 transition-all duration-300',
className
)}
onclick={onClick}
{...restProps}
>
{label}
{#if children}
{@render children?.()}
{/if}
</Button>
packages/course-app/src/template/src/lib/components/bootcamp/TestimonialCard.svelte
+105
View File
@@ -0,0 +1,105 @@
<script>
import userAvatar from './assets/bootcamp-user.png';
let { profileImage, title, role, description, index } = $props();
</script>
<div
class={`flex items-center gap-4 overflow-hidden p-4 ${
index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'
}`}
>
<!-- Profile Image -->
<div class="hidden h-32 w-32 overflow-hidden rounded-full md:block">
<img
src={profileImage || userAvatar}
alt="Profile"
class="h-full w-full border-2 border-gray-300 object-cover"
/>
</div>
<!-- Card Content -->
<div
class={`font-roboto bubble-card relative h-[150px] max-h-[200px] flex-1 rounded-lg border border-gray-300 bg-white p-4 shadow-lg ${
index % 2 === 0 ? 'left-pointer md:ml-4' : 'right-pointer md:mr-4'
}`}
>
<div class="flex items-center gap-2">
<div class="h-10 w-10 overflow-hidden rounded-full md:hidden">
<img
src={profileImage || userAvatar}
alt="Profile"
class="h-full w-full border-2 border-gray-300 object-cover"
/>
</div>
<div class="mb-2">
<p class="line-clamp-1 text-lg font-bold text-green-600">{title}</p>
<p class="line-clamp-1 font-semibold text-gray-500">{role}</p>
</div>
</div>
<p class="line-clamp-3 text-sm text-gray-600">{description}</p>
</div>
</div>
<style>
/* Card content */
.bubble-card {
position: relative;
}
/* Shadow effect using ::after for pointer */
.bubble-card::after {
content: '';
position: absolute;
top: 39%;
width: 32px;
height: 42px;
background-color: rgba(0, 0, 0, 0.2);
clip-path: polygon(0 50%, 100% 0, 100% 100%);
z-index: 1;
filter: blur(6px);
}
/* Pointer for the card */
.bubble-card::before {
content: '';
position: absolute;
top: 40%;
width: 30px;
height: 40px;
z-index: 2;
background-color: white;
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
/* Pointer for cards where the image is on the left (even index) */
.left-pointer::after {
left: -32px; /* Pointer shadow on the left */
}
.left-pointer::before {
left: -30px; /* Pointer on the left */
}
/* Pointer for cards where the image is on the right (odd index) */
.right-pointer::after {
right: -32px; /* Pointer shadow on the right */
clip-path: polygon(100% 50%, 0 0, 0 100%); /* Flipped pointer */
}
.right-pointer::before {
right: -30px; /* Pointer on the right */
clip-path: polygon(100% 50%, 0 0, 0 100%); /* Flipped pointer */
}
@media (max-width: 640px) {
/* Adjust the max-width as needed */
.bubble-card::before,
.bubble-card::after,
.right-pointer::before,
.right-pointer::after,
.left-pointer::after,
.left-pointer::before {
display: none;
}
}
</style>
packages/course-app/src/template/src/lib/components/bootcamp/assets/about-banner.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 KiB

packages/course-app/src/template/src/lib/components/bootcamp/assets/bootcamp-user.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

packages/course-app/src/template/src/lib/components/bootcamp/assets/empty.svg
+14
View File
@@ -0,0 +1,14 @@
<svg width="168" height="191" viewBox="0 0 168 191" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M147.244 71.4805H84.1111L79.0512 59.1652C78.2725 57.396 76.9877 55.8967 75.3585 54.8562C73.7294 53.8157 71.8288 53.2806 69.8961 53.3183H34.2107C32.278 53.2806 30.3774 53.8157 28.7483 54.8562C27.1191 55.8967 25.8343 57.396 25.0556 59.1652L21.6113 70.3265C20.9733 72.4035 20.6443 74.563 20.6349 76.7357L20.0076 158.404C19.9902 160.913 20.9696 163.327 22.7306 165.114C24.4916 166.902 26.8901 167.917 29.3994 167.938H156.636V81.0203C156.655 78.51 155.676 76.095 153.915 74.3061C152.154 72.5172 149.754 71.5009 147.244 71.4805Z" fill="#001A0D"/>
<path d="M147.244 71.4805H84.1108L79.0509 59.1652C78.2723 57.396 76.9874 55.8967 75.3583 54.8562C73.7291 53.8157 71.8285 53.2806 69.8958 53.3183H34.2105C32.9474 53.3178 31.6946 53.5443 30.5117 53.987H65.2561C69.3218 53.987 74.8847 56.3187 76.3287 59.834L81.3886 72.1552H142.604C147.788 72.1552 153.913 76.422 153.913 81.689V167.92H156.636V81.0203C156.655 78.51 155.676 76.095 153.915 74.3061C152.154 72.5172 149.754 71.5009 147.244 71.4805Z" fill="white"/>
<path d="M147.244 71.4805H84.1111L79.0512 59.1652C78.2725 57.396 76.9877 55.8967 75.3585 54.8562C73.7294 53.8157 71.8288 53.2806 69.8961 53.3183H34.2107C32.278 53.2806 30.3774 53.8157 28.7483 54.8562C27.1191 55.8967 25.8343 57.396 25.0556 59.1652L21.6113 70.3265C20.9733 72.4035 20.6443 74.563 20.6349 76.7357L20.0076 158.404C19.9902 160.913 20.9696 163.327 22.7306 165.114C24.4916 166.902 26.8901 167.917 29.3994 167.938H156.636V81.0203C156.655 78.51 155.676 76.095 153.915 74.3061C152.154 72.5172 149.754 71.5009 147.244 71.4805Z" stroke="#263238" stroke-width="1.47949" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M30.1983 167.917H156.636L134.964 96.9016C134.411 95.0497 133.277 93.4248 131.73 92.2665C130.183 91.1082 128.304 90.478 126.371 90.4688H10.5092C9.08813 90.485 7.69062 90.8334 6.42823 91.4861C5.16584 92.1387 4.07356 93.0776 3.23865 94.2276C2.40375 95.3776 1.84935 96.7069 1.61974 98.1093C1.39013 99.5118 1.49167 100.948 1.91626 102.305L19.4927 159.898C20.1833 162.205 21.5962 164.229 23.5234 165.673C25.4507 167.116 27.7904 167.903 30.1983 167.917Z" fill="#00E577"/>
<path d="M7.92336 93.6171H123.791C125.724 93.6273 127.602 94.2579 129.149 95.416C130.696 96.5742 131.83 98.1986 132.384 100.05L153.097 167.917H156.648L134.976 96.9016C134.423 95.0497 133.289 93.4248 131.742 92.2665C130.195 91.1082 128.316 90.478 126.383 90.4688H10.5095C8.83823 90.4722 7.20142 90.9443 5.78499 91.8314C4.36856 92.7185 3.22929 93.9851 2.49658 95.4872C4.04499 94.2736 5.95604 93.6151 7.92336 93.6171Z" fill="white"/>
<path d="M30.1983 167.917H156.636L134.964 96.9016C134.411 95.0497 133.277 93.4248 131.73 92.2665C130.183 91.1082 128.304 90.478 126.371 90.4688H10.5092C9.08813 90.485 7.69062 90.8334 6.42823 91.4861C5.16584 92.1387 4.07356 93.0776 3.23865 94.2276C2.40375 95.3776 1.84935 96.7069 1.61974 98.1093C1.39013 99.5118 1.49167 100.948 1.91626 102.305L19.4927 159.898C20.1833 162.205 21.5962 164.229 23.5234 165.673C25.4507 167.116 27.7904 167.903 30.1983 167.917Z" stroke="#263238" stroke-width="1.47949" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M71.8727 145.165C79.5338 145.165 85.7444 138.955 85.7444 131.294C85.7444 123.632 79.5338 117.422 71.8727 117.422C64.2115 117.422 58.001 123.632 58.001 131.294C58.001 138.955 64.2115 145.165 71.8727 145.165Z" fill="#263238" stroke="#263238" stroke-width="1.47949" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M65.1851 137.982L78.5656 124.578" stroke="#F2F2F2" stroke-width="1.47949" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M65.1851 124.578L78.5656 137.959" stroke="#F2F2F2" stroke-width="1.47949" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M164.482 9.00001H126.915C126.274 9.00001 125.66 9.2544 125.207 9.70721C124.754 10.16 124.5 10.7742 124.5 11.4145V40.1286C124.5 40.7689 124.754 41.3831 125.207 41.8359C125.66 42.2887 126.274 42.5431 126.915 42.5431H136.235V51.7396C136.224 51.9767 136.285 52.2116 136.409 52.4139C136.533 52.6162 136.714 52.7765 136.931 52.8741C137.147 52.9718 137.388 53.0021 137.621 52.9613C137.855 52.9204 138.071 52.8103 138.242 52.6451L149.628 42.5431H164.482C165.122 42.5431 165.736 42.2887 166.189 41.8359C166.642 41.3831 166.896 40.7689 166.896 40.1286V11.4145C166.897 11.0972 166.835 10.7829 166.714 10.4896C166.593 10.1963 166.415 9.92983 166.191 9.70547C165.967 9.4811 165.7 9.30328 165.407 9.18221C165.113 9.06115 164.799 8.99923 164.482 9.00001Z" fill="white" stroke="#263238" stroke-width="1.47949" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M145.219 29.8483C144.977 29.8525 144.739 29.7971 144.524 29.687C144.309 29.5768 144.124 29.4154 143.987 29.217C143.849 29.0186 143.763 28.7893 143.735 28.5495C143.707 28.3096 143.739 28.0667 143.828 27.8421C144.077 27.2749 144.411 26.7482 144.816 26.2798C145.206 25.8248 145.627 25.3977 146.077 25.0015C146.521 24.6109 146.941 24.2203 147.337 23.8179C147.712 23.4683 148.038 23.0702 148.308 22.6343C148.618 22.0995 148.737 21.4754 148.647 20.8638C148.557 20.2523 148.262 19.6894 147.811 19.267C146.94 18.5913 145.851 18.2586 144.751 18.3319C143.743 18.3061 142.741 18.5084 141.822 18.9237C141.361 19.1388 140.932 19.4177 140.549 19.7522C140.263 19.9972 139.904 20.1414 139.528 20.1628C139.151 20.1842 138.779 20.0815 138.466 19.8706C138.238 19.7172 138.049 19.5131 137.914 19.2743C137.778 19.0356 137.7 18.7686 137.685 18.4945C137.67 18.2203 137.719 17.9465 137.828 17.6944C137.937 17.4424 138.103 17.219 138.312 17.0418C138.859 16.6036 139.455 16.2302 140.088 15.9292C141.654 15.2226 143.359 14.8768 145.077 14.9172C146.448 14.8869 147.813 15.1137 149.101 15.586C150.177 15.9803 151.119 16.6719 151.817 17.5803C152.47 18.4556 152.81 19.5248 152.782 20.6163C152.802 21.377 152.676 22.1345 152.409 22.8473C152.173 23.4382 151.841 23.986 151.427 24.4689C151.022 24.9353 150.585 25.3723 150.119 25.7767C149.645 26.1851 149.213 26.5816 148.805 26.9603C148.412 27.3411 148.077 27.7778 147.811 28.2564C147.709 28.4443 147.627 28.6427 147.568 28.8482C147.475 29.1491 147.288 29.4125 147.035 29.5998C146.781 29.7871 146.475 29.8887 146.16 29.8897L145.219 29.8483ZM145.443 37.299C145.121 37.3054 144.8 37.247 144.501 37.1274C144.201 37.0078 143.929 36.8293 143.699 36.6026C143.47 36.3759 143.288 36.1054 143.165 35.8073C143.041 35.5091 142.979 35.1893 142.982 34.8667C142.976 34.551 143.035 34.2374 143.155 33.9453C143.275 33.6532 143.454 33.3887 143.68 33.1683C144.165 32.7241 144.798 32.4777 145.455 32.4777C146.113 32.4777 146.746 32.7241 147.231 33.1683C147.454 33.3902 147.63 33.6551 147.748 33.9471C147.866 34.239 147.924 34.5519 147.917 34.8667C147.922 35.1926 147.861 35.5161 147.737 35.8174C147.613 36.1187 147.428 36.3915 147.195 36.6192C146.962 36.8468 146.685 37.0245 146.38 37.1414C146.076 37.2583 145.751 37.3119 145.426 37.299H145.443Z" fill="#EC644E" stroke="#263238" stroke-width="1.47949" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M89.5286 190.495C132.002 190.495 166.433 188.569 166.433 186.193C166.433 183.817 132.002 181.891 89.5286 181.891C47.0557 181.891 12.6245 183.817 12.6245 186.193C12.6245 188.569 47.0557 190.495 89.5286 190.495Z" fill="#8192C3" fill-opacity="0.2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

packages/course-app/src/template/src/lib/components/bootcamp/assets/org-banner.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 297 KiB

packages/course-app/src/template/src/lib/components/bootcamp/index.ts
+15
View File
@@ -0,0 +1,15 @@
import type { Component } from 'svelte';
import CoursesPage from './pages/Course.svelte';
import HomePage from './pages/Home.svelte';
import Navigation from './Navigation.svelte';
import Footer from './Footer.svelte';
import Button from './PrimaryButton.svelte';
import type { TemplateComponents } from '$lib/utils/types/template';
export const components: TemplateComponents = {
navigation: Navigation as unknown as Component,
footer: Footer as unknown as Component,
button: Button as unknown as Component,
coursespage: CoursesPage as unknown as Component,
homepage: HomePage as unknown as Component
};
packages/course-app/src/template/src/lib/components/bootcamp/pages/Course.svelte
+160
View File
@@ -0,0 +1,160 @@
<script lang="ts">
import { COURSE_TYPE } from '@/utils/constants/course';
import { SECTION } from '@/utils/constants/page';
import { getPageSection } from '@/utils/helpers/page';
import { courses } from '@/utils/stores/course';
import type { Course, CourseFilterItem } from '@/utils/types/course';
import type { Page } from '@/utils/types/page';
import CourseCard from '../CourseCard.svelte';
import PrimaryButton from '../PrimaryButton.svelte';
import EmptyState from '../EmptyState.svelte';
import bannerImg from '../assets/org-banner.png';
interface Props {
data: {
page: Page;
sharedPage: Page;
courses: Course[];
};
}
let { data }: Props = $props();
/**
* State
*/
let viewAll = $state(false);
let filter: CourseFilterItem[] = $state([
{
title: 'Self Paced',
type: COURSE_TYPE.PACED,
checked: false
},
{
title: 'Live Sessions',
type: COURSE_TYPE.LIVE,
checked: false
}
]);
let filteredCourses = $state([...data.courses]);
/**
* Constants
*/
const section = $derived({
header: getPageSection(data.page, SECTION.HERO),
courses: getPageSection(data.page, SECTION.COURSE)
});
/**
* Functions
*/
function applyFilter() {
const activeFilters = new Set(
filter
.filter((filterItem) => filterItem.checked)
.map((filterItem) => filterItem.type.toLowerCase())
);
filteredCourses =
activeFilters.size === 0
? data.courses
: data.courses.filter((course) => activeFilters.has(course.type.toLowerCase()));
}
</script>
<main class="overflow-x-hidden bg-black/90">
{#if section.header?.show}
<section class="flex min-h-full items-center justify-center py-10 md:py-20">
<section class="flex flex-col items-center justify-center gap-5 text-center">
<div class="w-full space-y-6 text-white">
<p class="mx-auto w-full text-3xl font-normal md:w-[60%] md:text-4xl">
{section.header.settings.title}
</p>
<p class="font-roboto mx-auto w-full font-normal md:w-[70%]">
{section.header.settings.subtitle}
</p>
</div>
<div class="flex h-[250px] max-h-[300px] w-[800px] max-w-[80vw] rounded-lg lg:max-w-[80%]">
<img
style="min-width:280px; min-height:200px"
alt="landing page banner"
src={section.header.settings.banner.image
? section.header.settings.banner.image
: bannerImg}
class="h-full max-h-[300px] w-full rounded-lg object-cover"
/>
</div>
</section>
</section>
{/if}
{#if section.courses?.show}
<div class="bg-white px-2 py-10 md:px-8">
<div class="mb-4 flex flex-col items-center justify-between md:flex-row">
<span class="mx-auto mb-4 space-y-2 text-center lg:mb-0">
<p class="font-slab mx-auto w-full text-2xl md:w-[60%] lg:text-3xl">
{section.courses.settings.title}
</p>
<p class="font-roboto text-xs text-gray-400 lg:text-sm">
{section.courses.settings.subtitle}
</p>
</span>
</div>
<div>
{#if $courses.length > 0}
<div class="w-full items-start gap-6 lg:ml-[5%] lg:flex">
<div class="hidden w-fit lg:block">
<p class="font-slab mb-2 font-medium">Filter by</p>
<div class="flex w-fit flex-col space-y-2">
{#each filter as item}
<label
for={item.title}
class="font-inter rounded-md border border-gray-100 bg-gray-50 px-4 py-4 font-medium text-gray-700"
>
<input
type="checkbox"
bind:checked={item.checked}
onchange={applyFilter}
name={item.title}
class="text-bootcamp mr-2"
/>
{item.title}
</label>
{/each}
</div>
</div>
<section
class="flex flex-wrap items-center justify-center gap-4 p-4 lg:w-fit lg:justify-start"
>
{#each $courses.slice(0, viewAll ? $courses.length : 3) as courseData}
<CourseCard
className="bg-gray-50"
slug={courseData.slug}
bannerImage={courseData.banner}
title={courseData.title}
/>
{/each}
</section>
</div>
{#if $courses.length > 3}
<div class="my-5 flex w-full items-center justify-center">
<PrimaryButton
label="VIEW MORE"
class="font-roboto rounded-none text-lg"
onClick={() => (viewAll = !viewAll)}
/>
</div>
{/if}
{:else}
<div class="px-4 md:px-10">
<EmptyState className="bg-slate-100" />
</div>
{/if}
</div>
</div>
{/if}
</main>
packages/course-app/src/template/src/lib/components/bootcamp/pages/Home.svelte
+165
View File
@@ -0,0 +1,165 @@
<script>
import { getPageSection } from '@/utils/helpers/page';
import { homePage } from '@/utils/stores/pages';
import PrimaryButton from '../PrimaryButton.svelte';
import { courses } from '@/utils/stores/course';
import CourseCard from '../CourseCard.svelte';
import TestimonialCard from '../TestimonialCard.svelte';
import EmptyState from '../EmptyState.svelte';
import { SECTION } from '@/utils/constants/page';
import bannerImg from '../assets/org-banner.png';
import aboutBanner from '../assets/about-banner.png';
const coursesSection = $derived(getPageSection($homePage, SECTION.COURSE));
const aboutSection = $derived(getPageSection($homePage, SECTION.ABOUT));
const testimonialSection = $derived(getPageSection($homePage, SECTION.TESTIMONIAL));
const ctaSection = $derived(getPageSection($homePage, SECTION.CTA));
let viewAll = $state(false);
</script>
<main>
<!-- hero -->
{#if $homePage}
{@const content = getPageSection($homePage, SECTION.HERO)}
{#if content?.show}
<section class="flex min-h-full items-center justify-center bg-black/90 px-10 py-10 md:px-14">
<div class="mx-auto flex max-w-6xl flex-col items-center gap-10 text-center">
<div class="w-full space-y-6 text-white">
<p class="font-slab mx-auto w-full text-3xl font-normal md:w-[60%] md:text-4xl">
{content.settings.title}
</p>
<p class="font-roboto mx-auto w-full font-normal md:w-[70%] md:text-lg">
{content.settings.subtitle}
</p>
</div>
<div
class="flex h-[250px] max-h-[300px] w-[800px] max-w-[80vw] rounded-lg lg:max-w-[80%]"
>
<img
style="min-width:280px; min-height:200px"
alt="landing page banner"
src={content.settings.banner.image ? content.settings.banner.image : bannerImg}
class="h-full max-h-[300px] w-full rounded-lg object-cover"
/>
</div>
<PrimaryButton
class="rounded-none px-6 font-bold uppercase"
label={content.settings.action.label}
href={content.settings.action.link}
/>
</div>
</section>
{/if}
{/if}
<!-- about -->
{#if aboutSection?.show}
<section class="relative w-full bg-white px-4 py-10 lg:px-14">
<div
class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 md:flex-row md:items-start"
>
<div class="mb-5 w-full md:mr-5 md:w-[60%] lg:mb-0 lg:w-[50%]">
<p class="font-slab mb-8 w-full text-2xl font-normal md:w-[90%] md:text-3xl lg:text-4xl">
{aboutSection.settings.title}
</p>
<div class="space-y-3">
{#each aboutSection.settings.benefits.list as items}
<div class="max-w-[579px] rounded-md border border-gray-100 bg-gray-50 p-8">
<p class="font-slab mb-2 line-clamp-2 w-[90%] text-xl md:text-2xl">{items.title}</p>
<p
class="font-roboto mb-4 line-clamp-5 w-[90%] text-sm text-gray-600 lg:line-clamp-4 lg:text-base"
>
{items.subtitle}
</p>
</div>
{/each}
</div>
</div>
<div class="image sticky top-0 hidden md:block">
<img
src={aboutSection.settings.imageUrl || aboutBanner}
alt="Our Story"
class="h-[450px] w-[450px] object-cover"
/>
</div>
</div>
</section>
{/if}
<!-- courses -->
{#if coursesSection?.show}
<section id="course" class="h-full bg-white p-4 lg:p-20">
<div class="mx-4 mb-4">
<span class="mb-4 space-y-2 lg:mb-0">
<p class="font-slab text-2xl lg:text-3xl">{coursesSection.settings.title}</p>
<p class="w-[80%] text-gray-600">{coursesSection.settings.subtitle}</p>
</span>
</div>
{#if $courses.length > 0}
<section class="flex flex-wrap items-center justify-center gap-4 p-4 md:justify-start">
{#each $courses.slice(0, viewAll ? $courses.length : 3) as courseData}
<CourseCard
slug={courseData.slug}
bannerImage={courseData.banner}
title={courseData.title}
/>
{/each}
</section>
{#if $courses.length > 3}
<div class="my-5 flex w-full items-center justify-center">
<PrimaryButton
label="VIEW MORE"
class="font-roboto bg-bootcamp rounded-none text-lg"
onClick={() => (viewAll = !viewAll)}
/>
</div>
{/if}
{:else}
<div class="px-10">
<EmptyState className="bg-slate-100" />
</div>
{/if}
</section>
{/if}
<!-- <LearningPath /> -->
<!-- testimonial -->
{#if testimonialSection?.show}
<section class="h-full bg-white p-4 lg:p-20">
<p class="mb-10 text-center text-2xl lg:text-3xl">See what our learners say</p>
<div class="mx-auto space-y-2 md:space-y-4 lg:w-[80%]">
{#each testimonialSection.settings.list as testimonial, index}
<TestimonialCard
profileImage={testimonial.image}
title={testimonial.name}
role={testimonial.role}
description={testimonial.description}
{index}
/>
{/each}
</div>
</section>
{/if}
<!-- cta -->
{#if ctaSection?.show}
<section class="bg-bootcamp flex flex-col items-center justify-between px-6 py-20 lg:px-10">
<div class="flex w-full items-center justify-center">
<p class="font-slab w-full text-center text-4xl font-bold capitalize text-white lg:w-[70%]">
{ctaSection.settings.title}
</p>
</div>
<div class="my-5 flex w-full items-center justify-center">
<PrimaryButton
label={ctaSection.settings.button.label}
href={ctaSection.settings.button.link}
class="text-md rounded-none bg-white px-10 py-4 uppercase text-black"
/>
</div>
</section>
{/if}
</main>
packages/course-app/src/template/src/lib/components/cal/Accordion.svelte
+7 -7
View File
@@ -24,15 +24,15 @@
</script>
<div
class="mx-6 shadow-[0px_3px_#282828] transition bg-white text-black overflow-hidden rounded-3xl"
class="mx-6 overflow-hidden rounded-3xl bg-white text-black shadow-[0px_3px_#282828] transition"
>
<button
class="relative flex justify-between items-center w-full cursor-pointer overflow-hidden p-6 bg-inherit"
class="relative flex w-full cursor-pointer items-center justify-between overflow-hidden bg-inherit p-6"
onclick={toggleAccordion}
>
<p class="font-semibold text-lg">{title}</p>
<p class="text-lg font-semibold">{title}</p>
<div class="flex items-center justify-center p-[2px] bg-white text-black">
<div class="flex items-center justify-center bg-white p-[2px] text-black">
{#if isOpen}
<Subtract class="text-xl transition-transform duration-200 ease-in" />
{:else}
@@ -40,8 +40,8 @@
{/if}
</div>
{#if isOpen}
<div class="flex items-center justify-center absolute left-[2%] bottom-0 w-[96%] mx-auto">
<svg class="w-full h-2" viewBox="0 0 360 10" preserveAspectRatio="none">
<div class="absolute bottom-0 left-[2%] mx-auto flex w-[96%] items-center justify-center">
<svg class="h-2 w-full" viewBox="0 0 360 10" preserveAspectRatio="none">
<line
x1="0"
y1="5"
@@ -61,7 +61,7 @@
style="max-height: {contentHeight}; transition: max-height 0.3s ease-in-out; overflow: hidden;"
class="rounded-3xl"
>
<div class=" p-4 bg-inherit rounded-b rounded-3xl">
<div class="rounded-3xl rounded-b bg-inherit p-4">
<p>
{content}
</p>
packages/course-app/src/template/src/lib/components/cal/CourseCard.svelte
+1 -1
View File
@@ -30,7 +30,7 @@
</p>
</div>
<div class=" w-full px-6 py-4">
<div class="w-full px-6 py-4">
<PrimaryButton href={`/course/${slug}`} label="Go to Course" />
</div>
</div>
packages/course-app/src/template/src/lib/components/cal/Footer.svelte
+3 -2
View File
@@ -25,13 +25,14 @@
<a href={content.settings.twitter} target="_blank" title="twitter">Twitter</a>
{/if}
{#if content.settings.youtube}
<a href={content.settings.youtube} target="_blank">Youtube</a>{/if}
<a href={content.settings.youtube} target="_blank">Youtube</a>
{/if}
{#if content.settings.linkedin}
<a href={content.settings.linkedin} target="_blank" title="linkedin">LinkedIn</a>
{/if}
{#if content.settings.facebook}
<a href={content.settings.facebook} target="_blank" title="facebook">facebook</a>
<a href={content.settings.facebook} target="_blank" title="facebook">Facebook</a>
{/if}
</ul>
<a
packages/course-app/src/template/src/lib/components/cal/Navigation.svelte
+1 -1
View File
@@ -21,7 +21,7 @@
class="relative top-0 z-[3000] flex w-full items-center justify-between border-b border-[#D0D1C9] bg-[#F4F4F4] px-6 py-4 md:sticky"
>
<!-- Logo Section -->
<Logo src={seo?.settings.logo} alt={seo?.settings.title} className="w-24" addAcademy />
<Logo src={seo?.settings.logo} alt={seo?.settings.title} addAcademy />
<ul
class="hidden list-none items-center gap-14 text-base font-semibold text-[#1F2937] hover:no-underline lg:flex"
packages/course-app/src/template/src/lib/components/cal/pages/Home.svelte
+1 -1
View File
@@ -248,7 +248,7 @@
</span>
</div>
<div>
<p class=" text-[#282828] dark:text-[#ABABAB]">
<p class="text-[#282828] dark:text-[#ABABAB]">
{item.description}
</p>
</div>
packages/course-app/src/template/src/lib/components/classic/Footer.svelte
+3 -3
View File
@@ -20,7 +20,7 @@
class="flex w-full flex-col items-start gap-4 bg-white px-6 py-4 md:flex-row md:items-center md:justify-between"
>
<div class="logo flex w-full items-center justify-between md:w-fit">
<Logo src={seo?.settings.logo} alt={seo?.settings.title} className="" />
<Logo src={seo?.settings.logo} alt={seo?.settings.title} />
<a
href="https://classroomio.com"
@@ -28,7 +28,7 @@
rel="noopener noreferrer"
class="flex items-center gap-1 md:hidden"
>
<p class=" text-base font-semibold text-[#0233BD] underline">Built on ClassroomIO</p>
<p class="text-base font-semibold text-[#0233BD] underline">Built on ClassroomIO</p>
</a>
</div>
<ul
@@ -69,7 +69,7 @@
rel="noopener noreferrer"
class="hidden items-center gap-1 md:flex"
>
<p class=" text-base font-semibold text-[#0233BD] underline">Built on ClassroomIO</p>
<p class="text-base font-semibold text-[#0233BD] underline">Built on ClassroomIO</p>
</a>
</nav>
{/if}
packages/course-app/src/template/src/lib/components/classic/Navigation.svelte
+1 -1
View File
@@ -21,7 +21,7 @@
class="relative flex w-full items-center justify-between border-b-2 bg-white px-6 py-4 dark:bg-black"
>
<!-- Logo Section -->
<Logo src={seo?.settings.logo} alt={seo?.settings.title} className="w-24" addAcademy />
<Logo src={seo?.settings.logo} alt={seo?.settings.title} addAcademy />
<!-- Mobile Menu Button (Visible only on mobile and when logged in) -->
packages/course-app/src/template/src/lib/components/classic/pages/Home.svelte
+1 -1
View File
@@ -141,7 +141,7 @@
{#if instructorSection?.show}
<section class="h-full bg-white px-4 pb-20 pt-4 lg:px-14">
<div class="mx-auto w-full xl:w-[90%]">
<h1 class=" mb-4 text-center text-3xl font-bold text-[#3F3F3F] lg:text-start">
<h1 class=" mb-4 text-center text-3xl font-bold text-[#3F3F3F] lg:text-start">
Meet some of our Instructors
</h1>
<section class="grid w-full grid-cols-1 place-items-center gap-2 md:grid-cols-2">
packages/course-app/src/template/src/lib/components/examprep/CourseCard.svelte
+7 -17
View File
@@ -1,17 +1,9 @@
<script>
export let className = '';
export let buttonClass = '';
import PrimaryButton from './PrimaryButton.svelte';
export let slug = '';
export let title = '';
export let description = '';
function getCourseUrl() {
return `/course/${slug}`;
}
let { slug, title, description, className = '', buttonClass = '' } = $props();
</script>
<!-- only custom colors work for shadow -->
<div
class="border-examprep w-full rounded-lg border-2 p-4 shadow-[-12px_12px_0px_#0233BD] md:h-[300px] md:w-[350px] {className}"
>
@@ -22,12 +14,10 @@
{description}
</p>
</div>
<a href={getCourseUrl()} class="hover:no-underline">
<div
class="bg-examprep w-full cursor-pointer p-3 text-start font-medium uppercase text-white transition-all duration-200 hover:scale-90 hover:no-underline {buttonClass}"
>
Start course
</div>
</a>
<PrimaryButton
label="Start course"
class="w-full text-start font-medium uppercase {buttonClass}"
href={`/course/${slug}`}
/>
</div>
</div>
packages/course-app/src/template/src/lib/components/examprep/Footer.svelte
+7 -5
View File
@@ -1,7 +1,7 @@
<script>
import { getPageSection } from '@/utils/helpers/page';
import { sharedPage } from '@/utils/stores/pages';
import Logo from '../ui/_custom/Logo.svelte';
import Logo from '@/components/ui/_custom/Logo.svelte';
import { SECTION } from '@/utils/constants/page';
const content = $derived(getPageSection($sharedPage, SECTION.FOOTER));
@@ -10,21 +10,23 @@
{#if content?.show}
<nav
class="flex w-full flex-col items-start gap-4 bg-white px-6 py-4 md:flex-row md:items-center md:justify-between"
class="flex w-full flex-col items-start gap-4 bg-white px-6 py-10 md:flex-row md:items-center md:justify-between"
>
<Logo src={seo?.settings.logo} alt={seo?.settings.title} />
<ul class="-md:gap-8 flex flex-col items-start gap-4 underline md:flex-row md:items-center">
{#if content.settings.twitter}
<a href={content.settings.twitter} target="_blank" title="twitter">Twitter</a>
{/if}
{#if content.settings?.youtube}
<a href={content.settings?.youtube} target="_blank">Youtube</a>{/if}
<a href={content.settings?.youtube} target="_blank">Youtube</a>
{/if}
{#if content.settings.linkedin}
<a href={content.settings.linkedin} target="_blank" title="linkedin">LinkedIn</a>
{/if}
{#if content.settings.facebook}
<a href={content.settings.facebook} target="_blank" title="facebook">facebook</a>
<a href={content.settings.facebook} target="_blank" title="facebook">Facebook</a>
{/if}
</ul>
<a
@@ -33,7 +35,7 @@
rel="noopener noreferrer"
class="flex items-center gap-1"
>
<p class=" text-examprep text-base font-semibold underline">Built on ClassroomIO</p>
<p class="text-examprep text-base font-semibold underline">Built on ClassroomIO</p>
</a>
</nav>
{/if}
packages/course-app/src/template/src/lib/components/examprep/Navigation.svelte
+1 -1
View File
@@ -4,7 +4,7 @@
import { getPageSection } from '@/utils/helpers/page';
import { sharedPage } from '@/utils/stores/pages';
import PrimaryButton from './PrimaryButton.svelte';
import Logo from '../ui/_custom/Logo.svelte';
import Logo from '@/components/ui/_custom/Logo.svelte';
let open = $state(false);
packages/course-app/src/template/src/lib/components/examprep/pages/Course.svelte
+2 -2
View File
@@ -87,11 +87,11 @@
<div class="mb-4 flex flex-col items-start justify-between md:flex-row md:items-center">
<span class="mb-4 space-y-2 px-4 text-start lg:mb-0">
<p class="mb-4 font-serif text-2xl md:text-3xl">{section.courses.settings.title}</p>
<p class=" w-full text-sm font-medium text-gray-500 md:w-[80%]">
<p class="w-full text-sm font-medium text-gray-500 md:w-[80%]">
{section.courses.settings.subtitle}
</p>
</span>
<div class=" w-full md:w-fit">
<div class="w-full md:w-fit">
<div class="flex w-full items-center gap-1 bg-slate-100 p-2 md:gap-4">
<p class="whitespace-nowrap text-sm font-medium md:text-base">Filter by</p>
<div class="flex w-full flex-row items-center bg-white p-1 md:w-fit">
packages/course-app/src/template/src/lib/components/examprep/pages/Home.svelte
+6 -6
View File
@@ -100,7 +100,7 @@
transition:slide={{ duration: 300, easing: quintOut, axis: 'x' }}
class="flex min-w-full flex-1 flex-col items-center justify-between md:h-full"
>
<p class=" line-clamp-4 text-base font-semibold italic md:line-clamp-3 md:text-lg">
<p class="line-clamp-4 text-base font-semibold italic md:line-clamp-3 md:text-lg">
"{testimonial.description}"
</p>
@@ -137,9 +137,9 @@
</section>
{/if}
<!-- courses -->
<!-- Courses -->
{#if coursesSection?.show}
<section id="course" class="h-full bg-white px-4 pb-20 pt-4 md:px-20">
<section id="course" class="h-full bg-white px-4 py-20 md:px-20">
<h1 class="text-center font-serif text-3xl">{coursesSection.settings.title}</h1>
<p class="font-inter mx-auto mb-8 w-full text-center font-medium md:w-[50%]">
{coursesSection.settings.subtitle}
@@ -172,7 +172,7 @@
</section>
{/if}
<!-- about -->
<!-- About -->
{#if aboutSection?.show}
<section id="course" class="h-full bg-white px-4 pb-20 pt-4 md:px-10">
<h1 class="mx-auto w-full text-center font-serif text-3xl text-gray-800 md:w-[50%]">
@@ -188,7 +188,7 @@
class="flex h-fit max-h-[300px] max-w-full flex-col justify-start gap-4 rounded-lg border-2 border-gray-200 bg-white p-4 md:h-[150px] md:max-h-[200px] md:max-w-[500px]"
>
<span class="flex items-center gap-2">
<CheckmarkFilled size={24} class="fill-blue-400" />
<CheckmarkFilled size={24} class="fill-blue-800" />
<p class="font-serif text-xl">{item.title}</p>
</span>
<p class="font-inter text-base text-gray-400">{item.subtitle}</p>
@@ -232,7 +232,7 @@
<PrimaryButton
label={ctaSection.settings.button.label}
href={ctaSection.settings.button.redirect && ctaSection.settings.button.link}
class=" text-examprep bg-white text-lg font-bold uppercase hover:bg-white"
class="text-examprep text-md bg-white px-8 uppercase hover:bg-white"
/>
</div>
</section>
packages/course-app/src/template/src/lib/components/index.ts
+3
View File
@@ -4,6 +4,7 @@ import { components as ClassicComponents } from './classic';
import { components as MinimalComponents } from './minimal';
import { components as ExamprepComponents } from './examprep';
import { components as WebflowComponents } from './webflow';
import { components as BootcampComponents } from './bootcamp';
function getComponents() {
switch (import.meta.env.VITE_TEMPLATE) {
@@ -17,6 +18,8 @@ function getComponents() {
return ExamprepComponents;
case 'webflow':
return WebflowComponents;
case 'bootcamp':
return BootcampComponents;
default:
return CalComponents;
}
packages/course-app/src/template/src/lib/components/minimal/CourseCard.svelte
+2 -2
View File
@@ -27,7 +27,7 @@
}
</script>
<div class="h-fit w-full min-w-[250px] max-w-[300px] space-y-4">
<div class="h-fit w-[325px] space-y-4">
<div class="space-y-4 rounded-sm border border-[#EAEAEA] px-4 {className}">
<div class="overflow-hidden border-b py-4">
<p class="p line-clamp-1 overflow-ellipsis border-[#EAEAEA] text-xl font-semibold">
@@ -35,7 +35,7 @@
</p>
</div>
<div class="overflow-hidden rounded-md">
<p class=" line-clamp-3 overflow-ellipsis text-justify text-[#878787]">
<p class="line-clamp-3 overflow-ellipsis text-justify text-[#878787]">
{description}
</p>
</div>
packages/course-app/src/template/src/lib/components/minimal/Footer.svelte
+5 -3
View File
@@ -10,9 +10,10 @@
{#if content?.show}
<nav
class="flex w-full flex-col items-start gap-4 bg-white px-6 py-4 md:flex-row md:items-center md:justify-between"
class="flex w-full flex-col items-start gap-4 bg-white px-6 py-10 md:flex-row md:items-center md:justify-between"
>
<Logo src={seo?.settings.logo} alt={seo?.settings.title} />
<ul
class="-md:gap-8 flex flex-col items-start gap-4 font-semibold capitalize underline md:flex-row md:items-center"
>
@@ -20,13 +21,14 @@
<a href={content.settings.twitter} target="_blank" title="twitter">Twitter</a>
{/if}
{#if content.settings?.youtube}
<a href={content.settings?.youtube} target="_blank">Youtube</a>{/if}
<a href={content.settings?.youtube} target="_blank">Youtube</a>
{/if}
{#if content.settings.linkedin}
<a href={content.settings.linkedin} target="_blank" title="linkedin">LinkedIn</a>
{/if}
{#if content.settings.facebook}
<a href={content.settings.facebook} target="_blank" title="facebook">facebook</a>
<a href={content.settings.facebook} target="_blank" title="facebook">Facebook</a>
{/if}
</ul>
<a
packages/course-app/src/template/src/lib/components/minimal/Navigation.svelte
+1 -1
View File
@@ -18,7 +18,7 @@
<nav class={`relative flex w-full items-center justify-between bg-white px-6 py-4 dark:bg-black`}>
<!-- Logo Section -->
<Logo src={seo?.settings.logo} alt={seo?.settings.title} className="w-24" addAcademy />
<Logo src={seo?.settings.logo} alt={seo?.settings.title} addAcademy />
<!-- Mobile Menu Button (Visible only on mobile and when logged in) -->
packages/course-app/src/template/src/lib/components/minimal/TestimonialCard.svelte
+3 -3
View File
@@ -13,16 +13,16 @@
</script>
<section
class="border bg-[#192533] text-white border-[#D7D7D7] px-4 py-6 space-y-4 rounded h-full w-full max-w-[350px] md:max-w-[300px]"
class="h-full w-full max-w-[350px] space-y-4 rounded border border-[#D7D7D7] bg-[#192533] px-4 py-6 text-white md:max-w-[300px]"
>
<div class="flex items-center gap-2">
<img src={seo?.settings.logo} alt="" class="w-12 h-12 rounded-full" />
<img src={seo?.settings.logo} alt="" class="h-12 w-12 rounded-full bg-white" />
<span>
<p class="text-sm font-bold">{name}</p>
<p class="text-xs text-white">{role}</p>
</span>
</div>
<p class="text-white text-justify line-clamp-5">
<p class="line-clamp-5 text-justify text-white">
{description}
</p>
</section>
packages/course-app/src/template/src/lib/components/minimal/pages/Courses.svelte
+5 -7
View File
@@ -65,9 +65,9 @@
}
</script>
<main class="font-ibm">
<main>
{#if section.header?.show}
<div id="course-banner" class="h-full bg-cover bg-center md:h-[600px] md:p-10">
<div id="course-banner" class="h-full bg-cover bg-center md:h-[60vh] md:p-10">
<div class="relative flex h-full items-center justify-center px-4 py-20 text-white md:px-10">
<div class="w-full space-y-6 text-white">
<h1 class="w-full font-mono text-2xl font-semibold md:w-[60%] md:text-6xl">
@@ -76,8 +76,8 @@
<p class="w-full md:w-[60%] lg:w-[40%]">{section.header.settings.subtitle}</p>
<div class="flex items-center gap-2 md:gap-4">
<PrimaryButton
onClick={() => goto(section.header?.settings.action.link)}
class="rounded-none bg-blue-900 px-6 py-3 font-semibold uppercase hover:scale-95 hover:bg-blue-900"
href={section.header?.settings.action.link}
class="rounded-none bg-blue-900 px-8 py-3 uppercase hover:scale-95 hover:bg-blue-900"
label={section.header.settings.action.label}
/>
</div>
@@ -112,9 +112,7 @@
{/each}
</div>
</div>
<section
class="grid grid-cols-1 place-items-center gap-4 md:grid-cols-2 lg:grid-cols-3"
>
<section class="flex flex-wrap justify-center gap-4">
{#each filteredCourses.slice(0, viewAllCourses ? filteredCourses.length : 3) as courseData}
<CourseCard
className="bg-[#FDFDFD]"
packages/course-app/src/template/src/lib/components/minimal/pages/Home.svelte
+4 -5
View File
@@ -26,10 +26,12 @@
{#if $homePage}
{@const content = getPageSection($homePage, SECTION.HERO)}
{#if content?.show}
<section class="flex max-h-full items-center justify-center px-5 py-5 md:px-14 md:py-14">
<section
class="flex max-h-full items-center justify-center px-5 py-5 md:h-[60vh] md:px-14 md:py-14"
>
<section class="mx-auto flex max-w-6xl items-center justify-between gap-4">
<div class="w-full max-w-[50%] space-y-6 text-white">
<div class="w-fit rounded-sm bg-emerald-100 px-3 py-1 md:border">
<div class="w-fit rounded-sm bg-white px-3 py-1 md:border">
<p class="text-minimal text-center text-sm font-bold uppercase">
{content.settings?.title}
</p>
@@ -63,7 +65,6 @@
{/if}
<!-- Learn -->
{#if learnSection?.show}
<section
id="about"
@@ -101,7 +102,6 @@
{/if}
<!-- Courses -->
{#if courseSection?.show}
<section id="course" class="h-full space-y-10 bg-white px-5 pb-36 pt-10">
<h2 class="mx-auto mb-4 w-full text-center text-4xl font-bold md:w-[70%]">
@@ -141,7 +141,6 @@
{/if}
<!-- Testimonial -->
{#if testimonialSection?.show}
<section class="relative h-full pt-10 text-white">
<div class="absolute -top-20 left-[5%] w-[90%] md:-top-32">
packages/course-app/src/template/src/lib/components/posthog/Footer.svelte
+2 -1
View File
@@ -20,7 +20,8 @@
<a href={content.settings.twitter} target="_blank" title="twitter">Twitter</a>
{/if}
{#if content.settings?.youtube}
<a href={content.settings?.youtube} target="_blank">Youtube</a>{/if}
<a href={content.settings?.youtube} target="_blank">Youtube</a>
{/if}
{#if content.settings.linkedin}
<a href={content.settings.linkedin} target="_blank" title="linkedin">LinkedIn</a>
packages/course-app/src/template/src/lib/components/posthog/Navigation.svelte
+2 -2
View File
@@ -21,10 +21,10 @@
</script>
<nav
class={`border-posthog-border relative flex w-full items-center justify-between border-b px-6 py-3`}
class="border-posthog-border relative flex w-full items-center justify-between border-b px-6 py-3"
>
<!-- Logo Section -->
<Logo src={seo?.settings.logo} alt={seo?.settings.title} className="w-24" addAcademy />
<Logo src={seo?.settings.logo} alt={seo?.settings.title} addAcademy />
<!-- Mobile Menu Button (Visible only on mobile and when logged in) -->
<button onclick={toggleMenu} class="lg:hidden">
packages/course-app/src/template/src/lib/components/posthog/pages/Courses.svelte
+23 -23
View File
@@ -64,24 +64,24 @@
}
</script>
<main class="bg-posthog-background dark:bg-black dark:text-white overflow-x-hidden">
<main class="bg-posthog-background overflow-x-hidden dark:bg-black dark:text-white">
{#if section.header?.show}
<section class="flex items-center justify-center py-10 px-4 md:px-14 min-h-full">
<section class="flex min-h-full items-center justify-center px-4 py-10 md:px-14">
<section
class="mx-auto text-center px-4 lg:px-10 py-20 space-y-4 bg-[#E5E7E0] dark:bg-[#232429] rounded-md w-full lg:w-[70%]"
class="mx-auto w-full space-y-4 rounded-md bg-[#E5E7E0] px-4 py-20 text-center dark:bg-[#232429] lg:w-[70%] lg:px-10"
>
<div class="flex flex-col items-center gap-8 relative rounded-lg">
<span class="absolute w-2 h-2 rounded-full bg-red-500 -top-14 left-3"></span>
<span class="absolute w-2 h-2 rounded-full bg-white top-10 -left-10"></span>
<span class="absolute w-2 h-2 rounded-full bg-yellow-500 -top-10 -right-3"></span>
<span class="absolute w-2 h-2 rounded-full bg-blue-800 top-14 -right-10"></span>
<div class="relative flex flex-col items-center gap-8 rounded-lg">
<span class="absolute -top-14 left-3 h-2 w-2 rounded-full bg-red-500"></span>
<span class="absolute -left-10 top-10 h-2 w-2 rounded-full bg-white"></span>
<span class="absolute -right-3 -top-10 h-2 w-2 rounded-full bg-yellow-500"></span>
<span class="absolute -right-10 top-14 h-2 w-2 rounded-full bg-blue-800"></span>
<p class="text-center text-3xl md:text-5xl font-bold w-full md:w-[90%]">
<p class="w-full text-center text-3xl font-bold md:w-[90%] md:text-5xl">
{section.header.settings.title}
<span class="text-[#F54E00]">{section.header.settings.titleHighlight}</span>
</p>
<p class="text-center w-full text-lg text-[#878787] md:w-[70%]">
<p class="w-full text-center text-lg text-[#878787] md:w-[70%]">
{section.header.settings.subtitle}
</p>
</div>
@@ -89,23 +89,23 @@
</section>
{/if}
<section id="course" class="px-2 py-20 h-full lg:px-16">
<div class="relative w-full flex flex-row items-start justify-start lg:gap-2 mt-2">
<section id="course" class="h-full px-2 py-20 lg:px-16">
<div class="relative mt-2 flex w-full flex-row items-start justify-start lg:gap-2">
{#if data.courses.length > 0}
<div class="w-full flex gap-2">
<div class="hidden lg:block min-w-max">
<p class="font-semibold mb-4">Filter by</p>
<div class="flex w-full gap-2">
<div class="hidden min-w-max lg:block">
<p class="mb-4 font-semibold">Filter by</p>
<div class="w-full space-y-2">
{#each filter as item}
<form
class="space-x-2 text-[#3C4043] dark:text-white font-medium border border-[#EAEAEA] dark:border-[#232429] bg-[#FDFDFD] dark:bg-[#232429] rounded-md px-4 py-4"
class="space-x-2 rounded-md border border-[#EAEAEA] bg-[#FDFDFD] px-4 py-4 font-medium text-[#3C4043] dark:border-[#232429] dark:bg-[#232429] dark:text-white"
>
<input
type="checkbox"
checked={item.checked}
name={item.title}
onchange={applyFilter}
class=" dark:accent-[#EB9D2A] accent-[#F54E00] focus:ring-0"
class="accent-[#F54E00] focus:ring-0 dark:accent-[#EB9D2A]"
/>
<label for={item.title} class="whitespace-nowrap">{item.title}</label>
@@ -114,8 +114,8 @@
</div>
</div>
<div class="w-full max-h-screen p-4 md:p-8">
<section class="flex flex-wrap items-center justify-center gap-4 w-full">
<div class="max-h-screen w-full p-4 md:p-8">
<section class="flex w-full flex-wrap items-center justify-center gap-4">
{#each filteredCourses.slice(0, viewAll ? filteredCourses.length : 3) as courseData}
<CourseCard
slug={courseData.slug}
@@ -126,24 +126,24 @@
</section>
{#if filteredCourses.length == 0}
<div class="px-4 w-full mx-auto">
<div class="mx-auto w-full px-4">
<EmptyState />
</div>
{/if}
</div>
{#if filteredCourses.length > 3}
<div class="w-full flex items-center justify-center my-5">
<div class="my-5 flex w-full items-center justify-center">
<Button
on:click={() => (viewAll = !viewAll)}
class="dark:text-black bg-transparent uppercase text-black ring-1 ring-[#B17816] dark:bg-[#EB9D2A] hover:scale-95 hover:bg-[#EB9D2A] shadow-[0px_3px_#B17816] font-bold mb-4"
class="mb-4 bg-transparent font-bold uppercase text-black shadow-[0px_3px_#B17816] ring-1 ring-[#B17816] hover:scale-95 hover:bg-[#EB9D2A] dark:bg-[#EB9D2A] dark:text-black"
>{viewAll === true ? 'Show less' : 'View more courses'}</Button
>
</div>
{/if}
</div>
{:else}
<div class="px-4 w-full lg:w-[70%] mx-auto">
<div class="mx-auto w-full px-4 lg:w-[70%]">
<EmptyState className="dark:bg-[#232429] dark:border-[#EAEAEA]" type="course" />
</div>
{/if}
packages/course-app/src/template/src/lib/components/posthog/pages/Home.svelte
+2 -2
View File
@@ -51,7 +51,7 @@
/>
</div>
<div class=" relative flex w-full rounded-lg md:w-[800px] md:max-w-[80vw] lg:max-w-[80%]">
<div class="relative flex w-full rounded-lg md:w-[800px] md:max-w-[80vw] lg:max-w-[80%]">
<span class="absolute -top-14 left-3 h-2 w-2 rounded-full bg-red-500"></span>
<span class="absolute -left-10 top-10 h-2 w-2 rounded-full bg-white"></span>
<span class="absolute -right-3 -top-10 h-2 w-2 rounded-full bg-yellow-500"></span>
@@ -121,7 +121,7 @@
class="flex h-[150px] max-h-[200px] w-full max-w-full flex-col gap-2 overflow-hidden rounded-lg border border-[#D0D1C9] bg-[#E5E7E0] p-4 dark:bg-[#232429] md:max-w-[320px] lg:max-w-[450px]"
>
<span class="flex items-center gap-2">
<CheckmarkFilled size={24} class=" fill-[#F54E00] dark:fill-[#EB9D2A]" />
<CheckmarkFilled size={24} class="fill-[#F54E00] dark:fill-[#EB9D2A]" />
<p class="line-clamp-1 text-lg font-bold capitalize">{item.title}</p>
</span>
<p class="line-clamp-4 text-sm">{item.subtitle}</p>
packages/course-app/src/template/src/lib/components/ui/_custom/Logo.svelte
+8 -17
View File
@@ -4,21 +4,12 @@
let { src, alt, className = '', addAcademy = false } = $props();
</script>
{#snippet logo(src = '/logo.png', alt = 'logo', className = '')}
<a href="/#" class={cn('w-20', className)}>
<img
src={src}
alt={alt}
class="mx-auto inline-block rounded text-white"
/>
</a>
{/snippet}
<a href="/#" class="flex flex-row items-center gap-1">
<figure class={cn('w-20', className)}>
<img {src} {alt} class="mx-auto inline-block rounded text-white" />
</figure>
{#if addAcademy}
<div class="flex flex-row items-center gap-1">
{@render logo(src, alt, className)}
<span class="mt-1 text-lg font-semibold italic">Academy</span>
</div>
{:else}
{@render logo(src, alt, className)}
{/if}
{#if addAcademy}
<span class="text-lg font-semibold italic">Academy</span>
{/if}
</a>
packages/course-app/src/template/src/lib/components/webflow/CourseCard.svelte
+1 -1
View File
@@ -33,7 +33,7 @@
{title}
</p>
</div>
<p class=" line-clamp-3 overflow-ellipsis text-justify text-[#ABABAB]">
<p class="line-clamp-3 overflow-ellipsis text-justify text-[#ABABAB]">
{description}
</p>
</div>
packages/course-app/src/template/src/lib/components/webflow/Footer.svelte
+3 -2
View File
@@ -22,13 +22,14 @@
<a href={content.settings.twitter} target="_blank" title="twitter">Twitter</a>
{/if}
{#if content.settings?.youtube}
<a href={content.settings?.youtube} target="_blank">Youtube</a>{/if}
<a href={content.settings?.youtube} target="_blank">Youtube</a>
{/if}
{#if content.settings.linkedin}
<a href={content.settings.linkedin} target="_blank" title="linkedin">LinkedIn</a>
{/if}
{#if content.settings.facebook}
<a href={content.settings.facebook} target="_blank" title="facebook">facebook</a>
<a href={content.settings.facebook} target="_blank" title="facebook">Facebook</a>
{/if}
</ul>
<a
packages/course-app/src/template/src/lib/data/pages.json
+80 -117
View File
@@ -9,11 +9,11 @@
"type": "seo",
"show": true,
"settings": {
"title": "Cal.com University",
"description": "The one place to learn everything about Cal.com",
"url": "https://cal.com",
"appUrl": "https://app.cal.com",
"keywords": ["cal.com", "saas university"],
"title": "Hype180 Academy",
"description": "Learn React.js from industry experts at Hype180",
"url": "https://courseapp.oncws.com",
"appUrl": "https://courseapp.oncws.com",
"keywords": ["react.js", "javascript", "web development", "coding bootcamp"],
"logo": "/logo.svg"
}
},
@@ -28,17 +28,17 @@
},
{
"title": "Blog",
"link": "https://cal.com/blog",
"link": "https://classroomio.com/blog",
"redirect": true
},
{
"title": "API",
"link": "https://cal.com/docs/api-reference/v2/introduction",
"link": "https://classroomio.com/docs",
"redirect": true
},
{
"title": "Docs",
"link": "https://cal.com/docs/developing/introduction",
"link": "https://classroomio.com/docs",
"redirect": true
}
]
@@ -70,16 +70,16 @@
"type": "header",
"show": true,
"settings": {
"title": "Scheduling Education",
"titleHighlight": "The Cal University - Learn All About Scheduling",
"subtitle": "Cal.com university is the one stop shop for learning everything about scheduling with Cal.com. Save countless hours and improve your team's productivity.",
"title": "Master React.js Development",
"titleHighlight": "Learn from Industry Experts at Hype180",
"subtitle": "Join our comprehensive React.js training program and learn how to build modern web applications from experienced developers who work on real-world projects daily.",
"action": {
"label": "Explore courses",
"label": "Start Learning",
"link": "/courses",
"redirect": false
},
"banner": {
"video": "https://www.youtube.com/watch?v=qqAYW7uxErI",
"video": "https://www.youtube.com/watch?v=example",
"image": "",
"type": "video",
"show": true
@@ -90,26 +90,26 @@
"type": "about",
"show": true,
"settings": {
"title": "Learn with us: To unlock your potential and fuel your Expertise",
"subtitle": "Our courses will help you make sense of the numbers, drive improvements, and create products that stick.",
"title": "Transform Your Career with React.js Expertise",
"subtitle": "Our courses are designed by professional developers to help you master React.js and modern web development practices.",
"benefits": {
"title": "What you will gain",
"title": "Why Choose Hype180",
"list": [
{
"title": "Real-world coding challenges.",
"subtitle": "Work through projects that mirror real-world tasks, helping you build a portfolio that showcases your skills to potential employers."
"title": "Industry-Relevant Projects",
"subtitle": "Work on real-world React applications that mirror actual client projects we've delivered at Hype180."
},
{
"title": "Experienced Instructors",
"subtitle": "Learn from industry experts who bring their hands-on experience to the classroom, guiding you every step of the way."
"title": "Active Developers as Instructors",
"subtitle": "Learn from developers who are actively building and shipping React applications in production environments."
},
{
"title": "Comprehensive Materials",
"subtitle": "Get access to up-to-date resources that cover all key topics and methodologies, ensuring a complete learning experience."
"title": "Modern Tech Stack",
"subtitle": "Master the latest React features, tools, and best practices used in professional development environments."
},
{
"title": "Proven Success",
"subtitle": "With over 20 years of combined teaching experience, our methods have been proven to lead to better results and a deep understanding of the subject matter."
"title": "Career Support",
"subtitle": "Get guidance on building your portfolio, preparing for interviews, and landing your first React developer role."
}
]
}
@@ -119,18 +119,18 @@
"type": "courses",
"show": true,
"settings": {
"title": "Featured Courses",
"title": "Featured React.js Courses",
"titleHighlight": "",
"subtitle": "Explore our most popular courses that will help you master the art of scheduling with Cal.com"
"subtitle": "From fundamentals to advanced concepts, our courses cover everything you need to become a professional React developer"
}
},
{
"type": "pathway",
"show": true,
"settings": {
"title": "Become an expert with our \"Learning Path\" Programs",
"title": "Your Path to Becoming a React Developer",
"titleHighlight": "",
"subtitle": "With over 5 years of extensive coding experience, I am equipped to help you achieve success in your choice of coding career."
"subtitle": "Follow our structured learning path to go from beginner to professional React developer, guided by our team of experienced instructors."
}
},
{
@@ -139,24 +139,24 @@
"settings": {
"list": [
{
"rating": 4,
"name": "Adewale",
"description": "Adewale Adebayo is a seasoned professional with a wealth of experience in software development. He is passionate about coding and teaching, and his classes are designed to be engaging and practical, ensuring that students gain hands-on skills and knowledge."
"rating": 5,
"name": "Sarah Chen",
"description": "Senior React Developer at Hype180 with 8 years of experience building enterprise-level applications. Specializes in React performance optimization and state management."
},
{
"rating": 4,
"name": "Folakemi Adeyemi",
"description": "Folake Adeyemi has extensive expertise in project management and leadership. She combines theoretical knowledge with practical case studies, ensuring that students are well-prepared for real-world challenges. "
"rating": 5,
"name": "Marcus Rodriguez",
"description": "Full-stack developer with expertise in React, Node.js, and modern JavaScript. Has led multiple successful client projects and loves teaching best practices."
},
{
"rating": 4,
"name": "Ifedayo Olabisi",
"description": "Ifedayo Olabisi is a distinguished instructor in web development. With a deep understanding of both front-end and back-end technologies, he provides comprehensive training that covers all aspects of web development."
"rating": 5,
"name": "Jessica Park",
"description": "Frontend architect specializing in React and TypeScript. Passionate about clean code and component-driven development methodologies."
},
{
"rating": 4,
"name": "Kemi Adediran",
"description": "Kemi Adediran is a skilled digital marketer with a passion for sharing her knowledge. Her courses cover the latest trends and techniques in digital marketing, from SEO to social media strategy."
"rating": 5,
"name": "David Kumar",
"description": "React Native expert and web performance specialist. Brings real-world experience from building and scaling React applications at startups and large enterprises."
}
]
}
@@ -165,23 +165,23 @@
"type": "faq",
"show": true,
"settings": {
"title": "Frequently Asked Questions.",
"subtitle": "Our courses will help you make sense of the numbers, drive improvements, and create products that stick.",
"title": "Common Questions About Our React Courses",
"subtitle": "Get answers to frequently asked questions about our React.js training program",
"questions": [
{
"id": 1,
"title": "What sets your platform apart from others?",
"content": "Our platform is focused on providing practical, project-based learning. We aim to equip learners with skills that are directly applicable to their career paths. From real-world projects to experienced instructors, we focus on a hands-on approach to help you master each topic efficiently."
"title": "Do I need prior programming experience?",
"content": "While some JavaScript knowledge is helpful, our beginner courses start from the basics. We'll help you build a strong foundation before moving to advanced React concepts."
},
{
"id": 2,
"title": "Are the courses beginner-friendly?",
"content": "Absolutely! Whether you're a complete beginner or looking to advance your skills, we have courses designed for every level. Our step-by-step approach ensures that even the most complex topics are broken down into easy-to-understand lessons."
"title": "How practical are the courses?",
"content": "Very practical! You'll build real projects that mirror our agency work, including e-commerce sites, dashboards, and social media applications using React."
},
{
"id": 3,
"title": "How long does it take to complete a course?",
"content": "Course lengths vary depending on the subject. However, most of our courses are designed to be completed at your own pace, allowing you to take the time you need to fully understand the material before moving on."
"title": "What support do you provide?",
"content": "You'll have access to our instructor team, weekly live Q&A sessions, a private Discord community, and code reviews for your projects."
}
]
}
@@ -192,56 +192,19 @@
"settings": {
"list": [
{
"name": "Zulaike Elebute",
"role": "Web Developer",
"description": "I can't recommend the Mobile App Development bootcamp enough. The course was challenging, but the support from my peers and instructors was incredible. I learned so much about both iOS and Android development, and I'm now developing apps for a tech startup."
"name": "Michael Chang",
"role": "Junior React Developer",
"description": "The React fundamentals course was exactly what I needed. The instructors broke down complex concepts into manageable pieces, and the hands-on projects helped cement my understanding."
},
{
"name": "Zulaike Elebute",
"role": "Content Writer",
"description": "The course was challenging, but the support from my peers and instructors was incredible. I learned so much about both iOS and Android development, and I'm now developing apps for a tech startup."
"name": "Emma Wilson",
"role": "Frontend Developer",
"description": "Thanks to Hype180's advanced React course, I was able to level up my skills and land a senior developer position. The real-world projects were especially valuable."
},
{
"name": "Oluwaseun olaniyan",
"role": "Frontend Developement",
"description": "I can't recommend the Mobile App Development bootcamp enough. The course was challenging, but the support from my peers and instructors was incredible. I learned so much about both iOS and Android development, and I'm now developing apps for a tech startup."
},
{
"name": "Zulaike Elebute",
"role": "Web Developer",
"description": "The feedback and real-world projects were invaluable—I’m now confident in delivering high-quality work that connects and engages"
},
{
"name": "Oluwaseun olaniyan",
"role": "Content Writer",
"description": "The lessons were comprehensive, covering everything from HTML to advanced JavaScript. Working on interactive projects transformed my approach, and I’m now ready to create polished, user-friendly interfaces!"
},
{
"name": "Oluwaseun olaniyan",
"role": "Web Developer",
"description": "I can't recommend the Mobile App Development bootcamp enough. The course was challenging, but the support from my peers and instructors was incredible. I learned so much about both iOS and Android development, and I'm now developing apps for a tech startup."
},
{
"name": "Oluwaseun olaniyan",
"role": "Content Writer",
"description": " revelation. I learned techniques to craft compelling, audience-focused content that tells a story. The feedback and real-world projects were invaluable—I’m now confident in delivering high-quality work that connects and engages"
},
{
"name": "Oluwaseun olaniyan",
"role": "Frontend Developement",
"description": "I can't recommend the Mobile App Development bootcamp enough. The course was challenging, but the support from my peers and instructors was incredible. I learned so much about both iOS and Android development, and I'm now developing apps for a tech startup."
},
{
"name": "Oluwaseun olaniyan",
"role": "Web Developer",
"description": "Through hands-on projects, I learned to build responsive, secure websites from scratch. I now feel equipped to tackle complex challenges with confidence"
},
{
"name": "Oluwaseun olaniyan",
"role": "Web Developer",
"description": "I can't recommend the Mobile App Development bootcamp enough. The course was challenging, but the support from my peers and instructors was incredible. I learned so much about both iOS and Android development, and I'm now developing apps for a tech startup."
"name": "Alex Thompson",
"role": "Software Engineer",
"description": "The React ecosystem can be overwhelming, but Hype180's structured approach helped me master not just React, but also the surrounding tools and best practices."
}
]
}
@@ -250,22 +213,22 @@
"type": "contact",
"show": true,
"settings": {
"title": "Have you got any",
"titleHighlight": "Questions?",
"subtitle": "Reach out to us with any questions you might have.",
"address": "Ashwoodfield House Farm, Kidderminster Rd, Stourbridge, Kingswinford DY6 0AA",
"phone": "+4407339904995",
"email": "help@digdippa.com"
"title": "Need help getting started?",
"titleHighlight": "Contact Us",
"subtitle": "Our team is here to help you choose the right learning path.",
"address": "123 Tech Hub Street, San Francisco, CA 94105",
"phone": "+1 (555) 123-4567",
"email": "learn@hype180.com"
}
},
{
"type": "cta",
"settings": {
"title": "Programs that you will love.",
"titleHighlight": "100% guaranteed",
"subtitle": "Unlock skills you'll use for life with courses designed to inspire, empower, and elevate your expertise.",
"title": "Start Your React Journey Today",
"titleHighlight": "Join Hype180",
"subtitle": "Transform your career with our industry-leading React.js courses and expert instruction.",
"button": {
"label": "Learn More",
"label": "Browse Courses",
"link": "/courses",
"redirect": false
}
@@ -275,8 +238,8 @@
{
"type": "mailinglist",
"settings": {
"title": "Join our mailing list",
"subtitle": "We are constantly releasing new courses and sharing them with our email list. Subscribe to get notified once we release a new course.",
"title": "Stay Updated",
"subtitle": "Subscribe to get notified about new courses, React tips, and exclusive learning resources.",
"button": {
"label": "Subscribe",
"link": "/#",
@@ -297,16 +260,16 @@
"type": "header",
"show": true,
"settings": {
"title": "Learn with us",
"titleHighlight": "Our Courses",
"subtitle": "Designed to guide you step-by-step through essential skills. Browse, enroll, and start transforming your career today!",
"title": "React.js Courses",
"titleHighlight": "Learn from the Experts",
"subtitle": "Comprehensive React.js courses designed to take you from beginner to professional developer.",
"action": {
"label": "Explore Courses",
"label": "View Courses",
"link": "/courses",
"redirect": false
},
"banner": {
"video": "https://www.youtube.com/watch?v=qqAYW7uxErI",
"video": "https://www.youtube.com/watch?v=example",
"image": "",
"type": "video",
"show": true
@@ -317,19 +280,19 @@
"type": "courses",
"show": true,
"settings": {
"title": "Unlock your potential with engaging and innovative online courses",
"title": "Master Modern React Development",
"titleHighlight": "",
"subtitle": "Explore creative and tech courses that will help you own you skill set"
"subtitle": "From components to deployment, learn everything you need to succeed as a React developer"
}
},
{
"type": "cta",
"settings": {
"title": "Programs that you will love.",
"titleHighlight": "100% guaranteed",
"subtitle": "Unlock skills you'll use for life with courses designed to inspire, empower, and elevate your expertise.",
"title": "Ready to Master React?",
"titleHighlight": "Join Hype180 Today",
"subtitle": "Start your journey to becoming a professional React developer with our comprehensive courses.",
"button": {
"label": "Learn More",
"label": "Enroll Now",
"link": "/courses",
"redirect": false
},
packages/course-app/src/template/static/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 15 KiB

packages/course-app/src/template/static/logo.svg
+2 -8
View File
File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 11 KiB

packages/course-app/src/template/static/posthog-logo.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 140"><g fill-rule="nonzero" fill="none"><path d="M55.383 75.225c-1.874 3.748-7.222 3.748-9.096 0l-4.482-8.963a5.085 5.085 0 0 1 0-4.548l4.482-8.964c1.874-3.748 7.222-3.748 9.096 0l4.482 8.964a5.084 5.084 0 0 1 0 4.548l-4.482 8.963Zm0 50.836c-1.874 3.747-7.222 3.747-9.096 0l-4.482-8.964a5.085 5.085 0 0 1 0-4.548l4.482-8.964c1.874-3.748 7.222-3.748 9.096 0l4.482 8.964a5.084 5.084 0 0 1 0 4.548l-4.482 8.964Z" fill="#1D4AFF"/><path d="M0 106.765c0-4.53 5.477-6.8 8.68-3.596l23.307 23.307c3.204 3.204.935 8.68-3.595 8.68H5.085A5.085 5.085 0 0 1 0 130.073v-23.307Zm0-24.55c0 1.35.536 2.643 1.49 3.596l47.856 47.856a5.086 5.086 0 0 0 3.595 1.49h26.286c4.53 0 6.799-5.477 3.595-8.681L8.681 52.334C5.477 49.131 0 51.4 0 55.93v26.286Zm0-50.834c0 1.348.536 2.642 1.49 3.595l98.69 98.691a5.086 5.086 0 0 0 3.596 1.49h26.285c4.53 0 6.8-5.477 3.596-8.681L8.681 1.5C5.477-1.704 0 .565 0 5.095v26.286Zm50.835 0c0 1.348.536 2.642 1.49 3.595l91.5 91.5c3.203 3.204 8.68.935 8.68-3.596V96.595a5.086 5.086 0 0 0-1.49-3.596l-91.5-91.5c-3.203-3.203-8.68-.934-8.68 3.596v26.286ZM110.35 1.5c-3.203-3.204-8.68-.935-8.68 3.595v26.286c0 1.348.536 2.642 1.49 3.595l40.664 40.665c3.204 3.204 8.68.935 8.68-3.596V45.76a5.086 5.086 0 0 0-1.489-3.596L110.35 1.5Z" fill="#F9BD2B"/><path d="m216.24 107.388-47.864-47.863c-3.204-3.204-8.681-.935-8.681 3.595v66.952a5.085 5.085 0 0 0 5.085 5.085h74.142a5.085 5.085 0 0 0 5.085-5.085v-6.097c0-2.809-2.286-5.052-5.07-5.414a39.27 39.27 0 0 1-22.698-11.173Zm-32.145 11.502a8.137 8.137 0 0 1-8.133-8.134 8.137 8.137 0 0 1 8.133-8.134 8.137 8.137 0 0 1 8.134 8.134 8.137 8.137 0 0 1-8.134 8.134Z" fill="#000"/><path d="M0 130.072a5.085 5.085 0 0 0 5.085 5.085h23.307c4.53 0 6.799-5.477 3.595-8.681L8.681 103.169C5.477 99.966 0 102.235 0 106.765v23.307Zm50.835-86.418L8.68 1.5C5.477-1.704 0 .565 0 5.095v26.286c0 1.348.536 2.642 1.49 3.595l49.345 49.346V43.654ZM8.68 52.334C5.477 49.131 0 51.4 0 55.93v26.286c0 1.348.536 2.642 1.49 3.595l49.345 49.346V94.489L8.68 52.334Z" fill="#1D4AFF"/><path d="M101.67 45.76a5.083 5.083 0 0 0-1.49-3.596L59.516 1.5c-3.204-3.204-8.681-.935-8.681 3.595v26.286c0 1.348.536 2.642 1.49 3.595l49.345 49.346V45.76Zm-50.835 89.397h28.392c4.53 0 6.799-5.477 3.595-8.681L50.835 94.489v40.668Zm0-91.503v38.562c0 1.348.536 2.642 1.49 3.595l49.345 49.346V96.595a5.084 5.084 0 0 0-1.49-3.596L50.835 43.654Z" fill="#F54E00"/><path d="M303.32 114.86h20.888V80.22h17.452c19.17 0 31.466-11.37 31.466-28.954 0-17.584-12.295-28.954-31.466-28.954h-38.34v92.547Zm20.888-52.488V40.16h15.337c7.932 0 12.692 4.23 12.692 11.105 0 6.876-4.76 11.106-12.692 11.106h-15.337Zm86.71 53.545c20.36 0 35.167-14.543 35.167-34.375 0-19.831-14.807-34.374-35.167-34.374-20.625 0-35.168 14.543-35.168 34.374 0 19.832 14.543 34.375 35.168 34.375Zm-15.866-34.375c0-10.577 6.346-17.848 15.866-17.848 9.386 0 15.733 7.271 15.733 17.848 0 10.577-6.347 17.849-15.733 17.849-9.52 0-15.866-7.272-15.866-17.849Zm84.462 34.375c15.601 0 26.178-9.784 26.178-21.286 0-26.97-35.829-18.245-35.829-28.822 0-2.908 3.04-4.759 7.404-4.759 4.495 0 9.916 2.776 11.634 8.858l15.601-6.479c-3.04-9.65-14.279-16.261-27.896-16.261-14.676 0-23.798 8.725-23.798 19.17 0 25.252 35.3 18.245 35.3 28.69 0 3.702-3.437 6.214-8.594 6.214-7.403 0-12.56-5.156-14.146-11.37l-15.601 6.081c3.438 10.048 13.486 19.964 29.747 19.964Zm76.43-1.718-1.321-16.791c-2.248 1.19-5.157 1.586-7.536 1.586-4.76 0-7.933-3.437-7.933-9.387V64.355h16.13v-16.13h-16.13V28.923h-19.435v19.302h-10.577v16.13h10.577v27.764c0 16.13 10.974 23.798 25.384 23.798 3.967 0 7.669-.66 10.842-1.718Zm67.764-91.887v35.961h-36.755v-35.96h-20.89v92.546h20.89V76.122h36.755v38.737h21.021V22.312h-21.021Zm67.386 93.605c20.36 0 35.168-14.543 35.168-34.375 0-19.831-14.807-34.374-35.168-34.374-20.625 0-35.168 14.543-35.168 34.374 0 19.832 14.543 34.375 35.168 34.375ZM675.23 81.542c0-10.577 6.346-17.848 15.865-17.848 9.387 0 15.733 7.271 15.733 17.848 0 10.577-6.346 17.849-15.733 17.849-9.519 0-15.865-7.272-15.865-17.849Zm88.545 31.202c7.272 0 13.75-2.512 17.188-6.875v6.346c0 7.404-5.95 12.56-15.072 12.56-6.479 0-12.164-3.173-13.09-8.594l-17.715 2.777c2.38 12.56 15.204 21.022 30.805 21.022 20.492 0 34.11-12.032 34.11-29.88V48.225h-19.17v5.685c-3.57-4.098-9.652-6.742-17.452-6.742-18.51 0-30.144 12.692-30.144 32.788 0 20.096 11.634 32.788 30.54 32.788ZM752.14 79.956c0-9.916 5.817-16.262 14.807-16.262 9.123 0 14.94 6.346 14.94 16.262s-5.817 16.262-14.94 16.262c-8.99 0-14.807-6.346-14.807-16.262Z" fill="#000"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

packages/course-app/src/template/tailwind.config.ts
+9 -4
View File
@@ -32,9 +32,9 @@ const config: Config = {
border: 'hsl(var(--posthog-border) / <alpha-value>)',
ring: 'hsl(var(--posthog-ring) / <alpha-value>)'
},
minimal: {
DEFAULT: 'hsl(var(--minimal-primary) / <alpha-value>)',
secondary: 'hsl(var(--minimal-secondary) / <alpha-value>)'
bootcamp: {
DEFAULT: 'hsl(var(--bootcamp-primary) / <alpha-value>)',
secondary: 'hsl(var(--bootcamp-secondary) / <alpha-value>)'
},
classic: {
DEFAULT: 'hsl(var(--classic-primary) / <alpha-value>)',
@@ -44,6 +44,10 @@ const config: Config = {
DEFAULT: 'hsl(var(--examprep-primary) / <alpha-value>)',
secondary: 'hsl(var(--examprep-secondary) / <alpha-value>)'
},
minimal: {
DEFAULT: 'hsl(var(--minimal-primary) / <alpha-value>)',
secondary: 'hsl(var(--minimal-secondary) / <alpha-value>)'
},
webflow: {
DEFAULT: 'hsl(var(--webflow-primary) / <alpha-value>)',
secondary: 'hsl(var(--webflow-secondary) / <alpha-value>)'
@@ -92,7 +96,8 @@ const config: Config = {
fontFamily: {
sans: [...fontFamily.sans],
roboto: ['Roboto', ...fontFamily.sans],
matter: ['Matter', ...fontFamily.sans]
matter: ['Matter', ...fontFamily.sans],
slab: ['Roboto Slab', ...fontFamily.serif]
},
keyframes: {
'accordion-down': {
packages/course-app/templates.json
+4
View File
@@ -18,5 +18,9 @@
{
"name": "webflow",
"description": "Webflow template"
},
{
"name": "bootcamp",
"description": "Bootcamp template"
}
]