diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 4707b8b..ec9b5b9 100644
--- a/src/app/app.routes.ts
+++ b/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)
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 87754d4..dbdb01b 100644
--- a/src/app/pages/home/home.component.html
+++ b/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>
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss
index 3e62561..00f565b 100644
--- a/src/app/pages/home/home.component.scss
+++ b/src/app/pages/home/home.component.scss
@@ -4,6 +4,7 @@
flex-direction: column;
align-items: center;
padding: 1rem;
+ overflow: auto;
.retro-content {
align-items: center;
@@ -11,7 +12,7 @@
justify-content: center;
.logo {
- margin: 3dvh 0;
+ margin: 2dvh 0;
width: 170px;
height: 170px;
}
@@ -19,7 +20,7 @@
.title {
font-size: var(--text-title);
color: var(--color-text);
- margin-bottom: 5dvh;
+ margin-bottom: 3dvh;
}
.subtitle {
diff --git a/src/app/pages/introduction/introduction.component.html b/src/app/pages/introduction/introduction.component.html
new file mode 100644
index 0000000..21d0704
--- /dev/null
+++ b/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>
diff --git a/src/app/pages/introduction/introduction.component.scss b/src/app/pages/introduction/introduction.component.scss
new file mode 100644
index 0000000..7c642d4
--- /dev/null
+++ b/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);
+ }
+ }
+ }
+}
diff --git a/src/app/pages/introduction/introduction.component.ts b/src/app/pages/introduction/introduction.component.ts
new file mode 100644
index 0000000..f694eb7
--- /dev/null
+++ b/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 {}
diff --git a/src/app/pages/learning/learning.component.html b/src/app/pages/learning/learning.component.html
index 9acf9bf..c8fd4c4 100644
--- a/src/app/pages/learning/learning.component.html
+++ b/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">
diff --git a/src/app/pages/settings/settings.component.scss b/src/app/pages/settings/settings.component.scss
index 0ef0c36..f415b06 100644
--- a/src/app/pages/settings/settings.component.scss
+++ b/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;
diff --git a/src/assets/logos/mat.png b/src/assets/logos/mat.png
new file mode 100644
index 0000000..73c6045
Binary files /dev/null and b/src/assets/logos/mat.png differ