Add accomodation page

src/components/Navigation/Navigation.js

@@ -17,6 +17,7 @@ class Navigation extends React.Component {
         <Link className={[s.link, this.props.current === 'home' ? s.active : null].join(' ')} to="/">RSVP</Link>
         <Link className={[s.link, this.props.current === 'ceremony' ? s.active : null].join(' ')} to="/ceremony">Church</Link>
         <Link className={[s.link, this.props.current === 'reception' ? s.active : null].join(' ')} to="/reception">Venue</Link>
+        <Link className={[s.link, this.props.current === 'accomodation' ? s.active : null].join(' ')} to="/accomodation">Hotels</Link>
       </div>
     );
   }

src/routes/accomodation/Accomodation.css

@@ -0,0 +1,58 @@
+@import '../../components/variables.css';
+
+.root {
+  width: 100vw;
+  height: 100vh;
+}
+
+.bgImage {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: url('/img/offley_2560.jpg');
+  background-size: cover;
+  background-position-x: 54%;
+  background-color: #c1c1c1;
+  filter: grayscale(1) brightness(0.6);
+  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;
+}
+
+.content {
+  max-width: 960px;
+  margin: 0 auto;
+  color: #fff;
+  text-shadow: 1px 1px 4px var(--colour-nearblack);
+}
+
+.hotelLink {
+  color: rgba(255, 255, 255, 0.8);
+  transition: color 0.3s ease-in;
+}
+
+.hotelLink:hover,
+.hotelLink:focus {
+  color: rgba(255, 255, 255, 1);
+}
+
+.map {
+  width: 360px;
+}

src/routes/accomodation/Accomodation.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './Accomodation.css';
+import Map from '../../components/Map';
+
+const offley = [
+  {
+    title: 'Offley Place',
+    url: 'http://www.offleyplace.com/',
+    lat: 51.9282,
+    lng: -0.3332,
+  },
+];
+
+const hotels = [
+  {
+    title: 'Hilton Garden Inn',
+    url: 'http://hiltongardeninn3.hilton.com/en/hotels/united-kingdom/hilton-garden-inn-luton-north-LTNNOGI/index.html',
+    lat: 51.9116,
+    lng: -0.3883,
+  },
+  {
+    title: 'Premier Inn',
+    url: 'http://www.premierinn.com/gb/en/hotels/england/hertfordshire/hitchin/hitchin-town-centre.html',
+    lat: 51.9493,
+    lng: -0.2762,
+  },
+  {
+    title: 'Lodge Farm House',
+    url: 'http://lodgefarmbandb.co.uk',
+    lat: 51.9054,
+    lng: -0.3354,
+  },
+  {
+    title: 'Red Lion Inn',
+    url: 'http://www.theredliongreatoffley.co.uk',
+    lat: 51.9266,
+    lng: -0.3348,
+  },
+];
+
+class Accomodation extends React.Component {
+  render() {
+    return (
+      <div className={s.root}>
+        <div className={s.bgImage} />
+        <div className={s.container}>
+          <div className={s.headings}>
+            <h1>Local hotels</h1>
+          </div>
+          <div className={s.content}>
+            <h3>The following hotels are near Offley Place</h3>
+            <ul>
+              {hotels.map((hotel, index) => (
+                <li key={index}><a className={s.hotelLink} href={hotel.url}>{hotel.title}</a></li>
+              ))}
+            </ul>
+            <div className={s.map}>
+              <Map
+                defaultZoom={12}
+                lat={offley[0].lat}
+                lng={offley[0].lng}
+                markers={hotels}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(Accomodation);

src/routes/accomodation/index.js

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

src/routes/ceremony/Ceremony.css

@@ -18,10 +18,6 @@
   transition: filter ease-in-out 0.5s;
 }
 
-.bgImageFocus {
-  filter: grayscale(0.4) brightness(1);
-}
-
 .container {
   padding-top: 50px;
   margin: 0 20px;

src/routes/ceremony/Ceremony.js

@@ -12,23 +12,11 @@ const markers = [
 ];
 
 class Ceremony extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  focusBgImage = (focus) => {
-    this.setState({ focusBgImage: focus });
-  }
-
   render() {
     return (
       <div className={s.root}>
         <div
-          className={[
+          className={s.bgImage}
-            s.bgImage,
-            this.state.focusBgImage ? s.bgImageFocus : null,
-          ].join(' ')}
         />
         <div className={s.container}>
           <div className={s.headings}>

src/routes/index.js

@@ -11,6 +11,7 @@ export default {
     require('./rsvp').default,
     require('./ceremony').default,
     require('./reception').default,
+    require('./accomodation').default,
     require('./login').default,
     require('./admin').default,
     require('./adminPeople').default,

src/routes/reception/Reception.css

@@ -18,10 +18,6 @@
   transition: filter ease-in-out 0.5s;
 }
 
-.bgImageFocus {
-  filter: grayscale(0.4) brightness(1);
-}
-
 .container {
   padding-top: 50px;
   margin: 0 20px;

src/routes/reception/Reception.js

@@ -3,32 +3,21 @@ import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Reception.css';
 import Map from '../../components/Map';
 
-const markers = [
+const offley = [
   {
     title: 'Offley Place',
+    url: 'http://www.offleyplace.com/',
     lat: 51.9282,
     lng: -0.3332,
   },
 ];
 
 class Reception extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  focusBgImage = (focus) => {
-    this.setState({ focusBgImage: focus });
-  }
-
   render() {
     return (
       <div className={s.root}>
         <div
-          className={[
+          className={s.bgImage}
-            s.bgImage,
-            this.state.focusBgImage ? s.bgImageFocus : null,
-          ].join(' ')}
         />
         <div className={s.container}>
           <div className={s.headings}>
@@ -47,9 +36,9 @@ class Reception extends React.Component {
             <div className={s.map}>
               <Map
                 defaultZoom={12}
-                lat={markers[0].lat}
+                lat={offley[0].lat}
-                lng={markers[0].lng}
+                lng={offley[0].lng}
-                markers={markers}
+                markers={offley}
               />
             </div>
           </div>