567 lines
44 KiB
PHP
567 lines
44 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mailwolt — Self-Hosted Mail Server Control Panel</title>
|
|
<meta name="description" content="Mailwolt ist ein modernes Control Panel für selbst gehostete Mailserver. Mailboxen, Domains, Sicherheit, API und Webhooks — alles in einer Oberfläche.">
|
|
<style>
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
:root{
|
|
--bg0:#07070e;--bg1:#0d0d18;--bg2:#111120;--bg3:#181828;--bg4:#1e1e30;
|
|
--b1:rgba(255,255,255,.06);--b2:rgba(255,255,255,.1);
|
|
--t1:#f0f0f8;--t2:#b8b8d0;--t3:#7878a0;--t4:#4a4a68;
|
|
--v:#7c3aed;--v2:#a78bfa;--vg:linear-gradient(135deg,#7c3aed,#6d28d9);
|
|
--green:#10b981;--amber:#f59e0b;--red:#ef4444;--blue:#3b82f6;
|
|
--r:10px;
|
|
}
|
|
html{scroll-behavior:smooth}
|
|
body{background:var(--bg0);color:var(--t2);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.6;overflow-x:hidden}
|
|
a{color:inherit;text-decoration:none}
|
|
img{display:block;max-width:100%}
|
|
|
|
/* ── Layout ── */
|
|
.container{max-width:1140px;margin:0 auto;padding:0 24px}
|
|
.section{padding:96px 0}
|
|
|
|
/* ── Nav ── */
|
|
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;background:rgba(7,7,14,.8);backdrop-filter:blur(16px);border-bottom:1px solid var(--b1)}
|
|
.nav-logo{display:flex;align-items:center;gap:9px}
|
|
.nav-logo-icon{width:28px;height:28px;background:var(--vg);border-radius:7px;display:flex;align-items:center;justify-content:center}
|
|
.nav-logo-text{font-size:14px;font-weight:700;color:var(--t1);letter-spacing:.8px}
|
|
.nav-links{display:flex;align-items:center;gap:28px}
|
|
.nav-links a{font-size:13px;color:var(--t3);transition:color .15s}
|
|
.nav-links a:hover{color:var(--t1)}
|
|
.nav-cta{display:flex;align-items:center;gap:10px}
|
|
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;border:none}
|
|
.btn-ghost{background:transparent;color:var(--t2);border:1px solid var(--b2)}
|
|
.btn-ghost:hover{border-color:var(--b2);background:var(--bg3);color:var(--t1)}
|
|
.btn-primary{background:var(--vg);color:#fff;box-shadow:0 0 20px rgba(124,58,237,.3)}
|
|
.btn-primary:hover{opacity:.9;box-shadow:0 0 28px rgba(124,58,237,.45)}
|
|
.btn-lg{padding:13px 28px;font-size:14.5px;border-radius:10px}
|
|
.btn-outline-lg{padding:12px 26px;font-size:14px;border-radius:10px;border:1px solid var(--b2);color:var(--t2);background:transparent}
|
|
.btn-outline-lg:hover{border-color:var(--v2);color:var(--v2)}
|
|
|
|
/* ── Hero ── */
|
|
.hero{padding:160px 0 96px;text-align:center;position:relative;overflow:hidden}
|
|
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(124,58,237,.18) 0%,transparent 70%);pointer-events:none}
|
|
.hero-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.25);border-radius:20px;font-size:12px;color:var(--v2);margin-bottom:24px}
|
|
.hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--v2);animation:pulse 2s infinite}
|
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
|
|
h1{font-size:clamp(36px,5vw,64px);font-weight:800;line-height:1.1;color:var(--t1);letter-spacing:-1.5px;margin-bottom:24px}
|
|
.gradient-text{background:linear-gradient(135deg,#a78bfa 0%,#7c3aed 40%,#c4b5fd 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
|
.hero p{font-size:clamp(16px,2vw,19px);color:var(--t3);max-width:580px;margin:0 auto 40px;line-height:1.7}
|
|
.hero-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
|
|
.hero-meta{margin-top:56px;display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}
|
|
.hero-meta-item{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t4)}
|
|
.hero-meta-item svg{color:var(--green)}
|
|
|
|
/* ── Mockup ── */
|
|
.mockup-wrap{margin-top:64px;position:relative}
|
|
.mockup-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:80%;height:1px;background:linear-gradient(90deg,transparent,rgba(124,58,237,.6),transparent)}
|
|
.mockup{background:var(--bg2);border:1px solid var(--b1);border-radius:14px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 0 1px rgba(124,58,237,.08)}
|
|
.mockup-bar{height:38px;background:var(--bg3);border-bottom:1px solid var(--b1);display:flex;align-items:center;padding:0 14px;gap:6px}
|
|
.mockup-dot{width:10px;height:10px;border-radius:50%}
|
|
.mockup-url{flex:1;height:22px;background:var(--bg4);border-radius:5px;margin:0 12px;display:flex;align-items:center;padding:0 10px;font-size:10.5px;color:var(--t4);font-family:monospace}
|
|
.mockup-body{display:grid;grid-template-columns:200px 1fr;min-height:340px}
|
|
.mockup-sidebar{background:var(--bg2);border-right:1px solid var(--b1);padding:14px 10px}
|
|
.mock-nav-label{font-size:9px;color:var(--t4);text-transform:uppercase;letter-spacing:.8px;padding:0 8px;margin:10px 0 4px}
|
|
.mock-nav-item{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:6px;font-size:11px;color:var(--t3);margin-bottom:1px}
|
|
.mock-nav-item.active{background:rgba(124,58,237,.12);color:var(--v2)}
|
|
.mock-dot{width:8px;height:8px;border-radius:50%;background:var(--bg4);border:1px solid var(--b2)}
|
|
.mock-dot.active{background:var(--v);border-color:var(--v)}
|
|
.mockup-content{padding:16px}
|
|
.mock-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
|
|
.mock-stat{background:var(--bg3);border:1px solid var(--b1);border-radius:8px;padding:10px 12px}
|
|
.mock-stat-val{font-size:18px;font-weight:700;color:var(--t1)}
|
|
.mock-stat-label{font-size:9.5px;color:var(--t4);margin-top:2px}
|
|
.mock-table{background:var(--bg3);border:1px solid var(--b1);border-radius:8px;overflow:hidden}
|
|
.mock-table-head{display:grid;grid-template-columns:2fr 1.5fr 1fr 80px;padding:7px 12px;border-bottom:1px solid var(--b1)}
|
|
.mock-th{font-size:9.5px;color:var(--t4);text-transform:uppercase;letter-spacing:.5px}
|
|
.mock-row{display:grid;grid-template-columns:2fr 1.5fr 1fr 80px;padding:8px 12px;border-bottom:1px solid var(--b1);align-items:center}
|
|
.mock-row:last-child{border-bottom:none}
|
|
.mock-cell{font-size:10.5px;color:var(--t2)}
|
|
.mock-badge{font-size:9px;padding:2px 7px;border-radius:4px;font-weight:500;display:inline-block}
|
|
.mock-badge.ok{background:rgba(16,185,129,.1);color:#34d399;border:1px solid rgba(16,185,129,.2)}
|
|
.mock-badge.warn{background:rgba(251,191,36,.1);color:#fcd34d;border:1px solid rgba(251,191,36,.2)}
|
|
|
|
/* ── Badges strip ── */
|
|
.strip{padding:28px 0;border-top:1px solid var(--b1);border-bottom:1px solid var(--b1);overflow:hidden}
|
|
.strip-inner{display:flex;gap:40px;align-items:center;justify-content:center;flex-wrap:wrap}
|
|
.strip-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t4)}
|
|
.strip-icon{width:18px;height:18px;flex-shrink:0}
|
|
|
|
/* ── Features ── */
|
|
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
|
|
@media(max-width:860px){.features-grid{grid-template-columns:repeat(2,1fr)}}
|
|
@media(max-width:560px){.features-grid{grid-template-columns:1fr}}
|
|
.feature-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r);padding:24px;transition:border-color .2s,transform .2s}
|
|
.feature-card:hover{border-color:rgba(124,58,237,.3);transform:translateY(-2px)}
|
|
.feature-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
|
|
.feature-title{font-size:14.5px;font-weight:600;color:var(--t1);margin-bottom:8px}
|
|
.feature-desc{font-size:13px;color:var(--t3);line-height:1.6}
|
|
.feature-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}
|
|
.tag{font-size:10.5px;padding:2px 8px;border-radius:4px;background:var(--bg4);border:1px solid var(--b1);color:var(--t4)}
|
|
|
|
/* ── API Block ── */
|
|
.api-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
|
|
@media(max-width:760px){.api-grid{grid-template-columns:1fr}}
|
|
.code-block{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden}
|
|
.code-header{padding:10px 14px;background:var(--bg3);border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between}
|
|
.code-lang{font-size:10.5px;color:var(--t4);font-family:monospace}
|
|
.code-dots{display:flex;gap:5px}
|
|
.code-dot{width:9px;height:9px;border-radius:50%}
|
|
pre.code{padding:18px;font-family:'SF Mono',ui-monospace,monospace;font-size:12px;line-height:1.75;color:var(--t2);overflow-x:auto}
|
|
.c-key{color:#93c5fd}.c-str{color:#86efac}.c-num{color:#fcd34d}.c-op{color:var(--t4)}.c-com{color:var(--t4);font-style:italic}.c-method{color:#c4b5fd}
|
|
|
|
/* ── Security ── */
|
|
.security-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
|
|
@media(max-width:640px){.security-grid{grid-template-columns:1fr}}
|
|
.sec-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r);padding:20px 22px;display:flex;gap:14px}
|
|
.sec-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center}
|
|
.sec-card-title{font-size:13.5px;font-weight:600;color:var(--t1);margin-bottom:4px}
|
|
.sec-card-desc{font-size:12.5px;color:var(--t3);line-height:1.5}
|
|
|
|
/* ── Section headings ── */
|
|
.section-eyebrow{font-size:11.5px;color:var(--v2);font-weight:600;letter-spacing:.8px;text-transform:uppercase;margin-bottom:12px}
|
|
.section-title{font-size:clamp(26px,3.5vw,40px);font-weight:800;color:var(--t1);letter-spacing:-1px;line-height:1.15;margin-bottom:16px}
|
|
.section-sub{font-size:16px;color:var(--t3);max-width:520px;line-height:1.7}
|
|
|
|
/* ── Pricing ── */
|
|
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
|
|
@media(max-width:760px){.pricing-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}}
|
|
.price-card{background:var(--bg2);border:1px solid var(--b1);border-radius:12px;padding:28px 24px;position:relative}
|
|
.price-card.featured{background:linear-gradient(160deg,rgba(124,58,237,.12),var(--bg2));border-color:rgba(124,58,237,.35);box-shadow:0 0 40px rgba(124,58,237,.1)}
|
|
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--vg);color:#fff;font-size:10.5px;font-weight:700;padding:3px 14px;border-radius:20px;letter-spacing:.5px;white-space:nowrap}
|
|
.price-plan{font-size:12px;color:var(--t4);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
|
|
.price-amount{font-size:36px;font-weight:800;color:var(--t1);line-height:1}
|
|
.price-amount span{font-size:16px;color:var(--t3);font-weight:400}
|
|
.price-desc{font-size:12.5px;color:var(--t4);margin:10px 0 20px;line-height:1.5}
|
|
.price-divider{height:1px;background:var(--b1);margin:20px 0}
|
|
.price-features{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
|
|
.price-features li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--t3)}
|
|
.price-features li svg{flex-shrink:0;margin-top:1px}
|
|
.check-green{color:var(--green)}
|
|
.check-gray{color:var(--t4)}
|
|
|
|
/* ── CTA ── */
|
|
.cta-section{padding:96px 0;text-align:center;position:relative;overflow:hidden}
|
|
.cta-section::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(124,58,237,.5),transparent)}
|
|
.cta-glow{position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 50% 120%,rgba(124,58,237,.12),transparent);pointer-events:none}
|
|
|
|
/* ── Footer ── */
|
|
footer{padding:40px 0;border-top:1px solid var(--b1)}
|
|
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
|
|
.footer-links{display:flex;gap:20px}
|
|
.footer-links a{font-size:12.5px;color:var(--t4);transition:color .15s}
|
|
.footer-links a:hover{color:var(--t2)}
|
|
|
|
/* ── Theme toggle ── */
|
|
body.light{
|
|
--bg0:#f5f5f9;--bg1:#eeeeF4;--bg2:#ffffff;--bg3:#f0f0f6;--bg4:#e8e8f0;
|
|
--b1:rgba(0,0,0,.07);--b2:rgba(0,0,0,.12);
|
|
--t1:#0f0f1a;--t2:#2a2a40;--t3:#5a5a78;--t4:#9090b0;
|
|
}
|
|
body.light nav{background:rgba(245,245,249,.88)}
|
|
body.light .mockup{box-shadow:0 20px 60px rgba(0,0,0,.12)}
|
|
.theme-btn{background:var(--bg3);border:1px solid var(--b2);border-radius:7px;padding:5px 10px;cursor:pointer;color:var(--t3);font-size:12px;display:flex;align-items:center;gap:5px;transition:all .15s}
|
|
.theme-btn:hover{color:var(--t1)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ═══ NAV ═══ -->
|
|
<nav>
|
|
<div class="nav-logo">
|
|
<div class="nav-logo-icon">
|
|
<svg width="14" height="14" viewBox="0 0 18 18" fill="none">
|
|
<path d="M9 2L15.5 5.5v7L9 16 2.5 12.5v-7L9 2Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
|
|
<path d="M9 6L12 7.5v3L9 12 6 10.5v-3L9 6Z" fill="white" opacity=".9"/>
|
|
</svg>
|
|
</div>
|
|
<span class="nav-logo-text">MAILWOLT</span>
|
|
</div>
|
|
<div class="nav-links">
|
|
<a href="#features">Features</a>
|
|
<a href="#api">API</a>
|
|
<a href="#security">Sicherheit</a>
|
|
<a href="#pricing">Preise</a>
|
|
</div>
|
|
<div class="nav-cta">
|
|
<button class="theme-btn" onclick="document.body.classList.toggle('light')">
|
|
<svg width="12" height="12" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="3" stroke="currentColor" stroke-width="1.3"/><path d="M7 1v1.5M7 11.5V13M1 7h1.5M11.5 7H13M2.9 2.9l1.1 1.1M10 10l1.1 1.1M2.9 11.1l1.1-1.1M10 4l1.1-1.1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
|
Theme
|
|
</button>
|
|
<a href="{{ route('login') }}" class="btn btn-ghost" style="padding:6px 14px;font-size:12.5px">Login</a>
|
|
<a href="{{ route('login') }}" class="btn btn-primary" style="padding:6px 14px;font-size:12.5px">Demo →</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ═══ HERO ═══ -->
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="hero-eyebrow">
|
|
<div class="hero-eyebrow-dot"></div>
|
|
Self-Hosted · Open Source · Production Ready
|
|
</div>
|
|
<h1>Dein Mailserver.<br><span class="gradient-text">Vollständig unter Kontrolle.</span></h1>
|
|
<p>Mailwolt ist ein modernes Control Panel für selbst gehostete Mailserver. Verwalte Mailboxen, Domains, Aliases, SSL-Zertifikate und mehr — mit einer sauberen, schnellen Oberfläche.</p>
|
|
<div class="hero-actions">
|
|
<a href="{{ route('login') }}" class="btn btn-primary btn-lg">
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v12M1 7h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
Jetzt starten
|
|
</a>
|
|
<a href="#features" class="btn-outline-lg btn">Features ansehen</a>
|
|
</div>
|
|
|
|
<div class="hero-meta">
|
|
<div class="hero-meta-item">
|
|
<svg class="strip-icon" viewBox="0 0 14 14" fill="none"><path d="M7 1v12M1 7h12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
|
MIT Lizenz
|
|
</div>
|
|
<div class="hero-meta-item">
|
|
<svg class="strip-icon" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="6" stroke="currentColor" stroke-width="1.3"/><path d="M4.5 7l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
Laravel + Livewire
|
|
</div>
|
|
<div class="hero-meta-item">
|
|
<svg class="strip-icon" viewBox="0 0 14 14" fill="none"><rect x="2" y="4" width="10" height="7" rx="1.5" stroke="currentColor" stroke-width="1.3"/><path d="M5 4V3a2 2 0 0 1 4 0v1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
|
2FA + Rollen
|
|
</div>
|
|
<div class="hero-meta-item">
|
|
<svg class="strip-icon" viewBox="0 0 14 14" fill="none"><path d="M3 7a4 4 0 1 0 8 0A4 4 0 0 0 3 7Z" stroke="currentColor" stroke-width="1.3"/><path d="M7 4v3l2 2" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
|
REST API v1
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mockup -->
|
|
<div class="mockup-wrap">
|
|
<div class="mockup-glow"></div>
|
|
<div class="mockup">
|
|
<div class="mockup-bar">
|
|
<div class="mockup-dot" style="background:#ff5f56"></div>
|
|
<div class="mockup-dot" style="background:#ffbd2e"></div>
|
|
<div class="mockup-dot" style="background:#27c93f"></div>
|
|
<div class="mockup-url">mail.example.com/dashboard</div>
|
|
</div>
|
|
<div class="mockup-body">
|
|
<div class="mockup-sidebar">
|
|
<div class="mock-nav-label">Mail</div>
|
|
<div class="mock-nav-item active"><div class="mock-dot active"></div>Mailboxen</div>
|
|
<div class="mock-nav-item"><div class="mock-dot"></div>Aliases</div>
|
|
<div class="mock-nav-item"><div class="mock-dot"></div>Domains</div>
|
|
<div class="mock-nav-label">Sicherheit</div>
|
|
<div class="mock-nav-item"><div class="mock-dot"></div>SSL/TLS</div>
|
|
<div class="mock-nav-item"><div class="mock-dot"></div>Fail2ban</div>
|
|
<div class="mock-nav-label">System</div>
|
|
<div class="mock-nav-item"><div class="mock-dot"></div>API Keys</div>
|
|
<div class="mock-nav-item"><div class="mock-dot"></div>Webhooks</div>
|
|
<div class="mock-nav-item"><div class="mock-dot"></div>Benutzer</div>
|
|
</div>
|
|
<div class="mockup-content">
|
|
<div class="mock-stat-row">
|
|
<div class="mock-stat"><div class="mock-stat-val" style="color:#a78bfa">248</div><div class="mock-stat-label">Mailboxen</div></div>
|
|
<div class="mock-stat"><div class="mock-stat-val" style="color:#34d399">12</div><div class="mock-stat-label">Domains</div></div>
|
|
<div class="mock-stat"><div class="mock-stat-val" style="color:#60a5fa">91</div><div class="mock-stat-label">Aliases</div></div>
|
|
<div class="mock-stat"><div class="mock-stat-val" style="color:#fcd34d">3</div><div class="mock-stat-label">Queued</div></div>
|
|
</div>
|
|
<div class="mock-table">
|
|
<div class="mock-table-head">
|
|
<div class="mock-th">E-Mail</div>
|
|
<div class="mock-th">Domain</div>
|
|
<div class="mock-th">Quota</div>
|
|
<div class="mock-th">Status</div>
|
|
</div>
|
|
<div class="mock-row">
|
|
<div class="mock-cell">alice@example.com</div>
|
|
<div class="mock-cell" style="color:var(--t4)">example.com</div>
|
|
<div class="mock-cell" style="color:var(--t4)">2.1 / 5 GB</div>
|
|
<div class="mock-cell"><span class="mock-badge ok">Aktiv</span></div>
|
|
</div>
|
|
<div class="mock-row">
|
|
<div class="mock-cell">bob@company.io</div>
|
|
<div class="mock-cell" style="color:var(--t4)">company.io</div>
|
|
<div class="mock-cell" style="color:var(--t4)">890 MB / 2 GB</div>
|
|
<div class="mock-cell"><span class="mock-badge ok">Aktiv</span></div>
|
|
</div>
|
|
<div class="mock-row">
|
|
<div class="mock-cell">dev@startup.dev</div>
|
|
<div class="mock-cell" style="color:var(--t4)">startup.dev</div>
|
|
<div class="mock-cell" style="color:var(--t4)">100 MB / 1 GB</div>
|
|
<div class="mock-cell"><span class="mock-badge warn">Inaktiv</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══ STRIP ═══ -->
|
|
<div class="strip">
|
|
<div class="container">
|
|
<div class="strip-inner">
|
|
<div class="strip-item"><svg class="strip-icon" viewBox="0 0 14 14" fill="none"><rect x="1" y="3" width="12" height="8" rx="1.5" stroke="currentColor" stroke-width="1.3"/><path d="M1 5.5l6 3.5 6-3.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>Postfix + Dovecot</div>
|
|
<div class="strip-item"><svg class="strip-icon" viewBox="0 0 14 14" fill="none"><path d="M7 1l1.5 4.5H13l-3.7 2.7 1.4 4.3L7 9.8l-3.7 2.7 1.4-4.3L1 5.5h4.5L7 1Z" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/></svg>Rspamd Spamfilter</div>
|
|
<div class="strip-item"><svg class="strip-icon" viewBox="0 0 14 14" fill="none"><rect x="2" y="4" width="10" height="7" rx="1.5" stroke="currentColor" stroke-width="1.3"/><path d="M5 4V3a2 2 0 0 1 4 0v1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>Let's Encrypt SSL</div>
|
|
<div class="strip-item"><svg class="strip-icon" viewBox="0 0 14 14" fill="none"><path d="M5 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" stroke="currentColor" stroke-width="1.3"/><path d="M8 5.5L12.5 10" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>REST API v1</div>
|
|
<div class="strip-item"><svg class="strip-icon" viewBox="0 0 14 14" fill="none"><path d="M1.5 3.5h11v7a1.5 1.5 0 0 1-1.5 1.5H3A1.5 1.5 0 0 1 1.5 10.5v-7Z" stroke="currentColor" stroke-width="1.3"/><path d="M1.5 3.5l5.5 4 5.5-4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>Mail-Sandbox</div>
|
|
<div class="strip-item"><svg class="strip-icon" viewBox="0 0 14 14" fill="none"><path d="M7 1l1.5 3h3l-2.5 2 1 3L7 7.5 4 9l1-3L2.5 4h3L7 1Z" stroke="currentColor" stroke-width="1.1"/></svg>DKIM / SPF / DMARC</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ FEATURES ═══ -->
|
|
<section class="section" id="features">
|
|
<div class="container">
|
|
<div style="margin-bottom:48px">
|
|
<div class="section-eyebrow">Features</div>
|
|
<h2 class="section-title">Alles was du brauchst.<br>Nichts was du nicht brauchst.</h2>
|
|
<p class="section-sub">Mailwolt bündelt alle Werkzeuge um einen Mailserver professionell zu betreiben — ohne sich in Details zu verlieren.</p>
|
|
</div>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon" style="background:rgba(124,58,237,.12)">
|
|
<svg width="18" height="18" viewBox="0 0 16 16" fill="none"><rect x="1.5" y="3.5" width="13" height="9" rx="1.5" stroke="#a78bfa" stroke-width="1.3"/><path d="M1.5 5.5l6.5 4 6.5-4" stroke="#a78bfa" stroke-width="1.3" stroke-linecap="round"/></svg>
|
|
</div>
|
|
<div class="feature-title">Mailboxen & Aliases</div>
|
|
<div class="feature-desc">Erstelle und verwalte Postfächer, Weiterleitungen und Gruppen-Aliases für beliebig viele Domains. Quota, Limits und Login-Rechte pro Box konfigurierbar.</div>
|
|
<div class="feature-tags"><span class="tag">IMAP</span><span class="tag">Quota</span><span class="tag">Gruppen</span><span class="tag">Catch-All</span></div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon" style="background:rgba(59,130,246,.1)">
|
|
<svg width="18" height="18" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="#60a5fa" stroke-width="1.3"/><path d="M8 4v1M8 11v1M4 8h1M11 8h1" stroke="#60a5fa" stroke-width="1.3" stroke-linecap="round"/></svg>
|
|
</div>
|
|
<div class="feature-title">Multi-Domain</div>
|
|
<div class="feature-desc">Mehrere Domains auf einem Server. DKIM-Schlüssel, SPF und DMARC pro Domain verwalten — mit DNS-Vorlagen für schnelles Setup.</div>
|
|
<div class="feature-tags"><span class="tag">DKIM</span><span class="tag">SPF</span><span class="tag">DMARC</span><span class="tag">DNSSEC</span></div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon" style="background:rgba(16,185,129,.1)">
|
|
<svg width="18" height="18" viewBox="0 0 16 16" fill="none"><rect x="3" y="7" width="10" height="7" rx="1.5" stroke="#34d399" stroke-width="1.3"/><path d="M5 7V5a3 3 0 0 1 6 0v2" stroke="#34d399" stroke-width="1.3" stroke-linecap="round"/><circle cx="8" cy="10.5" r="1" fill="#34d399"/></svg>
|
|
</div>
|
|
<div class="feature-title">Zwei-Faktor-Auth</div>
|
|
<div class="feature-desc">TOTP-basierte 2FA für jeden Account. Recovery-Codes für Notfälle, Setup-Wizard mit QR-Code, forcierbar für Admins.</div>
|
|
<div class="feature-tags"><span class="tag">TOTP</span><span class="tag">Google Auth</span><span class="tag">Authy</span></div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon" style="background:rgba(239,68,68,.1)">
|
|
<svg width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M8 1.5L13.5 4v4c0 3-2.5 5.5-5.5 6.5C5 13.5 2.5 11 2.5 8V4L8 1.5Z" stroke="#f87171" stroke-width="1.3" stroke-linejoin="round"/><path d="M5.5 8l2 2 3-3" stroke="#f87171" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</div>
|
|
<div class="feature-title">Sicherheit & Monitoring</div>
|
|
<div class="feature-desc">Fail2ban-Integration mit Whitelist/Blacklist-Verwaltung, SSL-Zertifikats-Übersicht, TLS-Cipher-Konfiguration und Audit-Logs.</div>
|
|
<div class="feature-tags"><span class="tag">Fail2ban</span><span class="tag">Let's Encrypt</span><span class="tag">Audit Log</span></div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon" style="background:rgba(251,191,36,.1)">
|
|
<svg width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M5 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" stroke="#fcd34d" stroke-width="1.3"/><path d="M8.5 7.5L13 12" stroke="#fcd34d" stroke-width="1.3" stroke-linecap="round"/></svg>
|
|
</div>
|
|
<div class="feature-title">REST API & Webhooks</div>
|
|
<div class="feature-desc">Vollständige REST API v1 mit Scope-basierter Authentifizierung via API-Keys. Webhooks für Echtzeit-Events mit HMAC-SHA256 Signierung.</div>
|
|
<div class="feature-tags"><span class="tag">REST API</span><span class="tag">Webhooks</span><span class="tag">HMAC</span><span class="tag">Scopes</span></div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon" style="background:rgba(124,58,237,.1)">
|
|
<svg width="18" height="18" viewBox="0 0 16 16" fill="none"><rect x="1.5" y="3.5" width="13" height="9" rx="1.5" stroke="#a78bfa" stroke-width="1.3"/><path d="M4.5 8h3M4.5 10h5" stroke="#a78bfa" stroke-width="1.3" stroke-linecap="round"/></svg>
|
|
</div>
|
|
<div class="feature-title">Mail-Sandbox</div>
|
|
<div class="feature-desc">Fange ausgehende E-Mails ab und betrachte sie im eingebauten E-Mail-Client — ideal für Entwicklung und Tests. HTML-Preview, Plain-Text und Raw-Header direkt im Browser.</div>
|
|
<div class="feature-tags"><span class="tag">Postfix-Pipe</span><span class="tag">HTML Preview</span><span class="tag">Dev-Mode</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══ API ═══ -->
|
|
<section class="section" id="api" style="background:var(--bg1);border-top:1px solid var(--b1);border-bottom:1px solid var(--b1)">
|
|
<div class="container">
|
|
<div class="api-grid">
|
|
<div>
|
|
<div class="section-eyebrow">Developer API</div>
|
|
<h2 class="section-title" style="font-size:clamp(24px,3vw,36px)">Automatisiere alles.</h2>
|
|
<p class="section-sub" style="font-size:15px">Die REST API v1 gibt dir vollständigen Zugriff auf Mailboxen, Aliases und Domains. Erstelle API Keys mit granularen Scopes — read-only oder mit Schreibrechten.</p>
|
|
<div style="margin-top:28px;display:flex;flex-direction:column;gap:10px">
|
|
@foreach([
|
|
['Scope-basierte Keys', 'Jeder Key hat nur die Rechte die er braucht'],
|
|
['Sandbox-Modus', 'Schreiboperationen simulieren ohne DB-Änderungen'],
|
|
['HMAC-Webhooks', 'Events in Echtzeit an externe Systeme senden'],
|
|
['/api/v1/me', 'Token-Identität und Scopes prüfen'],
|
|
] as [$title, $desc])
|
|
<div style="display:flex;gap:10px;align-items:flex-start">
|
|
<svg width="16" height="16" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;margin-top:1px"><circle cx="7" cy="7" r="6" stroke="#34d399" stroke-width="1.2"/><path d="M4.5 7l2 2 3-3" stroke="#34d399" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<div><span style="font-size:13px;font-weight:600;color:var(--t1)">{{ $title }}</span><span style="font-size:12.5px;color:var(--t4)"> — {{ $desc }}</span></div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<div class="code-dots">
|
|
<div class="code-dot" style="background:#ff5f56"></div>
|
|
<div class="code-dot" style="background:#ffbd2e"></div>
|
|
<div class="code-dot" style="background:#27c93f"></div>
|
|
</div>
|
|
<span class="code-lang">bash — API Example</span>
|
|
</div>
|
|
<pre class="code"><span class="c-com"># Mailbox erstellen</span>
|
|
<span class="c-method">curl</span> -X POST <span class="c-str">https://mail.example.com/api/v1/mailboxes</span> \
|
|
-H <span class="c-str">"Authorization: Bearer mwt_..."</span> \
|
|
-H <span class="c-str">"Content-Type: application/json"</span> \
|
|
-d <span class="c-str">'{
|
|
"email": "alice@example.com",
|
|
"password": "sicher123",
|
|
"quota_mb": 2048
|
|
}'</span>
|
|
|
|
<span class="c-com"># Antwort</span>
|
|
<span class="c-op">{</span>
|
|
<span class="c-key">"data"</span>: <span class="c-op">{</span>
|
|
<span class="c-key">"id"</span>: <span class="c-num">42</span>,
|
|
<span class="c-key">"email"</span>: <span class="c-str">"alice@example.com"</span>,
|
|
<span class="c-key">"quota_mb"</span>: <span class="c-num">2048</span>,
|
|
<span class="c-key">"is_active"</span>: <span class="c-num">true</span>
|
|
<span class="c-op">}</span>
|
|
<span class="c-op">}</span></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══ SECURITY ═══ -->
|
|
<section class="section" id="security">
|
|
<div class="container">
|
|
<div style="margin-bottom:48px">
|
|
<div class="section-eyebrow">Sicherheit</div>
|
|
<h2 class="section-title">Sicherheit by Default.</h2>
|
|
<p class="section-sub">Mailwolt liefert alle nötigen Werkzeuge um einen gehärteten Mailserver zu betreiben — ohne Expertenwissen voraussetzen zu müssen.</p>
|
|
</div>
|
|
<div class="security-grid">
|
|
<div class="sec-card">
|
|
<div class="sec-card-icon" style="background:rgba(124,58,237,.1)">
|
|
<svg width="18" height="18" viewBox="0 0 16 16" fill="none"><rect x="3" y="7" width="10" height="7" rx="1.5" stroke="#a78bfa" stroke-width="1.3"/><path d="M5 7V5a3 3 0 0 1 6 0v2" stroke="#a78bfa" stroke-width="1.3" stroke-linecap="round"/></svg>
|
|
</div>
|
|
<div><div class="sec-card-title">TOTP Zwei-Faktor-Auth</div><div class="sec-card-desc">Schütze jeden Account mit einem zweiten Faktor. Kompatibel mit Google Authenticator, Authy und allen TOTP-Apps.</div></div>
|
|
</div>
|
|
<div class="sec-card">
|
|
<div class="sec-card-icon" style="background:rgba(239,68,68,.1)">
|
|
<svg width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="#f87171" stroke-width="1.3" stroke-linecap="round"/><circle cx="8" cy="8" r="7" stroke="#f87171" stroke-width="1.3"/></svg>
|
|
</div>
|
|
<div><div class="sec-card-title">Fail2ban Integration</div><div class="sec-card-desc">Angriffs-IPs direkt aus dem Panel sperren oder dauerhaft whitelisten. Echtzeit-Übersicht über aktive Bans und Jail-Status.</div></div>
|
|
</div>
|
|
<div class="sec-card">
|
|
<div class="sec-card-icon" style="background:rgba(16,185,129,.1)">
|
|
<svg width="18" height="18" viewBox="0 0 16 16" fill="none"><rect x="1.5" y="4.5" width="13" height="9" rx="1.5" stroke="#34d399" stroke-width="1.3"/><path d="M5 4.5V3a3 3 0 0 1 6 0v1.5" stroke="#34d399" stroke-width="1.3" stroke-linecap="round"/></svg>
|
|
</div>
|
|
<div><div class="sec-card-title">SSL/TLS Verwaltung</div><div class="sec-card-desc">Let's Encrypt Zertifikate automatisch ausstellen und verlängern. TLS-Cipher-Konfiguration für optimale Kompatibilität und Sicherheit.</div></div>
|
|
</div>
|
|
<div class="sec-card">
|
|
<div class="sec-card-icon" style="background:rgba(59,130,246,.1)">
|
|
<svg width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M8 2L13 4.5v4C13 11 10.8 13.2 8 14c-2.8-.8-5-3-5-5.5v-4L8 2Z" stroke="#60a5fa" stroke-width="1.3" stroke-linejoin="round"/></svg>
|
|
</div>
|
|
<div><div class="sec-card-title">Rollen & Berechtigungen</div><div class="sec-card-desc">Admin, Operator und Viewer — granulare Zugriffsrechte für Teams. Jeder sieht nur was er sehen darf.</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══ PRICING ═══ -->
|
|
<section class="section" id="pricing" style="background:var(--bg1);border-top:1px solid var(--b1)">
|
|
<div class="container">
|
|
<div style="text-align:center;margin-bottom:56px">
|
|
<div class="section-eyebrow">Preise</div>
|
|
<h2 class="section-title">Einfache Preisgestaltung.</h2>
|
|
<p class="section-sub" style="margin:0 auto">Starte kostenlos, wächst mit dir mit.</p>
|
|
</div>
|
|
<div class="pricing-grid">
|
|
<div class="price-card">
|
|
<div class="price-plan">Community</div>
|
|
<div class="price-amount">€0<span> / Monat</span></div>
|
|
<div class="price-desc">Für Privatpersonen und kleine Setups.</div>
|
|
<div class="price-divider"></div>
|
|
<ul class="price-features">
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>Bis 5 Domains</li>
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>Bis 25 Mailboxen</li>
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>REST API</li>
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>2FA & Audit Log</li>
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-gray"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 4l5 5M9 4l-5 5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg><span style="color:var(--t4)">Webhooks</span></li>
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-gray"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 4l5 5M9 4l-5 5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg><span style="color:var(--t4)">Priority Support</span></li>
|
|
</ul>
|
|
<a href="{{ route('login') }}" class="btn btn-ghost" style="width:100%;justify-content:center">Kostenlos starten</a>
|
|
</div>
|
|
<div class="price-card featured">
|
|
<div class="price-badge">BELIEBT</div>
|
|
<div class="price-plan">Pro</div>
|
|
<div class="price-amount">€19<span> / Monat</span></div>
|
|
<div class="price-desc">Für Teams und wachsende Organisationen.</div>
|
|
<div class="price-divider"></div>
|
|
<ul class="price-features">
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>Unbegrenzte Domains</li>
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>Unbegrenzte Mailboxen</li>
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>REST API + Webhooks</li>
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>Mail-Sandbox</li>
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>Team-Rollen (Admin/Op/Viewer)</li>
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>E-Mail Support</li>
|
|
</ul>
|
|
<a href="{{ route('login') }}" class="btn btn-primary" style="width:100%;justify-content:center">Pro starten →</a>
|
|
</div>
|
|
<div class="price-card">
|
|
<div class="price-plan">Enterprise</div>
|
|
<div class="price-amount" style="font-size:28px;line-height:1.2">Auf Anfrage</div>
|
|
<div class="price-desc">Für Hoster, Agenturen und On-Premise-Installationen mit SLA.</div>
|
|
<div class="price-divider"></div>
|
|
<ul class="price-features">
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>Alles aus Pro</li>
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>White-Label Option</li>
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>Dedicated Support / SLA</li>
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>Custom Integrations</li>
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>Migrations-Hilfe</li>
|
|
<li><svg width="13" height="13" viewBox="0 0 13 13" fill="none" class="check-green"><circle cx="6.5" cy="6.5" r="5.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6.5l2 2 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>Rechnungsstellung</li>
|
|
</ul>
|
|
<a href="mailto:hello@mailwolt.com" class="btn btn-ghost" style="width:100%;justify-content:center">Kontakt aufnehmen</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══ CTA ═══ -->
|
|
<section class="cta-section">
|
|
<div class="cta-glow"></div>
|
|
<div class="container" style="position:relative;z-index:1">
|
|
<h2 class="section-title" style="text-align:center;margin-bottom:16px">Bereit loszulegen?</h2>
|
|
<p style="text-align:center;font-size:16px;color:var(--t3);margin-bottom:36px">Installiere Mailwolt in wenigen Minuten und behalte die volle Kontrolle über deinen Mailserver.</p>
|
|
<div style="display:flex;justify-content:center;gap:12px;flex-wrap:wrap">
|
|
<a href="{{ route('login') }}" class="btn btn-primary btn-lg">
|
|
Demo starten →
|
|
</a>
|
|
<a href="https://github.com" target="_blank" class="btn-outline-lg btn">
|
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1a7 7 0 0 0-2.213 13.641c.35.064.478-.152.478-.337 0-.166-.006-.606-.009-1.19-1.947.423-2.358-.94-2.358-.94-.318-.809-.777-1.024-.777-1.024-.635-.434.048-.425.048-.425.702.049 1.072.72 1.072.72.624 1.069 1.637.76 2.037.582.063-.452.244-.761.444-.936-1.554-.177-3.188-.777-3.188-3.456 0-.763.272-1.387.72-1.876-.072-.177-.312-.888.068-1.85 0 0 .587-.188 1.923.716A6.7 6.7 0 0 1 8 4.979c.594.003 1.192.08 1.75.235 1.334-.904 1.92-.717 1.92-.717.381.963.141 1.674.069 1.851.448.489.72 1.113.72 1.876 0 2.686-1.637 3.277-3.196 3.45.251.217.475.644.475 1.299 0 .937-.008 1.692-.008 1.922 0 .187.126.405.482.336A7.001 7.001 0 0 0 8 1Z" fill="currentColor"/></svg>
|
|
GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══ FOOTER ═══ -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-inner">
|
|
<div class="nav-logo">
|
|
<div class="nav-logo-icon">
|
|
<svg width="12" height="12" viewBox="0 0 18 18" fill="none"><path d="M9 2L15.5 5.5v7L9 16 2.5 12.5v-7L9 2Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/><path d="M9 6L12 7.5v3L9 12 6 10.5v-3L9 6Z" fill="white" opacity=".9"/></svg>
|
|
</div>
|
|
<span class="nav-logo-text" style="font-size:12px">MAILWOLT</span>
|
|
<span style="font-size:11px;color:var(--t4);margin-left:4px">© {{ date('Y') }}</span>
|
|
</div>
|
|
<div class="footer-links">
|
|
<a href="#features">Features</a>
|
|
<a href="#pricing">Preise</a>
|
|
<a href="{{ route('login') }}">Login</a>
|
|
<a href="mailto:hello@mailwolt.com">Kontakt</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|