add discovery interaction on set
This commit is contained in:
parent
0a075632c3
commit
7a92dcbe8e
@ -180,8 +180,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 +189,7 @@
|
||||
|
||||
.discovery-story-grid,
|
||||
.discovery-process-section,
|
||||
.discovery-included,
|
||||
.discovery-comparison-section {
|
||||
.discovery-included {
|
||||
position: relative;
|
||||
padding-block: clamp(4rem, 9vw, 9rem);
|
||||
}
|
||||
@ -202,8 +200,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 +226,6 @@
|
||||
content: "02 / Düfte";
|
||||
}
|
||||
|
||||
.discovery-comparison-section::before {
|
||||
content: "04 / Entscheidung";
|
||||
}
|
||||
|
||||
.discovery-story-copy {
|
||||
align-self: center;
|
||||
max-width: 58rem;
|
||||
@ -308,19 +301,6 @@
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.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 strong {
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
@ -351,14 +331,20 @@
|
||||
max-width: 11ch;
|
||||
}
|
||||
|
||||
.discovery-section-heading h2.discovery-included-title {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.discovery-included-title .reveal-word-line {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Layout columns are provided by the global Grid12 system (see Grid.jsx). */
|
||||
.discovery-steps-grid {
|
||||
margin-top: clamp(1.6rem, 4vw, 4rem);
|
||||
}
|
||||
|
||||
.discovery-step-card,
|
||||
.discovery-product-card,
|
||||
.discovery-comparison-card {
|
||||
.discovery-step-card {
|
||||
border: 1px solid var(--theme-border);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
|
||||
@ -380,8 +366,7 @@
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
.discovery-step-card h3,
|
||||
.discovery-comparison-head h3 {
|
||||
.discovery-step-card h3 {
|
||||
margin: 0;
|
||||
color: var(--theme-text);
|
||||
font-size: var(--text-lg);
|
||||
@ -391,70 +376,97 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.discovery-step-card p,
|
||||
.discovery-comparison-card p {
|
||||
.discovery-step-card 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);
|
||||
.discovery-included-layout {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(14rem, 1fr) auto;
|
||||
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);
|
||||
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;
|
||||
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-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-scroll-copy {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, auto) minmax(4rem, 1fr);
|
||||
gap: var(--gap-sm);
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
.discovery-scroll-copy h3 {
|
||||
max-width: 16ch;
|
||||
margin: 0;
|
||||
color: var(--theme-text);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 400;
|
||||
line-height: 1.08;
|
||||
letter-spacing: 0.02em;
|
||||
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-product-copy p {
|
||||
.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-sm);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@ -465,34 +477,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 {
|
||||
@ -529,7 +598,6 @@
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.discovery-story-grid,
|
||||
.discovery-comparison-section,
|
||||
.discovery-final-cta {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@ -538,7 +606,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) {
|
||||
@ -655,7 +727,7 @@
|
||||
.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;
|
||||
@ -671,8 +743,7 @@
|
||||
|
||||
.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 +758,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: clamp(1.6rem, 8vw, 2.6rem);
|
||||
}
|
||||
|
||||
.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.1rem;
|
||||
}
|
||||
|
||||
.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: 0.45rem;
|
||||
max-width: var(--text-measure);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.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: 0.45rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
@ -722,14 +874,47 @@
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.discovery-product-card {
|
||||
min-height: 360px;
|
||||
.discovery-included .discovery-section-heading {
|
||||
margin-bottom: clamp(1.4rem, 7vw, 2rem);
|
||||
}
|
||||
|
||||
.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,3 +1,6 @@
|
||||
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";
|
||||
@ -5,6 +8,8 @@ import PageMeta from "../components/seo/PageMeta";
|
||||
import { useShop } from "../shop/useShop";
|
||||
import "./DiscoverySetPage.css";
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const DISCOVERY_SET_IMAGE = "/atmos-discovery-set-thumbnail.webp";
|
||||
|
||||
const discoveryPanelFacts = [
|
||||
@ -49,20 +54,6 @@ 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 }) {
|
||||
return (
|
||||
<aside className="discovery-order-panel">
|
||||
@ -190,79 +181,174 @@ function DiscoveryProcessSection() {
|
||||
}
|
||||
|
||||
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"
|
||||
<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;
|
||||
|
||||
return (
|
||||
<li className="discovery-scroll-list-item" key={perfume.id}>
|
||||
<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">{perfume.id}</span>
|
||||
|
||||
<div className="discovery-product-image">
|
||||
<img
|
||||
src={perfume.image}
|
||||
alt={`Atmos ${perfume.name} Probe im Discovery Set`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
<div className="discovery-scroll-copy">
|
||||
<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-copy">
|
||||
<h3>{perfume.name}</h3>
|
||||
<p>{perfume.text}</p>
|
||||
|
||||
<div className="discovery-product-tags">
|
||||
<div className="discovery-product-tags discovery-scroll-mobile-tags">
|
||||
{perfume.materialTags.slice(0, 3).map((tag) => (
|
||||
<span key={tag}>{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
))}
|
||||
</Grid>
|
||||
</section>
|
||||
</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];
|
||||
|
||||
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>
|
||||
<img
|
||||
key={perfume.id}
|
||||
src={moodImage}
|
||||
alt=""
|
||||
className={activeIndex === index ? "is-active" : ""}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p>{item.text}</p>
|
||||
</Col>
|
||||
|
||||
<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>
|
||||
))}
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -312,7 +398,6 @@ function DiscoverySetPage() {
|
||||
<DiscoveryStorySection />
|
||||
<DiscoveryIncludedSection />
|
||||
<DiscoveryProcessSection />
|
||||
<DiscoveryComparisonSection />
|
||||
<DiscoveryFinalCta onBuy={buyDiscoverySet} />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user