{% comment %}Velora Hero{% endcomment %}
<section class="velora-hero">
<div class="velora-container">
<div>
<p>★★★★★ 4.8 | Ergonomischer Schlafkomfort</p>
<h1>Schlaf endlich<br>ohne Nackenschmerzen.</h1>
<p>Ergonomisches Memory-Foam-Kissen für besseren Schlaf.</p>
<a href="{{ section.settings.button_link }}">{{ section.settings.button_text }}</a>
</div>
<div>
{% if section.settings.image %}
{{ section.settings.image | image_url: width: 1200 | image_tag }}
{% endif %}
</div>
</div>
</section>
<style>
.velora-hero{padding:80px 20px;background:#fff}
.velora-container{max-width:1280px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
h1{font-size:64px;line-height:1.05}
a{display:inline-block;padding:18px 34px;background:#4C4184;color:#fff;border-radius:999px;text-decoration:none}
img{width:100%;border-radius:24px}
@media(max-width:768px){.velora-container{grid-template-columns:1fr}h1{font-size:42px}}
</style>
{% schema %}
{
"name":"Velora Hero",
"settings":[
{"type":"image_picker","id":"image","label":"Bild"},
{"type":"text","id":"button_text","label":"Button","default":"Jetzt entdecken"},
{"type":"url","id":"button_link","label":"Link"}
],
"presets":[{"name":"Velora Hero"}]
}
{% endschema %}