hasicicsalih/parfum_agsd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add hero redesign

Browse Source
This commit is contained in:
Ermin Zoronjic 2026-05-04 22:14:46 +02:00
parent 283a7a5214
commit 2f09b272bb
7 changed files with 343 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
parfum-shop/public/atmos-hero-wordmark.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="1386" height="344" viewBox="0 0 1386 344" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M121 343.5C96.6667 343.5 75.3333 337.833 57 326.5C39 314.833 25 299.167 15 279.5C5 259.833 9.23872e-07 238.167 9.23872e-07 214.5C9.23872e-07 190.5 5 168.833 15 149.5C25 129.833 39 114.333 57 103C75.3333 91.3333 96.6667 85.5 121 85.5C141.667 85.5 159.333 89.5 174 97.5C189 105.5 201.167 116.333 210.5 130V89.5H248V339.5H210.5V299.5C201.167 312.833 189 323.5 174 331.5C159.333 339.5 141.667 343.5 121 343.5ZM126 309.5C144.667 309.5 160.333 305.167 173 296.5C186 287.833 195.833 276.333 202.5 262C209.167 247.333 212.5 231.5 212.5 214.5C212.5 197.167 209.167 181.333 202.5 167C195.833 152.667 186 141.167 173 132.5C160.333 123.833 144.667 119.5 126 119.5C107.667 119.5 91.8333 123.833 78.5 132.5C65.1667 141.167 55 152.667 48 167C41 181.333 37.5 197.167 37.5 214.5C37.5 231.5 41 247.333 48 262C55 276.333 65.1667 287.833 78.5 296.5C91.8333 305.167 107.667 309.5 126 309.5ZM339.863 339.5V122.5H288.863V89.5H339.863V1.43051e-06H377.363V89.5H434.863V122.5H377.363V339.5H339.863ZM475.949 339.5V89.5H513.449V127.5C519.116 117.5 528.116 108 540.449 99C552.783 90 569.116 85.5 589.449 85.5C606.116 85.5 621.449 90 635.449 99C649.783 107.667 660.949 120 668.949 136C672.283 130.333 677.449 123.5 684.449 115.5C691.783 107.5 701.283 100.5 712.949 94.5C724.616 88.5 738.616 85.5 754.949 85.5C770.949 85.5 785.949 89.6667 799.949 98C813.949 106.333 825.283 118.333 833.949 134C842.949 149.333 847.449 167.5 847.449 188.5V339.5H809.949V189.5C809.949 168.5 803.949 151.667 791.949 139C780.283 126 765.616 119.5 747.949 119.5C729.616 119.5 713.783 125.667 700.449 138C687.116 150.333 680.449 167.667 680.449 190V339.5H642.949V189.5C642.949 168.5 636.949 151.667 624.949 139C613.283 126 598.616 119.5 580.949 119.5C562.616 119.5 546.783 125.667 533.449 138C520.116 150.333 513.449 167.667 513.449 190V339.5H475.949ZM1018.53 343.5C993.198 343.5 971.198 337.833 952.531 326.5C933.865 314.833 919.531 299.167 909.531 279.5C899.531 259.833 894.531 238.167 894.531 214.5C894.531 190.5 899.531 168.833 909.531 149.5C919.531 129.833 933.865 114.333 952.531 103C971.198 91.3333 993.198 85.5 1018.53 85.5C1044.2 85.5 1066.2 91.3333 1084.53 103C1103.2 114.333 1117.53 129.833 1127.53 149.5C1137.53 168.833 1142.53 190.5 1142.53 214.5C1142.53 238.167 1137.53 259.833 1127.53 279.5C1117.53 299.167 1103.2 314.833 1084.53 326.5C1066.2 337.833 1044.2 343.5 1018.53 343.5ZM1018.53 309.5C1037.2 309.5 1052.86 305.167 1065.53 296.5C1078.53 287.833 1088.36 276.333 1095.03 262C1101.7 247.333 1105.03 231.5 1105.03 214.5C1105.03 197.167 1101.7 181.333 1095.03 167C1088.36 152.667 1078.53 141.167 1065.53 132.5C1052.86 123.833 1037.2 119.5 1018.53 119.5C1000.2 119.5 984.531 123.833 971.531 132.5C958.531 141.167 948.698 152.667 942.031 167C935.365 181.333 932.031 197.167 932.031 214.5C932.031 231.5 935.365 247.333 942.031 262C948.698 276.333 958.531 287.833 971.531 296.5C984.531 305.167 1000.2 309.5 1018.53 309.5ZM1283.26 343.5C1260.26 343.5 1240.76 339.667 1224.76 332C1209.09 324.333 1197.09 314.333 1188.76 302C1180.42 289.333 1175.76 275.667 1174.76 261H1213.76C1214.76 269.333 1217.59 277.5 1222.26 285.5C1227.26 293.167 1234.76 299.5 1244.76 304.5C1254.76 309.167 1267.76 311.5 1283.76 311.5C1288.76 311.5 1294.92 311 1302.26 310C1309.59 309 1316.59 307.167 1323.26 304.5C1330.26 301.833 1336.09 297.833 1340.76 292.5C1345.42 287.167 1347.76 280.333 1347.76 272C1347.76 261.667 1343.76 253.667 1335.76 248C1327.76 242.333 1317.42 238 1304.76 235C1292.09 231.667 1278.59 228.5 1264.26 225.5C1250.26 222.5 1236.92 218.667 1224.26 214C1211.59 209 1201.26 202.167 1193.26 193.5C1185.26 184.5 1181.26 172.333 1181.26 157C1181.26 134.333 1189.42 116.833 1205.76 104.5C1222.42 91.8333 1246.92 85.5 1279.26 85.5C1301.26 85.5 1319.09 89 1332.76 96C1346.76 102.667 1357.26 111.333 1364.26 122C1371.59 132.667 1375.92 144.167 1377.26 156.5H1339.26C1337.92 145.833 1332.59 136.667 1323.26 129C1314.26 121.333 1299.26 117.5 1278.26 117.5C1238.59 117.5 1218.76 129.5 1218.76 153.5C1218.76 163.5 1222.76 171.167 1230.76 176.5C1238.76 181.833 1249.09 186.167 1261.76 189.5C1274.42 192.5 1287.76 195.5 1301.76 198.5C1316.09 201.167 1329.59 205 1342.26 210C1354.92 215 1365.26 222.167 1373.26 231.5C1381.26 240.5 1385.26 252.833 1385.26 268.5C1385.26 292.833 1375.92 311.5 1357.26 324.5C1338.92 337.167 1314.26 343.5 1283.26 343.5Z" fill="#EAEAEA"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
parfum-shop/public/blasse-seide-hero-product.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
parfum-shop/public/hero-section-beton-background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 MiB

56
parfum-shop/src/components/landing/HeroSection.jsx
View File

@ -6,45 +6,60 @@ function HeroSection({
heroImageRef,
setHeadlinePrimaryRef,
setHeadlineSecondaryRef,
setWordmarkRef,
setDescriptionRef,
setActionsRef,
setScrollRef,
overlayRef,
overlayTextRef,
}) {
return (
<header className="hero" id="home">
<div className="hero-media" ref={heroImageWrapRef}>
<section className="hero" id="home" aria-labelledby="hero-heading">
<div className="hero-material" ref={heroImageWrapRef} aria-hidden="true">
<div className="hero-material__texture" ref={heroImageRef} />
</div>
<div className="hero-wordmark" aria-hidden="true">
<div className="hero-wordmark__mask">
<img
src="/atmos-hero-image.png"
alt="Atmos perfume bottle in a material-led campaign scene"
className="hero-media__image"
ref={heroImageRef}
src="/atmos-hero-wordmark.svg"
alt=""
className="hero-wordmark__image"
ref={setWordmarkRef}
/>
</div>
</div>
<figure className="hero-product">
<div className="hero-product__inner" ref={setDescriptionRef}>
<img
src="/blasse-seide-hero-product.webp"
alt="Blasse Seide Parfumflakon auf einer dunklen Produktkarte"
className="hero-product__image"
loading="eager"
decoding="async"
fetchPriority="high"
/>
</div>
</figure>
<div className="hero-content">
<h1 className="hero-title">
<span className="hero-title-line">
<h1 className="hero-copy" id="hero-heading">
<span className="hero-copy-line">
<span className="reveal-line" ref={setHeadlinePrimaryRef}>
{"D\u00DCFTE ALS"}
{"Konzeptionelle D\u00FCfte"}
</span>
</span>
<span className="hero-title-line">
<span className="hero-copy-line">
<span className="reveal-line" ref={setHeadlineSecondaryRef}>
AUSDRUCK
{"zwischen Materialit\u00E4t,"}
</span>
</span>
<span className="hero-copy-line">
<span className="reveal-line">Raum und Charakter.</span>
</span>
</h1>
<p className="hero-text" ref={setDescriptionRef}>
{
"Konzeptionelle D\u00FCfte zwischen Materialit\u00E4t, Raum und Charakter."
}
</p>
<div className="hero-actions" ref={setActionsRef}>
<a href="#dufte" className="btn btn-primary">
{"Aktuelle D\u00FCfte"}
@ -55,12 +70,17 @@ function HeroSection({
</div>
</div>
<div className="hero-scroll" aria-hidden="true" ref={setScrollRef}>
<span className="hero-scroll__line" />
<span className="hero-scroll__label">SCROLL RUNTER</span>
</div>
<IntroOverlay
overlayRef={overlayRef}
overlayTextRef={overlayTextRef}
logoSrc="/atmos-logo-dark.svg"
/>
</header>
</section>
);
}

324
parfum-shop/src/pages/LandingPage.css
View File

@ -1,9 +1,6 @@
.page {
position: relative;
min-height: 100vh;
background:
radial-gradient(circle at 82% 12%, rgba(var(--theme-accent-rgb) / 0.13), transparent 28rem),
linear-gradient(180deg, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 88%, #000 12%));
color: var(--theme-text);
}
@ -27,112 +24,139 @@
.hero {
position: relative;
width: 100%;
min-height: clamp(680px, 100svh, 980px);
min-height: 720px;
min-height: max(720px, 100vh);
min-height: max(720px, 100dvh);
overflow: hidden;
display: grid;
align-items: center;
isolation: isolate;
background: #111;
background: var(--theme-bg);
transition: background-color var(--duration-med) var(--ease-out);
}
.hero::before {
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
z-index: 1;
pointer-events: none;
background: none;
}
.hero::before {
background:
radial-gradient(circle at 72% 42%, rgba(255, 255, 255, 0.1), transparent 24rem),
linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.42) 44%, rgba(0, 0, 0, 0.08) 100%),
linear-gradient(0deg, rgba(0, 0, 0, 0.44), transparent 46%);
.hero-material {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background: var(--theme-bg);
will-change: transform;
}
.hero-media {
.hero-material__texture {
position: absolute;
inset: 0;
z-index: 1;
background: var(--theme-bg);
will-change: transform;
}
.hero-media__image {
.hero-wordmark {
position: absolute;
top: clamp(3.4rem, 6vh, 5.5rem);
left: var(--page-x);
right: var(--page-x);
z-index: 2;
pointer-events: none;
user-select: none;
}
.hero-wordmark__mask {
overflow: hidden;
padding-top: 0.08rem;
}
.hero-wordmark__image {
display: block;
width: 100%;
height: auto;
opacity: 0.96;
will-change: transform, opacity, filter;
}
body.theme-light .hero-wordmark__image {
filter: invert(1);
opacity: 0.86;
}
.hero-product {
position: absolute;
top: clamp(22rem, 58vh, 44rem);
left: 50%;
z-index: 5;
width: clamp(19rem, 29vw, 38rem);
aspect-ratio: 1078 / 1284;
margin: 0;
display: grid;
place-items: center;
transform: translate(-50%, -50%);
will-change: transform;
}
.hero-product__inner {
position: relative;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: 60% center;
will-change: transform;
}
.hero .navbar--hero {
position: fixed;
top: clamp(0.75rem, 2.1vw, 1.4rem);
right: 0;
left: 0;
z-index: 998;
padding-top: 0;
}
.hero-content {
position: relative;
z-index: 6;
width: var(--container-wide);
margin: 0 auto;
padding: clamp(7rem, 14vh, 11rem) 0 clamp(3rem, 8vh, 6rem);
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--gap-md);
align-items: center;
}
.hero-title {
grid-column: 1 / span 7;
max-width: 10.8ch;
margin: 0;
font-size: clamp(3.2rem, 8.4vw, 8.8rem);
line-height: 0.9;
font-weight: 300;
letter-spacing: 0;
text-transform: uppercase;
color: #fff;
text-wrap: balance;
}
.hero-title-line {
display: block;
overflow: hidden;
padding-right: 0.12em;
padding-bottom: 0.08em;
margin-right: -0.12em;
margin-bottom: -0.08em;
}
.hero-title-line .reveal-line {
will-change: transform;
}
.hero-title-line + .hero-title-line {
margin-top: 0.02em;
}
.hero-text {
grid-column: 1 / span 5;
max-width: 31rem;
margin: 0;
font-size: var(--text-base);
line-height: 1.62;
color: rgba(255, 255, 255, 0.84);
place-items: center;
will-change: transform, opacity;
}
.hero-product__image {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.hero-content {
position: absolute;
left: var(--page-x);
bottom: clamp(7.5rem, 19vh, 17rem);
z-index: 6;
width: min(25rem, calc(50vw - var(--page-x) - 8rem));
color: var(--theme-text);
}
.hero-copy {
max-width: 25rem;
margin: 0;
font-size: clamp(1.65rem, 2.25vw, 2.25rem);
line-height: 1.08;
font-weight: 300;
letter-spacing: 0;
color: var(--theme-text);
}
.hero-copy-line {
display: block;
overflow: hidden;
padding-right: 0.08em;
padding-bottom: 0.03em;
margin-right: -0.08em;
margin-bottom: -0.03em;
}
.hero-copy-line .reveal-line {
display: inline-block;
will-change: transform;
}
.hero-actions {
grid-column: 1 / span 5;
display: flex;
flex-wrap: wrap;
gap: var(--gap-xs);
margin-top: clamp(0.2rem, 1vw, 0.7rem);
gap: clamp(0.75rem, 1.2vw, 1rem);
margin-top: clamp(1.25rem, 3.2vh, 1.75rem);
will-change: transform, opacity;
}
@ -173,10 +197,34 @@
}
.btn-secondary {
background: rgba(255, 255, 255, 0.13);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.24);
backdrop-filter: blur(12px);
background: color-mix(in srgb, var(--theme-surface) 72%, transparent);
color: var(--theme-text);
border: 1px solid var(--theme-border-strong);
backdrop-filter: blur(10px);
}
.hero-scroll {
position: absolute;
right: var(--page-x);
bottom: clamp(7.5rem, 19vh, 17rem);
z-index: 6;
width: min(28vw, 420px);
padding-top: 0.55rem;
border-top: 1px solid var(--theme-border-strong);
color: var(--theme-text-muted);
}
.hero-scroll__line {
display: none;
}
.hero-scroll__label {
display: block;
margin: 0;
font-size: var(--text-xs);
line-height: 1.4;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.intro-overlay {
@ -579,17 +627,20 @@
/* RESPONSIVE */
@media (max-width: 1180px) {
.hero-copy {
font-size: clamp(1.45rem, 2.35vw, 1.9rem);
}
.hero-product {
width: clamp(21rem, 45vw, 34rem);
}
.hero-content {
grid-template-columns: repeat(8, minmax(0, 1fr));
width: min(23rem, calc(50vw - var(--page-x) - 5rem));
}
.hero-title {
grid-column: 1 / span 6;
}
.hero-text,
.hero-actions {
grid-column: 1 / span 4;
.hero-scroll {
width: clamp(9rem, 16vw, 12rem);
}
.section-heading {
@ -621,45 +672,55 @@
@media (max-width: 760px) {
.hero {
min-height: clamp(620px, 91svh, 760px);
min-height: 720px;
min-height: max(720px, 100vh);
min-height: max(720px, 100dvh);
}
.hero::before {
background:
linear-gradient(90deg, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.28)),
linear-gradient(0deg, rgba(0, 0, 0, 0.62), transparent 48%);
.hero-material__texture {
inset: 0;
}
.hero-media__image {
object-position: 64% center;
.hero-wordmark {
top: clamp(5.8rem, 14svh, 7.5rem);
left: var(--page-x);
right: var(--page-x);
}
.hero-product {
top: clamp(20.75rem, 49svh, 25.5rem);
left: 44%;
width: min(72vw, 19rem);
transform: translate(-50%, -58%);
}
.hero-content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: var(--gap-sm);
padding-top: clamp(6.5rem, 18svh, 8.5rem);
padding-bottom: clamp(2.4rem, 8svh, 4rem);
left: clamp(1rem, 5vw, 1.5rem);
right: clamp(1rem, 5vw, 1.5rem);
bottom: clamp(2rem, 7svh, 4rem);
transform: none;
width: auto;
max-width: 27rem;
}
.hero-title {
max-width: 9.6ch;
font-size: clamp(3rem, 17.5vw, 5.1rem);
}
.hero-text {
max-width: 25rem;
font-size: var(--text-sm);
.hero-copy {
font-size: clamp(1.55rem, 7vw, 2rem);
line-height: 1.08;
}
.hero-actions {
width: min(100%, 22rem);
gap: 0.65rem;
margin-top: 1.1rem;
}
.hero-actions .btn {
width: 100%;
min-height: 44px;
padding-inline: 0.95rem;
font-size: 0.78rem;
}
.hero-scroll {
display: none;
}
.product-grid {
@ -693,8 +754,20 @@
}
@media (max-width: 430px) {
.hero-title {
max-width: 9.2ch;
.hero {
min-height: 700px;
min-height: max(700px, 100vh);
min-height: max(700px, 100dvh);
}
.hero-product {
top: clamp(20.25rem, 48svh, 24.5rem);
left: 43%;
width: min(74vw, 18.25rem);
}
.hero-copy {
font-size: clamp(1.42rem, 7vw, 1.72rem);
}
.section-heading h2,
@ -723,11 +796,14 @@
}
@media (prefers-reduced-motion: reduce) {
.hero-media,
.hero-title-line,
.hero-text,
.hero-material,
.hero-material__texture,
.hero-copy-line,
.hero-wordmark__image,
.hero-product,
.hero-product__inner,
.hero-product__image,
.hero-actions,
.hero-brand,
.intro-overlay,
.product-card,
.product-image,

133
parfum-shop/src/pages/LandingPage.jsx
View File

@ -25,6 +25,7 @@ function LandingPage() {
const overlayTextRef = useRef(null);
const heroImageWrapRef = useRef(null);
const heroImageRef = useRef(null);
const heroWordmarkRef = useRef(null);
const discoveryImageRef = useRef(null);
const headlineLineRefs = useRef([]);
const heroMetaRefs = useRef([]);
@ -56,6 +57,10 @@ function LandingPage() {
headlineLineRefs.current[1] = element;
}, []);
const setWordmarkRef = useCallback((element) => {
heroWordmarkRef.current = element;
}, []);
const setDescriptionRef = useCallback((element) => {
heroMetaRefs.current[0] = element;
}, []);
@ -64,23 +69,31 @@ function LandingPage() {
heroMetaRefs.current[1] = element;
}, []);
const setScrollRef = useCallback((element) => {
heroMetaRefs.current[2] = element;
}, []);
useLayoutEffect(() => {
const overlay = overlayRef.current;
const overlayText = overlayTextRef.current;
const heroImageWrap = heroImageWrapRef.current;
const heroWordmark = heroWordmarkRef.current;
const headlineLines = headlineLineRefs.current.filter(Boolean);
const heroMeta = heroMetaRefs.current.filter(Boolean);
const heroProduct = heroMetaRefs.current[0];
const heroMeta = heroMetaRefs.current.slice(1).filter(Boolean);
if (!overlay || !overlayText || !heroImageWrap || headlineLines.length === 0) {
if (
!overlay ||
!overlayText ||
!heroImageWrap ||
!heroWordmark ||
!heroProduct ||
headlineLines.length === 0
) {
return undefined;
}
const ctx = gsap.context(() => {
gsap.set(heroImageWrap, {
scale: 1.22,
transformOrigin: "center center",
});
gsap.set(headlineLines, {
yPercent: 115,
rotate: 2.2,
@ -88,13 +101,69 @@ function LandingPage() {
force3D: true,
});
gsap.set(heroWordmark, {
yPercent: 118,
autoAlpha: 0,
force3D: true,
});
gsap.set(heroProduct, {
scale: 0.82,
y: 54,
autoAlpha: 0,
transformOrigin: "50% 50%",
force3D: true,
});
gsap.set(heroMeta, {
y: 36,
y: 30,
autoAlpha: 0,
});
if (!shouldPlayIntro) {
gsap.set(heroImageWrap, { scale: 1 });
const revealHero = () =>
gsap
.timeline({ defaults: { ease: "power4.out" } })
.to(heroWordmark, {
yPercent: 0,
autoAlpha: 1,
duration: 1.18,
ease: "expo.out",
})
.to(
heroProduct,
{
scale: 1,
y: 0,
autoAlpha: 1,
duration: 1.42,
ease: "expo.out",
},
"<0.16"
)
.to(
headlineLines,
{
yPercent: 0,
rotate: 0,
duration: 1.08,
stagger: 0.08,
},
"<0.34"
)
.to(
heroMeta,
{
y: 0,
autoAlpha: 1,
duration: 0.86,
stagger: 0.1,
},
"<0.18"
);
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
gsap.set(heroWordmark, { yPercent: 0, autoAlpha: 1 });
gsap.set(heroProduct, { scale: 1, y: 0, autoAlpha: 1 });
gsap.set(headlineLines, { yPercent: 0, rotate: 0 });
gsap.set(heroMeta, { y: 0, autoAlpha: 1 });
gsap.set(overlay, {
@ -105,6 +174,16 @@ function LandingPage() {
return;
}
if (!shouldPlayIntro) {
gsap.set(overlay, {
yPercent: -100,
autoAlpha: 0,
display: "none",
});
revealHero();
return;
}
gsap.set(overlay, { yPercent: 0, autoAlpha: 1, display: "block" });
gsap.set(overlayText, { xPercent: 28, yPercent: 140, autoAlpha: 0 });
@ -133,37 +212,7 @@ function LandingPage() {
},
">"
)
.to(
heroImageWrap,
{
scale: 1,
duration: 1.6,
ease: "power2.out",
},
"<0.03"
)
.to(
headlineLines,
{
yPercent: 0,
rotate: 0,
duration: 1.18,
stagger: 0.1,
ease: "power4.out",
},
"<0.27"
)
.to(
heroMeta,
{
y: 0,
autoAlpha: 1,
duration: 1.02,
stagger: 0.12,
ease: "power4.out",
},
"<0.16"
)
.add(revealHero(), "<0.1")
.set(overlay, { display: "none" });
}, pageRef);
@ -385,8 +434,10 @@ function LandingPage() {
heroImageRef={heroImageRef}
setHeadlinePrimaryRef={setHeadlinePrimaryRef}
setHeadlineSecondaryRef={setHeadlineSecondaryRef}
setWordmarkRef={setWordmarkRef}
setDescriptionRef={setDescriptionRef}
setActionsRef={setActionsRef}
setScrollRef={setScrollRef}
overlayRef={overlayRef}
overlayTextRef={overlayTextRef}
/>

5
parfum-shop/src/style/navbar.css
View File

@ -218,6 +218,11 @@
.nav-theme-switch {
padding-inline: 0.45rem;
}
.navbar--hero .nav-pill {
width: fit-content;
max-width: calc(100vw - 1.5rem);
}
}
@media (max-width: 390px) {