From 54c22ca24b6b1b35fafa3990466a91dd23ceeefd Mon Sep 17 00:00:00 2001
From: Salih Hasicic <salih.hasicic@stud.fhgr.ch>
Date: Fri, 3 Apr 2026 19:37:41 +0200
Subject: [PATCH] Add discovery set page with product overview, benefits, and
 purchase flow

---
 parfum-shop/src/App.jsx                       |   2 +
 parfum-shop/src/components/Footer.jsx         |   2 +-
 .../src/components/ProductDetailPage.css      |   4 +
 .../src/components/ProductDetailPage.jsx      |  26 +-
 parfum-shop/src/pages/AboutPage.jsx           |   2 +-
 parfum-shop/src/pages/DatenschutzPage.jsx     |   2 +-
 parfum-shop/src/pages/DiscoverySetPage.css    | 449 ++++++++++++++++++
 parfum-shop/src/pages/DiscoverySetPage.jsx    | 236 +++++++++
 parfum-shop/src/pages/ImpressumPage.jsx       |   2 +-
 parfum-shop/src/pages/LandingPage.css         |   8 +
 parfum-shop/src/pages/LandingPage.jsx         |  12 +-
 parfum-shop/src/pages/SupportPage.jsx         |   2 +-
 12 files changed, 725 insertions(+), 22 deletions(-)
 create mode 100644 parfum-shop/src/pages/DiscoverySetPage.css
 create mode 100644 parfum-shop/src/pages/DiscoverySetPage.jsx

diff --git a/parfum-shop/src/App.jsx b/parfum-shop/src/App.jsx
index 98ce0e5..c325231 100644
--- a/parfum-shop/src/App.jsx
+++ b/parfum-shop/src/App.jsx
@@ -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 />
diff --git a/parfum-shop/src/components/Footer.jsx b/parfum-shop/src/components/Footer.jsx
index 47a0736..480a2a2 100644
--- a/parfum-shop/src/components/Footer.jsx
+++ b/parfum-shop/src/components/Footer.jsx
@@ -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>
 
diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css
index af3b83f..20975b0 100644
--- a/parfum-shop/src/components/ProductDetailPage.css
+++ b/parfum-shop/src/components/ProductDetailPage.css
@@ -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 {
diff --git a/parfum-shop/src/components/ProductDetailPage.jsx b/parfum-shop/src/components/ProductDetailPage.jsx
index 65ee996..47d54d5 100644
--- a/parfum-shop/src/components/ProductDetailPage.jsx
+++ b/parfum-shop/src/components/ProductDetailPage.jsx
@@ -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">
diff --git a/parfum-shop/src/pages/AboutPage.jsx b/parfum-shop/src/pages/AboutPage.jsx
index 675474a..c305484 100644
--- a/parfum-shop/src/pages/AboutPage.jsx
+++ b/parfum-shop/src/pages/AboutPage.jsx
@@ -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">
diff --git a/parfum-shop/src/pages/DatenschutzPage.jsx b/parfum-shop/src/pages/DatenschutzPage.jsx
index 0768c7a..5ea5b69 100644
--- a/parfum-shop/src/pages/DatenschutzPage.jsx
+++ b/parfum-shop/src/pages/DatenschutzPage.jsx
@@ -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">
diff --git a/parfum-shop/src/pages/DiscoverySetPage.css b/parfum-shop/src/pages/DiscoverySetPage.css
new file mode 100644
index 0000000..631a22d
--- /dev/null
+++ b/parfum-shop/src/pages/DiscoverySetPage.css
@@ -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;
+  }
+}
\ No newline at end of file
diff --git a/parfum-shop/src/pages/DiscoverySetPage.jsx b/parfum-shop/src/pages/DiscoverySetPage.jsx
new file mode 100644
index 0000000..0547cb3
--- /dev/null
+++ b/parfum-shop/src/pages/DiscoverySetPage.jsx
@@ -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&apos;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;
\ No newline at end of file
diff --git a/parfum-shop/src/pages/ImpressumPage.jsx b/parfum-shop/src/pages/ImpressumPage.jsx
index cb3e05f..4c5a82e 100644
--- a/parfum-shop/src/pages/ImpressumPage.jsx
+++ b/parfum-shop/src/pages/ImpressumPage.jsx
@@ -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">
diff --git a/parfum-shop/src/pages/LandingPage.css b/parfum-shop/src/pages/LandingPage.css
index debd035..cfd4261 100644
--- a/parfum-shop/src/pages/LandingPage.css
+++ b/parfum-shop/src/pages/LandingPage.css
@@ -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 {
diff --git a/parfum-shop/src/pages/LandingPage.jsx b/parfum-shop/src/pages/LandingPage.jsx
index a04c38c..58e87f4 100644
--- a/parfum-shop/src/pages/LandingPage.jsx
+++ b/parfum-shop/src/pages/LandingPage.jsx
@@ -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">
diff --git a/parfum-shop/src/pages/SupportPage.jsx b/parfum-shop/src/pages/SupportPage.jsx
index 190456c..0b190a3 100644
--- a/parfum-shop/src/pages/SupportPage.jsx
+++ b/parfum-shop/src/pages/SupportPage.jsx
@@ -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">