Info page content.

src/components/Info.scss

@@ -1,6 +1,15 @@
 @import '../colors.scss';
 
 .Info {
+  display: flex;
+  justify-content: center;
+  font-weight: bold;
+
+  .Info-container {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 3rem;
+
     h1 {
       font-size: 4rem;
     }
@@ -8,7 +17,36 @@
     h2 {
       font-size: 2rem;
       color: $green-text;
+      font-family: 'Montserrat-Medium';
       margin-left: 3rem;
       margin-right: 3rem;
+      margin-top: 3rem;
+    }
+
+    h3 {
+      font-size: 1.7rem;
+      color: $brown-text;
+      text-decoration: underline;
+      margin-top: 2rem;
+    }
+
+    p {
+      font-size: 1.2rem;
+      margin-top: 1rem;
+    }
+
+    img {
+      width: 20rem;
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .Info {
+    .Info-container {
+      img {
+        width: 18rem;
+      }
+    }
   }
 }

src/components/Info.tsx

@@ -1,15 +1,81 @@
 import { FormattedMessage } from 'react-intl';
 import './Info.scss';
+import kauppa from '../img/kauppa.jpg';
+import livonsaariCaravan from '../img/livonsaariCaravan.jpg';
+import seurantalo from '../img/seurantalo.jpg';
+import vanhaSalakuljettaja from '../img/vanhaSalakuljettaja.jpg';
+import vaihela from '../img/vaihela.jpg';
 
 export const Info = () => {
   return (
     <section className='Info'>
+      <div className='Info-container'>
         <h1>
           <FormattedMessage id='main.info' />
         </h1>
+
+        <p>
+          <FormattedMessage id='main.info.seurantalo' />
+        </p>
+        <div className='Info-imageContainer'>
+          <img src={seurantalo} />
+        </div>
+
         <h2>
-        <FormattedMessage id='main.toBeDecided' />
+          <FormattedMessage id='main.info.accomodation' />
         </h2>
+
+        <a href='https://oldsmuggler.fi/palvelut/mokit/'>
+          <h3>
+            <FormattedMessage id='main.info.vanhaSalakuljettaja' />
+          </h3>
+          <div className='Info-imageContainer'>
+            <img src={vanhaSalakuljettaja} />
+          </div>
+        </a>
+        <p>
+          <FormattedMessage id='main.info.vanhaSalakuljettaja.desc' />
+        </p>
+
+        <a href='https://vaihela.fi/'>
+          <h3>
+            <FormattedMessage id='main.info.vaihela' />
+          </h3>
+          <div className='Info-imageContainer'>
+            <img src={vaihela} />
+          </div>
+        </a>
+        <p>
+          <FormattedMessage id='main.info.vaihela.desc' />
+        </p>
+
+        <a href='https://www.livonsaarencaravan.fi/mokit'>
+          <h3>
+            <FormattedMessage id='main.info.livonsaariCaravan' />
+          </h3>
+          <div className='Info-imageContainer'>
+            <img src={livonsaariCaravan} />
+          </div>
+        </a>
+        <p>
+          <FormattedMessage id='main.info.livonsaariCaravan.desc' />
+        </p>
+
+        <h2>
+          <FormattedMessage id='main.info.services' />
+        </h2>
+        <a href='https://livonsaarenosuuskauppa.fi/'>
+          <h3>
+            <FormattedMessage id='main.info.livonsaarenOsuuskauppa' />
+          </h3>
+          <div className='Info-imageContainer'>
+            <img src={kauppa} />
+          </div>
+        </a>
+        <p>
+          <FormattedMessage id='main.info.livonsaarenOsuuskauppa.desc' />
+        </p>
+      </div>
     </section>
   );
 };

src/constants/localization/main/en.ts

@@ -4,5 +4,23 @@ export const main: Record<string, string> = {
     "main.info": "Info",
     "main.saveTheLink": "Save the link",
     "main.welcome": "Tervetuloa! Welcome! Vitajte!",
-    "main.toBeDecided": "To be specified"
+    "main.toBeDecided": "To be specified",
+
+    "main.info.seurantalo": "Wedding is located in Naantali on Livonsaari: Velkuantie 987, 21180 Livonsaari",
+
+    "main.info.accomodation": "Accomodation",
+    
+    "main.info.vanhaSalakuljettaja": "Old Smuggler",
+    "main.info.vanhaSalakuljettaja.desc": "Old Smugglerr offers cabin to rent approximately 7km from the wedding place.",
+    
+    "main.info.vaihela": "Archipelago hotel Vaihela",
+    "main.info.vaihela.desc": "On excellent location. Expensive but idyllic. Behind two ferries.",
+    
+    "main.info.livonsaariCaravan": "Livonsaari Caravan",
+    "main.info.livonsaariCaravan.desc": "Nearest to the wedding place (approx 4km). Simple and functional",
+    
+    "main.info.livonsaarenOsuuskauppa": "Livonaaren Osuuskauppa",
+    "main.info.livonsaarenOsuuskauppa.desc": "Best village shop ever! Right on the other side of the road from the wedding place. Here you can find grosery, restaurant and a bar.",
+
+    "main.info.services": "Other services",
 }

src/constants/localization/main/fi.ts

@@ -4,5 +4,23 @@ export const main: Record<string, string> = {
     "main.info": "Info",
     "main.saveTheLink": "Laita linkki talteen",
     "main.welcome": "Tervetuloa! Welcome! Vitajte!",
-    "main.toBeDecided": "Selviää myöhemmin"
+    "main.toBeDecided": "Selviää myöhemmin",
+
+    "main.info.seurantalo": "Juhlapaikka sijaitsee Naantalissa Livonsaarella osoitteessa: Velkuantie 987, 21180 Livonsaari",
+
+    "main.info.accomodation": "Majoitus",
+    
+    "main.info.vanhaSalakuljettaja": "Vanha Salakuljettaja",
+    "main.info.vanhaSalakuljettaja.desc": "Vanha Salakuljettaja tarjoaa aittamajoitusta vilkaan vierasvenesataman vieressä noin 7km juhlapaikalta.",
+    
+    "main.info.vaihela": "Saaristohotelli Vaihela",
+    "main.info.vaihela.desc": "Majoitus todella hienolla paikalla. Hintava, mutta idyllinen. Sijaitsee kahden lossin takana.",
+    
+    "main.info.livonsaariCaravan": "Livonsaari Caravan",
+    "main.info.livonsaariCaravan.desc": "Lähimpänä juhlapaikkaa (noin 4km). Konstailematon ja käytännöllinen.",
+    
+    "main.info.livonsaarenOsuuskauppa": "Livonaaren Osuuskauppa",
+    "main.info.livonsaarenOsuuskauppa.desc": "Paras kyläkauppa koskaan! Heti tien toisella puolella juhlapaikasta katsottuna. Täältä löytyy peruselintarvikkeita, ravintola ja baari.",
+
+    "main.info.services": "Muita palveluita",
 }

src/pages/Main.scss

@@ -15,6 +15,7 @@
     border-radius: 300px;
     padding-right: 10rem;
     padding-left: 10rem;
+    max-width: 50%;
 
     .logo-container {
       margin-top: 3rem;
@@ -66,6 +67,7 @@
       padding-right: 2rem;
       padding-left: 2rem;
       width: 90%;
+      max-width: unset;
 
       .Main-title {
         line-height: 2rem;