add discovery interaction on set

parfum-shop/src/pages/DiscoverySetPage.css

@@ -180,8 +180,7 @@
   overflow-wrap: anywhere;
 }
 
-.discovery-story-grid,
+.discovery-story-grid {
-.discovery-comparison-section {
   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-included {
-.discovery-comparison-section {
   position: relative;
   padding-block: clamp(4rem, 9vw, 9rem);
 }
@@ -202,8 +200,7 @@
 
 .discovery-story-grid::before,
 .discovery-process-section::before,
-.discovery-included::before,
+.discovery-included::before {
-.discovery-comparison-section::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-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)),
@@ -380,8 +366,7 @@
   letter-spacing: 0.2em;
 }
 
-.discovery-step-card h3,
+.discovery-step-card h3 {
-.discovery-comparison-head h3 {
   margin: 0;
   color: var(--theme-text);
   font-size: var(--text-lg);
@@ -391,70 +376,97 @@
   text-transform: uppercase;
 }
 
-.discovery-step-card p,
+.discovery-step-card p {
-.discovery-comparison-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-included-layout {
-
-.discovery-product-card {
-  min-height: clamp(390px, 40vw, 560px);
   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);
+  align-items: center;
-  overflow: hidden;
+  min-height: clamp(16rem, 44svh, 30rem);
-  transition:
+  padding: clamp(1rem, 2vw, 1.55rem) 0;
-    transform var(--duration-med) var(--ease-out),
+  border-top: 1px solid var(--theme-border);
-    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;
+  transition: border-color var(--duration-med) var(--ease-out);
+  will-change: opacity;
 }
 
-.discovery-product-image img {
+.discovery-scroll-copy {
-  display: block;
+  display: grid;
-  width: min(86%, 360px);
+  grid-template-columns: minmax(0, auto) minmax(4rem, 1fr);
-  height: auto;
+  gap: var(--gap-sm);
-  object-fit: contain;
+  align-items: center;
-  filter: var(--shadow-product-card);
+  min-width: 0;
-  transition: transform var(--duration-slow) var(--ease-out);
 }
 
-.discovery-product-card:hover .discovery-product-image img {
+.discovery-scroll-copy h3 {
-  transform: scale(1.04) rotate(-0.35deg);
+  max-width: 16ch;
-}
+  margin: 0;
-
-.discovery-product-copy h3 {
-  max-width: 14ch;
-  margin: 0 0 0.45rem;
   color: var(--theme-text);
-  font-size: var(--text-lg);
+  font-size: clamp(1.45rem, 3vw, 3.15rem);
-  font-weight: 400;
+  font-weight: 300;
-  line-height: 1.08;
+  line-height: 0.96;
-  letter-spacing: 0.02em;
+  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 {
+.discovery-scroll-mobile-tags {
-  grid-column: 1 / -1;
+  display: none;
+}
+
+.discovery-story-visual-panel {
+  position: sticky;
+  top: 50svh;
   align-self: start;
-}
+  width: 100%;
-
+  min-height: clamp(360px, 42vw, 620px);
-.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 {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
-  gap: var(--gap-sm);
+  padding: clamp(1.2rem, 3vw, 2.4rem);
-  margin-bottom: var(--gap-sm);
+  border: 1px solid var(--theme-border);
+  overflow: hidden;
+  background: var(--theme-surface-soft);
+  transform: translateY(-50%);
 }
 
-.discovery-comparison-icon {
+.discovery-story-visual-panel::after {
-  width: 2.3rem;
+  content: "";
-  height: 2.3rem;
+  position: absolute;
-  font-size: 1.2rem;
+  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-included::before {
-  .discovery-comparison-section::before {
     right: auto;
     left: 0;
     width: min(100%, 24rem);
@@ -687,15 +758,96 @@
 
   .discovery-story-grid,
   .discovery-process-section,
-  .discovery-included,
+  .discovery-included {
-  .discovery-comparison-section {
     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 {
+  .discovery-included .discovery-section-heading {
-    min-height: 360px;
+    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-scroll-item,
-  .discovery-product-image img {
+  .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);
+  }
 }

parfum-shop/src/pages/DiscoverySetPage.jsx

@@ -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">
+      <div className="discovery-included-layout">
-        {perfumes.map((perfume) => (
+        <ol className="discovery-scroll-list" aria-label="Düfte im Discovery Set">
-          <Col
+          {perfumes.map((perfume, index) => {
-            key={perfume.id}
+            const isActive = activeIndex === index;
-            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-product-image">
+            return (
-              <img
+              <li className="discovery-scroll-list-item" key={perfume.id}>
-                src={perfume.image}
+                <article
-                alt={`Atmos ${perfume.name} Probe im Discovery Set`}
+                  className={`discovery-scroll-item${
-                loading="lazy"
+                    isActive ? " discovery-scroll-item--active" : ""
-                decoding="async"
+                  }`}
-              />
+                  aria-current={isActive ? "true" : undefined}
+                  ref={(element) => setItemRef(element, index)}
+                >
+                  <span className="discovery-product-index">{perfume.id}</span>
+
+                  <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-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>
-            <div className="discovery-product-copy">
+        </aside>
-              <h3>{perfume.name}</h3>
+      </div>
-              <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>
     </section>
   );
 }
@@ -312,7 +398,6 @@ function DiscoverySetPage() {
         <DiscoveryStorySection />
         <DiscoveryIncludedSection />
         <DiscoveryProcessSection />
-        <DiscoveryComparisonSection />
         <DiscoveryFinalCta onBuy={buyDiscoverySet} />
       </main>
     </div>