kobold-ai/waiswuaschd.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update landing page: focus on custom subdomain portals, fix anchor navigation and smooth scroll

Browse Source
This commit is contained in:
kobold-ai
2026-09-21 09:47:13 +02:00
parent 6f364819db
commit fc0482cf37
2 changed files with 153 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+68 -5
View File
@@ -14,6 +14,10 @@
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
@@ -125,15 +129,14 @@ nav.main-nav a.active {
/* Hero Section */
.hero {
padding: 90px 0 60px;
padding: 80px 0 50px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero-badge {
display: inline-block;
padding: 6px 14px;
padding: 6px 16px;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.25);
border-radius: 9999px;
@@ -160,10 +163,18 @@ nav.main-nav a.active {
.hero p {
font-size: 1.15rem;
color: var(--text-muted);
max-width: 650px;
max-width: 700px;
margin: 0 auto 36px;
}
.hero code {
background: rgba(56, 189, 248, 0.15);
color: var(--accent);
padding: 2px 8px;
border-radius: 4px;
font-size: 0.95em;
}
.hero-actions {
display: flex;
gap: 16px;
@@ -172,6 +183,10 @@ nav.main-nav a.active {
}
/* Features Grid */
section.features, section.steps, section.contact {
scroll-margin-top: 85px;
}
.features {
padding: 60px 0 80px;
}
@@ -193,7 +208,7 @@ nav.main-nav a.active {
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
@@ -227,6 +242,54 @@ nav.main-nav a.active {
font-size: 0.95rem;
}
/* Steps Section */
.steps {
padding: 60px 0 80px;
background: rgba(19, 27, 46, 0.5);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.step-number {
width: 44px;
height: 44px;
background: var(--accent);
color: #0b0f19;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.2rem;
margin-bottom: 18px;
}
/* Contact CTA */
.contact-cta {
padding: 80px 0;
text-align: center;
}
.cta-box {
background: linear-gradient(135deg, rgba(26, 38, 64, 0.9) 0%, rgba(19, 27, 46, 0.9) 100%);
border: 1px solid rgba(56, 189, 248, 0.2);
border-radius: var(--radius-lg);
padding: 48px 32px;
max-width: 800px;
margin: 0 auto;
}
.cta-box h2 {
font-size: 2rem;
margin-bottom: 16px;
}
.cta-box p {
color: var(--text-muted);
font-size: 1.1rem;
margin-bottom: 28px;
}
/* Content Page (Impressum, Datenschutz) */
.content-section {
padding: 60px 0;
index.html
+85 -18
View File
@@ -3,8 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Waiswuaschd – Das smarte Brotzeit- & Bestellportal</title>
<meta name="description" content="Schluss mit Excel-Listen und Zettelwirtschaft im Büro. Bestelle Weißwürste, Brezen und Brotzeit unkompliziert bis zum Stichtag.">
<title>Waiswuaschd – Dein eigenes Brotzeit-Portal für Büro & Team</title>
<meta name="description" content="Erhalte dein maßgeschneidertes Weißwurst- & Brotzeitportal unter eigener Subdomain (z.B. firma.waiswuaschd.de). Schluss mit Zettelwirtschaft im Team.">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="favicon.ico">
</head>
@@ -19,9 +19,11 @@
<nav class="main-nav">
<a href="index.html" class="active">Startseite</a>
<a href="#features">Funktionen</a>
<a href="#schritte">So geht's</a>
<a href="#kontakt">Portal anfragen</a>
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
<a href="https://wops.dev.waiswuaschd.de" class="btn btn-primary">Zum Portal (WOPS)</a>
<a href="https://wops.dev.waiswuaschd.de" class="btn btn-primary" target="_blank" rel="noopener">Live-Demo (WOPS)</a>
</nav>
</div>
</header>
@@ -30,17 +32,18 @@
<main>
<section class="hero">
<div class="container">
<div class="hero-badge">✨ Das moderne Bestell-Portal für dein Team</div>
<div class="hero-badge">✨ Multi-Tenant Brotzeit-Plattform für Unternehmen & Teams</div>
<h1>
Die gemeinsame Brotzeit.<br>
<span class="highlight">Ohne Zettelwirtschaft.</span>
Dein eigenes Brotzeit-Portal.<br>
<span class="highlight">Unter deiner Wunsch-Subdomain.</span>
</h1>
<p>
Wer kennt es nicht: Freitagmorgen, Excel-Listen im Büro, unleserliche Notizzettel und jemand muss jedem Kollegen hinterherlaufen. Waiswuaschd nimmt dir diese Arbeit komplett ab.
Vergiss unübersichtliche Excel-Tabellen, Notizzettel und das ewige Hinterherlaufen vor dem Freitags-Meeting.
Hol dir dein eigenes, personalisiertes Bestellportal für dein Team – z. B. unter <code>dein-team.waiswuaschd.de</code>.
</p>
<div class="hero-actions">
<a href="https://wops.dev.waiswuaschd.de" class="btn btn-primary">Jetzt Brotzeit bestellen</a>
<a href="#features" class="btn btn-outline">Funktionen entdecken</a>
<a href="#kontakt" class="btn btn-primary">Eigenes Portal anfragen</a>
<a href="https://wops.dev.waiswuaschd.de" class="btn btn-outline" target="_blank" rel="noopener">Live-Demo testen (WOPS)</a>
</div>
</div>
</section>
@@ -49,28 +52,92 @@
<section class="features" id="features">
<div class="container">
<div class="section-header">
<h2>Warum Waiswuaschd?</h2>
<p>Entwickelt aus der Praxis für entspannte Büro-Meetings und Teamevents.</p>
<h2>Alles, was dein Team für die perfekte Brotzeit braucht</h2>
<p>Maßgeschneidert, mandantenfähig und sofort im Browser einsatzbereit.</p>
</div>
<div class="grid-3">
<div class="card">
<div class="card-icon">🌐</div>
<h3>Eigene Subdomain & Branding</h3>
<p>Dein Unternehmen erhält einen exklusiven Bereich unter <code>firma.waiswuaschd.de</code> mit eigenem Firmennamen und geschütztem Zugang für deine Mitarbeiter.</p>
</div>
<div class="card">
<div class="card-icon">🥨</div>
<h3>Individuelle Vorbestellung</h3>
<p>Jeder Kollege loggt sich mit seinem persönlichen Konto ein und wählt Weißwürste, Brezen, Wiener oder Getränke mit wenigen Klicks aus.</p>
<h3>Individuelles Sortiment</h3>
<p>Freie Auswahl: Ob traditionelle Weißwürste vom lokalen Metzger, Brezen, Leberkäse, vegane Alternativen oder Getränke – du bestimmst Angebot und Preise.</p>
</div>
<div class="card">
<div class="card-icon">⏱️</div>
<h3>Feste Bestell-Deadlines</h3>
<p>Das Portal schließt automatisch zum Stichtag (z. B. Mittwoch 12:00 Uhr). Wer bis dahin nicht bestellt hat, hat Pech gehabt – kein Nachfragen nötig.</p>
<h3>Automatische Deadlines</h3>
<p>Feste Stichtage (z. B. Donnerstag 12:00 Uhr): Das Portal schließt pünktlich vor dem Einkauf. Wer bis dahin nicht bestellt hat, fehlt auf der Liste – ganz ohne Diskussionen.</p>
</div>
<div class="card">
<div class="card-icon">📊</div>
<div class="card-icon">📋</div>
<h3>Einkaufsliste auf Knopfdruck</h3>
<p>Für den Einkäufer gibt es eine exakte Gesamtaufstellung aller Produkte sowie eine transparente Abrechnungs- und Strichliste.</p>
<p>Der Einkäufer sieht in Echtzeit die exakt summierten Mengen für Metzger und Bäcker sowie wer welche Portion bestellt hat.</p>
</div>
<div class="card">
<div class="card-icon">💳</div>
<h3>Transparente Abrechnung</h3>
<p>Übersichtliche digitale Strichliste: Wer hat schon gezahlt, wer ist noch offen? Optional mit PayPal-Me-Link des Einkäufers für bargeldlose Sofortzahlung.</p>
</div>
<div class="card">
<div class="card-icon">📱</div>
<h3>Keine App-Installation</h3>
<p>Funktioniert sofort auf jedem Smartphone, Tablet oder Desktop-PC. Keine App-Store-Downloads oder komplizierte Einrichtung für Mitarbeiter.</p>
</div>
</div>
</div>
</section>
<!-- Schritte -->
<section class="steps" id="schritte">
<div class="container">
<div class="section-header">
<h2>In 3 Schritten zu deinem Firmen-Portal</h2>
<p>Schnell eingerichtet, ohne IT-Aufwand für dein Unternehmen.</p>
</div>
<div class="grid-3">
<div class="card">
<div class="step-number">1</div>
<h3>Subdomain wählen</h3>
<p>Sag uns deinen Wunschnamen (z. B. <code>musterfirma.waiswuaschd.de</code>) und wir richten dein isoliertes Portal ein.</p>
</div>
<div class="card">
<div class="step-number">2</div>
<h3>Sortiment festlegen</h3>
<p>Hinterlege die Lieblingsprodukte deines Teams mit Preisen deiner lokalen Metzgerei oder Bäckerei.</p>
</div>
<div class="card">
<div class="step-number">3</div>
<h3>Team einladen</h3>
<p>Link im Firmen-Chat (Slack, Teams) teilen, Stichtag setzen und ab sofort die Brotzeit stressfrei genießen.</p>
</div>
</div>
</div>
</section>
<!-- Kontakt / CTA -->
<section class="contact-cta" id="kontakt">
<div class="container">
<div class="cta-box">
<h2>Bereit für stressfreie Brotzeit-Runden?</h2>
<p>
Möchtest du Waiswuaschd in deinem Unternehmen, Büro oder Verein nutzen?
Schreib uns einfach und wir richten deine persönliche Subdomain ein.
</p>
<a href="mailto:kontakt@waiswuaschd.de?subject=Anfrage%20eigenes%20Waiswuaschd%20Portal" class="btn btn-primary">
Eigenes Portal anfragen (kontakt@waiswuaschd.de)
</a>
</div>
</div>
</section>
@@ -79,7 +146,7 @@
<!-- Footer -->
<footer class="site-footer">
<div class="container footer-content">
<p>&copy; 2026 Waiswuaschd.de – Alle Rechte vorbehalten.</p>
<p>&copy; 2026 Waiswuaschd.de – Die Brotzeit-Plattform für Teams.</p>
<div class="footer-links">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>