Kleine Testseite

index.html

@@ -1,43 +1,35 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Webklar Preview Vorlage</title>
-  <style>
-    :root { --bg: #0f1419; --card: #1a2332; --text: #e7ecf3; --accent: #3b82f6; }
-    * { box-sizing: border-box; }
-    body {
-      font-family: system-ui, -apple-system, sans-serif;
-      background: var(--bg);
-      color: var(--text);
-      margin: 0;
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 2rem;
-    }
-    main {
-      max-width: 32rem;
-      background: var(--card);
-      border-radius: 12px;
-      padding: 2rem;
-      text-align: center;
-    }
-    h1 { color: var(--accent); margin-top: 0; }
-    p { line-height: 1.6; opacity: 0.9; }
-    code { background: #0f172a; padding: 0.15rem 0.4rem; border-radius: 4px; }
-  </style>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Test-Website · WEBklar</title>
+<style>
+  :root { --bg:#0f0b1f; --card:#1b1533; --text:#f4f1ff; --muted:#b7aed6; --accent:#7c5cff; }
+  * { box-sizing:border-box; }
+  body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
+  header { padding:72px 20px 48px; text-align:center; background:radial-gradient(circle at 50% 0,#3a2a85 0,var(--bg) 70%); }
+  h1 { font-size:clamp(2rem,6vw,3.2rem); margin:0 0 12px; }
+  header p { color:var(--muted); max-width:560px; margin:0 auto 28px; }
+  .btn { display:inline-block; background:var(--accent); color:#fff; padding:12px 24px; border-radius:999px; text-decoration:none; font-weight:600; }
+  main { max-width:960px; margin:0 auto; padding:24px 20px 64px; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
+  .card { background:var(--card); border-radius:16px; padding:22px; }
+  .card h2 { margin:0 0 6px; font-size:1.1rem; }
+  .card p { margin:0; color:var(--muted); font-size:.95rem; }
+  footer { text-align:center; color:var(--muted); font-size:.85rem; padding:24px 20px 40px; }
+</style>
 </head>
 <body>
-  <main>
-    <h1>Webklar Preview Vorlage</h1>
-    <p>Dieses Repository ist als Preview-Projekt konfiguriert.</p>
-    <p>Nach dem Push wird die Vorschau unter<br>
-      <code>webklar-preview-template.project.webklar.com</code><br>
-      bereitgestellt (Login über <code>project.webklar.com</code>).</p>
-    <p>Passe <code>.webklar-preview.json</code> und diese Seite fuer dein Kundenprojekt an.</p>
-  </main>
+<header>
+  <h1>Test-Website</h1>
+  <p>Eine kleine Beispielseite, um die Projekt-Vorschau im WEBklar-Kundenbereich zu testen.</p>
+  <a class="btn" href="#leistungen">Mehr erfahren</a>
+</header>
+<main id="leistungen">
+  <section class="card"><h2>Schnell</h2><p>Statische Seite, sofort ausgeliefert.</p></section>
+  <section class="card"><h2>Responsiv</h2><p>Passt sich Handy, Tablet und Desktop an.</p></section>
+  <section class="card"><h2>Vorschau</h2><p>Jeder Git-Push aktualisiert diese Seite automatisch.</p></section>
+</main>
+<footer>Testprojekt · WEBklar</footer>
 </body>
 </html>