From b4bbff2c4d68f2d2f08d7ec36294ea96ec77637d Mon Sep 17 00:00:00 2001
From: tym83 <6355522@gmail.com>
Date: Sun, 3 May 2026 05:29:26 +0500
Subject: [PATCH] refactor(home): place hero taglines above the title

Move the positioning pills to the top of the hero block, immediately
above the H1 so they read as an eyebrow line and align with the
Kubernetes Certified logo on the right. Restore the Get started button
to its original spot inside the description column.

Signed-off-by: tym83 <6355522@gmail.com>
---
 assets/scss/blocks/_hero.scss       | 9 +++++++--
 layouts/shortcodes/blocks/hero.html | 8 ++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/assets/scss/blocks/_hero.scss b/assets/scss/blocks/_hero.scss
index 292033c5..80f9d4dd 100644
--- a/assets/scss/blocks/_hero.scss
+++ b/assets/scss/blocks/_hero.scss
@@ -56,10 +56,15 @@
     }
   }
 
+  // When taglines sit above the title, they own the top spacing
+  .hero-taglines + h1 {
+    padding-top: 0;
+  }
+
   .hero-taglines {
     list-style: none;
-    padding: 0;
-    margin: 1rem 0 0;
+    padding: 50px 0 0;
+    margin: 0 0 1.25rem;
     display: flex;
     flex-wrap: wrap;
     gap: 0.6rem;
diff --git a/layouts/shortcodes/blocks/hero.html b/layouts/shortcodes/blocks/hero.html
index ed907bd1..8e7fa71b 100644
--- a/layouts/shortcodes/blocks/hero.html
+++ b/layouts/shortcodes/blocks/hero.html
@@ -39,13 +39,13 @@
       <!-- Title row with Kubernetes logo -->
       <div class="row align-items-start mb-4">
         <div class="col-lg-9">
-          {{ with .Get "title" }}<h1 class="display-1">{{ . | html }}</h1>{{ end }}
-          {{ with .Get "subtitle" }}<p class="display-2">{{ . | html }}</p>{{ end }}
           {{ with .Page.Params.taglines }}
           <ul class="hero-taglines" aria-label="Cozystack platform positioning">
             {{ range . }}<li class="hero-tagline">{{ . | html }}</li>{{ end }}
           </ul>
           {{ end }}
+          {{ with .Get "title" }}<h1 class="display-1">{{ . | html }}</h1>{{ end }}
+          {{ with .Get "subtitle" }}<p class="display-2">{{ . | html }}</p>{{ end }}
         </div>
         <div class="col-lg-3 d-none d-lg-block text-end">
           <a href="https://landscape.cncf.io/?group=certified-partners-and-providers&item=platform--paas-container-service--cozystack" target="_blank" rel="noopener noreferrer">
@@ -63,11 +63,11 @@
             {{ else }}
                 {{ .Inner | htmlUnescape | safeHTML }}
             {{ end }}
-            
+
             {{ if ne $link_url "#" }}
             <a class="btn btn-lg btn-info mt-3" href="{{ $link_url }}">{{ $link_title }} <i class="fas fa-arrow-right"></i></a>
             {{ end }}
-            
+
             <!-- Video for mobile devices -->
             <div class="hero-video-mobile d-lg-none mt-4">
               <div class="ratio ratio-16x9">