93 lines
5.6 KiB
Twig
93 lines
5.6 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}Organisateurs - E-Ticket{% endblock %}
|
|
{% block description %}Decouvrez les organisateurs d'evenements sur E-Ticket{% endblock %}
|
|
{% block og_title %}Nos organisateurs - E-Ticket{% endblock %}
|
|
{% block og_description %}{{ organizers|length }} organisateur{{ organizers|length > 1 ? 's' : '' }} font confiance a E-Ticket pour gerer leurs evenements.{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="bg-[#fbfbfb] overflow-x-hidden italic font-sans">
|
|
|
|
<section class="relative flex items-center justify-center bg-white border-b-8 border-gray-900 px-4 pt-20 pb-16">
|
|
<div class="absolute inset-0 opacity-[0.03] pointer-events-none select-none overflow-hidden">
|
|
<span class="text-[8rem] md:text-[20rem] font-black uppercase leading-none block -rotate-12 translate-y-10">ORGA</span>
|
|
</div>
|
|
|
|
<div class="max-w-7xl mx-auto relative z-10 text-center">
|
|
<h1 class="text-5xl md:text-8xl font-black uppercase tracking-tighter leading-[0.85] mb-4">
|
|
<span class="block">Nos organisateurs</span>
|
|
</h1>
|
|
<p class="max-w-2xl mx-auto text-xl font-bold text-gray-600 italic">
|
|
{{ organizers|length }} organisateur{{ organizers|length > 1 ? 's' : '' }} font confiance a E-Ticket pour gerer leurs evenements.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-16 px-4">
|
|
<div class="max-w-7xl mx-auto">
|
|
{% if organizers|length > 0 %}
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{% for orga in organizers %}
|
|
<div class="group bg-white border-4 border-gray-900 p-8 flex flex-col items-center shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:bg-gray-50 hover:translate-y-[-4px] transition-all">
|
|
{% if orga.logoName %}
|
|
<div class="border-4 border-gray-900 flex items-center justify-center mb-6 group-hover:rotate-3 transition-transform overflow-hidden bg-white p-2">
|
|
<img src="{{ ('/uploads/logos/' ~ orga.logoName) | imagine_filter('organizer_logo') }}" alt="{{ orga.companyName }}" class="h-[120px] w-auto object-contain">
|
|
</div>
|
|
{% else %}
|
|
<div class="w-24 h-24 bg-yellow-400 border-4 border-gray-900 flex items-center justify-center mb-6 group-hover:rotate-3 transition-transform">
|
|
<span class="text-3xl font-black">{{ orga.firstName|first|upper }}{{ orga.lastName|first|upper }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<h2 class="text-2xl font-black uppercase tracking-tighter text-center group-hover:text-indigo-600 transition-colors">
|
|
{{ orga.companyName ?? (orga.firstName ~ ' ' ~ orga.lastName) }}
|
|
</h2>
|
|
|
|
{% if orga.city %}
|
|
<p class="text-xs font-black uppercase tracking-widest text-gray-400 mt-2">
|
|
{{ orga.postalCode }} {{ orga.city }}
|
|
</p>
|
|
{% endif %}
|
|
|
|
{% include 'components/_social_icons.html.twig' with {organizer: orga, class: 'mt-4 flex-wrap justify-center'} only %}
|
|
|
|
<a href="{{ path('app_organizer_detail', {id: orga.id, slug: orga.slug}) }}" class="mt-6 inline-block px-6 py-3 bg-yellow-400 text-gray-900 font-black uppercase italic text-xs tracking-widest border-3 border-gray-900 shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all">
|
|
Voir les evenements
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-16">
|
|
<div class="border-4 border-gray-900 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] p-12 max-w-lg mx-auto">
|
|
<p class="text-gray-400 font-black text-lg uppercase">Aucun organisateur pour le moment</p>
|
|
<p class="text-gray-500 font-bold mt-2 italic">Soyez le premier a rejoindre E-Ticket !</p>
|
|
<a href="{{ path('app_register') }}" class="inline-block mt-6 px-8 py-4 bg-yellow-400 text-gray-900 font-black uppercase italic tracking-widest border-4 border-gray-900 shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all">
|
|
Devenir organisateur
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="relative py-16 px-4 bg-yellow-400 overflow-hidden">
|
|
<div class="absolute inset-0 bg-gray-900 skew-y-2 transform origin-bottom-right translate-y-12"></div>
|
|
<div class="max-w-7xl mx-auto relative z-10 flex flex-col lg:flex-row items-center justify-between gap-8">
|
|
<div class="text-center lg:text-left text-white">
|
|
<h2 class="text-4xl md:text-6xl font-black uppercase tracking-tighter mb-2">
|
|
Vous etes une association ?
|
|
</h2>
|
|
<p class="text-xl font-bold text-yellow-300 uppercase tracking-tighter italic">
|
|
Rejoignez E-Ticket et gerez vos evenements simplement.
|
|
</p>
|
|
</div>
|
|
<a href="{{ path('app_register') }}" class="group relative px-12 py-6 bg-yellow-400 text-gray-900 font-black uppercase italic tracking-widest text-xl border-4 border-gray-900 shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-2 hover:translate-y-2 transition-all">
|
|
Creer un compte
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
{% endblock %}
|