Merge pull request #3942 from DFE-Digital/new-header-component

New header component for landing pages

app/components/content/landing_hero_component.html.erb

@@ -0,0 +1,19 @@
+<%= tag.header(class: classes) do %>
+
+  <%= header_image %>
+
+  <%= tag.div(class: header_image ? "content" : "content wide") do %>
+
+    <%= tag.h1(class: "title") do %>
+      <% Array.wrap(title).each do |p| %>
+        <%= tag.span(p) %>
+      <% end %>
+    <% end %>
+
+    <% if show_title_paragraph? %>
+      <%= tag.p(title_paragraph, class: "title_paragraph") %>
+    <% end %>
+
+  <% end %>
+
+<% end %>

app/components/content/landing_hero_component.rb

@@ -0,0 +1,27 @@
+module Content
+  class LandingHeroComponent < ViewComponent::Base
+    attr_accessor :colour, :image, :title, :title_paragraph
+
+    def initialize(colour:, image:, title:, title_paragraph: nil)
+      super
+      @colour = colour
+      @image = image
+      @title = title
+      @title_paragraph = title_paragraph
+    end
+
+    def header_image
+      image_pack_tag(@image, **helpers.image_alt_attribs(@image)) if @image
+    end
+
+    def show_title_paragraph?
+      @title_paragraph.present?
+    end
+
+    def classes
+      %w[landing-hero].tap do |c|
+        c << colour if colour
+      end
+    end
+  end
+end

app/views/content/events/get-the-most-from-events.md

@@ -6,8 +6,8 @@ content:
     - content/events/get-the-most-from-events/steps
     - content/events/get-the-most-from-events/content
 image: "static/images/content/events/teaching-event.jpeg"
-colour: "yellow"
 layout: "layouts/minimal"
+colour: pastel yellow-yellow
 talk_to_us: false
 noindex: true
 

app/views/content/events/get-the-most-from-events/_header.html.erb

@@ -1,6 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["Get the most", "from an event"],
+<%= render Content::LandingHeroComponent.new(
+  title: "Get the most from an event",
   colour: @front_matter["colour"],
   image: @front_matter["image"],
-  background_colour: "grey"
 ) %>

app/views/content/events/get-the-most-from-events/_steps.html.erb

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="inset">
+  <div class="inset col-space-l-top">
     <section class="col col-720 centered">
 
       <p>

app/views/content/explore-teaching-advisers.md

@@ -3,8 +3,8 @@ title: Explore teaching advisers
 description: |-
     Find out if teaching is for you with an explore teaching adviser who can help you discover what teaching is really like.
 layout: "layouts/minimal"
-colour: "yellow"
-image: "static/images/content/ttalianne.jpg"
+colour: pastel yellow-yellow
+image: "static/images/content/campus-advisers/adviser.jpeg"
 keywords:
   - explore teaching advisers
   - adviser

app/views/content/explore-teaching-advisers/_article.html.erb

@@ -1,5 +1,5 @@
 <div class="row inset">
-  <section class="col col-720 statement">
+  <section class="col col-720 statement col-space-l-top">
     <div>
       <span class="pink xlarge bold">Teaching is&hellip;</span>
     </div>

app/views/content/explore-teaching-advisers/_header.html.erb

@@ -1,5 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["Explore", "teaching", "advisers"],
+<%= render Content::LandingHeroComponent.new(
+  title: "Explore teaching advisers",
   colour: @front_matter["colour"],
-  image: @front_matter["image"]
+  image: @front_matter["image"],
 ) %>

app/views/content/is-teaching-right-for-me/computing.md

@@ -8,7 +8,7 @@ navigation: 5.43
 navigation_title: Computing
 navigation_description: Discover how computing is vital, helping children learn digital skills they'll need throughout life.
 layout: "layouts/minimal"
-colour: "yellow"
+colour: pastel yellow-yellow
 image: "static/images/content/hero-images/0036.jpg"
 keywords:
   - computing

app/views/content/is-teaching-right-for-me/computing/_article.html.erb

@@ -1,5 +1,5 @@
 <div class="row inset">
-  <section class="col col-720">
+  <section class="col col-720 col-space-l-top">
 <p>As a secondary computing teacher you'll help pupils become responsible and confident users of information and technology in an increasingly digital world.</p>
 <p>Whether it's teaching your pupils about artificial intelligence (AI) or creating apps, you could inspire them to look at a future role in tech.</p>
 <p>Tax-free bursaries of £28,000 or scholarships of £30,000 are available for eligible trainee computing teachers.</p>

app/views/content/is-teaching-right-for-me/computing/_header.html.erb

@@ -1,5 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["Become a", "computing teacher"],
+<%= render Content::LandingHeroComponent.new(
+  title: "Become a computing teacher",
   colour: @front_matter["colour"],
   image: @front_matter["image"]
 ) %>

app/views/content/is-teaching-right-for-me/engineers-teach-physics.md

@@ -4,7 +4,7 @@ description: |-
     Find out more about the Engineers teach physics teacher training programme for engineers and material scientists who want to teach physics.
 
 layout: "layouts/minimal"
-colour: "yellow"
+colour: pastel yellow-yellow
 image: "static/images/content/hero-images/0013.jpg"
 keywords:
   - engineers

app/views/content/is-teaching-right-for-me/engineers-teach-physics/_article.html.erb

@@ -1,5 +1,5 @@
 <div class="row inset">
-  <section class="col col-720 col-space-m statement">
+  <section class="col col-720 col-space-m statement col-space-l-top">
     <div>
       <span class="pink xlarge bold">Physics initial teacher training courses for</span>
     </div>

app/views/content/is-teaching-right-for-me/engineers-teach-physics/_header.html.erb

@@ -1,5 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["Engineers teach", "physics"],
+<%= render Content::LandingHeroComponent.new(
+  title: "Engineers teach physics",
   colour: @front_matter["colour"],
   image: @front_matter["image"]
 ) %>

app/views/content/is-teaching-right-for-me/maths.md

@@ -7,7 +7,7 @@ navigation: 5.46
 navigation_title: Maths
 navigation_description: Find out how to become a maths teacher and show children the importance of maths in everything we do.
 layout: "layouts/minimal"
-colour: "yellow"
+colour: pastel yellow-yellow
 image: "static/images/content/hero-images/0004.jpg"
 keywords:
   - maths

app/views/content/is-teaching-right-for-me/maths/_article.html.erb

@@ -1,5 +1,5 @@
 <div class="row inset">
-  <section class="col col-720">
+  <section class="col col-720 col-space-l-top">
     <p>
       If maths is your passion, you'll know that it's not just learning formulas or solving equations. It's a way of thinking and problem solving that’s important in every walk of life.
     </p>

app/views/content/is-teaching-right-for-me/maths/_header.html.erb

@@ -1,5 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["Become a", "maths teacher"],
+<%= render Content::LandingHeroComponent.new(
+  title: "Become a maths teacher",
   colour: @front_matter["colour"],
   image: @front_matter["image"]
 ) %>

app/views/content/is-teaching-right-for-me/physics.md

@@ -7,7 +7,7 @@ navigation: 5.48
 navigation_title: Physics
 navigation_description: Find out how to become a physics teacher and inspire the next generation of scientists, engineers and innovators.
 layout: "layouts/minimal"
-colour: "yellow"
+colour: pastel yellow-yellow
 image: "static/images/content/hero-images/physics_1383.jpg"
 keywords:
   - physics

app/views/content/is-teaching-right-for-me/physics/_header.html.erb

@@ -1,5 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["Become a", "physics teacher"],
+<%= render Content::LandingHeroComponent.new(
+  title: "Become a physics teacher",
   colour: @front_matter["colour"],
   image: @front_matter["image"]
 ) %>

app/views/content/landing/campus-advisers.md

@@ -5,8 +5,8 @@ content:
     - content/landing/campus-advisers/header
     - content/landing/campus-advisers/adviser
 image: "static/images/content/campus-advisers/adviser.jpeg"
-colour: "pink"
 layout: "layouts/minimal"
+colour: pink-yellow
 talk_to_us: false
 noindex: true
 ---

app/views/content/landing/campus-advisers/_header.html.erb

@@ -1,6 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["Sign up for an", "adviser"],
+<%= render Content::LandingHeroComponent.new(
+  title: "Sign up for an adviser",
   colour: @front_matter["colour"],
   image: @front_matter["image"],
-  background_colour: "grey"
 ) %>

app/views/content/landing/campus-mailing-list.md

@@ -4,8 +4,8 @@ description: Free advice and support on how to become a teacher. Get the latest
 content:
     - content/landing/campus-mailing-list/header
     - content/landing/campus-mailing-list/mailing-list
-image: "static/images/content/landing/how-to-fund-your-teacher-training-1.jpg"
-colour: "pink"
+image: "static/images/content/hero-images/chemistry.jpg"
+colour: pink-yellow
 layout: "layouts/minimal"
 talk_to_us: false
 noindex: true

app/views/content/landing/campus-mailing-list/_header.html.erb

@@ -1,6 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["Sign up for", "emails"],
+<%= render Content::LandingHeroComponent.new(
+  title: "Sign up for emails",
   colour: @front_matter["colour"],
   image: @front_matter["image"],
-  background_colour: "grey"
 ) %>

app/views/content/landing/campus-mailing-list/_mailing-list.html.erb

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="grey col-space-l">
+  <div class="grey">
     <section class="col col-720 col-space-0">
       <%= render Content::MailingListComponent.new(
         title: "We'll help you do the homework before becoming a teacher",

app/views/content/landing/careers.md

@@ -8,8 +8,8 @@ content:
     - content/landing/careers/content
     - content/landing/careers/promo
 image: "static/images/content/hero-images/0029.jpg"
-colour: "yellow"
 layout: "layouts/minimal"
+colour: pink-blue
 talk_to_us: false
 noindex: true
 ---

app/views/content/landing/careers/_header.html.erb

@@ -1,6 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["You're more of a teacher than", "you think"],
-  colour: "grow",
+<%= render Content::LandingHeroComponent.new(
+  title: "You're more of a teacher than you think",
+  colour: @front_matter["colour"],
   image: @front_matter["image"],
-  background_colour: "grey"
 ) %>

app/views/content/landing/food-for-thought.md

@@ -6,7 +6,7 @@ content:
     - content/landing/food-for-thought/quotes
     - content/landing/food-for-thought/promo
 image: "static/images/content/hero-images/cake.png"
-colour: "yellow"
 layout: "layouts/minimal"
+colour: pink-yellow
 noindex: true
 ---

app/views/content/landing/food-for-thought/_header.html.erb

@@ -1,5 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["Food for", "thought"],
+<%= render Content::LandingHeroComponent.new(
+  title: "Food for thought",
   colour: @front_matter["colour"],
-  image: @front_matter["image"]
+  image: @front_matter["image"],
 ) %>

app/views/content/landing/grow.md

@@ -8,8 +8,8 @@ content:
     - content/landing/grow/content
     - content/landing/grow/promo
 image: "static/images/content/hero-images/0027.jpg"
-colour: "yellow"
 layout: "layouts/minimal"
+colour: pink-blue
 talk_to_us: false
 noindex: true
 ---

app/views/content/landing/grow/_header.html.erb

@@ -1,6 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["Grow as only", "a teacher can"],
-  colour: "grow",
+<%= render Content::LandingHeroComponent.new(
+  title: "Grow as only a teacher can",
+  colour: @front_matter["colour"],
   image: @front_matter["image"],
-  background_colour: "grey"
 ) %>

app/views/content/landing/how-much-do-teachers-get-paid.md

@@ -7,8 +7,8 @@ content:
     - content/landing/how-much-do-teachers-get-paid/mailing_list
     - content/landing/how-much-do-teachers-get-paid/content
     - content/landing/how-much-do-teachers-get-paid/promo
-image: "static/images/content/landing/how-much-do-teachers-get-paid-1.jpg"
-colour: "yellow"
+image: "static/images/content/hero-images/science.jpg"
+colour: "pink-blue"
 layout: "layouts/minimal"
 talk_to_us: false
 noindex: true

app/views/content/landing/how-much-do-teachers-get-paid/_header.html.erb

@@ -1,6 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["How much do teachers", "get paid?"],
-  colour: "grow",
-  image: @front_matter["image"],
-  background_colour: "grey"
+<%= render Content::LandingHeroComponent.new(
+  title: "How much do teachers get paid?",
+  colour:  @front_matter["colour"],
+  image: @front_matter["image"]
 ) %>

app/views/content/landing/how-to-become-a-teacher.md

@@ -7,9 +7,9 @@ content:
     - content/landing/how-to-become-a-teacher/steps
     - content/landing/how-to-become-a-teacher/content
     - content/landing/how-to-become-a-teacher/promo
-image: "static/images/content/landing/how-to-become-a-teacher-1.jpg"
-colour: "yellow"
+image: "static/images/content/hero-images/0031.jpg"
 layout: "layouts/minimal"
+colour: pink-blue  
 talk_to_us: false
 noindex: true
 ---

app/views/content/landing/how-to-become-a-teacher/_header.html.erb

@@ -1,6 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["How to become", "a teacher"],
-  colour: "grow",
+<%= render Content::LandingHeroComponent.new(
+  title: "How to become a teacher",
+  colour: @front_matter["colour"],
   image: @front_matter["image"],
-  background_colour: "grey"
 ) %>

app/views/content/landing/how-to-fund-your-teacher-training.md

@@ -7,9 +7,9 @@ content:
     - content/landing/how-to-fund-your-teacher-training/mailing_list
     - content/landing/how-to-fund-your-teacher-training/content
     - content/landing/how-to-fund-your-teacher-training/promo
-image: "static/images/content/landing/how-to-fund-your-teacher-training-1.jpg"
-colour: "yellow"
+image: "static/images/content/hero-images/chemistry.jpg"
 layout: "layouts/minimal"
+colour: pink-blue
 talk_to_us: false
 noindex: true
 ---

app/views/content/landing/how-to-fund-your-teacher-training/_header.html.erb

@@ -1,6 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["Fund your", "teacher training"],
-  colour: "grow",
+<%= render Content::LandingHeroComponent.new(
+  title: "Fund your teacher training",
+  colour: @front_matter["colour"],
   image: @front_matter["image"],
-  background_colour: "grey"
 ) %>

app/views/content/landing/mailing-list-1.md

@@ -5,7 +5,6 @@ content:
     - content/landing/mailing-list-1/header
     - content/landing/mailing-list-1/mailing-list
 image: "static/images/content/hero-images/0027.jpg"
-colour: "grow"
 layout: "layouts/minimal"
 talk_to_us: false
 noindex: true

app/views/content/landing/mailing-list-1/_header.html.erb

@@ -1,6 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["Get personalised", "guidance"],
-  colour: @front_matter["colour"],
+<%= render Content::LandingHeroComponent.new(
+  title: "Get personalised guidance",
+  colour: "pink-blue",
   image: @front_matter["image"],
-  background_colour: "grey"
 ) %>

app/views/content/landing/mailing-list-2.md

@@ -4,7 +4,7 @@ description: Free advice and support on how to become a teacher. Get the latest
 content:
     - content/landing/mailing-list-2/header
     - content/landing/mailing-list-2/mailing-list
-colour: "grow"
+colour: pink-blue
 layout: "layouts/minimal"
 talk_to_us: false
 noindex: true

app/views/content/landing/mailing-list-2/_header.html.erb

@@ -1,6 +1,5 @@
-<%= render Content::CampaignHeroComponent.new(
-  title: ["Get personalised", "guidance"],
+<%= render Content::LandingHeroComponent.new(
+  title: "Get personalised guidance",
   colour: @front_matter["colour"],
   image: @front_matter["image"],
-  background_colour: "grey"
 ) %>