99 lines
3.6 KiB
HTML
99 lines
3.6 KiB
HTML
<div class="min-h-screen bg-slate-50 text-slate-900">
|
|
<section class="relative overflow-hidden bg-slate-950">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-indigo-700/20 via-cyan-500/10 to-purple-700/20"></div>
|
|
<div class="hero-logo-badge">
|
|
<a href="https://www.metacase.pt" target="_blank" rel="noopener">
|
|
<img
|
|
src="/logo-metacase-cor.svg"
|
|
alt="Metacase"
|
|
class="hero-logo"
|
|
/>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="relative mx-auto max-w-7xl px-6 py-20 lg:px-8">
|
|
<div class="max-w-3xl">
|
|
<span class="inline-flex rounded-full border border-white/20 bg-white/10 px-4 py-1 text-sm font-medium text-white">
|
|
Learning Hub
|
|
</span>
|
|
|
|
<h1 class="mt-6 text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">
|
|
Formações de TargetOne
|
|
</h1>
|
|
|
|
<p class="mt-6 text-lg leading-8 text-slate-300">
|
|
Formações práticas e atualizadas para a utilização da plataforma TargetOne <br>Aprendizagem orientada para a ferramenta com formações teóricas e práticas
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mx-auto max-w-7xl px-6 py-10 lg:px-8">
|
|
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-slate-900">Formações disponíveis</h2>
|
|
<p class="mt-2 text-slate-600">
|
|
Atualmente encontram-se disponíveis {{ courses.length }} {{ courses.length === 1 ? 'formação' : 'formações' }} em destaque.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="inline-flex w-fit items-center rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
|
|
<span class="text-sm font-semibold text-slate-700">
|
|
{{ courses.length }} {{ courses.length === 1 ? 'curso' : 'cursos' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mx-auto max-w-7xl px-6 pb-16 lg:px-8">
|
|
<div class="grid gap-8 md:grid-cols-2 xl:grid-cols-3">
|
|
<article
|
|
*ngFor="let course of courses"
|
|
class="group overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl"
|
|
>
|
|
<div class="relative h-56 overflow-hidden">
|
|
<img
|
|
[src]="course.image"
|
|
[alt]="course.title"
|
|
class="h-full w-full object-cover transition duration-500 group-hover:scale-105"
|
|
/>
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent"></div>
|
|
|
|
<div class="course-card__badge">
|
|
<img
|
|
*ngFor="let icon of course.categoryIcons"
|
|
[alt]="course.category"
|
|
class="course-card__badge-image"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<h3 class="mt-2 text-xl font-bold text-slate-900">
|
|
{{ course.title }}
|
|
</h3>
|
|
|
|
<p class="mt-3 text-sm leading-6 text-slate-600">
|
|
{{ course.description }}
|
|
</p>
|
|
|
|
<div class="mt-5 flex flex-wrap gap-2">
|
|
|
|
<span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">
|
|
{{ course.duration }}
|
|
</span>
|
|
</div>
|
|
|
|
<a
|
|
[routerLink]="['/cursos', course.slug]"
|
|
class="mt-6 block w-full rounded-2xl bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-3 text-center text-sm font-semibold text-white transition hover:opacity-95"
|
|
>
|
|
Entrar
|
|
</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</div>
|