Add validation to RSVP field

Add fade in/out of bg image
Clean up layout

src/routes/home/Home.css

@@ -9,11 +9,17 @@
   position: fixed;
   width: 100vw;
   height: 100vh;
-  background-image: url('/img/church_2500.jpg');
+  background: url('/img/church_2500.jpg');
   background-size: cover;
-  background-position-x: 40%;
+  background-position-x: 50%;
+  background-color: #c1c1c1;
   filter: grayscale(1) brightness(0.4);
   z-index: -1;
+  transition: filter ease-in-out 0.5s;
+}
+
+.churchImageFocus {
+  filter: grayscale(0.4) brightness(0.6);
 }
 
 .container {
@@ -25,19 +31,23 @@
   max-width: 640px;
   margin: 0 auto 40px;
   text-align: center;
-  color: var(--colour-nearblack);
+  color: #fff;
+  font-size: 1.3em;
 }
 
-.headings > * {
-  margin: 0 0 20px;
-  font-size: 2.5em;
+.headings h1 {
+  margin: 0 0 10px;
+}
+
+.headings h2 {
+  margin: 0 0 60px;
 }
 
 .headings h3 {
-  margin-top: 40px;
+  margin: 0 0 20px;
   font-family: var(--font-family-cursive);
 }
 
 .rsvp {
-  padding-top: 15vh;
+  padding-top: 10vh;
 }

src/routes/home/Home.js

@@ -4,10 +4,25 @@ import s from './Home.css';
 import RsvpButton from '../../components/RsvpButton';
 
 class Home extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  focusChurchImage = (focus) => {
+    this.setState({ focusChurch: focus });
+  }
+
   render() {
     return (
       <div className={s.root}>
-        <div className={s.churchImage} />
+        <div
+          className={[
+            s.churchImage,
+            this.state.focusChurch ? s.churchImageFocus : null,
+          ].join(' ')}
+        />
         <div className={s.container}>
           <div className={s.headings}>
             <h1>Daniel and Hana</h1>
@@ -15,7 +30,9 @@ class Home extends React.Component {
             <h3>- 27th July 2017 -</h3>
           </div>
           <div className={s.rsvp}>
-            <RsvpButton />
+            <RsvpButton
+              focusCallback={this.focusChurchImage}
+            />
           </div>
         </div>
       </div>