more precise hub hero copy

app/views/sections/_section_hero1.haml

@@ -1,6 +1,6 @@
 %section.overflow-hidden.bg-cover.bg-center.bg-no-repeat{style: bg(section)}
-  .p-8.md:p-12.lg:px-16.lg:py-24{:class => "bg-black/25"}
+  .p-8.md:p-12.lg:px-16.lg:py-24
-    .max-w-lg.text-center.sm:text-left
+    .max-w-lg.text-center.sm:text-left{:class => "bg-black/25"}
       %h2.text-2xl.font-bold.text-white.sm:text-3xl.md:text-5xl
         = section["header"]
       %p.hidden.max-w-md.md:mt-6.md:block.md:text-lg.md:leading-relaxed{:class => "text-white/90"}

app/views/sections/_section_hero2.haml

@@ -0,0 +1,14 @@
+%section.overflow-hidden.bg-cover.bg-center.bg-no-repeat{style: bg(section)}
+  .mx-auto.max-w-screen-2xl.px-4.py-8.sm:px-6.lg:px-8
+    .grid.grid-cols-1.gap-4.md:grid-cols-2
+      .p-8.md:p-12.lg:px-16.lg:py-24{class: 'bg-black/25'}
+        .mx-auto.max-w-xl.text-center
+          %h2.text-2xl.font-bold.text-white.md:text-5xl
+            = section["header"]
+          %p.hidden.sm:mt-4.sm:block.text-lg{class: "text-white/90"}
+            = section["text"]
+          .mt-4.md:mt-8
+            -if section["button_text"]
+              %a.inline-block.rounded.border.border-white.bg-white.px-12.py-3.text-sm.font-medium.text-blue-500.transition.hover:bg-transparent.hover:text-white.focus:outline-none.focus:ring.focus:ring-yellow-400{:href => section["button_link"]}
+                =section["button_text"]
+      .grid.grid-cols-2.gap-4.md:grid-cols-1.lg:grid-cols-2

cms/index.yaml

@@ -1,7 +1,6 @@
-- template: hero_section
+- template: section_hero2
   header: HUB  FEENIX
   text:
     Only an hour west of Helsinki, the Feenix rises from an old sanatorium.
     The Hub is a place to create, learn and regenerate.
   image: house.jpg
-  im: section.overflow-hidden.bg-cover.bg-center.bg-no-repeat{:class => "bg-[url('#{image_url('cms/' + section['image'])}')]"}