Alain Afflelou Design System

Collection Banner 

<div class="relative overflow-hidden rounded-lg">
    <img src="../../img/newletter-img.jpeg" alt="Collection Afflelou" class="w-full h-full object-cover relative aspect-square" />

    <div class="absolute inset-0 bg-[#F5EFE6] opacity-100" style="background: linear-gradient(57.42deg, #F5EFE6 0%, rgba(245, 239, 230, 0) 59.54%);"></div>

    <div class="absolute inset-0 flex flex-col items-start justify-end p-8">
        <h2 class="text-xl  md:text-3xl font-bold mb-2">Collection Afflelou</h2>
        <p class="mb-6">Vos solaires à 29€</p>

        <a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" class=" btn btn-dark ">
            Découvrir la collection

        </a>
    </div>
</div>
 
{# components/CollectionBanner/CollectionBanner.twig #}
<div class="relative overflow-hidden rounded-lg">
    <img
            src="{{ image | path }}"
            alt="{{ title }}"
            class="w-full h-full object-cover relative aspect-square"
    />

    {# Gradient overlay #}
    <div
            class="absolute inset-0 bg-[#F5EFE6] opacity-100"
            style="background: linear-gradient(57.42deg, #F5EFE6 0%, rgba(245, 239, 230, 0) 59.54%);"
    ></div>

    <div class="absolute inset-0 flex flex-col items-start justify-end p-8">
        <h2 class="text-xl  md:text-3xl font-bold mb-2">{{ title }}</h2>
        <p class="mb-6">{{ description }}</p>

        {% if CTA %}
            {% render "@template-button" with {
                href: CTA.href,
                external: CTA.external,
                color: CTA.color,
                label: CTA.label,
            } %}
        {% endif %}
    </div>
</div>
 
{
  "image": "/img/newletter-img.jpeg",
  "title": "Collection Afflelou",
  "description": "Vos solaires à 29€",
  "CTA": {
    "label": "Découvrir la collection",
    "href": "https://www.afflelou.com/",
    "external": true,
    "color": "dark"
  }
}

No notes defined.