Merge pull request #2853 from FlowFuse/contact-us-thank-you-page-iter…

…ation

/thank-you/contact/: Add stories block

src/_includes/explore-more-content.njk

@@ -1,3 +1,7 @@
+{% if readingResources and readingResources == "stories" %}
+ {% include "stories-block.njk" %}
+ <h4 class="mt-20 w-full text-center text-gray-500 pt-12 border-t">Learn more about how FlowFuse helps with your industrial data applications</h4>
+ {% endif %}
 <div class="w-full max-w-md md:max-w-none mx-auto flex flex-col md:grid md:grid-cols-3 gap-6 md:gap-x-8 pt-8">
     <div class="w-full my-2 grid grid-cols-1 pb-4">
         <div class="pb-2 md:pb-0">
@@ -59,4 +63,4 @@
             {% include hubspot.script %}
         </div>
     </div>
-</div>
+</div>

src/_includes/layouts/thank-you.njk

@@ -1,12 +1,21 @@
 ---
-layout: layouts/page.njk
+layout: layouts/base.njk
 skipIndex: true
 hubspot:
   script: "hubspot/hs-form.njk"
   formId: 159c173d-dd95-49bd-922b-ff3ef243e90c
 ---
+<!-- Hero section -->
+<div class="hero {{ 'hero-lg' if heroLg else ''}} container m-auto text-center flex flex-wrap pt-6 px-6 pb-12 md:flex-nowrap md:max-w-4xl md:pt-12">
+  <div class="mx-auto max-w-screen-xl md:max-w-xl">
+      <h1>{{ title | safe }}</h1>
+      <h4 class="text-gray-500">{{ subtitle | safe }}</h4>
+      <p class="lead-p m-auto mt-3">{{ description | safe }}</p>
+  </div>           
+</div>
+<!-- Content -->
 <div class="flex flex-col max-w-5xl mx-auto gap-x-10 px-6">
-  <div class="max-w-md sm:max-w-screen-lg m-auto max-w-5xl pb-12">
+  <div class="max-w-md sm:max-w-screen-lg m-auto max-w-5xl pb-6">
       {% include "explore-more-content.njk" %}
     </div>
   <!-- Social proof logos -->

src/_includes/stories-block.njk

@@ -0,0 +1,7 @@
+<ul class="w-full max-w-md md:max-w-none mx-auto flex flex-col md:grid md:grid-cols-3 gap-3 md:gap-x-4 pt-8">
+    {% from "stories/customer-story.njk" import storyTile %}
+
+    {%- for item in collections.stories | sort(attribute='item.date') | reverse | limit(3) -%}
+    {{ storyTile(title=item.data.title, url=item.url, brand=item.data.story.brand, logo=item.data.logo, image=item.data.image) }}
+    {%- endfor -%}
+</ul>

src/thank-you/contact.njk

@@ -1,8 +1,9 @@
 ---
 title: Thank you for contacting us
-subtitle: "<a href='https://meetings-eu1.hubspot.com/flowfuse/book-a-demo-call?uuid=22122d0b-0581-44fb-ab2c-4ae4ff8dc4f5'>Schedule a call right now</a> or get inspired by our customer success stories while you wait for someone from our team to reach out to you."  
-description: 
+subtitle: "<a href='https://meetings-eu1.hubspot.com/flowfuse/book-a-demo-call?uuid=22122d0b-0581-44fb-ab2c-4ae4ff8dc4f5' class='underline'>Schedule a call right now</a>"  
+description: Or get inspired by our customer success stories while you wait for someone from our team to reach out to you.
 downloadFollowUp: false
+readingResources: stories
 hubspot:
   cta: "cta-blog-subscribe"
   reference: "thank-you-contact"