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. +

+
+ +