Compare commits
4 Commits
product-ct
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 5278df56f6 | |||
| dd841dc6d6 | |||
| 5ed18bda75 | |||
| 7a92dcbe8e |
@ -14,6 +14,7 @@ import ScrollToTop from "./components/ScrollToTop";
|
||||
import ShopDrawer from "./components/ShopDrawer";
|
||||
import CartToast from "./components/CartToast";
|
||||
import { ProductTransitionProvider } from "./components/ProductTransition";
|
||||
import { PageTransitionProvider } from "./transitions/PageTransition";
|
||||
import useLenisSmoothScroll from "./hooks/useLenisSmoothScroll";
|
||||
import useScrollTextReveal from "./hooks/useScrollTextReveal";
|
||||
import useButtonInteractions from "./hooks/useButtonInteractions";
|
||||
@ -59,29 +60,31 @@ function App() {
|
||||
return (
|
||||
<ThemeProvider value={{ theme, isLight, toggleTheme }}>
|
||||
<ProductTransitionProvider>
|
||||
<ScrollToTop />
|
||||
<PageTransitionProvider>
|
||||
<ScrollToTop />
|
||||
|
||||
<a href="#main-content" className="skip-link">
|
||||
Zum Inhalt springen
|
||||
</a>
|
||||
<a href="#main-content" className="skip-link">
|
||||
Zum Inhalt springen
|
||||
</a>
|
||||
|
||||
<div ref={routeContentRef} data-route-content>
|
||||
<Routes>
|
||||
<Route path="/" element={<LandingPage />} />
|
||||
<Route path="/duft/:perfumeSlug" element={<ProductDetailPage />} />
|
||||
<Route path="/about" element={<AboutPage />} />
|
||||
<Route path="/impressum" element={<ImpressumPage />} />
|
||||
<Route path="/datenschutz" element={<DatenschutzPage />} />
|
||||
<Route path="/support" element={<SupportPage />} />
|
||||
<Route path="/discovery-set" element={<DiscoverySetPage />} />
|
||||
<Route path="/small-batch" element={<SmallBatchPage />} />
|
||||
</Routes>
|
||||
</div>
|
||||
<div ref={routeContentRef} data-route-content>
|
||||
<Routes>
|
||||
<Route path="/" element={<LandingPage />} />
|
||||
<Route path="/duft/:perfumeSlug" element={<ProductDetailPage />} />
|
||||
<Route path="/about" element={<AboutPage />} />
|
||||
<Route path="/impressum" element={<ImpressumPage />} />
|
||||
<Route path="/datenschutz" element={<DatenschutzPage />} />
|
||||
<Route path="/support" element={<SupportPage />} />
|
||||
<Route path="/discovery-set" element={<DiscoverySetPage />} />
|
||||
<Route path="/small-batch" element={<SmallBatchPage />} />
|
||||
</Routes>
|
||||
</div>
|
||||
|
||||
<ShopDrawer />
|
||||
<CartToast />
|
||||
<Footer flushTop={shouldFlushFooter} />
|
||||
{showSupportChatbot && <SupportChatbot />}
|
||||
<ShopDrawer />
|
||||
<CartToast />
|
||||
<Footer flushTop={shouldFlushFooter} />
|
||||
{showSupportChatbot && <SupportChatbot />}
|
||||
</PageTransitionProvider>
|
||||
</ProductTransitionProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@ -5,15 +5,6 @@
|
||||
background: var(--theme-bg);
|
||||
}
|
||||
|
||||
.detail-body-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.detail-sections {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.eyebrow,
|
||||
.label-title {
|
||||
font-size: var(--text-xs);
|
||||
@ -175,7 +166,7 @@
|
||||
.character-facts > div,
|
||||
.meta-card,
|
||||
.delivery-grid div {
|
||||
padding-top: 1rem;
|
||||
padding-top: var(--gap-sm);
|
||||
border-top: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
@ -186,7 +177,7 @@
|
||||
.comment-card span,
|
||||
.review-detail-row span {
|
||||
display: block;
|
||||
margin-bottom: 0.55rem;
|
||||
margin-bottom: var(--gap-2xs);
|
||||
color: var(--theme-text-muted);
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: 0.2em;
|
||||
@ -204,13 +195,24 @@
|
||||
}
|
||||
|
||||
.product-purchase-panel {
|
||||
position: relative;
|
||||
grid-column: 10 / -1;
|
||||
grid-row: 1;
|
||||
z-index: 4;
|
||||
justify-self: end;
|
||||
align-self: center;
|
||||
width: min(100%, 390px);
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(1rem, 1.8vw, 1.45rem);
|
||||
width: 100%;
|
||||
gap: var(--gap-sm);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.purchase-price-row {
|
||||
@ -342,7 +344,7 @@
|
||||
|
||||
.purchase-discovery-note strong {
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
margin-bottom: var(--gap-2xs);
|
||||
color: var(--theme-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -356,7 +358,7 @@
|
||||
}
|
||||
|
||||
.purchase-discovery-note .discount-preview {
|
||||
margin-top: 0.5rem;
|
||||
margin-top: var(--gap-2xs);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -389,7 +391,7 @@
|
||||
.reviews-heading h2,
|
||||
.recommendation-heading h2,
|
||||
.detail-bottom-cta h2 {
|
||||
margin: 0.85rem 0 0;
|
||||
margin: var(--gap-xs) 0 0;
|
||||
color: var(--theme-text);
|
||||
font-size: clamp(2.2rem, 5.6vw, 6rem);
|
||||
font-weight: 300;
|
||||
@ -403,7 +405,7 @@
|
||||
.reviews-heading p,
|
||||
.detail-bottom-cta p {
|
||||
max-width: var(--text-measure);
|
||||
margin: 1.25rem 0 0;
|
||||
margin: var(--gap-sm) 0 0;
|
||||
color: var(--theme-text-muted);
|
||||
font-size: var(--text-lg);
|
||||
line-height: 1.62;
|
||||
@ -551,7 +553,7 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--gap-sm);
|
||||
margin-top: clamp(1.6rem, 4vw, 4rem);
|
||||
margin-top: var(--gap-lg);
|
||||
}
|
||||
|
||||
.structure-phase-card,
|
||||
@ -718,7 +720,7 @@
|
||||
}
|
||||
|
||||
.comment-spotlight {
|
||||
margin-top: clamp(1.6rem, 4vw, 4rem);
|
||||
margin-top: var(--gap-lg);
|
||||
}
|
||||
|
||||
.comment-dots {
|
||||
@ -827,7 +829,7 @@
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: var(--gap-lg);
|
||||
align-items: end;
|
||||
margin-top: clamp(1rem, 3vw, 2rem);
|
||||
margin-top: var(--gap-lg);
|
||||
padding: clamp(1.5rem, 4vw, 3.5rem);
|
||||
overflow: hidden;
|
||||
background:
|
||||
@ -858,7 +860,7 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--gap-sm);
|
||||
margin-top: clamp(1.6rem, 4vw, 4rem);
|
||||
margin-top: var(--gap-lg);
|
||||
}
|
||||
|
||||
.recommendation-card {
|
||||
@ -911,42 +913,12 @@
|
||||
}
|
||||
|
||||
.recommendation-card p {
|
||||
margin: 0.55rem 0 0;
|
||||
margin: var(--gap-2xs) 0 0;
|
||||
color: var(--theme-text-muted);
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.detail-body-grid {
|
||||
grid-template-columns: 1fr clamp(280px, 24vw, 390px);
|
||||
grid-template-rows: auto 1fr;
|
||||
column-gap: var(--gap-lg);
|
||||
}
|
||||
|
||||
.product-hero {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.detail-sidebar {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
z-index: 4;
|
||||
padding-top: clamp(10rem, 24svh, 18rem);
|
||||
}
|
||||
|
||||
.detail-sections {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.product-purchase-panel {
|
||||
position: sticky;
|
||||
top: clamp(5rem, 8vw, 6.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.product-story-grid,
|
||||
.product-meta-section,
|
||||
@ -961,6 +933,10 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.detail-page {
|
||||
padding-bottom: 4.5rem;
|
||||
}
|
||||
|
||||
.product-hero {
|
||||
grid-template-columns: 1fr;
|
||||
align-content: start;
|
||||
@ -971,9 +947,13 @@
|
||||
padding-bottom: clamp(2.5rem, 5vw, 4rem);
|
||||
}
|
||||
|
||||
.product-media-column {
|
||||
.product-media-column,
|
||||
.product-purchase-panel {
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.product-media-column {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
@ -998,11 +978,11 @@
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
min-height: 0;
|
||||
height: clamp(18rem, 48svh, 32rem);
|
||||
height: clamp(22rem, 50svh, 34rem);
|
||||
}
|
||||
|
||||
.product-hero-image {
|
||||
width: min(74%, 460px);
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
@ -1045,9 +1025,13 @@
|
||||
}
|
||||
|
||||
.product-purchase-panel {
|
||||
justify-self: stretch;
|
||||
align-self: auto;
|
||||
width: min(100%, 46rem);
|
||||
max-width: 46rem;
|
||||
max-height: none;
|
||||
margin-inline: auto;
|
||||
overflow: visible;
|
||||
gap: var(--gap-sm);
|
||||
}
|
||||
}
|
||||
@ -1055,6 +1039,7 @@
|
||||
@media (max-width: 760px) {
|
||||
.detail-page {
|
||||
padding: 0;
|
||||
padding-bottom: 4.5rem;
|
||||
}
|
||||
|
||||
.product-hero {
|
||||
@ -1066,18 +1051,20 @@
|
||||
padding-bottom: clamp(1.5rem, 5vw, 2.5rem);
|
||||
}
|
||||
|
||||
.product-media-column {
|
||||
.product-media-column,
|
||||
.product-purchase-panel {
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.product-hero-visual {
|
||||
height: clamp(13rem, 32svh, 18rem);
|
||||
height: clamp(22rem, 50svh, 32rem);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.product-hero-image {
|
||||
width: min(68%, 280px);
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.character-facts,
|
||||
@ -1123,16 +1110,16 @@
|
||||
}
|
||||
|
||||
.hero-fact-grid {
|
||||
gap: 0.45rem;
|
||||
gap: var(--gap-2xs);
|
||||
}
|
||||
|
||||
.hero-fact-grid div {
|
||||
min-width: 0;
|
||||
padding-top: 0.45rem;
|
||||
padding-top: var(--gap-2xs);
|
||||
}
|
||||
|
||||
.hero-fact-grid span {
|
||||
margin-bottom: 0.25rem;
|
||||
margin-bottom: var(--gap-2xs);
|
||||
font-size: clamp(0.65rem, 2vw, var(--text-xs));
|
||||
letter-spacing: 0.09em;
|
||||
}
|
||||
@ -1144,8 +1131,7 @@
|
||||
}
|
||||
|
||||
.product-purchase-panel {
|
||||
min-width: 0;
|
||||
gap: 0.48rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.purchase-price-row {
|
||||
@ -1159,18 +1145,18 @@
|
||||
|
||||
.size-card {
|
||||
min-width: 0;
|
||||
min-height: 70px;
|
||||
gap: 0.2rem;
|
||||
padding: 0.6rem 0.7rem;
|
||||
min-height: 56px;
|
||||
gap: 0.15rem;
|
||||
padding: 0.5rem 0.6rem;
|
||||
}
|
||||
|
||||
.size-title {
|
||||
font-size: 0.66rem;
|
||||
font-size: 0.64rem;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
|
||||
.size-card strong {
|
||||
font-size: 0.98rem;
|
||||
font-size: 0.92rem;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@ -1186,6 +1172,10 @@
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.purchase-actions .restock-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.purchase-discovery-note,
|
||||
.reviews-heading,
|
||||
.recommendation-heading {
|
||||
@ -1249,66 +1239,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-purchase-cta {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.detail-body-grid {
|
||||
padding-bottom: clamp(4rem, 8vw, 5.5rem);
|
||||
}
|
||||
|
||||
.mobile-purchase-cta {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--gap-sm);
|
||||
padding: clamp(0.6rem, 1.8vw, 0.85rem) var(--page-x);
|
||||
background: color-mix(in srgb, var(--theme-bg) 88%, transparent);
|
||||
border-top: 1px solid var(--theme-border);
|
||||
backdrop-filter: blur(18px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(1.2);
|
||||
transform: translateY(100%);
|
||||
transition: transform var(--duration-med) var(--ease-out);
|
||||
}
|
||||
|
||||
.mobile-purchase-cta.is-visible {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.mobile-purchase-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mobile-purchase-info span {
|
||||
color: var(--theme-text-muted);
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mobile-purchase-info strong {
|
||||
color: var(--theme-text);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.mobile-purchase-cta .atmos-btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.is-transition-arriving .product-hero-image,
|
||||
.is-transition-arriving [data-product-transition-reveal] {
|
||||
|
||||
@ -3,6 +3,7 @@ import { Link, useParams } from "react-router";
|
||||
import perfumes from "../data/perfumes";
|
||||
import SharedNavbar from "./SharedNavbar";
|
||||
import PageMeta from "./seo/PageMeta";
|
||||
import StickyBuyBar from "./StickyBuyBar";
|
||||
import { useProductTransition } from "../transitions/ProductTransitionContext";
|
||||
import { useShop } from "../shop/useShop";
|
||||
import { formatChf } from "../shop/money";
|
||||
@ -73,6 +74,7 @@ function ProductPurchasePanel({
|
||||
discountPreviewCents,
|
||||
addToCart,
|
||||
subscribeToProduct,
|
||||
panelRef,
|
||||
}) {
|
||||
const selectedProductId = `${perfume.slug}-${selectedSize === "sample" ? "sample" : "full"}`;
|
||||
const selectedProductLabel = selectedSize === "sample" ? "Probe" : "50 ml Flakon";
|
||||
@ -92,7 +94,7 @@ function ProductPurchasePanel({
|
||||
];
|
||||
|
||||
return (
|
||||
<aside className="product-purchase-panel" data-product-transition-reveal>
|
||||
<aside className="product-purchase-panel" ref={panelRef} data-product-transition-reveal>
|
||||
<div className="purchase-price-row">
|
||||
<span>Preis</span>
|
||||
<strong>{perfume.prices[selectedSize]}</strong>
|
||||
@ -166,7 +168,18 @@ function ProductPurchasePanel({
|
||||
);
|
||||
}
|
||||
|
||||
function ProductHero({ perfume, selectedImage, setSelectedImage }) {
|
||||
function ProductHero({
|
||||
perfume,
|
||||
selectedImage,
|
||||
setSelectedImage,
|
||||
selectedSize,
|
||||
setSelectedSize,
|
||||
selectedPriceCents,
|
||||
discountPreviewCents,
|
||||
addToCart,
|
||||
subscribeToProduct,
|
||||
panelRef,
|
||||
}) {
|
||||
const galleryImages = [...new Set([perfume.image, ...(perfume.gallery || [])])].slice(0, 3);
|
||||
|
||||
return (
|
||||
@ -219,6 +232,16 @@ function ProductHero({ perfume, selectedImage, setSelectedImage }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProductPurchasePanel
|
||||
perfume={perfume}
|
||||
selectedSize={selectedSize}
|
||||
setSelectedSize={setSelectedSize}
|
||||
selectedPriceCents={selectedPriceCents}
|
||||
discountPreviewCents={discountPreviewCents}
|
||||
addToCart={addToCart}
|
||||
subscribeToProduct={subscribeToProduct}
|
||||
panelRef={panelRef}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -531,33 +554,6 @@ function ProductRecommendations({ currentSlug, startProductTransition }) {
|
||||
);
|
||||
}
|
||||
|
||||
function MobilePurchaseCTA({ perfume, selectedSize, addToCart, visible }) {
|
||||
const selectedProductId = `${perfume.slug}-${selectedSize === "sample" ? "sample" : "full"}`;
|
||||
const selectedProductLabel = selectedSize === "sample" ? "Probe" : "50 ml Flakon";
|
||||
|
||||
return (
|
||||
<div className={`mobile-purchase-cta ${visible ? "is-visible" : ""}`}>
|
||||
<div className="mobile-purchase-info">
|
||||
<span>{perfume.name}</span>
|
||||
<strong>{perfume.prices[selectedSize]}</strong>
|
||||
</div>
|
||||
<button
|
||||
className="atmos-btn atmos-btn--primary atmos-btn--uppercase"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
addToCart(
|
||||
selectedProductId,
|
||||
1,
|
||||
`${perfume.name} ${selectedProductLabel} wurde in den Warenkorb gelegt.`
|
||||
).catch(() => {})
|
||||
}
|
||||
>
|
||||
Kaufen
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProductDetailContent({ perfumeSlug }) {
|
||||
const { addToCart, subscribeToProduct, user } = useShop();
|
||||
const { activeSlug, phase, startProductTransition } = useProductTransition();
|
||||
@ -567,14 +563,13 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
[perfumeSlug]
|
||||
);
|
||||
|
||||
const purchasePanelRef = useRef(null);
|
||||
const [selectedImage, setSelectedImage] = useState(
|
||||
getImageForSize(perfume, "full")
|
||||
);
|
||||
const [selectedSize, setSelectedSize] = useState("full");
|
||||
const [showReviewDetails, setShowReviewDetails] = useState(false);
|
||||
const [commentPage, setCommentPage] = useState(0);
|
||||
const sidebarRef = useRef(null);
|
||||
const [isPanelVisible, setIsPanelVisible] = useState(true);
|
||||
const selectedPriceCents = priceToCents(perfume.prices[selectedSize]);
|
||||
const sampleCredit = user?.sampleCredits?.find(
|
||||
(credit) => credit.slug === perfume.slug && credit.status === "available"
|
||||
@ -631,17 +626,6 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
return () => window.clearInterval(interval);
|
||||
}, [safeCommentPages.length]);
|
||||
|
||||
useEffect(() => {
|
||||
const el = sidebarRef.current;
|
||||
if (!el) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => setIsPanelVisible(entry.isIntersecting),
|
||||
{ threshold: 0 }
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const productJsonLd = useMemo(() => buildProductJsonLd(perfume), [perfume]);
|
||||
|
||||
return (
|
||||
@ -659,51 +643,53 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
<SharedNavbar variant="hero" brandMode="back" />
|
||||
|
||||
<main id="main-content" className="shell">
|
||||
<div className="detail-body-grid">
|
||||
<ProductHero
|
||||
perfume={perfume}
|
||||
selectedImage={selectedImage}
|
||||
setSelectedImage={setSelectedImage}
|
||||
/>
|
||||
<ProductHero
|
||||
perfume={perfume}
|
||||
selectedImage={selectedImage}
|
||||
setSelectedImage={setSelectedImage}
|
||||
selectedSize={selectedSize}
|
||||
setSelectedSize={handleSizeSelection}
|
||||
selectedPriceCents={selectedPriceCents}
|
||||
discountPreviewCents={discountPreviewCents}
|
||||
addToCart={addToCart}
|
||||
subscribeToProduct={subscribeToProduct}
|
||||
panelRef={purchasePanelRef}
|
||||
/>
|
||||
|
||||
<div className="detail-sidebar" ref={sidebarRef}>
|
||||
<ProductPurchasePanel
|
||||
perfume={perfume}
|
||||
selectedSize={selectedSize}
|
||||
setSelectedSize={handleSizeSelection}
|
||||
selectedPriceCents={selectedPriceCents}
|
||||
discountPreviewCents={discountPreviewCents}
|
||||
addToCart={addToCart}
|
||||
subscribeToProduct={subscribeToProduct}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="detail-sections">
|
||||
<ProductStorySection perfume={perfume} />
|
||||
<ProductStructureSection perfume={perfume} />
|
||||
<ProductMetaSection perfume={perfume} />
|
||||
<ProductReviews
|
||||
reviewSummary={reviewSummary}
|
||||
safeCommentPages={safeCommentPages}
|
||||
commentPage={commentPage}
|
||||
setCommentPage={setCommentPage}
|
||||
showReviewDetails={showReviewDetails}
|
||||
setShowReviewDetails={setShowReviewDetails}
|
||||
/>
|
||||
<ProductTestingCTA perfume={perfume} addToCart={addToCart} />
|
||||
<ProductRecommendations
|
||||
currentSlug={perfume.slug}
|
||||
startProductTransition={startProductTransition}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ProductStorySection perfume={perfume} />
|
||||
<ProductStructureSection perfume={perfume} />
|
||||
<ProductMetaSection perfume={perfume} />
|
||||
<ProductReviews
|
||||
reviewSummary={reviewSummary}
|
||||
safeCommentPages={safeCommentPages}
|
||||
commentPage={commentPage}
|
||||
setCommentPage={setCommentPage}
|
||||
showReviewDetails={showReviewDetails}
|
||||
setShowReviewDetails={setShowReviewDetails}
|
||||
/>
|
||||
<ProductTestingCTA perfume={perfume} addToCart={addToCart} />
|
||||
<ProductRecommendations
|
||||
currentSlug={perfume.slug}
|
||||
startProductTransition={startProductTransition}
|
||||
/>
|
||||
</main>
|
||||
|
||||
<MobilePurchaseCTA
|
||||
perfume={perfume}
|
||||
<StickyBuyBar
|
||||
observeRef={purchasePanelRef}
|
||||
alwaysVisibleMobile
|
||||
sizes={[
|
||||
{ key: "full", label: "50 ml", price: perfume.prices.full },
|
||||
{ key: "sample", label: "Probe 2 ml", price: perfume.prices.sample },
|
||||
]}
|
||||
selectedSize={selectedSize}
|
||||
addToCart={addToCart}
|
||||
visible={!isPanelVisible}
|
||||
onSizeChange={handleSizeSelection}
|
||||
onBuy={() =>
|
||||
addToCart(
|
||||
`${perfume.slug}-${selectedSize === "sample" ? "sample" : "full"}`,
|
||||
1,
|
||||
`${perfume.name} ${selectedSize === "sample" ? "Probe" : "50 ml Flakon"} wurde in den Warenkorb gelegt.`
|
||||
).catch(() => {})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -34,12 +34,15 @@ const getStageRect = (sourceRect) => {
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
const sourceRatio = sourceRect.height / sourceRect.width || 1;
|
||||
const isMobile = viewportWidth <= 760;
|
||||
const maxWidthFraction = isMobile ? 0.85 : 0.56;
|
||||
const maxHeightFraction = isMobile ? 0.52 : 0.72;
|
||||
const maxAbsWidth = isMobile ? viewportWidth * maxWidthFraction : 620;
|
||||
const stageWidth = Math.min(
|
||||
Math.max(sourceRect.width * 1.16, 260),
|
||||
viewportWidth * 0.56,
|
||||
620
|
||||
maxAbsWidth
|
||||
);
|
||||
const stageHeight = Math.min(stageWidth * sourceRatio, viewportHeight * 0.72);
|
||||
const stageHeight = Math.min(stageWidth * sourceRatio, viewportHeight * maxHeightFraction);
|
||||
const normalizedWidth = stageHeight / sourceRatio;
|
||||
|
||||
return {
|
||||
|
||||
110
parfum-shop/src/components/StickyBuyBar.css
Normal file
110
parfum-shop/src/components/StickyBuyBar.css
Normal file
@ -0,0 +1,110 @@
|
||||
.sticky-buy-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.sticky-buy-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 900;
|
||||
display: block;
|
||||
padding: 0.55rem var(--page-x, 1rem);
|
||||
background: var(--theme-bg);
|
||||
border-top: 1px solid var(--theme-border);
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform var(--duration-med, 0.3s) var(--ease-out, ease-out),
|
||||
opacity var(--duration-med, 0.3s) var(--ease-out, ease-out);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sticky-buy-bar.is-visible {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.sticky-buy-bar__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--gap-sm, 0.75rem);
|
||||
max-width: 46rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.sticky-buy-bar__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sticky-buy-bar__label {
|
||||
color: var(--theme-text-muted);
|
||||
font-size: var(--text-xs, 0.72rem);
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sticky-buy-bar__price {
|
||||
color: var(--theme-text);
|
||||
font-size: clamp(0.92rem, 3vw, 1.1rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ---- segmented size toggle ---- */
|
||||
|
||||
.sticky-buy-bar__toggle {
|
||||
display: flex;
|
||||
border: 1px solid var(--theme-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sticky-buy-bar__tab {
|
||||
padding: 0.4rem 0.65rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--theme-text-muted);
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color var(--duration-med, 0.3s) var(--ease-out, ease-out),
|
||||
background-color var(--duration-med, 0.3s) var(--ease-out, ease-out);
|
||||
}
|
||||
|
||||
.sticky-buy-bar__tab + .sticky-buy-bar__tab {
|
||||
border-left: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
.sticky-buy-bar__tab.active {
|
||||
color: var(--theme-accent-contrast, #fff);
|
||||
background: var(--theme-accent);
|
||||
}
|
||||
|
||||
/* ---- buy button ---- */
|
||||
|
||||
.sticky-buy-bar .atmos-btn {
|
||||
flex-shrink: 0;
|
||||
min-width: 6.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.sticky-buy-bar.is-always-visible {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
71
parfum-shop/src/components/StickyBuyBar.jsx
Normal file
71
parfum-shop/src/components/StickyBuyBar.jsx
Normal file
@ -0,0 +1,71 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import "./StickyBuyBar.css";
|
||||
|
||||
function StickyBuyBar({ label, price, onBuy, observeRef, sizes, selectedSize, onSizeChange, alwaysVisibleMobile }) {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const sentinelRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const target = observeRef?.current ?? sentinelRef.current;
|
||||
if (!target) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => setVisible(!entry.isIntersecting),
|
||||
{ threshold: 0 }
|
||||
);
|
||||
|
||||
observer.observe(target);
|
||||
return () => observer.disconnect();
|
||||
}, [observeRef]);
|
||||
|
||||
const classes = [
|
||||
"sticky-buy-bar",
|
||||
visible && "is-visible",
|
||||
alwaysVisibleMobile && "is-always-visible",
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
const currentPrice = sizes
|
||||
? sizes.find((s) => s.key === selectedSize)?.price
|
||||
: price;
|
||||
|
||||
return (
|
||||
<>
|
||||
{!observeRef && <span ref={sentinelRef} aria-hidden="true" />}
|
||||
<div className={classes}>
|
||||
<div className="sticky-buy-bar__inner">
|
||||
{sizes ? (
|
||||
<div className="sticky-buy-bar__left">
|
||||
<div className="sticky-buy-bar__toggle">
|
||||
{sizes.map((s) => (
|
||||
<button
|
||||
key={s.key}
|
||||
type="button"
|
||||
className={`sticky-buy-bar__tab ${selectedSize === s.key ? "active" : ""}`}
|
||||
onClick={() => onSizeChange(s.key)}
|
||||
>
|
||||
{s.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<strong className="sticky-buy-bar__price">{currentPrice}</strong>
|
||||
</div>
|
||||
) : (
|
||||
<div className="sticky-buy-bar__left">
|
||||
<span className="sticky-buy-bar__label">{label}</span>
|
||||
<strong className="sticky-buy-bar__price">{currentPrice}</strong>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="atmos-btn atmos-btn--primary atmos-btn--uppercase atmos-btn--sm"
|
||||
onClick={onBuy}
|
||||
>
|
||||
Kaufen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default StickyBuyBar;
|
||||
@ -1,6 +1,7 @@
|
||||
import { useLayoutEffect } from "react";
|
||||
import { gsap } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import { isPageTransitionActive } from "../transitions/PageTransition";
|
||||
|
||||
let pluginsRegistered = false;
|
||||
|
||||
@ -65,6 +66,115 @@ const restoreRevealWords = (element) => {
|
||||
delete element.dataset.revealOriginalHtml;
|
||||
};
|
||||
|
||||
function collectRevealItems(scope) {
|
||||
const groups = gsap.utils.toArray("[data-reveal-group]", scope);
|
||||
return groups.map((group) => ({
|
||||
group,
|
||||
items: Array.from(group.querySelectorAll("[data-reveal]")).filter(
|
||||
(item) => item.closest("[data-reveal-group]") === group
|
||||
),
|
||||
}));
|
||||
}
|
||||
|
||||
function hideRevealItems(scope) {
|
||||
collectRevealItems(scope).forEach(({ items }) => {
|
||||
items.forEach((item) => {
|
||||
if (item.dataset.reveal === "lines") {
|
||||
gsap.set(item, { autoAlpha: 0 });
|
||||
} else {
|
||||
gsap.set(item, { y: 36, autoAlpha: 0, force3D: true });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setupReveals(scope) {
|
||||
const preparedElements = [];
|
||||
const ctx = gsap.context(() => {
|
||||
const entries = collectRevealItems(scope);
|
||||
|
||||
entries.forEach(({ group, items }) => {
|
||||
if (items.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
items.forEach((item) => {
|
||||
if (item.dataset.reveal === "lines") {
|
||||
gsap.set(item, { autoAlpha: 0 });
|
||||
return;
|
||||
}
|
||||
|
||||
gsap.set(item, {
|
||||
y: 36,
|
||||
autoAlpha: 0,
|
||||
force3D: true,
|
||||
});
|
||||
});
|
||||
|
||||
ScrollTrigger.create({
|
||||
trigger: group,
|
||||
start: group.dataset.revealStart || "top 78%",
|
||||
once: true,
|
||||
onEnter: () => {
|
||||
const timeline = gsap.timeline();
|
||||
|
||||
items.forEach((item, index) => {
|
||||
const position = index === 0 ? 0 : "<0.16";
|
||||
|
||||
if (item.dataset.reveal === "lines") {
|
||||
const words = createRevealWords(item);
|
||||
|
||||
if (words.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
preparedElements.push(item);
|
||||
gsap.set(item, { autoAlpha: 1 });
|
||||
gsap.set(words, {
|
||||
yPercent: 115,
|
||||
rotate: 2.2,
|
||||
transformOrigin: "0% 100%",
|
||||
force3D: true,
|
||||
});
|
||||
|
||||
timeline.to(
|
||||
words,
|
||||
{
|
||||
yPercent: 0,
|
||||
rotate: 0,
|
||||
duration: 1.08,
|
||||
stagger: 0.065,
|
||||
ease: "power4.out",
|
||||
clearProps: "transform",
|
||||
},
|
||||
position
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
timeline.to(
|
||||
item,
|
||||
{
|
||||
y: 0,
|
||||
autoAlpha: 1,
|
||||
duration: 1.02,
|
||||
ease: "power4.out",
|
||||
clearProps: "transform,opacity,visibility",
|
||||
},
|
||||
position
|
||||
);
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
ScrollTrigger.refresh();
|
||||
}, scope);
|
||||
|
||||
return { ctx, preparedElements };
|
||||
}
|
||||
|
||||
function useScrollTextReveal(scopeRef, dependencyKey = "") {
|
||||
useLayoutEffect(() => {
|
||||
const scope = scopeRef.current;
|
||||
@ -79,96 +189,27 @@ function useScrollTextReveal(scopeRef, dependencyKey = "") {
|
||||
|
||||
registerGsap();
|
||||
|
||||
const preparedElements = [];
|
||||
const ctx = gsap.context(() => {
|
||||
const groups = gsap.utils.toArray("[data-reveal-group]");
|
||||
let result = null;
|
||||
let handleReady = null;
|
||||
|
||||
groups.forEach((group) => {
|
||||
const items = Array.from(group.querySelectorAll("[data-reveal]")).filter(
|
||||
(item) => item.closest("[data-reveal-group]") === group
|
||||
);
|
||||
|
||||
if (items.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
items.forEach((item) => {
|
||||
if (item.dataset.reveal === "lines") {
|
||||
gsap.set(item, { autoAlpha: 0 });
|
||||
return;
|
||||
}
|
||||
|
||||
gsap.set(item, {
|
||||
y: 36,
|
||||
autoAlpha: 0,
|
||||
force3D: true,
|
||||
});
|
||||
});
|
||||
|
||||
ScrollTrigger.create({
|
||||
trigger: group,
|
||||
start: group.dataset.revealStart || "top 86%",
|
||||
once: true,
|
||||
onEnter: () => {
|
||||
const timeline = gsap.timeline();
|
||||
|
||||
items.forEach((item, index) => {
|
||||
const position = index === 0 ? 0 : "<0.16";
|
||||
|
||||
if (item.dataset.reveal === "lines") {
|
||||
const words = createRevealWords(item);
|
||||
|
||||
if (words.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
preparedElements.push(item);
|
||||
gsap.set(item, { autoAlpha: 1 });
|
||||
gsap.set(words, {
|
||||
yPercent: 115,
|
||||
rotate: 2.2,
|
||||
transformOrigin: "0% 100%",
|
||||
force3D: true,
|
||||
});
|
||||
|
||||
timeline.to(
|
||||
words,
|
||||
{
|
||||
yPercent: 0,
|
||||
rotate: 0,
|
||||
duration: 1.08,
|
||||
stagger: 0.065,
|
||||
ease: "power4.out",
|
||||
clearProps: "transform",
|
||||
},
|
||||
position
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
timeline.to(
|
||||
item,
|
||||
{
|
||||
y: 0,
|
||||
autoAlpha: 1,
|
||||
duration: 1.02,
|
||||
ease: "power4.out",
|
||||
clearProps: "transform,opacity,visibility",
|
||||
},
|
||||
position
|
||||
);
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
ScrollTrigger.refresh();
|
||||
}, scope);
|
||||
if (isPageTransitionActive()) {
|
||||
hideRevealItems(scope);
|
||||
handleReady = () => {
|
||||
result = setupReveals(scope);
|
||||
};
|
||||
window.addEventListener("page-transition-ready", handleReady, { once: true });
|
||||
} else {
|
||||
result = setupReveals(scope);
|
||||
}
|
||||
|
||||
return () => {
|
||||
ctx.revert();
|
||||
preparedElements.forEach((element) => restoreRevealWords(element));
|
||||
if (handleReady) {
|
||||
window.removeEventListener("page-transition-ready", handleReady);
|
||||
}
|
||||
if (result) {
|
||||
result.ctx.revert();
|
||||
result.preparedElements.forEach((element) => restoreRevealWords(element));
|
||||
}
|
||||
};
|
||||
}, [scopeRef, dependencyKey]);
|
||||
}
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
.about-section-head {
|
||||
display: grid;
|
||||
gap: var(--gap-2xs);
|
||||
margin-bottom: clamp(1.6rem, 4vw, 3rem);
|
||||
margin-bottom: var(--gap-lg);
|
||||
}
|
||||
|
||||
.about-section-head h2 {
|
||||
@ -107,7 +107,7 @@
|
||||
flex-direction: column;
|
||||
gap: var(--gap-xs);
|
||||
min-height: 14rem;
|
||||
padding: clamp(1.1rem, 2.4vw, 1.8rem);
|
||||
padding: clamp(1.1rem, 2.4vw, 1.6rem);
|
||||
border: 1px solid var(--theme-border);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
|
||||
|
||||
@ -55,7 +55,7 @@ function AboutPage() {
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="about-pillars" data-reveal-group data-reveal-start="top 86%">
|
||||
<section className="about-pillars" data-reveal-group data-reveal-start="top 78%">
|
||||
<header className="about-section-head">
|
||||
<span className="about-eyebrow" data-reveal="fade">
|
||||
Unser Ansatz
|
||||
|
||||
@ -98,9 +98,8 @@
|
||||
filter: saturate(0.92) contrast(1.04) var(--shadow-product);
|
||||
}
|
||||
|
||||
.discovery-panel-facts div,
|
||||
.discovery-benefit {
|
||||
padding-top: 1rem;
|
||||
.discovery-panel-facts div {
|
||||
padding-top: var(--gap-sm);
|
||||
border-top: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
@ -121,7 +120,7 @@
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(1rem, 1.8vw, 1.45rem);
|
||||
gap: var(--gap-sm);
|
||||
width: min(100%, 390px);
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
@ -150,7 +149,7 @@
|
||||
}
|
||||
|
||||
.discovery-panel-facts span {
|
||||
margin-bottom: 0.55rem;
|
||||
margin-bottom: var(--gap-2xs);
|
||||
}
|
||||
|
||||
.discovery-product-tags span {
|
||||
@ -180,8 +179,7 @@
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.discovery-story-grid,
|
||||
.discovery-comparison-section {
|
||||
.discovery-story-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
|
||||
gap: clamp(1.5rem, 5vw, 6rem);
|
||||
@ -190,8 +188,7 @@
|
||||
|
||||
.discovery-story-grid,
|
||||
.discovery-process-section,
|
||||
.discovery-included,
|
||||
.discovery-comparison-section {
|
||||
.discovery-included {
|
||||
position: relative;
|
||||
padding-block: clamp(4rem, 9vw, 9rem);
|
||||
}
|
||||
@ -202,8 +199,7 @@
|
||||
|
||||
.discovery-story-grid::before,
|
||||
.discovery-process-section::before,
|
||||
.discovery-included::before,
|
||||
.discovery-comparison-section::before {
|
||||
.discovery-included::before {
|
||||
position: absolute;
|
||||
top: clamp(1.2rem, 3vw, 2rem);
|
||||
right: 0;
|
||||
@ -229,10 +225,6 @@
|
||||
content: "02 / Düfte";
|
||||
}
|
||||
|
||||
.discovery-comparison-section::before {
|
||||
content: "04 / Entscheidung";
|
||||
}
|
||||
|
||||
.discovery-story-copy {
|
||||
align-self: center;
|
||||
max-width: 58rem;
|
||||
@ -242,7 +234,7 @@
|
||||
.discovery-section-heading h2,
|
||||
.discovery-section-intro h2,
|
||||
.discovery-final-cta h2 {
|
||||
margin: 0.85rem 0 0;
|
||||
margin: var(--gap-xs) 0 0;
|
||||
color: var(--theme-text);
|
||||
font-size: clamp(2.2rem, 5.6vw, 6rem);
|
||||
font-weight: 300;
|
||||
@ -256,23 +248,21 @@
|
||||
.discovery-section-heading p,
|
||||
.discovery-final-cta p {
|
||||
max-width: var(--text-measure);
|
||||
margin: 1.25rem 0 0;
|
||||
margin: var(--gap-sm) 0 0;
|
||||
color: var(--theme-text-muted);
|
||||
font-size: var(--text-lg);
|
||||
line-height: 1.62;
|
||||
}
|
||||
|
||||
.discovery-benefit-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
align-content: end;
|
||||
gap: clamp(0.9rem, 1.8vw, 1.25rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
min-height: clamp(360px, 42vw, 620px);
|
||||
padding: clamp(1.2rem, 3vw, 2.4rem);
|
||||
border: 1px solid var(--theme-border);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008)),
|
||||
color-mix(in srgb, var(--theme-bg) 88%, #000 12%);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.discovery-benefit-panel-head {
|
||||
@ -280,7 +270,8 @@
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
gap: var(--gap-sm);
|
||||
padding-bottom: clamp(1rem, 2vw, 1.35rem);
|
||||
padding-bottom: var(--gap-md);
|
||||
margin-bottom: var(--gap-md);
|
||||
border-bottom: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
@ -301,29 +292,20 @@
|
||||
}
|
||||
|
||||
.discovery-benefit {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: var(--gap-sm);
|
||||
align-items: start;
|
||||
padding-top: 1rem;
|
||||
padding-top: var(--gap-sm);
|
||||
border-top: 1px solid var(--theme-border);
|
||||
margin-top: var(--gap-sm);
|
||||
}
|
||||
|
||||
.discovery-comparison-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.55rem;
|
||||
height: 1.55rem;
|
||||
border: 1px solid rgba(var(--theme-accent-rgb) / 0.48);
|
||||
border-radius: 0;
|
||||
color: var(--theme-accent);
|
||||
font-size: 0.82rem;
|
||||
line-height: 1;
|
||||
.discovery-benefit:first-of-type {
|
||||
border-top: 0;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.discovery-benefit strong {
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
margin-bottom: var(--gap-2xs);
|
||||
color: var(--theme-text);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 400;
|
||||
@ -344,117 +326,143 @@
|
||||
|
||||
.discovery-section-heading {
|
||||
display: block;
|
||||
margin-bottom: clamp(1.8rem, 4vw, 3.8rem);
|
||||
margin-bottom: var(--gap-lg);
|
||||
}
|
||||
|
||||
.discovery-section-heading h2 {
|
||||
max-width: 11ch;
|
||||
}
|
||||
|
||||
/* Layout columns are provided by the global Grid12 system (see Grid.jsx). */
|
||||
.discovery-steps-grid {
|
||||
margin-top: clamp(1.6rem, 4vw, 4rem);
|
||||
.discovery-section-heading h2.discovery-included-title {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.discovery-step-card,
|
||||
.discovery-product-card,
|
||||
.discovery-comparison-card {
|
||||
border: 1px solid var(--theme-border);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
|
||||
var(--theme-surface-soft);
|
||||
.discovery-included-title .reveal-word-line {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.discovery-step-card {
|
||||
min-height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.discovery-steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--gap-md);
|
||||
padding: clamp(1rem, 2vw, 1.5rem);
|
||||
margin-top: var(--gap-lg);
|
||||
}
|
||||
|
||||
.discovery-step-number {
|
||||
.discovery-step {
|
||||
padding-top: var(--gap-sm);
|
||||
border-top: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
.discovery-step__number {
|
||||
display: block;
|
||||
margin-bottom: var(--gap-md);
|
||||
color: var(--theme-accent);
|
||||
font-size: var(--text-sm);
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
.discovery-step-card h3,
|
||||
.discovery-comparison-head h3 {
|
||||
margin: 0;
|
||||
.discovery-step__title {
|
||||
margin: 0 0 var(--gap-xs);
|
||||
color: var(--theme-text);
|
||||
font-size: var(--text-lg);
|
||||
font-size: clamp(1.1rem, 1.8vw, 1.35rem);
|
||||
font-weight: 400;
|
||||
line-height: 1.08;
|
||||
line-height: 1.1;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.discovery-step-card p,
|
||||
.discovery-comparison-card p {
|
||||
.discovery-step__text {
|
||||
margin: 0;
|
||||
max-width: 32ch;
|
||||
color: var(--theme-text-muted);
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.discovery-included-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
|
||||
gap: clamp(1.5rem, 5vw, 6rem);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.discovery-scroll-list {
|
||||
display: grid;
|
||||
align-self: center;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
padding-block: clamp(6rem, 24svh, 16rem);
|
||||
padding-inline: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.discovery-scroll-list-item {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.discovery-scroll-item {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(2.25rem, 0.12fr) minmax(0, 1fr);
|
||||
gap: var(--gap-sm);
|
||||
align-items: center;
|
||||
min-height: clamp(16rem, 44svh, 30rem);
|
||||
padding: clamp(1rem, 2vw, 1.55rem) 0;
|
||||
border-top: 1px solid var(--theme-border);
|
||||
background: transparent;
|
||||
transition: border-color var(--duration-med) var(--ease-out);
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.discovery-scroll-copy {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, auto) minmax(4rem, 1fr);
|
||||
gap: var(--gap-sm);
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.discovery-scroll-copy h3 {
|
||||
max-width: 16ch;
|
||||
margin: 0;
|
||||
color: var(--theme-text);
|
||||
font-size: clamp(1.45rem, 3vw, 3.15rem);
|
||||
font-weight: 300;
|
||||
line-height: 0.96;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
transition: color var(--duration-med) var(--ease-out);
|
||||
}
|
||||
|
||||
.discovery-scroll-line {
|
||||
height: 1px;
|
||||
min-width: clamp(4rem, 12vw, 12rem);
|
||||
background: var(--theme-border);
|
||||
transform: scaleX(0.62);
|
||||
transform-origin: left center;
|
||||
transition:
|
||||
background-color var(--duration-med) var(--ease-out),
|
||||
transform var(--duration-med) var(--ease-out);
|
||||
}
|
||||
|
||||
.discovery-scroll-item--active {
|
||||
border-color: var(--theme-border-strong);
|
||||
}
|
||||
|
||||
.discovery-scroll-item--active .discovery-scroll-line {
|
||||
background: var(--theme-border-strong);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.discovery-scroll-mobile-detail {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.discovery-scroll-mobile-detail p {
|
||||
margin: 0;
|
||||
color: var(--theme-text-muted);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
/* .discovery-products-grid columns provided by Grid12 (see Grid.jsx). */
|
||||
|
||||
.discovery-product-card {
|
||||
min-height: clamp(390px, 40vw, 560px);
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(14rem, 1fr) auto;
|
||||
gap: var(--gap-sm);
|
||||
padding: clamp(1rem, 2vw, 1.4rem);
|
||||
overflow: hidden;
|
||||
transition:
|
||||
transform var(--duration-med) var(--ease-out),
|
||||
border-color var(--duration-med) var(--ease-out),
|
||||
box-shadow var(--duration-med) var(--ease-out);
|
||||
}
|
||||
|
||||
.discovery-product-card:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(var(--theme-accent-rgb) / 0.45);
|
||||
box-shadow: var(--theme-shadow-soft);
|
||||
}
|
||||
|
||||
.discovery-product-image {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.discovery-product-image img {
|
||||
display: block;
|
||||
width: min(86%, 360px);
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
filter: var(--shadow-product-card);
|
||||
transition: transform var(--duration-slow) var(--ease-out);
|
||||
}
|
||||
|
||||
.discovery-product-card:hover .discovery-product-image img {
|
||||
transform: scale(1.04) rotate(-0.35deg);
|
||||
}
|
||||
|
||||
.discovery-product-copy h3 {
|
||||
max-width: 14ch;
|
||||
margin: 0 0 0.45rem;
|
||||
color: var(--theme-text);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 400;
|
||||
line-height: 1.08;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.discovery-product-copy p {
|
||||
margin: 0;
|
||||
color: var(--theme-text-muted);
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@ -465,34 +473,91 @@
|
||||
margin-top: var(--gap-sm);
|
||||
}
|
||||
|
||||
.discovery-comparison-grid {
|
||||
grid-column: 1 / -1;
|
||||
.discovery-scroll-mobile-tags {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.discovery-story-visual-panel {
|
||||
position: sticky;
|
||||
top: 50svh;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.discovery-comparison-card {
|
||||
min-height: 240px;
|
||||
padding: clamp(1.25rem, 3vw, 2.2rem);
|
||||
}
|
||||
|
||||
.discovery-comparison-card--highlight {
|
||||
border-color: rgba(var(--theme-accent-rgb) / 0.32);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(var(--theme-accent-rgb) / 0.12), transparent 62%),
|
||||
var(--theme-surface-soft);
|
||||
}
|
||||
|
||||
.discovery-comparison-head {
|
||||
width: 100%;
|
||||
min-height: clamp(360px, 42vw, 620px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--gap-sm);
|
||||
margin-bottom: var(--gap-sm);
|
||||
align-items: flex-end;
|
||||
padding: clamp(1.2rem, 3vw, 2.4rem);
|
||||
border: 1px solid var(--theme-border);
|
||||
overflow: hidden;
|
||||
background: var(--theme-surface-soft);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.discovery-comparison-icon {
|
||||
width: 2.3rem;
|
||||
height: 2.3rem;
|
||||
font-size: 1.2rem;
|
||||
.discovery-story-visual-panel::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.72)),
|
||||
linear-gradient(90deg, rgba(0, 0, 0, 0.24), transparent 45%);
|
||||
}
|
||||
|
||||
.discovery-story-visual-images {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.discovery-story-visual-images img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
opacity: 0;
|
||||
filter: saturate(0.92) contrast(1.04);
|
||||
transition: opacity var(--duration-slow) var(--ease-out);
|
||||
}
|
||||
|
||||
.discovery-story-visual-images img.is-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.discovery-story-visual-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.discovery-story-visual-content > span:first-child {
|
||||
display: block;
|
||||
margin-bottom: var(--gap-sm);
|
||||
color: rgba(255, 255, 255, 0.68);
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.discovery-story-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--gap-xs);
|
||||
}
|
||||
|
||||
.discovery-story-tags span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
padding: 0.55rem 0.85rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
color: #fff;
|
||||
font-size: var(--text-sm);
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.discovery-final-cta {
|
||||
@ -500,7 +565,7 @@
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: var(--gap-lg);
|
||||
align-items: end;
|
||||
margin-top: clamp(1rem, 3vw, 2rem);
|
||||
margin-top: var(--gap-lg);
|
||||
padding: clamp(1.5rem, 4vw, 3.5rem);
|
||||
overflow: hidden;
|
||||
background:
|
||||
@ -529,7 +594,6 @@
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.discovery-story-grid,
|
||||
.discovery-comparison-section,
|
||||
.discovery-final-cta {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@ -538,7 +602,11 @@
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
/* products & steps grids: handled by Grid12 md:6 col-spans */
|
||||
.discovery-story-visual-panel {
|
||||
min-height: clamp(340px, 44svh, 560px);
|
||||
}
|
||||
|
||||
/* steps grid: handled by Grid12 md:6 col-spans */
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
@ -588,11 +656,11 @@
|
||||
grid-row: auto;
|
||||
justify-items: center;
|
||||
min-height: 0;
|
||||
height: clamp(18rem, 48svh, 32rem);
|
||||
height: clamp(20rem, 50svh, 34rem);
|
||||
}
|
||||
|
||||
.discovery-hero-visual img {
|
||||
width: min(78%, 500px);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
@ -608,6 +676,10 @@
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.discovery-page {
|
||||
padding-bottom: 4.5rem;
|
||||
}
|
||||
|
||||
.discovery-hero {
|
||||
grid-template-columns: 1fr;
|
||||
gap: clamp(0.75rem, 2vw, 1rem);
|
||||
@ -616,12 +688,15 @@
|
||||
padding-bottom: clamp(1rem, 3vw, 1.5rem);
|
||||
}
|
||||
|
||||
.discovery-hero-stage,
|
||||
.discovery-order-panel {
|
||||
.discovery-hero-stage {
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.discovery-order-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.discovery-hero-copy {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@ -643,19 +718,19 @@
|
||||
}
|
||||
|
||||
.discovery-hero-visual {
|
||||
height: clamp(15rem, 36svh, 24rem);
|
||||
height: clamp(22rem, 52svh, 34rem);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.discovery-hero-visual img {
|
||||
width: min(82%, 420px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.discovery-panel-facts,
|
||||
.discovery-section-heading {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
/* comparison-, products- & steps-grid: Grid12 collapses to 1 col by default */
|
||||
/* steps grid: Grid12 collapses to 1 col by default */
|
||||
|
||||
.discovery-price-row {
|
||||
order: 1;
|
||||
@ -669,10 +744,13 @@
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.discovery-steps {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.discovery-story-grid::before,
|
||||
.discovery-process-section::before,
|
||||
.discovery-included::before,
|
||||
.discovery-comparison-section::before {
|
||||
.discovery-included::before {
|
||||
right: auto;
|
||||
left: 0;
|
||||
width: min(100%, 24rem);
|
||||
@ -687,15 +765,96 @@
|
||||
|
||||
.discovery-story-grid,
|
||||
.discovery-process-section,
|
||||
.discovery-included,
|
||||
.discovery-comparison-section {
|
||||
.discovery-included {
|
||||
padding-block: clamp(4rem, 14vw, 6rem);
|
||||
}
|
||||
|
||||
.discovery-included .discovery-section-heading {
|
||||
margin-bottom: var(--gap-lg);
|
||||
}
|
||||
|
||||
.discovery-section-heading h2.discovery-included-title {
|
||||
font-size: clamp(2.65rem, 12vw, 4.15rem);
|
||||
line-height: 0.92;
|
||||
}
|
||||
|
||||
.discovery-benefit {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.discovery-included-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.discovery-scroll-list {
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
.discovery-scroll-item {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--gap-xs);
|
||||
align-items: start;
|
||||
min-height: auto;
|
||||
padding: clamp(1.15rem, 5vw, 1.8rem) 0;
|
||||
}
|
||||
|
||||
.discovery-scroll-list-item:last-child .discovery-scroll-item {
|
||||
border-bottom: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
.discovery-scroll-copy {
|
||||
grid-template-columns: 1fr;
|
||||
gap: clamp(0.45rem, 1.8vw, 0.7rem);
|
||||
}
|
||||
|
||||
.discovery-scroll-item .discovery-product-index {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.discovery-scroll-copy h3 {
|
||||
max-width: 13ch;
|
||||
font-size: clamp(1.45rem, 7vw, 2.35rem);
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.discovery-scroll-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.discovery-scroll-mobile-detail {
|
||||
display: grid;
|
||||
gap: var(--gap-2xs);
|
||||
max-width: var(--text-measure);
|
||||
margin-top: var(--gap-2xs);
|
||||
}
|
||||
|
||||
.discovery-scroll-mobile-detail p {
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.52;
|
||||
}
|
||||
|
||||
.discovery-scroll-mobile-tags {
|
||||
display: flex;
|
||||
gap: var(--gap-2xs);
|
||||
margin-top: var(--gap-2xs);
|
||||
}
|
||||
|
||||
.discovery-story-visual-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.discovery-scroll-item {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.discovery-scroll-item--active {
|
||||
border-color: var(--theme-border);
|
||||
}
|
||||
|
||||
.discovery-scroll-item--active .discovery-scroll-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.discovery-final-actions {
|
||||
justify-content: stretch;
|
||||
min-width: 0;
|
||||
@ -719,17 +878,46 @@
|
||||
.discovery-price-row {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
gap: var(--gap-2xs);
|
||||
}
|
||||
|
||||
.discovery-product-card {
|
||||
min-height: 360px;
|
||||
.discovery-section-heading h2.discovery-included-title {
|
||||
font-size: clamp(2.35rem, 13vw, 3.35rem);
|
||||
}
|
||||
|
||||
.discovery-scroll-item {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.discovery-product-tags span {
|
||||
min-height: 30px;
|
||||
padding: 0.4rem 0.58rem;
|
||||
color: var(--theme-text-muted);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.discovery-product-card,
|
||||
.discovery-product-image img {
|
||||
.discovery-scroll-item,
|
||||
.discovery-scroll-copy h3,
|
||||
.discovery-scroll-line,
|
||||
.discovery-scroll-mobile-detail p,
|
||||
.discovery-product-tags span,
|
||||
.discovery-story-visual-images img {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.discovery-scroll-item {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.discovery-scroll-item--active {
|
||||
border-color: var(--theme-border);
|
||||
}
|
||||
|
||||
.discovery-scroll-item--active .discovery-scroll-line {
|
||||
background: var(--theme-border);
|
||||
transform: scaleX(0.62);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,16 @@
|
||||
import { useCallback, useLayoutEffect, useRef, useState } from "react";
|
||||
import { gsap } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import perfumes from "../data/perfumes";
|
||||
import SharedNavbar from "../components/SharedNavbar";
|
||||
import Grid, { Col } from "../components/layout/Grid";
|
||||
import PageMeta from "../components/seo/PageMeta";
|
||||
import StickyBuyBar from "../components/StickyBuyBar";
|
||||
import { useShop } from "../shop/useShop";
|
||||
import "./DiscoverySetPage.css";
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const DISCOVERY_SET_IMAGE = "/atmos-discovery-set-thumbnail.webp";
|
||||
|
||||
const discoveryPanelFacts = [
|
||||
@ -49,23 +55,9 @@ const discoverySteps = [
|
||||
},
|
||||
];
|
||||
|
||||
const discoveryComparison = [
|
||||
{
|
||||
icon: "×",
|
||||
title: "Traditioneller Weg",
|
||||
text: "CHF 180+ für einen 50-ml-Flakon ausgeben, ohne zu wissen, ob er wirklich passt. Risiko: Fehlkauf, Überforderung oder ein Duft, der im Regal bleibt.",
|
||||
},
|
||||
{
|
||||
icon: "✓",
|
||||
title: "Discovery Set Weg",
|
||||
text: "CHF 48 investieren, alle Düfte testen, bewusst entscheiden. Die erste Investition wird einmalig angerechnet – der Einstieg bleibt kontrolliert, nachvollziehbar und fair.",
|
||||
highlight: true,
|
||||
},
|
||||
];
|
||||
|
||||
function DiscoveryOrderPanel({ onBuy }) {
|
||||
function DiscoveryOrderPanel({ onBuy, panelRef }) {
|
||||
return (
|
||||
<aside className="discovery-order-panel">
|
||||
<aside className="discovery-order-panel" ref={panelRef}>
|
||||
<div className="discovery-price-row">
|
||||
<span>Preis</span>
|
||||
<strong>CHF 48.–</strong>
|
||||
@ -94,11 +86,11 @@ function DiscoveryOrderPanel({ onBuy }) {
|
||||
);
|
||||
}
|
||||
|
||||
function DiscoveryHero({ onBuy }) {
|
||||
function DiscoveryHero({ onBuy, panelRef }) {
|
||||
return (
|
||||
<section className="discovery-hero">
|
||||
<section className="discovery-hero" data-reveal-group data-reveal-start="top 90%">
|
||||
<div className="discovery-hero-stage">
|
||||
<div className="discovery-hero-copy">
|
||||
<div className="discovery-hero-copy" data-reveal="fade">
|
||||
<span className="discovery-kicker">Discovery Set</span>
|
||||
<h1>Der Einstieg</h1>
|
||||
|
||||
@ -109,7 +101,7 @@ function DiscoveryHero({ onBuy }) {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<figure className="discovery-hero-visual">
|
||||
<figure className="discovery-hero-visual" data-reveal="fade">
|
||||
<img
|
||||
src={DISCOVERY_SET_IMAGE}
|
||||
alt="Atmos Discovery Set"
|
||||
@ -119,7 +111,7 @@ function DiscoveryHero({ onBuy }) {
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<DiscoveryOrderPanel onBuy={onBuy} />
|
||||
<DiscoveryOrderPanel onBuy={onBuy} panelRef={panelRef} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -168,101 +160,188 @@ function DiscoveryProcessSection() {
|
||||
<h2 data-reveal="lines">So funktioniert's</h2>
|
||||
</div>
|
||||
|
||||
<Grid gap="sm" className="discovery-steps-grid">
|
||||
<div className="discovery-steps">
|
||||
{discoverySteps.map((step) => (
|
||||
<Col
|
||||
key={step.number}
|
||||
as="article"
|
||||
span={12}
|
||||
md={6}
|
||||
lg={4}
|
||||
className="discovery-step-card"
|
||||
data-reveal="fade"
|
||||
>
|
||||
<span className="discovery-step-number">{step.number}</span>
|
||||
<h3>{step.title}</h3>
|
||||
<p>{step.text}</p>
|
||||
</Col>
|
||||
<article key={step.number} className="discovery-step" data-reveal="fade">
|
||||
<span className="discovery-step__number">{step.number}</span>
|
||||
<h3 className="discovery-step__title">{step.title}</h3>
|
||||
<p className="discovery-step__text">{step.text}</p>
|
||||
</article>
|
||||
))}
|
||||
</Grid>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function DiscoveryIncludedSection() {
|
||||
const sectionRef = useRef(null);
|
||||
const itemRefs = useRef([]);
|
||||
const activeIndexRef = useRef(0);
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
|
||||
const setItemRef = useCallback((element, index) => {
|
||||
itemRefs.current[index] = element;
|
||||
}, []);
|
||||
|
||||
const activateItem = useCallback((index) => {
|
||||
if (activeIndexRef.current === index) {
|
||||
return;
|
||||
}
|
||||
|
||||
activeIndexRef.current = index;
|
||||
setActiveIndex(index);
|
||||
|
||||
const items = itemRefs.current.filter(Boolean);
|
||||
|
||||
gsap.killTweensOf(items);
|
||||
gsap.to(items, {
|
||||
opacity: (itemIndex) => (itemIndex === index ? 1 : 0.64),
|
||||
duration: 0.36,
|
||||
ease: "power3.out",
|
||||
overwrite: "auto",
|
||||
});
|
||||
}, []);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const section = sectionRef.current;
|
||||
const items = itemRefs.current.filter(Boolean);
|
||||
|
||||
if (!section || items.length === 0 || typeof window === "undefined") {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const prefersReducedMotion = window.matchMedia(
|
||||
"(prefers-reduced-motion: reduce)"
|
||||
).matches;
|
||||
|
||||
if (prefersReducedMotion) {
|
||||
activeIndexRef.current = 0;
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.set(items, {
|
||||
opacity: (index) => (index === activeIndexRef.current ? 1 : 0.64),
|
||||
force3D: true,
|
||||
});
|
||||
|
||||
const updateActiveItem = () => {
|
||||
const viewportCenter = window.innerHeight / 2;
|
||||
let closestIndex = 0;
|
||||
let closestDistance = Number.POSITIVE_INFINITY;
|
||||
|
||||
items.forEach((item, index) => {
|
||||
const rect = item.getBoundingClientRect();
|
||||
const itemCenter = rect.top + rect.height / 2;
|
||||
const distance = Math.abs(itemCenter - viewportCenter);
|
||||
|
||||
if (distance < closestDistance) {
|
||||
closestDistance = distance;
|
||||
closestIndex = index;
|
||||
}
|
||||
});
|
||||
|
||||
activateItem(closestIndex);
|
||||
};
|
||||
|
||||
ScrollTrigger.create({
|
||||
trigger: section,
|
||||
start: "top bottom",
|
||||
end: "bottom top",
|
||||
onEnter: updateActiveItem,
|
||||
onEnterBack: updateActiveItem,
|
||||
onUpdate: updateActiveItem,
|
||||
onRefresh: updateActiveItem,
|
||||
});
|
||||
|
||||
updateActiveItem();
|
||||
ScrollTrigger.refresh();
|
||||
}, section);
|
||||
|
||||
return () => {
|
||||
gsap.killTweensOf(items);
|
||||
ctx.revert();
|
||||
};
|
||||
}, [activateItem]);
|
||||
|
||||
return (
|
||||
<section className="discovery-included" data-reveal-group>
|
||||
<section className="discovery-included" data-reveal-group ref={sectionRef}>
|
||||
<div className="discovery-section-heading">
|
||||
<span className="discovery-label" data-reveal="fade">
|
||||
Im Set enthalten
|
||||
</span>
|
||||
<h2 data-reveal="lines">Alle 6 Signature-Düfte zum Testen.</h2>
|
||||
<h2 className="discovery-included-title" data-reveal="lines">
|
||||
6 Signature
|
||||
<br />
|
||||
Düfte
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<Grid gap="sm" className="discovery-products-grid">
|
||||
{perfumes.map((perfume) => (
|
||||
<Col
|
||||
key={perfume.id}
|
||||
as="article"
|
||||
span={12}
|
||||
md={6}
|
||||
lg={4}
|
||||
className="discovery-product-card"
|
||||
data-reveal="fade"
|
||||
>
|
||||
<span className="discovery-product-index">{perfume.id}</span>
|
||||
<div className="discovery-included-layout">
|
||||
<ol className="discovery-scroll-list" aria-label="Düfte im Discovery Set">
|
||||
{perfumes.map((perfume, index) => {
|
||||
const isActive = activeIndex === index;
|
||||
|
||||
<div className="discovery-product-image">
|
||||
<img
|
||||
src={perfume.image}
|
||||
alt={`Atmos ${perfume.name} Probe im Discovery Set`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
return (
|
||||
<li className="discovery-scroll-list-item" key={perfume.id} data-reveal-group data-reveal-start="top 84%">
|
||||
<article
|
||||
className={`discovery-scroll-item${
|
||||
isActive ? " discovery-scroll-item--active" : ""
|
||||
}`}
|
||||
aria-current={isActive ? "true" : undefined}
|
||||
ref={(element) => setItemRef(element, index)}
|
||||
>
|
||||
<span className="discovery-product-index" data-reveal="fade">{perfume.id}</span>
|
||||
|
||||
<div className="discovery-scroll-copy" data-reveal="fade">
|
||||
<h3>{perfume.name}</h3>
|
||||
<div className="discovery-scroll-line" aria-hidden="true" />
|
||||
<div className="discovery-scroll-mobile-detail">
|
||||
<p>{perfume.text}</p>
|
||||
<p>{perfume.mood}</p>
|
||||
</div>
|
||||
|
||||
<div className="discovery-product-tags discovery-scroll-mobile-tags">
|
||||
{perfume.materialTags.slice(0, 3).map((tag) => (
|
||||
<span key={tag}>{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
|
||||
<aside className="discovery-story-visual-panel" aria-label="Aktiver Duft">
|
||||
<div className="discovery-story-visual-images" aria-hidden="true">
|
||||
{perfumes.map((perfume, index) => {
|
||||
const moodImage =
|
||||
perfume.storyVisualImage || perfume.phaseVisualImages?.[0];
|
||||
|
||||
return (
|
||||
<img
|
||||
key={perfume.id}
|
||||
src={moodImage}
|
||||
alt=""
|
||||
className={activeIndex === index ? "is-active" : ""}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="discovery-story-visual-content">
|
||||
<span>Material-Komposition</span>
|
||||
<div className="discovery-story-tags">
|
||||
{perfumes[activeIndex].materialTags.map((tag) => (
|
||||
<span key={tag}>{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="discovery-product-copy">
|
||||
<h3>{perfume.name}</h3>
|
||||
<p>{perfume.text}</p>
|
||||
|
||||
<div className="discovery-product-tags">
|
||||
{perfume.materialTags.slice(0, 3).map((tag) => (
|
||||
<span key={tag}>{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
))}
|
||||
</Grid>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function DiscoveryComparisonSection() {
|
||||
return (
|
||||
<section className="discovery-comparison-section" data-reveal-group>
|
||||
<Grid gap="sm" className="discovery-comparison-grid">
|
||||
{discoveryComparison.map((item) => (
|
||||
<Col
|
||||
key={item.title}
|
||||
as="article"
|
||||
span={12}
|
||||
md={6}
|
||||
className={`discovery-comparison-card${
|
||||
item.highlight ? " discovery-comparison-card--highlight" : ""
|
||||
}`}
|
||||
data-reveal="fade"
|
||||
>
|
||||
<div className="discovery-comparison-head">
|
||||
<span className="discovery-comparison-icon" aria-hidden="true">
|
||||
{item.icon}
|
||||
</span>
|
||||
<h3>{item.title}</h3>
|
||||
</div>
|
||||
<p>{item.text}</p>
|
||||
</Col>
|
||||
))}
|
||||
</Grid>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -295,6 +374,7 @@ function DiscoveryFinalCta({ onBuy }) {
|
||||
|
||||
function DiscoverySetPage() {
|
||||
const { addToCart } = useShop();
|
||||
const orderPanelRef = useRef(null);
|
||||
const buyDiscoverySet = () =>
|
||||
addToCart("discovery-set", 1, "Discovery Set wurde in den Warenkorb gelegt.").catch(() => {});
|
||||
|
||||
@ -308,13 +388,20 @@ function DiscoverySetPage() {
|
||||
<SharedNavbar variant="hero" active="testen" />
|
||||
|
||||
<main id="main-content" className="shell">
|
||||
<DiscoveryHero onBuy={buyDiscoverySet} />
|
||||
<DiscoveryHero onBuy={buyDiscoverySet} panelRef={orderPanelRef} />
|
||||
<DiscoveryStorySection />
|
||||
<DiscoveryIncludedSection />
|
||||
<DiscoveryProcessSection />
|
||||
<DiscoveryComparisonSection />
|
||||
<DiscoveryFinalCta onBuy={buyDiscoverySet} />
|
||||
</main>
|
||||
|
||||
<StickyBuyBar
|
||||
label="Discovery Set"
|
||||
price="CHF 48.–"
|
||||
observeRef={orderPanelRef}
|
||||
onBuy={buyDiscoverySet}
|
||||
alwaysVisibleMobile
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -85,7 +85,7 @@ function ImpressumPage() {
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="legal-fact-grid" data-reveal-group data-reveal-start="top 88%">
|
||||
<section className="legal-fact-grid" data-reveal-group data-reveal-start="top 80%">
|
||||
{FACTS.map((fact) => (
|
||||
<article className="legal-fact" key={fact.label} data-reveal="fade">
|
||||
<span className="legal-eyebrow">{fact.label}</span>
|
||||
|
||||
@ -230,7 +230,7 @@ body.theme-light .hero-wordmark__image {
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: var(--gap-md);
|
||||
align-items: end;
|
||||
margin-bottom: clamp(1.6rem, 4vw, 4.8rem);
|
||||
margin-bottom: var(--gap-lg);
|
||||
}
|
||||
|
||||
.section-heading::after {
|
||||
@ -670,14 +670,12 @@ body.theme-light .hero-wordmark__image {
|
||||
}
|
||||
|
||||
.hero-product {
|
||||
/* Phone: keep the product centered, but narrower than the viewport
|
||||
so it does not crowd the copy block near the bottom. */
|
||||
aspect-ratio: auto;
|
||||
top: clamp(12.5rem, 28svh, 16rem);
|
||||
top: clamp(11.5rem, 26svh, 15rem);
|
||||
left: 50%;
|
||||
right: auto;
|
||||
width: clamp(12.5rem, 62vw, 17rem);
|
||||
height: clamp(13.5rem, 31svh, 17rem);
|
||||
width: clamp(14rem, 72vw, 20rem);
|
||||
height: clamp(15rem, 38svh, 20rem);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@ -734,7 +732,7 @@ body.theme-light .hero-wordmark__image {
|
||||
|
||||
.discovery-banner {
|
||||
min-height: 0;
|
||||
aspect-ratio: 1 / 1;
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
@ -746,10 +744,9 @@ body.theme-light .hero-wordmark__image {
|
||||
}
|
||||
|
||||
.hero-product {
|
||||
/* Slightly tighter slot for compact phones. */
|
||||
top: clamp(12rem, 28svh, 14.5rem);
|
||||
width: clamp(12rem, 62vw, 16rem);
|
||||
height: clamp(13rem, 31svh, 16.5rem);
|
||||
top: clamp(11rem, 26svh, 14rem);
|
||||
width: clamp(13rem, 70vw, 18rem);
|
||||
height: clamp(14rem, 36svh, 18rem);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
|
||||
@ -539,7 +539,7 @@ function LandingPage() {
|
||||
className="discovery-section"
|
||||
id="testen"
|
||||
data-reveal-group
|
||||
data-reveal-start="top 82%"
|
||||
data-reveal-start="top 74%"
|
||||
>
|
||||
<div className="discovery-copy">
|
||||
<h2 data-reveal="lines">
|
||||
|
||||
@ -140,7 +140,7 @@ function SmallBatchPage() {
|
||||
<section
|
||||
className="release-grid"
|
||||
data-reveal-group
|
||||
data-reveal-start="top 88%"
|
||||
data-reveal-start="top 80%"
|
||||
>
|
||||
{state.releases.map((release) => (
|
||||
<article className="release-card" key={release.name} data-reveal="fade">
|
||||
|
||||
@ -156,7 +156,7 @@
|
||||
.support-section-head {
|
||||
display: grid;
|
||||
gap: var(--gap-2xs);
|
||||
margin-bottom: clamp(1.6rem, 4vw, 3rem);
|
||||
margin-bottom: var(--gap-lg);
|
||||
}
|
||||
|
||||
.support-section-head h2 {
|
||||
|
||||
@ -83,7 +83,7 @@ function SupportPage() {
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section className="support-topics" data-reveal-group data-reveal-start="top 88%">
|
||||
<section className="support-topics" data-reveal-group data-reveal-start="top 80%">
|
||||
{TOPICS.map((topic) => (
|
||||
<article className="support-topic" key={topic.label} data-reveal="fade">
|
||||
<span className="support-eyebrow">{topic.label}</span>
|
||||
|
||||
1
parfum-shop/src/transitions/PageTransition.css
Normal file
1
parfum-shop/src/transitions/PageTransition.css
Normal file
@ -0,0 +1 @@
|
||||
/* Page transition styles removed — fade is handled entirely by GSAP inline. */
|
||||
119
parfum-shop/src/transitions/PageTransition.jsx
Normal file
119
parfum-shop/src/transitions/PageTransition.jsx
Normal file
@ -0,0 +1,119 @@
|
||||
import { createContext, useCallback, useContext, useLayoutEffect, useRef } from "react";
|
||||
import { useLocation, useNavigate } from "react-router";
|
||||
import { gsap } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import { useProductTransition } from "./ProductTransitionContext";
|
||||
|
||||
const PageTransitionContext = createContext({ navigateWithTransition: () => {} });
|
||||
|
||||
export const usePageTransition = () => useContext(PageTransitionContext);
|
||||
|
||||
let transitionActive = false;
|
||||
export const isPageTransitionActive = () => transitionActive;
|
||||
|
||||
const prefersReducedMotion = () =>
|
||||
typeof window !== "undefined" &&
|
||||
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
|
||||
const isInternalLink = (anchor) => {
|
||||
if (!anchor || anchor.target === "_blank") return false;
|
||||
const href = anchor.getAttribute("href");
|
||||
if (!href || href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("#")) return false;
|
||||
return true;
|
||||
};
|
||||
|
||||
export function PageTransitionProvider({ children }) {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { phase: productPhase } = useProductTransition();
|
||||
const tlRef = useRef(null);
|
||||
const isTransitioning = useRef(false);
|
||||
|
||||
const navigateWithTransition = useCallback(
|
||||
(to) => {
|
||||
if (isTransitioning.current) return;
|
||||
if (productPhase !== "idle") {
|
||||
navigate(to);
|
||||
return;
|
||||
}
|
||||
if (prefersReducedMotion()) {
|
||||
navigate(to);
|
||||
return;
|
||||
}
|
||||
|
||||
const routeContent = document.querySelector("[data-route-content]");
|
||||
if (!routeContent) {
|
||||
navigate(to);
|
||||
return;
|
||||
}
|
||||
|
||||
isTransitioning.current = true;
|
||||
transitionActive = true;
|
||||
tlRef.current?.kill();
|
||||
|
||||
const tl = gsap.timeline({
|
||||
onComplete: () => {
|
||||
navigate(to);
|
||||
window.scrollTo({ top: 0, behavior: "instant" });
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
gsap.fromTo(
|
||||
routeContent,
|
||||
{ autoAlpha: 0 },
|
||||
{
|
||||
autoAlpha: 1,
|
||||
duration: 0.4,
|
||||
ease: "power2.out",
|
||||
onComplete: () => {
|
||||
isTransitioning.current = false;
|
||||
transitionActive = false;
|
||||
gsap.set(routeContent, { clearProps: "opacity,visibility" });
|
||||
window.dispatchEvent(new CustomEvent("page-transition-ready"));
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
tl.to(routeContent, {
|
||||
autoAlpha: 0,
|
||||
duration: 0.3,
|
||||
ease: "power2.in",
|
||||
});
|
||||
|
||||
tlRef.current = tl;
|
||||
},
|
||||
[navigate, productPhase]
|
||||
);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const handleClick = (event) => {
|
||||
if (event.button !== 0 || event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) return;
|
||||
|
||||
const anchor = event.target.closest("a[href]");
|
||||
if (!anchor || !isInternalLink(anchor)) return;
|
||||
|
||||
if (anchor.querySelector("[data-product-transition-source]")) return;
|
||||
|
||||
const href = anchor.getAttribute("href");
|
||||
const resolved = new URL(href, window.location.origin);
|
||||
if (resolved.pathname === location.pathname) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
navigateWithTransition(href);
|
||||
};
|
||||
|
||||
document.addEventListener("click", handleClick, { capture: true });
|
||||
return () => document.removeEventListener("click", handleClick, { capture: true });
|
||||
}, [location.pathname, navigateWithTransition]);
|
||||
|
||||
return (
|
||||
<PageTransitionContext.Provider value={{ navigateWithTransition }}>
|
||||
{children}
|
||||
</PageTransitionContext.Provider>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user