diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css
index d6d55dc..af3b83f 100644
--- a/parfum-shop/src/components/ProductDetailPage.css
+++ b/parfum-shop/src/components/ProductDetailPage.css
@@ -116,23 +116,26 @@
.detail-thumbs {
display: flex;
- gap: 14px;
+ justify-content: center;
+ gap: 12px;
margin-top: 14px;
}
.thumb-btn {
- width: 88px;
- height: 88px;
+ width: 92px;
+ height: 92px;
border: none;
border-radius: 0px;
background: #fff;
padding: 0;
cursor: pointer;
+ flex-shrink: 0;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.thumb-btn:hover {
transform: translateY(-1px);
- box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}
.thumb-btn.active {
@@ -148,84 +151,249 @@
/* --- Left Column / Gallery End --- */
-/* --- Duftstruktur Start --- */
-
-.detail-structure {
- margin-top: 28px;
-}
-
-.detail-structure h3 {
- font-size: 12px;
- letter-spacing: 0.24em;
- font-weight: 500;
- margin: 0 0 14px;
-}
-
-.structure-block {
- margin-bottom: 12px;
-}
-
-.structure-phase {
- display: block;
- margin-bottom: 6px;
- font-size: 10px;
- letter-spacing: 0.18em;
- color: #555;
-}
-
-.structure-tags {
- display: flex;
- flex-wrap: wrap;
- gap: 6px;
-}
-
-.mood-box {
- margin-top: 18px;
- background: #dfdfdf;
- padding: 16px;
- border-radius: 0px;
-}
-
-.mood-label {
- display: block;
- margin-bottom: 8px;
- font-size: 10px;
- letter-spacing: 0.2em;
- color: #555;
-}
-
-.mood-box p {
- font-size: 15px;
- line-height: 1.5;
- margin: 0;
-}
-
-/* --- Duftstruktur End --- */
-
-/* --- Meta Infos unter Duftstruktur Start --- */
+/* --- Left Meta Top Start --- */
.detail-meta-grid {
display: grid;
- grid-template-columns: 1fr 1fr 1.5fr;
- gap: 20px;
- margin-top: 24px;
+ grid-template-columns: 1fr 1fr 1.2fr;
+ gap: 22px;
+}
+
+.detail-meta-grid--top {
+ margin-top: 22px;
+}
+
+.detail-meta-grid > div {
+ padding: 14px 0 0;
+ border-top: 1px solid #dfdfdf;
}
.detail-meta-grid span {
display: block;
margin-bottom: 8px;
font-size: 10px;
- letter-spacing: 0.2em;
+ letter-spacing: 0.22em;
color: #666;
}
.detail-meta-grid p {
- font-size: 13px;
- line-height: 1.5;
+ font-size: 14px;
+ line-height: 1.55;
margin: 0;
}
-/* --- Meta Infos unter Duftstruktur End --- */
+/* --- Left Meta Top End --- */
+
+/* --- Duftstruktur Start --- */
+
+.detail-structure-layout {
+ display: grid;
+ grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.95fr);
+ gap: 22px;
+ align-items: start;
+ margin-top: 26px;
+}
+
+.detail-structure {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding: 22px;
+ background: #f1f1f1;
+ border: 1px solid #dddddd;
+}
+
+.detail-structure h3 {
+ font-size: 12px;
+ letter-spacing: 0.24em;
+ font-weight: 500;
+ margin: 0;
+ color: #1f1f1f;
+}
+
+.structure-block {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 14px 14px 14px 16px;
+ background: rgba(255, 255, 255, 0.42);
+ border: 1px solid #e1e1e1;
+}
+
+.structure-block::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 3px;
+ height: 100%;
+}
+
+.structure-block:nth-of-type(1)::before {
+ background: rgba(255, 106, 0, 0.22);
+}
+
+.structure-block:nth-of-type(2)::before {
+ background: rgba(255, 106, 0, 0.45);
+}
+
+.structure-block:nth-of-type(3)::before {
+ background: #ff6a00;
+}
+
+.structure-phase {
+ display: block;
+ margin-bottom: 0;
+ font-size: 10px;
+ letter-spacing: 0.18em;
+ color: #555;
+}
+
+.structure-block:nth-of-type(1) .structure-phase {
+ color: rgba(120, 74, 42, 0.88);
+}
+
+.structure-block:nth-of-type(2) .structure-phase {
+ color: rgba(110, 73, 45, 0.95);
+}
+
+.structure-block:nth-of-type(3) .structure-phase {
+ color: #a14b00;
+}
+
+.structure-tags-grid {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 10px;
+ width: 100%;
+}
+
+.structure-tag {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ min-width: 0;
+ min-height: 42px;
+ padding: 10px 12px;
+ font-size: 13px;
+ line-height: 1.25;
+ text-align: center;
+ box-sizing: border-box;
+ overflow-wrap: break-word;
+ word-break: break-word;
+ border: 1px solid #d6d6d6;
+ background: #f8f8f8;
+}
+
+.structure-block:nth-of-type(1) .structure-tag {
+ background: rgba(255, 106, 0, 0.05);
+ border-color: rgba(255, 106, 0, 0.16);
+}
+
+.structure-block:nth-of-type(2) .structure-tag {
+ background: rgba(255, 106, 0, 0.08);
+ border-color: rgba(255, 106, 0, 0.24);
+}
+
+.structure-block:nth-of-type(3) .structure-tag {
+ background: rgba(255, 106, 0, 0.12);
+ border-color: rgba(255, 106, 0, 0.32);
+}
+
+/* --- Duftstruktur End --- */
+
+/* --- Struktur Info Box Start --- */
+
+.structure-info-box {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding: 22px;
+ background: linear-gradient(
+ 180deg,
+ rgba(255, 106, 0, 0.06),
+ rgba(255, 106, 0, 0.02)
+ );
+ border: 1px solid rgba(255, 106, 0, 0.18);
+}
+
+.structure-info-label {
+ font-size: 10px;
+ letter-spacing: 0.24em;
+ color: #666;
+}
+
+.structure-info-box p {
+ margin: 0;
+ font-size: 14px;
+ line-height: 1.7;
+ color: #3f3f3f;
+}
+
+.structure-info-legend {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding-top: 4px;
+ border-top: 1px solid rgba(255, 106, 0, 0.12);
+}
+
+.structure-info-legend div {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 12px;
+ letter-spacing: 0.08em;
+ color: #666;
+}
+
+.structure-info-dot {
+ width: 10px;
+ height: 10px;
+ display: inline-block;
+}
+
+.structure-info-dot--light {
+ background: rgba(255, 106, 0, 0.25);
+}
+
+.structure-info-dot--mid {
+ background: rgba(255, 106, 0, 0.5);
+}
+
+.structure-info-dot--strong {
+ background: #ff6a00;
+}
+
+/* --- Struktur Info Box End --- */
+
+/* --- Mood Box Start --- */
+
+.mood-box {
+ margin-top: 22px;
+ background: #dfdfdf;
+ padding: 18px 20px;
+ border-left: 2px solid #ff6a00;
+}
+
+.mood-label {
+ display: block;
+ margin-bottom: 10px;
+ font-size: 10px;
+ letter-spacing: 0.2em;
+ color: #555;
+}
+
+.mood-box p {
+ font-size: 16px;
+ line-height: 1.65;
+ margin: 0;
+ color: #1f1f1f;
+}
+
+/* --- Mood Box End --- */
/* --- Right Column Start --- */
@@ -244,6 +412,12 @@
border-bottom: 1px solid #e2e2e2;
}
+.detail-heading-copy {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
.detail-kicker {
display: inline-block;
font-size: 10px;
@@ -386,6 +560,266 @@
/* --- Delivery Box End --- */
+/* --- Comment Spotlight Start --- */
+
+.comment-spotlight {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.comment-spotlight-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 12px;
+}
+
+.comment-dots {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.comment-dot {
+ width: 8px;
+ height: 8px;
+ border: none;
+ padding: 0;
+ background: #cfcfcf;
+ cursor: pointer;
+}
+
+.comment-dot.active {
+ background: #ff6a00;
+}
+
+.comment-spotlight-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 14px;
+}
+
+.comment-card {
+ border: 1px solid #d9d9d9;
+ background: #ff6a0023;
+ padding: 18px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ min-height: 180px;
+}
+
+.comment-card-title {
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ color: #666;
+}
+
+.comment-card p {
+ margin: 0;
+ font-size: 15px;
+ line-height: 1.55;
+ color: #1f1f1f;
+ flex: 1;
+}
+
+.comment-card-author {
+ font-size: 12px;
+ letter-spacing: 0.08em;
+ color: #777;
+}
+
+/* --- Comment Spotlight End --- */
+
+/* --- Review Section Start --- */
+
+.review-section {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.review-section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ gap: 20px;
+}
+
+.review-section-copy {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ max-width: 460px;
+}
+
+.review-section-text {
+ margin: 0;
+ font-size: 15px;
+ line-height: 1.55;
+ color: #5f5f5f;
+}
+
+.review-section-main {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ flex-shrink: 0;
+}
+
+.review-score {
+ font-size: 34px;
+ line-height: 1;
+ font-weight: 300;
+ letter-spacing: -0.04em;
+ color: #131313;
+}
+
+.review-summary-copy {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 4px;
+}
+
+.review-stars {
+ font-size: 14px;
+ letter-spacing: 0.18em;
+ color: #ff6a00;
+}
+
+.review-count {
+ font-size: 11px;
+ letter-spacing: 0.08em;
+ color: #666;
+}
+
+.review-panel {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ z-index: 8;
+}
+
+.review-panel.is-open {
+ z-index: 20;
+}
+
+.review-toggle {
+ display: inline-flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 14px;
+ width: 100%;
+ border: 1px solid #d9d9d9;
+ background: transparent;
+ padding: 12px 14px;
+ font-size: 12px;
+ letter-spacing: 0.08em;
+ color: #1f1f1f;
+ cursor: pointer;
+ transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.review-toggle:hover {
+ border-color: #bcbcbc;
+ background: rgba(255, 255, 255, 0.45);
+}
+
+.review-panel.is-open .review-toggle {
+ border-color: #c8c8c8;
+ background: rgba(255, 255, 255, 0.5);
+}
+
+.review-toggle-icon {
+ font-size: 18px;
+ line-height: 1;
+ transition: transform 0.2s ease;
+}
+
+.review-toggle-icon.open {
+ transform: rotate(45deg);
+}
+
+.review-popover {
+ position: absolute;
+ top: calc(100% + 12px);
+ left: 0;
+ right: 0;
+ z-index: 30;
+}
+
+.review-popover::before {
+ content: "";
+ position: absolute;
+ top: -6px;
+ right: 28px;
+ width: 12px;
+ height: 12px;
+ background: #efefef;
+ border-left: 1px solid #d9d9d9;
+ border-top: 1px solid #d9d9d9;
+ transform: rotate(45deg);
+}
+
+.review-details {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 16px;
+ border: 1px solid #d9d9d9;
+ background: #efefef;
+ box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
+}
+
+.review-detail-row {
+ display: grid;
+ grid-template-columns: 86px 1fr 34px;
+ align-items: center;
+ gap: 12px;
+}
+
+.review-detail-label {
+ font-size: 10px;
+ letter-spacing: 0.18em;
+ color: #666;
+}
+
+.review-detail-bar {
+ position: relative;
+ height: 1px;
+ background: #cdcdcd;
+ overflow: hidden;
+}
+
+.review-detail-fill {
+ position: absolute;
+ inset: 0 auto 0 0;
+ height: 100%;
+ background: #ff6a00;
+}
+
+.review-detail-value {
+ font-size: 12px;
+ color: #1f1f1f;
+ text-align: right;
+}
+
+.review-write-button {
+ margin-top: 4px;
+ border: 1px solid #d9d9d9;
+ background: #fff;
+ color: #999;
+ padding: 11px 14px;
+ font-size: 12px;
+ letter-spacing: 0.08em;
+ cursor: not-allowed;
+}
+
+/* --- Review Section End --- */
+
/* --- Right Column End --- */
/* --- Material Tags Start --- */
@@ -399,12 +833,12 @@
.material-tags span {
display: inline-flex;
align-items: center;
- min-height: 34px;
+ min-height: 36px;
padding: 8px 14px;
border: 1px solid #d2d2d2;
border-radius: 0px;
background: transparent;
- font-size: 12px;
+ font-size: 13px;
user-select: none;
}
@@ -592,6 +1026,12 @@
/* --- Responsive Start --- */
+@media (max-width: 1200px) {
+ .detail-structure-layout {
+ grid-template-columns: 1fr;
+ }
+}
+
@media (max-width: 1100px) {
.detail-layout {
grid-template-columns: 1fr;
@@ -615,17 +1055,28 @@
.detail-meta-grid,
.size-grid,
.detail-bottom-actions,
- .delivery-grid {
+ .delivery-grid,
+ .comment-spotlight-grid {
grid-template-columns: 1fr;
display: grid;
}
+ .structure-tags-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
.detail-bottom-actions button {
min-width: 100%;
}
.detail-thumbs {
flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .thumb-btn {
+ width: 78px;
+ height: 78px;
}
.detail-topbar {
@@ -656,6 +1107,42 @@
.discovery-note-btn {
margin-left: 0;
}
+
+ .review-section-header {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .review-section-main {
+ align-items: flex-start;
+ }
+
+ .review-summary-copy {
+ align-items: flex-start;
+ }
+
+ .review-popover {
+ position: static;
+ }
+
+ .review-popover::before {
+ display: none;
+ }
+
+ .review-details {
+ box-shadow: none;
+ }
+
+ .review-detail-row {
+ grid-template-columns: 72px 1fr 30px;
+ gap: 10px;
+ }
+}
+
+@media (max-width: 480px) {
+ .structure-tags-grid {
+ grid-template-columns: 1fr;
+ }
}
/* --- Responsive End --- */
\ No newline at end of file
diff --git a/parfum-shop/src/components/ProductDetailPage.jsx b/parfum-shop/src/components/ProductDetailPage.jsx
index bf959e5..fd13e58 100644
--- a/parfum-shop/src/components/ProductDetailPage.jsx
+++ b/parfum-shop/src/components/ProductDetailPage.jsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
import { Link, useNavigate, useParams } from "react-router";
import perfumes from "../data/perfumes";
import "../style/navbar.css";
@@ -16,6 +16,8 @@ function ProductDetailContent({ perfumeSlug }) {
perfume.gallery?.[0] || perfume.image
);
const [selectedSize, setSelectedSize] = useState("sample");
+ const [showReviewDetails, setShowReviewDetails] = useState(false);
+ const [commentPage, setCommentPage] = useState(0);
const sizeOptions = [
{
@@ -32,6 +34,41 @@ function ProductDetailContent({ perfumeSlug }) {
},
];
+ const reviewSummary = perfume.reviews || {
+ score: 0,
+ total: 0,
+ metrics: [],
+ };
+
+ const reviewComments = perfume.commentSpotlight || [];
+
+ const commentPages = [];
+ for (let i = 0; i < reviewComments.length; i += 2) {
+ commentPages.push(reviewComments.slice(i, i + 2));
+ }
+
+ const safeCommentPages =
+ commentPages.length > 0
+ ? commentPages
+ : [
+ [
+ {
+ id: "fallback-1",
+ name: "Atelier",
+ title: "Noch keine Stimmen",
+ text: "Für diesen Duft sind aktuell noch keine Kommentare hinterlegt.",
+ },
+ ],
+ ];
+
+ useEffect(() => {
+ const interval = window.setInterval(() => {
+ setCommentPage((prev) => (prev + 1) % safeCommentPages.length);
+ }, 5000);
+
+ return () => window.clearInterval(interval);
+ }, [safeCommentPages.length]);
+
return (
-
-
DUFTSTRUKTUR
-
-
-
PHASE 1: TOP NOTES (0–1 H)
-
- {perfume.phases.top.map((note) => (
- {note}
- ))}
-
-
-
-
-
PHASE 2: HEART NOTES (1–4 H)
-
- {perfume.phases.heart.map((note) => (
- {note}
- ))}
-
-
-
-
-
PHASE 3: BASE NOTES (4 H+)
-
- {perfume.phases.base.map((note) => (
- {note}
- ))}
-
-
-
-
-
MOODSETTING
-
{perfume.mood}
-
-
+
TRAGEHINWEIS
{perfume.dosage}
@@ -137,13 +138,83 @@ function ProductDetailContent({ perfumeSlug }) {
{perfume.occasion}
+
+
+
+
DUFTSTRUKTUR
+
+
+
PHASE 1: TOP NOTES (0–1 H)
+
+ {perfume.phases.top.map((note) => (
+
+ {note}
+
+ ))}
+
+
+
+
+
PHASE 2: HEART NOTES (1–4 H)
+
+ {perfume.phases.heart.map((note) => (
+
+ {note}
+
+ ))}
+
+
+
+
+
PHASE 3: BASE NOTES (4 H+)
+
+ {perfume.phases.base.map((note) => (
+
+ {note}
+
+ ))}
+
+
+
+
+
+
+
+
+
MOODSETTING
+
{perfume.mood}
+
-
Edition 04
-
{perfume.name}
-
{perfume.shortText}
+
+
Edition 04
+
{perfume.name}
+
{perfume.shortText}
+
@@ -240,6 +311,98 @@ function ProductDetailContent({ perfumeSlug }) {
+
+
+
+
STIMMEN ZUM DUFT
+
+
+ {safeCommentPages.map((_, index) => (
+
+
+
+
+ {safeCommentPages[commentPage].map((comment) => (
+
+ {comment.title}
+ {comment.text}
+ {comment.name}
+
+ ))}
+
+
+
+
+
RESONANZ
+
+ Verdichtete Wahrnehmung aus bisherigen Stimmen zu Charakter,
+ Haltbarkeit, Sillage und Originalität.
+
+
+
+
+
{reviewSummary.score.toFixed(1)}
+
+ ★★★★★
+ {reviewSummary.total} Stimmen
+
+
+
+
+
+
+
+ {showReviewDetails && (
+
+
+ {reviewSummary.metrics.map((metric) => (
+
+
{metric.label}
+
+
+ {metric.value.toFixed(1)}
+
+
+ ))}
+
+
+
+
+ )}
+
+