feat: add imprint and privacy policy pages, add logo to navigation bar

package.json

@@ -28,6 +28,7 @@
     "motion": "12.23.24",
     "react": "19.0.0",
     "react-dom": "19.0.0",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^7.1.1",
     "tailwind-merge": "3.3.1",
     "tailwind-variants": "3.1.1"

src/App.tsx

@@ -7,6 +7,8 @@ import { HomePage } from './pages/HomePage';
 import { AboutPage } from './pages/AboutPage';
 import { SessionPage } from './pages/SessionPage';
 import { OnboardingPage } from './pages/OnboardingPage';
+import { ImprintPage } from './pages/ImprintPage';
+import { PrivacyPage } from './pages/PrivacyPage';
 import { DashboardPage } from './pages/DashboardPage';
 
 export function App() {
@@ -32,6 +34,8 @@ export function App() {
             <Route path="/about" element={<AboutPage />} />
             <Route path="/session" element={<SessionPage />} />
             <Route path="/onboarding" element={<OnboardingPage />} />
+            <Route path="/imprint" element={<ImprintPage />} />
+            <Route path="/privacy" element={<PrivacyPage />} />
           </Route>
         </Routes>
       </QueryClientProvider>

src/components/footer.tsx

@@ -11,8 +11,14 @@ export function Footer() {
           <Link className="transition hover:text-slate-900" to="/#overview">
             Overview
           </Link>
-          <Link className="transition hover:text-slate-900" to="/#challenges">
-            Challenges
+          <Link className="transition hover:text-slate-900" to="/about">
+            About
+          </Link>
+          <Link className="transition hover:text-slate-900" to="/imprint">
+            Imprint
+          </Link>
+          <Link className="transition hover:text-slate-900" to="/privacy">
+            Privacy Policy
           </Link>
         </div>
         <div className="text-slate-400">© {new Date().getFullYear()} Memo</div>

src/components/navbar.tsx

@@ -56,6 +56,7 @@ export function Navbar() {
               className="group inline-flex items-center gap-2 rounded-md px-1.5 py-1 text-slate-900 transition hover:text-[#0a4da2] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#0a4da2] focus-visible:ring-offset-2 dark:text-white dark:hover:text-[#b3c8ff]"
               aria-label="Memo - Home"
             >
+              <img src="/logoV4.svg" alt="Memo logo" className="h-13 w-13" />
               <span className="font-bold text-lg">Memo</span>
             </Link>
             <span

src/content/privacy.md

@@ -0,0 +1,201 @@
+The Technical University of Munich (TUM), through the Research Group for Applied Education
+Technologies (AET), operates the Memo platform. We take the protection of your personal data very
+seriously. We process personal data collected when you use Memo in compliance with applicable data
+protection regulations, in particular the General Data Protection Regulation (GDPR/DSGVO), the
+Bavarian Data Protection Act (BayDSG), and the German Digital Services Act (DDG).
+
+Below, we inform you about the type, scope, purpose, and legal basis of the collection and
+processing of personal data in accordance with Art. 13 and 14 GDPR.
+
+---
+
+## 1. Controller
+
+The controller within the meaning of Art. 4(7) GDPR is:
+
+**Technical University of Munich**  
+Arcisstrasse 21  
+80333 Munich, Germany
+
+Phone: +49-(0)89-289-01  
+Email: poststelle(at)tum.de
+
+The platform is operated by:
+
+**Research Group for Applied Education Technologies (AET)**  
+Prof. Dr. Stephan Krusche  
+Boltzmannstrasse 3  
+85748 Garching bei München, Germany
+
+---
+
+## 2. Data Protection Officer
+
+The Data Protection Officer of the Technical University of Munich can be reached at:
+
+**Data Protection Officer of the Technical University of Munich**  
+Arcisstrasse 21  
+80333 Munich, Germany
+
+Phone: +49-(0)89-289-17052  
+Email: beauftragter(at)datenschutz.tum.de
+
+---
+
+## 3. Purpose and Scope
+
+Memo is a collaborative platform for collecting competency relationship data to support the
+development of standardized benchmarks for competency-based educational recommender systems. The
+platform allows users to participate in mapping sessions where they provide judgments about
+relationships between competencies and learning resources.
+
+Use of the platform requires authentication via Keycloak, our self-hosted identity management
+system.
+
+---
+
+## 4. Data We Collect and Process
+
+### 4.1 Identity and Authentication Data
+
+To use Memo, you must authenticate using your account. The authentication process is managed through
+Keycloak, an open-source identity and access management system. During authentication, the following
+data may be processed:
+
+- User ID
+- Username
+- Email address
+- Full name (if provided)
+
+**Purpose:** User identification, session management, and access control.
+
+**Legal basis:** Art. 6(1)(b) GDPR (performance of a contract / provision of the service).
+
+**Retention:** Identity data is retained for as long as your account exists.
+
+### 4.2 Session and Contribution Data
+
+When you participate in mapping sessions, the platform stores:
+
+- Your responses and judgments about competency relationships
+- Session participation metadata (timestamps, duration)
+- Progress and completion status
+
+**Purpose:** Building the benchmark dataset and tracking contribution progress.
+
+**Legal basis:** Art. 6(1)(f) GDPR (legitimate interest) for the core platform functionality.
+
+**Retention:** Session data is retained for as long as necessary for the research purposes of the
+platform.
+
+### 4.3 Server Log Data
+
+Every time the platform is accessed, our web servers automatically collect and temporarily store the
+following information in log files:
+
+- IP address of the requesting computer
+- Date and time of the request
+- URL and HTTP method of the request
+- HTTP status code of the response
+- Volume of data transferred
+- Browser type, version, and operating system (if transmitted)
+- Referring URL (if transmitted)
+
+**Purpose:** Ensuring the operation and security of the platform.
+
+**Legal basis:** Art. 6(1)(f) GDPR (legitimate interest).
+
+**Retention:** Server log files are automatically rotated based on file size limits, typically
+resulting in retention of several days to a few weeks.
+
+---
+
+## 5. Cookies and Local Storage
+
+Memo uses the following client-side storage:
+
+- **Keycloak session cookies:** Set by the Keycloak identity provider to maintain your login
+  session. These are strictly necessary for the functioning of the platform.
+- **Theme preference:** A theme value stored in your browser's local storage to remember your
+  light/dark mode preference. This contains no personal data.
+
+**Legal basis:** Art. 6(1)(f) GDPR (legitimate interest) for technically necessary cookies. No
+consent-requiring analytics or tracking cookies are used.
+
+---
+
+## 6. Recipients and Third-Party Services
+
+Your personal data may be accessible to the following recipients:
+
+- **AET team members:** Administrators and developers of the platform, for the purposes of
+  operation, maintenance, and support.
+
+The core platform infrastructure (application server, database, Keycloak) is operated on servers
+managed by AET at TUM within Germany.
+
+---
+
+## 7. SSL/TLS Encryption
+
+For security reasons and to protect the transmission of personal data, Memo uses SSL/TLS encryption
+for all connections. You can recognize an encrypted connection by the "https://" prefix in your
+browser's address bar.
+
+---
+
+## 8. Your Rights
+
+Under the GDPR, you have the following rights with respect to your personal data:
+
+- **Right of access (Art. 15 GDPR):** You have the right to request information about the personal
+  data we store about you.
+- **Right to rectification (Art. 16 GDPR):** You have the right to request the correction of
+  inaccurate personal data.
+- **Right to erasure (Art. 17 GDPR):** You have the right to request the deletion of your personal
+  data, provided no legal retention obligations apply.
+- **Right to restriction of processing (Art. 18 GDPR):** You have the right to request the
+  restriction of processing under certain circumstances.
+- **Right to data portability (Art. 20 GDPR):** You have the right to receive your personal data in
+  a structured, commonly used, and machine-readable format.
+- **Right to object (Art. 21 GDPR):** You have the right to object at any time to processing based
+  on legitimate interest.
+- **Right to withdraw consent (Art. 7(3) GDPR):** Where processing is based on consent, you may
+  withdraw it at any time.
+
+To exercise any of these rights, please contact us at: ls1.admin@in.tum.de
+
+---
+
+## 9. Right to Lodge a Complaint
+
+Without prejudice to any other administrative or judicial remedy, you have the right to lodge a
+complaint with a supervisory authority (Art. 77 GDPR). The competent supervisory authority for the
+Technical University of Munich is:
+
+**Der Bayerische Landesbeauftragte für den Datenschutz (BayLfD)**  
+Wagmüllerstrasse 18  
+80538 Munich, Germany
+
+Phone: +49-(0)89-212672-0  
+Email: poststelle@datenschutz-bayern.de  
+Website: https://www.datenschutz-bayern.de
+
+---
+
+## 10. Email Security
+
+If you contact us by email, your email address will only be used for correspondence with you. Please
+note that standard email transmission on the Internet may have security vulnerabilities. Complete
+protection of data from access by third parties during email transmission is not guaranteed.
+
+---
+
+## 11. Changes to This Privacy Policy
+
+We may update this privacy policy from time to time to reflect changes in our data processing
+practices or legal requirements. The current version is always available on the platform.
+
+---
+
+_Last updated: March 2026_

src/pages/HomePage.tsx

@@ -104,7 +104,7 @@ export function HomePage() {
 
         <section
           id="challenges"
-          className="relative isolate left-1/2 right-1/2 w-screen -translate-x-1/2 transform px-6 pb-12 pt-32 lg:px-0 -mt-24"
+          className="relative isolate left-1/2 right-1/2 w-screen -translate-x-1/2 transform px-6 pb-30 pt-32 lg:px-0 -mt-24"
         >
           <div className="absolute inset-0 bg-white" aria-hidden />
           <div