diff --git a/parfum-shop/src/pages/DiscoverySetPage.css b/parfum-shop/src/pages/DiscoverySetPage.css index ad0e1e7..c3adc6f 100644 --- a/parfum-shop/src/pages/DiscoverySetPage.css +++ b/parfum-shop/src/pages/DiscoverySetPage.css @@ -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); + } } diff --git a/parfum-shop/src/pages/DiscoverySetPage.jsx b/parfum-shop/src/pages/DiscoverySetPage.jsx index e0d7524..2ec17bf 100644 --- a/parfum-shop/src/pages/DiscoverySetPage.jsx +++ b/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 ( + ); } @@ -312,7 +398,6 @@ function DiscoverySetPage() { -