Merge branch 'productdetails'

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;
+  border-radius: 18px;
-  padding: 22px;
+  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;
 }
 
@@ -129,6 +138,7 @@
   gap: 6px;
 }
 
+/* -> habe ich durch Material Tags ersetzt, siehe weiter unten
 .structure-tags span {
   display: inline-flex;
   align-items: center;
@@ -138,11 +148,13 @@
   background: #ebebeb;
   font-size: 12px;
 }
+*/
 
 .mood-box {
   margin-top: 18px;
   background: #dfdfdf;
   padding: 16px;
+  border-radius: 18px;
 }
 
 .mood-label {
@@ -238,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 --- */
@@ -254,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 {
@@ -287,27 +302,55 @@
 /* --- Discovery Hinweis + Kaufen Button Start --- */
 
 .discovery-note {
-  background: #050505;
+  background-color: #1f1f1f;
   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: rgba(255, 255, 255, 0.78);
+  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;
-  background: #050505;
+  border-radius: 999px;
+  background: #ff6a00;
   color: #fff;
   padding: 18px;
   font-size: 16px;
@@ -315,6 +358,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 --- */
@@ -334,67 +387,57 @@
 
 /* --- Description Columns End --- */
 
-/* --- Bottom Upsell Bar Start --- */
-
-.detail-upsell-bar {
-  margin-top: auto;
-  background: #060606;
-  color: #fff;
-  padding: 12px 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.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 {
-  margin-top: 42px;
+  margin-top: 40px;
-  padding: 42px 20px 16px;
+  padding: 40px 38px;
-  border-top: 1px solid #d4d4d4;
+  background-color: #ff6a00;
-  text-align: center;
+  border-radius: 24px;
 }
 
 .detail-bottom-cta h2 {
-  margin: 0 0 14px;
+  margin: 0;
-  font-size: 34px;
+  font-size: 42px;
-  font-weight: 400;
+  line-height: 0.95;
+  font-weight: 300;
+  letter-spacing: -0.04em;
+  color: #fff;
 }
 
 .detail-bottom-cta p {
-  max-width: 880px;
+  margin-top: 18px;
-  margin: 0 auto;
+  font-size: 15px;
-  color: #333;
+  line-height: 1.5;
-  line-height: 1.7;
+  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;
+  border: none;
-  background: transparent;
+  border-radius: 999px;
-  padding: 16px 24px;
+  padding: 12px 18px;
-  min-width: 250px;
+  font-size: 14px;
   cursor: pointer;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  background-color: #fff;
+  color: #ff6a00;
+}
+
+.detail-bottom-actions button:hover {
+  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 --- */

parfum-shop/src/components/ProductDetailPage.jsx

@@ -83,7 +83,7 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
 
               <div className="structure-block">
                 <span className="structure-phase">PHASE 1: TOP NOTES (0–1 H)</span>
-                <div className="structure-tags">
+                <div className="material-tags">
                   {perfume.phases.top.map((note) => (
                     <span key={note}>{note}</span>
                   ))}
@@ -92,7 +92,7 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
 
               <div className="structure-block">
                 <span className="structure-phase">PHASE 2: HEART NOTES (1–4 H)</span>
-                <div className="structure-tags">
+                <div className="material-tags">
                   {perfume.phases.heart.map((note) => (
                     <span key={note}>{note}</span>
                   ))}
@@ -101,7 +101,7 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
 
               <div className="structure-block">
                 <span className="structure-phase">PHASE 3: BASE NOTES (4 H+)</span>
-                <div className="structure-tags">
+                <div className="material-tags">
                   {perfume.phases.base.map((note) => (
                     <span key={note}>{note}</span>
                   ))}
@@ -167,11 +167,17 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
             </div>
 
             <div className="discovery-note">
-              <strong>Discovery Set wird angerechnet</strong>
+              <div className="discovery-note-text">
-              <p>
+                <strong>Discovery Set wird angerechnet</strong>
-                Hast du das Discovery Set gekauft, wird der volle Preis beim Kauf
+                <p>
-                automatisch abgezogen.
+                  Hast du das Discovery Set gekauft, wird der volle Preis beim Kauf
-              </p>
+                  automatisch abgezogen.
+                </p>
+              </div>
+              <button className="discovery-note-btn" type="button">
+                Zum Set
+              </button>
+              
             </div>
 
             <button className="buy-button" type="button">
@@ -199,14 +205,6 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
                 <p>{perfume.edition}</p>
               </div>
             </div>
-
-            <div className="detail-upsell-bar">
-              <div>
-                <strong>Noch unsicher?</strong>
-                <p>Discovery Set bestellen und Düfte testen</p>
-              </div>
-              <span>—</span>
-            </div>
           </div>
         </section>