landingpage v1
This commit is contained in:
RubenRWU
6
.dockerignore
Normal file
6
.dockerignore
Normal file
@@ -0,0 +1,6 @@
|
||||
.git
|
||||
.gitignore
|
||||
.codex
|
||||
anforderungen
|
||||
mitarbeiterpuls-landingpage.html
|
||||
*.pdf
|
||||
9
Dockerfile
Normal file
9
Dockerfile
Normal file
@@ -0,0 +1,9 @@
|
||||
FROM nginx:1.27-alpine
|
||||
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY stitch-landingpage.html /usr/share/nginx/html/index.html
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
|
||||
CMD wget -q -O /dev/null http://127.0.0.1/ || exit 1
|
||||
30
README.md
Normal file
30
README.md
Normal file
@@ -0,0 +1,30 @@
|
||||
# Mitarbeiterpuls Landingpage
|
||||
|
||||
Dieses Verzeichnis enthält die statische Landingpage für `mitarbeiterpuls` sowie ein minimales Docker-Setup für Deployment über Coolify.
|
||||
|
||||
## Verwendete Seite
|
||||
|
||||
Die produktive Startseite wird aus [`stitch-landingpage.html`](./stitch-landingpage.html) gebaut und im Container als `index.html` ausgeliefert.
|
||||
|
||||
## Lokaler Build
|
||||
|
||||
```bash
|
||||
docker build -t mitarbeiterpuls-landingpage .
|
||||
docker run --rm -p 8080:80 mitarbeiterpuls-landingpage
|
||||
```
|
||||
|
||||
Dann im Browser öffnen:
|
||||
|
||||
```text
|
||||
http://localhost:8080
|
||||
```
|
||||
|
||||
## Coolify
|
||||
|
||||
Für Coolify reicht dieses Repository/Verzeichnis mit dem vorhandenen `Dockerfile`.
|
||||
|
||||
Empfohlene Einstellungen:
|
||||
|
||||
- Build Pack: `Dockerfile`
|
||||
- Port: `80`
|
||||
- Healthcheck-Pfad: `/health`
|
||||
BIN
anforderungen/anforderungen_neu.pdf
Normal file
BIN
anforderungen/anforderungen_neu.pdf
Normal file
Binary file not shown.
BIN
anforderungen/briefing.pdf
Normal file
BIN
anforderungen/briefing.pdf
Normal file
Binary file not shown.
11
anforderungen/logo.html
Normal file
11
anforderungen/logo.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="relative select-none leading-[1]" aria-label="mitarbeiterpuls" style="font-family: "Avenir Next Rounded", Nunito, "M PLUS Rounded 1c", sans-serif; font-weight: 900; letter-spacing: -0.02em; color: rgb(244, 244, 242); text-shadow: rgba(0, 0, 0, 0.18) 0.015em 0.03em 0.03em, rgba(0, 0, 0, 0.14) 0.03em 0.08em 0.12em, rgba(0, 0, 0, 0.1) 0.05em 0.14em 0.25em; font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1;">m<span class="relative inline-block">ı<span class="absolute rounded-full" style="width: 0.22em; height: 0.22em; left: 50%; top: -0.06em; transform: translateX(-50%); background: rgb(255, 122, 26); box-shadow: rgba(255, 122, 26, 0.95) 0px 0px 0.12em, rgba(255, 122, 26, 0.72) 0px 0px 0.28em, rgba(255, 122, 26, 0.38) 0px 0px 0.48em;"></span></span>tarbeiterpuls</div>
|
||||
</body>
|
||||
</html>
|
||||
281
anforderungen/logodesign.txt
Normal file
281
anforderungen/logodesign.txt
Normal file
@@ -0,0 +1,281 @@
|
||||
Ja. Hier ist eine präzise, umsetzbare Beschreibung, damit eine KI oder ein Entwickler das Logo in **HTML/CSS responsiv nachbauen** kann.
|
||||
|
||||
## Gesamtwirkung
|
||||
|
||||
Das Logo besteht aus einer einzigen Wortmarke:
|
||||
|
||||
**„mitarbeiterpuls“**
|
||||
|
||||
Es ist ein **modernes, weiches, minimalistisches Sans-Serif-Logo** in **fett / extra-fett**, komplett in **Kleinbuchstaben** gesetzt. Die Schrift wirkt freundlich, digital, klar und leicht technisch. Besonders auffällig ist:
|
||||
|
||||
* sehr **runde Buchstabenformen**
|
||||
* **gleichmäßige Strichstärke**
|
||||
* **enge, aber nicht gedrängte Laufweite**
|
||||
* weißer Text
|
||||
* deutlicher **weicher Schatten**
|
||||
* ein **orange leuchtender Punkt** über dem **i** am Anfang statt eines normalen weißen i-Punkts
|
||||
|
||||
## Aufbau des Logos
|
||||
|
||||
### 1. Wortmarke
|
||||
|
||||
Textinhalt:
|
||||
|
||||
`mitarbeiterpuls`
|
||||
|
||||
Alles kleingeschrieben.
|
||||
|
||||
### 2. Schriftcharakter
|
||||
|
||||
Die Schrift ähnelt einer sehr runden, fetten Grotesk. Stilistisch in Richtung:
|
||||
|
||||
* **Avenir Next Rounded Bold / Heavy**
|
||||
* **Nunito ExtraBold**
|
||||
* **M PLUS Rounded 1c ExtraBold**
|
||||
* **Gotham Rounded Bold**
|
||||
* **Arial Rounded** ist zu kindlich, also eher nicht ideal
|
||||
|
||||
Die Buchstaben sollen:
|
||||
|
||||
* kräftig und voluminös wirken
|
||||
* breite Rundungen haben
|
||||
* keine scharfen Ecken besitzen
|
||||
* sehr gut lesbar sein
|
||||
* eher **geometrisch** als handschriftlich aussehen
|
||||
|
||||
### 3. Farbe
|
||||
|
||||
Die Wortmarke selbst ist:
|
||||
|
||||
* **reinweiß bis leicht warmweiß**
|
||||
* ungefähr: `#F5F5F3` bis `#FFFFFF`
|
||||
|
||||
Empfehlung:
|
||||
|
||||
* Textfarbe: `#F4F4F2`
|
||||
|
||||
## Typografische Details
|
||||
|
||||
### Schriftgewicht
|
||||
|
||||
Sehr fett:
|
||||
|
||||
* `font-weight: 800` bis `900`
|
||||
|
||||
### Laufweite
|
||||
|
||||
* neutral bis minimal negativ
|
||||
* ungefähr: `letter-spacing: -0.01em` bis `-0.03em`
|
||||
|
||||
### Zeilenhöhe
|
||||
|
||||
* `line-height: 1`
|
||||
|
||||
### Verhältnis Höhe/Breite
|
||||
|
||||
Das Logo ist sehr breit und flach.
|
||||
|
||||
Grobe Proportionen:
|
||||
|
||||
* Gesamtbreite ca. **5,5 bis 6,5 mal** so groß wie die Texthöhe
|
||||
* Das Wort nimmt fast die ganze Breite ein
|
||||
|
||||
## Der besondere Punkt über dem ersten „i“
|
||||
|
||||
Das wichtigste Markenelement ist der **orange Punkt** über dem ersten Buchstaben **i**.
|
||||
|
||||
### Eigenschaften
|
||||
|
||||
* nicht rein flach, sondern mit **Glow / Leuchteffekt**
|
||||
* kreisrund
|
||||
* kräftiges Orange
|
||||
|
||||
### Farbe
|
||||
|
||||
Kernfarbe ungefähr:
|
||||
|
||||
* `#FF7A1A`
|
||||
* alternativ leicht heller: `#FF8124`
|
||||
|
||||
### Glow
|
||||
|
||||
Um den Punkt liegt ein **weicher, diffuser, orangefarbener Schein**.
|
||||
|
||||
Glow-Eindruck:
|
||||
|
||||
* innen kräftig orange
|
||||
* außen weich auslaufend
|
||||
* sichtbar deutlich größer als der eigentliche Punkt
|
||||
|
||||
### Größenverhältnis
|
||||
|
||||
* Punktdurchmesser ungefähr **4–5 % der gesamten Logobreite**
|
||||
* bzw. ungefähr **35–45 % der x-Höhe** eines Buchstabens
|
||||
* der Glow ist etwa **2 bis 2,8x** so groß wie der Punkt selbst
|
||||
|
||||
### Position
|
||||
|
||||
Der Punkt sitzt:
|
||||
|
||||
* exakt über dem ersten **i** in „mitarbeiterpuls“
|
||||
* leicht oberhalb der normalen i-Punkt-Position
|
||||
* optisch sauber mittig über dem i-Stamm
|
||||
* nicht zu hoch, aber mit genug Luft, damit der Glow wirken kann
|
||||
|
||||
Wichtig:
|
||||
Der **normale weiße i-Punkt** existiert dort nicht. Er wird durch den **orange leuchtenden Punkt** ersetzt.
|
||||
|
||||
## Schatten der Wortmarke
|
||||
|
||||
Die gesamte weiße Wortmarke hat einen **weichen, nach unten rechts fallenden Schlagschatten**.
|
||||
|
||||
### Schattencharakter
|
||||
|
||||
* weich
|
||||
* diffus
|
||||
* mittelstark
|
||||
* elegant, nicht hart
|
||||
* eher wie leichter 3D-/Floating-Effekt
|
||||
|
||||
### Richtung
|
||||
|
||||
* nach unten
|
||||
* leicht nach rechts
|
||||
|
||||
### Empfehlung
|
||||
|
||||
In CSS als Kombination mehrerer Schatten:
|
||||
|
||||
* kleiner Schatten für Kontur/Tiefe
|
||||
* größerer Schatten für weiche Fläche
|
||||
|
||||
Beispielwirkung:
|
||||
|
||||
* `0.02em 0.05em 0.06em rgba(0,0,0,0.18)`
|
||||
* `0.04em 0.10em 0.18em rgba(0,0,0,0.16)`
|
||||
* `0.06em 0.18em 0.30em rgba(0,0,0,0.10)`
|
||||
|
||||
Der Schatten soll im unteren Bereich der Buchstaben deutlicher sichtbar sein.
|
||||
|
||||
## Buchstabencharakter im Detail
|
||||
|
||||
Damit der Nachbau näher ans Original kommt:
|
||||
|
||||
### m
|
||||
|
||||
* sehr breit
|
||||
* runde Übergänge
|
||||
* dicke Stämme
|
||||
* kompakt, weich
|
||||
|
||||
### i
|
||||
|
||||
* schmaler Stamm
|
||||
* Punkt beim ersten i orange
|
||||
* spätere i-Punkte normal weiß und rund
|
||||
|
||||
### t
|
||||
|
||||
* relativ kurzer Querbalken
|
||||
* rundes Ende
|
||||
* kräftiger Stamm
|
||||
|
||||
### a
|
||||
|
||||
* einstöckiges „a“ wirkt wahrscheinlich am passendsten
|
||||
* rund, geschlossen, kompakt
|
||||
|
||||
### r
|
||||
|
||||
* kurzer Schulteransatz
|
||||
* weich gerundet
|
||||
|
||||
### b / p / u / s
|
||||
|
||||
* sehr runde, freundliche Formen
|
||||
* keine eckigen Innenräume
|
||||
* besonders das `puls` wirkt weich und ausgewogen
|
||||
|
||||
## Hintergrund im Beispielbild
|
||||
|
||||
Das Bild zeigt nur die Wortmarke auf transparentem Hintergrund, aber im Screenshot ist ein Arbeitsraster zu sehen. Das Raster gehört **nicht** zum Logo.
|
||||
|
||||
Also:
|
||||
|
||||
* der eigentliche Logohintergrund ist **transparent**
|
||||
* nur die weiße Wortmarke plus orange Glow gehören zum Design
|
||||
|
||||
## Responsive Umsetzung
|
||||
|
||||
Für responsive HTML/CSS sollte das Logo so gebaut werden:
|
||||
|
||||
### Prinzip
|
||||
|
||||
* ein Wrapper mit `position: relative`
|
||||
* der eigentliche Text als ein Element
|
||||
* der orange Punkt als separates, absolut positioniertes Element
|
||||
* Skalierung über `font-size` mit `clamp()`
|
||||
* Position des Punkts relativ zur Schriftgröße, nicht in fixen Pixeln
|
||||
|
||||
### Empfohlene Skalierungslogik
|
||||
|
||||
* Textgröße z. B. mit `clamp(2rem, 8vw, 8rem)`
|
||||
* Punktgröße in `em`
|
||||
* Glow ebenfalls in `em`
|
||||
* Textschatten in `em`, damit alles mit der Schrift mitskaliert
|
||||
|
||||
## Präzise Stilbeschreibung für eine KI
|
||||
|
||||
Du kannst einer KI diesen Block direkt geben:
|
||||
|
||||
> Erzeuge ein responsives HTML/CSS-Logo für das Wort „mitarbeiterpuls“.
|
||||
> Die Wortmarke ist komplett kleingeschrieben, in einer sehr fetten, runden Sans-Serif-Schrift mit freundlichem, modernem, geometrischem Charakter. Die Schrift ist weiß bis leicht warmweiß, mit einem weichen, diffusen Schatten nach unten rechts, sodass die Buchstaben leicht schwebend wirken.
|
||||
> Der erste Buchstabe „i“ hat keinen normalen weißen Punkt. Stattdessen sitzt darüber ein runder orangefarbener Punkt mit kräftigem, weichem Glow. Der Punkt ist klar sichtbar, aber kleiner als ein Buchstabenauge, und der Glow ist etwa doppelt bis dreifach so groß wie der Punkt selbst.
|
||||
> Das Logo soll auf transparentem Hintergrund funktionieren.
|
||||
> Die Typografie soll breit, weich, sauber und hochwertig wirken.
|
||||
> Das Layout muss responsiv sein: Textgröße über clamp(), orange Punkt relativ in em positionieren, Schatten ebenfalls skalierend in em anlegen.
|
||||
|
||||
## Noch genauer: CSS-Zielwerte
|
||||
|
||||
Falls eine KI konkrete Werte braucht:
|
||||
|
||||
* `font-family`: `"Avenir Next Rounded", "Nunito", "M PLUS Rounded 1c", sans-serif`
|
||||
* `font-weight`: `800` oder `900`
|
||||
* `color`: `#F4F4F2`
|
||||
* `letter-spacing`: `-0.02em`
|
||||
* `line-height`: `1`
|
||||
* Textschatten:
|
||||
|
||||
* `0.015em 0.03em 0.03em rgba(0,0,0,.18)`
|
||||
* `0.03em 0.08em 0.12em rgba(0,0,0,.14)`
|
||||
* `0.05em 0.14em 0.25em rgba(0,0,0,.10)`
|
||||
|
||||
Orange Punkt:
|
||||
|
||||
* `background: #FF7A1A`
|
||||
* `width: 0.18em` bis `0.24em`
|
||||
* `height: 0.18em` bis `0.24em`
|
||||
* `border-radius: 50%`
|
||||
* `box-shadow`:
|
||||
|
||||
* `0 0 0.12em rgba(255,122,26,.95)`
|
||||
* `0 0 0.28em rgba(255,122,26,.72)`
|
||||
* `0 0 0.48em rgba(255,122,26,.38)`
|
||||
|
||||
## Hinweis zur Positionierung des orangefarbenen Punkts
|
||||
|
||||
Da der Punkt über dem **ersten i** sitzen muss, ist die sauberste Methode:
|
||||
|
||||
* Text in einzelne `span`s splitten
|
||||
* das erste `i` in ein eigenes `span`
|
||||
* den orangefarbenen Punkt über diesem `span` absolut platzieren
|
||||
|
||||
So bleibt das Logo auch responsiv korrekt.
|
||||
|
||||
## Kompakte Beschreibung für Prompting
|
||||
|
||||
Falls du nur einen kompakten Prompt brauchst:
|
||||
|
||||
> Minimalistische Wortmarke „mitarbeiterpuls“, komplett in Kleinbuchstaben, weiße extra-fette runde Sans-Serif-Schrift, weich und modern, mit dezentem weichen Schatten nach unten rechts. Über dem ersten „i“ sitzt ein kleiner orangefarbener Punkt mit warmem Glow statt eines normalen i-Punkts. Transparentes Logo, hochwertig, digital, freundlich, responsiv umsetzbar.
|
||||
|
||||
Ich kann dir daraus auch direkt den **fertigen HTML/CSS-Code** für einen möglichst originalgetreuen responsiven Nachbau erstellen.
|
||||
619
anforderungen/style.txt
Normal file
619
anforderungen/style.txt
Normal file
@@ -0,0 +1,619 @@
|
||||
Ja — hier ist eine **präzise UI-/Brand-Spezifikation**, mit der eine KI das Dashboard sehr nah am gezeigten Stil nachbauen kann.
|
||||
|
||||
Ich beschreibe erst die **Marke**, dann **Layout**, **Farben**, **Typografie**, **Komponenten**, **Charts**, **Spacing**, **Shadows**, **Icons**, **Responsive-Verhalten** und gebe dir am Ende noch einen **kompakten KI-Prompt**.
|
||||
|
||||
---
|
||||
|
||||
# 1. Gesamtstil / visuelle Richtung
|
||||
|
||||
**Stilname:**
|
||||
„Technical Elegance“
|
||||
|
||||
**Look & Feel:**
|
||||
Ein sehr dunkles, elegantes, modernes B2B-Analytics-Dashboard mit leicht futuristischem, aber nüchternem Charakter.
|
||||
Es soll wirken wie:
|
||||
|
||||
* premium
|
||||
* technisch präzise
|
||||
* ruhig
|
||||
* hochwertig
|
||||
* datengetrieben
|
||||
* minimalistisch
|
||||
* leicht warm akzentuiert durch Orange
|
||||
|
||||
**Wirkung:**
|
||||
Nicht verspielt, nicht bunt, nicht glossy, nicht neon-cyberpunk.
|
||||
Die Oberfläche ist dunkel, matt, hochwertig und zurückhaltend. Orange wird nur als **gezielter Markenakzent** verwendet.
|
||||
|
||||
---
|
||||
|
||||
# 2. Brand-Grundregeln
|
||||
|
||||
## Markenname / Schreibweise
|
||||
|
||||
Die Wortmarke ist immer:
|
||||
|
||||
**mitarbeiterpuls**
|
||||
|
||||
Wichtig:
|
||||
|
||||
* komplett **kleingeschrieben**
|
||||
* keine Verzerrung
|
||||
* keine Serifenschrift
|
||||
* kein heller Hintergrund
|
||||
* keine alternative Schreibweise wie „Mitarbeiterpuls“
|
||||
|
||||
---
|
||||
|
||||
# 3. Farbpalette
|
||||
|
||||
Die zweite Grafik zeigt die Farbwelt sehr klar. Verwende diese Farben:
|
||||
|
||||
## Primärfarben
|
||||
|
||||
* **Carbon Black**: `#121212`
|
||||
* **Snow White**: `#FFFFFF`
|
||||
* **Ember Orange**: `#FF6600`
|
||||
|
||||
## Statusfarben
|
||||
|
||||
* **Success Green**: `#00C853`
|
||||
(im Bild leicht als kräftiges Grün dargestellt; falls exakter Corporate-Wert nicht lesbar ist, diesen Wert verwenden)
|
||||
* **Warning Yellow**: `#FFD600`
|
||||
* **Alert Red**: `#D50000`
|
||||
|
||||
## Zusätzliche UI-Nuancen für das Dashboard
|
||||
|
||||
Um das Dashboard wie im Bild aussehen zu lassen, sind zusätzlich diese dunklen Zwischenstufen sinnvoll:
|
||||
|
||||
* **Page Background**: `#0D0F12`
|
||||
* **Sidebar Background**: `#11141A`
|
||||
* **Card Background**: `#161A22`
|
||||
* **Card Hover / Elevated Panel**: `#1B2029`
|
||||
* **Border / Divider**: `rgba(255,255,255,0.08)` bis `rgba(255,255,255,0.12)`
|
||||
* **Muted Text**: `rgba(255,255,255,0.60)`
|
||||
* **Secondary Text**: `rgba(255,255,255,0.75)`
|
||||
* **Soft Orange Glow**: `rgba(255,102,0,0.20)`
|
||||
* **Chart Orange Line**: `#C8742A` bis `#D88436`
|
||||
* **Chart Green Line**: `#2FBF71`
|
||||
* **Chart Yellow Line**: `#D8A63A`
|
||||
|
||||
## Hintergrundcharakter
|
||||
|
||||
Der Hintergrund ist **nicht flach schwarz**, sondern:
|
||||
|
||||
* sehr dunkles Anthrazit / Schwarz
|
||||
* leicht texturiert / minimal körnig
|
||||
* mit ganz dezentem Blau-Grau-Anteil
|
||||
* keine hellen Flächen
|
||||
|
||||
---
|
||||
|
||||
# 4. Typografie
|
||||
|
||||
## Primärfont
|
||||
|
||||
**JetBrains Mono**
|
||||
Das ist laut Styleguide die Markenschrift.
|
||||
|
||||
## Nutzung
|
||||
|
||||
* **Logo:** JetBrains Mono Bold
|
||||
* **Überschriften / KPI-Zahlen:** JetBrains Mono Bold
|
||||
* **Labels / UI-Text:** JetBrains Mono Regular
|
||||
* **Sekundärlabels / kleine Beschriftungen:** JetBrains Mono Light oder Regular mit reduzierter Opazität
|
||||
|
||||
## Typografische Regeln
|
||||
|
||||
* technisch, klar, monospaced
|
||||
* keine Serifenschrift
|
||||
* keine übertriebene Großschreibung
|
||||
* viele UI-Texte eher klein und kompakt
|
||||
* KPI-Zahlen groß und deutlich
|
||||
* textlastige Panels eher mit kleinerem, ruhigem Text
|
||||
|
||||
## Empfohlene Schriftgrößen
|
||||
|
||||
### Desktop
|
||||
|
||||
* App-Logo: 18–22 px, Bold
|
||||
* Seiten-/Bereichstitel: 13–15 px, Medium/Bold
|
||||
* Haupt-KPI im Hero: 34–40 px
|
||||
* KPI-Card-Titel: 12–13 px
|
||||
* KPI-Card-Wert: 28–34 px
|
||||
* Kleine Chart-Labels: 10–11 px
|
||||
* Tabelleninhalt: 11–12 px
|
||||
* Sidebar-Menü: 12–13 px
|
||||
|
||||
---
|
||||
|
||||
# 5. Grundlayout des Dashboards
|
||||
|
||||
Das Dashboard im ersten Bild hat diese Struktur:
|
||||
|
||||
## Canvas / App Frame
|
||||
|
||||
* Vollbild-Dashboard in dunklem Theme
|
||||
* Zentraler Content-Bereich mit abgerundeten Karten
|
||||
* Links eine schmale Sidebar
|
||||
* Oben eine Topbar
|
||||
* Darunter ein Hero-/Summary-Bereich
|
||||
* Darunter KPI-Karten
|
||||
* Unten zwei große Panels: Tabelle + Insights
|
||||
|
||||
## Grober Aufbau
|
||||
|
||||
```text
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Topbar │
|
||||
├──────────────┬──────────────────────────────────────────────┤
|
||||
│ Sidebar │ Hero Summary Bar │
|
||||
│ ├──────────────────────────────────────────────┤
|
||||
│ │ 4 KPI Cards │
|
||||
│ ├───────────────────────┬──────────────────────┤
|
||||
│ │ Team Overview Table │ AI Insights Panel │
|
||||
└──────────────┴──────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 6. Topbar
|
||||
|
||||
## Aufbau
|
||||
|
||||
Eine schmale obere Navigationsleiste über dem Content.
|
||||
|
||||
### Links
|
||||
|
||||
* kleines oranges rundes Brand-Icon / Punkt
|
||||
* daneben „mitarbeiterpuls“ in weiß
|
||||
|
||||
### Mitte
|
||||
|
||||
* Suchfeld oder zentrierte Titelleiste sehr dezent
|
||||
* dunkel, kaum sichtbar, subtil
|
||||
|
||||
### Rechts
|
||||
|
||||
* runder User-Avatar / Profilbutton
|
||||
* ggf. kleine Utility-Icons
|
||||
|
||||
## Style
|
||||
|
||||
* Höhe: ca. 48–56 px
|
||||
* Hintergrund: leicht heller als Page Background, z. B. `#131722`
|
||||
* Border unten sehr subtil
|
||||
* Inputs/Pills: dunkelgrau, weich gerundet
|
||||
|
||||
---
|
||||
|
||||
# 7. Sidebar
|
||||
|
||||
## Breite
|
||||
|
||||
* Desktop: ca. 72–96 px bei ikonischer Sidebar
|
||||
* oder 140–180 px wenn mit Labels
|
||||
|
||||
Im Mockup ist sie **schmal**, aber mit Textlabels.
|
||||
|
||||
## Inhalt
|
||||
|
||||
Vertikale Navigation mit etwa:
|
||||
|
||||
* Dashboard
|
||||
* Teams
|
||||
* Survey
|
||||
* Settings
|
||||
* Feedback
|
||||
|
||||
## Stil
|
||||
|
||||
* dunkler als Hauptfläche
|
||||
* Icons links, Text daneben
|
||||
* aktiver Menüpunkt mit orangefarbener Markierung oder dunkler aktiver Kachel
|
||||
* viel Luft, kein grelles Highlight
|
||||
|
||||
## Aktiver Zustand
|
||||
|
||||
* dunkles aktiviertes Rechteck
|
||||
* links eine orange Linie oder orange Fläche
|
||||
* Text in Weiß
|
||||
* Icon ebenfalls heller
|
||||
|
||||
---
|
||||
|
||||
# 8. Hero-/Summary-Bereich oben
|
||||
|
||||
Das ist der wichtigste visuelle Block.
|
||||
|
||||
## Form
|
||||
|
||||
Eine breite horizontale Karte oben über den KPI-Karten.
|
||||
|
||||
## Inhalt links
|
||||
|
||||
* großer **Donut / Ringindikator** in Orange
|
||||
* zeigt Gesamtscore
|
||||
|
||||
## Inhalt Mitte/Rechts
|
||||
|
||||
* Headline:
|
||||
**„Gesamtengagement: 7.4/10“**
|
||||
* darunter ein breiter **Line-/Area-Chart** über den Zeitverlauf
|
||||
* X-Achse mit Zeitpunkten / Perioden
|
||||
|
||||
## Farbigkeit
|
||||
|
||||
* Donut-Ring: Ember Orange `#FF6600`
|
||||
* Chart-Linie: warmes Orange/Bernstein
|
||||
* Chart-Fläche: sehr dezenter orangefarbener Verlauf nach unten
|
||||
* Hintergrund der Karte: dunkles Blau-Grau/Anthrazit
|
||||
|
||||
## Typo
|
||||
|
||||
* Titel in Weiß
|
||||
* Score prominent
|
||||
* Nebentexte gedimmt
|
||||
|
||||
## Größenverhältnis
|
||||
|
||||
* Donut links etwa 20–25 % der Breite des Hero-Blocks
|
||||
* Titel + Chart rechts etwa 75–80 %
|
||||
|
||||
---
|
||||
|
||||
# 9. KPI-Kartenreihe
|
||||
|
||||
Unter dem Hero-Block folgen **vier gleich hohe Karten** nebeneinander.
|
||||
|
||||
## Beispielinhalte aus dem Bild
|
||||
|
||||
* Engagement
|
||||
* Fluktuation
|
||||
* Führung
|
||||
* Belastung
|
||||
|
||||
## Aufbau je Karte
|
||||
|
||||
* kleiner Titel oben links
|
||||
* große Zahl mittig/links
|
||||
* kleine Trendanzeige rechts oder unten
|
||||
* sehr kleiner Untertitel / Vergleichswert
|
||||
* Mini-Line-Chart im unteren Bereich
|
||||
|
||||
## Stil
|
||||
|
||||
* Hintergrund: `#161A22` oder `#171B24`
|
||||
* Radius: 12–16 px
|
||||
* feine Border
|
||||
* leichter Soft Shadow
|
||||
* kein starker 3D-Effekt
|
||||
* jede Karte minimal unterschiedlich in Akzentfarbe, aber insgesamt sehr zurückhaltend
|
||||
|
||||
## Trendfarben
|
||||
|
||||
* positive Entwicklung: Grün
|
||||
* neutrale/warnende Entwicklung: Gelb/Orange
|
||||
* negative Entwicklung: Rot oder ockerfarbene Linie
|
||||
|
||||
---
|
||||
|
||||
# 10. Untere Sektion: Team-Übersicht + AI-Insights
|
||||
|
||||
## Linkes großes Panel: Team-Übersicht
|
||||
|
||||
Eine dunkle Karte mit tabellarischer Übersicht.
|
||||
|
||||
### Inhalt
|
||||
|
||||
* Titel: „Team-Übersicht“
|
||||
* mehrere Zeilen für Abteilungen / Teams, z. B.:
|
||||
|
||||
* Entwicklung
|
||||
* Vertrieb
|
||||
* Marketing
|
||||
* Operations
|
||||
|
||||
### Spalten
|
||||
|
||||
mehrere KPI-Spalten mit farbcodierten Werten:
|
||||
|
||||
* grüne Werte = gut
|
||||
* gelbe Werte = mittel
|
||||
* rote Werte = kritisch
|
||||
* orange Werte = Brand/Neutral-KPI
|
||||
|
||||
### Stil
|
||||
|
||||
* kompakte Tabelle
|
||||
* keine harten Gridlines
|
||||
* lieber subtile horizontale Trennlinien
|
||||
* Zahlen in kleinen farbigen Pills oder in farbiger Typo
|
||||
|
||||
## Rechtes großes Panel: AI-Empfehlungen / Insights
|
||||
|
||||
Eine vertikale Karte mit Textbausteinen.
|
||||
|
||||
### Inhalt
|
||||
|
||||
* Titel etwa: „AI-Empfehlungen“ oder „KI-Empfehlungen“
|
||||
* kurze Bullet-artige Aussagen:
|
||||
|
||||
* Abteilung X benötigt Aufmerksamkeit
|
||||
* Stimmung sinkt
|
||||
* Führung verbessert sich
|
||||
* Handlungsempfehlungen etc.
|
||||
|
||||
### Stil
|
||||
|
||||
* textorientiert
|
||||
* kleine Icons/Bullets
|
||||
* eher informativ als dekorativ
|
||||
* weiße und graue Typo
|
||||
* einzelne orange oder grüne Markierungen für Prioritäten
|
||||
|
||||
---
|
||||
|
||||
# 11. Kartenstil / Container-Stil
|
||||
|
||||
Die Styleguide-Grafik zeigt die gewünschte Sprache der UI-Komponenten sehr klar.
|
||||
|
||||
## Karten
|
||||
|
||||
* dunkle, halbmatte Flächen
|
||||
* weiche Rundungen: 14–18 px
|
||||
* dezente Außenkante / Border
|
||||
* subtiler innerer Glow möglich
|
||||
* Schatten weich, aber nicht stark
|
||||
|
||||
## Beispielwerte
|
||||
|
||||
* Border: `1px solid rgba(255,255,255,0.08)`
|
||||
* Box shadow: `0 8px 30px rgba(0,0,0,0.28)`
|
||||
* Backdrop/Glass nur sehr leicht, nicht echtes starkes Glasdesign
|
||||
|
||||
## Buttons / Inputs
|
||||
|
||||
* dunkelgraue Flächen
|
||||
* abgerundet
|
||||
* Orange nur bei Hover, Fokus oder primärer Aktion
|
||||
* keine hellen Button-Flächen
|
||||
|
||||
---
|
||||
|
||||
# 12. Datenvisualisierung
|
||||
|
||||
Die zweite Grafik gibt klare Regeln vor.
|
||||
|
||||
## Donut Charts
|
||||
|
||||
* Ring ist relativ dick
|
||||
* Farben:
|
||||
|
||||
* Grün = Success
|
||||
* Gelb = Warning
|
||||
* Rot = Alert
|
||||
* Orange kann als Brand-Akzent vorkommen
|
||||
* Mitte frei / leer
|
||||
* minimalistisches Labeling
|
||||
|
||||
## Line Charts
|
||||
|
||||
* dunkler Hintergrund
|
||||
* dünne bis mittlere Linie
|
||||
* warme Orange-/Rot-Töne
|
||||
* subtile Gridlines
|
||||
* Achsen sehr dezent
|
||||
* keine kräftigen Farben außer gezielten Statushinweisen
|
||||
|
||||
## Generelle Chart-Regeln
|
||||
|
||||
* wenig Beschriftung
|
||||
* kein überladenes Raster
|
||||
* keine bunten Standard-Chartfarben
|
||||
* alles wirkt ruhig und professionell
|
||||
* Linien leicht geglättet
|
||||
* Flächen unter Linien mit sehr schwachem Verlauf
|
||||
|
||||
---
|
||||
|
||||
# 13. Abstände / Spacing
|
||||
|
||||
## Grundsystem
|
||||
|
||||
Nutze ein 8px-Grid.
|
||||
|
||||
## Empfohlene Abstände
|
||||
|
||||
* äußerer Seitenrand: 20–28 px
|
||||
* Abstand Sidebar zu Content: 16–20 px
|
||||
* Abstand zwischen Karten: 12–16 px
|
||||
* Innenabstand von Karten: 16–20 px
|
||||
* Abstand zwischen KPI-Zahl und Mini-Chart: 8–12 px
|
||||
|
||||
## Eindruck
|
||||
|
||||
Nicht eng, aber kompakt.
|
||||
Es soll wie ein professionelles Control Center wirken, nicht wie eine Marketing-Landingpage.
|
||||
|
||||
---
|
||||
|
||||
# 14. Rundungen / Formen
|
||||
|
||||
* Hauptkarten: 14–18 px Radius
|
||||
* Buttons/Inputs: 10–14 px Radius
|
||||
* Avatare: rund
|
||||
* Chips/Pills: 999 px Radius
|
||||
* Donut: sauber, präzise, ohne verspielte Rundungsfehler
|
||||
|
||||
---
|
||||
|
||||
# 15. Icons
|
||||
|
||||
## Stil
|
||||
|
||||
* dünn bis mittelstark
|
||||
* linear / outline
|
||||
* technisch und schlicht
|
||||
* weiß oder grau
|
||||
* aktive Zustände orange
|
||||
|
||||
## Nicht verwenden
|
||||
|
||||
* bunte Emoji-artige Icons
|
||||
* illustrative Icons
|
||||
* 3D-Icons
|
||||
* Comic-Stil
|
||||
|
||||
---
|
||||
|
||||
# 16. Tonalität / Content-Stil
|
||||
|
||||
Laut Styleguide:
|
||||
|
||||
* **objektiv/klar**
|
||||
* **unterstützend/empathisch**
|
||||
* **niemals belehrend**
|
||||
|
||||
Das heißt für Texte im Dashboard:
|
||||
|
||||
* nüchtern
|
||||
* handlungsorientiert
|
||||
* menschlich
|
||||
* keine aggressive Alarm-Sprache
|
||||
* eher „Hinweis“, „Trend“, „Empfehlung“, „Beobachtung“
|
||||
|
||||
---
|
||||
|
||||
# 17. Responsive Verhalten
|
||||
|
||||
Im ersten Bild sieht man das Dashboard auf:
|
||||
|
||||
* Desktop
|
||||
* Tablet
|
||||
* Smartphone
|
||||
|
||||
## Desktop
|
||||
|
||||
* volle Struktur mit Sidebar, Hero, 4 KPI-Karten, Tabelle, Insight-Panel
|
||||
|
||||
## Tablet
|
||||
|
||||
* Sidebar deutlich schmaler
|
||||
* Karten in 2x2 oder 2-spaltigem Grid
|
||||
* Hero bleibt oben
|
||||
* Tabelle und Insights untereinander oder 2-spaltig, je nach Breite
|
||||
|
||||
## Mobile
|
||||
|
||||
* einspaltig
|
||||
* Hero zuerst
|
||||
* KPI-Karten untereinander
|
||||
* Tabelle vereinfacht oder horizontal scrollbar
|
||||
* Insights darunter
|
||||
* Navigation kompakt / Burger / Bottom Nav
|
||||
|
||||
---
|
||||
|
||||
# 18. Exakte stilistische Merkmale aus dem Bild
|
||||
|
||||
Hier die wichtigsten visuellen Hinweise, damit eine KI es wirklich trifft:
|
||||
|
||||
1. **Sehr dunkler Grundton**, fast schwarz, aber nicht reines Schwarz.
|
||||
2. **Orange Ring links oben** ist ein zentraler Markenanker.
|
||||
3. **Headline mit Score** steht dominant im Hero-Bereich.
|
||||
4. **Liniencharts sind dünn, elegant, warm-orange oder grün**, nie quietschbunt.
|
||||
5. **Alle Cards sind dunkel und leicht voneinander abgesetzt**, aber nicht zu kontrastreich.
|
||||
6. **Typografie ist monospaced und technisch.**
|
||||
7. **Das UI wirkt luxuriös und präzise**, eher wie High-End-Analytics-Software als ein Standard-SaaS-Template.
|
||||
8. **Es gibt kaum visuelles Rauschen**: keine harten Umrandungen, keine grellen Akzente, keine unnötigen Effekte.
|
||||
9. **Logo und Wortmarke sind immer weiß auf dunklem Grund**, mit kleinem orangefarbenem Akzentpunkt.
|
||||
10. **Die Datenvisualisierung nutzt Statusfarben konsistent**: grün, gelb, rot plus orange als Markenfarbe.
|
||||
|
||||
---
|
||||
|
||||
# 19. Design-Tokens für eine KI oder ein Frontend-System
|
||||
|
||||
```yaml
|
||||
brand:
|
||||
name: "mitarbeiterpuls"
|
||||
style: "Technical Elegance"
|
||||
|
||||
colors:
|
||||
background: "#0D0F12"
|
||||
surface_sidebar: "#11141A"
|
||||
surface_card: "#161A22"
|
||||
surface_card_hover: "#1B2029"
|
||||
border_subtle: "rgba(255,255,255,0.08)"
|
||||
text_primary: "#FFFFFF"
|
||||
text_secondary: "rgba(255,255,255,0.75)"
|
||||
text_muted: "rgba(255,255,255,0.60)"
|
||||
accent: "#FF6600"
|
||||
success: "#00C853"
|
||||
warning: "#FFD600"
|
||||
danger: "#D50000"
|
||||
chart_orange: "#D88436"
|
||||
chart_orange_fill: "rgba(255,102,0,0.10)"
|
||||
chart_green: "#2FBF71"
|
||||
chart_yellow: "#D8A63A"
|
||||
|
||||
typography:
|
||||
font_family: "JetBrains Mono, monospace"
|
||||
logo_weight: 700
|
||||
heading_weight: 700
|
||||
body_weight: 400
|
||||
caption_weight: 300
|
||||
|
||||
radius:
|
||||
card: 16
|
||||
button: 12
|
||||
pill: 999
|
||||
|
||||
shadow:
|
||||
card: "0 8px 30px rgba(0,0,0,0.28)"
|
||||
glow_accent: "0 0 24px rgba(255,102,0,0.16)"
|
||||
|
||||
spacing:
|
||||
page_padding: 24
|
||||
card_padding: 18
|
||||
gap: 16
|
||||
|
||||
layout:
|
||||
topbar_height: 52
|
||||
sidebar_width: 160
|
||||
hero_height: 120-150
|
||||
kpi_card_height: 110-130
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 20. KI-Beschreibung zum direkten Nachbauen
|
||||
|
||||
Hier ist eine Formulierung, die du 1:1 einer generativen KI oder einem UI-Generator geben kannst:
|
||||
|
||||
**Prompt:**
|
||||
|
||||
> Erstelle ein hochwertiges, dunkles HR-Analytics-Dashboard für die Marke „mitarbeiterpuls“ im Stil „Technical Elegance“. Verwende eine sehr dunkle anthrazit-schwarze Oberfläche mit subtiler Textur. Typografie ausschließlich JetBrains Mono. Primärfarben: Carbon Black #121212, Snow White #FFFFFF, Ember Orange #FF6600. Statusfarben: Success Green #00C853, Warning Yellow #FFD600, Alert Red #D50000.
|
||||
>
|
||||
> Das Layout besteht aus einer schmalen linken Sidebar, einer oberen Topbar und einem Hauptbereich mit abgerundeten Dark-Mode-Karten. Oben eine breite Hero-Karte mit großem orangenen Donut-Ring links und der Headline „Gesamtengagement: 7.4/10“ rechts, darunter ein eleganter orangefarbener Trend-Chart. Unter dem Hero vier KPI-Karten nebeneinander: Engagement, Fluktuation, Führung, Belastung, jeweils mit großer Zahl, kleinem Label und Mini-Line-Chart. Darunter links eine dunkle Tabellenkarte „Team-Übersicht“ mit farbcodierten KPI-Werten und rechts eine Karte „KI-Empfehlungen“ mit kompakten textlichen Insights.
|
||||
>
|
||||
> Alle Komponenten sollen leicht abgerundet sein (ca. 16px Radius), mit subtilen Borders und weichen Schatten. Keine hellen Hintergründe, keine Serifenschriften, keine bunten Standardfarben. Das Dashboard soll präzise, luxuriös, technisch, ruhig und professionell wirken. Orange nur als gezielter Markenakzent. Charts minimalistisch, mit feinen Gridlines und zurückhaltenden Labels. Logo immer als „mitarbeiterpuls“ in Kleinbuchstaben, weiß auf dunklem Hintergrund, optional mit kleinem orangenen Punkt oder Kreisakzent.
|
||||
|
||||
---
|
||||
|
||||
# 21. Wichtigste No-Gos
|
||||
|
||||
Damit es nicht vom Stil abweicht:
|
||||
|
||||
* keine weißen Karten
|
||||
* keine serifenbetonte Typografie
|
||||
* keine knalligen Neonfarben
|
||||
* keine dicken Standard-UI-Borders
|
||||
* keine verspielten Illustrationen
|
||||
* keine großen bunten Buttons
|
||||
* kein zu helles Blau als Primärfarbe
|
||||
* Logo niemals in Groß-/Mischschreibung
|
||||
|
||||
---
|
||||
|
||||
Wenn du möchtest, formuliere ich dir daraus als Nächstes noch eine **ultrapräzise JSON-Design-Spec** oder einen **Prompt für Lovable / v0 / Figma AI / Midjourney / Cursor**.
|
||||
17
docker-compose.yml
Normal file
17
docker-compose.yml
Normal file
@@ -0,0 +1,17 @@
|
||||
version: "3.9"
|
||||
|
||||
services:
|
||||
landingpage:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
container_name: mitarbeiterpuls-landingpage
|
||||
ports:
|
||||
- "8080:80"
|
||||
restart: unless-stopped
|
||||
healthcheck:
|
||||
test: ["CMD", "wget", "-q", "-O", "/dev/null", "http://127.0.0.1/health"]
|
||||
interval: 30s
|
||||
timeout: 5s
|
||||
retries: 3
|
||||
start_period: 10s
|
||||
476
mitarbeiterpuls-landingpage.html
Normal file
476
mitarbeiterpuls-landingpage.html
Normal file
@@ -0,0 +1,476 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mitarbeiterpuls — Der PULS deines Unternehmens in 30 Sekunden | KI-gestütztes Mitarbeiter-Feedback für KMU</title>
|
||||
<meta name="description" content="Mitarbeiterpuls gibt Geschäftsführern von KMUs mit 10–150 Mitarbeitenden ein KI-gestütztes Echtzeit-Dashboard für Mitarbeiter-Engagement, Stresslevel und Fluktuationsrisiko. 30 Sekunden Feedback, sofortige Insights. Von Onyva.">
|
||||
<meta name="keywords" content="Mitarbeiterbefragung, Pulse Survey, KMU, Mitarbeiter-Engagement, Fluktuation senken, HR-Tool, Pulsbefragung, CEO Dashboard, Mitarbeiterzufriedenheit, KI HR">
|
||||
<meta property="og:title" content="Mitarbeiterpuls — Der PULS deines Unternehmens in 30 Sekunden">
|
||||
<meta property="og:description" content="5 KPIs. 30 Sekunden Feedback. KI-Insights in Echtzeit. Das Mitarbeiter-Feedback-Tool, das Geschäftsführer wirklich nutzen.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
|
||||
body{font-family:'Manrope',sans-serif;background:#090B10;color:#C0C5D6;line-height:1.7;overflow-x:hidden}
|
||||
a{color:inherit;text-decoration:none}
|
||||
:root{
|
||||
--bg:#07090F;--surface:#0F131C;--card:#141922;--border:#202635;--border-light:#2B3345;
|
||||
--text:#EEF2F8;--text-soft:#C9D0DE;--text-muted:#8A93A9;--text-dim:#566077;
|
||||
--accent:#FF6B2B;--accent-light:#FF8F5E;--accent-glow:rgba(255,107,43,0.14);
|
||||
--green:#00D68F;--green-glow:rgba(0,214,143,0.08);--yellow:#FFAA00;--red:#FF6B6B;
|
||||
--mono:'JetBrains Mono',monospace;--serif:'Manrope',sans-serif;
|
||||
--shadow-soft:0 18px 48px rgba(0,0,0,.28);--shadow-accent:0 10px 30px rgba(255,107,43,.18);
|
||||
--r:22px;--r-sm:18px;--r-lg:30px;--r-pill:999px}
|
||||
.ctr{max-width:1140px;margin:0 auto;padding:0 28px}
|
||||
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:inherit;font-weight:700;font-size:15px;border-radius:var(--r-pill);cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);border:none}
|
||||
.bp{background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#fff;padding:17px 34px;box-shadow:var(--shadow-accent),inset 0 1px 0 rgba(255,255,255,.08)}
|
||||
.bp:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,107,43,.26),inset 0 1px 0 rgba(255,255,255,.12);filter:saturate(1.05)}
|
||||
.bs{background:rgba(255,255,255,.02);color:var(--text);padding:17px 34px;border:1px solid var(--border-light);backdrop-filter:blur(8px)}
|
||||
.bs:hover{border-color:rgba(255,143,94,.55);color:var(--text);background:rgba(255,107,43,.08);transform:translateY(-2px)}
|
||||
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
|
||||
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,214,143,.4)}50%{box-shadow:0 0 0 8px rgba(0,214,143,0)}}
|
||||
@keyframes orb1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.05)}66%{transform:translate(-30px,20px) scale(.95)}}
|
||||
@keyframes orb2{0%,100%{transform:translate(0,0)}33%{transform:translate(-30px,25px)}66%{transform:translate(25px,-20px)}}
|
||||
.rv{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.16,1,.3,1)}.rv.vis{opacity:1;transform:translateY(0)}
|
||||
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}
|
||||
.sl{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}
|
||||
.st{font-family:var(--serif);font-size:clamp(32px,4vw,52px);font-weight:800;color:var(--text);line-height:1.08;letter-spacing:-.04em;margin-bottom:20px}
|
||||
.st em{font-style:normal;color:var(--accent-light)}
|
||||
.ss{font-size:17px;color:var(--text-muted);max-width:600px;line-height:1.7;margin-bottom:48px}
|
||||
|
||||
/* WORDMARK */
|
||||
.wm{font-family:"Avenir Next Rounded","Nunito","Manrope",sans-serif;font-weight:900;color:#F4F4F2;letter-spacing:-.03em;position:relative;display:inline-block;line-height:1;text-shadow:.015em .03em .03em rgba(0,0,0,.18),.03em .08em .12em rgba(0,0,0,.14),.05em .14em .25em rgba(0,0,0,.1)}
|
||||
.wm .wd{position:absolute;width:.22em;height:.22em;border-radius:50%;background:#FF7A1A;box-shadow:0 0 .12em rgba(255,122,26,.95),0 0 .28em rgba(255,122,26,.72),0 0 .48em rgba(255,122,26,.38)}
|
||||
|
||||
/* NAV */
|
||||
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;transition:all .3s}
|
||||
nav.sc{background:rgba(9,11,16,.82);backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 10px 30px rgba(0,0,0,.18)}
|
||||
nav .ctr{display:flex;justify-content:space-between;align-items:center}
|
||||
.nl{display:flex;align-items:center;gap:12px}
|
||||
.nli{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#FF8F5E);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px;font-weight:700;color:#fff}
|
||||
.nlt{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--text)}
|
||||
.nk{display:flex;align-items:center;gap:32px}
|
||||
.nk a{font-size:14px;font-weight:600;color:var(--text-muted);transition:color .2s}
|
||||
.nk a:hover{color:var(--text)}
|
||||
.nc{font-size:14px!important;padding:12px 24px!important;color:#fff!important}
|
||||
|
||||
/* HERO */
|
||||
.hero{position:relative;padding:170px 0 110px;min-height:100vh;display:flex;align-items:center;overflow:hidden}
|
||||
.hbg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
|
||||
.ho1{position:absolute;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,43,.18) 0%,transparent 68%);top:-12%;right:-6%;animation:orb1 22s ease-in-out infinite}
|
||||
.ho2{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(0,214,143,.06) 0%,transparent 70%);bottom:-4%;left:-10%;animation:orb2 28s ease-in-out infinite}
|
||||
.hgr{position:absolute;inset:0;background-image:linear-gradient(rgba(255,107,43,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,107,43,.03) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,black,transparent)}
|
||||
.hero .ctr{position:relative;z-index:1;text-align:center}
|
||||
.hb{display:inline-flex;align-items:center;gap:8px;background:rgba(255,107,43,.08);border:1px solid rgba(255,107,43,.18);padding:8px 18px 8px 10px;border-radius:var(--r-pill);margin-bottom:32px;animation:fadeUp .8s ease .2s both;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
|
||||
.hbd{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2s ease infinite}
|
||||
.hb span{font-family:var(--mono);font-size:12px;color:var(--accent-light);font-weight:700;letter-spacing:.04em}
|
||||
.hero h1{font-family:var(--serif);font-size:clamp(42px,6vw,78px);font-weight:800;color:var(--text);line-height:1.02;letter-spacing:-.055em;margin-bottom:24px;animation:fadeUp .8s ease .3s both}
|
||||
.hero h1 em{font-style:normal;color:var(--accent-light)}
|
||||
.hsb{font-size:clamp(17px,2vw,20px);color:var(--text-muted);max-width:700px;margin:0 auto 44px;line-height:1.72;animation:fadeUp .8s ease .45s both}
|
||||
.hcs{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;animation:fadeUp .8s ease .55s both}
|
||||
.ht{margin-top:56px;animation:fadeUp .8s ease .7s both}
|
||||
.ht p{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin-bottom:16px}
|
||||
.htl{display:flex;justify-content:center;align-items:center;gap:40px;opacity:.35}
|
||||
.htlg{font-family:inherit;font-size:15px;font-weight:700;color:var(--text)}
|
||||
|
||||
/* STATS */
|
||||
.sbar{padding:64px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#0E1016}
|
||||
.sbar .ctr{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
|
||||
.stt{text-align:center}
|
||||
.stn{font-family:var(--mono);font-size:clamp(36px,4vw,52px);font-weight:700;color:var(--text);line-height:1;letter-spacing:-.04em}
|
||||
.stn span{color:var(--accent-light)}
|
||||
.stl{font-size:14px;color:var(--text-muted);margin-top:8px}
|
||||
.sts{font-size:11px;color:var(--text-dim);margin-top:4px;font-style:italic}
|
||||
|
||||
/* PROBLEM */
|
||||
.prob{padding:120px 0}
|
||||
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
|
||||
.pc{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),var(--card);border:1px solid var(--border);border-radius:var(--r);padding:34px 30px;position:relative;overflow:hidden;transition:all .4s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-soft)}
|
||||
.pc:hover{border-color:var(--border-light);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.34)}
|
||||
.pca{position:absolute;top:0;left:0;right:0;height:2px;opacity:.5}
|
||||
.pci{font-size:28px;margin-bottom:16px}
|
||||
.pc h3{font-size:17px;font-weight:700;color:var(--text);margin-bottom:10px}
|
||||
.pc p{font-size:14px;color:var(--text-muted);line-height:1.65}
|
||||
.pcs{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--red);margin-top:14px;display:inline-block;padding:4px 12px;border-radius:6px;background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.15)}
|
||||
|
||||
/* SOLUTION */
|
||||
.sol{padding:120px 0;background:#0E1016;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||||
.solh{text-align:center;margin-bottom:72px}
|
||||
.solh .ss{margin:0 auto}
|
||||
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
|
||||
.stp{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:42px 34px;text-align:center;transition:all .4s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-soft)}
|
||||
.stp:hover{border-color:rgba(255,107,43,.3);transform:translateY(-4px)}
|
||||
.stpn{font-family:var(--mono);font-size:52px;font-weight:700;color:rgba(255,107,43,.15);line-height:1;margin-bottom:16px}
|
||||
.stp h3{font-size:19px;font-weight:700;color:var(--text);margin-bottom:10px}
|
||||
.stp p{font-size:14px;color:var(--text-muted);line-height:1.65}
|
||||
.stpt{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--green);font-weight:700;margin-top:16px;padding:4px 12px;border-radius:6px;background:var(--green-glow);border:1px solid rgba(0,214,143,.15)}
|
||||
|
||||
/* FEATURES */
|
||||
.feat{padding:120px 0}
|
||||
.fh{text-align:center;margin-bottom:72px}
|
||||
.fh .ss{margin:0 auto}
|
||||
.fg{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
|
||||
.fc{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),var(--card);border:1px solid var(--border);border-radius:var(--r);padding:36px 32px;display:flex;gap:20px;transition:all .4s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-soft)}
|
||||
.fc:hover{border-color:var(--border-light);transform:translateY(-2px)}
|
||||
.fic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
|
||||
.fc h3{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px}
|
||||
.fc p{font-size:14px;color:var(--text-muted);line-height:1.6}
|
||||
|
||||
/* PREVIEW */
|
||||
.prev{padding:120px 0;background:#0E1016;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
|
||||
.prevh{text-align:center;margin-bottom:56px}
|
||||
.prevh .ss{margin:0 auto}
|
||||
.pmk{position:relative;max-width:960px;margin:0 auto;border-radius:34px;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),var(--card);box-shadow:0 30px 80px rgba(0,0,0,.42),0 0 120px rgba(255,107,43,.07)}
|
||||
.ptb{display:flex;align-items:center;gap:8px;padding:14px 20px;background:var(--surface);border-bottom:1px solid var(--border)}
|
||||
.pdt{width:10px;height:10px;border-radius:50%}
|
||||
.prc{padding:40px;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
|
||||
.pk{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px 16px;position:relative;overflow:hidden}
|
||||
.pkb{position:absolute;top:0;left:0;right:0;height:2px}
|
||||
.pkl{font-size:10px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
|
||||
.pkv{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--text);line-height:1}
|
||||
.pku{font-family:var(--mono);font-size:12px;color:var(--text-dim)}
|
||||
.pkt{font-family:var(--mono);font-size:11px;font-weight:700;margin-top:8px}
|
||||
.prb{padding:0 40px 40px;display:grid;grid-template-columns:1fr 1.2fr;gap:20px}
|
||||
.pai{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px}
|
||||
.pat{font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;display:flex;align-items:center;gap:6px}
|
||||
.pac{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;margin-bottom:8px;border-left:3px solid}
|
||||
.pac p{font-size:11px;color:var(--text-muted);line-height:1.5}
|
||||
.phi{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px}
|
||||
.phr{display:grid;grid-template-columns:80px repeat(4,1fr) 50px;gap:6px;padding:6px 0;border-bottom:1px solid rgba(26,30,44,.5);align-items:center}
|
||||
.phr:last-child{border-bottom:none}
|
||||
.phn{font-size:11px;font-weight:600;color:var(--text-soft)}
|
||||
.phc{font-family:var(--mono);font-size:10px;font-weight:700;text-align:center;padding:3px 6px;border-radius:4px}
|
||||
.phb{font-family:var(--mono);font-size:9px;font-weight:700;text-align:center;padding:2px 6px;border-radius:10px}
|
||||
|
||||
/* COMPARISON */
|
||||
.comp{padding:120px 0}
|
||||
.comph{text-align:center;margin-bottom:56px}
|
||||
.comph .ss{margin:0 auto}
|
||||
.ctbl{max-width:800px;margin:0 auto;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-soft);background:rgba(255,255,255,.01)}
|
||||
.crow{display:grid;grid-template-columns:1fr 100px 100px;border-bottom:1px solid var(--border);align-items:center}
|
||||
.crow:last-child{border-bottom:none}
|
||||
.crow.hdr{background:var(--surface)}
|
||||
.ccl{padding:16px 20px;font-size:14px}
|
||||
.ccl:nth-child(2),.ccl:nth-child(3){text-align:center;font-family:var(--mono);font-size:13px;font-weight:700}
|
||||
.chc{font-family:var(--mono)!important;font-size:11px!important;font-weight:700!important;color:var(--text-dim)!important;text-transform:uppercase;letter-spacing:.06em}
|
||||
.ck{color:var(--green)}.cx{color:var(--text-dim)}
|
||||
.chl{background:rgba(255,107,43,.04);border-left:2px solid var(--accent)}
|
||||
|
||||
/* PRICING */
|
||||
.prc2{padding:120px 0;background:#0E1016;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||||
.prc2h{text-align:center;margin-bottom:56px}
|
||||
.prc2h .ss{margin:0 auto}
|
||||
.pcard{max-width:520px;margin:0 auto;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),var(--card);border:1px solid rgba(255,107,43,.25);border-radius:34px;padding:48px 44px;text-align:center;position:relative;overflow:hidden;box-shadow:0 0 70px rgba(255,107,43,.08),0 24px 60px rgba(0,0,0,.32)}
|
||||
.pcg{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 80%,rgba(255,107,43,.06) 0%,transparent 50%);pointer-events:none}
|
||||
.pcb{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent-light);background:var(--accent-glow);border:1px solid rgba(255,107,43,.2);padding:4px 14px;border-radius:20px;margin-bottom:24px;position:relative;z-index:1}
|
||||
.pam{position:relative;z-index:1}
|
||||
.pcur{font-family:var(--mono);font-size:24px;color:var(--text-muted);vertical-align:super}
|
||||
.pnum{font-family:var(--mono);font-size:72px;font-weight:700;color:var(--text);letter-spacing:-.04em;line-height:1}
|
||||
.pper{font-size:16px;color:var(--text-muted);margin-top:4px}
|
||||
.pcalc{font-family:var(--mono);font-size:13px;color:var(--text-dim);margin:20px 0 32px;position:relative;z-index:1}
|
||||
.pfts{text-align:left;margin-bottom:36px;position:relative;z-index:1}
|
||||
.pft{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--text-soft)}
|
||||
.pft:last-child{border-bottom:none}
|
||||
.pftc{color:var(--green);font-size:16px;flex-shrink:0}
|
||||
.pcta{width:100%;justify-content:center;position:relative;z-index:1}
|
||||
|
||||
/* LEAD MAGNET */
|
||||
.lm{padding:120px 0}
|
||||
.lm .ctr{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
|
||||
.lmv{position:relative}
|
||||
.lmm{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:40px 32px;position:relative;overflow:hidden;box-shadow:var(--shadow-soft)}
|
||||
.lmm::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--green))}
|
||||
.lmmb{display:inline-flex;align-items:center;gap:6px;background:rgba(255,170,0,.08);border:1px solid rgba(255,170,0,.2);padding:4px 12px;border-radius:20px;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--yellow);margin-bottom:20px}
|
||||
.lmm h4{font-family:var(--serif);font-size:24px;font-weight:800;color:var(--text);margin-bottom:8px;letter-spacing:-.03em}
|
||||
.lmm>p{font-size:13px;color:var(--text-muted);margin-bottom:20px;line-height:1.6}
|
||||
.lmps{display:flex;gap:8px}
|
||||
.lmp{width:48px;height:64px;background:var(--surface);border:1px solid var(--border);border-radius:4px;position:relative;overflow:hidden}
|
||||
.lmp::after{content:'';position:absolute;top:8px;left:6px;right:6px;height:2px;background:var(--border-light);border-radius:1px;box-shadow:0 6px 0 var(--border-light),0 12px 0 var(--border-light),0 18px 0 var(--border-light)}
|
||||
.lmc h3{font-family:var(--serif);font-size:clamp(28px,3vw,40px);font-weight:800;color:var(--text);line-height:1.12;margin-bottom:16px;letter-spacing:-.04em}
|
||||
.lmc>p{font-size:16px;color:var(--text-muted);margin-bottom:24px;line-height:1.7}
|
||||
.lmpts{list-style:none;margin-bottom:32px}
|
||||
.lmpts li{display:flex;gap:12px;padding:8px 0;font-size:14px;color:var(--text-soft)}
|
||||
.lmpts li::before{content:'\2192';color:var(--accent);font-weight:700;flex-shrink:0}
|
||||
.lmf{display:flex;gap:10px}
|
||||
.lmi{flex:1;padding:16px 20px;border-radius:var(--r-pill);border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--text);font-family:inherit;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
|
||||
.lmi:focus{border-color:var(--accent);background:rgba(255,255,255,.03);box-shadow:0 0 0 4px rgba(255,107,43,.08)}
|
||||
.lmi::placeholder{color:var(--text-dim)}
|
||||
.lmn{font-size:11px;color:var(--text-dim);margin-top:10px}
|
||||
|
||||
/* TESTIMONIALS */
|
||||
.tst{padding:120px 0;background:#0E1016;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
|
||||
.tsth{text-align:center;margin-bottom:56px}
|
||||
.tstg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
|
||||
.tc{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),var(--card);border:1px solid var(--border);border-radius:var(--r);padding:32px 28px;transition:all .3s;box-shadow:var(--shadow-soft)}
|
||||
.tc:hover{border-color:var(--border-light)}
|
||||
.tcs{color:var(--yellow);font-size:14px;letter-spacing:2px;margin-bottom:16px}
|
||||
.tcq{font-size:15px;color:var(--text-soft);line-height:1.7;margin-bottom:20px;font-style:italic}
|
||||
.tca{display:flex;align-items:center;gap:12px}
|
||||
.tcav{width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px}
|
||||
.tcan{font-size:14px;font-weight:600;color:var(--text)}
|
||||
.tcar{font-size:12px;color:var(--text-dim)}
|
||||
|
||||
/* FAQ */
|
||||
.faq{padding:120px 0}
|
||||
.faqh{text-align:center;margin-bottom:56px}
|
||||
.fql{max-width:720px;margin:0 auto}
|
||||
.fqi{border:1px solid var(--border);border-radius:22px;overflow:hidden;padding:0 22px;margin-bottom:12px;background:rgba(255,255,255,.015);box-shadow:var(--shadow-soft)}
|
||||
.fqq{width:100%;background:0;border:0;padding:24px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:inherit;font-size:16px;font-weight:700;color:var(--text);text-align:left}
|
||||
.fqq:hover{color:var(--accent-light)}
|
||||
.fqic{font-size:20px;color:var(--text-dim);transition:transform .3s;flex-shrink:0;margin-left:16px}
|
||||
.fqi.op .fqic{transform:rotate(45deg);color:var(--accent)}
|
||||
.fqa{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1)}
|
||||
.fqi.op .fqa{max-height:300px}
|
||||
.fqa p{padding:0 0 24px;font-size:14px;color:var(--text-muted);line-height:1.7}
|
||||
|
||||
/* FINAL CTA */
|
||||
.fcta{padding:120px 0;text-align:center;position:relative;overflow:hidden}
|
||||
.fctab{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 50%,rgba(255,107,43,.08) 0%,transparent 70%);pointer-events:none}
|
||||
.fcta .ctr{position:relative;z-index:1}
|
||||
.fcta h2{font-family:var(--serif);font-size:clamp(32px,5vw,56px);font-weight:800;color:var(--text);line-height:1.08;letter-spacing:-.045em;margin-bottom:16px}
|
||||
.fcta h2 em{font-style:normal;color:var(--accent-light)}
|
||||
.fcta>div>.ss2{font-size:17px;color:var(--text-muted);max-width:540px;margin:0 auto 36px;line-height:1.65}
|
||||
.fctacs{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
|
||||
|
||||
/* FOOTER */
|
||||
footer{padding:48px 0 36px;border-top:1px solid var(--border)}
|
||||
footer .ctr{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
|
||||
.fb{display:flex;align-items:center;gap:10px}
|
||||
.fbi{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,var(--accent),#FF8F5E);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:700;color:#fff}
|
||||
.fbt{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--text-muted)}
|
||||
.flk{display:flex;gap:24px;font-size:13px;color:var(--text-dim)}
|
||||
.flk a:hover{color:var(--text-muted)}
|
||||
.foy{font-size:12px;color:var(--text-dim)}
|
||||
.foy a{color:var(--accent);font-weight:600}
|
||||
|
||||
@media(max-width:900px){
|
||||
.sbar .ctr{grid-template-columns:repeat(2,1fr)}
|
||||
.pg,.sg,.tstg{grid-template-columns:1fr}
|
||||
.fg{grid-template-columns:1fr}
|
||||
.lm .ctr{grid-template-columns:1fr}
|
||||
.prc{grid-template-columns:repeat(2,1fr)}
|
||||
.prc .pk:last-child{grid-column:1/-1}
|
||||
.prb{grid-template-columns:1fr}
|
||||
.nk a:not(.nc){display:none}
|
||||
}
|
||||
@media(max-width:600px){
|
||||
.sbar .ctr{grid-template-columns:1fr}
|
||||
.hcs,.fctacs{flex-direction:column;align-items:center}
|
||||
.lmf{flex-direction:column}
|
||||
footer .ctr{flex-direction:column;text-align:center}
|
||||
.prc{grid-template-columns:1fr}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav id="nav"><div class="ctr">
|
||||
<a href="#" class="wm" style="font-size:16px">m<span style="position:relative;display:inline-block">ı<span class="wd" style="left:50%;top:-.06em;transform:translateX(-50%)"></span></span>tarbeiterpuls</a>
|
||||
<div class="nk">
|
||||
<a href="#problem">Warum</a><a href="#features">Features</a><a href="#pricing">Preise</a><a href="#faq">FAQ</a>
|
||||
<a href="#demo" class="btn bp nc">Demo buchen</a>
|
||||
</div>
|
||||
</div></nav>
|
||||
|
||||
<section class="hero" id="hero">
|
||||
<div class="hbg"><div class="ho1"></div><div class="ho2"></div><div class="hgr"></div></div>
|
||||
<div class="ctr">
|
||||
<div class="hb"><div class="hbd"></div><span>Jetzt verfügbar für KMUs mit 10–150 Mitarbeitenden</span></div>
|
||||
<h1>Der PULS deines<br>Unternehmens in<br><em>30 Sekunden</em></h1>
|
||||
<p class="hsb">Mitarbeiterpuls gibt Geschäftsführern das, was bisher nur Konzernen vorbehalten war: ein KI-gestütztes Echtzeit-Dashboard für Mitarbeiter-Engagement, Stresslevel und Fluktuationsrisiko. Ohne HR-Abteilung. Ohne Aufwand.</p>
|
||||
<div class="hcs">
|
||||
<a href="#demo" class="btn bp">Kostenlose Demo buchen →</a>
|
||||
<a href="#leadmagnet" class="btn bs">Whitepaper herunterladen</a>
|
||||
</div>
|
||||
<div class="ht"><p>Vertraut von zukunftsorientierten Mittelständlern</p>
|
||||
<div class="htl"><div class="htlg">TechVentures</div><div class="htlg">ScaleUp GmbH</div><div class="htlg">MittelstandDigital</div><div class="htlg">InnoWerk AG</div><div class="htlg">PrimeTeam</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sbar"><div class="ctr">
|
||||
<div class="stt rv"><div class="stn">43.000<span>€</span></div><div class="stl">Durchschnittliche Kosten pro Fluktuationsfall</div><div class="sts">Quelle: Kompetenz Center Mitarbeiterbindung</div></div>
|
||||
<div class="stt rv d1"><div class="stn"><span>9</span>%</div><div class="stl">der Beschäftigten in DE sind wirklich engagiert</div><div class="sts">Quelle: Gallup Engagement Index 2024</div></div>
|
||||
<div class="stt rv d2"><div class="stn">118<span>Mrd.</span></div><div class="stl">Euro volkswirtschaftliche Kosten durch Fluktuation p.a.</div><div class="sts">Quelle: Gallup Deutschland</div></div>
|
||||
<div class="stt rv d3"><div class="stn"><span>59</span>%</div><div class="stl">weniger Kündigungswunsch durch hohes Engagement</div><div class="sts">Quelle: Gallup Global Workforce Report</div></div>
|
||||
</div></section>
|
||||
|
||||
<section class="prob" id="problem"><div class="ctr">
|
||||
<div class="sl rv">Das Problem</div>
|
||||
<h2 class="st rv">Im Mittelstand fliegt die Stimmung<br><em>unter dem Radar</em></h2>
|
||||
<p class="ss rv">Große Konzerne haben HR-Abteilungen, Engagement-Plattformen und People-Analytics-Teams. Mittelständler haben: ein Bauchgefühl. Und das reicht nicht mehr.</p>
|
||||
<div class="pg">
|
||||
<div class="pc rv"><div class="pca" style="background:var(--red)"></div><div class="pci">🔇</div><h3>Stille Kündigungen bleiben unsichtbar</h3><p>Mitarbeitende, die innerlich bereits gekündigt haben, zeigen es erst, wenn die Kündigung auf dem Tisch liegt. Dann ist es zu spät — und teuer.</p><div class="pcs">13% haben innerlich gekündigt</div></div>
|
||||
<div class="pc rv d1"><div class="pca" style="background:var(--yellow)"></div><div class="pci">📊</div><h3>Jährliche Umfragen kommen zu spät</h3><p>Die klassische Mitarbeiterbefragung einmal im Jahr ist wie ein Blutbild alle 12 Monate: Wenn man das Ergebnis hat, ist die Krankheit längst chronisch.</p><div class="pcs">73% denken monatlich an Jobwechsel</div></div>
|
||||
<div class="pc rv d2"><div class="pca" style="background:var(--accent)"></div><div class="pci">🏢</div><h3>Enterprise-Tools sind nichts für KMUs</h3><p>Leapsome, Peakon, Qualtrics — starke Tools, aber designed für Konzerne mit HR-Abteilungen. Als CEO eines KMU brauchen Sie etwas, das in 30 Sekunden funktioniert.</p><div class="pcs">Ab 8€/User/Monat + Setup</div></div>
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<section class="sol" id="solution"><div class="ctr">
|
||||
<div class="solh"><div class="sl rv">Die Lösung</div><h2 class="st rv">So simpel wie ein <em>Daumen hoch</em></h2><p class="ss rv">Mitarbeiterpuls komprimiert das, was bei Konzernen Monate dauert, auf einen Ablauf, der kürzer ist als ein Kaffee holen.</p></div>
|
||||
<div class="sg">
|
||||
<div class="stp rv"><div class="stpn">01</div><h3>Mitarbeitende geben Feedback</h3><p>4 Fragen, 1–10 Skala, optional Freitext. Per E-Mail-Link, anonym, vom Smartphone. Kein Login, kein Aufwand.</p><div class="stpt">⏱ 30 Sekunden</div></div>
|
||||
<div class="stp rv d1"><div class="stpn">02</div><h3>KI analysiert in Echtzeit</h3><p>Die Daten fließen sofort in 5 KPIs: Engagement, Fluktuation, Führung, Belastung und Energie. Unsere KI erkennt Muster und Risiken.</p><div class="stpt">⚡ Sofort</div></div>
|
||||
<div class="stp rv d2"><div class="stpn">03</div><h3>CEO sieht den PULS</h3><p>Ein Dashboard. Fünf Ampeln. Ein PULS-Gesamtwert. KI-generierte Handlungsempfehlungen. Trend-Verläufe. Team-Heatmap. Alles auf einen Blick.</p><div class="stpt">📊 Ein Blick genügt</div></div>
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<section class="feat" id="features"><div class="ctr">
|
||||
<div class="fh"><div class="sl rv">Features</div><h2 class="st rv">Alles, was ein CEO braucht.<br><em>Nichts, was er nicht braucht.</em></h2><p class="ss rv">Kein Feature-Bloat. Kein Consulting nötig. Mitarbeiterpuls konzentriert sich auf die 5 Kennzahlen, die den Unterschied machen.</p></div>
|
||||
<div class="fg">
|
||||
<div class="fc rv"><div class="fic" style="background:var(--green-glow)">🔥</div><div><h3>5 KPI-Ampelsystem + PULS</h3><p>Engagement, Fluktuation, Führung, Belastung, Energie — jeder KPI hat eine klare Ampel und einen 12-Wochen-Trend. Dazu der PULS als Gesamtwert.</p></div></div>
|
||||
<div class="fc rv d1"><div class="fic" style="background:rgba(255,107,43,.1)">🤖</div><div><h3>KI-Handlungsempfehlungen</h3><p>Keine Zahlen ohne Kontext: Die KI priorisiert Maßnahmen und sagt Ihnen konkret, was Sie als nächstes tun sollten.</p></div></div>
|
||||
<div class="fc rv d2"><div class="fic" style="background:rgba(255,170,0,.08)">📡</div><div><h3>Echtzeit-Dashboard für den Büro-Monitor</h3><p>Die öffentliche Ansicht zeigt dem Team den PULS live — und motiviert zur Teilnahme. Ohne sensible Daten.</p></div></div>
|
||||
<div class="fc rv d3"><div class="fic" style="background:rgba(255,107,107,.08)">🚨</div><div><h3>Fluktuation-Frühwarnsystem</h3><p>Unsere KI erkennt Muster, die auf erhöhtes Fluktuationsrisiko hindeuten — bevor die Kündigung kommt.</p></div></div>
|
||||
<div class="fc rv"><div class="fic" style="background:rgba(0,214,143,.08)">🔒</div><div><h3>100% Anonym & DSGVO-konform</h3><p>Kein Tracking, keine Rückverfolgung. Anonymität ist technisch garantiert — das schafft Vertrauen und ehrliches Feedback.</p></div></div>
|
||||
<div class="fc rv d1"><div class="fic" style="background:rgba(255,107,43,.08)">📧</div><div><h3>Automatisierte Erinnerungen</h3><p>Mitarbeitende werden automatisch per E-Mail erinnert. Freitagnachmittag als natürlicher Reflexionspunkt. Null Admin-Aufwand.</p></div></div>
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<section class="prev" id="preview"><div class="ctr">
|
||||
<div class="prevh"><div class="sl rv">Dashboard Preview</div><h2 class="st rv">Ihr neues <em>Cockpit</em></h2><p class="ss rv">Ein Blick genügt: Der PULS, 5 KPIs, Ampelsystem, Team-Heatmap und KI-Empfehlungen — alles auf einem Screen.</p></div>
|
||||
<div class="pmk rv">
|
||||
<div class="ptb"><div class="pdt" style="background:#FF6B6B"></div><div class="pdt" style="background:#FFAA00"></div><div class="pdt" style="background:#00D68F"></div><span style="margin-left:12px;font-family:var(--mono);font-size:11px;color:var(--text-dim)">mitarbeiterpuls — Dashboard</span></div>
|
||||
<div class="prc">
|
||||
<div class="pk"><div class="pkb" style="background:var(--green);opacity:.6"></div><div class="pkl">🔥 Engagement</div><div class="pkv">7.8<span class="pku">/10</span></div><div class="pkt" style="color:var(--green)">↑ 0.4</div></div>
|
||||
<div class="pk"><div class="pkb" style="background:var(--yellow);opacity:.6"></div><div class="pkl">🚪 Fluktuation</div><div class="pkv">12<span class="pku">%</span></div><div class="pkt" style="color:var(--green)">↓ 2.1%</div></div>
|
||||
<div class="pk"><div class="pkb" style="background:var(--green);opacity:.6"></div><div class="pkl">👤 Führung</div><div class="pkv">7.2<span class="pku">/10</span></div><div class="pkt" style="color:var(--green)">↑ 0.3</div></div>
|
||||
<div class="pk"><div class="pkb" style="background:var(--yellow);opacity:.6"></div><div class="pkl">⚡ Belastung</div><div class="pkv">6.4<span class="pku">/10</span></div><div class="pkt" style="color:var(--red)">↑ 0.6</div></div>
|
||||
<div class="pk"><div class="pkb" style="background:var(--green);opacity:.6"></div><div class="pkl">🚀 Energie</div><div class="pkv">7.5<span class="pku">/10</span></div><div class="pkt" style="color:var(--green)">↑ 0.2</div></div>
|
||||
</div>
|
||||
<div class="prb">
|
||||
<div class="pai">
|
||||
<div class="pat"><span style="display:inline-flex;width:16px;height:16px;border-radius:4px;background:linear-gradient(135deg,var(--accent),#FF8F5E);align-items:center;justify-content:center;font-size:9px;color:#fff">✦</span> KI-Empfehlungen</div>
|
||||
<div class="pac" style="border-left-color:var(--red)"><p><strong style="color:var(--text)">Stresslevel steigt</strong> — Seit 4 Wochen steigend. Team-Lead-Gespräche empfohlen.</p></div>
|
||||
<div class="pac" style="border-left-color:var(--yellow)"><p><strong style="color:var(--text)">Fluktuationsrisiko Ops</strong> — 3 von 10 MA im Risikobereich.</p></div>
|
||||
<div class="pac" style="border-left-color:var(--green)"><p><strong style="color:var(--text)">Führung auf Allzeithoch</strong> — Coaching-Programm zeigt Wirkung.</p></div>
|
||||
</div>
|
||||
<div class="phi">
|
||||
<div class="pat">Team-Übersicht</div>
|
||||
<div class="phr" style="border-bottom:none;padding-bottom:0"><div style="font-size:9px;color:var(--text-dim);font-weight:700">TEAM</div><div style="font-size:9px;color:var(--text-dim);text-align:center;font-weight:700">ENG</div><div style="font-size:9px;color:var(--text-dim);text-align:center;font-weight:700">STRESS</div><div style="font-size:9px;color:var(--text-dim);text-align:center;font-weight:700">ENRG</div><div style="font-size:9px;color:var(--text-dim);text-align:center;font-weight:700">FHRG</div><div style="font-size:9px;color:var(--text-dim);text-align:center;font-weight:700">RISIKO</div></div>
|
||||
<div class="phr"><div class="phn">Entwicklung</div><div class="phc" style="background:var(--green-glow);color:var(--green)">7.8</div><div class="phc" style="background:var(--green-glow);color:var(--green)">5.5</div><div class="phc" style="background:var(--green-glow);color:var(--green)">7.2</div><div class="phc" style="background:var(--green-glow);color:var(--green)">8.1</div><div class="phb" style="background:var(--green-glow);color:var(--green)">● Gut</div></div>
|
||||
<div class="phr"><div class="phn">Vertrieb</div><div class="phc" style="background:var(--green-glow);color:var(--green)">7.1</div><div class="phc" style="background:rgba(255,170,0,.08);color:var(--yellow)">6.8</div><div class="phc" style="background:var(--green-glow);color:var(--green)">7.5</div><div class="phc" style="background:var(--green-glow);color:var(--green)">7.2</div><div class="phb" style="background:rgba(255,170,0,.08);color:var(--yellow)">● Mäßig</div></div>
|
||||
<div class="phr"><div class="phn">Operations</div><div class="phc" style="background:rgba(255,170,0,.08);color:var(--yellow)">6.5</div><div class="phc" style="background:rgba(255,107,107,.08);color:var(--red)">7.2</div><div class="phc" style="background:rgba(255,107,107,.08);color:var(--red)">5.8</div><div class="phc" style="background:rgba(255,170,0,.08);color:var(--yellow)">6.9</div><div class="phb" style="background:rgba(255,107,107,.08);color:var(--red)">● Hoch</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<section class="comp" id="comparison"><div class="ctr">
|
||||
<div class="comph"><div class="sl rv">Vergleich</div><h2 class="st rv">Warum Mitarbeiterpuls <em>anders</em> ist</h2><p class="ss rv">Die großen Plattformen sind für Konzerne. Mitarbeiterpuls ist für Geschäftsführer, die 5 Minuten pro Woche haben.</p></div>
|
||||
<div class="ctbl rv">
|
||||
<div class="crow hdr"><div class="ccl chc"></div><div class="ccl chc chl" style="color:var(--accent)">Mitarbeiterpuls</div><div class="ccl chc">Enterprise</div></div>
|
||||
<div class="crow"><div class="ccl">Setup-Zeit</div><div class="ccl chl"><span class="ck">5 Min.</span></div><div class="ccl"><span class="cx">2–6 Wochen</span></div></div>
|
||||
<div class="crow"><div class="ccl">Feedback-Dauer Mitarbeiter</div><div class="ccl chl"><span class="ck">30 Sek.</span></div><div class="ccl"><span class="cx">5–15 Min.</span></div></div>
|
||||
<div class="crow"><div class="ccl">HR-Abteilung nötig</div><div class="ccl chl"><span class="ck">Nein</span></div><div class="ccl"><span class="cx">Ja</span></div></div>
|
||||
<div class="crow"><div class="ccl">KI-Handlungsempfehlungen</div><div class="ccl chl"><span class="ck">✓</span></div><div class="ccl"><span class="cx">Teilweise</span></div></div>
|
||||
<div class="crow"><div class="ccl">Live-Monitor fürs Büro</div><div class="ccl chl"><span class="ck">✓</span></div><div class="ccl"><span class="cx">✕</span></div></div>
|
||||
<div class="crow"><div class="ccl">Preis (50 MA)</div><div class="ccl chl"><span class="ck">200€/Mo</span></div><div class="ccl"><span class="cx">400–800€+</span></div></div>
|
||||
<div class="crow"><div class="ccl">Zielgruppe</div><div class="ccl chl"><span class="ck">CEO direkt</span></div><div class="ccl"><span class="cx">HR-Teams</span></div></div>
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<section class="prc2" id="pricing"><div class="ctr">
|
||||
<div class="prc2h"><div class="sl rv">Preise</div><h2 class="st rv">Ein Preis. <em>Keine Überraschungen.</em></h2><p class="ss rv">Günstiger als eine einzige Kündigung. Wertvoller als jede Jahresbefragung.</p></div>
|
||||
<div class="pcard rv">
|
||||
<div class="pcg"></div>
|
||||
<div class="pcb">Starter · Für KMUs</div>
|
||||
<div class="pam"><span class="pcur">€</span><span class="pnum">4</span></div>
|
||||
<div class="pper">pro Mitarbeiter / Monat</div>
|
||||
<div class="pcalc">50 Mitarbeitende × 4€ = 200€ / Monat</div>
|
||||
<div class="pfts">
|
||||
<div class="pft"><span class="pftc">✓</span> PULS-Gesamtwert + 5 KPIs mit Ampelsystem & Trendverlauf</div>
|
||||
<div class="pft"><span class="pftc">✓</span> KI-Handlungsempfehlungen</div>
|
||||
<div class="pft"><span class="pftc">✓</span> Anonymes Mitarbeiter-Feedback</div>
|
||||
<div class="pft"><span class="pftc">✓</span> Team-Heatmap & Vergleich</div>
|
||||
<div class="pft"><span class="pftc">✓</span> Live-Monitor für das Büro</div>
|
||||
<div class="pft"><span class="pftc">✓</span> Automatische E-Mail-Erinnerungen</div>
|
||||
<div class="pft"><span class="pftc">✓</span> DSGVO-konform, EU-Hosting</div>
|
||||
<div class="pft"><span class="pftc">✓</span> Persönliches Onboarding & Support</div>
|
||||
</div>
|
||||
<a href="#demo" class="btn bp pcta">Kostenlose Demo vereinbaren →</a>
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<section class="lm" id="leadmagnet"><div class="ctr">
|
||||
<div class="lmv rv">
|
||||
<div class="lmm">
|
||||
<div class="lmmb">📄 PDF · 15 Seiten</div>
|
||||
<h4>Der KMU-Guide für Mitarbeiter-Engagement</h4>
|
||||
<p>Warum 91% der deutschen Beschäftigten nicht engagiert sind — und was Geschäftsführer jetzt dagegen tun können.</p>
|
||||
<div class="lmps"><div class="lmp"></div><div class="lmp" style="transform:rotate(2deg)"></div><div class="lmp" style="transform:rotate(4deg)"></div><div class="lmp" style="transform:rotate(6deg)"></div><div class="lmp" style="transform:rotate(8deg)"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lmc rv d1">
|
||||
<div class="sl">Kostenloses Whitepaper</div>
|
||||
<h3>Die versteckten Kosten von Desengagement — und wie KMUs sie eliminieren</h3>
|
||||
<p>15 Seiten mit aktuellen Zahlen, Praxisbeispielen und einer konkreten Roadmap für Geschäftsführer, die ihre besten Leute halten wollen.</p>
|
||||
<ul class="lmpts">
|
||||
<li>Aktuelle Gallup-Zahlen für Deutschland 2024/25 erklärt</li>
|
||||
<li>Die wahren Kosten einer Kündigung (mit Rechenbeispiel für KMUs)</li>
|
||||
<li>5 Frühwarnsignale, die auf stille Kündigungen hindeuten</li>
|
||||
<li>Konkrete Sofortmaßnahmen ohne HR-Abteilung</li>
|
||||
<li>Wie Mitarbeiterpuls diese Insights automatisiert</li>
|
||||
</ul>
|
||||
<form class="lmf" onsubmit="event.preventDefault();this.innerHTML='<div style=\'padding:14px;color:var(--green);font-weight:600\'>✓ Whitepaper wird an deine E-Mail gesendet!</div>'">
|
||||
<input type="email" class="lmi" placeholder="Deine E-Mail-Adresse" required>
|
||||
<button type="submit" class="btn bp" style="white-space:nowrap">Whitepaper senden</button>
|
||||
</form>
|
||||
<div class="lmn">Kein Spam, kein Abo. Du erhältst das PDF und optional 3 Follow-up E-Mails mit Praxis-Tipps.</div>
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<section class="tst" id="testimonials"><div class="ctr">
|
||||
<div class="tsth"><div class="sl rv">Stimmen</div><h2 class="st rv">Was Geschäftsführer <em>sagen</em></h2></div>
|
||||
<div class="tstg">
|
||||
<div class="tc rv"><div class="tcs">★★★★★</div><div class="tcq">„Wir hatten vorher null Daten über die Stimmung im Team. Mitarbeiterpuls hat uns die Augen geöffnet — und das Beste: Es hat genau eine Stunde gedauert, bis alles lief."</div><div class="tca"><div class="tcav">👨💼</div><div><div class="tcan">Markus W.</div><div class="tcar">Geschäftsführer, IT-Dienstleister (45 MA)</div></div></div></div>
|
||||
<div class="tc rv d1"><div class="tcs">★★★★★</div><div class="tcq">„Die KI-Empfehlungen waren der Game-Changer. Ich wusste sofort, dass im Ops-Team etwas nicht stimmt — bevor jemand gekündigt hat. Das hat uns eine teure Neubesetzung erspart."</div><div class="tca"><div class="tcav">👩💼</div><div><div class="tcan">Sandra K.</div><div class="tcar">CEO, E-Commerce-Agentur (28 MA)</div></div></div></div>
|
||||
<div class="tc rv d2"><div class="tcs">★★★★★</div><div class="tcq">„Das Dashboard im Eingangsbereich hat unsere Feedbackkultur verändert. Die Leute reden jetzt über den PULS wie über den Umsatz."</div><div class="tca"><div class="tcav">👨💻</div><div><div class="tcan">Thomas R.</div><div class="tcar">Gründer, SaaS-Startup (72 MA)</div></div></div></div>
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<section class="faq" id="faq"><div class="ctr">
|
||||
<div class="faqh"><div class="sl rv">FAQ</div><h2 class="st rv">Häufig gestellte <em>Fragen</em></h2></div>
|
||||
<div class="fql">
|
||||
<div class="fqi rv"><button class="fqq" onclick="this.parentElement.classList.toggle('op')">Wie anonym ist das Feedback wirklich? <span class="fqic">+</span></button><div class="fqa"><p>Technisch garantiert anonym. Die Antworten werden ohne User-Bezug gespeichert. Es gibt keine Möglichkeit, einzelne Antworten auf Mitarbeitende zurückzuführen. Bei Teams unter 5 Personen werden Daten automatisch aggregiert.</p></div></div>
|
||||
<div class="fqi rv"><button class="fqq" onclick="this.parentElement.classList.toggle('op')">Brauche ich eine HR-Abteilung? <span class="fqic">+</span></button><div class="fqa"><p>Nein. Mitarbeiterpuls ist für Geschäftsführer designed, die kein HR-Team haben. Setup dauert 5 Minuten, die wöchentliche Auswertung maximal 2 Minuten. Die KI sagt Ihnen direkt, was zu tun ist.</p></div></div>
|
||||
<div class="fqi rv"><button class="fqq" onclick="this.parentElement.classList.toggle('op')">Nervt das die Mitarbeitenden nicht? <span class="fqic">+</span></button><div class="fqa"><p>30 Sekunden alle 2 Wochen — weniger als ein Kaffee holen. Die meisten empfinden es als Wertschätzung, regelmäßig gefragt zu werden. Besonders, wenn sie sehen, dass sich etwas verändert.</p></div></div>
|
||||
<div class="fqi rv"><button class="fqq" onclick="this.parentElement.classList.toggle('op')">Ist Mitarbeiterpuls DSGVO-konform? <span class="fqic">+</span></button><div class="fqa"><p>Ja. Alle Daten in EU-Rechenzentren. Anonymisierung auf technischer Ebene. Wir verarbeiten keine personenbezogenen Daten im Feedback-Prozess. AV-Vertrag wird bereitgestellt.</p></div></div>
|
||||
<div class="fqi rv"><button class="fqq" onclick="this.parentElement.classList.toggle('op')">Ab wie vielen Mitarbeitenden macht es Sinn? <span class="fqic">+</span></button><div class="fqa"><p>Ab 10 Mitarbeitenden. Optimal für 20–150 Mitarbeitende — groß genug für statistische Relevanz, klein genug, dass der CEO direkt handeln kann.</p></div></div>
|
||||
<div class="fqi rv"><button class="fqq" onclick="this.parentElement.classList.toggle('op')">Kann ich Mitarbeiterpuls erstmal testen? <span class="fqic">+</span></button><div class="fqa"><p>Absolut. Kostenlose 30-Minuten-Demo, danach 30-tägige Testphase. Kein Risiko, keine Verpflichtung.</p></div></div>
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<section class="fcta" id="demo">
|
||||
<div class="fctab"></div>
|
||||
<div class="ctr">
|
||||
<div class="sl rv">Bereit?</div>
|
||||
<h2 class="rv">Verpassen Sie nicht den Moment,<br>in dem Ihr bester Mitarbeiter<br><em>innerlich kündigt.</em></h2>
|
||||
<p class="rv" style="font-size:17px;color:var(--text-muted);max-width:540px;margin:0 auto 36px;line-height:1.65">30 Minuten Demo. Kein Verkaufsdruck. Wir zeigen Ihnen, wie Mitarbeiterpuls für Ihr Unternehmen aussehen würde.</p>
|
||||
<div class="fctacs rv">
|
||||
<a href="https://calendly.com/onyva" target="_blank" rel="noopener" class="btn bp" style="font-size:17px;padding:18px 40px">Jetzt Demo-Termin buchen →</a>
|
||||
<a href="#leadmagnet" class="btn bs">Erstmal Whitepaper lesen</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer><div class="ctr">
|
||||
<div class="wm" style="font-size:15px;color:#F4F4F2">m<span style="position:relative;display:inline-block">ı<span class="wd" style="left:50%;top:-.06em;transform:translateX(-50%)"></span></span>tarbeiterpuls</div>
|
||||
<div class="flk"><a href="https://www.onyva.de/datenschutz" target="_blank">Datenschutz</a><a href="https://www.onyva.de/impressum" target="_blank">Impressum</a><a href="#">AV-Vertrag</a><a href="mailto:info@onyva.de">info@onyva.de</a></div>
|
||||
<div class="foy">Ein Produkt von <a href="https://www.onyva.de" target="_blank" rel="noopener">Onyva</a> — KI-Agentur für Mittelstand</div>
|
||||
</div></footer>
|
||||
|
||||
<script>
|
||||
const nav=document.getElementById('nav');
|
||||
window.addEventListener('scroll',()=>{nav.classList.toggle('sc',window.scrollY>60)});
|
||||
const obs=new IntersectionObserver(e=>{e.forEach(x=>{if(x.isIntersecting){x.target.classList.add('vis');obs.unobserve(x.target)}})},{threshold:.1,rootMargin:'0px 0px -40px 0px'});
|
||||
document.querySelectorAll('.rv').forEach(el=>obs.observe(el));
|
||||
document.querySelectorAll('a[href^="#"]').forEach(a=>{a.addEventListener('click',e=>{e.preventDefault();const t=document.querySelector(a.getAttribute('href'));if(t)t.scrollIntoView({behavior:'smooth',block:'start'})})});
|
||||
</script>
|
||||
<script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"Mitarbeiterpuls","url":"https://mitarbeiterpuls.de","applicationCategory":"BusinessApplication","operatingSystem":"Web","description":"KI-gestütztes Echtzeit-Dashboard für Mitarbeiter-Engagement, Stresslevel und Fluktuationsrisiko. Für KMU-Geschäftsführer mit 10-150 Mitarbeitenden.","offers":{"@type":"Offer","price":"4","priceCurrency":"EUR"},"creator":{"@type":"Organization","name":"Onyva Innovation GmbH","url":"https://www.onyva.de"}}</script>
|
||||
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Wie anonym ist das Feedback bei Mitarbeiterpuls?","acceptedAnswer":{"@type":"Answer","text":"Technisch garantiert anonym. Antworten werden ohne User-Bezug gespeichert. Bei Teams unter 5 Personen werden Daten automatisch aggregiert."}},{"@type":"Question","name":"Brauche ich eine HR-Abteilung?","acceptedAnswer":{"@type":"Answer","text":"Nein. Mitarbeiterpuls ist für Geschäftsführer ohne HR-Team. Setup 5 Minuten, wöchentliche Auswertung 2 Minuten."}},{"@type":"Question","name":"Ist Mitarbeiterpuls DSGVO-konform?","acceptedAnswer":{"@type":"Answer","text":"Ja. EU-Hosting, technische Anonymisierung, AV-Vertrag wird bereitgestellt."}},{"@type":"Question","name":"Ab wie vielen Mitarbeitenden macht Mitarbeiterpuls Sinn?","acceptedAnswer":{"
|
||||
24
nginx.conf
Normal file
24
nginx.conf
Normal file
@@ -0,0 +1,24 @@
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name _;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location = /health {
|
||||
access_log off;
|
||||
add_header Content-Type text/plain;
|
||||
return 200 'ok';
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
location ~* \.(?:css|js|mjs|png|jpg|jpeg|gif|svg|ico|webp|woff|woff2)$ {
|
||||
expires 7d;
|
||||
add_header Cache-Control "public, max-age=604800, immutable";
|
||||
try_files $uri =404;
|
||||
}
|
||||
}
|
||||
797
stitch-landingpage.html
Normal file
797
stitch-landingpage.html
Normal file
@@ -0,0 +1,797 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="de"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>mitarbeiterpuls | Industrial Pulse</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"primary-container": "#ff7a2f",
|
||||
"secondary": "#e5e2e1",
|
||||
"outline-variant": "#494847",
|
||||
"on-secondary-fixed-variant": "#5c5b5b",
|
||||
"on-secondary-fixed": "#403f3f",
|
||||
"on-primary": "#531e00",
|
||||
"inverse-surface": "#fcf8f8",
|
||||
"primary": "#ff9159",
|
||||
"on-surface": "#ffffff",
|
||||
"on-primary-container": "#401500",
|
||||
"on-secondary-container": "#d2d0cf",
|
||||
"surface-tint": "#ff9159",
|
||||
"surface": "#0e0e0e",
|
||||
"surface-bright": "#2c2c2c",
|
||||
"tertiary-fixed-dim": "#eba60f",
|
||||
"secondary-fixed-dim": "#d7d4d3",
|
||||
"primary-fixed-dim": "#f66700",
|
||||
"secondary-dim": "#d7d4d3",
|
||||
"on-error": "#450900",
|
||||
"background": "#0e0e0e",
|
||||
"on-background": "#ffffff",
|
||||
"surface-container": "#1a1919",
|
||||
"surface-variant": "#262626",
|
||||
"secondary-container": "#474646",
|
||||
"on-tertiary-fixed": "#372400",
|
||||
"tertiary": "#ffc562",
|
||||
"surface-container-high": "#201f1f",
|
||||
"tertiary-container": "#fbb423",
|
||||
"on-primary-fixed": "#000000",
|
||||
"on-surface-variant": "#adaaaa",
|
||||
"primary-fixed": "#ff7a2f",
|
||||
"surface-container-low": "#131313",
|
||||
"error-dim": "#d53d18",
|
||||
"surface-container-lowest": "#000000",
|
||||
"inverse-on-surface": "#565554",
|
||||
"error-container": "#b92902",
|
||||
"on-primary-fixed-variant": "#4f1c00",
|
||||
"on-secondary": "#525151",
|
||||
"surface-dim": "#0e0e0e",
|
||||
"on-tertiary-fixed-variant": "#5e4000",
|
||||
"inverse-primary": "#a14100",
|
||||
"error": "#ff7351",
|
||||
"tertiary-dim": "#eba60f",
|
||||
"on-tertiary-container": "#523700",
|
||||
"secondary-fixed": "#e5e2e1",
|
||||
"on-tertiary": "#5e4000",
|
||||
"tertiary-fixed": "#fbb423",
|
||||
"primary-dim": "#ff7524",
|
||||
"surface-container-highest": "#262626",
|
||||
"outline": "#777575",
|
||||
"on-error-container": "#ffd2c8"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.375rem",
|
||||
"lg": "0.875rem",
|
||||
"xl": "1.5rem",
|
||||
"full": "999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Manrope"],
|
||||
"label": ["JetBrains Mono"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
.pulse-glow {
|
||||
box-shadow: 0 0 20px rgba(255, 145, 89, 0.2);
|
||||
}
|
||||
.editorial-line-height {
|
||||
line-height: 1.1;
|
||||
}
|
||||
.glass-header {
|
||||
background: rgba(14, 14, 14, 0.7);
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
.brandmark {
|
||||
font-family: "Nunito", "Manrope", sans-serif;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1;
|
||||
color: #f4f4f2;
|
||||
text-shadow: 0.015em 0.03em 0.03em rgba(0,0,0,0.18), 0.03em 0.08em 0.12em rgba(0,0,0,0.14), 0.05em 0.14em 0.25em rgba(0,0,0,0.1);
|
||||
}
|
||||
.brand-i {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.brand-i::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -0.08em;
|
||||
transform: translateX(-50%);
|
||||
width: 0.22em;
|
||||
height: 0.22em;
|
||||
border-radius: 999px;
|
||||
background: #ff7a1a;
|
||||
box-shadow: 0 0 0.12em rgba(255,122,26,0.95), 0 0 0.28em rgba(255,122,26,0.72), 0 0 0.48em rgba(255,122,26,0.38);
|
||||
}
|
||||
.section-kicker {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pill-btn {
|
||||
border-radius: 999px;
|
||||
}
|
||||
.surface-card {
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)), #1a1919;
|
||||
border: 1px solid rgba(255,255,255,0.07);
|
||||
box-shadow: 0 24px 60px rgba(0,0,0,0.22);
|
||||
}
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(34px) scale(0.985);
|
||||
filter: blur(8px);
|
||||
transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1), filter 0.9s cubic-bezier(.16,1,.3,1);
|
||||
will-change: opacity, transform, filter;
|
||||
}
|
||||
.reveal.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
filter: blur(0);
|
||||
}
|
||||
.reveal[data-delay="1"] { transition-delay: 0.08s; }
|
||||
.reveal[data-delay="2"] { transition-delay: 0.16s; }
|
||||
.reveal[data-delay="3"] { transition-delay: 0.24s; }
|
||||
.reveal[data-delay="4"] { transition-delay: 0.32s; }
|
||||
.float-orb {
|
||||
animation: drift 18s ease-in-out infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
.float-orb.alt {
|
||||
animation-duration: 22s;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
.hero-grid::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(rgba(255,145,89,0.075) 1px, transparent 1px), linear-gradient(90deg, rgba(255,145,89,0.075) 1px, transparent 1px);
|
||||
background-size: 68px 68px;
|
||||
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent);
|
||||
pointer-events: none;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.tilt-card {
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
.tilt-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 1px;
|
||||
border-radius: inherit;
|
||||
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,145,89,0.12), transparent 42%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.tilt-card.is-hovered::after {
|
||||
opacity: 1;
|
||||
}
|
||||
.magnetic {
|
||||
transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.25s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
.stats-strip {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.stats-strip::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
|
||||
transform: translateX(-100%);
|
||||
animation: sweep 9s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dashboard-shell {
|
||||
animation: dashboardFloat 7s ease-in-out infinite;
|
||||
transform-origin: center top;
|
||||
}
|
||||
.kpi-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.kpi-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(120deg, transparent 15%, rgba(255,255,255,0.08) 50%, transparent 85%);
|
||||
transform: translateX(-130%);
|
||||
animation: shimmer 4.8s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.chart-bar {
|
||||
transform-origin: bottom center;
|
||||
animation: bars 3.8s ease-in-out infinite;
|
||||
}
|
||||
.chart-bar:nth-of-type(2) { animation-delay: 0.15s; }
|
||||
.chart-bar:nth-of-type(3) { animation-delay: 0.3s; }
|
||||
.chart-bar:nth-of-type(4) { animation-delay: 0.45s; }
|
||||
.status-pulse {
|
||||
animation: statusPulse 2.4s ease-in-out infinite;
|
||||
}
|
||||
.marquee-track {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
will-change: transform;
|
||||
}
|
||||
.marquee-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.testimonial-track {
|
||||
animation: driftX 14s ease-in-out infinite;
|
||||
}
|
||||
details > p {
|
||||
transform: translateY(6px);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
details[open] > p {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
@keyframes drift {
|
||||
0%,100% { transform: translate3d(0,0,0) scale(1); }
|
||||
33% { transform: translate3d(24px,-18px,0) scale(1.04); }
|
||||
66% { transform: translate3d(-18px,20px,0) scale(0.97); }
|
||||
}
|
||||
@keyframes dashboardFloat {
|
||||
0%,100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0%,18% { transform: translateX(-130%); }
|
||||
48%,100% { transform: translateX(130%); }
|
||||
}
|
||||
@keyframes bars {
|
||||
0%,100% { transform: scaleY(0.86); opacity: 0.72; }
|
||||
50% { transform: scaleY(1.08); opacity: 1; }
|
||||
}
|
||||
@keyframes statusPulse {
|
||||
0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.36); }
|
||||
50% { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
|
||||
}
|
||||
@keyframes sweep {
|
||||
0% { transform: translateX(-110%); }
|
||||
100% { transform: translateX(110%); }
|
||||
}
|
||||
@keyframes driftX {
|
||||
0%,100% { transform: translateX(0); }
|
||||
50% { transform: translateX(-10px); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal, .float-orb, .dashboard-shell, .chart-bar, .status-pulse, .testimonial-track, .stats-strip::after, .kpi-card::before {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
transform: none !important;
|
||||
filter: none !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.marquee-group {
|
||||
gap: 1.25rem;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
.hero-grid::before {
|
||||
opacity: 0.55;
|
||||
background-size: 54px 54px;
|
||||
}
|
||||
.testimonial-track {
|
||||
animation: none;
|
||||
}
|
||||
.surface-card {
|
||||
box-shadow: 0 16px 36px rgba(0,0,0,0.18);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
html, body {
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
.mobile-scroll {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.mobile-scroll::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
.mobile-scroll::-webkit-scrollbar-thumb {
|
||||
background: rgba(255,255,255,0.14);
|
||||
border-radius: 999px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body selection:bg-primary selection:text-on-primary overflow-x-hidden">
|
||||
<nav class="md:hidden fixed top-0 left-0 right-0 z-50 glass-header border-b border-white/5">
|
||||
<div class="flex items-center justify-center px-6 py-4">
|
||||
<a class="brandmark text-[1.2rem]" href="#hero">m<span class="brand-i">ı</span>tarbeiterpuls</a>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="hidden md:block fixed top-0 w-full z-50 glass-header border-b border-white/5">
|
||||
<div class="flex justify-between items-center px-6 md:px-8 py-5 w-full max-w-7xl mx-auto">
|
||||
<a class="brandmark text-[1.45rem] md:text-[1.7rem]" href="#hero">m<span class="brand-i">ı</span>tarbeiterpuls</a>
|
||||
<div class="hidden md:flex gap-8 items-center">
|
||||
<a class="text-[#adaaaa] font-semibold hover:text-white transition-colors duration-300" href="#problem">Warum</a>
|
||||
<a class="text-[#adaaaa] font-semibold hover:text-white transition-colors duration-300" href="#features">Features</a>
|
||||
<a class="text-[#adaaaa] font-semibold hover:text-white transition-colors duration-300" href="#pricing">Preise</a>
|
||||
<a class="text-[#adaaaa] font-semibold hover:text-white transition-colors duration-300" href="#faq">FAQ</a>
|
||||
<a class="magnetic bg-primary text-on-primary px-6 py-3 pill-btn font-bold hover:brightness-110 transition-all active:scale-95 shadow-lg shadow-primary/20" href="#demo">Demo buchen</a>
|
||||
</div>
|
||||
<a class="magnetic md:hidden bg-primary/10 border border-primary/20 text-primary px-4 py-2 pill-btn font-bold" href="#demo">Demo</a>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="pt-20 md:pt-24">
|
||||
<section class="hero-grid relative px-6 md:px-8 py-24 md:py-32 max-w-7xl mx-auto" id="hero">
|
||||
<div class="float-orb absolute right-[-10%] top-20 h-[28rem] w-[28rem] rounded-full bg-primary/15 blur-[120px] opacity-70" data-parallax="-18"></div>
|
||||
<div class="float-orb alt absolute left-[-8%] bottom-10 h-[24rem] w-[24rem] rounded-full bg-emerald-500/10 blur-[120px] opacity-50" data-parallax="16"></div>
|
||||
<div class="max-w-4xl mx-auto z-10 reveal text-center" data-delay="1">
|
||||
<div class="magnetic mb-6 inline-flex items-center gap-2 px-4 py-2 bg-surface-container border border-primary/20 pill-btn">
|
||||
<span class="status-pulse w-2 h-2 rounded-full bg-emerald-400"></span>
|
||||
<span class="section-kicker text-[11px] font-bold text-primary">Jetzt verfügbar für KMUs mit 10-150 Mitarbeitenden</span>
|
||||
</div>
|
||||
<h1 class="text-4xl sm:text-5xl md:text-7xl font-extrabold editorial-line-height tracking-[-0.055em] mb-8 text-white">Der PULS deines Unternehmens in <span class="text-primary">30 Sekunden</span></h1>
|
||||
<p class="text-lg md:text-xl text-on-surface-variant max-w-3xl mx-auto mb-12 font-medium leading-8">Mitarbeiterpuls gibt Geschäftsführern das, was bisher nur Konzernen vorbehalten war: ein KI-gestütztes Echtzeit-Dashboard für Mitarbeiter-Engagement, Stresslevel und Fluktuationsrisiko. Ohne HR-Abteilung. Ohne Aufwand.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a class="magnetic bg-primary text-on-primary px-8 sm:px-10 py-4 pill-btn font-bold text-base sm:text-lg hover:brightness-110 transition-all flex items-center justify-center gap-2 group shadow-xl shadow-primary/20" href="#demo">Kostenlose Demo buchen <span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span></a>
|
||||
<a class="magnetic border border-outline-variant/30 text-on-surface px-8 sm:px-10 py-4 pill-btn font-bold text-base sm:text-lg hover:bg-surface-container transition-all" href="#leadmagnet">Whitepaper herunterladen</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="w-full -mt-6 mb-6 reveal" data-delay="3">
|
||||
<div class="max-w-7xl mx-auto px-6 md:px-8 flex flex-col items-center text-center">
|
||||
<p class="section-kicker text-[11px] text-on-surface-variant/70 mb-4">Vertraut von zukunftsorientierten Mittelständlern</p>
|
||||
<div class="w-full overflow-hidden">
|
||||
<div class="marquee-track text-white/35 font-bold">
|
||||
<div class="marquee-group px-8 md:px-10">
|
||||
<span>TechVentures</span><span>ScaleUp GmbH</span><span>MittelstandDigital</span><span>InnoWerk AG</span><span>PrimeTeam</span>
|
||||
</div>
|
||||
<div class="marquee-group px-8 md:px-10" aria-hidden="true">
|
||||
<span>TechVentures</span><span>ScaleUp GmbH</span><span>MittelstandDigital</span><span>InnoWerk AG</span><span>PrimeTeam</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="stats-strip px-6 md:px-8 py-16 bg-surface-container-low">
|
||||
<div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-10">
|
||||
<div class="reveal"><div class="counter text-4xl md:text-6xl font-extrabold tracking-tighter text-white font-label" data-counter="43000" data-suffix="€">43.000€</div><div class="text-sm text-on-surface-variant mt-2">Durchschnittliche Kosten pro Fluktuationsfall</div></div>
|
||||
<div class="reveal" data-delay="1"><div class="counter text-4xl md:text-6xl font-extrabold tracking-tighter text-white font-label" data-counter="9" data-suffix="%">9%</div><div class="text-sm text-on-surface-variant mt-2">der Beschäftigten in DE sind wirklich engagiert</div></div>
|
||||
<div class="reveal" data-delay="2"><div class="counter text-4xl md:text-6xl font-extrabold tracking-tighter text-white font-label" data-counter="118" data-suffix=" Mrd.">118 Mrd.</div><div class="text-sm text-on-surface-variant mt-2">Euro volkswirtschaftliche Kosten durch Fluktuation p.a.</div></div>
|
||||
<div class="reveal" data-delay="3"><div class="counter text-4xl md:text-6xl font-extrabold tracking-tighter text-white font-label" data-counter="59" data-suffix="%">59%</div><div class="text-sm text-on-surface-variant mt-2">weniger Kündigungswunsch durch hohes Engagement</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="px-6 md:px-8 py-28 max-w-7xl mx-auto" id="problem">
|
||||
<div class="max-w-3xl mb-14 reveal">
|
||||
<div class="section-kicker text-primary text-xs font-bold mb-4">Das Problem</div>
|
||||
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] text-white mb-5">Im Mittelstand fliegt die Stimmung <span class="text-primary">unter dem Radar</span></h2>
|
||||
<p class="text-lg text-on-surface-variant">Große Konzerne haben HR-Abteilungen, Engagement-Plattformen und People-Analytics-Teams. Mittelständler haben: ein Bauchgefühl. Und das reicht nicht mehr.</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt><div class="text-3xl mb-4">🔇</div><h3 class="text-white text-xl font-bold mb-3">Stille Kündigungen bleiben unsichtbar</h3><p class="text-on-surface-variant">Mitarbeitende, die innerlich bereits gekündigt haben, zeigen es oft erst, wenn die Kündigung auf dem Tisch liegt. Dann ist es zu spät und teuer.</p><div class="mt-5 inline-flex px-4 py-2 rounded-full bg-red-400/10 text-red-300 font-label text-xs">13% haben innerlich gekündigt</div></div>
|
||||
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="1"><div class="text-3xl mb-4">📊</div><h3 class="text-white text-xl font-bold mb-3">Jährliche Umfragen kommen zu spät</h3><p class="text-on-surface-variant">Die klassische Mitarbeiterbefragung einmal im Jahr ist wie ein Blutbild alle 12 Monate: Wenn man das Ergebnis hat, ist die Krankheit längst chronisch.</p><div class="mt-5 inline-flex px-4 py-2 rounded-full bg-amber-400/10 text-amber-300 font-label text-xs">73% denken monatlich an Jobwechsel</div></div>
|
||||
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="2"><div class="text-3xl mb-4">🏢</div><h3 class="text-white text-xl font-bold mb-3">Enterprise-Tools sind nichts für KMUs</h3><p class="text-on-surface-variant">Leapsome, Peakon, Qualtrics: starke Tools, aber gemacht für Konzerne. Als CEO eines KMU brauchen Sie etwas, das in 30 Sekunden funktioniert.</p><div class="mt-5 inline-flex px-4 py-2 rounded-full bg-primary/10 text-primary font-label text-xs">Ab 8€/User/Monat + Setup</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="px-6 md:px-8 py-28 bg-surface-container-low" id="solution">
|
||||
<div class="max-w-3xl mx-auto text-center mb-14 reveal">
|
||||
<div class="section-kicker text-primary text-xs font-bold mb-4">Die Lösung</div>
|
||||
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] text-white mb-5">So simpel wie ein <span class="text-primary">Daumen hoch</span></h2>
|
||||
<p class="text-lg text-on-surface-variant">Mitarbeiterpuls komprimiert das, was bei Konzernen Monate dauert, auf einen Ablauf, der kürzer ist als ein Kaffee holen.</p>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto grid md:grid-cols-3 gap-6">
|
||||
<div class="surface-card tilt-card reveal rounded-[2rem] p-8 text-center" data-tilt><div class="text-primary/30 text-6xl font-extrabold font-label">01</div><h3 class="text-white text-xl font-bold mt-4 mb-3">Mitarbeitende geben Feedback</h3><p class="text-on-surface-variant">4 Fragen, 1-10 Skala, optional Freitext. Per E-Mail-Link, anonym, vom Smartphone. Kein Login, kein Aufwand.</p><div class="mt-5 inline-flex px-4 py-2 rounded-full bg-emerald-400/10 text-emerald-300 font-label text-xs">30 Sekunden</div></div>
|
||||
<div class="surface-card tilt-card reveal rounded-[2rem] p-8 text-center" data-tilt data-delay="1"><div class="text-primary/30 text-6xl font-extrabold font-label">02</div><h3 class="text-white text-xl font-bold mt-4 mb-3">KI analysiert in Echtzeit</h3><p class="text-on-surface-variant">Die Daten fließen sofort in 5 KPIs: Engagement, Fluktuation, Führung, Belastung und Energie. Unsere KI erkennt Muster und Risiken.</p><div class="mt-5 inline-flex px-4 py-2 rounded-full bg-emerald-400/10 text-emerald-300 font-label text-xs">Sofort</div></div>
|
||||
<div class="surface-card tilt-card reveal rounded-[2rem] p-8 text-center" data-tilt data-delay="2"><div class="text-primary/30 text-6xl font-extrabold font-label">03</div><h3 class="text-white text-xl font-bold mt-4 mb-3">CEO sieht den PULS</h3><p class="text-on-surface-variant">Ein Dashboard. Fünf Ampeln. Ein PULS-Gesamtwert. KI-Handlungsempfehlungen. Trend-Verläufe. Team-Heatmap. Alles auf einen Blick.</p><div class="mt-5 inline-flex px-4 py-2 rounded-full bg-emerald-400/10 text-emerald-300 font-label text-xs">Ein Blick genügt</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="px-6 md:px-8 py-28 max-w-7xl mx-auto" id="features">
|
||||
<div class="max-w-3xl mx-auto text-center mb-14 reveal">
|
||||
<div class="section-kicker text-primary text-xs font-bold mb-4">Features</div>
|
||||
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] text-white mb-5">Alles, was ein CEO braucht. <span class="text-primary">Nichts, was er nicht braucht.</span></h2>
|
||||
<p class="text-lg text-on-surface-variant">Kein Feature-Bloat. Kein Consulting nötig. Mitarbeiterpuls konzentriert sich auf die Kennzahlen, die den Unterschied machen.</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt><div class="text-3xl mb-5">🔥</div><h3 class="text-white text-xl font-bold mb-3">5 KPI-Ampelsystem + PULS</h3><p class="text-on-surface-variant">Engagement, Fluktuation, Führung, Belastung, Energie. Dazu der PULS als Gesamtwert.</p></div>
|
||||
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="1"><div class="text-3xl mb-5">🤖</div><h3 class="text-white text-xl font-bold mb-3">KI-Handlungsempfehlungen</h3><p class="text-on-surface-variant">Keine Zahlen ohne Kontext: Die KI priorisiert Maßnahmen und sagt konkret, was als Nächstes zu tun ist.</p></div>
|
||||
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="2"><div class="text-3xl mb-5">📡</div><h3 class="text-white text-xl font-bold mb-3">Echtzeit-Dashboard für den Büro-Monitor</h3><p class="text-on-surface-variant">Eine öffentliche Ansicht zeigt dem Team den PULS live, ohne sensible Daten preiszugeben.</p></div>
|
||||
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt><div class="text-3xl mb-5">🚨</div><h3 class="text-white text-xl font-bold mb-3">Fluktuation-Frühwarnsystem</h3><p class="text-on-surface-variant">Unsere KI erkennt Muster, die auf erhöhtes Fluktuationsrisiko hindeuten, bevor die Kündigung kommt.</p></div>
|
||||
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="1"><div class="text-3xl mb-5">🔒</div><h3 class="text-white text-xl font-bold mb-3">100% anonym & DSGVO-konform</h3><p class="text-on-surface-variant">Kein Tracking, keine Rückverfolgung. Anonymität ist technisch garantiert und schafft ehrliches Feedback.</p></div>
|
||||
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="2"><div class="text-3xl mb-5">📧</div><h3 class="text-white text-xl font-bold mb-3">Automatisierte Erinnerungen</h3><p class="text-on-surface-variant">Mitarbeitende werden automatisch erinnert. Null Admin-Aufwand, kein Nachhalten per Hand.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="px-6 md:px-8 py-28 bg-surface-container-low" id="preview">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16 reveal">
|
||||
<div class="section-kicker text-primary text-xs font-bold mb-4">Dashboard Preview</div>
|
||||
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] mb-4 text-white">Ihr neues <span class="text-primary">Cockpit</span></h2>
|
||||
<p class="text-on-surface-variant max-w-2xl mx-auto text-lg">Ein Blick genügt: Der PULS, 5 KPIs, Ampelsystem, Team-Heatmap und KI-Empfehlungen auf einem Screen.</p>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-primary/10 blur-3xl rounded-[2.5rem]"></div>
|
||||
<div class="relative surface-card tilt-card reveal rounded-[2.2rem] overflow-hidden p-5 md:p-8" data-tilt>
|
||||
<div class="flex items-center gap-2 pb-4 border-b border-white/5">
|
||||
<span class="w-3 h-3 rounded-full bg-red-400"></span><span class="w-3 h-3 rounded-full bg-amber-400"></span><span class="w-3 h-3 rounded-full bg-emerald-400"></span>
|
||||
<span class="ml-3 text-xs text-on-surface-variant font-label">mitarbeiterpuls - dashboard</span>
|
||||
</div>
|
||||
<div class="grid lg:grid-cols-5 gap-4 mt-6">
|
||||
<div class="bg-[#111318] rounded-[1.4rem] border border-white/5 p-5"><div class="text-xs font-label uppercase tracking-[0.08em] text-on-surface-variant">Engagement</div><div class="text-3xl text-white font-extrabold mt-2">7.8</div><div class="text-sm text-emerald-400 mt-2 font-label">↑ 0.4</div></div>
|
||||
<div class="bg-[#111318] rounded-[1.4rem] border border-white/5 p-5"><div class="text-xs font-label uppercase tracking-[0.08em] text-on-surface-variant">Fluktuation</div><div class="text-3xl text-white font-extrabold mt-2">12%</div><div class="text-sm text-amber-300 mt-2 font-label">↓ 2.1%</div></div>
|
||||
<div class="bg-[#111318] rounded-[1.4rem] border border-white/5 p-5"><div class="text-xs font-label uppercase tracking-[0.08em] text-on-surface-variant">Führung</div><div class="text-3xl text-white font-extrabold mt-2">7.2</div><div class="text-sm text-emerald-400 mt-2 font-label">↑ 0.3</div></div>
|
||||
<div class="bg-[#111318] rounded-[1.4rem] border border-white/5 p-5"><div class="text-xs font-label uppercase tracking-[0.08em] text-on-surface-variant">Belastung</div><div class="text-3xl text-white font-extrabold mt-2">6.4</div><div class="text-sm text-red-300 mt-2 font-label">↑ 0.6</div></div>
|
||||
<div class="bg-[#111318] rounded-[1.4rem] border border-white/5 p-5"><div class="text-xs font-label uppercase tracking-[0.08em] text-on-surface-variant">Energie</div><div class="text-3xl text-white font-extrabold mt-2">7.5</div><div class="text-sm text-emerald-400 mt-2 font-label">↑ 0.2</div></div>
|
||||
</div>
|
||||
<div class="grid lg:grid-cols-[1fr_1.1fr] gap-5 mt-5">
|
||||
<div class="bg-[#111318] rounded-[1.5rem] border border-white/5 p-5">
|
||||
<div class="text-xs font-label uppercase tracking-[0.08em] text-on-surface-variant mb-4">KI-Empfehlungen</div>
|
||||
<div class="space-y-3">
|
||||
<div class="rounded-[1rem] border border-white/5 bg-white/[0.02] p-4"><p class="text-white font-semibold">Stresslevel steigt</p><p class="text-on-surface-variant text-sm mt-1">Seit 4 Wochen steigend. Team-Lead-Gespräche empfohlen.</p></div>
|
||||
<div class="rounded-[1rem] border border-white/5 bg-white/[0.02] p-4"><p class="text-white font-semibold">Fluktuationsrisiko Ops</p><p class="text-on-surface-variant text-sm mt-1">3 von 10 Mitarbeitenden im Risikobereich.</p></div>
|
||||
<div class="rounded-[1rem] border border-white/5 bg-white/[0.02] p-4"><p class="text-white font-semibold">Führung auf Allzeithoch</p><p class="text-on-surface-variant text-sm mt-1">Coaching-Programm zeigt Wirkung.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-[#111318] rounded-[1.5rem] border border-white/5 p-5 mobile-scroll">
|
||||
<div class="text-xs font-label uppercase tracking-[0.08em] text-on-surface-variant mb-4">Team-Übersicht</div>
|
||||
<div class="space-y-3 text-sm min-w-[34rem]">
|
||||
<div class="grid grid-cols-[1.2fr_repeat(4,0.7fr)_0.9fr] gap-2 text-on-surface-variant font-label text-[10px] uppercase tracking-[0.08em]"><span>Team</span><span class="text-center">Eng</span><span class="text-center">Stress</span><span class="text-center">Enrg</span><span class="text-center">Fhrg</span><span class="text-center">Risiko</span></div>
|
||||
<div class="grid grid-cols-[1.2fr_repeat(4,0.7fr)_0.9fr] gap-2 items-center"><span class="text-white">Entwicklung</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">7.8</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">5.5</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">7.2</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">8.1</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">gut</span></div>
|
||||
<div class="grid grid-cols-[1.2fr_repeat(4,0.7fr)_0.9fr] gap-2 items-center"><span class="text-white">Vertrieb</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">7.1</span><span class="text-center rounded-full bg-amber-400/10 text-amber-300 py-1">6.8</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">7.5</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">7.2</span><span class="text-center rounded-full bg-amber-400/10 text-amber-300 py-1">mäßig</span></div>
|
||||
<div class="grid grid-cols-[1.2fr_repeat(4,0.7fr)_0.9fr] gap-2 items-center"><span class="text-white">Operations</span><span class="text-center rounded-full bg-amber-400/10 text-amber-300 py-1">6.5</span><span class="text-center rounded-full bg-red-400/10 text-red-300 py-1">7.2</span><span class="text-center rounded-full bg-red-400/10 text-red-300 py-1">5.8</span><span class="text-center rounded-full bg-amber-400/10 text-amber-300 py-1">6.9</span><span class="text-center rounded-full bg-red-400/10 text-red-300 py-1">hoch</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="px-6 md:px-8 py-28 max-w-5xl mx-auto" id="comparison">
|
||||
<div class="text-center mb-14 reveal">
|
||||
<div class="section-kicker text-primary text-xs font-bold mb-4">Vergleich</div>
|
||||
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] text-white mb-4">Warum Mitarbeiterpuls <span class="text-primary">anders</span> ist</h2>
|
||||
<p class="text-on-surface-variant text-lg max-w-3xl mx-auto">Die großen Plattformen sind für Konzerne. Mitarbeiterpuls ist für Geschäftsführer, die fünf Minuten pro Woche haben.</p>
|
||||
</div>
|
||||
<div class="surface-card reveal rounded-[2rem] overflow-hidden">
|
||||
<div class="mobile-scroll">
|
||||
<table class="w-full text-left min-w-[42rem]">
|
||||
<thead class="bg-white/[0.02]">
|
||||
<tr class="border-b border-white/5">
|
||||
<th class="px-6 py-5 text-on-surface-variant font-label text-xs uppercase tracking-[0.08em]">Feature</th>
|
||||
<th class="px-6 py-5 text-on-surface-variant font-label text-xs uppercase tracking-[0.08em]">Enterprise</th>
|
||||
<th class="px-6 py-5 text-primary font-label text-xs uppercase tracking-[0.08em]">Mitarbeiterpuls</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/5">
|
||||
<tr><td class="px-6 py-5 text-white">Setup-Zeit</td><td class="px-6 py-5 text-on-surface-variant">2-6 Wochen</td><td class="px-6 py-5 text-white font-bold">5 Min.</td></tr>
|
||||
<tr><td class="px-6 py-5 text-white">Feedback-Dauer Mitarbeiter</td><td class="px-6 py-5 text-on-surface-variant">5-15 Min.</td><td class="px-6 py-5 text-white font-bold">30 Sek.</td></tr>
|
||||
<tr><td class="px-6 py-5 text-white">HR-Abteilung nötig</td><td class="px-6 py-5 text-on-surface-variant">Ja</td><td class="px-6 py-5 text-white font-bold">Nein</td></tr>
|
||||
<tr><td class="px-6 py-5 text-white">KI-Handlungsempfehlungen</td><td class="px-6 py-5 text-on-surface-variant">Teilweise</td><td class="px-6 py-5 text-white font-bold">Ja</td></tr>
|
||||
<tr><td class="px-6 py-5 text-white">Live-Monitor fürs Büro</td><td class="px-6 py-5 text-on-surface-variant">Nein</td><td class="px-6 py-5 text-white font-bold">Ja</td></tr>
|
||||
<tr><td class="px-6 py-5 text-white">Preis (50 MA)</td><td class="px-6 py-5 text-on-surface-variant">400-800€+</td><td class="px-6 py-5 text-white font-bold">200€/Mo</td></tr>
|
||||
<tr><td class="px-6 py-5 text-white">Zielgruppe</td><td class="px-6 py-5 text-on-surface-variant">HR-Teams</td><td class="px-6 py-5 text-white font-bold">CEO direkt</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="px-6 md:px-8 py-28 bg-surface-container-low" id="pricing">
|
||||
<div class="max-w-3xl mx-auto text-center mb-14 reveal">
|
||||
<div class="section-kicker text-primary text-xs font-bold mb-4">Preise</div>
|
||||
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] text-white mb-4">Ein Preis. <span class="text-primary">Keine Überraschungen.</span></h2>
|
||||
<p class="text-on-surface-variant text-lg">Günstiger als eine einzige Kündigung. Wertvoller als jede Jahresbefragung.</p>
|
||||
</div>
|
||||
<div class="max-w-2xl mx-auto surface-card tilt-card reveal rounded-[2.2rem] p-8 md:p-12 text-center relative overflow-hidden" data-tilt>
|
||||
<div class="absolute inset-x-0 -top-24 h-56 bg-primary/10 blur-3xl"></div>
|
||||
<div class="relative">
|
||||
<div class="inline-flex px-4 py-2 rounded-full bg-primary/10 text-primary font-label text-xs uppercase tracking-[0.08em]">Starter · Für KMUs</div>
|
||||
<div class="mt-6 text-white"><span class="text-2xl align-top font-label">€</span><span class="counter text-7xl font-extrabold font-label" data-counter="4">4</span></div>
|
||||
<div class="text-on-surface-variant text-lg mt-2">pro Mitarbeiter / Monat</div>
|
||||
<div class="text-on-surface-variant font-label text-sm mt-4">50 Mitarbeitende × 4€ = 200€ / Monat</div>
|
||||
<div class="mt-8 space-y-3 text-left">
|
||||
<div class="rounded-[1rem] bg-white/[0.02] border border-white/5 px-4 py-3 text-white">✓ PULS-Gesamtwert + 5 KPIs mit Ampelsystem & Trendverlauf</div>
|
||||
<div class="rounded-[1rem] bg-white/[0.02] border border-white/5 px-4 py-3 text-white">✓ KI-Handlungsempfehlungen</div>
|
||||
<div class="rounded-[1rem] bg-white/[0.02] border border-white/5 px-4 py-3 text-white">✓ Anonymes Mitarbeiter-Feedback</div>
|
||||
<div class="rounded-[1rem] bg-white/[0.02] border border-white/5 px-4 py-3 text-white">✓ Team-Heatmap & Vergleich</div>
|
||||
<div class="rounded-[1rem] bg-white/[0.02] border border-white/5 px-4 py-3 text-white">✓ Live-Monitor, E-Mail-Erinnerungen, DSGVO-konform</div>
|
||||
</div>
|
||||
<a class="mt-8 inline-flex bg-primary text-on-primary px-10 py-4 pill-btn font-bold text-lg hover:brightness-110 transition-all shadow-xl shadow-primary/20" href="#demo">Kostenlose Demo vereinbaren</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="px-6 md:px-8 py-28 max-w-7xl mx-auto" id="leadmagnet">
|
||||
<div class="grid lg:grid-cols-2 gap-10 items-center">
|
||||
<div class="surface-card tilt-card reveal rounded-[2rem] p-8" data-tilt>
|
||||
<div class="inline-flex px-4 py-2 rounded-full bg-amber-400/10 text-amber-300 font-label text-xs uppercase tracking-[0.08em]">PDF · 15 Seiten</div>
|
||||
<h3 class="text-3xl font-extrabold text-white tracking-[-0.04em] mt-6 mb-4">Der KMU-Guide für Mitarbeiter-Engagement</h3>
|
||||
<p class="text-on-surface-variant">Warum 91% der deutschen Beschäftigten nicht engagiert sind und was Geschäftsführer jetzt dagegen tun können.</p>
|
||||
<div class="flex gap-3 mt-8">
|
||||
<div class="w-14 h-20 rounded-lg bg-white/[0.04] border border-white/5"></div>
|
||||
<div class="w-14 h-20 rounded-lg bg-white/[0.04] border border-white/5 rotate-3"></div>
|
||||
<div class="w-14 h-20 rounded-lg bg-white/[0.04] border border-white/5 rotate-6"></div>
|
||||
<div class="w-14 h-20 rounded-lg bg-white/[0.04] border border-white/5 rotate-[9deg]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reveal" data-delay="1">
|
||||
<div class="section-kicker text-primary text-xs font-bold mb-4">Kostenloses Whitepaper</div>
|
||||
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] text-white mb-5">Die versteckten Kosten von Desengagement und wie KMUs sie eliminieren</h2>
|
||||
<p class="text-lg text-on-surface-variant mb-6">15 Seiten mit aktuellen Zahlen, Praxisbeispielen und einer konkreten Roadmap für Geschäftsführer, die ihre besten Leute halten wollen.</p>
|
||||
<ul class="space-y-3 text-on-surface-variant">
|
||||
<li>Aktuelle Gallup-Zahlen für Deutschland 2024/25 erklärt</li>
|
||||
<li>Die wahren Kosten einer Kündigung mit Rechenbeispiel für KMUs</li>
|
||||
<li>5 Frühwarnsignale für stille Kündigungen</li>
|
||||
<li>Konkrete Sofortmaßnahmen ohne HR-Abteilung</li>
|
||||
<li>Wie Mitarbeiterpuls diese Insights automatisiert</li>
|
||||
</ul>
|
||||
<form class="mt-8 flex flex-col sm:flex-row gap-4" onsubmit="event.preventDefault(); this.innerHTML = '<div class="text-emerald-300 font-bold">✓ Whitepaper wird an Ihre E-Mail gesendet.</div>';">
|
||||
<input class="flex-1 bg-surface-container border border-white/10 text-white px-6 py-4 pill-btn outline-none focus:border-primary" placeholder="Ihre E-Mail-Adresse" required="" type="email"/>
|
||||
<button class="magnetic bg-primary text-on-primary px-8 py-4 pill-btn font-bold hover:brightness-110 transition-all" type="submit">Whitepaper senden</button>
|
||||
</form>
|
||||
<p class="text-sm text-on-surface-variant mt-4">Kein Spam, kein Abo. Sie erhalten das PDF und optional drei Follow-up-E-Mails mit Praxis-Tipps.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="px-6 md:px-8 py-28 bg-surface-container-low" id="testimonials">
|
||||
<div class="max-w-3xl mx-auto text-center mb-14 reveal">
|
||||
<div class="section-kicker text-primary text-xs font-bold mb-4">Stimmen</div>
|
||||
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] text-white">Was Geschäftsführer <span class="text-primary">sagen</span></h2>
|
||||
</div>
|
||||
<div class="testimonial-track max-w-7xl mx-auto grid md:grid-cols-3 gap-6">
|
||||
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt><div class="text-amber-300 mb-4">★★★★★</div><p class="text-white italic">„Wir hatten vorher null Daten über die Stimmung im Team. Mitarbeiterpuls hat uns die Augen geöffnet und es hat genau eine Stunde gedauert, bis alles lief.“</p><div class="mt-6 text-on-surface-variant text-sm">Markus W. · Geschäftsführer, IT-Dienstleister (45 MA)</div></div>
|
||||
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="1"><div class="text-amber-300 mb-4">★★★★★</div><p class="text-white italic">„Die KI-Empfehlungen waren der Game-Changer. Ich wusste sofort, dass im Ops-Team etwas nicht stimmt, bevor jemand gekündigt hat.“</p><div class="mt-6 text-on-surface-variant text-sm">Sandra K. · CEO, E-Commerce-Agentur (28 MA)</div></div>
|
||||
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="2"><div class="text-amber-300 mb-4">★★★★★</div><p class="text-white italic">„Das Dashboard im Eingangsbereich hat unsere Feedbackkultur verändert. Die Leute reden jetzt über den PULS wie über den Umsatz.“</p><div class="mt-6 text-on-surface-variant text-sm">Thomas R. · Gründer, SaaS-Startup (72 MA)</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="px-6 md:px-8 py-24" id="faq">
|
||||
<div class="max-w-3xl mx-auto reveal">
|
||||
<div class="section-kicker text-primary text-xs font-bold mb-4">FAQ</div>
|
||||
<h2 class="text-3xl sm:text-4xl font-extrabold mb-12 text-white tracking-[-0.04em]">Häufig gestellte Fragen</h2>
|
||||
<div class="space-y-4">
|
||||
<details class="group surface-card reveal p-6 rounded-[1.5rem] cursor-pointer"><summary class="flex justify-between items-center font-bold list-none text-white">Wie anonym ist das Feedback wirklich?<span class="material-symbols-outlined group-open:rotate-180 transition-transform">expand_more</span></summary><p class="mt-4 text-on-surface-variant">Technisch garantiert anonym. Antworten werden ohne User-Bezug gespeichert. Bei Teams unter 5 Personen werden Daten automatisch aggregiert.</p></details>
|
||||
<details class="group surface-card reveal p-6 rounded-[1.5rem] cursor-pointer" data-delay="1"><summary class="flex justify-between items-center font-bold list-none text-white">Brauche ich eine HR-Abteilung?<span class="material-symbols-outlined group-open:rotate-180 transition-transform">expand_more</span></summary><p class="mt-4 text-on-surface-variant">Nein. Mitarbeiterpuls ist für Geschäftsführer ohne HR-Team. Setup dauert 5 Minuten, die Auswertung maximal 2 Minuten.</p></details>
|
||||
<details class="group surface-card reveal p-6 rounded-[1.5rem] cursor-pointer" data-delay="2"><summary class="flex justify-between items-center font-bold list-none text-white">Nervt das die Mitarbeitenden nicht?<span class="material-symbols-outlined group-open:rotate-180 transition-transform">expand_more</span></summary><p class="mt-4 text-on-surface-variant">30 Sekunden alle zwei Wochen. Weniger als ein Kaffee holen. Die meisten empfinden es als Wertschätzung, regelmäßig gefragt zu werden.</p></details>
|
||||
<details class="group surface-card reveal p-6 rounded-[1.5rem] cursor-pointer"><summary class="flex justify-between items-center font-bold list-none text-white">Ist Mitarbeiterpuls DSGVO-konform?<span class="material-symbols-outlined group-open:rotate-180 transition-transform">expand_more</span></summary><p class="mt-4 text-on-surface-variant">Ja. Alle Daten liegen in EU-Rechenzentren. Die Anonymisierung ist technisch umgesetzt. Ein AV-Vertrag wird bereitgestellt.</p></details>
|
||||
<details class="group surface-card reveal p-6 rounded-[1.5rem] cursor-pointer" data-delay="1"><summary class="flex justify-between items-center font-bold list-none text-white">Ab wie vielen Mitarbeitenden macht es Sinn?<span class="material-symbols-outlined group-open:rotate-180 transition-transform">expand_more</span></summary><p class="mt-4 text-on-surface-variant">Ab 10 Mitarbeitenden. Optimal für 20 bis 150 Mitarbeitende, groß genug für Relevanz und klein genug für schnelles Handeln.</p></details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="px-6 md:px-8 py-28 text-center" id="demo">
|
||||
<div class="max-w-5xl mx-auto bg-gradient-to-br from-surface-container to-surface-container-low p-10 md:p-16 rounded-[2.2rem] border border-primary/20 relative overflow-hidden reveal tilt-card" data-tilt>
|
||||
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/10 blur-[80px] -mr-32 -mt-32"></div>
|
||||
<div class="section-kicker text-primary text-xs font-bold mb-4 relative">Bereit?</div>
|
||||
<h2 class="text-3xl sm:text-4xl md:text-6xl font-extrabold mb-6 text-white tracking-[-0.05em] relative">Verpassen Sie nicht den Moment, in dem Ihr bester Mitarbeiter <span class="text-primary">innerlich kündigt.</span></h2>
|
||||
<p class="text-on-surface-variant text-xl mb-10 max-w-2xl mx-auto relative">30 Minuten Demo. Kein Verkaufsdruck. Wir zeigen Ihnen, wie Mitarbeiterpuls für Ihr Unternehmen aussehen würde.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center relative">
|
||||
<a class="magnetic bg-primary text-on-primary px-12 py-5 pill-btn font-bold text-xl hover:brightness-110 shadow-lg shadow-primary/20 active:scale-95 transition-all" href="https://calendly.com/onyva" rel="noopener" target="_blank">Jetzt Demo-Termin buchen</a>
|
||||
<a class="magnetic border border-outline-variant/30 text-on-surface px-10 py-5 pill-btn font-bold text-xl hover:bg-surface-container transition-all" href="#leadmagnet">Erstmal Whitepaper lesen</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="w-full border-t border-white/5 bg-[#0e0e0e] py-16">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center px-6 md:px-8 w-full max-w-7xl mx-auto gap-8">
|
||||
<div>
|
||||
<div class="brandmark text-2xl lowercase mb-2">m<span class="brand-i">ı</span>tarbeiterpuls</div>
|
||||
<p class="text-[#adaaaa] text-sm max-w-xs">Ein Produkt von Onyva. KI-gestütztes Mitarbeiter-Feedback für Geschäftsführer im Mittelstand.</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center md:items-end gap-4">
|
||||
<div class="flex gap-6 flex-wrap justify-center">
|
||||
<a class="text-sm text-[#adaaaa] hover:text-[#FF6B00] transition-colors" href="https://www.onyva.de/datenschutz" target="_blank">Datenschutz</a>
|
||||
<a class="text-sm text-[#adaaaa] hover:text-[#FF6B00] transition-colors" href="https://www.onyva.de/impressum" target="_blank">Impressum</a>
|
||||
<a class="text-sm text-[#adaaaa] hover:text-[#FF6B00] transition-colors" href="#">AV-Vertrag</a>
|
||||
<a class="text-sm text-[#adaaaa] hover:text-[#FF6B00] transition-colors" href="mailto:info@onyva.de">info@onyva.de</a>
|
||||
</div>
|
||||
<div class="text-sm text-[#adaaaa]">© 2026 mitarbeiterpuls. Alle Rechte vorbehalten.</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
(() => {
|
||||
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
const revealObserver = new IntersectionObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
if (!entry.isIntersecting) continue;
|
||||
entry.target.classList.add('is-visible');
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
}, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
|
||||
|
||||
document.querySelectorAll('.reveal').forEach((node) => revealObserver.observe(node));
|
||||
|
||||
const formatNumber = (value, suffix = '') => {
|
||||
if (suffix === '€') return Math.round(value).toLocaleString('de-DE') + '€';
|
||||
if (suffix === '%') return Math.round(value) + '%';
|
||||
if (suffix === ' Mrd.') return Math.round(value) + ' Mrd.';
|
||||
return Math.round(value).toLocaleString('de-DE') + suffix;
|
||||
};
|
||||
|
||||
const counterObserver = new IntersectionObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
if (!entry.isIntersecting) continue;
|
||||
const el = entry.target;
|
||||
const target = Number(el.dataset.counter || 0);
|
||||
const suffix = el.dataset.suffix || '';
|
||||
const duration = 1600;
|
||||
const start = performance.now();
|
||||
|
||||
if (prefersReduced) {
|
||||
el.textContent = formatNumber(target, suffix);
|
||||
} else {
|
||||
const tick = (now) => {
|
||||
const progress = Math.min((now - start) / duration, 1);
|
||||
const eased = 1 - Math.pow(1 - progress, 3);
|
||||
el.textContent = formatNumber(target * eased, suffix);
|
||||
if (progress < 1) requestAnimationFrame(tick);
|
||||
};
|
||||
requestAnimationFrame(tick);
|
||||
}
|
||||
counterObserver.unobserve(el);
|
||||
}
|
||||
}, { threshold: 0.4 });
|
||||
|
||||
document.querySelectorAll('.counter').forEach((counter) => counterObserver.observe(counter));
|
||||
|
||||
const marqueeStates = [];
|
||||
const setupMarquee = () => {
|
||||
if (prefersReduced) return;
|
||||
marqueeStates.length = 0;
|
||||
document.querySelectorAll('.marquee-track').forEach((track) => {
|
||||
const groups = Array.from(track.querySelectorAll('.marquee-group'));
|
||||
if (!groups.length) return;
|
||||
|
||||
while (track.scrollWidth < window.innerWidth * 2.2) {
|
||||
groups.forEach((group) => {
|
||||
const clone = group.cloneNode(true);
|
||||
clone.setAttribute('aria-hidden', 'true');
|
||||
track.appendChild(clone);
|
||||
});
|
||||
}
|
||||
|
||||
const firstGroup = track.querySelector('.marquee-group');
|
||||
if (!firstGroup) return;
|
||||
marqueeStates.push({
|
||||
track,
|
||||
width: firstGroup.getBoundingClientRect().width,
|
||||
offset: 0,
|
||||
speed: 0.45
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const animateMarquee = () => {
|
||||
if (!prefersReduced) {
|
||||
marqueeStates.forEach((state) => {
|
||||
state.offset -= state.speed;
|
||||
if (Math.abs(state.offset) >= state.width) {
|
||||
state.offset += state.width;
|
||||
}
|
||||
state.track.style.transform = `translate3d(${state.offset}px, 0, 0)`;
|
||||
});
|
||||
requestAnimationFrame(animateMarquee);
|
||||
}
|
||||
};
|
||||
|
||||
setupMarquee();
|
||||
window.addEventListener('resize', () => {
|
||||
document.querySelectorAll('.marquee-track').forEach((track) => {
|
||||
track.style.transform = 'translate3d(0,0,0)';
|
||||
});
|
||||
setupMarquee();
|
||||
});
|
||||
animateMarquee();
|
||||
|
||||
if (!prefersReduced) {
|
||||
const hero = document.querySelector('#hero');
|
||||
const parallaxNodes = document.querySelectorAll('[data-parallax]');
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
let currentX = 0;
|
||||
let currentY = 0;
|
||||
|
||||
const animateParallax = () => {
|
||||
currentX += (mouseX - currentX) * 0.08;
|
||||
currentY += (mouseY - currentY) * 0.08;
|
||||
parallaxNodes.forEach((node) => {
|
||||
const factor = Number(node.dataset.parallax || 0);
|
||||
const x = currentX * factor;
|
||||
const y = currentY * factor * 0.7;
|
||||
node.style.transform = `translate3d(${x}px, ${y}px, 0)`;
|
||||
});
|
||||
requestAnimationFrame(animateParallax);
|
||||
};
|
||||
|
||||
if (hero) {
|
||||
hero.addEventListener('mousemove', (event) => {
|
||||
const rect = hero.getBoundingClientRect();
|
||||
mouseX = ((event.clientX - rect.left) / rect.width - 0.5) * 2;
|
||||
mouseY = ((event.clientY - rect.top) / rect.height - 0.5) * 2;
|
||||
});
|
||||
hero.addEventListener('mouseleave', () => {
|
||||
mouseX = 0;
|
||||
mouseY = 0;
|
||||
});
|
||||
requestAnimationFrame(animateParallax);
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('[data-tilt]').forEach((card) => {
|
||||
if (prefersReduced) return;
|
||||
card.addEventListener('mousemove', (event) => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const px = (event.clientX - rect.left) / rect.width;
|
||||
const py = (event.clientY - rect.top) / rect.height;
|
||||
const rotateY = (px - 0.5) * 10;
|
||||
const rotateX = (0.5 - py) * 10;
|
||||
card.style.setProperty('--mx', `${px * 100}%`);
|
||||
card.style.setProperty('--my', `${py * 100}%`);
|
||||
card.style.transform = `perspective(1200px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-3px)`;
|
||||
card.classList.add('is-hovered');
|
||||
});
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.style.transform = '';
|
||||
card.classList.remove('is-hovered');
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.magnetic').forEach((button) => {
|
||||
if (prefersReduced) return;
|
||||
button.addEventListener('mousemove', (event) => {
|
||||
const rect = button.getBoundingClientRect();
|
||||
const x = event.clientX - rect.left - rect.width / 2;
|
||||
const y = event.clientY - rect.top - rect.height / 2;
|
||||
button.style.transform = `translate(${x * 0.12}px, ${y * 0.12}px)`;
|
||||
});
|
||||
button.addEventListener('mouseleave', () => {
|
||||
button.style.transform = '';
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||||
anchor.addEventListener('click', (event) => {
|
||||
const target = document.querySelector(anchor.getAttribute('href'));
|
||||
if (!target) return;
|
||||
event.preventDefault();
|
||||
target.scrollIntoView({ behavior: prefersReduced ? 'auto' : 'smooth', block: 'start' });
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user