<div data-aos="fade-up" data-aos-delay="0" class="flex flex-col gap-6 justify-center items-center">
{# IMAGE WITH/WITHOUT QUOTE #}
<div class="relative">
{% if (filter) %}
{# si l'élément passé dans le componenent est une image #}
<div class="w-full">
{# alors je lui met un filtre #}
{% if alumni %}
<img class="rounded-full w-[220px]"
src="{{ asset('upload/images/training/alumni/' ~ url) | imagine_filter('team_img') }}"
alt="bubble image">
{% elseif team %}
<img class="rounded-full w-[220px]"
src="{{ asset('upload/images/team/' ~ url) | imagine_filter('team_img') }}"
alt="bubble image">
{% elseif alumniHighlight %}
<img class="rounded-full w-[220px]"
src="{{ asset('upload/images/alumni_highlight/' ~ url) | imagine_filter('team_img') }}"
alt="bubble image">
{% else %}
<img class="rounded-full w-[220px]"
src="{{ asset('build/images/' ~ url) | imagine_filter('team_img') }}" alt="bubble image">
{% endif %}
</div>
{% else %}
{# sinon c'est que c'est un svg donc je ne lui met pas de filtre (les filtres cassent les svg) #}
<img src="{{ asset('build/images/' ~ url) }}" alt="bubble image">
{% endif %}
{% if (quote != false) %}
<svg class="absolute w-24 top-0 left-[-20px] text-{{ color }}" xmlns="http://www.w3.org/2000/svg"
width="73.968" height="52.201" viewBox="0 0 73.968 52.201">
<path fill="{{ color }}" data-name="Tracé 5"
d="M25.51,8.547l.026,4.4A12.579,12.579,0,0,1,12.879,25.668,12.938,12.938,0,0,1,.074,12.8,12.579,12.579,0,0,1,12.73.074L43.45,1.182,45.7,4.37Z"
transform="matrix(0.545, -0.839, 0.839, 0.545, -0.103, 38.284)"></path>
<path fill="{{ color }}" data-name="Tracé 101"
d="M25.51,8.547l.026,4.4A12.579,12.579,0,0,1,12.879,25.668,12.938,12.938,0,0,1,.074,12.8,12.579,12.579,0,0,1,12.73.074L43.45,1.182,45.7,4.37Z"
transform="matrix(0.545, -0.839, 0.839, 0.545, 27.553, 38.284)"></path>
<path fill="{{ color }}" data-name="Tracé 100" d="M0,0Z"
transform="matrix(0.545, -0.839, 0.839, 0.545, 48.078, 17.887)"></path>
</svg>
{% endif %}
</div>
<div class="flex flex-col gap-4 justify-center items-center">
{# TITLE #}
<p class="font-allerBold text-grey-300 text-center text-xl">{{ title }}</p>
{# IMAGE WITH/WITHOUT QUOTE #}
{% if (category != null) %}
<div class="w-fit">
<p class="font-allerRegular uppercase text-sm w-fit text-center text-white px-3 py-1.5 rounded-lg"
style="background-color: {{ color }}">{{ category }}</p>
</div>
{% endif %}
{# DESCRIPTION #}
{% if (subtitle != null) %}
<p class="font-allerRegular text-center text-base">{{ subtitle }}</p>
{% endif %}
{# TESTIMONIAL #}
{% if (testimonial != null) %}
<div class="font-allerRegular text-center text-sm italic">"{{ testimonial|raw }}"</div>
{% endif %}
</div>
</div>