Add discovery set page with product overview, benefits, and purchase flow
This commit is contained in:
parent
3671509f82
commit
54c22ca24b
@ -5,6 +5,7 @@ import AboutPage from "./pages/AboutPage";
|
||||
import ImpressumPage from "./pages/ImpressumPage";
|
||||
import DatenschutzPage from "./pages/DatenschutzPage";
|
||||
import SupportPage from "./pages/SupportPage";
|
||||
import DiscoverySetPage from "./pages/DiscoverySetPage";
|
||||
import Footer from "./components/Footer";
|
||||
import SupportChatbot from "./components/SupportChatbot";
|
||||
|
||||
@ -18,6 +19,7 @@ function App() {
|
||||
<Route path="/impressum" element={<ImpressumPage />} />
|
||||
<Route path="/datenschutz" element={<DatenschutzPage />} />
|
||||
<Route path="/support" element={<SupportPage />} />
|
||||
<Route path="/discovery-set" element={<DiscoverySetPage />} />
|
||||
</Routes>
|
||||
|
||||
<Footer />
|
||||
|
||||
@ -19,7 +19,7 @@ function Footer() {
|
||||
<nav className="site-footer__nav">
|
||||
<Link to="/">Startseite</Link>
|
||||
<Link to="/#dufte">Düfte</Link>
|
||||
<Link to="/#testen">Discovery Set</Link>
|
||||
<Link to="/discovery-set">Discovery Set</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
@ -933,6 +933,10 @@
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.discovery-note-btn:hover {
|
||||
|
||||
@ -51,15 +51,15 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
commentPages.length > 0
|
||||
? commentPages
|
||||
: [
|
||||
[
|
||||
{
|
||||
id: "fallback-1",
|
||||
name: "Atelier",
|
||||
title: "Noch keine Stimmen",
|
||||
text: "Für diesen Duft sind aktuell noch keine Kommentare hinterlegt.",
|
||||
},
|
||||
],
|
||||
];
|
||||
[
|
||||
{
|
||||
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(() => {
|
||||
@ -74,12 +74,12 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
<nav className="navbar navbar--light">
|
||||
<div className="nav-pill">
|
||||
<Link to="/" className="nav-link">
|
||||
atmoos
|
||||
atmos
|
||||
</Link>
|
||||
<Link to="/#dufte" className="nav-link active">
|
||||
Düfte
|
||||
</Link>
|
||||
<Link to="/#testen" className="nav-link">
|
||||
<Link to="/discovery-set" className="nav-link">
|
||||
Testen
|
||||
</Link>
|
||||
<a href="#cart" className="nav-link">
|
||||
@ -253,9 +253,9 @@ function ProductDetailContent({ perfumeSlug }) {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button className="discovery-note-btn" type="button">
|
||||
<Link to="/discovery-set" className="discovery-note-btn">
|
||||
Zum Set
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<button className="buy-button" type="button">
|
||||
|
||||
@ -13,7 +13,7 @@ function AboutPage() {
|
||||
<Link to="/#dufte" className="nav-link">
|
||||
Düfte
|
||||
</Link>
|
||||
<Link to="/#testen" className="nav-link">
|
||||
<Link to="/discovery-set" className="nav-link">
|
||||
Testen
|
||||
</Link>
|
||||
<a href="#cart" className="nav-link">
|
||||
|
||||
@ -13,7 +13,7 @@ function DatenschutzPage() {
|
||||
<Link to="/#dufte" className="nav-link">
|
||||
Düfte
|
||||
</Link>
|
||||
<Link to="/#testen" className="nav-link">
|
||||
<Link to="/discovery-set" className="nav-link">
|
||||
Testen
|
||||
</Link>
|
||||
<a href="#cart" className="nav-link">
|
||||
|
||||
449
parfum-shop/src/pages/DiscoverySetPage.css
Normal file
449
parfum-shop/src/pages/DiscoverySetPage.css
Normal file
@ -0,0 +1,449 @@
|
||||
.discovery-page {
|
||||
min-height: 100vh;
|
||||
color: #1f1f1f;
|
||||
padding: 26px 38px 38px;
|
||||
background:
|
||||
linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)),
|
||||
linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45));
|
||||
}
|
||||
|
||||
.discovery-shell {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #d9d9d9;
|
||||
padding: 0 38px 38px;
|
||||
}
|
||||
|
||||
.discovery-topbar {
|
||||
padding: 22px 0 10px;
|
||||
}
|
||||
|
||||
.discovery-back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: #1f1f1f;
|
||||
letter-spacing: 0.01em;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.discovery-back-link:hover {
|
||||
opacity: 0.65;
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.discovery-back-arrow {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.discovery-kicker,
|
||||
.discovery-label {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.discovery-hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.9fr);
|
||||
gap: 42px;
|
||||
align-items: start;
|
||||
padding: 18px 0 42px;
|
||||
}
|
||||
|
||||
.discovery-hero-copy h1 {
|
||||
margin: 14px 0 22px;
|
||||
font-size: 62px;
|
||||
line-height: 0.94;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.05em;
|
||||
color: #131313;
|
||||
}
|
||||
|
||||
.discovery-intro {
|
||||
max-width: 620px;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
line-height: 1.55;
|
||||
color: #3f3f3f;
|
||||
}
|
||||
|
||||
.discovery-benefits {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
margin-top: 42px;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.discovery-benefit {
|
||||
display: grid;
|
||||
grid-template-columns: 28px 1fr;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.discovery-benefit-icon {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.discovery-benefit strong {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #131313;
|
||||
}
|
||||
|
||||
.discovery-benefit p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
|
||||
.discovery-hero-actions {
|
||||
margin-top: 40px;
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
.discovery-primary-btn {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: #111;
|
||||
color: #fff;
|
||||
padding: 20px 24px;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.12em;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.discovery-primary-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.discovery-hero-actions p,
|
||||
.discovery-bottom-cta p {
|
||||
margin: 12px 0 0;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.discovery-mood-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.discovery-mood-tile {
|
||||
aspect-ratio: 1 / 1;
|
||||
overflow: hidden;
|
||||
background: #eaeaea;
|
||||
}
|
||||
|
||||
.discovery-mood-tile img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.discovery-included,
|
||||
.discovery-comparison-section {
|
||||
padding-top: 46px;
|
||||
}
|
||||
|
||||
.discovery-section-heading {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.discovery-section-heading h2 {
|
||||
margin: 10px 0 0;
|
||||
font-size: 42px;
|
||||
line-height: 0.98;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.04em;
|
||||
color: #131313;
|
||||
}
|
||||
|
||||
.discovery-section-heading p {
|
||||
max-width: 940px;
|
||||
margin: 18px 0 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.65;
|
||||
color: #4f4f4f;
|
||||
}
|
||||
|
||||
.discovery-section-heading--center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.discovery-section-heading--center p {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Products */
|
||||
.discovery-products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 26px 20px;
|
||||
}
|
||||
|
||||
.discovery-product-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.discovery-product-image {
|
||||
aspect-ratio: 1 / 1;
|
||||
overflow: hidden;
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
.discovery-product-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.discovery-product-copy h3 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: #131313;
|
||||
}
|
||||
|
||||
.discovery-product-copy p {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: #4f4f4f;
|
||||
}
|
||||
|
||||
.discovery-product-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.discovery-product-tags span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 7px 12px;
|
||||
background: #e4e4e4;
|
||||
font-size: 12px;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
/* Steps */
|
||||
.discovery-steps-section {
|
||||
padding-top: 46px;
|
||||
}
|
||||
|
||||
.discovery-steps-shell {
|
||||
padding: 42px 38px;
|
||||
background: #0f0f0f;
|
||||
}
|
||||
|
||||
.discovery-steps-shell h2 {
|
||||
margin: 0 0 34px;
|
||||
text-align: center;
|
||||
font-size: 48px;
|
||||
line-height: 0.98;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.04em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.discovery-steps-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 34px;
|
||||
}
|
||||
|
||||
.discovery-step-card {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.discovery-step-number {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin: 0 auto 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f1f1f1;
|
||||
color: #111;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.discovery-step-card h3 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.discovery-step-card p {
|
||||
margin: 0 auto;
|
||||
max-width: 260px;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
|
||||
/* Comparison */
|
||||
.discovery-comparison-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.discovery-comparison-card {
|
||||
padding: 28px;
|
||||
border: 1px solid #d9d9d9;
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
.discovery-comparison-card--highlight {
|
||||
border-color: rgba(255, 106, 0, 0.24);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 106, 0, 0.08),
|
||||
rgba(255, 106, 0, 0.03)
|
||||
);
|
||||
}
|
||||
|
||||
.discovery-comparison-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.discovery-comparison-icon {
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.discovery-comparison-head h3 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #131313;
|
||||
}
|
||||
|
||||
.discovery-comparison-card p {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.65;
|
||||
color: #4f4f4f;
|
||||
}
|
||||
|
||||
.discovery-bottom-cta {
|
||||
max-width: 760px;
|
||||
margin: 42px auto 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.discovery-hero {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.discovery-mood-grid {
|
||||
max-width: 760px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.discovery-products-grid,
|
||||
.discovery-steps-grid,
|
||||
.discovery-comparison-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.discovery-hero-copy h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.discovery-steps-shell h2,
|
||||
.discovery-section-heading h2 {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.discovery-page {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.discovery-shell {
|
||||
padding: 0 18px 28px;
|
||||
}
|
||||
|
||||
.discovery-hero {
|
||||
gap: 28px;
|
||||
padding: 10px 0 30px;
|
||||
}
|
||||
|
||||
.discovery-hero-copy h1 {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.discovery-intro {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.discovery-benefit strong {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.discovery-benefit p,
|
||||
.discovery-section-heading p,
|
||||
.discovery-product-copy p,
|
||||
.discovery-step-card p,
|
||||
.discovery-comparison-card p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.discovery-section-heading h2,
|
||||
.discovery-steps-shell h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.discovery-mood-grid {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.discovery-steps-shell {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.discovery-comparison-card {
|
||||
padding: 22px 18px;
|
||||
}
|
||||
|
||||
.discovery-comparison-head h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
236
parfum-shop/src/pages/DiscoverySetPage.jsx
Normal file
236
parfum-shop/src/pages/DiscoverySetPage.jsx
Normal file
@ -0,0 +1,236 @@
|
||||
import { Link, useNavigate } from "react-router";
|
||||
import perfumes from "../data/perfumes";
|
||||
import "../style/navbar.css";
|
||||
import "./DiscoverySetPage.css";
|
||||
|
||||
const moodImages = [
|
||||
"/DISCOVERYSET.png",
|
||||
"/DISCOVERYSET.png",
|
||||
"/DISCOVERYSET.png",
|
||||
"/DISCOVERYSET.png",
|
||||
"/DISCOVERYSET.png",
|
||||
"/DISCOVERYSET.png",
|
||||
];
|
||||
|
||||
function DiscoverySetPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="discovery-page">
|
||||
<nav className="navbar navbar--light">
|
||||
<div className="nav-pill">
|
||||
<Link to="/" className="nav-link">
|
||||
atmos
|
||||
</Link>
|
||||
<Link to="/#dufte" className="nav-link">
|
||||
Düfte
|
||||
</Link>
|
||||
<Link to="/discovery-set" className="nav-link active">
|
||||
Testen
|
||||
</Link>
|
||||
<a href="#cart" className="nav-link">
|
||||
Cart
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main className="discovery-shell">
|
||||
<div className="discovery-topbar">
|
||||
<button className="discovery-back-link" type="button" onClick={() => navigate("/")}>
|
||||
<span className="discovery-back-arrow">←</span>
|
||||
<span>Zurück zur Startseite</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section className="discovery-hero">
|
||||
<div className="discovery-hero-copy">
|
||||
<span className="discovery-kicker">DISCOVERY SET</span>
|
||||
<h1>
|
||||
DER SICHERSTE EINSTIEG
|
||||
<br />
|
||||
IN DIE WELT DER NISCHEN-
|
||||
<br />
|
||||
DÜFTE
|
||||
</h1>
|
||||
|
||||
<p className="discovery-intro">
|
||||
6 Düfte × 2ml. Jeden Duft eine Woche tragen. Verstehen, was
|
||||
wirklich funktioniert. Ohne Risiko.
|
||||
</p>
|
||||
|
||||
<div className="discovery-benefits">
|
||||
<div className="discovery-benefit">
|
||||
<span className="discovery-benefit-icon">✓</span>
|
||||
<div>
|
||||
<strong>6 × 2ml Samples aller Signature-Düfte</strong>
|
||||
<p>
|
||||
Kalter Beton, Schwarzes Benzin, Verbranntes Chrom, Blasse
|
||||
Seide, Weisse Asche und Nasser Marmor.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="discovery-benefit">
|
||||
<span className="discovery-benefit-icon">✓</span>
|
||||
<div>
|
||||
<strong>CHF 48 Gutschein automatisch im Set</strong>
|
||||
<p>
|
||||
Wird beim späteren Full-Size-Kauf angerechnet – kein manuelles
|
||||
Einlösen nötig.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="discovery-benefit">
|
||||
<span className="discovery-benefit-icon">✓</span>
|
||||
<div>
|
||||
<strong>Jedes Sample = ca. 20 Anwendungen</strong>
|
||||
<p>
|
||||
Genug, um jeden Duft mehrere Tage im Alltag und in
|
||||
unterschiedlichen Situationen zu testen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="discovery-benefit">
|
||||
<span className="discovery-benefit-icon">✓</span>
|
||||
<div>
|
||||
<strong>Hochwertige Mini-Flacons</strong>
|
||||
<p>
|
||||
Sorgfältig zusammengestellt, reduziert gestaltet und als
|
||||
Teil des atmos Konzepts gedacht.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="discovery-hero-actions">
|
||||
<button type="button" className="discovery-primary-btn">
|
||||
DISCOVERY SET BESTELLEN – CHF 48.–
|
||||
</button>
|
||||
<p>Wird bei jedem Full-Size-Kauf angerechnet</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="discovery-mood-grid">
|
||||
{moodImages.map((image, index) => (
|
||||
<div className="discovery-mood-tile" key={index}>
|
||||
<img src={image} alt={`Discovery Mood ${index + 1}`} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="discovery-included">
|
||||
<div className="discovery-section-heading">
|
||||
<span className="discovery-label">IM SET ENTHALTEN</span>
|
||||
<h2>ALLE 6 SIGNATURE-DÜFTE ZUM TESTEN.</h2>
|
||||
</div>
|
||||
|
||||
<div className="discovery-products-grid">
|
||||
{perfumes.map((perfume) => (
|
||||
<article className="discovery-product-card" key={perfume.id}>
|
||||
<div className="discovery-product-image">
|
||||
<img src={perfume.image} alt={perfume.name} />
|
||||
</div>
|
||||
|
||||
<div className="discovery-product-copy">
|
||||
<h3>{perfume.name}</h3>
|
||||
<p>{perfume.text}</p>
|
||||
|
||||
<div className="discovery-product-tags">
|
||||
{perfume.materialTags.slice(0, 3).map((tag) => (
|
||||
<span key={tag}>{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="discovery-steps-section">
|
||||
<div className="discovery-steps-shell">
|
||||
<h2>So funktioniert's</h2>
|
||||
|
||||
<div className="discovery-steps-grid">
|
||||
<article className="discovery-step-card">
|
||||
<div className="discovery-step-number">1</div>
|
||||
<h3>Bestellen</h3>
|
||||
<p>
|
||||
Discovery Set für CHF 48 bestellen. Der Gutschein-Code ist
|
||||
automatisch im Set enthalten.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="discovery-step-card">
|
||||
<div className="discovery-step-number">2</div>
|
||||
<h3>Testen</h3>
|
||||
<p>
|
||||
Jeden Duft mindestens einige Tage tragen. Im Alltag, zu
|
||||
verschiedenen Anlässen und auf der eigenen Haut.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="discovery-step-card">
|
||||
<div className="discovery-step-number">3</div>
|
||||
<h3>Entscheiden</h3>
|
||||
<p>
|
||||
Full-Size bestellen. CHF 48 werden automatisch angerechnet.
|
||||
Kein Risiko, kein Verlust.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="discovery-comparison-section">
|
||||
<div className="discovery-section-heading discovery-section-heading--center">
|
||||
<span className="discovery-label">WARUM DISCOVERY SET</span>
|
||||
<h2>DER KLÜGERE EINSTIEG IN NISCHENDÜFTE.</h2>
|
||||
<p>
|
||||
Nischen-Parfums sind keine Impulskäufe. Sie brauchen Zeit, um zu
|
||||
verstehen, wie sie auf deiner Haut funktionieren, wie sie sich im
|
||||
Alltag entwickeln und ob sie wirklich zu dir passen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="discovery-comparison-grid">
|
||||
<div className="discovery-comparison-card">
|
||||
<div className="discovery-comparison-head">
|
||||
<span className="discovery-comparison-icon">×</span>
|
||||
<h3>Traditioneller Weg</h3>
|
||||
</div>
|
||||
<p>
|
||||
CHF 180+ für eine Full Size ausgeben, ohne zu wissen, ob sie
|
||||
wirklich passt. Risiko: Fehlkauf, Überforderung oder ein Duft,
|
||||
der im Regal bleibt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="discovery-comparison-card discovery-comparison-card--highlight">
|
||||
<div className="discovery-comparison-head">
|
||||
<span className="discovery-comparison-icon">✓</span>
|
||||
<h3>Discovery Set Weg</h3>
|
||||
</div>
|
||||
<p>
|
||||
CHF 48 investieren, alle Düfte testen, bewusst entscheiden. Die
|
||||
Investition wird vollständig angerechnet – der Einstieg bleibt
|
||||
kontrolliert und nachvollziehbar.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="discovery-bottom-cta">
|
||||
<button type="button" className="discovery-primary-btn">
|
||||
DISCOVERY SET BESTELLEN – CHF 48.–
|
||||
</button>
|
||||
<p>Kostenloser Versand · 2–3 Werktage · Volle Anrechnung bei Full-Size</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DiscoverySetPage;
|
||||
@ -13,7 +13,7 @@ function ImpressumPage() {
|
||||
<Link to="/#dufte" className="nav-link">
|
||||
Düfte
|
||||
</Link>
|
||||
<Link to="/#testen" className="nav-link">
|
||||
<Link to="/discovery-set" className="nav-link">
|
||||
Testen
|
||||
</Link>
|
||||
<a href="#cart" className="nav-link">
|
||||
|
||||
@ -70,6 +70,10 @@
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
@ -317,6 +321,10 @@
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
background: #fff;
|
||||
color: #ff6a00;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.discovery-btn:hover {
|
||||
|
||||
@ -50,7 +50,7 @@ function LandingPage() {
|
||||
|
||||
const playAttempt = video.play();
|
||||
if (playAttempt && typeof playAttempt.catch === "function") {
|
||||
playAttempt.catch(() => {});
|
||||
playAttempt.catch(() => { });
|
||||
}
|
||||
};
|
||||
|
||||
@ -160,7 +160,7 @@ function LandingPage() {
|
||||
<a href="#dufte" className="nav-link">
|
||||
Düfte
|
||||
</a>
|
||||
<a href="#testen" className="nav-link">
|
||||
<a href="discovery-set" className="nav-link">
|
||||
Testen
|
||||
</a>
|
||||
<a href="#cart" className="nav-link">
|
||||
@ -186,7 +186,9 @@ function LandingPage() {
|
||||
|
||||
<div className="hero-actions">
|
||||
<button className="btn btn-primary">Aktuelle Düfte</button>
|
||||
<button className="btn btn-secondary">Discovery Set</button>
|
||||
<Link to="/discovery-set" className="btn btn-secondary">
|
||||
Discovery Set
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@ -263,7 +265,9 @@ function LandingPage() {
|
||||
<br />
|
||||
Verstehen, was funktioniert.
|
||||
</p>
|
||||
<button className="discovery-btn">Discovery Set bestellen</button>
|
||||
<Link to="/discovery-set" className="discovery-btn">
|
||||
Discovery Set bestellen
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="discovery-banner">
|
||||
|
||||
@ -13,7 +13,7 @@ function SupportPage() {
|
||||
<Link to="/#dufte" className="nav-link">
|
||||
Düfte
|
||||
</Link>
|
||||
<Link to="/#testen" className="nav-link">
|
||||
<Link to="/discovery-set" className="nav-link">
|
||||
Testen
|
||||
</Link>
|
||||
<a href="#cart" className="nav-link">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user