fix to transition between hero and banner

dist/assets/HomePage-DTjGiEdz.js

@@ -1 +1 @@
-import{A as e,S as t,W as n,ct as r,m as i,p as a,r as o,s,u as c,x as l,z as u}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as d}from"./i18n-BxXwPz8H.js";import{n as f}from"./products-C8C_GS-z.js";import{a as p,i as m,o as h,r as g,t as _}from"./api-4Jnm40kQ.js";import{t as v}from"./Navbar-DKyzh9Gc.js";import{t as y}from"./Hero-BlnQ4ovQ.js";import{t as b}from"./CartDrawer-CbYC7UR_.js";var x={class:`flex flex-col bg-brand md:h-svh md:overflow-hidden`},S={class:`md:flex-1 md:flex md:items-center`},C={class:`italic font-light text-accent-soft`},w={class:`italic font-light text-brand-soft`},T=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview-2.png`,E=`kaiser-natron-pulver-250-g-grosspackung`,D=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview%20%281%29.png`,O=`kaiser-natron-pulver-250-g-grosspackung`,k={__name:`HomePage`,setup(k){let{t:A}=d(),j=h(),M=u(!1);async function N(){await _(E,1),M.value=!0}async function P(){await _(O,1),M.value=!0}async function F({productId:e,quantity:t}){await p(e,t)}async function I(e){await m(e)}async function L(e){await _(e.id,1),M.value=!0}return l(()=>{g()}),(l,u)=>(t(),c(o,null,[s(`div`,x,[i(v,{variant:`brand`,layout:`standard`,"cart-count":n(j).count,products:n(f),onCart:u[0]||=e=>M.value=!0,onSearch:L},null,8,[`cart-count`,`products`]),s(`div`,S,[i(y,{class:`w-full`,variant:`split`,tone:`brand`,eyebrow:n(A)(`ds.hero.eyebrow`),subheadline:n(A)(`ds.hero.sub`),image:T,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":n(A)(`ds.buttons.addToCart`),"secondary-label":n(A)(`ds.buttons.learnMore`),"secondary-href":`/anwendungen`,onCta:N},{headline:e(()=>[a(r(n(A)(`ds.hero.headline.a`))+` `,1),s(`em`,C,r(n(A)(`ds.hero.headline.em`)),1),a(` `+r(n(A)(`ds.hero.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`])]),u[3]||=s(`svg`,{"aria-hidden":`true`,class:`block w-full h-12 md:h-16 shrink-0`,viewBox:`0 0 1440 64`,preserveAspectRatio:`none`},[s(`path`,{d:`M0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,64 L0,64 Z`,fill:`var(--color-cream)`})],-1)]),i(y,{variant:`split`,tone:`cream`,reverse:``,eyebrow:n(A)(`home.banner.eyebrow`),subheadline:n(A)(`home.banner.sub`),image:D,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":n(A)(`ds.buttons.addToCart`),"secondary-label":n(A)(`ds.buttons.learnMore`),"secondary-href":`/anwendungen`,onCta:P},{headline:e(()=>[a(r(n(A)(`home.banner.headline.a`))+` `,1),s(`em`,w,r(n(A)(`home.banner.headline.em`)),1),a(` `+r(n(A)(`home.banner.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`]),u[4]||=s(`div`,{"aria-hidden":`true`,class:`md:hidden`,style:{height:`calc(100px + env(safe-area-inset-bottom))`}},null,-1),i(b,{modelValue:M.value,"onUpdate:modelValue":u[1]||=e=>M.value=e,items:n(j).items,subtotal:n(j).subtotal,count:n(j).count,onUpdateQuantity:F,onRemove:I,onCheckout:u[2]||=e=>M.value=!1},null,8,[`modelValue`,`items`,`subtotal`,`count`])],64))}};export{k as default};
+import{A as e,S as t,W as n,ct as r,m as i,p as a,r as o,s,u as c,x as l,z as u}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as d}from"./i18n-BxXwPz8H.js";import{n as f}from"./products-C8C_GS-z.js";import{a as p,i as m,o as h,r as g,t as _}from"./api-4Jnm40kQ.js";import{t as v}from"./Navbar-DKyzh9Gc.js";import{t as y}from"./Hero-BlnQ4ovQ.js";import{t as b}from"./CartDrawer-CbYC7UR_.js";var x={class:`flex flex-col bg-brand md:h-svh md:overflow-hidden`},S={class:`md:flex-1 md:flex md:items-center`},C={class:`italic font-light text-accent-soft`},w={class:`italic font-light text-brand-soft`},T=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview-2.png`,E=`kaiser-natron-pulver-250-g-grosspackung`,D=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview%20%281%29.png`,O=`kaiser-natron-pulver-250-g-grosspackung`,k={__name:`HomePage`,setup(k){let{t:A}=d(),j=h(),M=u(!1);async function N(){await _(E,1),M.value=!0}async function P(){await _(O,1),M.value=!0}async function F({productId:e,quantity:t}){await p(e,t)}async function I(e){await m(e)}async function L(e){await _(e.id,1),M.value=!0}return l(()=>{g()}),(l,u)=>(t(),c(o,null,[s(`div`,x,[i(v,{variant:`brand`,layout:`standard`,"cart-count":n(j).count,products:n(f),onCart:u[0]||=e=>M.value=!0,onSearch:L},null,8,[`cart-count`,`products`]),s(`div`,S,[i(y,{class:`w-full`,variant:`split`,tone:`brand`,eyebrow:n(A)(`ds.hero.eyebrow`),subheadline:n(A)(`ds.hero.sub`),image:T,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":n(A)(`ds.buttons.addToCart`),"secondary-label":n(A)(`ds.buttons.learnMore`),"secondary-href":`/anwendungen`,onCta:N},{headline:e(()=>[a(r(n(A)(`ds.hero.headline.a`))+` `,1),s(`em`,C,r(n(A)(`ds.hero.headline.em`)),1),a(` `+r(n(A)(`ds.hero.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`])]),u[3]||=s(`svg`,{"aria-hidden":`true`,class:`block w-full h-12 md:h-16 shrink-0`,viewBox:`0 0 1440 64`,preserveAspectRatio:`none`},[s(`rect`,{width:`1440`,height:`64`,fill:`var(--color-cream)`}),s(`path`,{d:`M0,0 L0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,0 Z`,fill:`var(--color-brand)`})],-1)]),i(y,{variant:`split`,tone:`cream`,reverse:``,eyebrow:n(A)(`home.banner.eyebrow`),subheadline:n(A)(`home.banner.sub`),image:D,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":n(A)(`ds.buttons.addToCart`),"secondary-label":n(A)(`ds.buttons.learnMore`),"secondary-href":`/anwendungen`,onCta:P},{headline:e(()=>[a(r(n(A)(`home.banner.headline.a`))+` `,1),s(`em`,w,r(n(A)(`home.banner.headline.em`)),1),a(` `+r(n(A)(`home.banner.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`]),u[4]||=s(`div`,{"aria-hidden":`true`,class:`md:hidden`,style:{height:`calc(100px + env(safe-area-inset-bottom))`}},null,-1),i(b,{modelValue:M.value,"onUpdate:modelValue":u[1]||=e=>M.value=e,items:n(j).items,subtotal:n(j).subtotal,count:n(j).count,onUpdateQuantity:F,onRemove:I,onCheckout:u[2]||=e=>M.value=!1},null,8,[`modelValue`,`items`,`subtotal`,`count`])],64))}};export{k as default};

dist/index.html

@@ -12,13 +12,13 @@
       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-BRTSWcA3.js"></script>
+    <script type="module" crossorigin src="/assets/index-DA_07Kie.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/_plugin-vue_export-helper-BOai-rQB.js">
     <link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-DgkFZzbt.js">
     <link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-ouKdkQwB.js">
     <link rel="modulepreload" crossorigin href="/assets/pinia-BLnSyg0Y.js">
     <link rel="modulepreload" crossorigin href="/assets/vue-router-BUTR8NmK.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-BTEwtQXE.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-CoEAdNNe.css">
   </head>
   <body>
     <div id="app"></div>

src/pages/HomePage.vue

@@ -98,20 +98,23 @@ onMounted(() => {
       </Hero>
     </div>
 
-    <!-- Wave divider from brand-green → cream. Fill uses the next
-         section's background so the curve reads as the bottom edge of
-         the green fold. `preserveAspectRatio="none"` lets the SVG
-         stretch across any viewport width while keeping a consistent
-         vertical amplitude. -->
+    <!-- Wave divider from brand-green → cream. The SVG is fully opaque:
+         a cream rect fills the whole viewBox so the SVG's bottom row is
+         solid cream (matches the banner below → no seam), and a green
+         path paints the top portion (matches the bg-brand parent above
+         → no seam). The earlier version left the top half transparent,
+         which caused browsers to anti-alias the path's top/bottom
+         edges against the parent and produce hairline artifacts. -->
     <svg
       aria-hidden="true"
       class="block w-full h-12 md:h-16 shrink-0"
       viewBox="0 0 1440 64"
       preserveAspectRatio="none"
     >
+      <rect width="1440" height="64" fill="var(--color-cream)" />
       <path
-        d="M0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,64 L0,64 Z"
-        fill="var(--color-cream)"
+        d="M0,0 L0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,0 Z"
+        fill="var(--color-brand)"
       />
     </svg>
   </div>