feat: enhance registration component with layout and navigation elements

frontend/src/app/page/onboarding/registration/registration.component.css

@@ -0,0 +1,47 @@
+.back-button-container {
+    margin-bottom: 2rem;
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    font-size: 1.5rem;
+}
+
+
+.content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    justify-items: center;
+    height: 85vh;
+    /*padding: 0 1.5rem;*/
+    row-gap: 2rem;
+}
+
+.form-container {
+    width: 100%;
+    max-width: 25rem;
+}
+
+.button-container {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: wrap;
+    column-gap: 1.3rem;
+    row-gap: 2rem;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    justify-items: center;
+    width: 100%;
+    max-width: 25rem;
+}
+
+atomic-text-button {
+    width: 100%;
+}
+
+.button-container > atomic-text-link {
+    font-size: 1.3rem;
+}

frontend/src/app/page/onboarding/registration/registration.component.html

@@ -1 +1,16 @@
-<p>registration works!</p>
+<div class="back-button-container">
+    <atomic-text-link id="back-button" [text]="'< Zurück'"
+                      [routerLink]="'/onboarding/notifications'"></atomic-text-link>
+</div>
+<div class="content">
+    <h1>Jetzt registrieren</h1>
+    <div class="form-container">
+        <p>Gib deine E-Mail Adresse ein.</p>
+        <atomic-email-field [(value)]="mail"></atomic-email-field>
+    </div>
+    <div class="button-container">
+        <atomic-text-button [text]="'Weiter'"
+                            [routerLink]="'/onboarding/verification'"></atomic-text-button>
+        <atomic-text-link [text]="'Stattdessen&nbsp;anmelden'" [routerLink]="'/onboarding/login'"></atomic-text-link>
+    </div>
+</div>

frontend/src/app/page/onboarding/registration/registration.component.ts

@@ -1,11 +1,20 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {EmailFieldComponent} from "../../../atomic/input/email-field/email-field.component";
+import {TextLinkComponent} from "../../../atomic/text-link/text-link.component";
+import {RouterLink} from "@angular/router";
+import {TextButtonComponent} from "../../../atomic/text-button/text-button.component";
 
 @Component({
     selector: 'app-registration',
-  imports: [],
+    imports: [
+        EmailFieldComponent,
+        TextLinkComponent,
+        RouterLink,
+        TextButtonComponent
+    ],
     templateUrl: './registration.component.html',
     styleUrl: './registration.component.css'
 })
 export class RegistrationComponent {
-
+    mail?: string;
 }