Split Hero

index.html Copy

<section class="hero"><div><span class="tag">100 % kostenlos</span><h1>Baue bessere Oberflächen schneller.</h1><p>Eine kuratierte Bibliothek aus Komponenten, Blocks, Widgets und Templates.</p><div class="actions"><a class="primary" href="#">Bibliothek öffnen</a><a href="#">Mehr erfahren</a></div></div><div class="visual"><div class="mock"><b>Live Preview</b><span>Desktop · Tablet · Mobile</span></div></div></section><style>.hero{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:72px 28px;max-width:1180px;margin:auto}.hero h1{font-size:clamp(2.7rem,7vw,5.4rem);line-height:.98;margin:.25em 0}.hero p{font-size:1.15rem;color:#52525b;line-height:1.6;max-width:650px}.tag{display:inline-block;color:#5b21b6;background:#ede9fe;padding:6px 10px;border-radius:999px;font-weight:700}.actions{display:flex;gap:16px;align-items:center;margin-top:24px}.actions a{text-decoration:none;color:#18181b;font-weight:700}.actions .primary{background:#5b4cf0;color:white;padding:12px 16px;border-radius:10px}.visual{background:linear-gradient(135deg,#ede9fe,#dbeafe);padding:32px;border-radius:24px}.mock{min-height:280px;background:white;border:1px solid #d4d4d8;border-radius:14px;display:grid;place-items:center;align-content:center;gap:8px;box-shadow:0 18px 60px rgba(0,0,0,.12)}.mock span{color:#71717a}@media(max-width:760px){.hero{grid-template-columns:1fr;padding:48px 20px}}</style>