Create Interactive Lesson Guide Component For Teachers Pages

[Rutjake]

✨ Feature Description

The goal of this issue is to implement an interactive, step-by-step lesson guide ("Pelitaiteen oppitunnin kulku") specifically for the Teachers' page (/teachers).

The component follows a linear progression where the user moves through instructions sequentially using navigation arrows.

---

🌟 Benefits of the Feature

• Teacher-Focused UI: Provides educators with a clear, visual tool to explain the lesson flow to students.
• Controlled Progression: Ensures the "storyline" of the lesson is followed in the correct order (Video -> Install -> Login -> Complete).
• High-Quality UX: Smooth CSS-based character animations create a polished, game-like feel.

---

🛠️ Proposed Implementation

📍 Placement & Routing

• Target Page: Add this component to the /teachers route.
• Header Update: Ensure the title matches the design: "Oppitunti".

🕹️ Logic & Navigation

• State Management: Use React useState to track the current active step (1–4).
• Navigation Rules:
  • Progression is controlled only via the Left/Right navigation arrows.
  • Numbered step indicators (1-2-3-4) are visual only and not clickable.
  • Disable the "Back" arrow on Step 1 and the "Next" arrow on Step 4.

🎨 Styling & Assets

• Background: Use the custom texture asset (provided in Figma) as the component's main container background.
• Avatar Animation:
  • The character asset must sit above the currently active step.
  • Use position: absolute and a CSS transition: left 0.4s ease-in-out for the movement.
• YouTube Integration: Step 1 includes a YouTube iframe.
  • Wrap in a responsive container (e.g., aspect-ratio: 16 / 9).
  • Append ?rel=0 to the URL to prevent showing unrelated external videos.

📦 Content Per Step

1. Step 1: YouTube Video Embed (Intro to lesson).
2. Step 2: Visual instructions for downloading the game.
3. Step 3: Instructions for entering the Clan password provided by the teacher.
4. Step 4: Completion state. Note: Since the results page is not yet live, this step should only show a disabled next arrow without an active link.

---

📎 Additional Information

• Assets Needed:
  • Background texture image.
  • Avatar character sprite.
  • Navigation icons (Arrows/Chevrons).

🔗 Figma Designs

📷 Preview: