Tidy up courses page to use standard page title component and remove uneccessary spacing

Author: A-Wheeto

app/views/courses/index.html.erb

@@ -1,30 +1,27 @@
 <% meta_tag :title, 'Courses - Teach Computing' %>
-<%= render 'components/hero', hero_title: 'Computing courses for teachers', glyph_position: 'bottom', colour: 'lime-green' %>
+<%= render Cms::PageTitleComponent.new(title: "Computing courses for teachers") %>
 <div data-controller="course-filter">
   <%= render GovGridRowComponent.new(padding: {bottom: 2}) do |row| %>
-    <%= row.with_column("two-thirds") do %>
-      <p class="govuk-body">
+    <%= row.with_column("full") do %>
+      <p class="govuk-heading-m">
         Discover our range of professional development courses, designed to help you teach computing. Courses cover key stages 1 to 4 and cater for all levels of knowledge.
       </p>
     <% end %>
-    <%= row.with_column("one-third") do %>
-      <%= render AsideComponent.new(title: "Costs") do |component| %>
-        <% component.with_body do %>
-          <p class="govuk-body">All our online courses are free to all educators. Additional fees are applicable to residential courses and are stated at the point of booking. </p>
-        <% end %>
-      <% end %>
-    <% end %>
   <% end %>
 
   <%= form_with url: course_filter_path, method: :get, class: 'ncce-courses__filter-form', data: { action: "ajax:success->course-filter#handleResults", 'course-filter-target': "form" } do %>
     <div class="govuk-width-container ncce-courses__container" data-course-filter-target="resultsContainer" id="results-top">
       <div class="govuk-main-wrapper ncce-courses__results-wrapper">
         <div class="govuk-grid-row">
           <div class="govuk-grid-column-one-third-from-desktop ncce-courses__filters-wrapper govuk-!-margin-bottom-3">
+            <%= render AsideComponent.new(title: "Costs") do |component| %>
+              <% component.with_body do %>
+                <p class="govuk-body">All our online courses are free to all educators. Additional fees are applicable to residential courses and are stated at the point of booking. </p>
+              <% end %>
+            <% end %>
             <%= render 'courses/aside-filters' %>
           </div>
           <div class="govuk-grid-column-two-thirds-from-desktop">
-
             <div data-course-filter-target="results">
               <%= render 'courses/courses-list' %>
             </div>

app/webpacker/stylesheets/components/courses/_courses.scss

@@ -51,6 +51,12 @@
 
   /* Move the title inside the filter box on mobile */
   &-title--desktop {
+    border-top-color: $orange;
+    border-top-style: solid;
+    border-top-width: 3px;
+    padding-top: 1rem;
+    margin-top: 2rem;
+
     @include govuk-media-query($until: desktop) {
       display: none;
     }

spec/views/courses/index.html_spec.rb

@@ -25,10 +25,7 @@
   end
 
   it "has a title" do
-    expect(rendered).to have_css(
-      ".govuk-heading-xl",
-      text: "Computing courses for teachers"
-    )
+    expect(rendered).to have_css(".govuk-heading-l", text: "Computing courses for teachers")
   end
 
   it "renders the courses_list partial" do