import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; interface Course { category: string; title: string; description: string; level: string; duration: string; badge: string; image: string; } @Component({ selector: 'app-courses-page', standalone: true, imports: [CommonModule], template: `
Learning Hub

As nossas Componentes

Conehcimento das componentes de TargetOne, atraves de um conjunto de formações interativas e práticas, projetadas para potencializar o dominio das nossas soluções.

Formações Dispiniveis

Formações diponiveis de TargetOne disponiveis para fazer

{{ courses.length }} courses
{{ course.badge }}
{{ course.category }}

{{ course.title }}

{{ course.description }}

{{ course.level }} {{ course.duration }}
`, styles: [` :host { display: block; min-height: 100vh; background: radial-gradient(circle at top left, rgba(94, 96, 206, 0.20), transparent 28%), radial-gradient(circle at top right, rgba(76, 201, 240, 0.18), transparent 30%), linear-gradient(180deg, #0b1020 0%, #11182d 35%, #f5f7fb 35%, #f5f7fb 100%); color: #101828; font-family: Inter, Arial, sans-serif; } * { box-sizing: border-box; } .hero { padding: 72px 24px 56px; color: #ffffff; } .hero__content { max-width: 1200px; margin: 0 auto; } .eyebrow { display: inline-flex; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 18px; } .hero h1 { margin: 0 0 16px; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05; font-weight: 800; } .hero p { max-width: 700px; margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; line-height: 1.7; } .courses-page { max-width: 1200px; margin: 0 auto; padding: 0 24px 72px; } .courses-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; } .courses-header h2 { margin: 0 0 8px; font-size: 2rem; color: #111827; } .courses-header p { margin: 0; color: #667085; } .courses-summary { background: #ffffff; border: 1px solid #e4e7ec; border-radius: 16px; padding: 14px 18px; box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06); font-weight: 700; white-space: nowrap; } .courses-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .course-card { overflow: hidden; border-radius: 24px; background: #ffffff; border: 1px solid #eaecf0; box-shadow: 0 20px 45px rgba(16, 24, 40, 0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; } .course-card:hover { transform: translateY(-6px); box-shadow: 0 24px 55px rgba(16, 24, 40, 0.12); } .course-card__image { position: relative; min-height: 220px; background-size: cover; background-position: center; } .course-card__image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 24, 39, 0.10) 0%, rgba(17, 24, 39, 0.45) 100%); } .badge { position: absolute; top: 18px; left: 18px; z-index: 1; display: inline-flex; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #111827; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } .course-card__content { padding: 24px; } .category { display: inline-block; margin-bottom: 12px; color: #4f46e5; font-weight: 700; font-size: 0.88rem; } .course-card h3 { margin: 0 0 12px; font-size: 1.35rem; line-height: 1.3; color: #101828; } .course-card p { margin: 0 0 18px; color: #667085; line-height: 1.65; } .meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .meta span { padding: 8px 12px; border-radius: 999px; background: #f2f4f7; color: #344054; font-size: 0.88rem; font-weight: 600; } button { width: 100%; border: 0; border-radius: 14px; padding: 14px 16px; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #ffffff; font-size: 0.98rem; font-weight: 700; cursor: pointer; } button:hover { filter: brightness(1.05); } @media (max-width: 1024px) { .courses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .hero { padding-top: 56px; } .courses-header { flex-direction: column; align-items: flex-start; } .courses-grid { grid-template-columns: 1fr; } } `] }) export class CoursesPageComponent { courses: Course[] = [ { category: 'Automation Basics', title: 'Introduction to Intelligent Automation', description: 'Aprenda os fundamentos da automação, os principais conceitos e como identificar oportunidades de melhoria em processos.', level: 'Beginner', duration: '2h 30min', badge: 'Popular', image: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80' }, { category: 'Development', title: 'Build Your First Automation Project', description: 'Curso prático com abordagem hands-on para criar, testar e publicar o seu primeiro fluxo de automação passo a passo.', level: 'Intermediate', duration: '4h 10min', badge: 'Hands-on', image: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=1200&q=80' }, { category: 'AI + Processes', title: 'AI Tools for Modern Operations', description: 'Descubra como combinar automação e ferramentas de IA para acelerar tarefas repetitivas e melhorar a eficiência operacional.', level: 'Advanced', duration: '3h 45min', badge: 'New', image: 'https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=1200&q=80' } ]; }