Merge pull request #522 from sharetribe/aboutPage

About page

docs/static-pages.md

@@ -50,14 +50,12 @@ const AboutPage = () => {
     <StaticPage
       className={css.root}
       title="About"
-      schema={`
-        {
-          "@context": "http://schema.org",
-          "@type": "AboutPage",
-          "description": "Description of this page",
-          "name": "About page",
-        }
-      `}
+      schema={{
+        "@context": "http://schema.org",
+        "@type": "AboutPage",
+        "description": "Description of this page",
+        "name": "About page",
+      }}
     >
       <LayoutSingleColumn>
         <LayoutWrapperTopbar>
@@ -136,14 +134,12 @@ In the template above we are using StaticPage component with some attributes:
     <StaticPage
       className={css.root}
       title="About"
-      schema={`
-        {
-          "@context": "http://schema.org",
-          "@type": "AboutPage",
-          "description": "Description of this page",
-          "name": "About page",
-        }
-      `}
+      schema={{
+        "@context": "http://schema.org",
+        "@type": "AboutPage",
+        "description": "Description of this page",
+        "name": "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/Footer/Footer.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { string } from 'prop-types';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
+import { twitterPageURL } from '../../util/urlHelpers';
 import config from '../../config';
 import {
   IconSocialMediaFacebook,
@@ -14,15 +15,6 @@ import {
 
 import css from './Footer.css';
 
-const twitterPageURL = siteTwitterHandle => {
-  if (siteTwitterHandle && siteTwitterHandle.charAt(0) === '@') {
-    return `https://twitter.com/${siteTwitterHandle.substring(1)}`;
-  } else if (siteTwitterHandle) {
-    return `https://twitter.com/${siteTwitterHandle}`;
-  }
-  return null;
-};
-
 const renderSocialMediaLinks = intl => {
   const { siteFacebookPage, siteInstagramPage, siteTwitterHandle } = config;
   const siteTwitterPage = twitterPageURL(siteTwitterHandle);
@@ -94,7 +86,7 @@ const Footer = props => {
                 </NamedLink>
               </li>
               <li className={css.listItem}>
-                <NamedLink name="LandingPage" className={css.link}>
+                <NamedLink name="AboutPage" className={css.link}>
                   <FormattedMessage id="Footer.toAboutPage" />
                 </NamedLink>
               </li>
@@ -109,7 +101,7 @@ const Footer = props => {
                 </NamedLink>
               </li>
               <li className={css.listItem}>
-                <NamedLink name="LandingPage" className={css.link}>
+                <NamedLink name="AboutPage" to={{ hash: '#contact' }} className={css.link}>
                   <FormattedMessage id="Footer.toContactPage" />
                 </NamedLink>
               </li>

src/containers/AboutPage/AboutPage.css

@@ -0,0 +1,50 @@
+@import '../../marketplace.css';
+
+.pageTitle {
+  text-align: center;
+}
+
+.staticPageWrapper {
+  width: calc(100% - 48px);
+  max-width: 1056px;
+  margin: 72px auto;
+
+  @media (--viewportMedium) {
+    width: calc(100% - 72px);
+  }
+}
+
+.coverImage {
+  width: 100%;
+  height: 528px;
+  border-radius: 4px;
+  object-fit: cover;
+  margin: 32px 0 40px;
+}
+
+.contentWrapper {
+  display: flex;
+  flex-wrap: wrap;
+
+  @media (--viewportMedium) {
+    flex-wrap: nowrap;
+  }
+}
+
+.contentSide {
+  font-style: italic;
+
+  @media (--viewportMedium) {
+    width: 193px;
+    margin-right: 103px;
+    margin-top: 8px;
+  }
+}
+
+.contentMain {
+  width: 90%;
+
+  @media (--viewportMedium) {
+    max-width: 650px;
+  }
+}

src/containers/AboutPage/AboutPage.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import config from '../../config';
+import { twitterPageURL } from '../../util/urlHelpers';
+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 = () => {
+  const { siteTwitterHandle, siteFacebookPage } = config;
+  const siteTwitterPage = twitterPageURL(siteTwitterHandle);
+  return (
+    <StaticPage
+      title="About Us"
+      schema={{
+        '@context': 'http://schema.org',
+        '@type': 'AboutPage',
+        description: 'About Saunatime',
+        name: 'About page',
+      }}
+    >
+      <LayoutSingleColumn>
+        <LayoutWrapperTopbar>
+          <TopbarContainer />
+        </LayoutWrapperTopbar>
+
+        <LayoutWrapperMain className={css.staticPageWrapper}>
+          <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 id="contact">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={siteFacebookPage}>Facebook</ExternalLink> and{' '}
+                <ExternalLink href={siteTwitterPage}>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,
@@ -44,6 +45,11 @@ const routeConfiguration = () => {
       name: 'LandingPage',
       component: props => <LandingPage {...props} />,
     },
+    {
+      path: '/about',
+      name: 'AboutPage',
+      component: AboutPage,
+    },
     {
       path: '/s',
       name: 'SearchPage',

src/util/urlHelpers.js

@@ -167,3 +167,19 @@ export const parse = (search, options = {}) => {
     return result;
   }, {});
 };
+
+/**
+ * Create Twitter page url from twitterHandle
+ *
+ * @param {String} twitterHandle - handle is used for generating Twitter page URL
+ *
+ * @return {String} twitterPageURL
+ */
+export const twitterPageURL = twitterHandle => {
+  if (twitterHandle && twitterHandle.charAt(0) === '@') {
+    return `https://twitter.com/${twitterHandle.substring(1)}`;
+  } else if (twitterHandle) {
+    return `https://twitter.com/${twitterHandle}`;
+  }
+  return null;
+};