about page

src/components/Footer/Footer.css

@@ -21,7 +21,7 @@
   width: 100%;
 
   @media (--viewportMedium) {
-    max-width: 1120px;
+    max-width: 1056px;
     margin: 0 auto;
   }
 }
@@ -59,7 +59,7 @@
 
 /* Desktop: logo and organization stuff */
 .organization {
-  flex-basis: 216px;
+  flex-basis: 220px;
   display: none;
   margin-right: 24px;
 
@@ -108,7 +108,7 @@
 /* Desktop and Mobile: links to more information */
 .infoLinks {
   order: 2;
-  flex-basis: 172px;
+  flex-basis: 165px;
 
   @media (--viewportMedium) {
     padding-top: 2px;
@@ -151,7 +151,7 @@
 /* Desktop and Mobile: searches - first column */
 .searches {
   order: 3;
-  flex-basis: 172px;
+  flex-basis: 165px;
   @media (--viewportMedium) {
     padding-top: 2px;
   }
@@ -162,7 +162,7 @@
 .searchesExtra {
   order: 4;
   display: none;
-  flex-basis: 172px;
+  flex-basis: 165px;
 
   @media (min-width: 550px) {
     display: block;
@@ -182,7 +182,7 @@
 .extraLinks {
   order: 5;
   display: none;
-  flex-basis: 172px;
+  flex-basis: 109px;
 
   @media (--viewportMedium) {
     display: flex;

src/components/LayoutSingleColumn/LayoutSingleColumn.css

@@ -13,5 +13,7 @@
   /* Expand to the full remaining width of the viewport */
   display: flex;
   flex-direction: column;
-  width: 100%;
+  width: calc(100% - 72px);
+  max-width: 1056px;
+  margin: 88px auto;
 }

src/containers/AboutPage/AboutPage.css

@@ -0,0 +1,32 @@
+@import '../../marketplace.css';
+
+.root {
+}
+
+.pageTitle {
+  text-align: center;
+
+}
+
+.coverImage {
+  width: 100%;
+  height: 528px;
+  border-radius: 4px;
+  object-fit: cover;
+  margin: 32px 0 40px;
+}
+
+.contentWrapper {
+  display: flex;
+}
+
+.contentSide {
+  width: 193px;
+  margin-right: 103px;
+  margin-top: 8px;
+}
+
+.contentMain {
+  max-width: 650px;
+  width: 90%;
+}

src/containers/AboutPage/AboutPage.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { StaticPage, TopbarContainer } from '../../containers';
+import {
+  LayoutSingleColumn,
+  LayoutWrapperTopbar,
+  LayoutWrapperMain,
+  LayoutWrapperFooter,
+  Footer,
+  ExternalLink
+} from '../../components';
+
+import css from './AboutPage.css';
+import image from './about-us.jpg';
+
+const AboutPage = () => {
+  return (
+    <StaticPage
+      className={css.root}
+      title="About Us"
+      schema={`
+        {
+          "@context": "http://schema.org",
+          "@type": "AboutPage",
+          "description": "Description of this page",
+          "name": "About page",
+        }
+      `}
+    >
+      <LayoutSingleColumn>
+
+        <LayoutWrapperTopbar>
+          <TopbarContainer />
+        </LayoutWrapperTopbar>
+
+        <LayoutWrapperMain>
+          <h1 className={css.pageTitle}>It&#8217;s about Saunatime.</h1>
+          <img className={css.coverImage} src={image} alt="My first ice cream." />
+
+          <div className={css.contentWrapper}>
+
+            <div className={css.contentSide}>
+              <p>"We built Saunatime because we didn't have a sauna in our apartment building."</p>
+            </div>
+
+            <div className={css.contentMain}>
+              <h2>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</h2>
+
+              <h3>Tortor mauris condimentum</h3>
+
+              <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+              <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+
+              <h3>Get in touch</h3>
+              <p>We are happy to help you in anything you have in your mind.?Best way to reach us is by emailing us at <ExternalLink href="mailto:hello@saunatime.io?Subject=Hello%20friends">hello@saunatime.io</ExternalLink>.</p>
+              <p>You can also checkout our <ExternalLink href="https://www.facebook.com/Sharetribe/">Facebook</ExternalLink> and <ExternalLink href="https://twitter.com/sharetribe">Twitter</ExternalLink>.</p>
+            </div>
+          </div>
+
+        </LayoutWrapperMain>
+
+        <LayoutWrapperFooter>
+          <Footer />
+        </LayoutWrapperFooter>
+
+      </LayoutSingleColumn>
+    </StaticPage>
+  );
+}
+
+export default AboutPage;

src/containers/index.js

@@ -1,3 +1,4 @@
+export { default as AboutPage } from './AboutPage/AboutPage';
 export { default as AuthenticationPage } from './AuthenticationPage/AuthenticationPage';
 export { default as BookingDatesForm } from './BookingDatesForm/BookingDatesForm';
 export { default as CheckoutPage } from './CheckoutPage/CheckoutPage';

src/routeConfiguration.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  AboutPage,
   AuthenticationPage,
   CheckoutPage,
   ContactDetailsPage,
@@ -39,7 +40,16 @@ const RedirectToLandingPage = () => <NamedRedirect name="LandingPage" />;
 // See behaviour from Routes.js where Route is created.
 const routeConfiguration = () => {
   return [
-    { path: '/', name: 'LandingPage', component: props => <LandingPage {...props} /> },
+    {
+      path: '/',
+      name: 'LandingPage',
+      component: props => <LandingPage {...props} />
+    },
+    {
+      path: '/about',
+      name: 'AboutPage',
+      component: AboutPage,
+    },
     {
       path: '/s',
       name: 'SearchPage',