Create gift list page

Add generic vegetarian option to mains
Add additional content about Offley Place

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wedding",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "private": true,
   "engines": {
     "node": ">=6.5",

src/components/Navigation/Navigation.js

@@ -48,6 +48,7 @@ class Navigation extends React.Component {
           <Link className={[s.link, this.props.current === 'reception' ? s.active : null].join(' ')} to="/venue">Venue</Link>
           <Link className={[s.link, this.props.current === 'accomodation' ? s.active : null].join(' ')} to="/hotels">Hotels</Link>
           <Link className={[s.link, this.props.current === 'transport' ? s.active : null].join(' ')} to="/transport">Transport</Link>
+          <Link className={[s.link, this.props.current === 'giftlist' ? s.active : null].join(' ')} to="/giftlist">Gift list</Link>
         </div>
       </div>
     );

src/components/Navigation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Navigation",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "main": "./Navigation.js"
 }

src/routes/giftlist/Giftlist.css

@@ -0,0 +1,50 @@
+@import '../../components/variables.css';
+
+.root {
+  width: 100vw;
+  height: 100vh;
+}
+
+.bgImage {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: url('/img/moors_2560.jpg');
+  background-size: cover;
+  background-position-x: 78%;
+  background-position-y: 66%;
+  background-color: #c1c1c1;
+  filter: grayscale(1) brightness(0.4);
+  z-index: -1;
+  transition: filter ease-in-out 0.5s;
+}
+
+.container {
+  padding-top: 50px;
+  margin: 0 20px;
+}
+
+.headings {
+  max-width: 640px;
+  margin: 0 auto 40px;
+  text-align: center;
+  color: #fff;
+  text-shadow: 3px 3px 8px var(--colour-nearblack);
+  font-size: 1.3em;
+}
+
+.headings h1 {
+  margin: 0 0 10px;
+}
+
+.sig {
+  font-family: var(--font-family-cursive);
+  font-size: 1.4em;
+}
+
+.content {
+  max-width: 960px;
+  margin: 0 auto;
+  color: #fff;
+  text-shadow: 1px 1px 4px var(--colour-nearblack);
+}

src/routes/giftlist/Giftlist.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './Giftlist.css';
+
+class Giftlist extends React.Component {
+  render() {
+    return (
+      <div className={s.root}>
+        <div className={s.bgImage} />
+        <div className={s.container}>
+          <div className={s.headings}>
+            <h1>Gift list</h1>
+          </div>
+          <div className={s.content}>
+            <p>We&#8217;ve been asked what we&#8217;d like for a gift and the answer
+              is simple: you, at our wedding, having a great time.</p>
+            <p>However, if you insist then we&#8217;ll say what we&#8217;d also love
+              is the most amazing honeymoon possible. We have the basics covered but
+              we&#8217;re hoping for the holiday of a lifetime. We would like to see
+              and do everything we&#8217;ve dreamed about!</p>
+            <p>Right now we&#8217;re busy curating our list, but fret not, we
+              won&#8217;t take long! Please do check back here in the coming days,
+              we&#8217;ll have a link on this page.</p>
+            <p className={s.sig}>Dan and Hana</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(Giftlist);

src/routes/giftlist/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Giftlist from './Giftlist';
+import Layout from '../../components/Layout';
+
+export default {
+
+  path: '/giftlist',
+
+  action() {
+    return {
+      title: 'Gift list',
+      component: <Layout current="giftlist"><Giftlist /></Layout>,
+    };
+  },
+};

src/routes/index.js

@@ -13,6 +13,7 @@ export default {
     require('./reception').default,
     require('./accomodation').default,
     require('./transport').default,
+    require('./giftlist').default,
     require('./login').default,
     require('./admin').default,
     require('./adminPeople').default,

src/routes/reception/Reception.js

@@ -39,6 +39,23 @@ class Reception extends React.Component {
               defaultCenter={offley.position}
               markers={[offley]}
             />
+            <h3>About Offley Place</h3>
+            <p>Legend has it that in the 8th century, King Offa discovered the bones of
+              Saint Alban and set about creating St Albans Abbey in a tribute to him.
+              While it was being completed he looked for a place to call home and
+              discovered the local area. After building a grand palace the village is
+              thought to have become known as Great Off Lee.</p>
+            <p>Great Offley Place was first built in the 17th century.  Rebuilt in 1810
+              but still retaining a Tudor porch and a 17th century wing, the grand house
+              has a long history which has seen the same family line keep ownership for
+              an impressive 350 years.</p>
+            <p>In 1929 the family ownership was brought to an end when the last owner,
+              Guy George, sold the estate to a director of WH Smith who was well liked
+              in the village and built a cricket pavilion and pitch.</p>
+            <p>When World War II broke out it was sold again, this time to become a
+              teacher training college, and then finally in 2003 it was taken over again
+              and transformed into the luxury hotel, wedding venue and restaurant it
+              is today.</p>
           </div>
         </div>
       </div>