Use heading component

app/views/_tailwind/documentation/about.html.erb

@@ -25,7 +25,8 @@
 </p>
 
 <section id="contributors" class="pt-8">
-  <h2 class="mb-6 text-2xl font-bold text-navy font-display">Contributors</h2>
+  <%# TODO: Non-standard styling %>
+  <%= render Tailwind::Heading.new(tag: :h2, extra_classes: "mb-6", size: "2xl").with_content("Contributors") %>
   <div class="flex flex-col items-start gap-8 lg:flex-row-reverse">
     <%= image_tag "tailwind/illustration/about.svg", class: "lg:pt-16", alt: "" %>
     <div>

app/views/_tailwind/documentation/contact.html.erb

@@ -5,9 +5,8 @@
 <% end %>
 
 <section class="mt-8">
-  <h2 class="text-2xl font-bold text-navy">
-    Contact a planning authority
-  </h2>
+  <%# TODO: Non-standard style %>
+  <%= render Tailwind::Heading.new(tag: :h2, size: "2xl", font: "sans").with_content("Contact a planning authority") %>
 
   <p class="mt-6 text-2xl text-navy">
     Are you trying to get in touch with your local council or state planning authority?
@@ -24,9 +23,7 @@
 </section>
 
 <section class="mt-16">
-  <h2 class="text-2xl font-bold text-navy">
-    Contact the Planning Alerts team
-  </h2>
+  <%= render Tailwind::Heading.new(tag: :h2, size: "2xl", font: "sans").with_content("Contact the Planning Alerts team") %>
   <p class="mt-6 text-2xl text-navy">
     Did we mention that we're a <strong>tiny team</strong> and <strong>not</strong> the government?
     We do our best to respond to everyone but sometimes things slip through the cracks.

app/views/_tailwind/documentation/get_involved.html.erb

@@ -21,9 +21,10 @@
   <section class="flex flex-col items-start gap-8 py-8 sm:flex-row">
     <%= image_tag "tailwind/illustration/headshot1.svg", alt: "" %>
     <div class="flex flex-col gap-4 text-2xl text-navy">
-      <h2 class="font-bold">
+      <%# TODO: Using non-standard style %>
+      <%= render Tailwind::Heading.new(tag: :h2, size: "2xl", font: "sans") do %>
         I am a programmer and want to add my local planning authority
-      </h2>
+      <% end %>
       <p>
         You can help by writing a
         <%= pa_link_to "web scraper", "https://en.wikipedia.org/wiki/Web_scraping" %>
@@ -40,9 +41,10 @@
   <section class="flex flex-col items-start gap-8 py-8 sm:flex-row">
     <%= image_tag "tailwind/illustration/headshot2.svg", alt: "" %>
     <div class="flex flex-col gap-4 text-2xl text-navy">
-      <h2 class="font-bold">
+      <%# TODO: Using non-standard style %>
+      <%= render Tailwind::Heading.new(tag: :h2, size: "2xl", font: "sans") do %>
         I'm not technical and I want to get my local council on to Planning Alerts. What can I do?
-      </h2>
+      <% end %>
       <p>
         You can lobby your local council to publish its planning data in a machine readable format. Email the council planning department and General Manager. Contact your councillors and get them to support your mission.
       </p>
@@ -54,9 +56,10 @@
   <section class="flex flex-col items-start gap-8 py-8 sm:flex-row">
     <%= image_tag "tailwind/illustration/headshot3.svg", alt: "" %>
     <div class="flex flex-col gap-4 text-2xl text-navy">
-      <h2 class="font-bold">
+      <%# TODO: Using non-standard style %>
+      <%= render Tailwind::Heading.new(tag: :h2, size: "2xl", font: "sans") do %>
         I don't have the time or I don't have the skills. How can I help?
-      </h2>
+      <% end %>
       <p>
         If you value the service provided by Planning Alerts but simply don't have the time or
         the specialist skills to help out personally then the best thing that you can do is
@@ -68,9 +71,10 @@
   <section class="flex flex-col items-start gap-8 py-8 sm:flex-row">
     <%= image_tag "tailwind/illustration/headshot4.svg", alt: "" %>
     <div class="flex flex-col gap-4 text-2xl text-navy">
-      <h2 class="font-bold">
+      <%# TODO: Using non-standard style %>
+      <%= render Tailwind::Heading.new(tag: :h2, size: "2xl", font: "sans") do %>
         I work for a local council or planning authority and would like to make our data available
-      </h2>
+      <% end %>
       <p>
         The most important thing you can do is publish your data in a simple machine-readable format that is freely available on the internet.
       </p>

app/views/_tailwind/documentation/how_to_write_a_scraper.html.erb

@@ -5,7 +5,7 @@
 <% end %>
 
 <section>
-  <h2 class="mt-12 text-3xl font-bold text-navy font-display">What are scrapers?</h2>
+  <%= render Tailwind::Heading.new(tag: :h2, extra_classes: "mt-12").with_content("What are scrapers?") %>
   <div class="flex flex-col items-start gap-8 mt-8 md:flex-row-reverse">
     <%= image_tag "tailwind/illustration/explorer.svg", alt: "" %>
     <div class="text-2xl text-navy">

app/views/_tailwind/home/_how_is_this_free.html.erb

@@ -1,7 +1,7 @@
 <%# TODO: The words here are a start and are good in spirit but not totally accurate so need updating %>
 <section class="pt-12 pb-16">
-  <h2 class="pb-8 text-4xl font-bold text-navy font-display">How is this free?</h2>
-
+  <%# TODO: Non-standard style %>
+  <%= render Tailwind::Heading.new(tag: :h2, size: "4xl", extra_classes: "pb-8").with_content("How is this free?") %>
   <div class="flex flex-col gap-8 lg:flex-row">
     <div>
       <p class="text-2xl text-navy">

app/views/_tailwind/home/_stats.html.erb

@@ -1,6 +1,7 @@
 <% cache "stats", expires_in: 1.hour do %>
   <section class="pt-12 text-xl text-navy">
-    <h2 class="mb-12 text-4xl font-bold font-display">This week at Planning Alerts</h2>
+    <%# TODO: Non-standard style %>
+    <%= render Tailwind::Heading.new(tag: :h2, size: "4xl", extra_classes: "mb-12").with_content("This week at Planning Alerts") %>
     <ul class="grid gap-12 text-center sm:grid-cols-2 lg:grid-cols-4">
       <li>
         <%= link_to applications_path, class: "text-fuchsia focus:bg-sun-yellow block" do %>

app/views/_tailwind/home/_trending.html.erb

@@ -1,5 +1,7 @@
 <section class="pb-12">
-  <h2 class="mt-20 text-4xl font-bold text-navy font-display">Most commented applications</h2>
+  <%# TODO: Non-standard style %>
+  <%# TODO: Should this actually be an h1? %>
+  <%= render Tailwind::Heading.new(tag: :h2, size: "4xl", extra_classes: "mt-20").with_content("Most commented applications") %>
   <p class="mt-4 text-2xl text-navy">
     Some planning applications attract considerably more community interest than others.
     We bring you the trending applications so you can see what people find most popular or contentious.

app/views/_tailwind/profiles/comments.html.erb

@@ -1,6 +1,6 @@
 <% content_for :page_title, "Your comments" %>
 
-<h2 class="text-3xl font-bold text-navy font-display"><%= yield(:page_title) %></h2>
+<%= render Tailwind::Heading.new(tag: :h2).with_content(yield(:page_title)) %>
 
 <% if @comments.empty? %>
   <%# TODO: We don't yet have a design for this bit %>

app/views/_tailwind/profiles/design.html.erb

@@ -1,7 +1,6 @@
 <% content_for :page_title, "Switch design" %>
 
-<h2 class="text-3xl font-bold text-navy font-display"><%= yield(:page_title) %></h2>
-
+<%= render Tailwind::Heading.new(tag: :h2).with_content(yield(:page_title)) %>
 <p class="mt-12 text-2xl text-navy">
   Thanks for helping us by trying out the new design!
 </p>