Adeyemi AdetunjiandRotimi Best
2f3a4784a1
* feat: Update hero section of /blog * - changed background & text animation * update hero of blog --------- Co-authored-by: Rotimi Best <[email protected]>
66 lines
2.1 KiB
Svelte
66 lines
2.1 KiB
Svelte
<script>
|
|
import Chip from '$lib/Chip/Chip.svelte';
|
|
import { formatDate } from '$lib/utils/formatDate';
|
|
export let data;
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Blog | ClassroomIO</title>
|
|
</svelte:head>
|
|
|
|
<div class="mt-[10%] md:mt-16">
|
|
<header
|
|
class="root lg:min-h-[30rem] pt-24 pb-16 w-full flex flex-col items-center justify-center text-center border-b border-slate-100"
|
|
>
|
|
<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>
|
|
</header>
|
|
<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-14 w-full">
|
|
<div class="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>
|
|
<a href={`/blog/${post.slug}`} class="group">
|
|
<p class="font-bold text-lg py-2 group-hover:text-slate-500">{post.title}</p>
|
|
|
|
<p class="text-slate-500 py-4">{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>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.root {
|
|
background-image: url('/hero-bg.svg');
|
|
}
|
|
</style>
|