From 3671509f824af95de2fa4d0431168293ba10fdf2 Mon Sep 17 00:00:00 2001
From: Salih Hasicic <salih.hasicic@stud.fhgr.ch>
Date: Fri, 3 Apr 2026 19:11:01 +0200
Subject: [PATCH] Create global footer, about/impressum/datenschutz/support
 pages, and floating FAQ chatbot

---
 parfum-shop/src/App.jsx                       |  23 +-
 parfum-shop/src/components/Footer.css         |  80 +++
 parfum-shop/src/components/Footer.jsx         |  40 ++
 .../src/components/ProductDetailPage.jsx      |   2 +-
 parfum-shop/src/components/SupportChatbot.css | 275 +++++++++++
 parfum-shop/src/components/SupportChatbot.jsx | 344 +++++++++++++
 parfum-shop/src/pages/AboutPage.css           | 455 ++++++++++++++++++
 parfum-shop/src/pages/AboutPage.jsx           | 317 ++++++++++++
 parfum-shop/src/pages/DatenschutzPage.css     | 134 ++++++
 parfum-shop/src/pages/DatenschutzPage.jsx     | 230 +++++++++
 parfum-shop/src/pages/ImpressumPage.css       | 151 ++++++
 parfum-shop/src/pages/ImpressumPage.jsx       | 163 +++++++
 parfum-shop/src/pages/LandingPage.jsx         |   2 +-
 parfum-shop/src/pages/SupportPage.css         | 357 ++++++++++++++
 parfum-shop/src/pages/SupportPage.jsx         | 213 ++++++++
 15 files changed, 2780 insertions(+), 6 deletions(-)
 create mode 100644 parfum-shop/src/components/Footer.css
 create mode 100644 parfum-shop/src/components/Footer.jsx
 create mode 100644 parfum-shop/src/components/SupportChatbot.css
 create mode 100644 parfum-shop/src/components/SupportChatbot.jsx
 create mode 100644 parfum-shop/src/pages/AboutPage.css
 create mode 100644 parfum-shop/src/pages/AboutPage.jsx
 create mode 100644 parfum-shop/src/pages/DatenschutzPage.css
 create mode 100644 parfum-shop/src/pages/DatenschutzPage.jsx
 create mode 100644 parfum-shop/src/pages/ImpressumPage.css
 create mode 100644 parfum-shop/src/pages/ImpressumPage.jsx
 create mode 100644 parfum-shop/src/pages/SupportPage.css
 create mode 100644 parfum-shop/src/pages/SupportPage.jsx

diff --git a/parfum-shop/src/App.jsx b/parfum-shop/src/App.jsx
index f007635..98ce0e5 100644
--- a/parfum-shop/src/App.jsx
+++ b/parfum-shop/src/App.jsx
@@ -1,13 +1,28 @@
 import { Routes, Route } from "react-router";
 import LandingPage from "./pages/LandingPage";
 import ProductDetailPage from "./components/ProductDetailPage";
+import AboutPage from "./pages/AboutPage";
+import ImpressumPage from "./pages/ImpressumPage";
+import DatenschutzPage from "./pages/DatenschutzPage";
+import SupportPage from "./pages/SupportPage";
+import Footer from "./components/Footer";
+import SupportChatbot from "./components/SupportChatbot";
 
 function App() {
   return (
-    <Routes>
-      <Route path="/" element={<LandingPage />} />
-      <Route path="/duft/:perfumeSlug" element={<ProductDetailPage />} />
-    </Routes>
+    <>
+      <Routes>
+        <Route path="/" element={<LandingPage />} />
+        <Route path="/duft/:perfumeSlug" element={<ProductDetailPage />} />
+        <Route path="/about" element={<AboutPage />} />
+        <Route path="/impressum" element={<ImpressumPage />} />
+        <Route path="/datenschutz" element={<DatenschutzPage />} />
+        <Route path="/support" element={<SupportPage />} />
+      </Routes>
+
+      <Footer />
+      <SupportChatbot />
+    </>
   );
 }
 
diff --git a/parfum-shop/src/components/Footer.css b/parfum-shop/src/components/Footer.css
new file mode 100644
index 0000000..c18ab35
--- /dev/null
+++ b/parfum-shop/src/components/Footer.css
@@ -0,0 +1,80 @@
+.site-footer {
+  margin-top: 40px;
+  background: #1f1f1f;
+  color: #f5f5f5;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.site-footer__inner {
+  max-width: 1600px;
+  margin: 0 auto;
+  padding: 28px 20px 32px;
+  display: grid;
+  grid-template-columns: 1.4fr 1fr 1fr;
+  gap: 28px;
+}
+
+.site-footer__brand {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.site-footer__logo {
+  text-decoration: none;
+  color: #fff;
+  font-size: 14px;
+  letter-spacing: 0.22em;
+}
+
+.site-footer__text {
+  margin: 0;
+  max-width: 320px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.site-footer__nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.site-footer__heading {
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.site-footer__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.site-footer__nav a {
+  text-decoration: none;
+  color: #f5f5f5;
+  font-size: 14px;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.site-footer__nav a:hover {
+  opacity: 0.7;
+  transform: translateX(2px);
+}
+
+@media (max-width: 900px) {
+  .site-footer__inner {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .site-footer__inner {
+    grid-template-columns: 1fr;
+    padding: 24px 16px 28px;
+  }
+}
\ No newline at end of file
diff --git a/parfum-shop/src/components/Footer.jsx b/parfum-shop/src/components/Footer.jsx
new file mode 100644
index 0000000..47a0736
--- /dev/null
+++ b/parfum-shop/src/components/Footer.jsx
@@ -0,0 +1,40 @@
+import { Link } from "react-router";
+import "./Footer.css";
+
+function Footer() {
+  return (
+    <footer className="site-footer">
+      <div className="site-footer__inner">
+        <div className="site-footer__brand">
+          <Link to="/" className="site-footer__logo">
+            ATMOS
+          </Link>
+          <p className="site-footer__text">
+            Konzeptuelle Düfte zwischen Materialität, Raum und Charakter.
+          </p>
+        </div>
+
+        <div className="site-footer__nav-group">
+          <span className="site-footer__heading">Navigation</span>
+          <nav className="site-footer__nav">
+            <Link to="/">Startseite</Link>
+            <Link to="/#dufte">Düfte</Link>
+            <Link to="/#testen">Discovery Set</Link>
+          </nav>
+        </div>
+
+        <div className="site-footer__nav-group">
+          <span className="site-footer__heading">Rechtliches & Info</span>
+          <nav className="site-footer__nav">
+            <Link to="/about">About Us</Link>
+            <Link to="/support">Support</Link>
+            <Link to="/impressum">Impressum</Link>
+            <Link to="/datenschutz">Datenschutz</Link>
+          </nav>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/parfum-shop/src/components/ProductDetailPage.jsx b/parfum-shop/src/components/ProductDetailPage.jsx
index fd13e58..65ee996 100644
--- a/parfum-shop/src/components/ProductDetailPage.jsx
+++ b/parfum-shop/src/components/ProductDetailPage.jsx
@@ -74,7 +74,7 @@ function ProductDetailContent({ perfumeSlug }) {
       <nav className="navbar navbar--light">
         <div className="nav-pill">
           <Link to="/" className="nav-link">
-            Name
+            atmoos
           </Link>
           <Link to="/#dufte" className="nav-link active">
             Düfte
diff --git a/parfum-shop/src/components/SupportChatbot.css b/parfum-shop/src/components/SupportChatbot.css
new file mode 100644
index 0000000..7ca3fce
--- /dev/null
+++ b/parfum-shop/src/components/SupportChatbot.css
@@ -0,0 +1,275 @@
+.chatbot-trigger {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  z-index: 1200;
+  border: none;
+  border-radius: 999px;
+  background: #ff6a00;
+  color: #fff;
+  padding: 14px 20px;
+  font-size: 14px;
+  cursor: pointer;
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
+  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+}
+
+.chatbot-trigger:hover {
+  transform: translateY(-2px);
+}
+
+.chatbot-trigger.is-open {
+  padding: 14px 17px;
+  min-width: 52px;
+}
+
+.chatbot-window {
+  position: fixed;
+  right: 24px;
+  bottom: 88px;
+  width: 380px;
+  max-width: calc(100vw - 32px);
+  height: 620px;
+  max-height: calc(100vh - 120px);
+  z-index: 1199;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  background: #f5f5f5;
+  border: 1px solid #d9d9d9;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
+  overflow: hidden;
+}
+
+.chatbot-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 18px 16px;
+  border-bottom: 1px solid #dcdcdc;
+  background: #1f1f1f;
+}
+
+.chatbot-header-copy h3 {
+  margin: 8px 0 0;
+  font-size: 24px;
+  line-height: 1.02;
+  font-weight: 400;
+  color: #fff;
+}
+
+.chatbot-kicker {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  color: rgba(255, 255, 255, 0.62);
+}
+
+.chatbot-close {
+  border: none;
+  background: transparent;
+  color: #fff;
+  font-size: 28px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+}
+
+.chatbot-body {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  min-height: 0;
+}
+
+.chatbot-messages {
+  padding: 18px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: #f5f5f5;
+}
+
+.chatbot-message {
+  max-width: 82%;
+  padding: 12px 14px;
+  font-size: 14px;
+  line-height: 1.55;
+  word-break: break-word;
+}
+
+.chatbot-message--bot {
+  align-self: flex-start;
+  background: #ececec;
+  color: #1f1f1f;
+  border: 1px solid #dddddd;
+}
+
+.chatbot-message--user {
+  align-self: flex-end;
+  background: #ff6a00;
+  color: #fff;
+}
+
+.chatbot-message--typing {
+  color: #666;
+}
+
+.chatbot-quick-actions {
+  padding: 14px 18px 16px;
+  border-top: 1px solid #dcdcdc;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  background: #fafafa;
+}
+
+.chatbot-chip {
+  border: 1px solid #d6d6d6;
+  background: #fff;
+  color: #1f1f1f;
+  padding: 9px 12px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: transform 0.2s ease, border-color 0.2s ease;
+}
+
+.chatbot-chip:hover {
+  transform: translateY(-1px);
+  border-color: #bcbcbc;
+}
+
+.chatbot-footer {
+  padding: 14px 18px 18px;
+  border-top: 1px solid #dcdcdc;
+  background: #fff;
+}
+
+.chatbot-form {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+}
+
+.chatbot-input {
+  width: 100%;
+  border: 1px solid #d3d3d3;
+  background: #fff;
+  padding: 12px 14px;
+  font-size: 14px;
+  outline: none;
+}
+
+.chatbot-input:focus {
+  border-color: #ff6a00;
+}
+
+.chatbot-send {
+  border: none;
+  background: #1f1f1f;
+  color: #fff;
+  padding: 12px 16px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.chatbot-escalation {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-top: 12px;
+}
+
+.chatbot-link {
+  text-decoration: none;
+  font-size: 13px;
+  color: #ff6a00;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.chatbot-link--muted {
+  color: #777;
+  cursor: default;
+}
+
+.chatbot-action-area {
+  border-top: 1px solid #dcdcdc;
+  background: #fafafa;
+}
+
+.chatbot-section {
+  padding: 14px 18px 16px;
+}
+
+.chatbot-section + .chatbot-section {
+  border-top: 1px solid #e2e2e2;
+}
+
+.chatbot-section-label {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  color: #666;
+}
+
+.chatbot-feedback-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.chatbot-feedback-btn {
+  border: 1px solid #d6d6d6;
+  background: #fff;
+  color: #1f1f1f;
+  padding: 10px 14px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: transform 0.2s ease, border-color 0.2s ease;
+}
+
+.chatbot-feedback-btn:hover {
+  transform: translateY(-1px);
+  border-color: #bcbcbc;
+}
+
+.chatbot-feedback-btn--primary {
+  background: #ff6a00;
+  border-color: #ff6a00;
+  color: #fff;
+}
+
+.chatbot-secondary-actions {
+  padding: 0 18px 14px;
+}
+
+.chatbot-text-button {
+  border: none;
+  background: transparent;
+  color: #ff6a00;
+  padding: 0;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+@media (max-width: 700px) {
+  .chatbot-trigger {
+    right: 16px;
+    bottom: 16px;
+  }
+
+  .chatbot-window {
+    right: 16px;
+    bottom: 76px;
+    width: calc(100vw - 32px);
+    height: 72vh;
+  }
+
+  .chatbot-header-copy h3 {
+    font-size: 20px;
+  }
+}
\ No newline at end of file
diff --git a/parfum-shop/src/components/SupportChatbot.jsx b/parfum-shop/src/components/SupportChatbot.jsx
new file mode 100644
index 0000000..88c5653
--- /dev/null
+++ b/parfum-shop/src/components/SupportChatbot.jsx
@@ -0,0 +1,344 @@
+import { useEffect, useRef, useState } from "react";
+import "./SupportChatbot.css";
+
+const SUPPORT_TOPICS = {
+  versand: {
+    id: "versand",
+    label: "Versand",
+    title: "Fragen zu Versand und Lieferung",
+    keywords: ["versand", "lieferung", "zustellung", "sendung", "paket"],
+    reply:
+      "Bestellungen werden bei atmos in der Regel innerhalb von 1–2 Werktagen bearbeitet. Die Zustellung erfolgt üblicherweise wenige Werktage danach. Sobald eine Bestellung versendet wurde, erhältst du die entsprechenden Versandinformationen.",
+  },
+  bestellung: {
+    id: "bestellung",
+    label: "Bestellung",
+    title: "Fragen zu einer Bestellung",
+    keywords: ["bestellung", "order", "bestellnummer", "kauf", "gekauft"],
+    reply:
+      "Wenn du Fragen zu einer laufenden Bestellung hast, hilft uns am meisten deine Bestellnummer sowie eine kurze Beschreibung des Anliegens. So können wir den Fall schneller und präziser einordnen.",
+  },
+  discovery: {
+    id: "discovery",
+    label: "Discovery Set",
+    title: "Fragen zum Discovery Set",
+    keywords: ["discovery", "set", "sample", "testen", "proben"],
+    reply:
+      "Das Discovery Set ist dafür gedacht, mehrere Düfte in Ruhe auf der Haut zu testen, bevor du dich für eine Full Size entscheidest. So bekommst du ein genaueres Gefühl für Verlauf, Atmosphäre und Tragbarkeit der einzelnen Kompositionen.",
+  },
+  duftwahl: {
+    id: "duftwahl",
+    label: "Duftberatung",
+    title: "Hilfe bei der Duftwahl",
+    keywords: ["duft", "duftwahl", "empfehlung", "passt", "beratung", "welcher"],
+    reply:
+      "Wenn du bei der Duftwahl Unterstützung brauchst, hilft es, dich an Materialien oder Stimmungen zu orientieren: mineralisch, warm, ruhig, rau, hell, dunkel oder urban. So lässt sich die Auswahl gezielter eingrenzen.",
+  },
+  rueckgabe: {
+    id: "rueckgabe",
+    label: "Rückgabe",
+    title: "Fragen zu Problemfällen oder Rückgabe",
+    keywords: ["rückgabe", "retoure", "problem", "defekt", "falsch", "beschädigt"],
+    reply:
+      "Wenn es ein Problem mit einer Bestellung gibt, beschreibe dein Anliegen bitte möglichst konkret und sende, falls relevant, zusätzliche Details oder Fotos mit. So kann der Fall schneller geprüft werden.",
+  },
+  kontakt: {
+    id: "kontakt",
+    label: "Kontakt",
+    title: "Allgemeine Kontaktmöglichkeiten",
+    keywords: ["kontakt", "email", "e-mail", "mail", "telefon", "anrufen"],
+    reply:
+      "Du erreichst atmos aktuell direkt per E-Mail unter support@atmos.ch. Telefonischer Kontakt kann später ebenfalls ergänzt werden. Für allgemeine Anliegen ist E-Mail derzeit der direkteste Weg.",
+  },
+};
+
+const TOPIC_ORDER = [
+  SUPPORT_TOPICS.bestellung,
+  SUPPORT_TOPICS.versand,
+  SUPPORT_TOPICS.duftwahl,
+  SUPPORT_TOPICS.discovery,
+  SUPPORT_TOPICS.rueckgabe,
+  SUPPORT_TOPICS.kontakt,
+];
+
+function findTopicByText(input) {
+  const normalized = input.toLowerCase();
+
+  const exactLabelMatch = TOPIC_ORDER.find(
+    (topic) => topic.label.toLowerCase() === normalized
+  );
+  if (exactLabelMatch) return exactLabelMatch;
+
+  const keywordMatch = TOPIC_ORDER.find((topic) =>
+    topic.keywords.some((keyword) => normalized.includes(keyword))
+  );
+
+  return keywordMatch || null;
+}
+
+function SupportChatbot() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [showHelpOptions, setShowHelpOptions] = useState(true);
+  const [showFeedbackActions, setShowFeedbackActions] = useState(false);
+  const [currentTopic, setCurrentTopic] = useState(null);
+  const [messages, setMessages] = useState([
+    {
+      id: 1,
+      sender: "bot",
+      text: "Willkommen bei atmos.",
+    },
+    {
+      id: 2,
+      sender: "bot",
+      text: "Wobei brauchst du Hilfe?",
+    },
+  ]);
+
+  const messagesEndRef = useRef(null);
+  const nextIdRef = useRef(3);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isTyping, showFeedbackActions, showHelpOptions]);
+
+  const pushMessage = (sender, text) => {
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: nextIdRef.current++,
+        sender,
+        text,
+      },
+    ]);
+  };
+
+  const simulateBotReply = (callback) => {
+    setIsTyping(true);
+
+    window.setTimeout(() => {
+      setIsTyping(false);
+      callback();
+    }, 650);
+  };
+
+  const askIfHelpful = () => {
+    simulateBotReply(() => {
+      pushMessage("bot", "Hat dir das geholfen?");
+      setShowFeedbackActions(true);
+    });
+  };
+
+  const handleTopicSelection = (topic) => {
+    setShowHelpOptions(false);
+    setShowFeedbackActions(false);
+    setCurrentTopic(topic);
+
+    pushMessage("user", topic.label);
+
+    simulateBotReply(() => {
+      pushMessage("bot", topic.reply);
+      askIfHelpful();
+    });
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const trimmed = inputValue.trim();
+
+    if (!trimmed) return;
+
+    pushMessage("user", trimmed);
+    setInputValue("");
+    setShowHelpOptions(false);
+    setShowFeedbackActions(false);
+
+    const matchedTopic = findTopicByText(trimmed);
+
+    simulateBotReply(() => {
+      if (matchedTopic) {
+        setCurrentTopic(matchedTopic);
+        pushMessage("bot", matchedTopic.reply);
+      } else {
+        setCurrentTopic(null);
+        pushMessage(
+          "bot",
+          "Ich konnte dein Anliegen noch keinem klaren Thema zuordnen. Du kannst unten ein Thema auswählen oder dein Anliegen direkt per E-Mail an support@atmos.ch weiterleiten."
+        );
+        setShowHelpOptions(true);
+      }
+
+      askIfHelpful();
+    });
+  };
+
+  const handleHelpfulYes = () => {
+    setShowFeedbackActions(false);
+    pushMessage("user", "Ja");
+    simulateBotReply(() => {
+      pushMessage(
+        "bot",
+        "Perfekt. Wenn du noch etwas wissen möchtest, kannst du direkt eine weitere Frage stellen oder ein neues Thema auswählen."
+      );
+      setShowHelpOptions(true);
+    });
+  };
+
+  const handleHelpfulNo = () => {
+    setShowFeedbackActions(false);
+    pushMessage("user", "Nein");
+
+    simulateBotReply(() => {
+      pushMessage(
+        "bot",
+        "Danke. Dann leite dein Anliegen am besten direkt weiter. Per E-Mail erreichst du uns unter support@atmos.ch. Telefonischer Kontakt wird später ebenfalls ergänzt."
+      );
+    });
+  };
+
+  const handleRestart = () => {
+    setShowFeedbackActions(false);
+    setShowHelpOptions(true);
+    setCurrentTopic(null);
+
+    pushMessage("user", "Neues Thema");
+    simulateBotReply(() => {
+      pushMessage("bot", "Gerne. Wobei brauchst du Hilfe?");
+    });
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        className={`chatbot-trigger ${isOpen ? "is-open" : ""}`}
+        onClick={() => setIsOpen((prev) => !prev)}
+        aria-label={isOpen ? "Chat schliessen" : "Support Chat öffnen"}
+      >
+        {isOpen ? "×" : "Support"}
+      </button>
+
+      {isOpen && (
+        <div className="chatbot-window" role="dialog" aria-label="Support Chat">
+          <div className="chatbot-header">
+            <div className="chatbot-header-copy">
+              <span className="chatbot-kicker">atmos SUPPORT</span>
+              <h3>Wie können wir helfen?</h3>
+            </div>
+            <button
+              type="button"
+              className="chatbot-close"
+              onClick={() => setIsOpen(false)}
+              aria-label="Chat schliessen"
+            >
+              ×
+            </button>
+          </div>
+
+          <div className="chatbot-body">
+            <div className="chatbot-messages">
+              {messages.map((message) => (
+                <div
+                  key={message.id}
+                  className={`chatbot-message chatbot-message--${message.sender}`}
+                >
+                  {message.text}
+                </div>
+              ))}
+
+              {isTyping && (
+                <div className="chatbot-message chatbot-message--bot chatbot-message--typing">
+                  schreibt...
+                </div>
+              )}
+
+              <div ref={messagesEndRef} />
+            </div>
+
+            <div className="chatbot-action-area">
+              {showHelpOptions && (
+                <div className="chatbot-section">
+                  <span className="chatbot-section-label">THEMEN</span>
+                  <div className="chatbot-quick-actions">
+                    {TOPIC_ORDER.map((topic) => (
+                      <button
+                        key={topic.id}
+                        type="button"
+                        className="chatbot-chip"
+                        onClick={() => handleTopicSelection(topic)}
+                      >
+                        {topic.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {showFeedbackActions && (
+                <div className="chatbot-section chatbot-section--feedback">
+                  <span className="chatbot-section-label">WEITERES VORGEHEN</span>
+                  <div className="chatbot-feedback-actions">
+                    <button
+                      type="button"
+                      className="chatbot-feedback-btn chatbot-feedback-btn--primary"
+                      onClick={handleHelpfulYes}
+                    >
+                      Ja, danke
+                    </button>
+
+                    <button
+                      type="button"
+                      className="chatbot-feedback-btn"
+                      onClick={handleHelpfulNo}
+                    >
+                      Nein, nicht ganz
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {currentTopic && !showFeedbackActions && (
+                <div className="chatbot-secondary-actions">
+                  <button
+                    type="button"
+                    className="chatbot-text-button"
+                    onClick={handleRestart}
+                  >
+                    Anderes Thema wählen
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="chatbot-footer">
+            <form className="chatbot-form" onSubmit={handleSubmit}>
+              <input
+                type="text"
+                className="chatbot-input"
+                placeholder="Deine Frage eingeben..."
+                value={inputValue}
+                onChange={(event) => setInputValue(event.target.value)}
+              />
+              <button type="submit" className="chatbot-send">
+                Senden
+              </button>
+            </form>
+
+            <div className="chatbot-escalation">
+              <a href="mailto:support@atmos.ch" className="chatbot-link">
+                Per E-Mail weiter
+              </a>
+              <button type="button" className="chatbot-link chatbot-link--muted">
+                Telefonisch bald verfügbar
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default SupportChatbot;
\ No newline at end of file
diff --git a/parfum-shop/src/pages/AboutPage.css b/parfum-shop/src/pages/AboutPage.css
new file mode 100644
index 0000000..4a10fea
--- /dev/null
+++ b/parfum-shop/src/pages/AboutPage.css
@@ -0,0 +1,455 @@
+.about-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));
+}
+
+.about-shell {
+  background: #f5f5f5;
+  border: 1px solid #d9d9d9;
+  padding: 38px;
+}
+
+.about-kicker,
+.about-label,
+.about-panel-label,
+.about-origin-box span,
+.about-panel-meta span {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  color: #666;
+}
+
+.about-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.8fr);
+  gap: 28px;
+  align-items: end;
+  padding-bottom: 36px;
+  border-bottom: 1px solid #dfdfdf;
+}
+
+.about-hero-copy h1 {
+  margin: 14px 0 18px;
+  font-size: 68px;
+  line-height: 0.92;
+  font-weight: 300;
+  letter-spacing: -0.05em;
+  color: #131313;
+}
+
+.about-intro {
+  max-width: 720px;
+  margin: 0;
+  font-size: 18px;
+  line-height: 1.65;
+  color: #4f4f4f;
+}
+
+.about-hero-panel {
+  padding: 24px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 106, 0, 0.08),
+    rgba(255, 106, 0, 0.03)
+  );
+  border: 1px solid rgba(255, 106, 0, 0.18);
+}
+
+.about-hero-panel p {
+  margin: 10px 0 0;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #1f1f1f;
+}
+
+.about-panel-meta {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  margin-top: 24px;
+  padding-top: 20px;
+  border-top: 1px solid rgba(255, 106, 0, 0.14);
+}
+
+.about-panel-meta p,
+.about-origin-box p {
+  margin: 8px 0 0;
+  font-size: 14px;
+  line-height: 1.55;
+  color: #1f1f1f;
+}
+
+.about-section {
+  padding-top: 38px;
+}
+
+.about-section--split {
+  display: grid;
+  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
+  gap: 28px;
+  align-items: start;
+}
+
+.about-section-heading h2,
+.about-origin-copy h2,
+.about-bottom-copy h2 {
+  margin: 10px 0 0;
+  font-size: 42px;
+  line-height: 0.98;
+  font-weight: 300;
+  letter-spacing: -0.04em;
+  color: #131313;
+}
+
+.about-section-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.about-section-copy p,
+.about-origin-copy p,
+.about-bottom-copy p {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.7;
+  color: #4f4f4f;
+}
+
+.about-quote-block {
+  margin-top: 38px;
+  padding: 32px 36px;
+  background: #1f1f1f;
+  border-left: 3px solid #ff6a00;
+}
+
+.about-quote-block p {
+  margin: 0;
+  font-size: 28px;
+  line-height: 1.3;
+  font-weight: 300;
+  letter-spacing: -0.03em;
+  color: #fff;
+  max-width: 900px;
+}
+
+.about-grid-section {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 18px;
+  margin-top: 38px;
+}
+
+.about-card {
+  padding: 24px;
+  background: #efefef;
+  border: 1px solid #d9d9d9;
+  min-height: 260px;
+}
+
+.about-card h3 {
+  margin: 14px 0 12px;
+  font-size: 24px;
+  line-height: 1.05;
+  font-weight: 400;
+  color: #131313;
+}
+
+.about-card p {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.65;
+  color: #4f4f4f;
+}
+
+.about-origin-section {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
+  gap: 28px;
+  margin-top: 38px;
+  padding-top: 38px;
+  border-top: 1px solid #dfdfdf;
+}
+
+.about-origin-box {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  background: #efefef;
+  border: 1px solid #d9d9d9;
+  padding: 24px;
+}
+
+.about-origin-box > div {
+  padding-bottom: 16px;
+  border-bottom: 1px solid #d9d9d9;
+}
+
+.about-origin-box > div:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.about-bottom-cta {
+  margin-top: 38px;
+  padding: 38px;
+  background: #ff6a00;
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) auto;
+  gap: 24px;
+  align-items: end;
+}
+
+.about-bottom-copy .about-label,
+.about-bottom-copy h2,
+.about-bottom-copy p {
+  color: #fff;
+}
+
+.about-bottom-copy .about-label {
+  opacity: 0.85;
+}
+
+.about-bottom-copy p {
+  margin-top: 16px;
+  max-width: 700px;
+}
+
+.about-bottom-actions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.about-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  padding: 12px 18px;
+  font-size: 14px;
+  border-radius: 999px;
+  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
+}
+
+.about-btn:hover {
+  transform: translateY(-1px);
+}
+
+.about-btn--primary {
+  background: #fff;
+  color: #ff6a00;
+}
+
+.about-btn--secondary {
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+  backdrop-filter: blur(8px);
+}
+
+.about-proof-strip {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14px;
+  margin-top: 38px;
+}
+
+.about-proof-item {
+  padding: 18px;
+  border: 1px solid #d9d9d9;
+  background: #fafafa;
+}
+
+.about-proof-item p {
+  margin: 10px 0 0;
+  font-size: 14px;
+  line-height: 1.55;
+  color: #3f3f3f;
+}
+
+.about-process-section {
+  margin-top: 38px;
+  padding-top: 38px;
+  border-top: 1px solid #dfdfdf;
+}
+
+.about-credentials-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 18px;
+  margin-top: 38px;
+}
+
+.about-credential-card {
+  padding: 24px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 106, 0, 0.06),
+    rgba(255, 106, 0, 0.02)
+  );
+  border: 1px solid rgba(255, 106, 0, 0.16);
+  min-height: 220px;
+}
+
+.about-credential-card h3 {
+  margin: 14px 0 12px;
+  font-size: 24px;
+  line-height: 1.08;
+  font-weight: 400;
+  color: #131313;
+}
+
+.about-credential-card p {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.65;
+  color: #4f4f4f;
+}
+
+.about-method-section {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
+  gap: 28px;
+  margin-top: 38px;
+  padding: 28px;
+  background: #efefef;
+  border: 1px solid #d9d9d9;
+}
+
+.about-method-copy h2 {
+  margin: 10px 0 16px;
+  font-size: 40px;
+  line-height: 0.98;
+  font-weight: 300;
+  letter-spacing: -0.04em;
+  color: #131313;
+}
+
+.about-method-copy p {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.7;
+  color: #4f4f4f;
+}
+
+.about-method-points {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+.about-method-points > div {
+  padding-bottom: 14px;
+  border-bottom: 1px solid #d6d6d6;
+}
+
+.about-method-points > div:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.about-method-points span {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  color: #666;
+}
+
+.about-method-points p {
+  margin: 8px 0 0;
+  font-size: 14px;
+  line-height: 1.55;
+  color: #1f1f1f;
+}
+
+.about-trust-note {
+  margin-top: 38px;
+  padding: 22px;
+  border: 1px solid rgba(255, 106, 0, 0.18);
+  background: linear-gradient(
+    180deg,
+    rgba(255, 106, 0, 0.08),
+    rgba(255, 106, 0, 0.03)
+  );
+}
+
+.about-trust-note p {
+  margin: 10px 0 0;
+  font-size: 15px;
+  line-height: 1.65;
+  color: #1f1f1f;
+}
+
+@media (max-width: 1100px) {
+  .about-hero,
+  .about-section--split,
+  .about-origin-section,
+  .about-bottom-cta,
+  .about-method-section {
+    grid-template-columns: 1fr;
+  }
+
+  .about-hero-copy h1 {
+    font-size: 52px;
+  }
+
+  .about-grid-section,
+  .about-proof-strip,
+  .about-credentials-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .about-method-copy h2 {
+    font-size: 32px;
+  }
+}
+
+@media (max-width: 700px) {
+  .about-page {
+    padding: 18px;
+  }
+
+  .about-shell {
+    padding: 24px 18px;
+  }
+
+  .about-hero-copy h1 {
+    font-size: 38px;
+  }
+
+  .about-section-heading h2,
+  .about-origin-copy h2,
+  .about-bottom-copy h2,
+  .about-method-copy h2 {
+    font-size: 30px;
+  }
+
+  .about-intro,
+  .about-section-copy p,
+  .about-origin-copy p,
+  .about-bottom-copy p,
+  .about-method-copy p,
+  .about-credential-card p,
+  .about-proof-item p,
+  .about-trust-note p {
+    font-size: 15px;
+  }
+
+  .about-quote-block {
+    padding: 24px 20px;
+  }
+
+  .about-quote-block p {
+    font-size: 22px;
+  }
+
+  .about-method-section,
+  .about-bottom-cta {
+    padding: 26px 20px;
+  }
+}
\ No newline at end of file
diff --git a/parfum-shop/src/pages/AboutPage.jsx b/parfum-shop/src/pages/AboutPage.jsx
new file mode 100644
index 0000000..675474a
--- /dev/null
+++ b/parfum-shop/src/pages/AboutPage.jsx
@@ -0,0 +1,317 @@
+import { Link } from "react-router";
+import "../style/navbar.css";
+import "./AboutPage.css";
+
+function AboutPage() {
+  return (
+    <div className="about-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="/#testen" className="nav-link">
+            Testen
+          </Link>
+          <a href="#cart" className="nav-link">
+            Cart
+          </a>
+        </div>
+      </nav>
+
+      <main className="about-shell">
+        <section className="about-hero">
+          <div className="about-hero-copy">
+            <span className="about-kicker">ABOUT atmos</span>
+            <h1>
+              WIR DEKODIEREN
+              <br />
+              ATMOSPHÄREN
+              <br />
+              UND WANDELN
+              <br />
+              SIE IN DÜFTE
+            </h1>
+            <p className="about-intro">
+              atmos entwickelt Nischendüfte, die nicht bloss gut riechen sollen,
+              sondern eine Atmosphäre präzise übersetzen: Material, Raum, Kälte,
+              Licht, Oberfläche, Spannung. Jeder Duft ist eine verdichtete
+              Komposition aus Eindruck, Haltung und Charakter.
+            </p>
+          </div>
+
+          <div className="about-hero-panel">
+            <span className="about-panel-label">POSITIONIERUNG</span>
+            <p>
+              Nischig. Hochwertig. Edel. Luxuriös. Reduziert in der Form,
+              konsequent in der Wirkung.
+            </p>
+
+            <div className="about-panel-meta">
+              <div>
+                <span>HERKUNFT</span>
+                <p>Made in Switzerland</p>
+              </div>
+              <div>
+                <span>ANSATZ</span>
+                <p>Atmosphäre vor Mainstream</p>
+              </div>
+              <div>
+                <span>FOKUS</span>
+                <p>Duft als Konzeptobjekt</p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="about-section about-section--split">
+          <div className="about-section-heading">
+            <span className="about-label">UNSER VERSTÄNDNIS</span>
+            <h2>NICHT DEKORATION. SONDERN HALTUNG.</h2>
+          </div>
+
+          <div className="about-section-copy">
+            <p>
+              atmos versteht Parfum nicht als beiläufiges Accessoire, sondern als
+              Form von Ausdruck. Unsere Düfte entstehen nicht aus Trends, sondern
+              aus Stimmungen, Kontrasten und räumlichen Eindrücken. Uns interessiert
+              nicht das Laute, Überladene oder Gefällige, sondern das Präzise, das
+              Eigenständige und das, was nachwirkt.
+            </p>
+
+            <p>
+              Deshalb arbeiten wir mit Atmosphären wie kaltem Beton, nassem Marmor,
+              heller Asche oder textilem Puder. Wir übersetzen Oberflächen,
+              Materialien und emotionale Spannung in olfaktorische Kompositionen,
+              die sich bewusst von klassischer Parfümerie abheben.
+            </p>
+          </div>
+        </section>
+
+        <section className="about-proof-strip">
+          <div className="about-proof-item">
+            <span className="about-label">ATELIER</span>
+            <p>Entwicklung aus einem kuratierten Duft- und Materialkontext</p>
+          </div>
+          <div className="about-proof-item">
+            <span className="about-label">KLEINSERIEN</span>
+            <p>Chargenbasiert gedacht statt massenmarktfähig optimiert</p>
+          </div>
+          <div className="about-proof-item">
+            <span className="about-label">KOMPOSITION</span>
+            <p>Materiallogik vor Trendformel und Lautstärke</p>
+          </div>
+          <div className="about-proof-item">
+            <span className="about-label">HERKUNFT</span>
+            <p>Creative Direction und Qualitätsanspruch aus der Schweiz</p>
+          </div>
+        </section>
+
+        <section className="about-quote-block">
+          <p>
+            „Jeder Duft beginnt bei uns nicht mit einer Note, sondern mit einem
+            Raumgefühl.“
+          </p>
+        </section>
+
+        <section className="about-grid-section">
+          <div className="about-card">
+            <span className="about-label">01 / DEKODIEREN</span>
+            <h3>Atmosphäre lesen</h3>
+            <p>
+              Wir beobachten Licht, Materialität, Temperatur, Distanz und Spannung.
+              Nicht als Moodboard allein, sondern als System von Eindrücken, das
+              eine bestimmte Wirkung erzeugt.
+            </p>
+          </div>
+
+          <div className="about-card">
+            <span className="about-label">02 / VERDICHTEN</span>
+            <h3>In Duft übersetzen</h3>
+            <p>
+              Diese Eindrücke werden in eine olfaktorische Sprache übertragen:
+              mineralisch, staubig, metallisch, glatt, rau, still oder warm. So
+              entsteht keine Kopie eines Objekts, sondern seine Atmosphäre.
+            </p>
+          </div>
+
+          <div className="about-card">
+            <span className="about-label">03 / REDUZIEREN</span>
+            <h3>Wirkung schärfen</h3>
+            <p>
+              Wir lassen weg, was beliebig ist. Übrig bleibt eine klare Signatur:
+              charaktervoll, hochwertig und bewusst nischig. Ein Duft, der Haltung
+              zeigt, statt nur zu gefallen.
+            </p>
+          </div>
+        </section>
+
+        <section className="about-section about-section--split about-process-section">
+          <div className="about-section-heading">
+            <span className="about-label">PROZESS & KOMPETENZ</span>
+            <h2>WIE AUS EINER IDEE EINE BELASTBARE KOMPOSITION WIRD.</h2>
+          </div>
+
+          <div className="about-section-copy">
+            <p>
+              atmos arbeitet nicht mit einem losgelösten Storytelling, das im
+              Nachhinein auf einen Duft gelegt wird. Jede Komposition beginnt mit
+              einer klaren Material- und Spannungslogik: Welche Oberfläche soll
+              spürbar werden? Welche Temperatur? Welche Dichte? Welche Distanz?
+            </p>
+
+            <p>
+              Erst danach wird in Akkorden, Übergängen und Gewichtungen gedacht.
+              So entstehen Düfte, die nicht bloss „inspirierte Namen“ tragen,
+              sondern in sich konsistent wirken – vom ersten Eindruck bis in den
+              Drydown.
+            </p>
+          </div>
+        </section>
+
+        <section className="about-credentials-grid">
+          <article className="about-credential-card">
+            <span className="about-label">ATELIER / ENTWICKLUNG</span>
+            <h3>Komposition aus einem klaren Duftverständnis</h3>
+            <p>
+              Jede Arbeit basiert auf einem kuratierten Konzept, einer definierten
+              Materialwelt und mehreren internen Entwicklungsstufen statt auf
+              kurzfristigen Trendbriefings.
+            </p>
+          </article>
+
+          <article className="about-credential-card">
+            <span className="about-label">MATERIALLOGIK</span>
+            <h3>Noten folgen einer Idee, nicht bloss einer Wirkung</h3>
+            <p>
+              Rohstoffe und Akkorde werden danach gewählt, welche Oberfläche,
+              Temperatur oder Spannung sie transportieren – nicht nur danach, ob sie
+              möglichst sofort gefallen.
+            </p>
+          </article>
+
+          <article className="about-credential-card">
+            <span className="about-label">CHARGENPRINZIP</span>
+            <h3>Kleinserie statt gesichtsloser Massenästhetik</h3>
+            <p>
+              atmos denkt in kontrollierten Batches und klaren Editionen. Das stärkt
+              Nachvollziehbarkeit, Qualitätsfokus und die Eigenständigkeit jeder
+              Komposition.
+            </p>
+          </article>
+
+          <article className="about-credential-card">
+            <span className="about-label">QUALITÄTSPRÜFUNG</span>
+            <h3>Komposition, Haltbarkeit und Verlauf werden bewusst geprüft</h3>
+            <p>
+              Bewertet werden nicht nur Auftakt und Präsenz, sondern auch Übergänge,
+              Balance, Textur, Wiedererkennbarkeit und das Verhalten auf Haut über
+              mehrere Stunden.
+            </p>
+          </article>
+        </section>
+
+        <section className="about-method-section">
+          <div className="about-method-copy">
+            <span className="about-label">NACHWEISBARE DUFTLOGIK</span>
+            <h2>FÜR MENSCHEN, DIE HYPE ERKENNEN UND SUBSTANZ SUCHEN.</h2>
+            <p>
+              Wer in der Szene unterwegs ist, erkennt schnell, wenn ein Duft vor
+              allem über Bildsprache verkauft wird. Genau deshalb machen wir unsere
+              Denkweise sichtbar: über Struktur, Materialbezug, Edition, Trageverlauf
+              und eine klare innere Logik der Komposition.
+            </p>
+          </div>
+
+          <div className="about-method-points">
+            <div>
+              <span>DUFTSTRUKTUR</span>
+              <p>Top, Heart und Base werden als Verlauf und nicht nur als Liste gedacht.</p>
+            </div>
+            <div>
+              <span>MATERIALBEZUG</span>
+              <p>Jeder Duft wird über Atmosphäre, Oberfläche und sensorische Spannung verankert.</p>
+            </div>
+            <div>
+              <span>EDITIONEN</span>
+              <p>Chargen und Editionen machen Entwicklung und Kontext nachvollziehbarer.</p>
+            </div>
+            <div>
+              <span>TRAGBARKEIT</span>
+              <p>Nische bedeutet bei uns Charakter – nicht Beliebigkeit oder reine Provokation.</p>
+            </div>
+          </div>
+        </section>
+
+        <section className="about-section about-origin-section">
+          <div className="about-origin-copy">
+            <span className="about-label">MADE IN SWITZERLAND</span>
+            <h2>PRÄZISION IN FORM, DUFT UND AUFTRITT.</h2>
+            <p>
+              atmos ist in der Schweiz verankert. Dieser Ursprung zeigt sich nicht
+              nur in der Herstellung, sondern auch in unserer Haltung zur Qualität:
+              kontrolliert, bewusst, präzise und kompromisslos in der Ausarbeitung.
+            </p>
+            <p>
+              Unsere Düfte bewegen sich zwischen Luxus und Konzept. Sie sollen
+              hochwertig wirken, ohne laut zu werden. Edel, ohne klassisch zu sein.
+              Und luxuriös, ohne sich über Überfluss zu definieren.
+            </p>
+          </div>
+
+          <div className="about-origin-box">
+            <div>
+              <span>QUALITÄTSVERSPRECHEN</span>
+              <p>Kuratiert, präzise und mit Fokus auf charakterstarke Kompositionen.</p>
+            </div>
+            <div>
+              <span>DESIGNSPRACHE</span>
+              <p>Reduziert, architektonisch und materialorientiert.</p>
+            </div>
+            <div>
+              <span>ZIEL</span>
+              <p>Düfte schaffen, die nicht austauschbar sind, sondern erinnerbar.</p>
+            </div>
+          </div>
+        </section>
+
+      <section className="about-trust-note">
+  <span className="about-label">QUALITÄTSVERSTÄNDNIS</span>
+  <p>
+    Bei atmos steht nicht die schnelle Aufmerksamkeit im Vordergrund, sondern die
+    Qualität der Komposition. Unsere Düfte entstehen aus klaren Materialideen,
+    kontrollierter Entwicklung und einem kuratierten Anspruch an Verlauf,
+    Balance, Haltbarkeit und Charakter. Jede Edition soll nicht nur auffallen,
+    sondern bestehen – durch Präzision, Eigenständigkeit und eine spürbare
+    kompositorische Disziplin.
+  </p>
+</section>
+
+        <section className="about-bottom-cta">
+          <div className="about-bottom-copy">
+            <span className="about-label">atmos</span>
+            <h2>FÜR MENSCHEN, DIE NICHT NUR EINEN DUFT SUCHEN, SONDERN EINE HALTUNG.</h2>
+            <p>
+              Entdecke Düfte, die Atmosphäre nicht illustrieren, sondern in eine
+              tragbare Form übersetzen.
+            </p>
+          </div>
+
+          <div className="about-bottom-actions">
+            <Link to="/" className="about-btn about-btn--primary">
+              Zur Startseite
+            </Link>
+            <Link to="/#dufte" className="about-btn about-btn--secondary">
+              Düfte entdecken
+            </Link>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}
+
+export default AboutPage;
\ No newline at end of file
diff --git a/parfum-shop/src/pages/DatenschutzPage.css b/parfum-shop/src/pages/DatenschutzPage.css
new file mode 100644
index 0000000..8c648e2
--- /dev/null
+++ b/parfum-shop/src/pages/DatenschutzPage.css
@@ -0,0 +1,134 @@
+.datenschutz-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));
+}
+
+.datenschutz-shell {
+  background: #f5f5f5;
+  border: 1px solid #d9d9d9;
+  padding: 38px;
+}
+
+.datenschutz-kicker,
+.datenschutz-label {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  color: #666;
+}
+
+.datenschutz-hero {
+  padding-bottom: 32px;
+  border-bottom: 1px solid #dfdfdf;
+}
+
+.datenschutz-hero h1 {
+  margin: 14px 0 16px;
+  font-size: 64px;
+  line-height: 0.92;
+  font-weight: 300;
+  letter-spacing: -0.05em;
+  color: #131313;
+}
+
+.datenschutz-intro {
+  max-width: 820px;
+  margin: 0;
+  font-size: 17px;
+  line-height: 1.7;
+  color: #4f4f4f;
+}
+
+.datenschutz-section {
+  display: grid;
+  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
+  gap: 28px;
+  align-items: start;
+  margin-top: 38px;
+  padding-top: 38px;
+  border-top: 1px solid #dfdfdf;
+}
+
+.datenschutz-section-heading h2 {
+  margin: 10px 0 0;
+  font-size: 38px;
+  line-height: 0.98;
+  font-weight: 300;
+  letter-spacing: -0.04em;
+  color: #131313;
+}
+
+.datenschutz-section-copy p {
+  margin: 0 0 16px;
+  font-size: 16px;
+  line-height: 1.75;
+  color: #4f4f4f;
+}
+
+.datenschutz-list {
+  margin: 0;
+  padding-left: 18px;
+  display: grid;
+  gap: 10px;
+}
+
+.datenschutz-list li {
+  font-size: 16px;
+  line-height: 1.7;
+  color: #4f4f4f;
+}
+
+.datenschutz-note-box {
+  padding: 22px;
+  border: 1px solid rgba(255, 106, 0, 0.18);
+  background: linear-gradient(
+    180deg,
+    rgba(255, 106, 0, 0.08),
+    rgba(255, 106, 0, 0.03)
+  );
+}
+
+.datenschutz-note-box p {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.65;
+  color: #1f1f1f;
+}
+
+@media (max-width: 1100px) {
+  .datenschutz-section {
+    grid-template-columns: 1fr;
+  }
+
+  .datenschutz-hero h1 {
+    font-size: 48px;
+  }
+}
+
+@media (max-width: 700px) {
+  .datenschutz-page {
+    padding: 18px;
+  }
+
+  .datenschutz-shell {
+    padding: 24px 18px;
+  }
+
+  .datenschutz-hero h1 {
+    font-size: 36px;
+  }
+
+  .datenschutz-section-heading h2 {
+    font-size: 28px;
+  }
+
+  .datenschutz-intro,
+  .datenschutz-section-copy p,
+  .datenschutz-list li {
+    font-size: 15px;
+  }
+}
\ No newline at end of file
diff --git a/parfum-shop/src/pages/DatenschutzPage.jsx b/parfum-shop/src/pages/DatenschutzPage.jsx
new file mode 100644
index 0000000..0768c7a
--- /dev/null
+++ b/parfum-shop/src/pages/DatenschutzPage.jsx
@@ -0,0 +1,230 @@
+import { Link } from "react-router";
+import "../style/navbar.css";
+import "./DatenschutzPage.css";
+
+function DatenschutzPage() {
+    return (
+        <div className="datenschutz-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="/#testen" className="nav-link">
+                        Testen
+                    </Link>
+                    <a href="#cart" className="nav-link">
+                        Cart
+                    </a>
+                </div>
+            </nav>
+
+            <main className="datenschutz-shell">
+                <section className="datenschutz-hero">
+                    <span className="datenschutz-kicker">RECHTLICHE ANGABEN</span>
+                    <h1>DATENSCHUTZ</h1>
+                    <p className="datenschutz-intro">
+                        Der Schutz persönlicher Daten hat für atmos einen hohen Stellenwert.
+                        Nachfolgend informieren wir darüber, welche personenbezogenen Daten bei
+                        der Nutzung dieser Website erhoben, verarbeitet und gespeichert werden,
+                        zu welchen Zwecken dies erfolgt und welche Rechte betroffene Personen im
+                        Zusammenhang mit ihren Daten haben.
+                    </p>
+                </section>
+
+                <section className="datenschutz-section">
+                    <div className="datenschutz-section-heading">
+                        <span className="datenschutz-label">VERANTWORTLICHE STELLE</span>
+                        <h2>WER FÜR DIE DATENVERARBEITUNG VERANTWORTLICH IST</h2>
+                    </div>
+
+                    <div className="datenschutz-section-copy">
+                        <p>
+                            Verantwortlich für die Datenverarbeitung im Zusammenhang mit dieser
+                            Website ist:
+                        </p>
+                        <p>
+                            atmos GmbH
+                            <br />
+                            Musterstrasse 12
+                            <br />
+                            7000 Chur
+                            <br />
+                            Schweiz
+                        </p>
+                        <p>
+                            E-Mail: hello@atmos.ch
+                            <br />
+                            Telefon: +41 00 000 00 00
+                        </p>
+                    </div>
+                </section>
+
+                <section className="datenschutz-section">
+                    <div className="datenschutz-section-heading">
+                        <span className="datenschutz-label">ALLGEMEINES</span>
+                        <h2>WELCHE DATEN ERHOBEN WERDEN</h2>
+                    </div>
+
+                    <div className="datenschutz-section-copy">
+                        <p>
+                            Beim Besuch dieser Website können automatisch technische Daten
+                            erfasst werden. Dazu gehören insbesondere IP-Adresse, Datum und
+                            Uhrzeit des Zugriffs, Browsertyp, Betriebssystem, Referrer-URL sowie
+                            weitere Informationen, die zur Stabilität und Sicherheit der Website
+                            erforderlich sind.
+                        </p>
+                        <p>
+                            Personenbezogene Daten werden darüber hinaus nur dann erhoben, wenn
+                            du uns diese freiwillig mitteilst, beispielsweise über ein
+                            Kontaktformular, bei einer Bestellung, bei einer Supportanfrage oder
+                            durch die Anmeldung zu einem Newsletter.
+                        </p>
+                    </div>
+                </section>
+
+                <section className="datenschutz-section">
+                    <div className="datenschutz-section-heading">
+                        <span className="datenschutz-label">ZWECK</span>
+                        <h2>WOFÜR DIE DATEN VERWENDET WERDEN</h2>
+                    </div>
+
+                    <div className="datenschutz-section-copy">
+                        <p>Die Verarbeitung personenbezogener Daten erfolgt insbesondere:</p>
+                        <ul className="datenschutz-list">
+                            <li>zur Bereitstellung und technischen Optimierung der Website,</li>
+                            <li>zur Bearbeitung von Anfragen und Supportfällen,</li>
+                            <li>zur Abwicklung von Bestellungen und Vertragsverhältnissen,</li>
+                            <li>zur Kommunikation mit Kundinnen und Kunden,</li>
+                            <li>zur Sicherheit und Missbrauchsprävention,</li>
+                            <li>zur Erfüllung gesetzlicher Verpflichtungen.</li>
+                        </ul>
+                    </div>
+                </section>
+
+                <section className="datenschutz-section">
+                    <div className="datenschutz-section-heading">
+                        <span className="datenschutz-label">COOKIES & TRACKING</span>
+                        <h2>COOKIES UND ÄHNLICHE TECHNOLOGIEN</h2>
+                    </div>
+
+                    <div className="datenschutz-section-copy">
+                        <p>
+                            Diese Website kann Cookies oder ähnliche Technologien verwenden, um
+                            Funktionen bereitzustellen, die Nutzung zu analysieren und das
+                            Nutzererlebnis zu verbessern. Cookies sind kleine Textdateien, die
+                            auf deinem Endgerät gespeichert werden.
+                        </p>
+                        <p>
+                            Soweit technisch nicht notwendige Cookies oder Tracking-Tools
+                            eingesetzt werden, erfolgt dies nur im Rahmen der jeweils geltenden
+                            rechtlichen Vorgaben. Falls du ein Cookie-Banner oder
+                            Einwilligungs-Tool einsetzt, sollten die hier gemachten Angaben exakt
+                            auf dieses Setup abgestimmt sein.
+                        </p>
+                    </div>
+                </section>
+
+                <section className="datenschutz-section">
+                    <div className="datenschutz-section-heading">
+                        <span className="datenschutz-label">WEITERGABE</span>
+                        <h2>WEITERGABE AN DRITTE</h2>
+                    </div>
+
+                    <div className="datenschutz-section-copy">
+                        <p>
+                            Eine Weitergabe personenbezogener Daten an Dritte erfolgt nur, soweit
+                            dies zur Vertragserfüllung notwendig ist, eine gesetzliche
+                            Verpflichtung besteht, ein berechtigtes Interesse vorliegt oder eine
+                            entsprechende Einwilligung erteilt wurde.
+                        </p>
+                        <p>
+                            Eine Datenweitergabe kann insbesondere an technische Dienstleister,
+                            Hosting-Anbieter, Zahlungsdienstleister, Versandpartner oder
+                            Analyseanbieter erfolgen, sofern dies für den Betrieb der Website
+                            oder die angebotenen Leistungen erforderlich ist.
+                        </p>
+                    </div>
+                </section>
+
+                <section className="datenschutz-section">
+                    <div className="datenschutz-section-heading">
+                        <span className="datenschutz-label">SPEICHERDAUER</span>
+                        <h2>WIE LANGE DATEN GESPEICHERT WERDEN</h2>
+                    </div>
+
+                    <div className="datenschutz-section-copy">
+                        <p>
+                            Personenbezogene Daten werden nur so lange gespeichert, wie dies für
+                            die jeweiligen Zwecke erforderlich ist oder gesetzliche
+                            Aufbewahrungspflichten bestehen. Anschliessend werden die Daten
+                            gelöscht oder anonymisiert, soweit keine weitere rechtliche Grundlage
+                            für die Verarbeitung besteht.
+                        </p>
+                    </div>
+                </section>
+
+                <section className="datenschutz-section">
+                    <div className="datenschutz-section-heading">
+                        <span className="datenschutz-label">RECHTE</span>
+                        <h2>RECHTE DER BETROFFENEN PERSONEN</h2>
+                    </div>
+
+                    <div className="datenschutz-section-copy">
+                        <p>
+                            Betroffene Personen haben im Rahmen des anwendbaren Datenschutzrechts
+                            insbesondere das Recht auf Auskunft, Berichtigung, Löschung,
+                            Einschränkung der Verarbeitung sowie gegebenenfalls auf Widerspruch
+                            gegen bestimmte Datenverarbeitungen.
+                        </p>
+                        <p>
+                            Anfragen hierzu können an die oben genannte verantwortliche Stelle
+                            gerichtet werden.
+                        </p>
+                    </div>
+                </section>
+
+                <section className="datenschutz-section">
+                    <div className="datenschutz-section-heading">
+                        <span className="datenschutz-label">SICHERHEIT</span>
+                        <h2>TECHNISCHE UND ORGANISATORISCHE MASSNAHMEN</h2>
+                    </div>
+
+                    <div className="datenschutz-section-copy">
+                        <p>
+                            Wir treffen angemessene technische und organisatorische
+                            Sicherheitsmassnahmen, um personenbezogene Daten vor unbefugtem
+                            Zugriff, Verlust, Missbrauch oder Manipulation zu schützen.
+                        </p>
+                        <p>
+                            Bitte beachte jedoch, dass die Datenübertragung im Internet trotz
+                            aller Sorgfalt Sicherheitslücken aufweisen kann.
+                        </p>
+                    </div>
+                </section>
+
+                <section className="datenschutz-section">
+                    <div className="datenschutz-section-heading">
+                        <span className="datenschutz-label">AKTUALISIERUNG</span>
+                        <h2>ÄNDERUNGEN DIESER DATENSCHUTZERKLÄRUNG</h2>
+                    </div>
+
+                    <div className="datenschutz-note-box">
+                        <p>
+                            atmos behält sich vor, diese Datenschutzerklärung bei Bedarf
+                            anzupassen, insbesondere wenn sich rechtliche Vorgaben, technische
+                            Prozesse oder die angebotenen digitalen Leistungen weiterentwickeln.
+                            Es gilt jeweils die auf dieser Website veröffentlichte aktuelle
+                            Fassung.
+                        </p>
+                    </div>
+                </section>
+            </main>
+        </div>
+    );
+}
+
+export default DatenschutzPage;
\ No newline at end of file
diff --git a/parfum-shop/src/pages/ImpressumPage.css b/parfum-shop/src/pages/ImpressumPage.css
new file mode 100644
index 0000000..735c656
--- /dev/null
+++ b/parfum-shop/src/pages/ImpressumPage.css
@@ -0,0 +1,151 @@
+.impressum-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));
+}
+
+.impressum-shell {
+  background: #f5f5f5;
+  border: 1px solid #d9d9d9;
+  padding: 38px;
+}
+
+.impressum-kicker,
+.impressum-label {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  color: #666;
+}
+
+.impressum-hero {
+  padding-bottom: 32px;
+  border-bottom: 1px solid #dfdfdf;
+}
+
+.impressum-hero h1 {
+  margin: 14px 0 16px;
+  font-size: 64px;
+  line-height: 0.92;
+  font-weight: 300;
+  letter-spacing: -0.05em;
+  color: #131313;
+}
+
+.impressum-intro {
+  max-width: 760px;
+  margin: 0;
+  font-size: 17px;
+  line-height: 1.65;
+  color: #4f4f4f;
+}
+
+.impressum-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 18px;
+  margin-top: 38px;
+}
+
+.impressum-card {
+  padding: 24px;
+  background: #efefef;
+  border: 1px solid #d9d9d9;
+  min-height: 210px;
+}
+
+.impressum-card h2 {
+  margin: 14px 0 12px;
+  font-size: 26px;
+  line-height: 1.05;
+  font-weight: 400;
+  color: #131313;
+}
+
+.impressum-card p {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.7;
+  color: #4f4f4f;
+}
+
+.impressum-section {
+  display: grid;
+  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
+  gap: 28px;
+  align-items: start;
+  margin-top: 38px;
+  padding-top: 38px;
+  border-top: 1px solid #dfdfdf;
+}
+
+.impressum-section-heading h2 {
+  margin: 10px 0 0;
+  font-size: 38px;
+  line-height: 0.98;
+  font-weight: 300;
+  letter-spacing: -0.04em;
+  color: #131313;
+}
+
+.impressum-section-copy p {
+  margin: 0 0 16px;
+  font-size: 16px;
+  line-height: 1.75;
+  color: #4f4f4f;
+}
+
+.impressum-note-box {
+  padding: 22px;
+  border: 1px solid rgba(255, 106, 0, 0.18);
+  background: linear-gradient(
+    180deg,
+    rgba(255, 106, 0, 0.08),
+    rgba(255, 106, 0, 0.03)
+  );
+}
+
+.impressum-note-box p {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.65;
+  color: #1f1f1f;
+}
+
+@media (max-width: 1100px) {
+  .impressum-grid,
+  .impressum-section {
+    grid-template-columns: 1fr;
+  }
+
+  .impressum-hero h1 {
+    font-size: 48px;
+  }
+}
+
+@media (max-width: 700px) {
+  .impressum-page {
+    padding: 18px;
+  }
+
+  .impressum-shell {
+    padding: 24px 18px;
+  }
+
+  .impressum-hero h1 {
+    font-size: 36px;
+  }
+
+  .impressum-section-heading h2 {
+    font-size: 28px;
+  }
+
+  .impressum-intro,
+  .impressum-card p,
+  .impressum-section-copy p {
+    font-size: 15px;
+  }
+}
\ No newline at end of file
diff --git a/parfum-shop/src/pages/ImpressumPage.jsx b/parfum-shop/src/pages/ImpressumPage.jsx
new file mode 100644
index 0000000..cb3e05f
--- /dev/null
+++ b/parfum-shop/src/pages/ImpressumPage.jsx
@@ -0,0 +1,163 @@
+import { Link } from "react-router";
+import "../style/navbar.css";
+import "./ImpressumPage.css";
+
+function ImpressumPage() {
+  return (
+    <div className="impressum-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="/#testen" className="nav-link">
+            Testen
+          </Link>
+          <a href="#cart" className="nav-link">
+            Cart
+          </a>
+        </div>
+      </nav>
+
+      <main className="impressum-shell">
+        <section className="impressum-hero">
+          <span className="impressum-kicker">RECHTLICHE ANGABEN</span>
+          <h1>IMPRESSUM</h1>
+          <p className="impressum-intro">
+            Dieses Impressum enthält die rechtlichen Angaben zu atmos sowie
+            Informationen zur Verantwortlichkeit, Erreichbarkeit und zu den
+            veröffentlichten Inhalten dieser Website.
+          </p>
+        </section>
+
+        <section className="impressum-grid">
+          <article className="impressum-card">
+            <span className="impressum-label">ANBIETER</span>
+            <h2>Unternehmen</h2>
+            <p>
+              atmos GmbH
+              <br />
+              Musterstrasse 12
+              <br />
+              7000 Chur
+              <br />
+              Schweiz
+            </p>
+          </article>
+
+          <article className="impressum-card">
+            <span className="impressum-label">KONTAKT</span>
+            <h2>Erreichbarkeit</h2>
+            <p>
+              E-Mail: hello@atmos.ch
+              <br />
+              Telefon: +41 00 000 00 00
+            </p>
+          </article>
+
+          <article className="impressum-card">
+            <span className="impressum-label">VERTRETUNGSBERECHTIGT</span>
+            <h2>Geschäftsführung</h2>
+            <p>
+              Amanda Nielsen, Ermin Zoronjic, Tobias Högger, Salih Hasicic
+              <br />
+              Geschäftsführer*innen
+            </p>
+          </article>
+
+          <article className="impressum-card">
+            <span className="impressum-label">HANDELSREGISTER</span>
+            <h2>Registereintrag</h2>
+            <p>
+              Handelsregisteramt: Kanton Graubünden
+              <br />
+              Unternehmens-Identifikationsnummer: CHE-000.000.000
+            </p>
+          </article>
+        </section>
+
+        <section className="impressum-section">
+          <div className="impressum-section-heading">
+            <span className="impressum-label">INHALTLICHE VERANTWORTUNG</span>
+            <h2>VERANTWORTLICH FÜR DEN INHALT</h2>
+          </div>
+
+          <div className="impressum-section-copy">
+            <p>
+              Verantwortlich für diese Website und die publizierten Inhalte:
+            </p>
+            <p>
+              atmos GmbH
+              <br />
+              Musterstrasse 12
+              <br />
+              7000 Chur
+              <br />
+              Schweiz
+            </p>
+          </div>
+        </section>
+
+        <section className="impressum-section">
+          <div className="impressum-section-heading">
+            <span className="impressum-label">HAFTUNG</span>
+            <h2>HAFTUNGSAUSSCHLUSS</h2>
+          </div>
+
+          <div className="impressum-section-copy">
+            <p>
+              Trotz sorgfältiger inhaltlicher Kontrolle übernimmt atmos keine
+              Gewähr für die Aktualität, Richtigkeit, Vollständigkeit oder
+              Qualität der bereitgestellten Informationen. Haftungsansprüche gegen
+              atmos wegen Schäden materieller oder immaterieller Art, welche aus
+              dem Zugriff oder der Nutzung beziehungsweise Nichtnutzung der
+              veröffentlichten Informationen, durch Missbrauch der Verbindung oder
+              durch technische Störungen entstanden sind, werden im gesetzlich
+              zulässigen Rahmen ausgeschlossen.
+            </p>
+          </div>
+        </section>
+
+        <section className="impressum-section">
+          <div className="impressum-section-heading">
+            <span className="impressum-label">URHEBERRECHT</span>
+            <h2>URHEBER- UND MARKENRECHTE</h2>
+          </div>
+
+          <div className="impressum-section-copy">
+            <p>
+              Sämtliche Inhalte dieser Website, einschliesslich Texte, Bilder,
+              Gestaltungselemente, Logos und Marken, sind urheberrechtlich
+              geschützt und Eigentum von atmos oder der jeweils genannten
+              Rechteinhaber, sofern nicht anders angegeben. Jede Vervielfältigung,
+              Bearbeitung, Verbreitung oder sonstige Verwendung ausserhalb der
+              gesetzlichen Schranken bedarf der vorherigen schriftlichen Zustimmung.
+            </p>
+          </div>
+        </section>
+
+        <section className="impressum-section">
+          <div className="impressum-section-heading">
+            <span className="impressum-label">TRANSPARENZ</span>
+            <h2>KLARE ANGABEN UND ERREICHBARKEIT</h2>
+          </div>
+
+          <div className="impressum-note-box">
+            <p>
+              atmos legt Wert auf eine klare, transparente und nachvollziehbare
+              Kommunikation. Dieses Impressum dient der eindeutigen
+              Anbieterkennzeichnung und stellt die wesentlichen Informationen zur
+              verantwortlichen Stelle, Kontaktaufnahme und rechtlichen Zuordnung
+              dieser Website bereit.
+            </p>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}
+
+export default ImpressumPage;
\ No newline at end of file
diff --git a/parfum-shop/src/pages/LandingPage.jsx b/parfum-shop/src/pages/LandingPage.jsx
index 74a2ad4..a04c38c 100644
--- a/parfum-shop/src/pages/LandingPage.jsx
+++ b/parfum-shop/src/pages/LandingPage.jsx
@@ -155,7 +155,7 @@ function LandingPage() {
         <nav className="navbar navbar--hero">
           <div className="nav-pill">
             <a href="#home" className="nav-link active">
-              Name
+              atmos
             </a>
             <a href="#dufte" className="nav-link">
               Düfte
diff --git a/parfum-shop/src/pages/SupportPage.css b/parfum-shop/src/pages/SupportPage.css
new file mode 100644
index 0000000..6fca3dd
--- /dev/null
+++ b/parfum-shop/src/pages/SupportPage.css
@@ -0,0 +1,357 @@
+.support-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));
+}
+
+.support-shell {
+  background: #f5f5f5;
+  border: 1px solid #d9d9d9;
+  padding: 38px;
+}
+
+.support-kicker,
+.support-label,
+.support-panel-label,
+.support-panel-meta span {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  color: #666;
+}
+
+.support-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.8fr);
+  gap: 28px;
+  align-items: end;
+  padding-bottom: 36px;
+  border-bottom: 1px solid #dfdfdf;
+}
+
+.support-hero-copy h1 {
+  margin: 14px 0 18px;
+  font-size: 68px;
+  line-height: 0.92;
+  font-weight: 300;
+  letter-spacing: -0.05em;
+  color: #131313;
+}
+
+.support-intro {
+  max-width: 720px;
+  margin: 0;
+  font-size: 18px;
+  line-height: 1.65;
+  color: #4f4f4f;
+}
+
+.support-hero-panel {
+  padding: 24px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 106, 0, 0.08),
+    rgba(255, 106, 0, 0.03)
+  );
+  border: 1px solid rgba(255, 106, 0, 0.18);
+}
+
+.support-hero-panel p {
+  margin: 10px 0 0;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #1f1f1f;
+}
+
+.support-panel-meta {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  margin-top: 24px;
+  padding-top: 20px;
+  border-top: 1px solid rgba(255, 106, 0, 0.14);
+}
+
+.support-panel-meta p {
+  margin: 8px 0 0;
+  font-size: 14px;
+  line-height: 1.55;
+  color: #1f1f1f;
+}
+
+.support-quick-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 18px;
+  margin-top: 38px;
+}
+
+.support-quick-card {
+  padding: 24px;
+  background: #efefef;
+  border: 1px solid #d9d9d9;
+  min-height: 240px;
+}
+
+.support-quick-card h3 {
+  margin: 14px 0 12px;
+  font-size: 24px;
+  line-height: 1.08;
+  font-weight: 400;
+  color: #131313;
+}
+
+.support-quick-card p {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.65;
+  color: #4f4f4f;
+}
+
+.support-section {
+  padding-top: 38px;
+}
+
+.support-section--split {
+  display: grid;
+  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
+  gap: 28px;
+  align-items: start;
+}
+
+.support-section-heading h2,
+.support-bottom-copy h2 {
+  margin: 10px 0 0;
+  font-size: 42px;
+  line-height: 0.98;
+  font-weight: 300;
+  letter-spacing: -0.04em;
+  color: #131313;
+}
+
+.support-section-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.support-section-copy p,
+.support-bottom-copy p {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.7;
+  color: #4f4f4f;
+}
+
+.support-info-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
+  gap: 18px;
+  margin-top: 38px;
+}
+
+.support-info-box {
+  padding: 24px;
+  border: 1px solid #d9d9d9;
+  background: #fafafa;
+}
+
+.support-info-box h3 {
+  margin: 14px 0 12px;
+  font-size: 28px;
+  line-height: 1.02;
+  font-weight: 400;
+  color: #fff;
+}
+
+.support-info-box p {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.65;
+  color: #4f4f4f;
+}
+
+.support-info-box--dark {
+  background: #1f1f1f;
+  border-color: #1f1f1f;
+}
+
+.support-info-box--dark .support-label,
+.support-info-box--dark p {
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.support-list {
+  margin: 14px 0 0;
+  padding-left: 18px;
+  display: grid;
+  gap: 10px;
+}
+
+.support-list li {
+  font-size: 15px;
+  line-height: 1.6;
+  color: #1f1f1f;
+}
+
+.support-mail-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 18px;
+  text-decoration: none;
+  padding: 12px 18px;
+  border-radius: 999px;
+  background: #ff6a00;
+  color: #fff;
+  font-size: 14px;
+  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
+}
+
+.support-mail-btn:hover {
+  transform: translateY(-1px);
+}
+
+.support-faq-section {
+  margin-top: 38px;
+  padding-top: 38px;
+  border-top: 1px solid #dfdfdf;
+}
+
+.support-faq-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 18px;
+  margin-top: 28px;
+}
+
+.support-faq-card {
+  padding: 24px;
+  border: 1px solid #d9d9d9;
+  background: #efefef;
+  min-height: 210px;
+}
+
+.support-faq-card h3 {
+  margin: 0 0 12px;
+  font-size: 22px;
+  line-height: 1.08;
+  font-weight: 400;
+  color: #131313;
+}
+
+.support-faq-card p {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.65;
+  color: #4f4f4f;
+}
+
+.support-bottom-cta {
+  margin-top: 38px;
+  padding: 38px;
+  background: #ff6a00;
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) auto;
+  gap: 24px;
+  align-items: end;
+}
+
+.support-bottom-copy .support-label,
+.support-bottom-copy h2,
+.support-bottom-copy p {
+  color: #fff;
+}
+
+.support-bottom-copy .support-label {
+  opacity: 0.85;
+}
+
+.support-bottom-copy p {
+  margin-top: 16px;
+  max-width: 700px;
+}
+
+.support-bottom-actions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.support-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  padding: 12px 18px;
+  font-size: 14px;
+  border-radius: 999px;
+  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
+}
+
+.support-btn:hover {
+  transform: translateY(-1px);
+}
+
+.support-btn--primary {
+  background: #fff;
+  color: #ff6a00;
+}
+
+.support-btn--secondary {
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+  backdrop-filter: blur(8px);
+}
+
+@media (max-width: 1100px) {
+  .support-hero,
+  .support-section--split,
+  .support-info-grid,
+  .support-bottom-cta {
+    grid-template-columns: 1fr;
+  }
+
+  .support-hero-copy h1 {
+    font-size: 52px;
+  }
+
+  .support-quick-grid,
+  .support-faq-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 700px) {
+  .support-page {
+    padding: 18px;
+  }
+
+  .support-shell {
+    padding: 24px 18px;
+  }
+
+  .support-hero-copy h1 {
+    font-size: 38px;
+  }
+
+  .support-section-heading h2,
+  .support-bottom-copy h2 {
+    font-size: 30px;
+  }
+
+  .support-intro,
+  .support-section-copy p,
+  .support-bottom-copy p,
+  .support-quick-card p,
+  .support-faq-card p {
+    font-size: 15px;
+  }
+
+  .support-bottom-cta {
+    padding: 26px 20px;
+  }
+}
\ No newline at end of file
diff --git a/parfum-shop/src/pages/SupportPage.jsx b/parfum-shop/src/pages/SupportPage.jsx
new file mode 100644
index 0000000..190456c
--- /dev/null
+++ b/parfum-shop/src/pages/SupportPage.jsx
@@ -0,0 +1,213 @@
+import { Link } from "react-router";
+import "../style/navbar.css";
+import "./SupportPage.css";
+
+function SupportPage() {
+  return (
+    <div className="support-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="/#testen" className="nav-link">
+            Testen
+          </Link>
+          <a href="#cart" className="nav-link">
+            Cart
+          </a>
+        </div>
+      </nav>
+
+      <main className="support-shell">
+        <section className="support-hero">
+          <div className="support-hero-copy">
+            <span className="support-kicker">SUPPORT</span>
+            <h1>
+              WIR HELFEN
+              <br />
+              KLAR, DIREKT
+              <br />
+              UND OHNE
+              <br />
+              UMWEGE
+            </h1>
+            <p className="support-intro">
+              Wenn du Fragen zu Bestellung, Versand, Discovery Set, Produkten oder
+              deiner Auswahl hast, ist das Support-Team von atmos für dich da.
+              Präzise, persönlich und mit dem Anspruch, jedes Anliegen sorgfältig
+              zu bearbeiten.
+            </p>
+          </div>
+
+          <div className="support-hero-panel">
+            <span className="support-panel-label">KONTAKT</span>
+            <p>
+              Für Anliegen rund um Bestellung, Produkte, Versand und allgemeine
+              Fragen erreichst du uns direkt per E-Mail.
+            </p>
+
+            <div className="support-panel-meta">
+              <div>
+                <span>E-MAIL</span>
+                <p>support@atmos.ch</p>
+              </div>
+              <div>
+                <span>ANTWORTZEIT</span>
+                <p>In der Regel innerhalb von 1–2 Werktagen</p>
+              </div>
+              <div>
+                <span>SERVICE</span>
+                <p>Persönlich, präzise und sorgfältig</p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="support-quick-grid">
+          <article className="support-quick-card">
+            <span className="support-label">BESTELLUNG</span>
+            <h3>Fragen zu einer laufenden Bestellung</h3>
+            <p>
+              Bei Fragen zu Bestellstatus, Anpassungen oder Unklarheiten zum Ablauf
+              hilft dir unser Support schnell und direkt weiter.
+            </p>
+          </article>
+
+          <article className="support-quick-card">
+            <span className="support-label">VERSAND</span>
+            <h3>Lieferung und Zustellung</h3>
+            <p>
+              Wir unterstützen bei Fragen zu Versanddauer, Zustellung,
+              Lieferbestätigung oder allfälligen Verzögerungen.
+            </p>
+          </article>
+
+          <article className="support-quick-card">
+            <span className="support-label">PRODUKTE</span>
+            <h3>Beratung zu Duft, Sample oder Discovery Set</h3>
+            <p>
+              Wenn du Unterstützung bei der Auswahl brauchst oder einen Duft besser
+              einordnen möchtest, helfen wir dir gerne weiter.
+            </p>
+          </article>
+        </section>
+
+        <section className="support-section support-section--split">
+          <div className="support-section-heading">
+            <span className="support-label">SO ERREICHST DU UNS</span>
+            <h2>EIN GUTER SUPPORT BEGINNT MIT EINER KLAREN ANFRAGE.</h2>
+          </div>
+
+          <div className="support-section-copy">
+            <p>
+              Damit wir dein Anliegen möglichst schnell bearbeiten können, hilft es,
+              wenn du uns in deiner Nachricht die wichtigsten Informationen direkt
+              mitgibst. Dazu gehören je nach Fall deine Bestellnummer, der betroffene
+              Duft oder Artikel sowie eine kurze Beschreibung deines Anliegens.
+            </p>
+
+            <p>
+              Bei Fragen zur Auswahl genügt oft schon ein Hinweis darauf, welche
+              Düfte dich bisher angesprochen haben oder welche Richtung du suchst.
+              So können wir gezielter und hilfreicher antworten.
+            </p>
+          </div>
+        </section>
+
+        <section className="support-info-grid">
+          <div className="support-info-box">
+            <span className="support-label">AM BESTEN MITGEBEN</span>
+            <ul className="support-list">
+              <li>Bestellnummer, falls bereits bestellt wurde</li>
+              <li>Produkt- oder Duftname</li>
+              <li>Kurze Beschreibung des Anliegens</li>
+              <li>Bei Bedarf Fotos oder relevante Details</li>
+            </ul>
+          </div>
+
+          <div className="support-info-box support-info-box--dark">
+            <span className="support-label">KONTAKT</span>
+            <h3>support@atmos.ch</h3>
+            <p>
+              Unser Support beantwortet Anfragen in der Regel innerhalb von 1–2
+              Werktagen.
+            </p>
+            <a href="mailto:support@atmos.ch" className="support-mail-btn">
+              Support kontaktieren
+            </a>
+          </div>
+        </section>
+
+        <section className="support-faq-section">
+          <div className="support-section-heading">
+            <span className="support-label">HÄUFIGE FRAGEN</span>
+            <h2>DIE WICHTIGSTEN THEMEN AUF EINEN BLICK.</h2>
+          </div>
+
+          <div className="support-faq-grid">
+            <article className="support-faq-card">
+              <h3>Wie lange dauert der Versand?</h3>
+              <p>
+                Bestellungen werden in der Regel innerhalb von 1–2 Werktagen
+                bearbeitet. Die Zustellung erfolgt üblicherweise wenige Werktage
+                danach.
+              </p>
+            </article>
+
+            <article className="support-faq-card">
+              <h3>Kann ich zuerst testen?</h3>
+              <p>
+                Ja. Dafür ist das Discovery Set oder ein einzelnes Sample gedacht.
+                So kannst du einen Duft erst auf der Haut erleben, bevor du dich
+                für eine Full Size entscheidest.
+              </p>
+            </article>
+
+            <article className="support-faq-card">
+              <h3>Ich bin unsicher, welcher Duft zu mir passt.</h3>
+              <p>
+                Schreib uns kurz, welche Duftcharaktere, Materialien oder Stimmungen
+                dich ansprechen. Wir helfen dir gerne bei der Einordnung.
+              </p>
+            </article>
+
+            <article className="support-faq-card">
+              <h3>Was tun bei einem Problem mit der Bestellung?</h3>
+              <p>
+                Kontaktiere uns direkt mit deiner Bestellnummer und einer kurzen
+                Beschreibung des Anliegens. Wir prüfen den Fall sorgfältig und
+                melden uns so schnell wie möglich zurück.
+              </p>
+            </article>
+          </div>
+        </section>
+
+        <section className="support-bottom-cta">
+          <div className="support-bottom-copy">
+            <span className="support-label">atmos SUPPORT</span>
+            <h2>NICHT AUTOMATISIERT AUF DISTANZ. SONDERN PERSÖNLICH UND PRÄZISE.</h2>
+            <p>
+              Wir möchten, dass sich auch der Service so anfühlt wie die Marke
+              selbst: klar, hochwertig und sorgfältig.
+            </p>
+          </div>
+
+          <div className="support-bottom-actions">
+            <a href="mailto:support@atmos.ch" className="support-btn support-btn--primary">
+              E-Mail senden
+            </a>
+            <Link to="/" className="support-btn support-btn--secondary">
+              Zur Startseite
+            </Link>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}
+
+export default SupportPage;
\ No newline at end of file