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 }) {
-

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) => (