Añadir interfaz para las lecciones.

src/my-element.ts

@@ -1,18 +1,22 @@
 import { LitElement, css, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, query } from "lit/decorators.js";
 
 import {
   defineComponents,
   IgcNavbarComponent,
   IgcCardComponent,
+  IgcDialogComponent,
   IgcButtonComponent,
 } from "igniteui-webcomponents";
 
 import "igniteui-webcomponents/themes/light/bootstrap.css";
 
+import "pane/lesson.ts";
+
 import { registerServiceWorker } from "service-worker";
 
 import * as logging from "pkg/logging";
+import type { Lesson } from "pane/lesson.ts";
 
 @customElement("my-element")
 export class MyElement extends LitElement {
@@ -22,13 +26,19 @@ export class MyElement extends LitElement {
     }
 
     .container {
-      display: grid;
-      place-items: center;
-      margin-top: 20px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 20px;
+      padding: 20px;
     }
 
     igc-card {
-      max-width: 320px;
+      width: 480px;
+    }
+
+    igc-dialog::part(base) {
+      width: 80vw;
     }
   `;
 
@@ -37,7 +47,12 @@ export class MyElement extends LitElement {
 
     logging.setDefaultLogger(new logging.Logger("TSL", logging.Level.Debug));
 
-    defineComponents(IgcNavbarComponent, IgcCardComponent, IgcButtonComponent);
+    defineComponents(
+      IgcNavbarComponent,
+      IgcCardComponent,
+      IgcDialogComponent,
+      IgcButtonComponent,
+    );
 
     registerServiceWorker();
   }
@@ -48,36 +63,82 @@ export class MyElement extends LitElement {
         <h1>The Sign Link</h1>
       </igc-navbar>
 
+      <pane-lesson hidden></pane-lesson>
+
       <div class="container">
         <igc-card>
           <igc-card-header>
-            <h2 slot="title">¡Esta aplicación está en construcción!</h2>
-            <h3 slot="subtitle">
-              Un viaje a través de la Lengua de Señas Colombiana
-            </h3>
+            <h2 slot="title">Lección 1</h2>
+            <h3 slot="subtitle">Conceptos básicos de LSC</h3>
+          </igc-card-header>
+          <igc-card-content>
+            <p>Aprende los conceptos básicos de Lengua de Señas Colombiana.</p>
+          </igc-card-content>
+          <igc-card-actions>
+            <igc-button slot="start" @click=${this._startLesson}
+              >Comenzar</igc-button
+            >
+            <igc-button slot="end" @click=${this._handleLessonDescription}
+              >Previsualizar</igc-button
+            >
+          </igc-card-actions>
+        </igc-card>
+
+        <igc-card>
+          <igc-card-header>
+            <h2 slot="title">Lección 2</h2>
+            <h3 slot="subtitle">Alfabeto</h3>
+          </igc-card-header>
+          <igc-card-content>
+            <p>Aprende el alfabeto de la Lengua de Señas Colombiana.</p>
+          </igc-card-content>
+          <igc-card-actions>
+            <igc-button slot="start">Comenzar</igc-button>
+            <igc-button slot="end" @click=${this._handleLessonDescription}
+              >Previsualizar</igc-button
+            >
+          </igc-card-actions>
+        </igc-card>
+
+        <igc-card>
+          <igc-card-header>
+            <h2 slot="title">Lección 3</h2>
+            <h3 slot="subtitle">Gramática</h3>
           </igc-card-header>
           <igc-card-content>
-            <p>
-              Un proyecto que busca promover el aprendizaje y la valoración de
-              la Lengua de Señas Colombiana (LSC) en todo el país.
-            </p>
-            <p>
-              El objetivo es fortalecer la identidad cultural de la comunidad
-              sorda, fomentar el respeto y la comprensión hacia la diversidad
-              lingüística, y ampliar la oferta educativa inclusiva.
-            </p>
+            <p>Aprende la gramática de la Lengua de Señas Colombiana.</p>
           </igc-card-content>
           <igc-card-actions>
-            <igc-button
-              slot="start"
-              href="https://github.com/alizarazot/the-sign-link"
-              >Ver el código fuente</igc-button
+            <igc-button slot="start">Comenzar</igc-button>
+            <igc-button slot="end" @click=${this._handleLessonDescription}
+              >Previsualizar</igc-button
             >
           </igc-card-actions>
         </igc-card>
       </div>
+
+      <igc-dialog title="Descripción">
+        <p>Por hacer...</p>
+      </igc-dialog>
     `;
   }
+
+  @query("igc-dialog", true)
+  private _dialog!: IgcDialogComponent;
+
+  private _handleLessonDescription() {
+    this._dialog.show();
+  }
+
+  @query("pane-lesson", true)
+  private _paneLesson!: Lesson;
+  @query(".container", true)
+  private _container!: HTMLDivElement;
+
+  private _startLesson() {
+    this._container.style.display = "none";
+    this._paneLesson.style.display = "block";
+  }
 }
 
 declare global {

src/pane/lesson.ts

@@ -0,0 +1,15 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("pane-lesson")
+export class Lesson extends LitElement {
+  protected override render(): unknown {
+    return html` Contenido de la lección. `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "pane-lesson": Lesson;
+  }
+}