<div x-ref="contentBlock" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 h-full md:gap-8 bg-dark-5 rounded-lg overflow-hidden">
<div class="relative aspect-square md:aspect-auto ">
<img src="/img/newletter-img.jpeg" alt="" class="w-full h-full object-cover" />
</div>
<div class="flex flex-col justify-center p-8 md:p-12">
<h2 class="text-3xl font-medium text-neutral-900 mb-4">Needle yet value-added first product strategic loss</h2>
<p class="text-neutral-600 text-lg mb-8">Launch optimize charts post bells algorithm low-hanging hear.</p>
<button type="button" class="w-fit btn btn-dark-ghost btn-icons">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Réserver un essayage
</button>
</div>
</div>
<div x-ref="contentBlock" class="grid {% if slide.variant == 'default' %} grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 {% endif %} h-full md:gap-8 bg-dark-5 rounded-lg overflow-hidden">
{% if slide.variant != 'text-only' %}
<div class="relative {% if slide.variant != 'image-only' %} aspect-square md:aspect-auto {% else %} grid {% endif %}">
{% if slide.image %}
<img
src="{{ slide.image }}"
alt="{{ slide.name }}"
class="w-full h-full object-cover"
/>
{% endif %}
</div>
{% endif %}
{% if slide.variant != 'image-only' %}
<div class="flex flex-col justify-center p-8 md:p-12">
<h2 class="text-3xl font-medium text-neutral-900 mb-4">{{ slide.title }}</h2>
<p class="text-neutral-600 text-lg mb-8">{{ slide.description }}</p>
{% if slide.cta %}
{% render "@template-button" with {
color: "dark-ghost",
type: "leading-icon",
label: "Réserver un essayage",
icon: {
name: "library--calendar"
},
button_class: "w-fit"
} %}
{% endif %}
</div>
{% endif %}
</div>
{
"slide": {
"variant": "default",
"image": "/img/newletter-img.jpeg",
"title": "Needle yet value-added first product strategic loss",
"description": "Launch optimize charts post bells algorithm low-hanging hear.",
"cta": {
"label": "Réserver un essayage"
}
}
}
No notes defined.