Info page content.

src/components/Info.scss

@@ -1,14 +1,52 @@
 @import '../colors.scss';
 
 .Info {
-  h1 {
-    font-size: 4rem;
-  }
+  display: flex;
+  justify-content: center;
+  font-weight: bold;
 
-  h2 {
-    font-size: 2rem;
-    color: $green-text;
-    margin-left: 3rem;
-    margin-right: 3rem;
+  .Info-container {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 3rem;
+
+    h1 {
+      font-size: 4rem;
+    }
+
+    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'>
-      <h1>
-        <FormattedMessage id='main.info' />
-      </h1>
-      <h2>
-        <FormattedMessage id='main.toBeDecided' />
-      </h2>
+      <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.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>
   );
 };