Replace home page image

src/routes/home/Home.css

@@ -5,21 +5,21 @@
   height: 100vh;
 }
 
-.churchImage {
+.bgImage {
   position: fixed;
   width: 100vw;
   height: 100vh;
-  background: url('/img/church_2500.jpg');
+  background: url('/img/prague_2560.jpg');
   background-size: cover;
-  background-position-x: 50%;
+  background-position-x: 54%;
   background-color: #c1c1c1;
-  filter: grayscale(1) brightness(0.4);
+  filter: grayscale(1) brightness(0.6);
   z-index: -1;
   transition: filter ease-in-out 0.5s;
 }
 
-.churchImageFocus {
-  filter: grayscale(0.4) brightness(0.6);
+.bgImageFocus {
+  filter: grayscale(0.4) brightness(1);
 }
 
 .container {

src/routes/home/Home.js

@@ -10,8 +10,8 @@ class Home extends React.Component {
     this.state = {};
   }
 
-  focusChurchImage = (focus) => {
-    this.setState({ focusChurch: focus });
+  focusBgImage = (focus) => {
+    this.setState({ focusBgImage: focus });
   }
 
   render() {
@@ -19,8 +19,8 @@ class Home extends React.Component {
       <div className={s.root}>
         <div
           className={[
-            s.churchImage,
-            this.state.focusChurch ? s.churchImageFocus : null,
+            s.bgImage,
+            this.state.focusBgImage ? s.bgImageFocus : null,
           ].join(' ')}
         />
         <div className={s.container}>
@@ -31,7 +31,7 @@ class Home extends React.Component {
           </div>
           <div className={s.rsvp}>
             <RsvpButton
-              focusCallback={this.focusChurchImage}
+              focusCallback={this.focusBgImage}
             />
           </div>
         </div>