https://www.askstella.ai/assets/resources.blog.why-shade-matching-is-still-broken-online-Cbe8cvzH.js

1import{j as e,L as g}from"./index-BDkVqJ2D.js";import{P as B}from"./PageShell-BXtaZTGH.js";import{s as j}from"./FinalCTA-CdTCgdn6.js";import{C as T}from"./clock-BXOP9QT-.js";import{A as x}from"./ProductName-SSaFAxpN.js";import{A as n}from"./arrow-down-C9_XWKVJ.js";import{C as f}from"./circle-question-mark-0bH2GDZG.js";import{D as N}from"./droplet-BnCm8rUa.js";import{P as y}from"./palette-CBMT76pD.js";import{E as v}from"./eye-f-Ne0W4B.js";import{H as w}from"./heart-B9GIcyTh.js";import{S as k}from"./sparkles-CHo6AjSx.js";import{T as I}from"./target-CDd8qRoq.js";import{C as m}from"./circle-check-C713ddKr.js";import{Q as A}from"./quote-Bt4YaWbL.js";import{U as P}from"./user-DB6nRDDh.js";import"./x-Vd5kHsCg.js";import"./play-Bo2S0pJz.js";function te(){return e.jsxs(B,{children:[e.jsx("div",{className:"border-b border-border",children:e.jsxs("div",{className:"mx-auto max-w-7xl px-6 py-4 flex items-center gap-2 text-xs text-muted-foreground",children:[e.jsx(g,{to:"/resources/blog",className:"hover:text-foreground",children:"Blog"}),e.jsx("span",{children:"/"}),e.jsx("span",{className:"text-foreground",children:"Why Shade Matching Is Still Broken Online"})]})}),e.jsxs("section",{className:"relative overflow-hidden border-b border-border",children:[e.jsx("div",{className:"absolute inset-0 pointer-events-none",style:{background:"var(--gradient-hero)"}}),e.jsxs("div",{className:"relative mx-auto max-w-4xl px-6 pt-24 pb-16 text-center",children:[e.jsxs("div",{className:"flex items-center justify-center gap-3 mb-8",children:[e.jsx("span",{className:"text-xs uppercase tracking-[0.22em] text-accent px-3 py-1 rounded-full border border-accent/30",children:"Makeup"}),e.jsxs("span",{className:"text-xs uppercase tracking-[0.22em] text-muted-foreground inline-flex items-center gap-1.5",children:[e.jsx(T,{className:"w-3 h-3"})," 7 min read"]})]}),e.jsxs("h1",{className:"text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight text-balance leading-[1.05]",children:["Why Shade Matching Is ",e.jsx("span",{className:"text-gradient",children:"Still Broken Online."})]}),e.jsx("p",{className:"mt-6 text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed",children:"Most shade matching tools focu

1s on color. Beauty shoppers are actually looking for confidence."}),e.jsxs("div",{className:"mt-10 flex items-center justify-center gap-3 text-sm text-muted-foreground",children:[e.jsx("img",{src:j.url,alt:"Stella",className:"h-8 w-8 rounded-full object-contain bg-card border border-border p-1"}),e.jsxs("div",{className:"text-left",children:[e.jsx("div",{className:"font-medium text-foreground",children:"StellaAI"}),e.jsx("div",{className:"text-xs",children:"Beauty Commerce · June 2026"})]})]})]}),e.jsx("div",{className:"relative mx-auto max-w-6xl px-6 pb-20",children:e.jsx(F,{})})]}),e.jsxs("article",{className:"py-20",children:[e.jsxs("div",{className:"mx-auto max-w-3xl px-6 article-prose",children:[e.jsx(W,{children:"For more than a decade, beauty brands have tried to solve shade matching. New quizzes appeared. Foundation finders became common. Virtual try-on tools entered the market."}),e.jsx(s,{children:"And yet millions of beauty shoppers still hesitate before buying."}),e.jsx(s,{children:"Not because they cannot find products."}),e.jsx(s,{children:"Because they are not confident they are choosing the right one."}),e.jsx(i,{children:"Shade matching remains one of the biggest unsolved challenges in beauty ecommerce."}),e.jsx(o,{children:"The Real Problem Isn't Color"}),e.jsx(s,{children:"Most shade matching solutions focus on identifying a color."}),e.jsx(a,{items:["Light","Medium","Warm","Cool","Neutral"]}),e.jsx(s,{children:"But beauty purchases are rarely that simple."}),e.jsx(u,{children:"Customers don't just want a matching shade. They want confidence."}),e.jsx(s,{children:"Questions often include:"}),e.jsx(a,{items:["Will this look natural on me?","Does it fit my undertone?","Will it work with the rest of my makeup?","Is this the finish I prefer?","Will this make me look washed out?"]}),e.jsx(s,{children:"A color recommendation alone rarely answers those questions."}),e.jsx(o,{children:"Beauty Shoppers Buy Confidence"}),e.jsx(s,{children:"In physical stores, customers often receive reassurance from beauty advisors."}),e.jsx(s,{children:"They can:"}),e.jsx(a,{items:["Ask questions","Compare products","Test shades","Receive feedback"]}),e.jsx(s,{children:"Online, much of that confidence disappears."}),e.jsx(s,{children:"As a result, shoppers frequently:"}),e.jsx(a,{items:["Delay purchases","Abandon carts","Buy safer options","Avoid categories entirely"]}),e.jsx(s,{children:"This is especially true for:"}),e.jsx(a,{items:["Foundation","Concealer","Bronzer","Blush","Lip products"]}),e.jsx(s,{children:"The cost of uncertainty is significant."})]}),e.jsx(d,{caption:"Uncertainty — not color — is what stops the purchase. Confidence is the missing input.",children:e.jsx(M,{})}),e.jsxs("div",{className:"mx-auto max-w-3xl px-6 article-prose",children:[e.jsx(o,{children:"Why Traditional Shade Finders Fall Short"}),e.jsx(s,{children:"Many shade matching tools rely on a limited set of inputs."}),e.jsx(s,{children:"Examples:"}),e.jsx(a,{items:["Skin tone","Existing foundation","Manual selections"]}),e.jsx(s,{children:"These approaches can be helpful."}),e.jsx(s,{children:"But they often ignore important context."}),e.jsx(s,{children:"Questions like:"}),e.jsx(a,{items:["What undertone does the customer have?","Which colors suit them naturally?","What look are they trying to achieve?","What finish do they prefer?","Which products work together?"]}),e.jsx(s,{children:"Without context, recommendations become less accurate."})]}),e.jsx(d,{caption:"Traditional inputs narrow the search. Customer understanding sharpens the recommendation.",children:e.jsx(R,{})}),e.jsxs("div",{className:"mx-auto max-w-3xl px-6 article-prose",children:[e.jsx(o,{children:"Shade Matching Is Becoming Shade Understanding"}),e.jsx(s,{children:"The next generation of beauty experiences will move beyond simple shade matching."}),e.jsx(s,{children:"Instead of asking:"}),e.jsx(i,{children:'"Which foundation color should I buy?"'}),e.jsx(s,{children:"Brands will increasingly ask:"}),e.jsx(i,{children:'"Which products fit this customer?"'}),e.jsx(s,{children:"Shade becomes one signal among many."}),e.jsx(s,{children:"Other signals include:"}),e.jsx(a,{items:["Undertone","Color Type","Product Preferences","Desired Look","Coverage Preference","Finish Preference"]}),e.jsx(s,{children:"Together, these create a much more complete understanding."}),e.jsx(u,{children:"Shade matching is becoming shade understanding."})]}

1),e.jsx(d,{caption:"One color becomes many signals. Many signals become real understanding.",children:e.jsx(U,{})}),e.jsxs("div",{className:"mx-auto max-w-3xl px-6 article-prose",children:[e.jsx(o,{children:"The Rise Of Personalized Beauty Profiles"}),e.jsx(s,{children:"Beauty shoppers increasingly expect experiences that remember them."}),e.jsx(s,{children:"Once a brand understands:"}),e.jsx(a,{items:["Skin Tone","Undertone","Color Type","Preferences"]}),e.jsx(s,{children:"Future recommendations become easier."}),e.jsx(s,{children:"The customer no longer starts from zero."}),e.jsx(s,{children:"Every interaction becomes more relevant."}),e.jsx(s,{children:"Every recommendation becomes more personalized."}),e.jsx(o,{children:"Beyond Foundation"}),e.jsx(s,{children:"One of the biggest misconceptions in beauty ecommerce is that shade matching is only relevant for foundation."}),e.jsx(s,{children:"In reality, color influences:"}),e.jsx(a,{items:["Concealer","Blush","Bronzer","Lipstick","Eyeshadow","Color Correctors"]}),e.jsx(s,{children:"A shopper who finds the right foundation still needs guidance across the rest of their routine."}),e.jsx(s,{children:"This is where many traditional shade matching tools stop."}),e.jsx(s,{children:"And where the greatest opportunity begins."})]}),e.jsx(d,{caption:"Shade guidance shouldn't stop at foundation. It should follow the customer across the whole look.",children:e.jsx(L,{})}),e.jsxs("div",{className:"mx-auto max-w-3xl px-6 article-prose",children:[e.jsx(o,{children:"The Future Of Shade Matching"}),e.jsx(u,{children:"The future is not about matching products. It is about understanding people."}),e.jsx(s,{children:"The brands that win will not simply recommend colors."}),e.jsx(s,{children:"They will create confidence."}),e.jsx(s,{children:"They will understand customer preferences, appearance, goals, and context."}),e.jsx(s,{children:"And they will use that understanding to guide customers across the entire beauty journey."}),e.jsx(i,{children:"Because the best shade match is the one the customer feels confident wearing."}),e.jsx(o,{children:"Confidence Is The Real Goal"}),e.jsx(s,{children:"Beauty shoppers are not looking for algorithms."}),e.jsx(s,{children:"They are looking for reassurance."}),e.jsx(s,{children:"They want to know that the products they choose will work for them."}

1),e.jsx(s,{children:"The brands that provide that confidence will see more engagement, higher conversion rates, larger baskets, and stronger customer loyalty."}),e.jsx(s,{children:"And that is why shade matching remains one of the most important opportunities in beauty ecommerce today."}),e.jsxs("div",{className:"mt-16 pt-10 border-t border-border flex items-center gap-4",children:[e.jsx("img",{src:j.url,alt:"StellaAI",className:"h-12 w-12 rounded-full object-contain bg-card border border-border p-1.5"}),e.jsxs("div",{children:[e.jsx("div",{className:"font-medium",children:"StellaAI"}),e.jsx("div",{className:"text-sm text-muted-foreground",children:"Purpose-built AI for beauty commerce."})]})]})]})]}),e.jsx("section",{className:"py-20 border-t border-border bg-card/30",children:e.jsxs("div",{className:"mx-auto max-w-7xl px-6",children:[e.jsx("p",{className:"text-xs uppercase tracking-[0.2em] text-accent mb-4",children:"Related resources"}),e.jsx("h2",{className:"text-2xl sm:text-3xl font-semibold tracking-tight mb-10",children:"Keep exploring."}),e.jsxs("div",{className:"grid md:grid-cols-2 lg:grid-cols-4 gap-4",children:[e.jsx(l,{tag:"Article",cta:"Read article",to:"/resources/blog/why-beauty-needs-its-own-ai",title:"Why Beauty 

1Needs Its Own AI",summary:"Generic ecommerce AI was not built for beauty."}),e.jsx(l,{tag:"Article",cta:"Read article",to:"/resources/blog/the-biggest-conversion-killer-in-beauty-isnt-price",title:"The Biggest Conversion Killer in Beauty Isn't Price",summary:"Why uncertainty stops more sales than price ever will."}),e.jsx(l,{tag:"Article",cta:"Read article",to:"/resources/blog/the-beauty-data-advantage-why-zero-party-data-matters",title:"The Beauty Data Advantage",summary:"Why zero-party data is becoming beauty's biggest advantage."}),e.jsx(l,{tag:"Customer Story",cta:"Read story",to:"/resources/case-studies/kess-berlin",title:"KESS Berlin × Stella",summary:"Real-world shade matching and product pairing at scale."})]})]})}),e.jsxs("section",{className:"py-24 relative overflow-hidden",children:[e.jsx("div",{className:"absolute inset-0 pointer-events-none",style:{background:"var(--gradient-hero)"}}),e.jsxs("div",{className:"relative mx-auto max-w-3xl px-6 text-center",children:[e.jsxs("h2",{className:"text-4xl sm:text-5xl font-semibold tracking-tight text-balance",children:["Ready to help customers find ",e.jsx("span",{className:"text-gradient",children:"their perfect match?"})]}),e.jsx("p",{className:"mt-5 text-lg text-muted-foreground leading-relaxed",children:"See how Stella turns shade matching into shade understanding — and uncertainty into confident purchases."}),e.jsxs("div",{className:"mt-8 flex flex-wrap items-center justify-center gap-3",children:[e.jsx("a",{href:"https://meetings-eu1.hubspot.com/sandro-spiess",target:"_blank",rel:"noopener noreferrer",className:"inline-flex items-center h-12 px-7 rounded-full bg-foreground text-background font-medium hover:opacity-90 transition-all",children:"Book a Demo"}),e.jsxs(g,{to:"/resources/blog",className:"inline-flex items-center h-12 px-7 rounded-full border border-border bg-card hover:bg-secondary transition-colors font-medium",children:["More articles ",e.jsx(x,{className:"ml-2 w-4 h-4"})]})]})]})]})]})}function W({children:t}){return e.jsx("p",{className:"text-xl sm:text-2xl leading-[1.55] text-foreground/90 font-medium tracking-tight mb-10 text-balance",children:t})}function s({children:t}){return e.jsx("p",{className:"text-lg leading-[1.75] text-foreground/80 mb-6",children:t})}function o({children:t}){return e.jsx("h2",{className:"text-2xl sm:text-3xl font-semibold tracking-tight mt-16 mb-6 text-balance",children:t})}function a({items:t}){return e.jsx("ul",{className:"mb-8 space-y-3",children:t.map(r=>e.jsxs("li",{className:"flex items-start gap-3 text-lg leading-[1.6] text-foreground/80",children:[e.jsx("span",{className:"mt-[0.7em] w-1.5 h-1.5 rounded-full bg-accent shrink-0"}),e.jsx("span",{children:r})]},r))})}function i({children:t}){return e.jsx("blockquote",{className:"my-10 pl-6 border-l-2 border-accent text-xl sm:text-2xl font-medium tracking-tight leading-snug text-foreground text-balance",children:t})}function u({children:t}){return e.jsxs("aside",{className:"my-12 rounded-2xl border border-accent/30 bg-accent/5 p-8 relative overflow-hidden",children:[e.jsx(A,{className:"absolute top-4 right-4 w-12 h-12 text-accent/15"}),e.jsx("div",{className:"text-xl sm:text-2xl font-semibold tracking-tight leading-snug text-balance relative",children:t})]})}function d({children:t,caption:r}){return e.jsx("figure",{className:"my-16",children:e.jsxs("div",{className:"mx-auto max-w-5xl px-6",children:[e.jsx("div",{className:"rounded-3xl border border-border bg-card overflow-hidden elegant-shadow",children:t}),e.jsx("figcaption",{className:"mt-4 text-center text-sm text-muted-foreground italic max-w-2xl mx-auto",children:r})]})})}function l({tag:t,title:r,summary:c,to:h,cta:S}){const p=e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"text-xs uppercase tracking-[0.18em] text-accent",children:t}),e.jsx("h3",{className:"text-lg font-semibold mt-3 mb-2 leading-snug",children:r}),e.jsx("p",{className:"text-sm text-muted-foreground leading-relaxed mb-6",children:c}),e.jsxs("span",{className:`inline-flex items-center gap-2 text-sm ${h?"text-accent":"text-muted-foreground"}`,children:[S,e.jsx(x,{className:"w-3.5 h-3.5 group-hover:translate-x-0.5 transition-transform"})]})]}),b="group block rounded-2xl border border-border bg-background p-6 hover:border-accent/40 transition-all";return h?e.jsx(g,{to:h,className:b,children:p}):e.jsx("div",{className:b,children:p})}const C=["#f3d7bd","#e7bf9a","#d7a578","#bf8557","#a06b43","#8f5a35","#6c4327","#4d2f1c"];function F(){return e.jsx("div",{className:"rounded-3xl border border-border bg-card/60 backdrop-blur p-8 sm:p-12 elegant-shadow",children:e.jsxs("div",{className:"grid md:grid-cols-[1fr_auto_1fr] gap-8 items-stretch",children:[e.jsxs("div",{className:"rounded-2xl border border-dashed border-border bg-background/40 p-6",children:[e.jsx("div",{className:"text-[11px] uppercase tracking-[0.22em] text-muted-foreground mb-4",children:"Traditional Shade Finder"}),e.jsxs("div",{className:"rounded-lg border border-border bg-background/60 p-3 mb-3",children:[e.jsx("div",{className:"text-[10px] uppercase tracking-[0.18em] text-muted-foreground mb-2",children:"Shade strip"}),e.jsx("div",{className:"flex gap-1",children:C.map(t=>e.jsx("div",{className:"flex-1 aspect-square rounded-sm border border-border/40",style:{backgroundColor:t}},t))})]}

1),e.jsx(n,{className:"w-4 h-4 text-muted-foreground/50 mx-auto my-2"}),e.jsxs("div",{className:"rounded-lg border border-border bg-background/60 p-3 flex items-center gap-3",children:[e.jsx("div",{className:"w-10 h-10 rounded-md border border-border/40",style:{backgroundColor:"#bf8557"}}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"text-[10px] uppercase tracking-[0.18em] text-muted-foreground",children:"Result"}),e.jsx("div",{className:"text-sm font-medium",children:"Foundation match"})]})]}),e.jsx(n,{className:"w-4 h-4 text-muted-foreground/50 mx-auto my-2"}),e.jsxs("div",{className:"flex items-center gap-2 rounded-lg border border-border bg-background/60 px-3 py-2.5 text-sm text-muted-foreground",children:[e.jsx(f,{className:"w-4 h-4"}),'"Is this actually me?"']})]}),e.jsxs("div",{className:"hidden md:flex flex-col items-center justify-center",children:[e.jsx("div",{className:"w-px flex-1 bg-border"}),e.jsx("div",{className:"text-[10px] uppercase tracking-[0.22em] text-muted-foreground py-3",children:"vs"}),e.jsx("div",{className:"w-px flex-1 bg-border"})]}),e.jsxs("div",{className:"rounded-2xl border border-accent/30 bg-accent/5 p-6",children:[e.jsx("div",{className:"text-[11px] uppercase tracking-[0.22em] text-accent mb-4",children:"Modern Beauty Understanding"}),e.jsx("div",{className:"grid grid-cols-2 gap-2 mb-3",children:[{icon:N,label:"Skin Tone"},{icon:y,label:"Undertone"},{icon:v,label:"Color Type"},{icon:w,label:"Preferences"},{icon:k,label:"Desired Look"},{icon:I,label:"Finish"}].map(t=>e.jsxs("div",{className:"flex items-center gap-2 rounded-lg border border-accent/20 bg-background px-2.5 py-2 text-xs",children:[e.jsx(t.icon,{className:"w-3.5 h-3.5 text-accent shrink-0"}),e.jsx("span",{className:"truncate",children:t.label})]},t.label))}),e.jsx(n,{className:"w-4 h-4 text-accent/60 mx-auto my-2"}),e.jsxs("div",{className:"rounded-lg border border-accent/20 bg-background p-3",children:[e.jsx("div",{className:"text-[10px] uppercase tracking-[0.18em] text-accent mb-2",children:"Complete makeup recommendations"}),e.jsx("div",{className:"space-y-1.5",children:["Foundation · Warm Beige 3N","Concealer · Light Warm 2N","Blush · Soft Rose","Lip · Dusty Mauve"].map(t=>e.jsxs("div",{className:"flex items-center gap-2 text-xs text-foreground/80",children:[e.jsx(m,{className:"w-3 h-3 text-accent shrink-0"}),t]},t))})]}),e.jsx(n,{className:"w-4 h-4 text-accent/60 mx-auto my-2"}),e.jsxs("div",{className:"flex items-center gap-2 rounded-lg bg-foreground text-background px-3 py-2.5 text-sm font-medium",children:[e.jsx(m,{className:"w-4 h-4"}),"Confidence"]})]})]})})}function M(){const t=["Will this look natural?","Is this my undertone?","Will this work with my other products?","Is this too warm?","Is this too cool?"];return e.jsxs("div",{className:"p-10 sm:p-14",children:[e.jsx("div",{className:"text-[11px] uppercase tracking-[0.22em] text-accent mb-3 text-center",children:"Beauty Shoppers Buy Confidence"}),e.jsx("div",{className:"text-xl font-semibold tracking-tight mb-10 text-center text-balance",children:"Every unanswered question is a reason not to buy."}),e.jsxs("div",{className:"grid md:grid-cols-[1fr_auto_1fr] gap-8 items-center max-w-4xl mx-auto",children:[e.jsxs("div",{className:"relative rounded-2xl border border-border bg-background/60 p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-5",children:[e.jsx("div",{className:"w-10 h-10 rounded-full bg-secondary flex items-center justify-center",children:e.jsx(P,{className:"w-4 h-4 text-foreground/70"})}),e.jsxs("div",{children:[e.jsx("div",{className:"text-sm font-semibold",children:"Shopper"}),e.jsx("div",{className:"text-[11px] text-muted-foreground",children:"Comparing shades"})]})]}),e.jsx("div",{className:"flex gap-1 mb-5",children:C.slice(1,7).map(r=>e.jsx("div",{className:"flex-1 h-8 rounded-sm border border-border/40",style:{backgroundColor:r}},r))}),e.jsx("div",{className:"space-y-2",children:t.map(r=>e.jsxs("div",{className:"flex items-start gap-2 rounded-lg border border-border bg-background/40 px-3 py-2 text-xs text-foreground

1/80",children:[e.jsx(f,{className:"w-3.5 h-3.5 text-muted-foreground mt-0.5 shrink-0"}),e.jsx("span",{className:"italic",children:r})]},r))})]}),e.jsx(x,{className:"hidden md:block w-5 h-5 text-accent mx-auto"}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"rounded-2xl border border-accent/30 bg-accent/5 p-5",children:[e.jsx("div",{className:"text-[11px] uppercase tracking-[0.22em] text-accent mb-1",children:"Missing input"}),e.jsx("div",{className:"text-lg font-semibold",children:"Confidence"}),e.jsx("div",{className:"text-xs text-muted-foreground mt-1",children:"The signal no shade strip can provide."})]}),e.jsx(n,{className:"w-4 h-4 text-accent/60 mx-auto"}),e.jsxs("div",{className:"rounded-2xl border border-border bg-background/60 p-5",children:[e.jsx("div",{className:"text-[11px] uppercase tracking-[0.22em] text-muted-foreground mb-1",children:"Outcome"}),e.jsx("div",{className:"text-lg font-semibold",children:"Purchase"}),e.jsx("div",{className:"text-xs text-muted-foreground mt-1",children:"Only when the questions are answered."})]})]})]})]})}function R(){return e.jsx("div",{className:"p-10 sm:p-14",children:e.jsxs("div",{className:"grid md:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"rounded-2xl border border-dashed border-border bg-background/40 p-6",children:[e.jsx("div",{className:"text-[11px] uppercase tracking-[0.22em] text-muted-foreground mb-4",children:"Traditional Inputs"}),e.jsx("div",{className:"space-y-2 mb-5",children:["Existing foundation","Manual selection","Skin tone"].map(t=>e.jsx("div",{className:"rounded-lg border border-border bg-background/60 px-3 py-2.5 text-sm text-foreground/80",children:t},t))}),e.jsx(n,{className:"w-4 h-4 text-muted-foreground/50 mx-auto mb-3"}),e.jsxs("div",{className:"rounded-lg border border-border bg-background/60 p-3 flex items-center gap-3",children:[e.jsx("div",{className:"w-10 h-10 rounded-md border border-border/40",style:{backgroundColor:"#bf8557"}}),e.jsxs("div",{className:"text-sm",children:[e.jsx("div",{className:"font-medium",children:"Recommendation"}),e.jsx("div",{className:"text-xs text-muted-foreground",children:"Color-only output"})]})]})]}),e.jsxs("div",{className:"rounded-2xl border border-accent/30 bg-accent/5 p-6",children:[e.jsx("div",{className:"text-[11px] uppercase tracking-[0.22em] text-accent mb-4",children:"Customer Understanding"}),e.jsx("div",{className:"grid grid-cols-2 gap-2 mb-5",children:["Skin Tone","Undertone","Color Type","Desired Look","Finish Preference","Product Preferences"].map(t=>e.jsx("div",{className:"rounded-lg border border-accent/20 bg-background px-3 py-2 text-xs text-foreground/85",children:t},t))}),e.jsx(n,{className:"w-4 h-4 text-accent/60 mx-auto mb-3"}),e.jsxs("div",{className:"rounded-lg border border-accent/20 bg-background p-3",children:[e.jsx("div",{className:"text-[10px] uppercase tracking-[0.18em] text-accent mb-2",children:"Better recommendations"}),e.jsx("div",{className:"space-y-1.5",children:["Matched shade","Complementary products","Confident routine"].map(t=>e.jsxs("div",{className:"flex items-center gap-2 text-xs text-foreground/80",children:[e.jsx(m,{className:"w-3 h-3 text-accent shrink-0"}),t]},t))})]})]})]})})}function U(){const t=[{icon:N,label:"Shade"},{icon:y,label:"Undertone"},{icon:v,label:"Color Type"},{icon:w,label:"Preferences"}];return e.jsxs("div",{className:"p-10 sm:p-14",children:[e.jsx("div",{className:"text-[11px] uppercase tracking-[0.22em] text-accent mb-3 text-center",children:"Shade Matching Is Becoming Shade Understanding"}),e.jsx("div",{className:"text-xl font-semibold tracking-tight mb-10 text-center text-balance",children:"From a single color to a complete picture of the customer."}),e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-3 max-w-3xl mx-auto mb-6",children:t.map(r=>e.jsxs("div",{className:"rounded-2xl border border-border bg-background/60 p-5 flex flex-col items-center text-center",children:[e.jsx("div",{className:"w-10 h-10 rounded-xl bg-secondary text-foreground/70 flex items-center justify-center mb-3",children:e.jsx(r.icon,{className:"w-4 h-4"})}),e.jsx("div",{className:"text-sm font-semibold",children:r.label})]},r.label))}),e.jsx(n,{className:"w-4 h-4 text-accent/60 mx-auto mb-3"}),e.jsxs("div",{className:"max-w-md mx-auto rounded-2xl border border-accent/30 bg-accent/5 p-5 text-center",children:[e.jsx("div",{className:"text-[11px] uppercase tracking-[0.22em] text-accent mb-1",children:"Customer Understanding"}),e.jsx("div",{className:"text-lg font-semibold",children:"A profile, not a color"})]}),e.jsx(n,{className:"w-4 h-4 text-accent/60 mx-auto my-3"}),e.jsxs("div",{className:"max-w-md mx-auto flex items-center justify-center gap-2 rounded-2xl bg-foreground text-background px-5 py-3 text-sm font-medium",children:[e.jsx(m,{className:"w-4 h-4"}),"Confidence"]})]})}function L(){const t=[{label:"Foundation",swatch:"#cfa07a"},{label:"Concealer",swatch:"#dcb191"},{label:"Bronzer",swatch:"#955f37"},{label:"Blush",swatch:"#d6877e"},{label:"Lip",swatch:"#a5605e"}];return e.jsxs("div",{className:"p-10 sm:p-14",children:[e.jsx("div",{className:"text-[11px] uppercase tracking-[0.22em] text-accent mb-3 text-center",children:"Beyond Foundation"}),e.jsx("div",{className:"text-xl font-semibold tracking-tight mb-10 text-center text-balance",children:"Shade guidance should follow the customer across the entire routine."}

1),e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-5 gap-3 max-w-4xl mx-auto",children:t.map((r,c)=>e.jsxs("div",{className:"relative rounded-2xl border border-border bg-background/60 p-5 flex flex-col items-center text-center",children:[e.jsx("div",{className:"w-12 h-12 rounded-full border border-border/40 mb-3",style:{background:`radial-gradient(circle at 30% 30%, ${r.swatch}, color-mix(in oklab, ${r.swatch} 55%, black))`}}),e.jsxs("div",{className:"text-[10px] uppercase tracking-[0.18em] text-muted-foreground mb-1",children:["Step ",c+1]}),e.jsx("div",{className:"text-sm font-semibold",children:r.label}),c<t.length-1&&e.jsx(x,{className:"hidden sm:block absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/40"})]},r.label))}),e.jsx(n,{className:"w-4 h-4 text-accent/60 mx-auto my-6"}),e.jsxs("div",{className:"max-w-md mx-auto flex items-center justify-center gap-2 rounded-2xl border border-accent/30 bg-accent/5 px-5 py-3 text-sm font-semibold",children:[e.jsx(k,{className:"w-4 h-4 text-accent"}),"Complete look"]})]})}export{te as component};