fix(hero): center in first-fold and tighten section padding

Wrap the hero in an explicit flex-centering row on HomePage so vertical
centering doesn't depend on class merging, and swap the wrapper from
min-h-svh to h-svh so the layout is exactly one fold. Shrink the hero's
own py-16..lg:py-28 to py-10..lg:py-20 so the section fits comfortably
between navbar and viewport bottom.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

dist/assets/HeroPreview-YczpuEe2.js

@@ -1 +1 @@
-import{$ as e,L as t,k as n,m as r,o as i,p as a,s as o,tt as s,u as c,x as l}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{a as u}from"./vue-router-BrNWkU63.js";import{t as d}from"./i18n-Dy4LSDvO.js";import{t as f}from"./Navbar-CC9dNfRJ.js";import{t as p}from"./Hero-BaTOxf76.js";var m={class:`italic font-light text-brand-soft`},h=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview.png`,g={__name:`HeroPreview`,setup(g){let _=u(),{t:v}=d(),y=i(()=>[`split`,`centered`].includes(_.query.variant)?_.query.variant:`split`),b=i(()=>[`cream`,`paper`,`brand`].includes(_.query.tone)?_.query.tone:`cream`),x=i(()=>b.value===`brand`?`brand`:b.value);return(i,u)=>(l(),c(`div`,{class:e([`min-h-screen`,b.value===`brand`?`bg-brand`:`bg-surface`])},[r(f,{variant:x.value,"cart-count":0},null,8,[`variant`]),r(p,{variant:y.value,tone:b.value,eyebrow:t(v)(`ds.hero.eyebrow`),subheadline:t(v)(`ds.hero.sub`),image:h,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,badge:t(v)(`ds.badges.featured`),"cta-label":t(v)(`ds.buttons.addToCart`),"secondary-label":t(v)(`ds.buttons.learnMore`)},{headline:n(()=>[a(s(t(v)(`ds.hero.headline.a`))+` `,1),o(`em`,m,s(t(v)(`ds.hero.headline.em`)),1),a(` `+s(t(v)(`ds.hero.headline.b`)),1)]),_:1},8,[`variant`,`tone`,`eyebrow`,`subheadline`,`badge`,`cta-label`,`secondary-label`])],2))}};export{g as default};
+import{$ as e,L as t,k as n,m as r,o as i,p as a,s as o,tt as s,u as c,x as l}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{a as u}from"./vue-router-BrNWkU63.js";import{t as d}from"./i18n-Dy4LSDvO.js";import{t as f}from"./Navbar-CC9dNfRJ.js";import{t as p}from"./Hero-3SYsKgNT.js";var m={class:`italic font-light text-brand-soft`},h=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview.png`,g={__name:`HeroPreview`,setup(g){let _=u(),{t:v}=d(),y=i(()=>[`split`,`centered`].includes(_.query.variant)?_.query.variant:`split`),b=i(()=>[`cream`,`paper`,`brand`].includes(_.query.tone)?_.query.tone:`cream`),x=i(()=>b.value===`brand`?`brand`:b.value);return(i,u)=>(l(),c(`div`,{class:e([`min-h-screen`,b.value===`brand`?`bg-brand`:`bg-surface`])},[r(f,{variant:x.value,"cart-count":0},null,8,[`variant`]),r(p,{variant:y.value,tone:b.value,eyebrow:t(v)(`ds.hero.eyebrow`),subheadline:t(v)(`ds.hero.sub`),image:h,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,badge:t(v)(`ds.badges.featured`),"cta-label":t(v)(`ds.buttons.addToCart`),"secondary-label":t(v)(`ds.buttons.learnMore`)},{headline:n(()=>[a(s(t(v)(`ds.hero.headline.a`))+` `,1),o(`em`,m,s(t(v)(`ds.hero.headline.em`)),1),a(` `+s(t(v)(`ds.hero.headline.b`)),1)]),_:1},8,[`variant`,`tone`,`eyebrow`,`subheadline`,`badge`,`cta-label`,`secondary-label`])],2))}};export{g as default};

dist/assets/HomePage-CGmWfpjq.js

@@ -1 +0,0 @@
-import{L as e,k as t,m as n,p as r,s as i,tt as a,u as o,x as s}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{t as c}from"./i18n-Dy4LSDvO.js";import{t as l}from"./Navbar-CC9dNfRJ.js";import{t as u}from"./Hero-BaTOxf76.js";var d={class:`min-h-svh flex flex-col bg-brand`},f={class:`italic font-light text-accent-soft`},p=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview.png`,m={__name:`HomePage`,setup(m){let{t:h}=c();return(c,m)=>(s(),o(`div`,d,[n(l,{variant:`brand`,layout:`standard`,"cart-count":0}),n(u,{class:`flex-1 flex items-center`,variant:`split`,tone:`brand`,eyebrow:e(h)(`ds.hero.eyebrow`),subheadline:e(h)(`ds.hero.sub`),image:p,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":e(h)(`ds.buttons.addToCart`),"secondary-label":e(h)(`ds.buttons.learnMore`),"cta-href":`/shop`,"secondary-href":`/anwendungen`},{headline:t(()=>[r(a(e(h)(`ds.hero.headline.a`))+` `,1),i(`em`,f,a(e(h)(`ds.hero.headline.em`)),1),r(` `+a(e(h)(`ds.hero.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`])]))}};export{m as default};

dist/assets/HomePage-DzBcvkS0.js

@@ -0,0 +1 @@
+import{L as e,k as t,m as n,p as r,s as i,tt as a,u as o,x as s}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{t as c}from"./i18n-Dy4LSDvO.js";import{t as l}from"./Navbar-CC9dNfRJ.js";import{t as u}from"./Hero-3SYsKgNT.js";var d={class:`h-svh flex flex-col bg-brand overflow-hidden`},f={class:`flex-1 flex items-center`},p={class:`italic font-light text-accent-soft`},m=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview.png`,h={__name:`HomePage`,setup(h){let{t:g}=c();return(c,h)=>(s(),o(`div`,d,[n(l,{variant:`brand`,layout:`standard`,"cart-count":0}),i(`div`,f,[n(u,{class:`w-full`,variant:`split`,tone:`brand`,eyebrow:e(g)(`ds.hero.eyebrow`),subheadline:e(g)(`ds.hero.sub`),image:m,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":e(g)(`ds.buttons.addToCart`),"secondary-label":e(g)(`ds.buttons.learnMore`),"cta-href":`/shop`,"secondary-href":`/anwendungen`},{headline:t(()=>[r(a(e(g)(`ds.hero.headline.a`))+` `,1),i(`em`,p,a(e(g)(`ds.hero.headline.em`)),1),r(` `+a(e(g)(`ds.hero.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`])])]))}};export{h as default};

dist/index.html

@@ -12,11 +12,11 @@
       href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,200;1,9..144,400;1,9..144,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-o_SD51O2.js"></script>
+    <script type="module" crossorigin src="/assets/index-3-VcQdfM.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-CjdnoyKJ.js">
     <link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-DWTDSpp2.js">
     <link rel="modulepreload" crossorigin href="/assets/vue-router-BrNWkU63.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-B_ab4Fx7.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-CzTl4T4o.css">
   </head>
   <body>
     <div id="app"></div>

src/design-system/components/Hero.vue

@@ -88,7 +88,7 @@ const layout = computed(() => {
   <section
     :class="[
       'relative overflow-hidden',
-      'px-6 py-16 sm:px-8 sm:py-20 md:px-12 md:py-24 lg:px-16 lg:py-28',
+      'px-6 py-10 sm:px-8 sm:py-12 md:px-12 md:py-16 lg:px-16 lg:py-20',
       tone.surface,
       tone.text,
     ]"

src/pages/HomePage.vue

@@ -10,30 +10,33 @@ const imgPulver250 =
 </script>
 
 <template>
-  <!-- First-fold layout: hero fills the viewport below the navbar.
-       `svh` (small viewport height) keeps the hero inside the fold even
-       when mobile browser chrome is visible, so nothing pops off-screen. -->
-  <div class="min-h-svh flex flex-col bg-brand">
+  <!-- First-fold layout: wrapper is exactly viewport height (svh keeps mobile
+       browser chrome from pushing content off-screen). The centering row
+       below the navbar takes the remaining space and vertically centers the
+       hero, so the hero sits in the middle of (viewport - navbar). -->
+  <div class="h-svh flex flex-col bg-brand overflow-hidden">
     <Navbar variant="brand" layout="standard" :cart-count="0" />
 
-    <Hero
-      class="flex-1 flex items-center"
-      variant="split"
-      tone="brand"
-      :eyebrow="t('ds.hero.eyebrow')"
-      :subheadline="t('ds.hero.sub')"
-      :image="imgPulver250"
-      image-alt="Kaiser-Natron Pulver 250 g Großpackung"
-      :cta-label="t('ds.buttons.addToCart')"
-      :secondary-label="t('ds.buttons.learnMore')"
-      cta-href="/shop"
-      secondary-href="/anwendungen"
-    >
-      <template #headline>
-        {{ t('ds.hero.headline.a') }}
-        <em class="italic font-light text-accent-soft">{{ t('ds.hero.headline.em') }}</em>
-        {{ t('ds.hero.headline.b') }}
-      </template>
-    </Hero>
+    <div class="flex-1 flex items-center">
+      <Hero
+        class="w-full"
+        variant="split"
+        tone="brand"
+        :eyebrow="t('ds.hero.eyebrow')"
+        :subheadline="t('ds.hero.sub')"
+        :image="imgPulver250"
+        image-alt="Kaiser-Natron Pulver 250 g Großpackung"
+        :cta-label="t('ds.buttons.addToCart')"
+        :secondary-label="t('ds.buttons.learnMore')"
+        cta-href="/shop"
+        secondary-href="/anwendungen"
+      >
+        <template #headline>
+          {{ t('ds.hero.headline.a') }}
+          <em class="italic font-light text-accent-soft">{{ t('ds.hero.headline.em') }}</em>
+          {{ t('ds.hero.headline.b') }}
+        </template>
+      </Hero>
+    </div>
   </div>
 </template>