add spacing and responsive changes
This commit is contained in:
parent
5ed18bda75
commit
dd841dc6d6
@ -933,6 +933,10 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.detail-page {
|
||||
padding-bottom: 4.5rem;
|
||||
}
|
||||
|
||||
.product-hero {
|
||||
grid-template-columns: 1fr;
|
||||
align-content: start;
|
||||
@ -974,11 +978,11 @@
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
min-height: 0;
|
||||
height: clamp(18rem, 48svh, 32rem);
|
||||
height: clamp(22rem, 50svh, 34rem);
|
||||
}
|
||||
|
||||
.product-hero-image {
|
||||
width: min(74%, 460px);
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
@ -1035,6 +1039,7 @@
|
||||
@media (max-width: 760px) {
|
||||
.detail-page {
|
||||
padding: 0;
|
||||
padding-bottom: 4.5rem;
|
||||
}
|
||||
|
||||
.product-hero {
|
||||
@ -1053,12 +1058,13 @@
|
||||
}
|
||||
|
||||
.product-hero-visual {
|
||||
height: clamp(13rem, 32svh, 18rem);
|
||||
height: clamp(22rem, 50svh, 32rem);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.product-hero-image {
|
||||
width: min(68%, 280px);
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.character-facts,
|
||||
@ -1125,8 +1131,7 @@
|
||||
}
|
||||
|
||||
.product-purchase-panel {
|
||||
min-width: 0;
|
||||
gap: var(--gap-2xs);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.purchase-price-row {
|
||||
@ -1140,18 +1145,18 @@
|
||||
|
||||
.size-card {
|
||||
min-width: 0;
|
||||
min-height: 70px;
|
||||
gap: 0.2rem;
|
||||
padding: 0.6rem 0.7rem;
|
||||
min-height: 56px;
|
||||
gap: 0.15rem;
|
||||
padding: 0.5rem 0.6rem;
|
||||
}
|
||||
|
||||
.size-title {
|
||||
font-size: 0.66rem;
|
||||
font-size: 0.64rem;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
|
||||
.size-card strong {
|
||||
font-size: 0.98rem;
|
||||
font-size: 0.92rem;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@ -1167,6 +1172,10 @@
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.purchase-actions .restock-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.purchase-discovery-note,
|
||||
.reviews-heading,
|
||||
.recommendation-heading {
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Link, useParams } from "react-router";
|
||||
import perfumes from "../data/perfumes";
|
||||
import SharedNavbar from "./SharedNavbar";
|
||||
import PageMeta from "./seo/PageMeta";
|
||||
import StickyBuyBar from "./StickyBuyBar";
|
||||
import { useProductTransition } from "../transitions/ProductTransitionContext";
|
||||
import { useShop } from "../shop/useShop";
|
||||
import { formatChf } from "../shop/money";
|
||||
@ -73,6 +74,7 @@ function ProductPurchasePanel({
|
||||
discountPreviewCents,
|
||||
addToCart,
|
||||
subscribeToProduct,
|
||||
panelRef,
|
||||
}) {
|
||||
const selectedProductId = `${perfume.slug}-${selectedSize === "sample" ? "sample" : "full"}`;
|
||||
const selectedProductLabel = selectedSize === "sample" ? "Probe" : "50 ml Flakon";
|
||||
@ -92,7 +94,7 @@ function ProductPurchasePanel({
|
||||
];
|
||||
|
||||
return (
|
||||
<aside className="product-purchase-panel" data-product-transition-reveal>
|
||||
<aside className="product-purchase-panel" ref={panelRef} data-product-transition-reveal>
|
||||
<div className="purchase-price-row">
|
||||
<span>Preis</span>
|
||||
<strong>{perfume.prices[selectedSize]}</strong>
|
||||
@ -176,6 +178,7 @@ function ProductHero({
|
||||
discountPreviewCents,
|
||||
addToCart,
|
||||
subscribeToProduct,
|
||||
panelRef,
|
||||
}) {
|
||||
const galleryImages = [...new Set([perfume.image, ...(perfume.gallery || [])])].slice(0, 3);
|
||||
|
||||
@ -237,6 +240,7 @@ function ProductHero({
|
||||
discountPreviewCents={discountPreviewCents}
|
||||
addToCart={addToCart}
|
||||
subscribeToProduct={subscribeToProduct}
|
||||
panelRef={panelRef}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
@ -559,6 +563,7 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
[perfumeSlug]
|
||||
);
|
||||
|
||||
const purchasePanelRef = useRef(null);
|
||||
const [selectedImage, setSelectedImage] = useState(
|
||||
getImageForSize(perfume, "full")
|
||||
);
|
||||
@ -648,6 +653,7 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
discountPreviewCents={discountPreviewCents}
|
||||
addToCart={addToCart}
|
||||
subscribeToProduct={subscribeToProduct}
|
||||
panelRef={purchasePanelRef}
|
||||
/>
|
||||
|
||||
<ProductStorySection perfume={perfume} />
|
||||
@ -667,6 +673,24 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
startProductTransition={startProductTransition}
|
||||
/>
|
||||
</main>
|
||||
|
||||
<StickyBuyBar
|
||||
observeRef={purchasePanelRef}
|
||||
alwaysVisibleMobile
|
||||
sizes={[
|
||||
{ key: "full", label: "50 ml", price: perfume.prices.full },
|
||||
{ key: "sample", label: "Probe 2 ml", price: perfume.prices.sample },
|
||||
]}
|
||||
selectedSize={selectedSize}
|
||||
onSizeChange={handleSizeSelection}
|
||||
onBuy={() =>
|
||||
addToCart(
|
||||
`${perfume.slug}-${selectedSize === "sample" ? "sample" : "full"}`,
|
||||
1,
|
||||
`${perfume.name} ${selectedSize === "sample" ? "Probe" : "50 ml Flakon"} wurde in den Warenkorb gelegt.`
|
||||
).catch(() => {})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -34,12 +34,15 @@ const getStageRect = (sourceRect) => {
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
const sourceRatio = sourceRect.height / sourceRect.width || 1;
|
||||
const isMobile = viewportWidth <= 760;
|
||||
const maxWidthFraction = isMobile ? 0.85 : 0.56;
|
||||
const maxHeightFraction = isMobile ? 0.52 : 0.72;
|
||||
const maxAbsWidth = isMobile ? viewportWidth * maxWidthFraction : 620;
|
||||
const stageWidth = Math.min(
|
||||
Math.max(sourceRect.width * 1.16, 260),
|
||||
viewportWidth * 0.56,
|
||||
620
|
||||
maxAbsWidth
|
||||
);
|
||||
const stageHeight = Math.min(stageWidth * sourceRatio, viewportHeight * 0.72);
|
||||
const stageHeight = Math.min(stageWidth * sourceRatio, viewportHeight * maxHeightFraction);
|
||||
const normalizedWidth = stageHeight / sourceRatio;
|
||||
|
||||
return {
|
||||
|
||||
110
parfum-shop/src/components/StickyBuyBar.css
Normal file
110
parfum-shop/src/components/StickyBuyBar.css
Normal file
@ -0,0 +1,110 @@
|
||||
.sticky-buy-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.sticky-buy-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 900;
|
||||
display: block;
|
||||
padding: 0.55rem var(--page-x, 1rem);
|
||||
background: var(--theme-bg);
|
||||
border-top: 1px solid var(--theme-border);
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform var(--duration-med, 0.3s) var(--ease-out, ease-out),
|
||||
opacity var(--duration-med, 0.3s) var(--ease-out, ease-out);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sticky-buy-bar.is-visible {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.sticky-buy-bar__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--gap-sm, 0.75rem);
|
||||
max-width: 46rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.sticky-buy-bar__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sticky-buy-bar__label {
|
||||
color: var(--theme-text-muted);
|
||||
font-size: var(--text-xs, 0.72rem);
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sticky-buy-bar__price {
|
||||
color: var(--theme-text);
|
||||
font-size: clamp(0.92rem, 3vw, 1.1rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ---- segmented size toggle ---- */
|
||||
|
||||
.sticky-buy-bar__toggle {
|
||||
display: flex;
|
||||
border: 1px solid var(--theme-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sticky-buy-bar__tab {
|
||||
padding: 0.4rem 0.65rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--theme-text-muted);
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color var(--duration-med, 0.3s) var(--ease-out, ease-out),
|
||||
background-color var(--duration-med, 0.3s) var(--ease-out, ease-out);
|
||||
}
|
||||
|
||||
.sticky-buy-bar__tab + .sticky-buy-bar__tab {
|
||||
border-left: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
.sticky-buy-bar__tab.active {
|
||||
color: var(--theme-accent-contrast, #fff);
|
||||
background: var(--theme-accent);
|
||||
}
|
||||
|
||||
/* ---- buy button ---- */
|
||||
|
||||
.sticky-buy-bar .atmos-btn {
|
||||
flex-shrink: 0;
|
||||
min-width: 6.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.sticky-buy-bar.is-always-visible {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
71
parfum-shop/src/components/StickyBuyBar.jsx
Normal file
71
parfum-shop/src/components/StickyBuyBar.jsx
Normal file
@ -0,0 +1,71 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import "./StickyBuyBar.css";
|
||||
|
||||
function StickyBuyBar({ label, price, onBuy, observeRef, sizes, selectedSize, onSizeChange, alwaysVisibleMobile }) {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const sentinelRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const target = observeRef?.current ?? sentinelRef.current;
|
||||
if (!target) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => setVisible(!entry.isIntersecting),
|
||||
{ threshold: 0 }
|
||||
);
|
||||
|
||||
observer.observe(target);
|
||||
return () => observer.disconnect();
|
||||
}, [observeRef]);
|
||||
|
||||
const classes = [
|
||||
"sticky-buy-bar",
|
||||
visible && "is-visible",
|
||||
alwaysVisibleMobile && "is-always-visible",
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
const currentPrice = sizes
|
||||
? sizes.find((s) => s.key === selectedSize)?.price
|
||||
: price;
|
||||
|
||||
return (
|
||||
<>
|
||||
{!observeRef && <span ref={sentinelRef} aria-hidden="true" />}
|
||||
<div className={classes}>
|
||||
<div className="sticky-buy-bar__inner">
|
||||
{sizes ? (
|
||||
<div className="sticky-buy-bar__left">
|
||||
<div className="sticky-buy-bar__toggle">
|
||||
{sizes.map((s) => (
|
||||
<button
|
||||
key={s.key}
|
||||
type="button"
|
||||
className={`sticky-buy-bar__tab ${selectedSize === s.key ? "active" : ""}`}
|
||||
onClick={() => onSizeChange(s.key)}
|
||||
>
|
||||
{s.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<strong className="sticky-buy-bar__price">{currentPrice}</strong>
|
||||
</div>
|
||||
) : (
|
||||
<div className="sticky-buy-bar__left">
|
||||
<span className="sticky-buy-bar__label">{label}</span>
|
||||
<strong className="sticky-buy-bar__price">{currentPrice}</strong>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="atmos-btn atmos-btn--primary atmos-btn--uppercase atmos-btn--sm"
|
||||
onClick={onBuy}
|
||||
>
|
||||
Kaufen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default StickyBuyBar;
|
||||
@ -98,8 +98,7 @@
|
||||
filter: saturate(0.92) contrast(1.04) var(--shadow-product);
|
||||
}
|
||||
|
||||
.discovery-panel-facts div,
|
||||
.discovery-benefit {
|
||||
.discovery-panel-facts div {
|
||||
padding-top: var(--gap-sm);
|
||||
border-top: 1px solid var(--theme-border);
|
||||
}
|
||||
@ -256,16 +255,14 @@
|
||||
}
|
||||
|
||||
.discovery-benefit-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
align-content: end;
|
||||
gap: var(--gap-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
min-height: clamp(360px, 42vw, 620px);
|
||||
padding: clamp(1.2rem, 3vw, 2.4rem);
|
||||
border: 1px solid var(--theme-border);
|
||||
background:
|
||||
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%);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.discovery-benefit-panel-head {
|
||||
@ -273,7 +270,8 @@
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
gap: var(--gap-sm);
|
||||
padding-bottom: var(--gap-sm);
|
||||
padding-bottom: var(--gap-md);
|
||||
margin-bottom: var(--gap-md);
|
||||
border-bottom: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
@ -294,11 +292,15 @@
|
||||
}
|
||||
|
||||
.discovery-benefit {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: var(--gap-sm);
|
||||
align-items: start;
|
||||
padding-top: var(--gap-sm);
|
||||
border-top: 1px solid var(--theme-border);
|
||||
margin-top: var(--gap-sm);
|
||||
}
|
||||
|
||||
.discovery-benefit:first-of-type {
|
||||
border-top: 0;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.discovery-benefit strong {
|
||||
@ -339,48 +341,42 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Layout columns are provided by the global Grid12 system (see Grid.jsx). */
|
||||
.discovery-steps-grid {
|
||||
.discovery-steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--gap-md);
|
||||
margin-top: var(--gap-lg);
|
||||
}
|
||||
|
||||
.discovery-step-card {
|
||||
border: 1px solid var(--theme-border);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
|
||||
var(--theme-surface-soft);
|
||||
.discovery-step {
|
||||
padding-top: var(--gap-sm);
|
||||
border-top: 1px solid var(--theme-border);
|
||||
}
|
||||
|
||||
.discovery-step-card {
|
||||
min-height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: var(--gap-md);
|
||||
padding: clamp(1rem, 2vw, 1.5rem);
|
||||
}
|
||||
|
||||
.discovery-step-number {
|
||||
.discovery-step__number {
|
||||
display: block;
|
||||
margin-bottom: var(--gap-md);
|
||||
color: var(--theme-accent);
|
||||
font-size: var(--text-sm);
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
.discovery-step-card h3 {
|
||||
margin: 0;
|
||||
.discovery-step__title {
|
||||
margin: 0 0 var(--gap-xs);
|
||||
color: var(--theme-text);
|
||||
font-size: var(--text-lg);
|
||||
font-size: clamp(1.1rem, 1.8vw, 1.35rem);
|
||||
font-weight: 400;
|
||||
line-height: 1.08;
|
||||
line-height: 1.1;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.discovery-step-card p {
|
||||
.discovery-step__text {
|
||||
margin: 0;
|
||||
max-width: 32ch;
|
||||
color: var(--theme-text-muted);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.65;
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.discovery-included-layout {
|
||||
@ -660,11 +656,11 @@
|
||||
grid-row: auto;
|
||||
justify-items: center;
|
||||
min-height: 0;
|
||||
height: clamp(18rem, 48svh, 32rem);
|
||||
height: clamp(20rem, 50svh, 34rem);
|
||||
}
|
||||
|
||||
.discovery-hero-visual img {
|
||||
width: min(78%, 500px);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
@ -680,6 +676,10 @@
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.discovery-page {
|
||||
padding-bottom: 4.5rem;
|
||||
}
|
||||
|
||||
.discovery-hero {
|
||||
grid-template-columns: 1fr;
|
||||
gap: clamp(0.75rem, 2vw, 1rem);
|
||||
@ -688,12 +688,15 @@
|
||||
padding-bottom: clamp(1rem, 3vw, 1.5rem);
|
||||
}
|
||||
|
||||
.discovery-hero-stage,
|
||||
.discovery-order-panel {
|
||||
.discovery-hero-stage {
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.discovery-order-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.discovery-hero-copy {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@ -715,12 +718,12 @@
|
||||
}
|
||||
|
||||
.discovery-hero-visual {
|
||||
height: clamp(15rem, 36svh, 24rem);
|
||||
height: clamp(22rem, 52svh, 34rem);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.discovery-hero-visual img {
|
||||
width: min(82%, 420px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.discovery-panel-facts,
|
||||
@ -741,6 +744,10 @@
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.discovery-steps {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.discovery-story-grid::before,
|
||||
.discovery-process-section::before,
|
||||
.discovery-included::before {
|
||||
|
||||
@ -5,6 +5,7 @@ import perfumes from "../data/perfumes";
|
||||
import SharedNavbar from "../components/SharedNavbar";
|
||||
import Grid, { Col } from "../components/layout/Grid";
|
||||
import PageMeta from "../components/seo/PageMeta";
|
||||
import StickyBuyBar from "../components/StickyBuyBar";
|
||||
import { useShop } from "../shop/useShop";
|
||||
import "./DiscoverySetPage.css";
|
||||
|
||||
@ -54,9 +55,9 @@ const discoverySteps = [
|
||||
},
|
||||
];
|
||||
|
||||
function DiscoveryOrderPanel({ onBuy }) {
|
||||
function DiscoveryOrderPanel({ onBuy, panelRef }) {
|
||||
return (
|
||||
<aside className="discovery-order-panel">
|
||||
<aside className="discovery-order-panel" ref={panelRef}>
|
||||
<div className="discovery-price-row">
|
||||
<span>Preis</span>
|
||||
<strong>CHF 48.–</strong>
|
||||
@ -85,7 +86,7 @@ function DiscoveryOrderPanel({ onBuy }) {
|
||||
);
|
||||
}
|
||||
|
||||
function DiscoveryHero({ onBuy }) {
|
||||
function DiscoveryHero({ onBuy, panelRef }) {
|
||||
return (
|
||||
<section className="discovery-hero">
|
||||
<div className="discovery-hero-stage">
|
||||
@ -110,7 +111,7 @@ function DiscoveryHero({ onBuy }) {
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<DiscoveryOrderPanel onBuy={onBuy} />
|
||||
<DiscoveryOrderPanel onBuy={onBuy} panelRef={panelRef} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -159,23 +160,15 @@ function DiscoveryProcessSection() {
|
||||
<h2 data-reveal="lines">So funktioniert's</h2>
|
||||
</div>
|
||||
|
||||
<Grid gap="sm" className="discovery-steps-grid">
|
||||
<div className="discovery-steps">
|
||||
{discoverySteps.map((step) => (
|
||||
<Col
|
||||
key={step.number}
|
||||
as="article"
|
||||
span={12}
|
||||
md={6}
|
||||
lg={4}
|
||||
className="discovery-step-card"
|
||||
data-reveal="fade"
|
||||
>
|
||||
<span className="discovery-step-number">{step.number}</span>
|
||||
<h3>{step.title}</h3>
|
||||
<p>{step.text}</p>
|
||||
</Col>
|
||||
<article key={step.number} className="discovery-step" data-reveal="fade">
|
||||
<span className="discovery-step__number">{step.number}</span>
|
||||
<h3 className="discovery-step__title">{step.title}</h3>
|
||||
<p className="discovery-step__text">{step.text}</p>
|
||||
</article>
|
||||
))}
|
||||
</Grid>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -381,6 +374,7 @@ function DiscoveryFinalCta({ onBuy }) {
|
||||
|
||||
function DiscoverySetPage() {
|
||||
const { addToCart } = useShop();
|
||||
const orderPanelRef = useRef(null);
|
||||
const buyDiscoverySet = () =>
|
||||
addToCart("discovery-set", 1, "Discovery Set wurde in den Warenkorb gelegt.").catch(() => {});
|
||||
|
||||
@ -394,12 +388,20 @@ function DiscoverySetPage() {
|
||||
<SharedNavbar variant="hero" active="testen" />
|
||||
|
||||
<main id="main-content" className="shell">
|
||||
<DiscoveryHero onBuy={buyDiscoverySet} />
|
||||
<DiscoveryHero onBuy={buyDiscoverySet} panelRef={orderPanelRef} />
|
||||
<DiscoveryStorySection />
|
||||
<DiscoveryIncludedSection />
|
||||
<DiscoveryProcessSection />
|
||||
<DiscoveryFinalCta onBuy={buyDiscoverySet} />
|
||||
</main>
|
||||
|
||||
<StickyBuyBar
|
||||
label="Discovery Set"
|
||||
price="CHF 48.–"
|
||||
observeRef={orderPanelRef}
|
||||
onBuy={buyDiscoverySet}
|
||||
alwaysVisibleMobile
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -670,14 +670,12 @@ body.theme-light .hero-wordmark__image {
|
||||
}
|
||||
|
||||
.hero-product {
|
||||
/* Phone: keep the product centered, but narrower than the viewport
|
||||
so it does not crowd the copy block near the bottom. */
|
||||
aspect-ratio: auto;
|
||||
top: clamp(12.5rem, 28svh, 16rem);
|
||||
top: clamp(11.5rem, 26svh, 15rem);
|
||||
left: 50%;
|
||||
right: auto;
|
||||
width: clamp(12.5rem, 62vw, 17rem);
|
||||
height: clamp(13.5rem, 31svh, 17rem);
|
||||
width: clamp(14rem, 72vw, 20rem);
|
||||
height: clamp(15rem, 38svh, 20rem);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@ -734,7 +732,7 @@ body.theme-light .hero-wordmark__image {
|
||||
|
||||
.discovery-banner {
|
||||
min-height: 0;
|
||||
aspect-ratio: 1 / 1;
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
@ -746,10 +744,9 @@ body.theme-light .hero-wordmark__image {
|
||||
}
|
||||
|
||||
.hero-product {
|
||||
/* Slightly tighter slot for compact phones. */
|
||||
top: clamp(12rem, 28svh, 14.5rem);
|
||||
width: clamp(12rem, 62vw, 16rem);
|
||||
height: clamp(13rem, 31svh, 16.5rem);
|
||||
top: clamp(11rem, 26svh, 14rem);
|
||||
width: clamp(13rem, 70vw, 18rem);
|
||||
height: clamp(14rem, 36svh, 18rem);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user