- Name
+ atmoos
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 (
+ <>
+
+
+ {isOpen && (
+
+
+
+ atmos SUPPORT
+
Wie können wir helfen?
+
+
+
+
+
+
+ {messages.map((message) => (
+
+ {message.text}
+
+ ))}
+
+ {isTyping && (
+
+ schreibt...
+
+ )}
+
+
+
+
+
+ {showHelpOptions && (
+
+
THEMEN
+
+ {TOPIC_ORDER.map((topic) => (
+
+ ))}
+
+
+ )}
+
+ {showFeedbackActions && (
+
+
WEITERES VORGEHEN
+
+
+
+
+
+
+ )}
+
+ {currentTopic && !showFeedbackActions && (
+
+
+
+ )}
+
+
+
+
+
+ )}
+
+ );
+}
+
+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 (
+
+
+
+
+
+
+
ABOUT atmos
+
+ WIR DEKODIEREN
+
+ ATMOSPHÄREN
+
+ UND WANDELN
+
+ SIE IN DÜFTE
+
+
+ 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.
+
+
+
POSITIONIERUNG
+
+ Nischig. Hochwertig. Edel. Luxuriös. Reduziert in der Form,
+ konsequent in der Wirkung.
+
+
+
+
+
HERKUNFT
+
Made in Switzerland
+
+
+
ANSATZ
+
Atmosphäre vor Mainstream
+
+
+
FOKUS
+
Duft als Konzeptobjekt
+
+
+
+ UNSER VERSTÄNDNIS
+
NICHT DEKORATION. SONDERN HALTUNG.
+
+
+
+
+ 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.
+
+
+
+ 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.
+
+
+
ATELIER
+
Entwicklung aus einem kuratierten Duft- und Materialkontext
+
+
KLEINSERIEN
+
Chargenbasiert gedacht statt massenmarktfähig optimiert
+
+
KOMPOSITION
+
Materiallogik vor Trendformel und Lautstärke
+
+
HERKUNFT
+
Creative Direction und Qualitätsanspruch aus der Schweiz
+
+ „Jeder Duft beginnt bei uns nicht mit einer Note, sondern mit einem
+ Raumgefühl.“
+
+
+
+
+
+
01 / DEKODIEREN
+
Atmosphäre lesen
+
+ Wir beobachten Licht, Materialität, Temperatur, Distanz und Spannung.
+ Nicht als Moodboard allein, sondern als System von Eindrücken, das
+ eine bestimmte Wirkung erzeugt.
+
+
+
02 / VERDICHTEN
+
In Duft übersetzen
+
+ 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.
+
+
+
03 / REDUZIEREN
+
Wirkung schärfen
+
+ 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.
+
+
+ PROZESS & KOMPETENZ
+
WIE AUS EINER IDEE EINE BELASTBARE KOMPOSITION WIRD.
+
+
+
+
+ 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?
+
+
+
+ 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.
+
+
Komposition aus einem klaren Duftverständnis
+
+ Jede Arbeit basiert auf einem kuratierten Konzept, einer definierten
+ Materialwelt und mehreren internen Entwicklungsstufen statt auf
+ kurzfristigen Trendbriefings.
+
+
+
+
+ MATERIALLOGIK
+ Noten folgen einer Idee, nicht bloss einer Wirkung
+
+ Rohstoffe und Akkorde werden danach gewählt, welche Oberfläche,
+ Temperatur oder Spannung sie transportieren – nicht nur danach, ob sie
+ möglichst sofort gefallen.
+
+
+
+
+ CHARGENPRINZIP
+ Kleinserie statt gesichtsloser Massenästhetik
+
+ atmos denkt in kontrollierten Batches und klaren Editionen. Das stärkt
+ Nachvollziehbarkeit, Qualitätsfokus und die Eigenständigkeit jeder
+ Komposition.
+
+
+
+
+ QUALITÄTSPRÜFUNG
+ Komposition, Haltbarkeit und Verlauf werden bewusst geprüft
+
+ Bewertet werden nicht nur Auftakt und Präsenz, sondern auch Übergänge,
+ Balance, Textur, Wiedererkennbarkeit und das Verhalten auf Haut über
+ mehrere Stunden.
+
+
+
+
+
+
+
NACHWEISBARE DUFTLOGIK
+
FÜR MENSCHEN, DIE HYPE ERKENNEN UND SUBSTANZ SUCHEN.
+
+ 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.
+
+
+
+
DUFTSTRUKTUR
+
Top, Heart und Base werden als Verlauf und nicht nur als Liste gedacht.
+
+
+
MATERIALBEZUG
+
Jeder Duft wird über Atmosphäre, Oberfläche und sensorische Spannung verankert.
+
+
+
EDITIONEN
+
Chargen und Editionen machen Entwicklung und Kontext nachvollziehbarer.
+
+
+
TRAGBARKEIT
+
Nische bedeutet bei uns Charakter – nicht Beliebigkeit oder reine Provokation.
+
+
+
MADE IN SWITZERLAND
+
PRÄZISION IN FORM, DUFT UND AUFTRITT.
+
+ 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.
+
+
+ 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.
+
+
+
+
QUALITÄTSVERSPRECHEN
+
Kuratiert, präzise und mit Fokus auf charakterstarke Kompositionen.
+
+
+
DESIGNSPRACHE
+
Reduziert, architektonisch und materialorientiert.
+
+
+
ZIEL
+
Düfte schaffen, die nicht austauschbar sind, sondern erinnerbar.
+
+
+ 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.
+
+
+
+
+
+
atmos
+
FÜR MENSCHEN, DIE NICHT NUR EINEN DUFT SUCHEN, SONDERN EINE HALTUNG.
+
+ Entdecke Düfte, die Atmosphäre nicht illustrieren, sondern in eine
+ tragbare Form übersetzen.
+
+
+
+ Zur Startseite
+
+
+ Düfte entdecken
+
+
+
+
+
+ );
+}
+
+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 (
+
+
+
+
+
+ RECHTLICHE ANGABEN
+ DATENSCHUTZ
+
+ 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.
+
+
+
+
+
+ VERANTWORTLICHE STELLE
+
WER FÜR DIE DATENVERARBEITUNG VERANTWORTLICH IST
+
+
+
+
+ Verantwortlich für die Datenverarbeitung im Zusammenhang mit dieser
+ Website ist:
+
+
+ atmos GmbH
+
+ Musterstrasse 12
+
+ 7000 Chur
+
+ Schweiz
+
+
+ E-Mail: hello@atmos.ch
+
+ Telefon: +41 00 000 00 00
+
+
+ ALLGEMEINES
+
WELCHE DATEN ERHOBEN WERDEN
+
+
+
+
+ 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.
+
+
+ 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.
+
+
+ ZWECK
+
WOFÜR DIE DATEN VERWENDET WERDEN
+
+
+
+
Die Verarbeitung personenbezogener Daten erfolgt insbesondere:
+
+ - zur Bereitstellung und technischen Optimierung der Website,
+ - zur Bearbeitung von Anfragen und Supportfällen,
+ - zur Abwicklung von Bestellungen und Vertragsverhältnissen,
+ - zur Kommunikation mit Kundinnen und Kunden,
+ - zur Sicherheit und Missbrauchsprävention,
+ - zur Erfüllung gesetzlicher Verpflichtungen.
+
+
+ COOKIES & TRACKING
+
COOKIES UND ÄHNLICHE TECHNOLOGIEN
+
+
+
+
+ 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.
+
+
+ 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.
+
+
+ WEITERGABE
+
WEITERGABE AN DRITTE
+
+
+
+
+ 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.
+
+
+ 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.
+
+
+ SPEICHERDAUER
+
WIE LANGE DATEN GESPEICHERT WERDEN
+
+
+
+
+ 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.
+
+
+ RECHTE
+
RECHTE DER BETROFFENEN PERSONEN
+
+
+
+
+ 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.
+
+
+ Anfragen hierzu können an die oben genannte verantwortliche Stelle
+ gerichtet werden.
+
+
+ SICHERHEIT
+
TECHNISCHE UND ORGANISATORISCHE MASSNAHMEN
+
+
+
+
+ Wir treffen angemessene technische und organisatorische
+ Sicherheitsmassnahmen, um personenbezogene Daten vor unbefugtem
+ Zugriff, Verlust, Missbrauch oder Manipulation zu schützen.
+
+
+ Bitte beachte jedoch, dass die Datenübertragung im Internet trotz
+ aller Sorgfalt Sicherheitslücken aufweisen kann.
+
+
+ AKTUALISIERUNG
+
ÄNDERUNGEN DIESER DATENSCHUTZERKLÄRUNG
+
+
+
+
+ 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.
+
+
+
+ );
+}
+
+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 (
+
+
+
+
+
+ RECHTLICHE ANGABEN
+ IMPRESSUM
+
+ Dieses Impressum enthält die rechtlichen Angaben zu atmos sowie
+ Informationen zur Verantwortlichkeit, Erreichbarkeit und zu den
+ veröffentlichten Inhalten dieser Website.
+
+
+
+
+
+ ANBIETER
+ Unternehmen
+
+ atmos GmbH
+
+ Musterstrasse 12
+
+ 7000 Chur
+
+ Schweiz
+
+
+
+
+ KONTAKT
+ Erreichbarkeit
+
+ E-Mail: hello@atmos.ch
+
+ Telefon: +41 00 000 00 00
+
+
+
+
+ VERTRETUNGSBERECHTIGT
+ Geschäftsführung
+
+ Amanda Nielsen, Ermin Zoronjic, Tobias Högger, Salih Hasicic
+
+ Geschäftsführer*innen
+
+
+
+
+ HANDELSREGISTER
+ Registereintrag
+
+ Handelsregisteramt: Kanton Graubünden
+
+ Unternehmens-Identifikationsnummer: CHE-000.000.000
+
+
+
+
+
+
+ INHALTLICHE VERANTWORTUNG
+
VERANTWORTLICH FÜR DEN INHALT
+
+
+
+
+ Verantwortlich für diese Website und die publizierten Inhalte:
+
+
+ atmos GmbH
+
+ Musterstrasse 12
+
+ 7000 Chur
+
+ Schweiz
+
+
+ HAFTUNG
+
HAFTUNGSAUSSCHLUSS
+
+
+
+
+ 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.
+
+
+ URHEBERRECHT
+
URHEBER- UND MARKENRECHTE
+
+
+
+
+ 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.
+
+
+ TRANSPARENZ
+
KLARE ANGABEN UND ERREICHBARKEIT
+
+
+
+
+ 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.
+
+
+
+ );
+}
+
+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() {