feat(introduction): add intro page

src/app/app.routes.ts

@@ -31,6 +31,10 @@ export const AvailableGuard = () => {
 
 export const routes: Routes = [
     { path: '', loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent) },
+    {
+        path: 'introduction',
+        loadComponent: () => import('./pages/introduction/introduction.component').then(m => m.IntroductionComponent)
+    },
     {
         path: 'learning',
         loadComponent: () => import('./pages/learning/learning.component').then(m => m.LearningComponent)

src/app/pages/home/home.component.html

@@ -10,6 +10,9 @@
 </div>
 <div class="retro-footer">
     <div class="actions-container">
+        <button class="retro-button" routerLink="/introduction">
+            Introduction
+        </button>
         <button class="retro-button" routerLink="/learning">
             How to play ?
         </button>

src/app/pages/home/home.component.scss

@@ -4,22 +4,23 @@
     flex-direction: column;
     align-items: center;
     padding: 1rem;
+    overflow: auto;
 
     .retro-content {
         align-items: center;
         flex: 1 0 auto;
         justify-content: center;
 
         .logo {
-            margin: 3dvh 0;
+            margin: 2dvh 0;
             width: 170px;
             height: 170px;
         }
 
         .title {
             font-size: var(--text-title);
             color: var(--color-text);
-            margin-bottom: 5dvh;
+            margin-bottom: 3dvh;
         }
 
         .subtitle {

src/app/pages/introduction/introduction.component.html

@@ -0,0 +1,104 @@
+<app-toolbar>
+    <ng-container ngProjectAs="left-actions">
+        <app-button-icon icon="close" routerLink="/"></app-button-icon>
+    </ng-container>
+</app-toolbar>
+<div class="retro-content">
+    <div class="header">
+        <img class="avatar" src="assets/logos/mat.png" alt="image mat" />
+        <div class="retro-text tertiary">
+            Hey, I’m Mat, and welcome to RetroSki!
+        </div>
+    </div>
+    <div class="retro-text">
+        I've always been fascinated by games that are
+        <strong>easy to learn but hard to master</strong>.
+    </div>
+    <div class="retro-text">
+        That’s exactly what RetroSki is all about: a <strong>simple</strong> yet
+        <strong>skill-based retro 2D skiing game</strong> that lets you enjoy
+        the ride while constantly improving.
+    </div>
+    <div class="retro-text">
+        The slopes are <strong>randomly generated</strong>, designed to match
+        one of <strong>four alpine skiing disciplines</strong>, so every run is
+        different.
+    </div>
+    <div class="retro-text">
+        Whether you’re practicing your slalom turns or flying down the downhill
+        course, <strong>there’s always something new to explore</strong>.
+    </div>
+    <app-expander title="Where it all started ?">
+        <div class="retro-text">
+            Back in <strong>January 2024</strong>, I was looking for a game to
+            play with my girlfriend. Something simple, fun, and fair, where we
+            could both start on equal footing.
+        </div>
+        <div class="retro-text">
+            Turns out, that wasn’t so easy to find. So,
+            <strong>I decided to make one myself</strong>.
+        </div>
+        <div class="retro-text">
+            Maybe not my best idea... Developing the game gave me a bit of a
+            head start. <strong>But don’t be fooled</strong>, Emi has become a
+            fierce competitor. <strong>Watch out!</strong>
+        </div>
+    </app-expander>
+    <app-expander title="A game without ads">
+        <div class="retro-text">
+            From the start, I wanted <strong>RetroSki</strong> to be a game you
+            could enjoy <strong>without interruptions</strong>.
+            <strong>No pop-ups</strong>, <strong>no forced ads</strong>,
+            <strong>just pure gameplay</strong>.
+        </div>
+        <div class="retro-text">
+            At the same time, I also wanted the game to be
+            <strong>fully accessible for free</strong>, so anyone could pick it
+            up and have fun.
+        </div>
+        <div class="retro-text">
+            To keep things fair, RetroSki offers optional
+            <strong>premium memberships</strong>, which lets you create
+            <strong>your own private servers</strong> to race with friends.
+        </div>
+        <div class="retro-text">
+            But whether you're a free rider or a premium one,
+            <strong>the core experience stays the same</strong>: just you, the
+            slopes, and the thrill of the ride.
+        </div>
+    </app-expander>
+    <app-expander title="Built open, supported by you">
+        <div class="retro-text">
+            RetroSki is an <strong>open-source</strong> project.
+        </div>
+        <div class="retro-text">
+            The best way to support the game? <strong>Enjoy it!</strong> Have
+            fun, challenge yourself, and
+            <strong>share it with your friends</strong>.
+        </div>
+        <div class="retro-text">
+            If you’d like to go further, you can also support RetroSki by
+            <strong>subscribing to a Premium membership</strong> to host online
+            event, or making a small donation to help keep the project alive.
+        </div>
+        <div class="retro-text">
+            However you choose to ride,
+            <strong>I appreciate every rider</strong> who joins the slopes.
+            <strong>Thank you!</strong>
+        </div>
+    </app-expander>
+    <app-expander title="Your data, your privacy">
+        <div class="retro-text">
+            RetroSki collects only the <strong>bare minimum</strong> needed to
+            run the game smoothly.
+        </div>
+        <div class="retro-text">
+            <strong>No tracking</strong>, <strong>no selling of data</strong>,
+            <strong>no ads following you around</strong>. Your information stays
+            <strong>private</strong> and is never used for commercial purposes.
+        </div>
+        <div class="retro-text">
+            Play, compete, and have fun—without worrying about your data.
+        </div>
+    </app-expander>
+</div>

src/app/pages/introduction/introduction.component.scss

@@ -0,0 +1,36 @@
+:host {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    padding: 1rem;
+
+    .retro-content {
+        .header {
+            margin-top: 1rem;
+            margin-bottom: 1rem;
+            width: calc(100% - 2rem);
+            display: flex;
+            gap: 2rem;
+            justify-content: center;
+            align-items: center;
+            padding: 1rem;
+            background-color: var(--color-tertiary-lightest);
+            border-radius: var(--border-radius-large);
+            line-height: 1.5rem;
+
+            .avatar {
+                border-radius: 100px;
+                width: 75px;
+            }
+        }
+
+        > .retro-text {
+            line-height: 1.3rem;
+            text-align: justify;
+
+            > strong {
+                color: var(--color-tertiary-darkest);
+            }
+        }
+    }
+}

src/app/pages/introduction/introduction.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ToolbarComponent } from '../../common/components/toolbar/toolbar.component';
+import { RouterLink } from '@angular/router';
+import { ButtonIconComponent } from '../../common/components/button-icon/button-icon.component';
+import { ExpanderComponent } from '../../common/components/expander/expander.component';
+
+@Component({
+    selector: 'app-introduction',
+    imports: [ButtonIconComponent, ExpanderComponent, RouterLink, ToolbarComponent, ExpanderComponent],
+    templateUrl: './introduction.component.html',
+    styleUrl: './introduction.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IntroductionComponent {}

src/app/pages/learning/learning.component.html

@@ -24,11 +24,6 @@
 </div>
 
 <ng-template #page_1>
-    <div class="retro-title">Introduction</div>
-    <div class="retro-text">
-        Retroski is a small game development project designed for peaceful
-        mountain rides and friendly competition.
-    </div>
     <div class="retro-title">Game modes</div>
     <div class="retro-subtitle">Ride local</div>
     <div class="retro-text">

src/app/pages/settings/settings.component.scss

@@ -4,6 +4,10 @@
     flex-direction: column;
     padding: 1rem;
 
+    .retro-text {
+        margin-bottom: 1rem;
+    }
+
     .setting-item {
         display: flex;
         height: 40px;