diff --git a/app/components/content/landing_hero_component.html.erb b/app/components/content/landing_hero_component.html.erb new file mode 100644 index 0000000000..29e31aeb93 --- /dev/null +++ b/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 %> diff --git a/app/components/content/landing_hero_component.rb b/app/components/content/landing_hero_component.rb new file mode 100644 index 0000000000..64632dbca3 --- /dev/null +++ b/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 diff --git a/app/components/home/mailing_list_component.html.erb b/app/components/home/mailing_list_component.html.erb index 9e19939e09..6ef41be344 100644 --- a/app/components/home/mailing_list_component.html.erb +++ b/app/components/home/mailing_list_component.html.erb @@ -2,7 +2,11 @@
-

Sign up for our emails

+

+ + Sign up for our emails +

+

Everything you need to know to start a career in teaching sent straight into your inbox. Tailored to your own situation, you'll get all the latest information as well as advice and support. diff --git a/app/views/content/events/get-the-most-from-events.md b/app/views/content/events/get-the-most-from-events.md index bc07a0e04c..1cf28f9c14 100644 --- a/app/views/content/events/get-the-most-from-events.md +++ b/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 diff --git a/app/views/content/events/get-the-most-from-events/_header.html.erb b/app/views/content/events/get-the-most-from-events/_header.html.erb index 32125806db..e0af9d281c 100644 --- a/app/views/content/events/get-the-most-from-events/_header.html.erb +++ b/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" ) %> diff --git a/app/views/content/events/get-the-most-from-events/_steps.html.erb b/app/views/content/events/get-the-most-from-events/_steps.html.erb index 3639bd578b..8ab41ccc8d 100644 --- a/app/views/content/events/get-the-most-from-events/_steps.html.erb +++ b/app/views/content/events/get-the-most-from-events/_steps.html.erb @@ -1,5 +1,5 @@

-
+

diff --git a/app/views/content/explore-teaching-advisers.md b/app/views/content/explore-teaching-advisers.md index 7fb80ef978..ab7389fff0 100644 --- a/app/views/content/explore-teaching-advisers.md +++ b/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 diff --git a/app/views/content/explore-teaching-advisers/_article.html.erb b/app/views/content/explore-teaching-advisers/_article.html.erb index dfe0f8a589..9a411a2a7b 100644 --- a/app/views/content/explore-teaching-advisers/_article.html.erb +++ b/app/views/content/explore-teaching-advisers/_article.html.erb @@ -1,5 +1,5 @@

-
+
Teaching is…
diff --git a/app/views/content/explore-teaching-advisers/_header.html.erb b/app/views/content/explore-teaching-advisers/_header.html.erb index bef654dfb9..00d766bed5 100644 --- a/app/views/content/explore-teaching-advisers/_header.html.erb +++ b/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"], ) %> diff --git a/app/views/content/is-teaching-right-for-me/computing.md b/app/views/content/is-teaching-right-for-me/computing.md index 3a044453c2..52fdcadca2 100644 --- a/app/views/content/is-teaching-right-for-me/computing.md +++ b/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 diff --git a/app/views/content/is-teaching-right-for-me/computing/_article.html.erb b/app/views/content/is-teaching-right-for-me/computing/_article.html.erb index 9c65d9cfa7..025862af99 100644 --- a/app/views/content/is-teaching-right-for-me/computing/_article.html.erb +++ b/app/views/content/is-teaching-right-for-me/computing/_article.html.erb @@ -1,5 +1,5 @@
-
+

As a secondary computing teacher you'll help pupils become responsible and confident users of information and technology in an increasingly digital world.

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.

Tax-free bursaries of £28,000 or scholarships of £30,000 are available for eligible trainee computing teachers.

diff --git a/app/views/content/is-teaching-right-for-me/computing/_header.html.erb b/app/views/content/is-teaching-right-for-me/computing/_header.html.erb index f7192bb5ff..3a7274d963 100644 --- a/app/views/content/is-teaching-right-for-me/computing/_header.html.erb +++ b/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"] ) %> diff --git a/app/views/content/is-teaching-right-for-me/engineers-teach-physics.md b/app/views/content/is-teaching-right-for-me/engineers-teach-physics.md index 88e7349419..eac05db17e 100644 --- a/app/views/content/is-teaching-right-for-me/engineers-teach-physics.md +++ b/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 diff --git a/app/views/content/is-teaching-right-for-me/engineers-teach-physics/_article.html.erb b/app/views/content/is-teaching-right-for-me/engineers-teach-physics/_article.html.erb index 7bb7915976..798d77757d 100644 --- a/app/views/content/is-teaching-right-for-me/engineers-teach-physics/_article.html.erb +++ b/app/views/content/is-teaching-right-for-me/engineers-teach-physics/_article.html.erb @@ -1,5 +1,5 @@
-
+
Physics initial teacher training courses for
diff --git a/app/views/content/is-teaching-right-for-me/engineers-teach-physics/_header.html.erb b/app/views/content/is-teaching-right-for-me/engineers-teach-physics/_header.html.erb index 9a7976ae6b..5abc5bbdb4 100644 --- a/app/views/content/is-teaching-right-for-me/engineers-teach-physics/_header.html.erb +++ b/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"] ) %> diff --git a/app/views/content/is-teaching-right-for-me/maths.md b/app/views/content/is-teaching-right-for-me/maths.md index f60bc8c0c3..b1cccfdc7f 100644 --- a/app/views/content/is-teaching-right-for-me/maths.md +++ b/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 diff --git a/app/views/content/is-teaching-right-for-me/maths/_article.html.erb b/app/views/content/is-teaching-right-for-me/maths/_article.html.erb index a51107f816..81c5958137 100644 --- a/app/views/content/is-teaching-right-for-me/maths/_article.html.erb +++ b/app/views/content/is-teaching-right-for-me/maths/_article.html.erb @@ -1,5 +1,5 @@
-
+

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.

diff --git a/app/views/content/is-teaching-right-for-me/maths/_header.html.erb b/app/views/content/is-teaching-right-for-me/maths/_header.html.erb index abcda9f02c..0927122592 100644 --- a/app/views/content/is-teaching-right-for-me/maths/_header.html.erb +++ b/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"] ) %> diff --git a/app/views/content/is-teaching-right-for-me/physics.md b/app/views/content/is-teaching-right-for-me/physics.md index ba184b7088..237371cb05 100644 --- a/app/views/content/is-teaching-right-for-me/physics.md +++ b/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 diff --git a/app/views/content/is-teaching-right-for-me/physics/_header.html.erb b/app/views/content/is-teaching-right-for-me/physics/_header.html.erb index 492545d290..8e529b02ad 100644 --- a/app/views/content/is-teaching-right-for-me/physics/_header.html.erb +++ b/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"] ) %> diff --git a/app/views/content/landing/campus-advisers.md b/app/views/content/landing/campus-advisers.md index 3c95e0f5ee..02b2eea71a 100644 --- a/app/views/content/landing/campus-advisers.md +++ b/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 --- diff --git a/app/views/content/landing/campus-advisers/_header.html.erb b/app/views/content/landing/campus-advisers/_header.html.erb index c9e0482939..36adb13d07 100644 --- a/app/views/content/landing/campus-advisers/_header.html.erb +++ b/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" ) %> diff --git a/app/views/content/landing/campus-mailing-list.md b/app/views/content/landing/campus-mailing-list.md index 5847d14f32..7771b43ca7 100644 --- a/app/views/content/landing/campus-mailing-list.md +++ b/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 diff --git a/app/views/content/landing/campus-mailing-list/_header.html.erb b/app/views/content/landing/campus-mailing-list/_header.html.erb index e139e36583..4be933cf8f 100644 --- a/app/views/content/landing/campus-mailing-list/_header.html.erb +++ b/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" ) %> diff --git a/app/views/content/landing/campus-mailing-list/_mailing-list.html.erb b/app/views/content/landing/campus-mailing-list/_mailing-list.html.erb index 6640304556..f379057002 100644 --- a/app/views/content/landing/campus-mailing-list/_mailing-list.html.erb +++ b/app/views/content/landing/campus-mailing-list/_mailing-list.html.erb @@ -1,5 +1,5 @@
-
+
<%= render Content::MailingListComponent.new( title: "We'll help you do the homework before becoming a teacher", diff --git a/app/views/content/landing/careers.md b/app/views/content/landing/careers.md index 8e9629fee1..85e098d0c5 100644 --- a/app/views/content/landing/careers.md +++ b/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 --- diff --git a/app/views/content/landing/careers/_header.html.erb b/app/views/content/landing/careers/_header.html.erb index a71c90e108..a9c130e13d 100644 --- a/app/views/content/landing/careers/_header.html.erb +++ b/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" ) %> diff --git a/app/views/content/landing/food-for-thought.md b/app/views/content/landing/food-for-thought.md index 83c67ba215..4f869ff994 100644 --- a/app/views/content/landing/food-for-thought.md +++ b/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 --- diff --git a/app/views/content/landing/food-for-thought/_header.html.erb b/app/views/content/landing/food-for-thought/_header.html.erb index f242f5bd6f..c35d3636de 100644 --- a/app/views/content/landing/food-for-thought/_header.html.erb +++ b/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"], ) %> diff --git a/app/views/content/landing/grow.md b/app/views/content/landing/grow.md index 00b45c7681..624d86dd14 100644 --- a/app/views/content/landing/grow.md +++ b/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 --- diff --git a/app/views/content/landing/grow/_header.html.erb b/app/views/content/landing/grow/_header.html.erb index fbae7b6698..913f2fa438 100644 --- a/app/views/content/landing/grow/_header.html.erb +++ b/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" ) %> diff --git a/app/views/content/landing/how-much-do-teachers-get-paid.md b/app/views/content/landing/how-much-do-teachers-get-paid.md index 5baaa4c44b..b9338522e8 100644 --- a/app/views/content/landing/how-much-do-teachers-get-paid.md +++ b/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 diff --git a/app/views/content/landing/how-much-do-teachers-get-paid/_header.html.erb b/app/views/content/landing/how-much-do-teachers-get-paid/_header.html.erb index efd22634a8..62eed49829 100644 --- a/app/views/content/landing/how-much-do-teachers-get-paid/_header.html.erb +++ b/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"] ) %> diff --git a/app/views/content/landing/how-to-become-a-teacher.md b/app/views/content/landing/how-to-become-a-teacher.md index 2fd7cef08a..7c863313b5 100644 --- a/app/views/content/landing/how-to-become-a-teacher.md +++ b/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 --- diff --git a/app/views/content/landing/how-to-become-a-teacher/_header.html.erb b/app/views/content/landing/how-to-become-a-teacher/_header.html.erb index b7a0cdb947..e3b584134f 100644 --- a/app/views/content/landing/how-to-become-a-teacher/_header.html.erb +++ b/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" ) %> diff --git a/app/views/content/landing/how-to-fund-your-teacher-training.md b/app/views/content/landing/how-to-fund-your-teacher-training.md index 9e1a4e6374..426b8abb4b 100644 --- a/app/views/content/landing/how-to-fund-your-teacher-training.md +++ b/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 --- diff --git a/app/views/content/landing/how-to-fund-your-teacher-training/_header.html.erb b/app/views/content/landing/how-to-fund-your-teacher-training/_header.html.erb index 0ba89815fb..767b99ba1a 100644 --- a/app/views/content/landing/how-to-fund-your-teacher-training/_header.html.erb +++ b/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" ) %> diff --git a/app/views/content/landing/mailing-list-1.md b/app/views/content/landing/mailing-list-1.md index 773ae5b292..821ede2bd2 100644 --- a/app/views/content/landing/mailing-list-1.md +++ b/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 diff --git a/app/views/content/landing/mailing-list-1/_header.html.erb b/app/views/content/landing/mailing-list-1/_header.html.erb index ed31709949..6442311495 100644 --- a/app/views/content/landing/mailing-list-1/_header.html.erb +++ b/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" ) %> diff --git a/app/views/content/landing/mailing-list-2.md b/app/views/content/landing/mailing-list-2.md index 9e89e27e94..bdcb1179cf 100644 --- a/app/views/content/landing/mailing-list-2.md +++ b/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 diff --git a/app/views/content/landing/mailing-list-2/_header.html.erb b/app/views/content/landing/mailing-list-2/_header.html.erb index ed31709949..0f4c4f7d51 100644 --- a/app/views/content/landing/mailing-list-2/_header.html.erb +++ b/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" ) %> diff --git a/app/views/content/landing/mailing-list-3.md b/app/views/content/landing/mailing-list-3.md index 26c55544ba..4050593fa3 100644 --- a/app/views/content/landing/mailing-list-3.md +++ b/app/views/content/landing/mailing-list-3.md @@ -5,7 +5,6 @@ content: - content/landing/mailing-list-3/header - content/landing/mailing-list-3/mailing-list image: "static/images/content/hero-images/0027.jpg" -colour: "grow" layout: "layouts/minimal" talk_to_us: false noindex: true diff --git a/app/views/content/landing/mailing-list-3/_header.html.erb b/app/views/content/landing/mailing-list-3/_header.html.erb index ed31709949..6442311495 100644 --- a/app/views/content/landing/mailing-list-3/_header.html.erb +++ b/app/views/content/landing/mailing-list-3/_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" ) %> diff --git a/app/views/content/landing/mailing-list.md b/app/views/content/landing/mailing-list.md index 81450b86f2..fc0463eeca 100644 --- a/app/views/content/landing/mailing-list.md +++ b/app/views/content/landing/mailing-list.md @@ -5,7 +5,6 @@ content: - content/landing/mailing-list/header - content/landing/mailing-list/mailing-list image: "static/images/content/hero-images/0027.jpg" -colour: "grow" layout: "layouts/minimal" talk_to_us: false noindex: true diff --git a/app/views/content/landing/mailing-list/_header.html.erb b/app/views/content/landing/mailing-list/_header.html.erb index ed31709949..6442311495 100644 --- a/app/views/content/landing/mailing-list/_header.html.erb +++ b/app/views/content/landing/mailing-list/_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" ) %> diff --git a/app/views/content/landing/return-to-teaching-advisers.md b/app/views/content/landing/return-to-teaching-advisers.md index f01420f46c..8808c22d28 100644 --- a/app/views/content/landing/return-to-teaching-advisers.md +++ b/app/views/content/landing/return-to-teaching-advisers.md @@ -5,8 +5,8 @@ content: - content/landing/return-to-teaching-advisers/header - content/landing/return-to-teaching-advisers/adviser image: "static/images/content/campus-advisers/adviser.jpeg" -colour: "green" layout: "layouts/minimal" +colour: green-yellow talk_to_us: false noindex: true --- diff --git a/app/views/content/landing/return-to-teaching-advisers/_header.html.erb b/app/views/content/landing/return-to-teaching-advisers/_header.html.erb index 5e51fd2bfb..25a3fb1ae5 100644 --- a/app/views/content/landing/return-to-teaching-advisers/_header.html.erb +++ b/app/views/content/landing/return-to-teaching-advisers/_header.html.erb @@ -1,6 +1,5 @@ -<%= render Content::CampaignHeroComponent.new( - title: ["Get a", "return to", "teaching adviser"], +<%= render Content::LandingHeroComponent.new( + title: "Get a return to teaching adviser", colour: @front_matter["colour"], image: @front_matter["image"], - background_colour: "grey" ) %> diff --git a/app/views/content/landing/train-to-teach-if-you-have-a-degree.md b/app/views/content/landing/train-to-teach-if-you-have-a-degree.md index 122c5d1caa..525e5ebbff 100644 --- a/app/views/content/landing/train-to-teach-if-you-have-a-degree.md +++ b/app/views/content/landing/train-to-teach-if-you-have-a-degree.md @@ -7,9 +7,9 @@ content: - content/landing/train-to-teach-if-you-have-a-degree/mailing_list - content/landing/train-to-teach-if-you-have-a-degree/content - content/landing/train-to-teach-if-you-have-a-degree/promo -image: "static/images/content/landing/train-to-teach-if-you-have-a-degree-1.jpg" -colour: "yellow" +image: "static/images/content/hero-images/0030.jpg" layout: "layouts/minimal" +colour: pink-blue talk_to_us: false noindex: true --- diff --git a/app/views/content/landing/train-to-teach-if-you-have-a-degree/_header.html.erb b/app/views/content/landing/train-to-teach-if-you-have-a-degree/_header.html.erb index 7e791e0abc..157472b9ff 100644 --- a/app/views/content/landing/train-to-teach-if-you-have-a-degree/_header.html.erb +++ b/app/views/content/landing/train-to-teach-if-you-have-a-degree/_header.html.erb @@ -1,6 +1,5 @@ -<%= render Content::CampaignHeroComponent.new( - title: ["How to start", "teacher training"], - colour: "grow", +<%= render Content::LandingHeroComponent.new( + title: "How to start teacher training", + colour: @front_matter["colour"], image: @front_matter["image"], - background_colour: "grey" ) %> diff --git a/app/views/content/landing/train-to-teach.md b/app/views/content/landing/train-to-teach.md index a02177d6ca..f17dc7aaf8 100644 --- a/app/views/content/landing/train-to-teach.md +++ b/app/views/content/landing/train-to-teach.md @@ -8,8 +8,8 @@ content: - content/landing/train-to-teach/content - content/landing/train-to-teach/promo image: "static/images/content/hero-images/0029.jpg" -colour: "yellow" layout: "layouts/minimal" +colour: pink-blue talk_to_us: false noindex: true --- diff --git a/app/views/content/landing/train-to-teach/_header.html.erb b/app/views/content/landing/train-to-teach/_header.html.erb index 028977643d..225d3fc69f 100644 --- a/app/views/content/landing/train-to-teach/_header.html.erb +++ b/app/views/content/landing/train-to-teach/_header.html.erb @@ -1,6 +1,5 @@ -<%= render Content::CampaignHeroComponent.new( - title: ["How can I", "train to teach?"], - colour: "grow", +<%= render Content::LandingHeroComponent.new( + title: "How can I train to teach?", + colour: @front_matter["colour"], image: @front_matter["image"], - background_colour: "grey" ) %> diff --git a/app/views/content/landing/what-teaching-taught-me.md b/app/views/content/landing/what-teaching-taught-me.md index a52b1176ec..001f7d1e6b 100644 --- a/app/views/content/landing/what-teaching-taught-me.md +++ b/app/views/content/landing/what-teaching-taught-me.md @@ -8,8 +8,8 @@ content: - content/landing/what-teaching-taught-me/content - content/landing/what-teaching-taught-me/promo image: "static/images/content/hero-images/0028.jpg" -colour: "pink" layout: "layouts/minimal" +colour: pink-blue talk_to_us: false noindex: true --- diff --git a/app/views/content/landing/what-teaching-taught-me/_header.html.erb b/app/views/content/landing/what-teaching-taught-me/_header.html.erb index 088e8e68fc..95ca7f1045 100644 --- a/app/views/content/landing/what-teaching-taught-me/_header.html.erb +++ b/app/views/content/landing/what-teaching-taught-me/_header.html.erb @@ -1,6 +1,5 @@ -<%= render Content::CampaignHeroComponent.new( - title: ["How teaching", "can help you grow"], - colour: "grow", +<%= render Content::LandingHeroComponent.new( + title: "How teaching can help you grow", + colour: @front_matter["colour"], image: @front_matter["image"], - background_colour: "grey" ) %> diff --git a/app/views/teaching_events/about_git_events.html.erb b/app/views/teaching_events/about_git_events.html.erb index 2c04b7a43d..41a54da0a6 100644 --- a/app/views/teaching_events/about_git_events.html.erb +++ b/app/views/teaching_events/about_git_events.html.erb @@ -1,12 +1,12 @@ -<%= render Content::CampaignHeroComponent.new( - title: ["Get Into Teaching", "events"], - colour: "yellow", +<%= render Content::LandingHeroComponent.new( + title: "Get Into Teaching events", + colour: "pastel yellow-yellow", image: "static/images/content/hero-images/0025.jpg" ) %>
-

What to expect

+

What to expect

diff --git a/app/webpacker/images/content/hero-images/cake.png b/app/webpacker/images/content/hero-images/cake.png index 3469e39277..11a9e001e6 100644 Binary files a/app/webpacker/images/content/hero-images/cake.png and b/app/webpacker/images/content/hero-images/cake.png differ diff --git a/app/webpacker/images/content/hero-images/chemistry--mobile.jpg b/app/webpacker/images/content/hero-images/chemistry--mobile.jpg new file mode 100644 index 0000000000..8f5925e6ee Binary files /dev/null and b/app/webpacker/images/content/hero-images/chemistry--mobile.jpg differ diff --git a/app/webpacker/images/content/hero-images/chemistry--tablet.jpg b/app/webpacker/images/content/hero-images/chemistry--tablet.jpg new file mode 100644 index 0000000000..68a16438d9 Binary files /dev/null and b/app/webpacker/images/content/hero-images/chemistry--tablet.jpg differ diff --git a/app/webpacker/images/content/hero-images/chemistry.jpg b/app/webpacker/images/content/hero-images/chemistry.jpg new file mode 100644 index 0000000000..16c3e96b93 Binary files /dev/null and b/app/webpacker/images/content/hero-images/chemistry.jpg differ diff --git a/app/webpacker/images/content/hero-images/science--mobile.jpg b/app/webpacker/images/content/hero-images/science--mobile.jpg new file mode 100644 index 0000000000..db16761a64 Binary files /dev/null and b/app/webpacker/images/content/hero-images/science--mobile.jpg differ diff --git a/app/webpacker/images/content/hero-images/science--tablet.jpg b/app/webpacker/images/content/hero-images/science--tablet.jpg new file mode 100644 index 0000000000..db16761a64 Binary files /dev/null and b/app/webpacker/images/content/hero-images/science--tablet.jpg differ diff --git a/app/webpacker/images/content/hero-images/science.jpg b/app/webpacker/images/content/hero-images/science.jpg new file mode 100644 index 0000000000..2484c483b6 Binary files /dev/null and b/app/webpacker/images/content/hero-images/science.jpg differ diff --git a/app/webpacker/styles/components/mailing-list.scss b/app/webpacker/styles/components/mailing-list.scss index 38319e0f4e..6208810a73 100644 --- a/app/webpacker/styles/components/mailing-list.scss +++ b/app/webpacker/styles/components/mailing-list.scss @@ -25,6 +25,21 @@ position: relative; } + h2.mailing-list-title { + display: flex; + flex-wrap: nowrap; + align-items: center; + + & > i { + flex-basis: auto; + } + + & > span { + display: inline-block; + padding-left: .3em; + } + } + h2::before { content: ""; background-image: url("../images/content/homepage/dashed-lineV2.svg"); diff --git a/app/webpacker/styles/layout.scss b/app/webpacker/styles/layout.scss index 95cbfe6f02..4c7c23017c 100644 --- a/app/webpacker/styles/layout.scss +++ b/app/webpacker/styles/layout.scss @@ -188,6 +188,10 @@ section.container { margin-bottom: 3 * $indent-amount; } + .col-space-l-top { + margin-top: 3 * $indent-amount; + } + .col-space-0 { margin-bottom: 0; } diff --git a/app/webpacker/styles/sections/hero.scss b/app/webpacker/styles/sections/hero.scss index f6eaebbc23..b82df0bb7f 100644 --- a/app/webpacker/styles/sections/hero.scss +++ b/app/webpacker/styles/sections/hero.scss @@ -275,3 +275,121 @@ $mobile-cutoff: 800px; padding-bottom: 2em; } } + + +// New styles for LandingHeroComponent +.landing-hero { + display: flex; + flex-direction: column; + justify-content: center; + margin: auto; + width: 100%; + max-width: 2000px; + max-height: fit-content; + + @include mq($from: tablet) { + max-height: 420px; + flex-direction: row-reverse; + } + + // 50% width on child items '.content' and 'picture' (100% on mobile) + & > * { + width: 100%; + + @include mq($from: tablet) { + width: 50%; + } + } + + .content { + align-self: center; + box-sizing: border-box; + z-index: 1; + padding: 1.5rem; + + @include mq($from: tablet) { + padding: 3rem; + } + + @media only screen and (min-width: 1200px) { + padding: 5.5rem; + } + + // If no image use this + &.wide { + width: 100%; + + @include mq($from: tablet) { + width: 80%; + } + + h1.title { + margin-top: 0; + } + } + + h1.title { + font-size: 2.3rem; + line-height: 1.14; + margin-top: -2.5rem; + margin-bottom: 0; + + @include mq($from: tablet) { + margin: 0; + font-size: 3.3rem; + } + + @media only screen and (min-width: 1200px) { + font-size: 4.3rem; + } + + span { + padding: 0 0.6rem; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; + } + } + + p.title_paragraph { + margin-top: 2rem; + margin-bottom: 0; + } + } + + picture { + align-self: stretch; + + img { + -o-object-fit: cover; + object-fit: cover; + -o-object-position: 100% 50%; + object-position: 100% 50%; + width: 100%; + height: 100%; + vertical-align: bottom; + } + } + + // Colour themes + @mixin colours($background-color, $highlight-color) { + background-color: $background-color; + + h1 span { + background: $highlight-color; + } + + &.pastel { + background-color: rgba($background-color, 0.4); + } + } + + &.pink-blue { @include colours($pink, $blue); } + &.pink-green { @include colours($pink, $green); } + &.pink-yellow { @include colours($pink, $yellow); } + &.blue-pink { @include colours($blue, $pink); } + &.green-pink { @include colours($green, $pink); } + &.green-yellow { @include colours($green, $yellow); } + &.yellow-green { @include colours($yellow, $green); } + &.yellow-yellow { @include colours($yellow, $yellow); } + +} diff --git a/config/images.yml b/config/images.yml index ae7df8ed55..ce66f8f03f 100644 --- a/config/images.yml +++ b/config/images.yml @@ -1,5 +1,20 @@ --- # hero +"static/images/content/hero-images/chemistry.jpg": + # A teacher with two students doing a science experiment + alt: "" + variants: + - "static/images/content/hero-images/chemistry--mobile.jpg" + - "static/images/content/hero-images/chemistry--tablet.jpg" + +# hero +"static/images/content/hero-images/science.jpg": + # A teacher with two students doing a science experiment + alt: "" + variants: + - "static/images/content/hero-images/science--mobile.jpg" + - "static/images/content/hero-images/science--tablet.jpg" + "static/images/content/hero-images/M_DFE_Southfeilds_Room_A360_10445.jpg": # A teacher standing in a classroom alt: "" diff --git a/spec/components/content/landing_hero_component_spec.rb b/spec/components/content/landing_hero_component_spec.rb new file mode 100644 index 0000000000..e7f4a4b6f7 --- /dev/null +++ b/spec/components/content/landing_hero_component_spec.rb @@ -0,0 +1,36 @@ +require "rails_helper" + +RSpec.describe Content::LandingHeroComponent, type: "component" do + subject! { Capybara.string(component) } + + let(:image_path) { "static/images/content/hero-images/0013.jpg" } + let(:title) { "My page" } + let(:colour) { nil } + let(:component) do + render_inline(described_class.new( + title: title, + colour: colour, + image: image_path, + )) + end + + it { is_expected.to have_css(".landing-hero") } + it { is_expected.to have_css("header") } + it { is_expected.to have_css("h1", text: "My page") } + it { is_expected.to have_css(%(img)) } + + context "when the heading text is provided as an array" do + let(:title) { ["My super", "fancy page"] } + + specify "renders all parts of the array in separate spans within the h1" do + expect(page).to have_css("h1 > span", text: title.first) + expect(page).to have_css("h1 > span", text: title.last) + end + end + + context "when the colour is overridden" do + let(:colour) { "purple" } + + it { is_expected.to have_css("header.purple") } + end +end