Fase 1: design system — cores, tipografia e componentes base

Design tokens (CSS custom properties) com a paleta de
.claude/docs/identidade-visual.md, suporte a tema claro/escuro via
prefers-color-scheme, e IBM Plex Sans/Mono self-hosted (@fontsource,
subset latin) para não depender de CDN externo.

Componentes de UI reutilizáveis: Button (primary/secondary/ghost) e
Card, usados no Header/Footer (agora com as logos reais) e na Home
(hero + card do episódio 1). Demais páginas ganham container/eyebrow
consistentes, conteúdo completo continua reservado para a Fase 2.

Corrige um bug de projeção de conteúdo do Angular (múltiplos
<ng-content> em branches @if/@else ficavam vazios) usando
ng-template + ngTemplateOutlet, e um token mal escopado que fazia o
rodapé virar ciano no modo escuro — separado em --brand-band-bg/ink,
fixo nos dois temas, independente do --color-accent-* que adapta.

Author: samuelsonbrito

package-lock.json

@@ -20,6 +20,8 @@
     "@angular/platform-server": "^22.1.0",
     "@angular/router": "^22.1.0",
     "@angular/ssr": "^22.1.4",
+    "@fontsource/ibm-plex-mono": "^5.3.0",
+    "@fontsource/ibm-plex-sans": "^5.3.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },

package.json

@@ -0,0 +1,9 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+main {
+  flex: 1;
+}

public/brand/logo-horizontal-azul.png

@@ -21,6 +21,6 @@ describe('App', () => {
     const fixture = TestBed.createComponent(App);
     await fixture.whenStable();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.brand')?.textContent).toContain('Descompila');
+    expect(compiled.querySelector('.brand img')?.getAttribute('alt')).toBe('Descompila');
   });
 });

public/brand/logo-horizontal-branca.png

@@ -1,4 +1,5 @@
-<section>
+<section class="container">
+  <span class="eyebrow">Em breve</span>
   <h1>Cursos</h1>
-  <p>Em breve. Captura de e-mail de interesse entra na Fase 2.</p>
+  <p>Captura de e-mail de interesse entra na Fase 2.</p>
 </section>

public/brand/simbolo-azul.png

@@ -1,4 +1,5 @@
-<section>
+<section class="container">
+  <span class="eyebrow">Todos os episódios</span>
   <h1>Episódios</h1>
   <p>Grade de episódios (embed do YouTube, data, convidado) entra na Fase 2.</p>
 </section>

src/app/app.scss

@@ -1,4 +1,22 @@
-<section>
-  <h1>Descompila</h1>
-  <p>Educação de forma simplificada para todos. Conteúdo da Home entra na Fase 2.</p>
+<section class="hero container">
+  <span class="eyebrow">Podcast · Educação tech</span>
+  <h1>Educação de tecnologia, simplificada para todos.</h1>
+  <p class="lede">
+    O Descompila volta em formato de podcast: conversas diretas sobre tecnologia, carreira e o
+    impacto da IA no dia a dia — sem jargão desnecessário.
+  </p>
+  <div class="actions">
+    <app-button variant="primary" [routerLink]="'/episodios'">Ver episódios</app-button>
+    <app-button variant="secondary" [href]="canalUrl">Canal no YouTube</app-button>
+  </div>
+</section>
+
+<section class="container">
+  <h2>Episódio mais recente</h2>
+  <app-card class="episode">
+    <span class="eyebrow">Episódio 01</span>
+    <h3>O Desafio dos Professores na Era da Inteligência Artificial</h3>
+    <p>Com Jean Lobo.</p>
+    <app-button variant="ghost" [href]="episodio1Url">Assistir no YouTube →</app-button>
+  </app-card>
 </section>