parfum_agsd/parfum-shop/src/pages/AboutPage.jsx

import SharedNavbar from "../components/SharedNavbar";
import "./AboutPage.css";

function AboutPage() {
  return (
    <div className="about-page">
      <SharedNavbar variant="light" />

      <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;