167 lines
7.0 KiB
HTML
167 lines
7.0 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>MySyde Lead-Formular</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
|
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<main class="page">
|
|
<section class="card">
|
|
<header class="card-header">
|
|
<div class="brand">MySyde Intranet Software</div>
|
|
<h1>Ihre individuelle Döner-Tour in 60 Sekunden</h1>
|
|
<p>
|
|
Beantworten Sie vier kurze Fragen und erhalten Sie eine Tour, die exakt
|
|
zu Ihrer Organisation passt.
|
|
</p>
|
|
</header>
|
|
|
|
<div class="card-body">
|
|
<div class="form-side">
|
|
<div class="progress" aria-label="Fortschritt">
|
|
<span class="progress-bar" id="progress-bar"></span>
|
|
<div class="progress-steps">
|
|
<span class="dot active" data-step="1"></span>
|
|
<span class="dot" data-step="2"></span>
|
|
<span class="dot" data-step="3"></span>
|
|
<span class="dot" data-step="4"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="lead-form" novalidate>
|
|
<section class="step active" data-step="1">
|
|
<h2>Für wie viele Köpfe planen Sie das Portal?</h2>
|
|
<div class="option-grid">
|
|
<button type="button" class="option" data-next="2" data-value="75-150">
|
|
<i class="fa-solid fa-users"></i>
|
|
<span>75 - 150 Mitarbeiter</span>
|
|
</button>
|
|
<button type="button" class="option" data-next="2" data-value="151-300">
|
|
<i class="fa-solid fa-users"></i>
|
|
<span>151 - 300 Mitarbeiter</span>
|
|
</button>
|
|
<button type="button" class="option" data-next="2" data-value="301-750">
|
|
<i class="fa-solid fa-users"></i>
|
|
<span>301 - 750 Mitarbeiter</span>
|
|
</button>
|
|
<button type="button" class="option" data-next="2" data-value="750+">
|
|
<i class="fa-solid fa-users"></i>
|
|
<span>Über 750 Mitarbeiter</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="step" data-step="2">
|
|
<h2>Was ist die größte Hürde, die wir für Sie einreißen sollen?</h2>
|
|
<div class="option-grid">
|
|
<button type="button" class="option" data-next="3" data-value="Informationsfluss">
|
|
<i class="fa-solid fa-bullhorn"></i>
|
|
<span>Informationsfluss (News erreichen niemanden)</span>
|
|
</button>
|
|
<button type="button" class="option" data-next="3" data-value="Wissenschaos">
|
|
<i class="fa-solid fa-book"></i>
|
|
<span>Wissenschaos (Infos sind verstreut)</span>
|
|
</button>
|
|
<button type="button" class="option" data-next="3" data-value="Buerokratie">
|
|
<i class="fa-solid fa-gears"></i>
|
|
<span>Bürokratie (Prozesse dauern ewig)</span>
|
|
</button>
|
|
<button type="button" class="option" data-next="3" data-value="PC-Huerde">
|
|
<i class="fa-solid fa-mobile-screen"></i>
|
|
<span>PC-Hürde (Gewerbliche Kollegen erreichen)</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="step" data-step="3">
|
|
<h2>Mit welchen Systemen soll MySyde Hand in Hand arbeiten?</h2>
|
|
<div class="option-grid three">
|
|
<button type="button" class="option" data-next="4" data-value="Microsoft 365">
|
|
<i class="fa-brands fa-microsoft"></i>
|
|
<span>Microsoft 365</span>
|
|
</button>
|
|
<button type="button" class="option" data-next="4" data-value="Personio">
|
|
<i class="fa-solid fa-user-tie"></i>
|
|
<span>Personio</span>
|
|
</button>
|
|
<button type="button" class="option" data-next="4" data-value="Server/sonstige">
|
|
<i class="fa-solid fa-server"></i>
|
|
<span>Eigene Server / Sonstige</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="step" data-step="4">
|
|
<div class="reward">
|
|
<div>
|
|
<h2>Fast geschafft! Wir bereiten Ihre individuelle Tour vor.</h2>
|
|
<p>
|
|
Geben Sie Ihre Kontaktdaten ein, damit wir die passende Demo
|
|
zusammenstellen konnen.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="input-grid">
|
|
<label>
|
|
Vorname
|
|
<input type="text" name="firstname" placeholder="Ihr Vorname" required />
|
|
</label>
|
|
<label>
|
|
Geschaftliche E-Mail
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
placeholder="Ihre geschaftliche E-Mail-Adresse"
|
|
required
|
|
/>
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="primary-btn">
|
|
Jetzt personliche Tour starten
|
|
</button>
|
|
<p class="footnote">
|
|
Mit dem Absenden akzeptieren Sie unsere Datenschutzhinweise.
|
|
</p>
|
|
</section>
|
|
</form>
|
|
</div>
|
|
|
|
<aside class="preview-side" aria-hidden="true">
|
|
<div class="preview-header">
|
|
<span class="pill">Ihr eigener Salesroom</span>
|
|
<h3>Alles, was Sie fur Ihre Entscheidung brauchen.</h3>
|
|
<p>
|
|
Kostenrechner, ROI-Check, Ablaufplan, Demosystem und Case Studies -
|
|
exklusiv fur Ihre Organisation vorkonfiguriert.
|
|
</p>
|
|
</div>
|
|
<div class="laptop">
|
|
<div class="laptop-screen">
|
|
<img src="Screenshot1.png" alt="Vorschau Salesroom" />
|
|
<div class="pixel-overlay"></div>
|
|
<div class="cta-glow">
|
|
Fulle aus - erhalte deinen Salesroom
|
|
</div>
|
|
</div>
|
|
<div class="laptop-base"></div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div class="toast" id="toast">Vielen Dank! Wir melden uns in Kurze.</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|