diff --git a/parfum-shop/public/placeholder-character-panel.jpg b/parfum-shop/public/placeholder-character-panel.jpg
new file mode 100644
index 0000000..59aedf6
Binary files /dev/null and b/parfum-shop/public/placeholder-character-panel.jpg differ
diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css
index d9d10bf..3ba4fbf 100644
--- a/parfum-shop/src/components/ProductDetailPage.css
+++ b/parfum-shop/src/components/ProductDetailPage.css
@@ -516,16 +516,37 @@
}
.story-visual-panel {
+ position: relative;
min-height: clamp(360px, 42vw, 620px);
display: flex;
align-items: flex-end;
padding: clamp(1.2rem, 3vw, 2.4rem);
border: 1px solid var(--theme-border);
+ overflow: hidden;
+ background: var(--theme-surface-soft);
+}
+
+.story-visual-panel::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+ pointer-events: none;
background:
- radial-gradient(circle at 66% 32%, rgba(255, 255, 255, 0.11), transparent 14rem),
- radial-gradient(circle at 38% 68%, rgba(var(--theme-accent-rgb) / 0.1), transparent 17rem),
- linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
- var(--theme-paper);
+ linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.72)),
+ linear-gradient(90deg, rgba(0, 0, 0, 0.24), transparent 45%);
+}
+
+.story-visual-image {
+ position: absolute;
+ inset: 0;
+ z-index: 0;
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+ filter: saturate(0.92) contrast(1.04);
}
.character-facts {
@@ -540,14 +561,16 @@
min-height: 132px;
}
-.story-visual-panel > div {
+.story-visual-content {
+ position: relative;
+ z-index: 2;
width: 100%;
}
-.story-visual-panel > div > span:first-child {
+.story-visual-content > span:first-child {
display: block;
margin-bottom: var(--gap-sm);
- color: var(--theme-text-muted);
+ color: rgba(255, 255, 255, 0.68);
font-size: var(--text-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
@@ -564,9 +587,9 @@
align-items: center;
min-height: 40px;
padding: 0.55rem 0.85rem;
- border: 1px solid var(--theme-border);
- background: rgba(255, 255, 255, 0.035);
- color: var(--theme-text);
+ border: 1px solid rgba(255, 255, 255, 0.22);
+ background: rgba(0, 0, 0, 0.24);
+ color: #fff;
font-size: var(--text-sm);
letter-spacing: 0;
text-transform: none;
diff --git a/parfum-shop/src/components/ProductDetailPage.jsx b/parfum-shop/src/components/ProductDetailPage.jsx
index f966cfb..dc0ff63 100644
--- a/parfum-shop/src/components/ProductDetailPage.jsx
+++ b/parfum-shop/src/components/ProductDetailPage.jsx
@@ -7,6 +7,8 @@ import { formatChf } from "../shop/money";
import { useShop } from "../shop/useShop";
import "./ProductDetailPage.css";
+const STORY_PANEL_IMAGE = "/placeholder-character-panel.jpg";
+
const priceToCents = (price) => {
const match = String(price).match(/(\d+)/);
return match ? Number(match[1]) * 100 : 0;
@@ -207,7 +209,14 @@ function ProductStorySection({ perfume }) {
-
+
+
Material-Komposition
{perfume.materialTags.map((tag) => (
@@ -528,7 +537,7 @@ function ProductDetailContent({ perfumeSlug }) {
return (
-
+
diff --git a/parfum-shop/src/components/SharedNavbar.jsx b/parfum-shop/src/components/SharedNavbar.jsx
index 718242d..a599924 100644
--- a/parfum-shop/src/components/SharedNavbar.jsx
+++ b/parfum-shop/src/components/SharedNavbar.jsx
@@ -3,7 +3,7 @@ import { useShop } from "../shop/useShop";
import { useTheme } from "../theme/useTheme";
import "../style/navbar.css";
-function SharedNavbar({ variant = "light", active = "" }) {
+function SharedNavbar({ variant = "hero", active = "" }) {
const { cart, openCart, openProfile, user } = useShop();
const { isLight, toggleTheme } = useTheme();
const cartLabel =
diff --git a/parfum-shop/src/pages/AboutPage.jsx b/parfum-shop/src/pages/AboutPage.jsx
index 16acdc3..c94e2c8 100644
--- a/parfum-shop/src/pages/AboutPage.jsx
+++ b/parfum-shop/src/pages/AboutPage.jsx
@@ -5,7 +5,7 @@ import "./AboutPage.css";
function AboutPage() {
return (
-
+
diff --git a/parfum-shop/src/pages/DatenschutzPage.jsx b/parfum-shop/src/pages/DatenschutzPage.jsx
index 1dcb12b..e418356 100644
--- a/parfum-shop/src/pages/DatenschutzPage.jsx
+++ b/parfum-shop/src/pages/DatenschutzPage.jsx
@@ -4,7 +4,7 @@ import "./DatenschutzPage.css";
function DatenschutzPage() {
return (
-
+
diff --git a/parfum-shop/src/pages/DiscoverySetPage.css b/parfum-shop/src/pages/DiscoverySetPage.css
index 164e7d8..81c4778 100644
--- a/parfum-shop/src/pages/DiscoverySetPage.css
+++ b/parfum-shop/src/pages/DiscoverySetPage.css
@@ -2,9 +2,7 @@
min-height: 100vh;
padding: 0 0 var(--section-y-sm);
color: var(--theme-text);
- background:
- radial-gradient(circle at 88% 6%, rgba(var(--theme-accent-rgb) / 0.12), transparent 30rem),
- linear-gradient(180deg, var(--theme-bg), color-mix(in srgb, var(--theme-bg) 88%, #000 12%));
+ background: var(--theme-bg);
}
.discovery-topbar {
@@ -95,10 +93,10 @@
}
.discovery-hero-copy h1 {
- max-width: 10.8ch;
+ max-width: 9ch;
margin: clamp(0.75rem, 1.5vw, 1.15rem) 0 clamp(1rem, 2vw, 1.4rem);
color: var(--theme-text);
- font-size: clamp(2.8rem, 4.8vw, 6rem);
+ font-size: clamp(3.35rem, 6.2vw, 7.6rem);
line-height: 0.9;
font-weight: 300;
letter-spacing: 0;
@@ -107,7 +105,7 @@
}
.discovery-intro {
- max-width: var(--text-measure);
+ max-width: 36ch;
margin: 0;
color: var(--theme-text-muted);
font-size: var(--text-lg);
@@ -117,13 +115,14 @@
.discovery-hero-visual {
position: relative;
- grid-column: 4 / 10;
+ grid-column: 5 / 10;
grid-row: 1;
justify-self: center;
align-self: center;
z-index: 1;
display: grid;
place-items: center;
+ justify-items: end;
width: 100%;
min-height: inherit;
margin: 0;
@@ -134,10 +133,13 @@
position: relative;
z-index: 2;
display: block;
- width: min(100%, 560px);
+ width: min(100%, 520px);
+ height: min(56svh, 640px);
max-height: min(68svh, 760px);
- object-fit: contain;
- filter: drop-shadow(0 34px 72px rgba(0, 0, 0, 0.42));
+ border: 1px solid var(--theme-border);
+ object-fit: cover;
+ object-position: center;
+ filter: saturate(0.92) contrast(1.04) drop-shadow(0 34px 72px rgba(0, 0, 0, 0.42));
}
.discovery-panel-facts div,
@@ -151,6 +153,7 @@
color: var(--theme-text);
font-size: var(--text-base);
line-height: 1.55;
+ overflow-wrap: anywhere;
}
.discovery-order-panel {
@@ -216,15 +219,15 @@
align-items: center;
justify-content: center;
width: 100%;
- min-height: 52px;
+ min-height: 48px;
padding: 0.8rem 1.35rem;
border: 1px solid var(--theme-accent);
- border-radius: 999px;
+ border-radius: 0;
background: var(--theme-accent);
color: #fff;
cursor: pointer;
font-size: var(--text-sm);
- letter-spacing: 0.1em;
+ letter-spacing: 0.12em;
line-height: 1.25;
text-align: center;
text-transform: uppercase;
@@ -250,6 +253,7 @@
color: var(--theme-text-muted);
font-size: var(--text-sm);
line-height: 1.45;
+ overflow-wrap: anywhere;
}
.discovery-story-grid,
@@ -338,21 +342,46 @@
display: grid;
grid-template-columns: 1fr;
align-content: end;
- gap: var(--gap-md);
+ gap: clamp(0.9rem, 1.8vw, 1.25rem);
min-height: clamp(360px, 42vw, 620px);
padding: clamp(1.2rem, 3vw, 2.4rem);
border: 1px solid var(--theme-border);
background:
- radial-gradient(circle at 66% 32%, rgba(255, 255, 255, 0.1), transparent 14rem),
- linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
- var(--theme-paper);
+ linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008)),
+ color-mix(in srgb, var(--theme-bg) 88%, #000 12%);
+}
+
+.discovery-benefit-panel-head {
+ display: flex;
+ justify-content: space-between;
+ align-items: end;
+ gap: var(--gap-sm);
+ padding-bottom: clamp(1rem, 2vw, 1.35rem);
+ border-bottom: 1px solid var(--theme-border);
+}
+
+.discovery-benefit-panel-head span {
+ color: var(--theme-text-muted);
+ font-size: var(--text-xs);
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+}
+
+.discovery-benefit-panel-head strong {
+ color: var(--theme-text);
+ font-size: clamp(1.9rem, 4vw, 3.8rem);
+ font-weight: 300;
+ line-height: 0.9;
+ letter-spacing: 0;
+ white-space: nowrap;
}
.discovery-benefit {
display: grid;
- grid-template-columns: 2.2rem minmax(0, 1fr);
+ grid-template-columns: 1.75rem minmax(0, 1fr);
gap: var(--gap-sm);
align-items: start;
+ padding-top: 1rem;
}
.discovery-benefit-icon,
@@ -360,12 +389,12 @@
display: inline-flex;
align-items: center;
justify-content: center;
- width: 2rem;
- height: 2rem;
+ width: 1.55rem;
+ height: 1.55rem;
border: 1px solid rgba(var(--theme-accent-rgb) / 0.48);
- border-radius: 999px;
+ border-radius: 0;
color: var(--theme-accent);
- font-size: 1rem;
+ font-size: 0.82rem;
line-height: 1;
}
@@ -391,13 +420,14 @@
}
.discovery-section-heading {
- display: grid;
- grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
- gap: var(--gap-lg);
- align-items: end;
+ display: block;
margin-bottom: clamp(1.8rem, 4vw, 3.8rem);
}
+.discovery-section-heading h2 {
+ max-width: 11ch;
+}
+
.discovery-steps-grid,
.discovery-products-grid,
.discovery-comparison-grid {
@@ -481,9 +511,7 @@
place-items: center;
min-height: 0;
overflow: hidden;
- background:
- radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.08), transparent 48%),
- var(--theme-paper);
+ background: transparent;
}
.discovery-product-image img {
@@ -629,12 +657,14 @@
.discovery-hero-visual {
grid-column: auto;
grid-row: auto;
+ justify-items: center;
min-height: 0;
height: min(42svh, 420px);
}
.discovery-hero-visual img {
- width: min(78%, 480px);
+ width: min(100%, 480px);
+ height: 100%;
max-height: 100%;
}
@@ -705,7 +735,7 @@
}
.discovery-hero-visual img {
- width: min(88%, 380px);
+ width: 100%;
}
.discovery-panel-facts,
diff --git a/parfum-shop/src/pages/DiscoverySetPage.jsx b/parfum-shop/src/pages/DiscoverySetPage.jsx
index 31e0c61..72bc2ac 100644
--- a/parfum-shop/src/pages/DiscoverySetPage.jsx
+++ b/parfum-shop/src/pages/DiscoverySetPage.jsx
@@ -4,7 +4,7 @@ import SharedNavbar from "../components/SharedNavbar";
import { useShop } from "../shop/useShop";
import "./DiscoverySetPage.css";
-const DISCOVERY_SET_IMAGE = "/DISCOVERYSET.png";
+const DISCOVERY_SET_IMAGE = "/atmos-discovery-set-thumbnail.png";
const discoveryPanelFacts = [
{ label: "Umfang", value: "6 × 2ml" },
@@ -81,9 +81,9 @@ function DiscoveryOrderPanel({ onBuy }) {
- DISCOVERY SET BESTELLEN – CHF 48.–
+ Discovery Set bestellen – CHF 48.–
-
Nur das erste Set erstellt einen einmaligen CHF 48 Full-Size-Rabatt
+
Nur das erste Set erstellt einen einmaligen CHF 48 Full-Size-Rabatt.
);
@@ -94,18 +94,13 @@ function DiscoveryHero({ onBuy }) {
-
DISCOVERY SET
-
- DER SICHERSTE EINSTIEG
-
- IN DIE WELT DER NISCHEN-
-
- DÜFTE
-
+
Der Einstieg
+
Discovery Set
6 Düfte × 2ml. Jeden Duft eine Woche tragen. Verstehen, was
- wirklich funktioniert. Ohne Risiko.
+ wirklich funktioniert. Ohne Risiko. Der sichere Einstieg in die
+ Welt der Nischendüfte, bevor du dich für eine Full Size entscheidest.
@@ -117,7 +112,6 @@ function DiscoveryHero({ onBuy }) {
decoding="async"
/>
-
@@ -130,9 +124,9 @@ function DiscoveryStorySection() {
- WARUM DISCOVERY SET
+ Warum Discovery Set
-
DER KLÜGERE EINSTIEG IN NISCHENDÜFTE.
+
Der klügere Einstieg in Nischendüfte.
Nischen-Parfums sind keine Impulskäufe. Sie brauchen Zeit, um zu
verstehen, wie sie auf deiner Haut funktionieren, wie sie sich im
@@ -141,6 +135,11 @@ function DiscoveryStorySection() {
+
+ Testlogik
+ 6 × 2ml
+
+
{discoveryBenefits.map((benefit) => (
@@ -162,7 +161,7 @@ function DiscoveryProcessSection() {
- ABLAUF
+ Ablauf
So funktioniert's
@@ -185,9 +184,9 @@ function DiscoveryIncludedSection() {
- IM SET ENTHALTEN
+ Im Set enthalten
-
ALLE 6 SIGNATURE-DÜFTE ZUM TESTEN.
+ Alle 6 Signature-Düfte zum Testen.
@@ -252,9 +251,9 @@ function DiscoveryFinalCta({ onBuy }) {
- DISCOVERY SET
+ Discovery Set
-
DER SICHERSTE EINSTIEG.
+
Der sichere Einstieg.
Kostenloser Versand · 2–3 Werktage · Einmalige Anrechnung bei Full-Size
@@ -262,7 +261,7 @@ function DiscoveryFinalCta({ onBuy }) {
- DISCOVERY SET BESTELLEN – CHF 48.–
+ Discovery Set bestellen – CHF 48.–
@@ -277,7 +276,7 @@ function DiscoverySetPage() {
return (
-
+
diff --git a/parfum-shop/src/pages/ImpressumPage.jsx b/parfum-shop/src/pages/ImpressumPage.jsx
index 566e5d7..96bad61 100644
--- a/parfum-shop/src/pages/ImpressumPage.jsx
+++ b/parfum-shop/src/pages/ImpressumPage.jsx
@@ -4,7 +4,7 @@ import "./ImpressumPage.css";
function ImpressumPage() {
return (
-
+
diff --git a/parfum-shop/src/pages/SmallBatchPage.jsx b/parfum-shop/src/pages/SmallBatchPage.jsx
index 6ffd089..8d49662 100644
--- a/parfum-shop/src/pages/SmallBatchPage.jsx
+++ b/parfum-shop/src/pages/SmallBatchPage.jsx
@@ -60,7 +60,7 @@ function SmallBatchPage() {
return (
-
+
diff --git a/parfum-shop/src/pages/SupportPage.jsx b/parfum-shop/src/pages/SupportPage.jsx
index 090b805..9a8dbbc 100644
--- a/parfum-shop/src/pages/SupportPage.jsx
+++ b/parfum-shop/src/pages/SupportPage.jsx
@@ -5,7 +5,7 @@ import "./SupportPage.css";
function SupportPage() {
return (
-
+