Landing page: agentische Produkte, Ubuntu Sans, nyx CTA, Suffizienz copy

2026-03-30 23:47:48 +02:00 · 2026-03-30 23:47:48 +02:00 · dd3be9b717
commit dd3be9b717
parent 3133c5bb44
9 changed files with 1650 additions and 20 deletions
--- a/datenschutz.html
+++ b/datenschutz.html
@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Datenschutz — loop42</title>
+  <script type="module" src="/src/main.ts"></script>
+</head>
+<body>
+
+<nav>
+  <a class="nav-logo" href="/">loop42</a>
+  <ul class="nav-links">
+    <li><a href="/">Startseite</a></li>
+  </ul>
+</nav>
+
+<div class="legal-page">
+  <h1>Datenschutzerklärung</h1>
+
+  <h2>1. Verantwortlicher</h2>
+  <p>
+    loop42 UG (haftungsbeschränkt)<br>
+    Bettina Baltes<br>
+    [STRASSE HAUSNUMMER], [PLZ ORT]<br>
+    E-Mail: <a href="mailto:hallo@loop42.de">hallo@loop42.de</a>
+  </p>
+
+  <h2>2. Erhebung und Speicherung personenbezogener Daten</h2>
+  <p>
+    Beim Besuch dieser Website werden automatisch Informationen allgemeiner Natur erfasst
+    (sog. Server-Logfiles). Diese umfassen u. a. den Browsertyp, das verwendete Betriebssystem,
+    den Referrer, die IP-Adresse sowie Datum und Uhrzeit des Zugriffs. Diese Daten sind nicht
+    bestimmten Personen zuordbar und werden nicht mit anderen Datenquellen zusammengeführt.
+  </p>
+  <p>
+    Eine darüber hinausgehende Erhebung personenbezogener Daten findet auf dieser Website
+    derzeit nicht statt. Sobald weitere Dienste (z. B. Kontaktformular, Nutzerkonten)
+    eingeführt werden, wird diese Erklärung entsprechend aktualisiert.
+  </p>
+
+  <h2>3. Hosting und Infrastruktur</h2>
+  <p>
+    Diese Website wird auf einem Server in einem deutschen Rechenzentrum betrieben.
+    Der Anbieter ist IONOS SE, Elgendorfer Str. 57, 56410 Montabaur, Deutschland.
+    Weitere Informationen zum Datenschutz bei IONOS finden Sie unter
+    <a href="https://www.ionos.de/terms-gtc/datenschutzerklaerung/" target="_blank" rel="noopener">ionos.de</a>.
+  </p>
+
+  <h2>4. Cookies</h2>
+  <p>
+    Diese Website verwendet keine Cookies.
+  </p>
+
+  <h2>5. Analyse-Tools und Tracking</h2>
+  <p>
+    Diese Website verwendet keine Analyse-Tools, kein Tracking und keine eingebetteten
+    Inhalte Dritter (z. B. Google Fonts, Social-Media-Widgets). Es werden keine Daten
+    an Dritte übermittelt.
+  </p>
+
+  <h2>6. Ihre Rechte</h2>
+  <p>Sie haben gegenüber uns folgende Rechte hinsichtlich Ihrer personenbezogenen Daten:</p>
+  <ul>
+    <li>Recht auf Auskunft (Art. 15 DSGVO)</li>
+    <li>Recht auf Berichtigung (Art. 16 DSGVO)</li>
+    <li>Recht auf Löschung (Art. 17 DSGVO)</li>
+    <li>Recht auf Einschränkung der Verarbeitung (Art. 18 DSGVO)</li>
+    <li>Recht auf Datenübertragbarkeit (Art. 20 DSGVO)</li>
+    <li>Recht auf Widerspruch gegen die Verarbeitung (Art. 21 DSGVO)</li>
+  </ul>
+  <p>
+    Zur Ausübung Ihrer Rechte wenden Sie sich bitte an:
+    <a href="mailto:hallo@loop42.de">hallo@loop42.de</a>
+  </p>
+
+  <h2>7. Beschwerderecht bei der Aufsichtsbehörde</h2>
+  <p>
+    Sie haben das Recht, sich bei einer Datenschutz-Aufsichtsbehörde über die Verarbeitung
+    Ihrer personenbezogenen Daten durch uns zu beschweren. Die zuständige Aufsichtsbehörde
+    richtet sich nach dem Bundesland des Unternehmenssitzes.
+  </p>
+
+  <h2>8. Aktualität und Änderungen</h2>
+  <p>
+    Diese Datenschutzerklärung ist aktuell gültig und hat den Stand März 2026.
+    Durch die Weiterentwicklung unserer Website oder aufgrund geänderter gesetzlicher
+    Vorgaben kann es notwendig werden, diese Datenschutzerklärung anzupassen.
+  </p>
+</div>
+
+<footer>
+  <div class="footer-links">
+    <a href="/legal.html">Impressum</a>
+    <a href="/datenschutz.html">Datenschutz</a>
+  </div>
+  <span>© 2026 loop42</span>
+</footer>
+
+</body>
+</html>
--- a/index.html
+++ b/index.html
@ -3,13 +3,88 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>loop42</title>
-  <link rel="stylesheet" href="/src/style.css">
+  <meta name="description" content="loop42 — Agentische Produkte. Software, Infrastruktur und Datendesign aus einer Hand. DSGVO-konform, betrieben in Deutschland.">
+  <title>loop42 — Agentische Produkte</title>
+  <script type="module" src="/src/main.ts"></script>
 </head>
 <body>
-  <main>
-    <h1>loop42</h1>
-    <p>coming soon</p>
-  </main>
+
+<nav>
+  <a class="nav-logo" href="/">loop42</a>
+  <ul class="nav-links">
+    <li><a href="#ansatz">Ansatz</a></li>
+    <li><a href="#projekte">Projekte</a></li>
+    <li><a href="#kontakt">nyx</a></li>
+  </ul>
+</nav>
+
+<div class="hero">
+  <div class="hero-label">Agentische Produkte</div>
+  <h1>Für jede Aufgabe<br>das <em>richtige</em> Produkt.</h1>
+  <p>loop42 baut agentische Produkte — Software, Infrastruktur und Datendesign aus einer Hand.</p>
+  <a href="#projekte" class="btn">Erste Projekte</a>
+</div>
+
+<hr class="divider">
+
+<section id="ansatz">
+  <div class="section-label">Unser Ansatz</div>
+  <h2>Genau richtig.</h2>
+  <p>Jedes Produkt löst eine klar definierte Aufgabe — mit den Werkzeugen, die dafür nötig sind.</p>
+  <div class="cards">
+    <div class="card">
+      <div class="card-icon">🎯</div>
+      <h3>Das Wesentliche</h3>
+      <p>Jedes Produkt kennt seinen Bereich und bleibt darin. Tiefe schlägt Breite — verlässlich, jeden Tag.</p>
+    </div>
+    <div class="card">
+      <div class="card-icon">👥</div>
+      <h3>Produkte für Teams</h3>
+      <p>Pro Produkt ein gemeinsamer Zugang für alle, die dazugehören — über Gruppenkonten verwaltet, mit getrennten Sitzungen und voller Kontrolle darüber, wer was sieht.</p>
+    </div>
+    <div class="card">
+      <div class="card-icon">🔒</div>
+      <h3>Sicher & konform</h3>
+      <p>Alle Daten liegen in Deutschland. Mandantentrennung auf Datenbankebene, DSGVO-konforme Verarbeitung, Auftragsverarbeitungsvertrag für jedes Produkt.</p>
+    </div>
+  </div>
+</section>
+
+<hr class="divider">
+
+<section id="projekte">
+  <div class="section-label">Erste Projekte</div>
+  <h2>Bildungsangebote — dort, wo sie gebraucht werden.</h2>
+  <p>Unsere ersten Produkte entstehen im Bildungsbereich: praxisnah, fachlich fundiert, für die Fachkräfte, die täglich damit arbeiten.</p>
+  <div class="cards">
+    <div class="card">
+      <div class="card-icon">🧒</div>
+      <h3>Frühkindliche Bildung</h3>
+      <p>Pädagogisches Fachpersonal erhält strukturierte Bildungsangebote — abgestimmt auf die jeweilige Einrichtung, die Altersgruppen und den pädagogischen Alltag.</p>
+    </div>
+    <div class="card">
+      <div class="card-icon">📚</div>
+      <h3>Erwachsenen-Grundbildung</h3>
+      <p>Passgenauige Lernangebote für Erwachsene mit Grundbildungsbedarf — zugänglich, strukturiert, an bestehende Lehrpläne angepasst.</p>
+    </div>
+  </div>
+</section>
+
+<hr class="divider">
+
+<div class="cta" id="kontakt">
+  <h2>nyx</h2>
+  <p>Agentische Produkte erleben — direkt im Browser.</p>
+  <a href="/nyx" class="btn">nyx öffnen</a>
+</div>
+
+<footer>
+  <div class="footer-links">
+    <a href="/legal.html">Impressum</a>
+    <a href="/datenschutz.html">Datenschutz</a>
+  </div>
+  <span>© 2026 loop42 UG (haftungsbeschränkt)</span>
+</footer>
+
 </body>
 </html>
--- a/legal.html
+++ b/legal.html
@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Impressum — loop42</title>
+  <script type="module" src="/src/main.ts"></script>
+</head>
+<body>
+
+<nav>
+  <a class="nav-logo" href="/">loop42</a>
+  <ul class="nav-links">
+    <li><a href="/">Startseite</a></li>
+  </ul>
+</nav>
+
+<div class="legal-page">
+  <h1>Impressum</h1>
+
+  <h2>Angaben gemäß § 5 TMG</h2>
+  <p>
+    loop42 UG (haftungsbeschränkt)<br>
+    [STRASSE HAUSNUMMER]<br>
+    [PLZ ORT]<br>
+    Deutschland
+  </p>
+
+  <h2>Vertreten durch</h2>
+  <p>Bettina Baltes</p>
+
+  <h2>Kontakt</h2>
+  <p>
+    E-Mail: <a href="mailto:hallo@loop42.de">hallo@loop42.de</a><br>
+    Telefon: [TELEFONNUMMER]
+  </p>
+
+  <h2>Registereintrag</h2>
+  <p>
+    Eintragung im Handelsregister.<br>
+    Registergericht: [AMTSGERICHT]<br>
+    Registernummer: [HRB-NUMMER]
+  </p>
+
+  <h2>Umsatzsteuer-ID</h2>
+  <p>
+    Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:<br>
+    [UST-ID-NUMMER]
+  </p>
+
+  <h2>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h2>
+  <p>
+    Bettina Baltes<br>
+    [STRASSE HAUSNUMMER]<br>
+    [PLZ ORT]
+  </p>
+
+  <h2>Streitschlichtung</h2>
+  <p>
+    Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit:
+    <a href="https://ec.europa.eu/consumers/odr/" target="_blank" rel="noopener">https://ec.europa.eu/consumers/odr/</a>.<br>
+    Unsere E-Mail-Adresse finden Sie oben im Impressum.
+  </p>
+  <p>
+    Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer
+    Verbraucherschlichtungsstelle teilzunehmen.
+  </p>
+</div>
+
+<footer>
+  <div class="footer-links">
+    <a href="/legal.html">Impressum</a>
+    <a href="/datenschutz.html">Datenschutz</a>
+  </div>
+  <span>© 2026 loop42</span>
+</footer>
+
+</body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/fonts/UbuntuSans-Italic[wght].woff2
+++ b/src/fonts/UbuntuSans-Italic[wght].woff2
--- a/src/fonts/UbuntuSans[wght].woff2
+++ b/src/fonts/UbuntuSans[wght].woff2
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1 @@
+import './style.css'
--- a/src/style.css
+++ b/src/style.css
@ -1,29 +1,284 @@
+@font-face {
+  font-family: 'Ubuntu Sans';
+  font-style: normal;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url('./fonts/UbuntuSans[wght].woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Ubuntu Sans';
+  font-style: italic;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url('./fonts/UbuntuSans-Italic[wght].woff2') format('woff2');
+}
+
 *, *::before, *::after { box-sizing: border-box; }

+:root {
+  --bg: #0a0a0a;
+  --bg2: #111;
+  --border: #1e1e1e;
+  --text: #e8e8e8;
+  --muted: rgba(232,232,232,0.4);
+  --accent: #7c6af7;
+  --accent-dim: rgba(124,106,247,0.12);
+}
+
+html { scroll-behavior: smooth; }
+
 body {
  margin: 0;
-  background: #0a0a0a;
-  color: #eee;
-  font-family: sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Ubuntu Sans', sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+a:hover { text-decoration: underline; }
+
+/* NAV */
+nav {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  z-index: 100;
  display: flex;
  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
+  justify-content: space-between;
+  padding: 1.25rem 2rem;
+  background: rgba(10,10,10,0.85);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border);
 }

-main {
-  text-align: center;
-}
-
-h1 {
-  font-size: 2rem;
+.nav-logo {
+  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.2em;
-  margin: 0 0 0.5rem;
+  color: var(--text);
+  text-decoration: none;
 }

-p {
-  opacity: 0.4;
+.nav-links {
+  display: flex;
+  gap: 2rem;
+  list-style: none;
+  margin: 0; padding: 0;
+}
+
+.nav-links a {
+  color: var(--muted);
+  font-size: 0.85rem;
+  letter-spacing: 0.05em;
+  transition: color 0.2s;
+}
+.nav-links a:hover {
+  color: var(--text);
+  text-decoration: none;
+}
+
+/* HERO */
+.hero {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 6rem 2rem 4rem;
+}
+
+.hero-label {
+  font-size: 0.75rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 1.5rem;
+}
+
+.hero h1 {
+  font-size: clamp(2.5rem, 6vw, 4.5rem);
+  font-weight: 300;
+  letter-spacing: 0.05em;
+  margin: 0 0 1.5rem;
+  line-height: 1.15;
+}
+
+.hero h1 em {
+  font-style: normal;
+  color: var(--accent);
+}
+
+.hero p {
+  font-size: 1.1rem;
+  color: var(--muted);
+  max-width: 480px;
+  margin: 0 auto 2.5rem;
+}
+
+.btn {
+  display: inline-block;
+  padding: 0.75rem 2rem;
+  background: var(--accent);
+  color: #fff;
+  border-radius: 6px;
  font-size: 0.9rem;
+  letter-spacing: 0.05em;
+  transition: opacity 0.2s;
+}
+.btn:hover { opacity: 0.85; text-decoration: none; }
+
+/* SECTIONS */
+section {
+  padding: 5rem 2rem;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.section-label {
+  font-size: 0.75rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 1rem;
+}
+
+section h2 {
+  font-size: clamp(1.5rem, 3vw, 2.2rem);
+  font-weight: 300;
+  margin: 0 0 1rem;
+}
+
+section > p {
+  color: var(--muted);
+  max-width: 600px;
+  margin: 0 0 3rem;
+}
+
+/* CARDS */
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 1.5rem;
+}
+
+.card {
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 2rem;
+}
+
+.card-icon {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.card h3 {
+  font-size: 1rem;
+  font-weight: 500;
+  margin: 0 0 0.75rem;
+}
+
+.card p {
+  font-size: 0.9rem;
+  color: var(--muted);
+  margin: 0;
+  line-height: 1.6;
+}
+
+/* DIVIDER */
+.divider {
+  border: none;
+  border-top: 1px solid var(--border);
  margin: 0;
 }
+
+/* CTA */
+.cta {
+  text-align: center;
+  padding: 5rem 2rem;
+  background: var(--accent-dim);
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+
+.cta h2 {
+  font-size: clamp(1.5rem, 3vw, 2rem);
+  font-weight: 300;
+  margin: 0 0 1rem;
+}
+
+.cta p {
+  color: var(--muted);
+  margin: 0 auto 2rem;
+  max-width: 480px;
+}
+
+/* FOOTER */
+footer {
+  text-align: center;
+  padding: 2rem;
+  font-size: 0.8rem;
+  color: var(--muted);
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+.footer-links a {
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+.footer-links a:hover { color: var(--text); }
+
+/* LEGAL PAGES */
+.legal-page {
+  padding: 8rem 2rem 4rem;
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.legal-page h1 {
+  font-size: 2rem;
+  font-weight: 300;
+  margin-bottom: 2rem;
+}
+
+.legal-page h2 {
+  font-size: 1.1rem;
+  font-weight: 500;
+  margin: 2rem 0 0.5rem;
+}
+
+.legal-page p,
+.legal-page li {
+  color: var(--muted);
+  font-size: 0.95rem;
+  line-height: 1.7;
+}
+
+.legal-page ul {
+  padding-left: 1.5rem;
+}
+
+/* MOBILE */
+@media (max-width: 600px) {
+  nav { padding: 1rem 1.25rem; }
+  .nav-links { gap: 1.25rem; }
+  section { padding: 3.5rem 1.25rem; }
+  .hero { padding: 5rem 1.25rem 3rem; }
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,7 +1,22 @@
 import { defineConfig } from 'vite'
+import { resolve } from 'path'

 export default defineConfig({
+  server: {
+    host: '0.0.0.0',
+    hmr: {
+      host: 'localhost',
+      port: 5173,
+    },
+  },
  build: {
    outDir: 'dist',
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+        legal: resolve(__dirname, 'legal.html'),
+        datenschutz: resolve(__dirname, 'datenschutz.html'),
+      },
+    },
  },
 })