Merge pull request #39 from systemseed/landing

[#156816419] Added new landing page components.

README.md

@@ -31,7 +31,7 @@ You'll find more info about it at their [documentation](https://docs.platform.sh
 4. Add the following lines to your hosts file:
 
     ```
-    127.0.0.1 gifts.flc.local api.flc.local gifts.api.flc.local donations.api.flc.local # FALCON installation
+    127.0.0.1 main.flc.local gifts.flc.local api.flc.local gifts.api.flc.local donations.api.flc.local # FALCON installation
     ```
 5. Run `docker-compose up -d`. Profit!
 

docker-compose.yml

@@ -7,8 +7,6 @@ services:
 
   fe_main:
     image: node:8.9-alpine
-    depends_on:
-      - api_bus
     ports:
       - "3001:3000"
     working_dir: /app

frontend-main/components/atoms/ExternalLink/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+/**
+ * Simple link without Next.js routing.
+ */
+const ExternalLink = ({ title, url }) => (
+  <a className="external-link" href={url}>{title}</a>
+)
+
+export default ExternalLink;

frontend-main/components/molecules/PageTitleCopy/_style.scss

@@ -0,0 +1,43 @@
+.copy-with-title-and-subtitle {
+  .plain-text {
+    p:first-child {
+      margin-top: 0;
+    }
+    p:last-child {
+      margin-bottom: 0;
+    }
+    margin-bottom: 6px;
+  }
+
+  a {
+    color: $dark-sky-blue;
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    // TODO: Standardise line heights accross components.
+    .subheading, p {
+      line-height: 1.5;
+    }
+  }
+
+  h3 {
+    @include font-size(20px);
+    font-weight: bold;
+    color: $primary;
+    line-height: 1.2em;
+    margin: 1.4em 0 0.7em;
+    @include media-breakpoint-up(md) {
+      @include font-size(22px);
+      margin-bottom: 1.4em;
+    }
+    @include media-breakpoint-up(xl) {
+      @include font-size(24px);
+      line-height: 1.25;
+    }
+  }
+}

frontend-main/components/molecules/PageTitleCopy/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Heading1 from '../../atoms/Heading1';
+import SubHeading from '../../atoms/SubHeading';
+import PlainText from '../../atoms/PlainText';
+
+const PageTitleCopy = ({ heading, subheading, copy }) => {
+  return (
+    <div className="copy-with-title-and-subtitle">
+      <Heading1>{heading}</Heading1>
+      <SubHeading>{subheading}</SubHeading>
+      <PlainText>{copy}</PlainText>
+    </div>
+  );
+};
+
+PageTitleCopy.propTypes = {
+  heading: PropTypes.string,
+  subheading: PropTypes.string,
+  copy: PropTypes.string,
+};
+
+export default PageTitleCopy;

frontend-main/components/organisms/FooterLinksPane/_style.scss

@@ -0,0 +1,21 @@
+.footer-links-pane__link_block {
+  a {
+    font-weight: bold;
+    color: $warm-grey;
+    line-height: 2;
+
+    &:hover {
+      color: $primary;
+      text-decoration: none;
+    }
+  }
+
+  // Allow link items to use more space if needed.
+  @include media-breakpoint-up(lg) {
+    flex: 0.5 1 auto;
+    flex-wrap: nowrap;
+    width: auto;
+    padding: 0 5px;
+    text-align: center;
+  }
+}

frontend-main/components/organisms/FooterLinksPane/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FooterData from '../../molecules/FooterData';
+import ExternalLink from '../../atoms/ExternalLink';
+
+const FooterLinksPane = ({ styles, links }) => {
+  if (!links || !links.length) {
+    return null;
+  }
+  return (
+    <div className={"row justify-content-center limited-width footer-links-pane " + styles}>
+      <div className="col-12 col-md-8 col-lg-11 col-xl-10">
+        <div className="row">
+          {links.map((item, i) => (
+            <div className="col-lg pl-0 footer-links-pane__link_block" key={`${item.url}${i}`}>
+              <ExternalLink key={`${item.url}${i}`} {...item} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+FooterLinksPane.propTypes = {
+  links: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    url: PropTypes.string,
+  })),
+};
+
+FooterLinksPane.defaultProps = {
+  styles: 'bg-grey',
+};
+
+export default FooterLinksPane;

frontend-main/components/organisms/HeroImagePane/_style.scss

@@ -0,0 +1,19 @@
+.hero-image-pane {
+  .background-image {
+    background-size: cover;
+    background-position: center;
+    height: 180px;
+    @include media-breakpoint-up(md) {
+      height: 230px;
+    }
+    @include media-breakpoint-up(lg) {
+      height: 300px;
+    }
+    @include media-breakpoint-up(xl) {
+      height: 400px;
+    }
+    @include media-breakpoint-up(xxl, (xxl: $xxl)) {
+      height: 530px;
+    }
+  }
+}

frontend-main/components/organisms/HeroImagePane/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import BackgroundImage from '../../atoms/BackgroundImage';
+
+
+const HeroImagePane = ({ styles, imageUrl, imageTitle }) => {
+  return (
+    <div className={"row hero-image-pane " + styles}>
+      <BackgroundImage imageUrl={imageUrl} imageTitle={imageTitle} />
+    </div>
+  );
+};
+
+HeroImagePane.propTypes = {
+  imageUrl: PropTypes.string,
+  imageTitle: PropTypes.string,
+};
+
+HeroImagePane.defaultProps = {
+  styles: 'bg-white',
+};
+
+export default HeroImagePane;

frontend-main/components/organisms/PageTitleCopyPane/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import PageTitleCopy from '../../molecules/PageTitleCopy';
+
+const PageTitleCopyPane = ({ styles, heading, subheading, copy }) => {
+  return (
+    <div className={"row justify-content-center pagetitle-with-copy limited-width " + styles}>
+      <div className="col-12 col-md-8 col-xl-7">
+        <PageTitleCopy
+          heading={heading}
+          subheading={subheading}
+          copy={copy}
+        />
+      </div>
+    </div>
+  );
+};
+
+PageTitleCopyPane.propTypes = {
+  heading: PropTypes.string,
+  subheading: PropTypes.string,
+  copy: PropTypes.string,
+};
+
+PageTitleCopyPane.defaultProps = {
+  styles: 'bg-grey',
+};
+
+export default PageTitleCopyPane;

frontend-main/components/templates/OneColumnLayout/_style.scss

@@ -15,6 +15,9 @@
   .sign-up-with-description-pane {
     margin-bottom: 40px;
   }
+  .footer-links-pane {
+    margin: 16px 0;
+  }
   @include media-breakpoint-up(sm) {
     .pagetitle-with-copy {
       margin-bottom: 52px;
@@ -31,8 +34,12 @@
     .sign-up-with-description-pane {
       margin-bottom: 40px;
     }
+    .footer-links-pane {
+      margin: 24px 0;
+    }
   }
   @include media-breakpoint-up(md) {
+    .hero-image-pane,
     .hero-with-donation-block-pane {
       margin-bottom: 54px;
     }
@@ -51,8 +58,12 @@
     .sign-up-with-description-pane {
       margin-bottom: 40px;
     }
+    .footer-links-pane {
+      margin: 32px 0;
+    }
   }
   @include media-breakpoint-up(lg) {
+    .hero-image-pane,
     .hero-with-donation-block-pane {
       margin-bottom: 34px;
     }
@@ -71,6 +82,9 @@
     .sign-up-with-description-pane {
       margin-bottom: 76px;
     }
+    .footer-links-pane {
+      margin: 48px 0;
+    }
   }
   @include media-breakpoint-up(xl) {
     .video-player-pane {

frontend-main/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Falcon",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "dependencies": {
     "bootstrap": "4.0.0-beta.3",
     "bootstrap-4-grid": "^2.2.0",
@@ -42,4 +42,4 @@
     "start": "PORT=3000 NODE_ENV=production node server.js",
     "start:dev": "PORT=3000 NODE_ENV=development node server.js"
   }
-}
+}

frontend-main/pages/landing-page.js

@@ -10,14 +10,17 @@ import OneColumnLayout from '../components/templates/OneColumnLayout';
 const availableComponents = {
   'SiteHeaderPane': dynamic(import('../components/organisms/SiteHeaderPane')),
   'PageTitleCopyDonatePane': dynamic(import('../components/organisms/PageTitleCopyDonatePane')),
+  'PageTitleCopyPane': dynamic(import('../components/organisms/PageTitleCopyPane')),
   'TextBlockPane': dynamic(import('../components/organisms/TextBlockPane')),
   'MoneyHandlesWithButtonPane': dynamic(import('../components/organisms/MoneyHandlesWithButtonPane')),
   'DonateButtonPane': dynamic(import('../components/organisms/DonateButtonPane')),
   'ImageWithTextPane': dynamic(import('../components/organisms/ImageWithTextPane')),
   'VideoPlayerPane': dynamic(import('../components/organisms/VideoPlayerPane')),
   'SingUpWithDescriptionPane': dynamic(import('../components/organisms/SingUpWithDescriptionPane')),
   'HeroWithDonationBlockPane': dynamic(import('../components/organisms/HeroWithDonationBlockPane')),
+  'HeroImagePane': dynamic(import('../components/organisms/HeroImagePane')),
   'FooterDataPane': dynamic(import('../components/organisms/FooterDataPane')),
+  'FooterLinksPane': dynamic(import('../components/organisms/FooterLinksPane')),
 };
 
 class LandingPage extends React.Component {
@@ -42,7 +45,7 @@ class LandingPage extends React.Component {
         }
         else {
           return (
-            <Component key={i} {...(data.styles && data.styles.count > 0 ? {styles: data.styles.join(' ')} : {})} {...data.data} />
+            <Component key={i} {...(data.styles && data.styles.count > 0 ? { styles: data.styles.join(' ') } : {})} {...data.data} />
           )
         }
       });
@@ -65,7 +68,7 @@ class LandingPage extends React.Component {
   }
 
   // Load Page data and project settings from file now, should be given from backend later.
-  static getInitialProps = async function({ res, query }) {
+  static getInitialProps = async function ({ res, query }) {
 
     // @todo: validate url
     if (query.file_data_url !== undefined) {

frontend-main/styles/custom/_variables.scss

@@ -7,6 +7,8 @@ $grey: #666666;
 $grey-light: #f8f8f3;
 $white-grey: #ececec;
 $brownish-grey: #696969;
+$warm-grey: #707070;
+$dark-sky-blue: #4a90e2;
 
 $body-color: $black;
 $body-bg: $grey-light;