Refine product detail layout and add delivery information section
This commit is contained in:
parent
012505e7bb
commit
3504220abc
@ -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 --- */
|
||||
@ -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 (
|
||||
<div className="detail-page">
|
||||
<nav className="navbar navbar--light">
|
||||
@ -85,43 +122,7 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="detail-structure">
|
||||
<h3>DUFTSTRUKTUR</h3>
|
||||
|
||||
<div className="structure-block">
|
||||
<span className="structure-phase">PHASE 1: TOP NOTES (0–1 H)</span>
|
||||
<div className="material-tags">
|
||||
{perfume.phases.top.map((note) => (
|
||||
<span key={note}>{note}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="structure-block">
|
||||
<span className="structure-phase">PHASE 2: HEART NOTES (1–4 H)</span>
|
||||
<div className="material-tags">
|
||||
{perfume.phases.heart.map((note) => (
|
||||
<span key={note}>{note}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="structure-block">
|
||||
<span className="structure-phase">PHASE 3: BASE NOTES (4 H+)</span>
|
||||
<div className="material-tags">
|
||||
{perfume.phases.base.map((note) => (
|
||||
<span key={note}>{note}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mood-box">
|
||||
<span className="mood-label">MOODSETTING</span>
|
||||
<p>{perfume.mood}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="detail-meta-grid">
|
||||
<div className="detail-meta-grid detail-meta-grid--top">
|
||||
<div>
|
||||
<span>TRAGEHINWEIS</span>
|
||||
<p>{perfume.dosage}</p>
|
||||
@ -137,13 +138,83 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
<p>{perfume.occasion}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="detail-structure-layout">
|
||||
<div className="detail-structure">
|
||||
<h3>DUFTSTRUKTUR</h3>
|
||||
|
||||
<div className="structure-block">
|
||||
<span className="structure-phase">PHASE 1: TOP NOTES (0–1 H)</span>
|
||||
<div className="structure-tags-grid">
|
||||
{perfume.phases.top.map((note) => (
|
||||
<span key={note} className="structure-tag">
|
||||
{note}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="structure-block">
|
||||
<span className="structure-phase">PHASE 2: HEART NOTES (1–4 H)</span>
|
||||
<div className="structure-tags-grid">
|
||||
{perfume.phases.heart.map((note) => (
|
||||
<span key={note} className="structure-tag">
|
||||
{note}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="structure-block">
|
||||
<span className="structure-phase">PHASE 3: BASE NOTES (4 H+)</span>
|
||||
<div className="structure-tags-grid">
|
||||
{perfume.phases.base.map((note) => (
|
||||
<span key={note} className="structure-tag">
|
||||
{note}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside className="structure-info-box">
|
||||
<span className="structure-info-label">ZUR EINORDNUNG</span>
|
||||
<p>
|
||||
Die Duftstruktur zeigt, wie sich der Duft über die Zeit entfaltet:
|
||||
der erste Eindruck im Auftakt, die eigentliche Signatur im Herzen
|
||||
und die Spur, die lange auf Haut und Kleidung bleibt.
|
||||
</p>
|
||||
|
||||
<div className="structure-info-legend">
|
||||
<div>
|
||||
<span className="structure-info-dot structure-info-dot--light" />
|
||||
<span>Auftakt</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="structure-info-dot structure-info-dot--mid" />
|
||||
<span>Herz</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="structure-info-dot structure-info-dot--strong" />
|
||||
<span>Basis</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div className="mood-box">
|
||||
<span className="mood-label">MOODSETTING</span>
|
||||
<p>{perfume.mood}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="detail-info">
|
||||
<div className="detail-heading">
|
||||
<span className="detail-kicker">Edition 04</span>
|
||||
<h1>{perfume.name}</h1>
|
||||
<p>{perfume.shortText}</p>
|
||||
<div className="detail-heading-copy">
|
||||
<span className="detail-kicker">Edition 04</span>
|
||||
<h1>{perfume.name}</h1>
|
||||
<p>{perfume.shortText}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="detail-section-block">
|
||||
@ -240,6 +311,98 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="comment-spotlight">
|
||||
<div className="comment-spotlight-header">
|
||||
<span className="label-title">STIMMEN ZUM DUFT</span>
|
||||
|
||||
<div className="comment-dots">
|
||||
{safeCommentPages.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
type="button"
|
||||
className={`comment-dot ${commentPage === index ? "active" : ""}`}
|
||||
onClick={() => setCommentPage(index)}
|
||||
aria-label={`Kommentargruppe ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="comment-spotlight-grid">
|
||||
{safeCommentPages[commentPage].map((comment) => (
|
||||
<article className="comment-card" key={comment.id}>
|
||||
<span className="comment-card-title">{comment.title}</span>
|
||||
<p>{comment.text}</p>
|
||||
<span className="comment-card-author">{comment.name}</span>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="review-section">
|
||||
<div className="review-section-header">
|
||||
<div className="review-section-copy">
|
||||
<span className="label-title">RESONANZ</span>
|
||||
<p className="review-section-text">
|
||||
Verdichtete Wahrnehmung aus bisherigen Stimmen zu Charakter,
|
||||
Haltbarkeit, Sillage und Originalität.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="review-section-main">
|
||||
<span className="review-score">{reviewSummary.score.toFixed(1)}</span>
|
||||
<div className="review-summary-copy">
|
||||
<span className="review-stars">★★★★★</span>
|
||||
<span className="review-count">{reviewSummary.total} Stimmen</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`review-panel ${showReviewDetails ? "is-open" : ""}`}>
|
||||
<button
|
||||
type="button"
|
||||
className="review-toggle"
|
||||
onClick={() => setShowReviewDetails((prev) => !prev)}
|
||||
aria-expanded={showReviewDetails}
|
||||
>
|
||||
<span>Detailbewertungen</span>
|
||||
<span className={showReviewDetails ? "review-toggle-icon open" : "review-toggle-icon"}>
|
||||
+
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{showReviewDetails && (
|
||||
<div className="review-popover">
|
||||
<div className="review-details">
|
||||
{reviewSummary.metrics.map((metric) => (
|
||||
<div className="review-detail-row" key={metric.label}>
|
||||
<span className="review-detail-label">{metric.label}</span>
|
||||
<div className="review-detail-bar">
|
||||
<div
|
||||
className="review-detail-fill"
|
||||
style={{ width: `${(metric.value / 5) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="review-detail-value">
|
||||
{metric.value.toFixed(1)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="review-write-button"
|
||||
disabled
|
||||
title="Später mit Login verfügbar"
|
||||
>
|
||||
Bewertung schreiben
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@ -21,15 +21,63 @@ const perfumes = [
|
||||
dosage: "2–3 Sprühstösse",
|
||||
longevity: "8–12 Stunden",
|
||||
occasion: "Studio, Konzentration, Arbeit, Beginn, Zurückhaltung.",
|
||||
description: "Parfümerie / Studio\nAtelier LM / Luz",
|
||||
description: "Atelier LM / Luz",
|
||||
origin: "Frankreich, 2024",
|
||||
concentration: "Eau de Parfum (18%)",
|
||||
edition: "Batch 04/24 – limitiert 500 Stück",
|
||||
edition: "Batch 04/24",
|
||||
gallery: [
|
||||
"/kalter-beton-product.png",
|
||||
"/kalter-beton-product.png",
|
||||
"/kalter-beton-product.png",
|
||||
],
|
||||
reviews: {
|
||||
score: 4.8,
|
||||
total: 126,
|
||||
metrics: [
|
||||
{ label: "CHARAKTER", value: 4.9 },
|
||||
{ label: "HALTBARKEIT", value: 4.7 },
|
||||
{ label: "SILLAGE", value: 4.6 },
|
||||
{ label: "ORIGINALITÄT", value: 4.9 },
|
||||
],
|
||||
},
|
||||
commentSpotlight: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Nora L.",
|
||||
title: "Architektonisch und ruhig",
|
||||
text: "Wirkt kühl, reduziert und trotzdem sehr präsent. Einer der ungewöhnlichsten Düfte, die ich in letzter Zeit getragen habe.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Milan S.",
|
||||
title: "Kein Mainstream-Duft",
|
||||
text: "Sehr eigenständig. Mineralisch, sauber und mit einer stillen Schärfe. Eher Konzept als gefällige Süße.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Elisa R.",
|
||||
title: "Perfekt für ruhige Tage",
|
||||
text: "Ich trage ihn im Atelier und bei konzentrierter Arbeit. Er wirkt kontrolliert, modern und sehr bewusst komponiert.",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Jonas T.",
|
||||
title: "Kalt, elegant, memorabel",
|
||||
text: "Am Anfang kühl und steinig, später viel weicher. Gerade diese Entwicklung macht den Duft für mich besonders.",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Lina F.",
|
||||
title: "Statement ohne Lautstärke",
|
||||
text: "Nicht laut, nicht gefällig, aber unglaublich charaktervoll. Genau das, was ich von einem Nischenduft erwarte.",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "David M.",
|
||||
title: "Sehr besondere Materialität",
|
||||
text: "Man merkt sofort, dass hier mit Raum, Oberfläche und Stimmung gearbeitet wurde. Sehr stimmig umgesetzt.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "02",
|
||||
@ -53,15 +101,63 @@ const perfumes = [
|
||||
dosage: "2–3 Sprühstösse",
|
||||
longevity: "7–11 Stunden",
|
||||
occasion: "Galerie, Abend, Konzentration, Übergang.",
|
||||
description: "Parfümerie / Studio\nAtelier LM / Luz",
|
||||
description: "Atelier LM / Luz",
|
||||
origin: "Italien, 2024",
|
||||
concentration: "Eau de Parfum (17%)",
|
||||
edition: "Batch 02/24 – limitiert 450 Stück",
|
||||
edition: "Batch 02/24",
|
||||
gallery: [
|
||||
"/NASSER MARMOR.png",
|
||||
"/NASSER MARMOR.png",
|
||||
"/NASSER MARMOR.png",
|
||||
],
|
||||
reviews: {
|
||||
score: 4.7,
|
||||
total: 98,
|
||||
metrics: [
|
||||
{ label: "CHARAKTER", value: 4.8 },
|
||||
{ label: "HALTBARKEIT", value: 4.5 },
|
||||
{ label: "SILLAGE", value: 4.4 },
|
||||
{ label: "ORIGINALITÄT", value: 4.8 },
|
||||
],
|
||||
},
|
||||
commentSpotlight: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Sarah K.",
|
||||
title: "Kühle Oberfläche, viel Tiefe",
|
||||
text: "Sehr glatt im Auftakt, fast wie nasser Stein. Danach viel weicher und hautnah. Elegant und modern.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Tobias E.",
|
||||
title: "Sehr sauber, aber nicht banal",
|
||||
text: "Er hat diese kühle Frische, ohne in Richtung Waschmittel zu kippen. Wirkt kontrolliert und hochwertig.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Lara W.",
|
||||
title: "Perfekt für Übergänge",
|
||||
text: "Zwischen Tag und Abend für mich ideal. Ruhig, hell und trotzdem nicht unsichtbar.",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Jan P.",
|
||||
title: "Fast skulptural",
|
||||
text: "Der Duft hat etwas Poliertes, fast Räumliches. Sehr stimmig für minimalistische Looks.",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Chiara N.",
|
||||
title: "Helle Kälte",
|
||||
text: "Für mich ein Duft mit Distanz und Sinnlichkeit zugleich. Sehr besonders.",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Noah R.",
|
||||
title: "Reduziert und fein",
|
||||
text: "Keine große Lautstärke, aber eine klare Signatur. Sehr gelungen für einen Nischenduft.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "03",
|
||||
@ -85,15 +181,63 @@ const perfumes = [
|
||||
dosage: "3–4 Sprühstösse",
|
||||
longevity: "6–10 Stunden",
|
||||
occasion: "Alltag, Nähe, Morgen, feine Präsenz.",
|
||||
description: "Parfümerie / Studio\nAtelier LM / Luz",
|
||||
description: "Atelier LM / Luz",
|
||||
origin: "Schweiz, 2024",
|
||||
concentration: "Eau de Parfum (16%)",
|
||||
edition: "Batch 03/24 – limitiert 600 Stück",
|
||||
edition: "Batch 03/24",
|
||||
gallery: [
|
||||
"/BLASSE SEIDE.png",
|
||||
"/BLASSE SEIDE.png",
|
||||
"/BLASSE SEIDE.png",
|
||||
],
|
||||
reviews: {
|
||||
score: 4.6,
|
||||
total: 114,
|
||||
metrics: [
|
||||
{ label: "CHARAKTER", value: 4.5 },
|
||||
{ label: "HALTBARKEIT", value: 4.3 },
|
||||
{ label: "SILLAGE", value: 4.2 },
|
||||
{ label: "ORIGINALITÄT", value: 4.7 },
|
||||
],
|
||||
},
|
||||
commentSpotlight: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Mira T.",
|
||||
title: "Sehr nah an der Haut",
|
||||
text: "Wirkt weich, pudrig und unglaublich fein. Eher ein persönlicher Duft als ein lautes Statement.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Emma J.",
|
||||
title: "Sanft, aber nicht langweilig",
|
||||
text: "Hat etwas Textiles, Helles und gleichzeitig sehr Kostbares. Für mich der eleganteste Alltagsduft der Reihe.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Luca B.",
|
||||
title: "Subtil und modern",
|
||||
text: "Sehr sauber und ruhig. Ich mag besonders die pudrige Weichheit im Drydown.",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Anna S.",
|
||||
title: "Leise Präsenz",
|
||||
text: "Man bemerkt ihn nicht sofort, aber genau das macht ihn so schön. Sehr intime Aura.",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Zoe F.",
|
||||
title: "Kaschmir statt Lautstärke",
|
||||
text: "Fühlt sich wie Stoff und Haut an, nicht wie klassisches Parfum. Sehr fein gemacht.",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Nico H.",
|
||||
title: "Unaufdringlich luxuriös",
|
||||
text: "Ich würde ihn nie als gefällig bezeichnen, eher als bewusst zurückgenommen. Sehr schön.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "04",
|
||||
@ -117,15 +261,63 @@ const perfumes = [
|
||||
dosage: "2–3 Sprühstösse",
|
||||
longevity: "8–12 Stunden",
|
||||
occasion: "Abend, Winter, Alleinsein, Konzentration.",
|
||||
description: "Parfümerie / Studio\nAtelier LM / Luz",
|
||||
description: "Atelier LM / Luz",
|
||||
origin: "Deutschland, 2024",
|
||||
concentration: "Eau de Parfum (19%)",
|
||||
edition: "Batch 01/24 – limitiert 350 Stück",
|
||||
edition: "Batch 01/24",
|
||||
gallery: [
|
||||
"/WEISSE ASCHE.png",
|
||||
"/WEISSE ASCHE.png",
|
||||
"/WEISSE ASCHE.png",
|
||||
],
|
||||
reviews: {
|
||||
score: 4.7,
|
||||
total: 87,
|
||||
metrics: [
|
||||
{ label: "CHARAKTER", value: 4.8 },
|
||||
{ label: "HALTBARKEIT", value: 4.7 },
|
||||
{ label: "SILLAGE", value: 4.4 },
|
||||
{ label: "ORIGINALITÄT", value: 4.9 },
|
||||
],
|
||||
},
|
||||
commentSpotlight: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Helena D.",
|
||||
title: "Staubig und poetisch",
|
||||
text: "Ein unglaublich stiller Duft mit heller Rauchigkeit. Fast kontemplativ in seiner Wirkung.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Raphael C.",
|
||||
title: "Nicht leicht zugänglich",
|
||||
text: "Man muss sich auf ihn einlassen, aber genau das finde ich spannend. Sehr eigenständig und memorabel.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Yara M.",
|
||||
title: "Wie Papier und Rauch",
|
||||
text: "Erinnert mich an kalte Luft, Papierstaub und helle Rückstände. Sehr atmosphärisch.",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Simon W.",
|
||||
title: "Perfekt für Winterabende",
|
||||
text: "Trage ich am liebsten allein oder sehr bewusst. Hat viel Ruhe und Haltung.",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Clara H.",
|
||||
title: "Rauch ohne Schwere",
|
||||
text: "Ich mag, dass er nicht dunkel und schwer wird, sondern eher trocken und hell bleibt.",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Ben L.",
|
||||
title: "Sehr nischig",
|
||||
text: "Kein Crowd-Pleaser, aber extrem spannend. Für mich einer der mutigsten Düfte der Kollektion.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "05",
|
||||
@ -149,15 +341,63 @@ const perfumes = [
|
||||
dosage: "1–2 Sprühstösse",
|
||||
longevity: "10–14 Stunden",
|
||||
occasion: "Nacht, Statement, Kälte, Formalität.",
|
||||
description: "Parfümerie / Studio\nAtelier LM / Luz",
|
||||
description: "Atelier LM / Luz",
|
||||
origin: "Frankreich, 2024",
|
||||
concentration: "Extrait de Parfum (24%)",
|
||||
edition: "Batch 05/24 – limitiert 300 Stück",
|
||||
edition: "Batch 05/24",
|
||||
gallery: [
|
||||
"/VERBRANNTES CHROM.png",
|
||||
"/VERBRANNTES CHROM.png",
|
||||
"/VERBRANNTES CHROM.png",
|
||||
],
|
||||
reviews: {
|
||||
score: 4.9,
|
||||
total: 73,
|
||||
metrics: [
|
||||
{ label: "CHARAKTER", value: 5.0 },
|
||||
{ label: "HALTBARKEIT", value: 4.9 },
|
||||
{ label: "SILLAGE", value: 4.8 },
|
||||
{ label: "ORIGINALITÄT", value: 4.9 },
|
||||
],
|
||||
},
|
||||
commentSpotlight: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Adrian V.",
|
||||
title: "Radikal und kontrolliert",
|
||||
text: "Dunkel, metallisch und extrem präsent. Trotzdem nie chaotisch. Sehr stark komponiert.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Leonie P.",
|
||||
title: "Statement mit Haltung",
|
||||
text: "Kein Duft für jeden Tag, aber für die richtigen Momente absolut perfekt. Sehr klar und kompromisslos.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Matteo N.",
|
||||
title: "Hitze auf Oberfläche",
|
||||
text: "Der Name passt erstaunlich gut. Man spürt förmlich Metall, Rauch und Glanz.",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Jasmin E.",
|
||||
title: "Luxus mit Risiko",
|
||||
text: "Ein riskanter Duft, aber genau deshalb so faszinierend. Nicht bequem, aber wunderschön.",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Robin T.",
|
||||
title: "Für formelle Nächte",
|
||||
text: "Sehr dunkle Eleganz. Für mich fast eher ein olfaktorisches Objekt als ein klassischer Duft.",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Elin K.",
|
||||
title: "Große Projektion",
|
||||
text: "Sehr lang haltbar und mit klarer Präsenz. Einer der stärksten Düfte der Kollektion.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "06",
|
||||
@ -181,15 +421,63 @@ const perfumes = [
|
||||
dosage: "1–2 Sprühstösse",
|
||||
longevity: "9–13 Stunden",
|
||||
occasion: "Abend, Urban, Nacht, Signaturduft.",
|
||||
description: "Parfümerie / Studio\nAtelier LM / Luz",
|
||||
description: "Atelier LM / Luz",
|
||||
origin: "Belgien, 2024",
|
||||
concentration: "Eau de Parfum (20%)",
|
||||
edition: "Batch 06/24 – limitiert 280 Stück",
|
||||
edition: "Batch 06/24",
|
||||
gallery: [
|
||||
"/SCHWARZES BENZIN.png",
|
||||
"/SCHWARZES BENZIN.png",
|
||||
"/SCHWARZES BENZIN.png",
|
||||
],
|
||||
reviews: {
|
||||
score: 4.8,
|
||||
total: 91,
|
||||
metrics: [
|
||||
{ label: "CHARAKTER", value: 4.9 },
|
||||
{ label: "HALTBARKEIT", value: 4.8 },
|
||||
{ label: "SILLAGE", value: 4.7 },
|
||||
{ label: "ORIGINALITÄT", value: 4.8 },
|
||||
],
|
||||
},
|
||||
commentSpotlight: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Tina B.",
|
||||
title: "Asphalt nach Regen",
|
||||
text: "Der petrolige Auftakt ist mutig, aber sehr schön eingebunden. Dunkel, urban und glänzend.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Marko F.",
|
||||
title: "Verboten trifft elegant",
|
||||
text: "Hat etwas Gefährliches, aber gleichzeitig sehr Stilvolles. Genau das macht ihn so spannend.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Jule R.",
|
||||
title: "Leder, Rauch, Nacht",
|
||||
text: "Für mich ein Duft für späte Stunden, schwarze Stoffe und kalte Luft. Sehr filmisch.",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Felix G.",
|
||||
title: "Signatur mit Kante",
|
||||
text: "Nicht weich, nicht nett, aber sehr wiedererkennbar. Einer dieser Düfte, die im Kopf bleiben.",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Paula S.",
|
||||
title: "Modern und düster",
|
||||
text: "Hat etwas industriell Glamouröses. Trage ich am liebsten abends in der Stadt.",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Nils A.",
|
||||
title: "Sehr eigene Handschrift",
|
||||
text: "Man riecht sofort, dass hier kein generischer Duft gemeint ist. Sehr eigen, sehr klar, sehr bewusst.",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user