From 367ae871a0a8255382ee3bb23db73b864959a22d Mon Sep 17 00:00:00 2001 From: anielsen99 Date: Fri, 27 Mar 2026 17:16:06 +0100 Subject: [PATCH 1/4] revise discovery-section in ProductdetailPage --- .../src/components/ProductDetailPage.css | 38 ++++++++++++------- 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css index b1fc4c1..786a0bd 100644 --- a/parfum-shop/src/components/ProductDetailPage.css +++ b/parfum-shop/src/components/ProductDetailPage.css @@ -363,38 +363,50 @@ /* --- Bottom CTA Start --- */ .detail-bottom-cta { + margin: 20px; margin-top: 42px; - padding: 42px 20px 16px; - border-top: 1px solid #d4d4d4; - text-align: center; + padding: 40px 38px; + background-color: #ff6a00; + border-radius: 24px; } .detail-bottom-cta h2 { margin: 0 0 14px; - font-size: 34px; - font-weight: 400; + font-size: 52px; + line-height: 0.95; + font-weight: 300; + letter-spacing: -0.04em; + color: #fff; } .detail-bottom-cta p { - max-width: 880px; margin: 0 auto; - color: #333; - line-height: 1.7; + font-size: 18px; + line-height: 1.5; + color: #fff; + line-height: 1.5; } .detail-bottom-actions { display: flex; - justify-content: center; gap: 16px; margin-top: 26px; } .detail-bottom-actions button { - border: 1px solid #101010; - background: transparent; - padding: 16px 24px; - min-width: 250px; + background-color: #fff; + color: #ff6a00; + border-radius: 999px; + border: none; + padding: 16px 28px; cursor: pointer; + transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; +} + +.detail-bottom-actions button:hover { + background: rgba(255, 255, 255, 0.4); + transform: translateY(-2px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); } /* --- Bottom CTA End --- */ From 955b982a5a553ef8291d42f6f7192e967a88d43d Mon Sep 17 00:00:00 2001 From: anielsen99 Date: Fri, 27 Mar 2026 17:52:18 +0100 Subject: [PATCH 2/4] add rounded edges to shell and images --- .../src/components/ProductDetailPage.css | 51 ++++++++++++------- 1 file changed, 32 insertions(+), 19 deletions(-) diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css index 786a0bd..9586aa3 100644 --- a/parfum-shop/src/components/ProductDetailPage.css +++ b/parfum-shop/src/components/ProductDetailPage.css @@ -12,15 +12,17 @@ .detail-page { min-height: 100vh; - background: #efefef; color: #191919; - padding: 20px; + padding: 38px; + background: + linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)), + linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45)); } .detail-shell { background: #f7f7f7; - border: 1px solid #d6d6d6; - padding: 22px; + border-radius: 18px; + padding: 38px; } /* --- Product Detail Page Wrapper End --- */ @@ -61,6 +63,7 @@ background: #ddd; aspect-ratio: 1 / 1; overflow: hidden; + border-radius: 18px; } .detail-main-image img { @@ -79,14 +82,20 @@ .thumb-btn { width: 88px; height: 88px; - border: 1px solid #cfcfcf; + border: none; + border-radius: 18px; background: #fff; padding: 0; cursor: pointer; } +.thumb-btn:hover { + transform: translateY(-1px); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); +} + .thumb-btn.active { - outline: 2px solid #4da3ff; + outline: 1px solid #ff6a00; outline-offset: 1px; } @@ -364,15 +373,14 @@ .detail-bottom-cta { margin: 20px; - margin-top: 42px; padding: 40px 38px; background-color: #ff6a00; border-radius: 24px; } .detail-bottom-cta h2 { - margin: 0 0 14px; - font-size: 52px; + margin: 0; + font-size: 42px; line-height: 0.95; font-weight: 300; letter-spacing: -0.04em; @@ -380,8 +388,8 @@ } .detail-bottom-cta p { - margin: 0 auto; - font-size: 18px; + margin-top: 18px; + font-size: 15px; line-height: 1.5; color: #fff; line-height: 1.5; @@ -394,19 +402,24 @@ } .detail-bottom-actions button { + border: none; + border-radius: 999px; + padding: 12px 18px; + font-size: 14px; + cursor: pointer; + transition: transform 0.2s ease, opacity 0.2s ease; background-color: #fff; color: #ff6a00; - border-radius: 999px; - border: none; - padding: 16px 28px; - cursor: pointer; - transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; } .detail-bottom-actions button:hover { - background: rgba(255, 255, 255, 0.4); - transform: translateY(-2px); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); + transform: translateY(-1px); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); +} + +.detail-bottom-actions button:active { + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); + background: rgba(255, 255, 255, 0.8); } /* --- Bottom CTA End --- */ From aba904f796a26738da3d5d143e53f0d88f5a2d7e Mon Sep 17 00:00:00 2001 From: anielsen99 Date: Fri, 27 Mar 2026 18:36:59 +0100 Subject: [PATCH 3/4] add rounded egdes (blocks, buttons) --- .../src/components/ProductDetailPage.css | 35 ++++++++++++++----- .../src/components/ProductDetailPage.jsx | 6 ++-- 2 files changed, 30 insertions(+), 11 deletions(-) diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css index 9586aa3..807f301 100644 --- a/parfum-shop/src/components/ProductDetailPage.css +++ b/parfum-shop/src/components/ProductDetailPage.css @@ -138,6 +138,7 @@ gap: 6px; } +/* -> habe ich durch Material Tags ersetzt, siehe weiter unten .structure-tags span { display: inline-flex; align-items: center; @@ -147,11 +148,13 @@ background: #ebebeb; font-size: 12px; } +*/ .mood-box { margin-top: 18px; background: #dfdfdf; padding: 16px; + border-radius: 18px; } .mood-label { @@ -247,8 +250,10 @@ min-height: 34px; padding: 8px 14px; border: 1px solid #d2d2d2; - background: #ebebeb; + border-radius: 999px; + background: transparent; font-size: 12px; + user-select: none; } /* --- Material Tags End --- */ @@ -263,14 +268,15 @@ .size-card { border: 1px solid #d0d0d0; - background: #fefefe; + border-radius: 18px; + background: #fff; padding: 18px; text-align: center; cursor: pointer; } .size-card.active { - border-color: #111; + border-color: #ff6a00; } .size-title { @@ -296,9 +302,10 @@ /* --- Discovery Hinweis + Kaufen Button Start --- */ .discovery-note { - background: #050505; + background-color: #1f1f1f; color: #fff; padding: 14px 16px; + border-radius: 18px; } .discovery-note strong { @@ -309,14 +316,15 @@ .discovery-note p { font-size: 11px; - color: rgba(255, 255, 255, 0.78); + color: #d0d0d0; margin: 0; } .buy-button { width: 100%; border: none; - background: #050505; + border-radius: 999px; + background: #ff6a00; color: #fff; padding: 18px; font-size: 16px; @@ -324,6 +332,16 @@ cursor: pointer; } +.buy-button:hover { + transform: translateY(-1px); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); +} + +.buy-button:active { + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); + background: rgba(255, 106, 0, 0.8); +} + /* --- Discovery Hinweis + Kaufen Button End --- */ /* --- Description Columns Start --- */ @@ -347,12 +365,13 @@ .detail-upsell-bar { margin-top: auto; - background: #060606; + background-color: #1f1f1f; color: #fff; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; + border-radius: 999px; } .detail-upsell-bar strong { @@ -372,7 +391,7 @@ /* --- Bottom CTA Start --- */ .detail-bottom-cta { - margin: 20px; + margin-top: 40px; padding: 40px 38px; background-color: #ff6a00; border-radius: 24px; diff --git a/parfum-shop/src/components/ProductDetailPage.jsx b/parfum-shop/src/components/ProductDetailPage.jsx index 6a3e418..040b91a 100644 --- a/parfum-shop/src/components/ProductDetailPage.jsx +++ b/parfum-shop/src/components/ProductDetailPage.jsx @@ -83,7 +83,7 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
PHASE 1: TOP NOTES (0–1 H) -
+
{perfume.phases.top.map((note) => ( {note} ))} @@ -92,7 +92,7 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
PHASE 2: HEART NOTES (1–4 H) -
+
{perfume.phases.heart.map((note) => ( {note} ))} @@ -101,7 +101,7 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
PHASE 3: BASE NOTES (4 H+) -
+
{perfume.phases.base.map((note) => ( {note} ))} From 2da092a6f2686ad3db29de39708db210d3e61684 Mon Sep 17 00:00:00 2001 From: anielsen99 Date: Fri, 27 Mar 2026 18:50:24 +0100 Subject: [PATCH 4/4] add button for discovery set and remove upsell section --- .../src/components/ProductDetailPage.css | 57 +++++++++---------- .../src/components/ProductDetailPage.jsx | 24 ++++---- 2 files changed, 39 insertions(+), 42 deletions(-) diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css index 807f301..cad261f 100644 --- a/parfum-shop/src/components/ProductDetailPage.css +++ b/parfum-shop/src/components/ProductDetailPage.css @@ -306,20 +306,46 @@ color: #fff; padding: 14px 16px; border-radius: 18px; + justify-content: space-between; + display: flex; + gap: 20px; } -.discovery-note strong { +.discovery-note-text strong { display: block; margin-bottom: 6px; font-size: 13px; } -.discovery-note p { +.discovery-note-text p { font-size: 11px; color: #d0d0d0; margin: 0; } +.discovery-note-btn { + border: none; + border-radius: 999px; + background-color: #ff6a00; + color: #fff; + padding: 12px 18px; + font-size: 14px; + cursor: pointer; + margin-left: auto; + flex-shrink: 0; + transition: transform 0.2s ease, opacity 0.2s ease; +} + +.discovery-note-btn:hover { + transform: translateY(-1px); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); +} + +.discovery-note-btn:active { + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); + background: rgba(255, 106, 0, 0.8); +} + .buy-button { width: 100%; border: none; @@ -361,33 +387,6 @@ /* --- Description Columns End --- */ -/* --- Bottom Upsell Bar Start --- */ - -.detail-upsell-bar { - margin-top: auto; - background-color: #1f1f1f; - color: #fff; - padding: 12px 16px; - display: flex; - justify-content: space-between; - align-items: center; - border-radius: 999px; -} - -.detail-upsell-bar strong { - display: block; - margin-bottom: 4px; - font-size: 13px; -} - -.detail-upsell-bar p { - font-size: 11px; - color: rgba(255, 255, 255, 0.7); - margin: 0; -} - -/* --- Bottom Upsell Bar End --- */ - /* --- Bottom CTA Start --- */ .detail-bottom-cta { diff --git a/parfum-shop/src/components/ProductDetailPage.jsx b/parfum-shop/src/components/ProductDetailPage.jsx index 040b91a..255e06b 100644 --- a/parfum-shop/src/components/ProductDetailPage.jsx +++ b/parfum-shop/src/components/ProductDetailPage.jsx @@ -167,11 +167,17 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
- Discovery Set wird angerechnet -

- Hast du das Discovery Set gekauft, wird der volle Preis beim Kauf - automatisch abgezogen. -

+
+ Discovery Set wird angerechnet +

+ Hast du das Discovery Set gekauft, wird der volle Preis beim Kauf + automatisch abgezogen. +

+
+ +
- -
-
- Noch unsicher? -

Discovery Set bestellen und Düfte testen

-
- — -