add header (and other minor adjustments) on training index page

Author: ax-sc

apecs/compass/templates/compass/sites/polarin/polarin.html

@@ -15,7 +15,18 @@
 {% endblock %}
 
 {% block content %}
-    <div class="bg-gray-50 py-16 sm:py-24 dark:bg-gray-900">
+
+    <div class="bg-white px-6 py-8 sm:py-10 lg:px-8 dark:bg-gray-900">
+        <div class="mx-auto max-w-3xl text-center">
+            <h2 class="mt-2 text-4xl font-semibold tracking-tight text-polarin-blue sm:text-7xl dark:text-white">
+                POLARIN Training Hub</h2>
+            <p class="mt-6 text-pretty text-xl font-medium text-gray-500 sm:text-xl/8 dark:text-gray-400">
+                A collection of training resources for polar research.
+            </p>
+        </div>
+    </div>
+
+    <div class="bg-gray-50 py-12 sm:py-16 dark:bg-gray-900">
         <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
             <h2 class="text-base/7 font-semibold text-polarin-blue">POLARIN training resources</h2>
             <p class="mt-2 mb-6 text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl dark:text-white">
@@ -35,8 +46,8 @@ <h2 class="text-base/7 font-semibold text-polarin-blue">POLARIN training resourc
             <div class="mt-4 grid grid-cols-1 gap-4 sm:mt-6 lg:grid-cols-6 lg:grid-rows-2">
                 <div class="flex p-px lg:col-span-4">
                     <div class="w-full overflow-hidden rounded-lg bg-white shadow outline outline-1 outline-black/5  dark:bg-gray-800 dark:shadow-none dark:outline-white/15">
-                        <div class="p-10">
-                            <p class="mt-2 text-lg font-medium tracking-tight text-polarin-blue dark:text-white">
+                        <div class="p-8">
+                            <p class="mt-2 text-xl font-medium tracking-tight text-polarin-blue dark:text-white">
                                 Planning and conducting safe polar fieldwork</p>
                             <p class="mt-2 text-sm/6 text-gray-600 dark:text-gray-400">
                                 Learn how to keep people and the environment safe during your fieldwork activities in
@@ -47,8 +58,8 @@ <h2 class="text-base/7 font-semibold text-polarin-blue">POLARIN training resourc
                 </div>
                 <div class="flex p-px lg:col-span-2">
                     <div class="w-full overflow-hidden rounded-lg bg-white shadow outline outline-1 outline-black/5  dark:bg-gray-800 dark:shadow-none dark:outline-white/15">
-                        <div class="p-10">
-                            <p class="mt-2 text-lg font-medium tracking-tight text-polarin-blue dark:text-white">
+                        <div class="p-8">
+                            <p class="mt-2 text-xl font-medium tracking-tight text-polarin-blue dark:text-white">
                                 Collaborating meaningfully
                             </p>
                             <p class="mt-2 max-w-lg text-sm/6 text-gray-600 dark:text-gray-400">
@@ -60,8 +71,8 @@ <h2 class="text-base/7 font-semibold text-polarin-blue">POLARIN training resourc
                 </div>
                 <div class="flex p-px lg:col-span-2">
                     <div class="w-full overflow-hidden rounded-lg bg-white shadow outline outline-1 outline-black/5 dark:bg-gray-800 dark:shadow-none dark:outline-white/15">
-                        <div class="p-10">
-                            <p class="mt-2 text-lg font-medium tracking-tight text-polarin-blue dark:text-white">
+                        <div class="p-8">
+                            <p class="mt-2 text-xl font-medium tracking-tight text-polarin-blue dark:text-white">
                                 Reducing environmental impact
                             </p>
                             <p class="mt-2 max-w-lg text-sm/6 text-gray-600 dark:text-gray-400">
@@ -72,8 +83,8 @@ <h2 class="text-base/7 font-semibold text-polarin-blue">POLARIN training resourc
                 </div>
                 <div class="flex p-px lg:col-span-4">
                     <div class="w-full overflow-hidden rounded-lg bg-white shadow outline outline-1 outline-black/5  dark:bg-gray-800 dark:shadow-none dark:outline-white/15">
-                        <div class="p-10">
-                            <p class="mt-2 text-lg font-medium tracking-tight text-polarin-blue dark:text-white">
+                        <div class="p-8">
+                            <p class="mt-2 text-xl font-medium tracking-tight text-polarin-blue dark:text-white">
                                 Using research infrastructures efficiently
                             </p>
                             <p class="mt-2 text-sm/6 text-gray-600 dark:text-gray-400">
@@ -121,7 +132,7 @@ <h1 class="mt-2 text-pretty text-4xl font-semibold tracking-tight text-gray-900
                     <div class="mt-6 flex">
                         <a href="https://eu-polarin.eu"
                            class="text-base/7 font-semibold hover:text-polarin-blue">
-                            Learn more about the POLARIN project<span aria-hidden="true">&rarr;</span>
+                            Learn more about the POLARIN project <span aria-hidden="true">&rarr;</span>
                         </a>
                     </div>
                 </div>
@@ -161,7 +172,7 @@ <h1 class="mt-2 text-pretty text-4xl font-semibold tracking-tight text-gray-900
                     <div class="mt-6 flex">
                         <a href="https://www.apecs.is"
                            class="text-base/7 font-semibold hover:text-polarin-blue">
-                            Learn more about APECS<span aria-hidden="true">&rarr;</span>
+                            Learn more about APECS <span aria-hidden="true">&rarr;</span>
                         </a>
                     </div>
                 </div>