Added aboutus page and images

aboutus/aboutus.qmd

@@ -0,0 +1,146 @@
+---
+format:
+  html:
+    css: styles.css
+    include-in-header:
+      text: |
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet" >
+
+page-layout: full
+---
+
+```{=html}
+<section class="hero">
+  <div class="container">
+    <h1 class="fs-1 fw-bold text-primary">About Us</h1>
+    <p class="fs-3 fw-medium">
+      The interdisciplinary LMU Open Science Center (OSC) has the mission to promote and to foster open science practices at LMU Munich and beyond.
+    </p>
+
+    <div class="ratio ratio-16x9 my-3">
+      <iframe
+        src="https://www.youtube.com/embed/wJj7RkvIrtk?si=XLo-MP-LjVB2lKOE"
+        title="YouTube video player"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerpolicy="strict-origin-when-cross-origin"
+        allowfullscreen>
+      </iframe>
+    </div>
+
+    <p class="fs-5 fw-medium">
+      Transparency and reproducibility lie at the core of scientific integrity. Pursuing these goals through open practices, for example by preregistering studies, and by providing open data, open materials, analysis scripts for computational reproducibility, and open access versions of the published results increases the efficiency, validity, and credibility of research. We subsume these practices under the term “Open Science”. Furthermore, independent replications are vital to establish the robustness and generalizability of research findings.
+    </p>
+  </div>
+</section>
+
+<!-- Staff and Governance -->
+<section class="py-5">
+  <div class="container">
+    <div class="bg-body-tertiary rounded-4 p-4 p-lg-5">
+      <h2 class="mb-0">Staff and Governance</h2>
+
+      <!-- Single-row card rail -->
+      <div class="staff-governance-rail d-flex flex-row flex-nowrap gap-4 mt-4">
+
+        <!-- Governance -->
+        <div class="card shadow-sm">
+          <div class="card-body d-flex flex-column">
+            <h3 class="card-title fs-4 mb-2">Governance</h3>
+            <p class="card-text mb-4">Oversight and advisory structures.</p>
+            <div class="actions mt-auto d-grid gap-2">
+              <a class="btn btn-primary btn-pop w-100" href="scientific-board.html">
+                <i class="fa-solid fa-microscope" aria-hidden="true"></i> Scientific Board
+              </a>
+              <a class="btn btn-outline-primary btn-pop w-100" href="advisory-board.html">
+                <i class="fa-solid fa-users" aria-hidden="true"></i> Advisory Board
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Leadership -->
+        <div class="card shadow-sm">
+          <div class="card-body d-flex flex-column">
+            <h3 class="card-title fs-4 mb-2">Leadership</h3>
+            <p class="card-text mb-4">Executive and scientific direction.</p>
+            <div class="actions mt-auto d-grid gap-2">
+              <a class="btn btn-primary btn-pop w-100" href="managing-director.html">
+                <i class="fa-solid fa-user-tie" aria-hidden="true"></i> Managing Director
+              </a>
+              <a class="btn btn-outline-primary btn-pop w-100" href="scientific-coordinator.html">
+                <i class="fa-solid fa-user-gear" aria-hidden="true"></i> Scientific Coordinator
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Team & Materials -->
+        <div class="card shadow-sm">
+          <div class="card-body d-flex flex-column">
+            <h3 class="card-title fs-4 mb-2">Team &amp; Materials</h3>
+            <p class="card-text mb-4">People directory and publications.</p>
+            <div class="actions mt-auto d-grid gap-2">
+              <a class="btn btn-primary btn-pop w-100" href="staff.html">
+                <i class="fa-solid fa-people-group" aria-hidden="true"></i> OSC Staff
+              </a>
+              <a class="btn btn-outline-primary btn-pop w-100" href="past-newsletters.html">
+                <i class="fa-regular fa-newspaper" aria-hidden="true"></i> Past Newsletters
+              </a>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- Statute CTA -->
+      <div class="d-flex mt-4">
+        <a class="btn btn-primary btn-pop" href="statute.html">
+          Read our Statutes <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Contact Us -->
+<section class="py-5" aria-labelledby="contactus-title">
+  <div class="container">
+    <div class="bg-body-tertiary rounded-4 p-4 p-lg-5">
+      <h2 id="contactus-title" class="mb-4 fw-semibold">Contact Us</h2>
+
+      <div class="row gy-4 gx-lg-5">
+        <div class="col-md-6">
+          <a href="https://forms.gle/YOUR_FORM_ID"
+             class="btn btn-primary w-100 btn-pop"
+             target="_blank" rel="noopener">
+            General Inquiry Form
+          </a>
+        </div>
+        <div class="col-md-6">
+          <ul class="list-group list-group-flush mb-0">
+            <li class="list-group-item bg-transparent px-0">
+              <i class="fa-solid fa-envelope" aria-hidden="true"></i>
+              <span class="ms-2">osc@uni-muenchen.de</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</section>
+
+<!-- Overview -->
+<section id="overview" class="section">
+  <div class="card mb-4" style="max-width: 20rem;">
+    <img src="images/thumbnail.png" class="card-img-top" alt="PDF thumbnail image for the 2025 Impact Report">
+    <div class="card-body">
+      <h5 class="card-title mb-3">2025 Impact Report</h5>
+      <a href="document.pdf" class="btn btn-primary w-100" download>
+        Download PDF <i class="fa-solid fa-download" aria-hidden="true"></i>
+      </a>
+    </div>
+  </div>
+</section>
+```

aboutus/styles.css

@@ -0,0 +1,49 @@
+
+/* Layout */
+.container { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--space-5); }
+.section { padding-block: clamp(var(--space-6), 6vw, var(--space-8)); }
+
+
+/* Buttons */
+.btn-pop {
+  transition: transform .15s ease;
+}
+.btn-pop:hover {
+  transform: scale(1.05);
+}
+
+.hero {
+  padding-block: clamp(var(--space-7), 8vw, calc(var(--space-8) + 1rem));
+  background: #fff;
+}
+
+.staff-governance-rail {
+
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.staff-governance-rail::-webkit-scrollbar {
+  height: .6rem;
+}
+.staff-governance-rail .card {
+  flex: 0 0 auto;
+  min-width: 18rem;
+  max-width: 22rem;
+  overflow: hidden;
+}
+.staff-governance-rail .card-body {
+  padding: 1.25rem 1.25rem 1.5rem;
+}
+.staff-governance-rail .actions .btn {
+  white-space: nowrap;
+}
+
+
+/* PDF thumbnail card  */
+.card-img-top { width: 100%; display: block; }
+.card-body { padding: var(--space-4); }
+.card-title { margin-bottom: var(--space-3); font-size: 1.25rem; }
+.card-text { margin-bottom: var(--space-4); }
+
+
+