add hero styling and background image

4 files changed, 60 insertions, 4 deletions

diff --git a/assets/images/homepage-background-small.jpg b/assets/images/homepage-background-small.jpg
new file mode 100644
index 0000000..2bf1d52
--- /dev/null
+++ b/assets/images/homepage-background-small.jpg
diff --git a/assets/images/homepage-background.jpg b/assets/images/homepage-background.jpg
new file mode 100644
index 0000000..698dfc3
--- /dev/null
+++ b/assets/images/homepage-background.jpg
diff --git a/assets/stylesheets/responsive/custom.scss b/assets/stylesheets/responsive/custom.scss
index 6ce1db0..94ad1a1 100644
--- a/assets/stylesheets/responsive/custom.scss
+++ b/assets/stylesheets/responsive/custom.scss
@@ -786,3 +786,63 @@ li:nth-child(3) {
 }
 
 
+.homepage-hero {
+  background-color: $color_black;
+  background-image: image-url('homepage-background-small.jpg');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  color: $color_white;
+  padding: 2em 0 5em;
+  position: relative;
+  @include respond-min($main_menu-mobile_menu_cutoff) {
+    padding: 5em 0 8em;
+    background-image: image-url('homepage-background.jpg');
+  }
+
+  a {
+    color: $color_yellow;
+    &:hover,
+    &:active,
+    &:focus {
+      color: $color_white;
+    }
+  }
+
+  .button {
+    color: $color_white;
+    background-color: $color_yellow;
+    border-color: darken($color_yellow, 15%);
+    color: $color_black;
+    transition: color 300ms ease-out;
+    &:hover,
+    &:active,
+    &:focus {
+      color: $color_white;
+      background-color: $color_blue;
+      border-color: darken($color_blue, 15%);
+      transition: color 300ms ease-out;
+    }
+  }
+}
+
+.intro__title {
+  color: $color_white;
+  text-shadow: 0 1px 2px transparentize($color_black, 0.7);
+}
+
+.new-request__content {
+  background-color: $color_black;
+  border-radius: 5px;
+  padding: 1.888888889em;
+}
+
+.new-request__title {
+  color: $color_white;
+  font-size: 1.4375em;
+  margin: 0 0 0.5em;
+}
+
+.new-request__description {
+  color: transparentize($color_white, 0.2);
+}
diff --git a/lib/views/general/_frontpage_intro_sentence.html.erb b/lib/views/general/_frontpage_intro_sentence.html.erb
deleted file mode 100644
index cfba8f6..0000000
--- a/lib/views/general/_frontpage_intro_sentence.html.erb
+++ /dev/null
@@ -1,4 +0,0 @@
-<h2>
-  Your <strong>Right to Know</strong>
-</h2>
-<p>Every citizen has the right to access information held by public bodies. <strong>By law, they have to respond</strong>. <a href="<%= help_about_url %>">Find out more about Freedom of Information.</a></p>