Registration description.

src/constants/localization/fi.ts

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

src/constants/localization/registration/en.ts

@@ -1,4 +1,7 @@
 export const registration: Record<string, string> = {
-    "registration.welcome": "Welcome to our wedding on plaa plaa August 2022",
+    "registration.welcome": "Welcome to our wedding table",
-    "registration.questions": "If you have any question about:\nmushrooms\ndangerous animals"
+    "registration.questions": "If you have any question about:\nmushrooms\ndangerous animals",
+    "registration.about": "We will be updating the program and menu in lintujamaslo.net",
+    "registration.saveTheLink": "Save the link",
+    "registration.fillInBefore": "Please fill the visitors in before 27th of June",
 }

src/constants/localization/registration/fi.ts

@@ -1,4 +1,7 @@
 export const registration: Record<string, string> = {
-    "registration.welcome": "Welcome to our wedding on plaa plaa August 2022",
+    "registration.welcome": "Tervetuloa häihimme",
-    "registration.questions": "If you have any question about:\nmushrooms\ndangerous animals"
+    "registration.questions": "Jos sinulla on mitään kysymyksiä\nsienistä\nvaarallisista pedoista",
+    "registration.about": "Päivitämme menua ja ohjelmaa osoitteeseen lintujamaslo.net",
+    "registration.saveTheLink": "Laita linkki talteen",
+    "registration.fillInBefore": "Lisääthän teiltä osallistuvat henkilöt viimeistään 27th of June",
 }

src/pages/Registration.scss

@@ -1,8 +1,11 @@
+@import '../colors.scss';
+
 .Registration {
   display: flex;
   align-items: center;
   flex-direction: column;
   white-space: pre-line;
+  text-transform: uppercase;
 
   .Registration-main {
     display: flex;
@@ -14,8 +17,19 @@
       max-width: 60%;
     }
 
-    p {
+    h2 {
+      color: $brown-text !important;
+      font-family: 'Montserrat-Light';
+      margin-top: -1rem;
+    }
+  }
+
+  .Registration-desc {
+    max-width: 1rem;
+    margin-top: 3rem;
+    h2 {
       text-align: center;
+      color: $brown-text !important;
     }
   }
 

src/pages/Registration.tsx

@@ -1,6 +1,5 @@
 import "./Registration.scss";
 import { FormattedMessage } from 'react-intl';
-import mainPicture from "../img/lintujamaslo.jpg"
 
 import { RegForm } from '../components/RegForm'
 
@@ -8,9 +7,22 @@ export const Registration = () => {
     return (
         <main className="Registration">
             <div className="Registration-main">
-                <img src={mainPicture} />
+                <h1><FormattedMessage id="registration.welcome" /><br /><FormattedMessage id="common.datetime" /></h1>
-                <p><FormattedMessage id="registration.welcome" /></p>
+                <h2><FormattedMessage id="common.place" /></h2>
-                <p><FormattedMessage id="registration.questions" /></p>
+            </div>
+            <div className="Registration-desc">
+                <h2>
+                    <FormattedMessage id="registration.questions" />
+                </h2>
+                <h2>
+                    <FormattedMessage id="registration.about" />
+                </h2>
+                <h2>
+                    <FormattedMessage id="registration.saveTheLink" />
+                </h2>
+                <h2>
+                    <FormattedMessage id="registration.fillInBefore" />
+                </h2>
             </div>
             <div className="Registration-form">
                 <RegForm />