fist go at building routes promo

app/components/calls_to_action/routes_component.html.erb

@@ -0,0 +1,18 @@
+<%= tag.div(class: "routes--border-top") if border %>
+<%= tag.div class: classes do %>
+    <div class="routes__left">
+    <%= image_pack_tag(image,
+                     **helpers.image_alt_attribs_for_text(""),
+                     class: "routes__image")
+    %>
+  </div>
+
+  <div class="routes__right">
+    <h2 class="heading-l">
+      <%= tag.span title if title.present? %>
+    </h2>
+    <%= tag.p text, class: 'routes__text' if text.present? %>
+    <p></p>
+    <%= link_to link_text, link_target, class: "button", role: "button", data: { "promo-type": "routes" } if link_text.present? && link_target.present? %>
+  </div>
+<% end %>

app/components/calls_to_action/routes_component.rb

@@ -0,0 +1,23 @@
+class CallsToAction::RoutesComponent < ViewComponent::Base
+  attr_reader :title, :text, :image, :link_text, :link_target, :classes, :border
+
+  def initialize(
+    title: "Find your route into teaching",
+    text: "An adviser with years of teaching experience can help you to become a teacher. Chat by phone, text, or email as little or often as you need.",
+    image: "static/images/routes.png",
+    link_text: "Find your route into teaching",
+    link_target: "/find-your-route-into-teaching",
+    classes: [],
+    border: true
+  )
+    super
+
+    @title = title
+    @text = text
+    @image = image
+    @link_text = link_text
+    @link_target = link_target
+    @classes = ["routes", *classes].compact.join(" ")
+    @border = border
+  end
+end

app/views/content/life-as-a-teacher/pay-and-benefits/teacher-pay.md

@@ -5,7 +5,7 @@ description: |-
   All qualified teachers will have a starting salary of at least $salaries_starting_min$ (or higher in London). Find out about teacher pay ranges and more benefits of teaching.
 backlink: "../../"
 promo_content:
-    - content/train-to-be-a-teacher/promos/mailing-list-promo-salaries
+    - content/train-to-be-a-teacher/promos/routes-promo
 related_content:
     How to become a teacher : "/steps-to-become-a-teacher"
     Train to be a teacher if you have or are studying for a degree : "/train-to-be-a-teacher/if-you-have-a-degree"

app/views/content/train-to-be-a-teacher/promos/_routes-promo.html.erb

@@ -0,0 +1,3 @@
+<%= render CallsToAction::RoutesComponent.new(
+  text: "Answer 3 questions to see which routes you could take into teaching.",
+) %>

app/webpacker/styles/components/routes.scss

@@ -0,0 +1,81 @@
+.routes {
+  max-width: $content-max-width;
+  display: flex;
+  flex-direction: column;
+  gap: $indent-amount * .5;
+  margin: 0 auto;
+  background-color: $grey;
+
+  @include mq($from: tablet) {
+    flex-direction: row;
+    margin: 0 auto;
+    gap: 2 * $indent-amount;
+  }
+
+  @include mq($until: tablet) {
+    &--border-top {
+      display: none;
+    }
+  }
+
+  @include mq($from: tablet) {
+    &--border-top {
+      display: block;
+      border-top: 1px solid $grey-mid;
+      padding-top: 3em;
+      margin: 0 auto;
+      max-width: $content-max-width;
+    }
+  }
+
+  &:last-of-type {
+    margin-bottom: 3em;
+  }
+
+  &__image {
+    height: 11em;
+    width: auto;
+  }
+
+  &__left {
+    flex: 0 1 45%;
+    padding-block: 2em;
+    min-height: 8em;
+    background-color: $grey;
+    padding: 1em;
+    align-content: center;
+    text-align: center;
+  }
+
+  &__right {
+    flex: 0 1 55%;
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    padding-right: $indent-amount;
+    padding-bottom: 2 * $indent-amount;
+
+    @include mq($until: tablet) {
+      padding-left: $indent-amount;
+    }
+
+    @include mq($from: tablet) {
+      padding-top: 2 * $indent-amount;
+    }
+
+    p,
+    h2 {
+      margin-top: 0;
+    }
+
+    label {
+      font-weight: bold;
+      display: block;
+    }
+
+    label,
+    input {
+      margin-bottom: .4em;
+    }
+  }
+}

app/webpacker/styles/git.scss

@@ -35,6 +35,7 @@
 @import "./sections/action-container";
 
 @import "./components/adviser";
+@import "./components/routes";
 @import "./components/arrow";
 @import "./components/aspect-ratio";
 @import "./components/badge";

lib/template_handlers/markdown.rb

@@ -10,7 +10,7 @@ class Markdown
 
     DEFAULTS = {}.freeze
     GLOBAL_FRONT_MATTER = Rails.root.join("config/frontmatter.yml").freeze
-    COMPONENT_TYPES = %w[quote quote_list inset_text youtube_video steps expander cta_adviser].freeze
+    COMPONENT_TYPES = %w[quote quote_list inset_text youtube_video steps expander cta_adviser cta_routes].freeze
 
     class << self
       def call(template, source = nil)

spec/components/calls_to_action/routes_component_spec.rb

@@ -0,0 +1,62 @@
+require "rails_helper"
+
+RSpec.describe CallsToAction::RoutesComponent, type: :component do
+  let(:title) { "Some Title" }
+  let(:text) { "Lorum ipsum dollar" }
+  let(:image) { "static/images/routes.png" }
+  let(:link_text) { "Find your route into teaching" }
+  let(:link_target) { "/somewhere" }
+
+  describe "rendering the component" do
+    let(:kwargs) { { title: title, text: text, image: image, link_text: link_text, link_target: link_target } }
+    let(:component) { described_class.new(**kwargs) }
+
+    before { render_inline(component) { content } }
+
+    specify "renders the routes component" do
+      expect(page).to have_css(".routes")
+    end
+
+    specify "the image is present" do
+      image_element = page.find("img")
+
+      expect(image_element[:src]).to match(Regexp.new(File.basename(image, ".*")))
+      expect(image_element[:alt]).to eql("")
+    end
+
+    specify "the title is present" do
+      expect(page).to have_css(".heading-l", text: title)
+    end
+
+    specify "the text is present" do
+      expect(page).to have_css("p.routes__text", text: text)
+    end
+
+    specify "the link is present" do
+      expect(page).to have_link(link_text, href: link_target)
+    end
+
+    context "when no title is present" do
+      let(:kwargs) { { text: text, image: image, link_text: link_text, link_target: link_target } }
+
+      specify "it should use the default title" do
+        expect(page).to have_css(".heading-l", text: "Find your route into teaching")
+      end
+    end
+
+    context "when no link is present" do
+      let(:link_text) { nil }
+      let(:link_target) { nil }
+
+      it { expect(page).not_to have_css("a") }
+    end
+
+    context "when no text is present" do
+      let(:text) { nil }
+
+      specify "no paragraph tag should be rendered" do
+        expect(page).not_to have_css("p.routes__text")
+      end
+    end
+  end
+end