More structure to the registration page.

src/constants/localization/en.ts

@@ -1,7 +1,9 @@
 import { common } from "./common/en";
+import { registration } from './registration/en';
 
 const en: Record<string, string> = {
-    ...common
+    ...common,
+    ...registration
 }
 
 export default en;

src/constants/localization/fi.ts

@@ -1,7 +1,9 @@
 import { common } from "./common/fi";
+import { registration } from './registration/en';
 
 const fi: Record<string, string> = {
-    ...common
+    ...common,
+    ...registration
 }
 
 export default fi;

src/constants/localization/registration/en.ts

@@ -0,0 +1,4 @@
+export const registration: Record<string, string> = {
+    "registration.welcome": "Welcome to our wedding on plaa plaa August 2022",
+    "registration.questions": "If you have any question about:\nmushrooms\ndangerous animals"
+}

src/constants/localization/registration/fi.ts

@@ -0,0 +1,4 @@
+export const registration: Record<string, string> = {
+    "registration.welcome": "Welcome to our wedding on plaa plaa August 2022",
+    "registration.questions": "If you have any question about:\nmushrooms\ndangerous animals"
+}

src/pages/Registration.scss

@@ -1,4 +1,26 @@
+.Registration {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  white-space: pre-line;
+
+  .Registration-main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 50%;
+
+    img {
+      max-width: 60%;
+    }
+
+    p {
+      text-align: center;
+    }
+  }
+
   .Registration-form {
     display: flex;
     justify-content: center;
   }
+}

src/pages/Registration.tsx

@@ -1,13 +1,21 @@
 import "./Registration.scss";
+import { FormattedMessage } from 'react-intl';
+import mainPicture from "../img/lintujamaslo.jpg"
 
 import { RegForm } from '../components/RegForm'
 
 export const Registration = () => {
     return (
-        <>
+        <main className="Registration">
+            <div className="Registration-main">
+                <img src={mainPicture} />
+                <p><FormattedMessage id="registration.welcome" /></p>
+                <p><FormattedMessage id="registration.questions" /></p>
+
+            </div>
             <div className="Registration-form">
                 <RegForm />
             </div>
-        </>
+        </main>
     )
 }