4f08db7541
✨ feat(templates): [FR] Améliore l'UI et ajoute des traductions pour plus de contenu dynamique.
```
197 lines
11 KiB
Twig
197 lines
11 KiB
Twig
{% extends 'base.twig' %}
|
||
|
||
{% block title %}{{'home_page.title'|trans}}{% endblock %}
|
||
{% block meta_description %}{{'home_page.description'|trans}}{% endblock %}
|
||
|
||
{% block canonical_url %}<link rel="canonical" href="{{ url('app_home') }}" />{% endblock %}
|
||
|
||
{% block breadcrumb_schema %}
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "BreadcrumbList",
|
||
"itemListElement": [
|
||
{
|
||
"@type": "ListItem",
|
||
"position": 1,
|
||
"name": "{{ 'breadcrumb.home'|trans }}",
|
||
"item": "{{ app.request.schemeAndHttpHost }}"
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
{% endblock %}
|
||
|
||
{% block body %}
|
||
<div class="bg-[#fbfbfb] overflow-x-hidden italic font-sans">
|
||
|
||
{# --- SECTION 1: HERO (COMMAND CENTER) --- #}
|
||
<section class="relative min-h-[90vh] flex items-center justify-center bg-white border-b-8 border-gray-900 px-4 pt-20 pb-32">
|
||
{# Décoration de fond #}
|
||
<div class="absolute inset-0 opacity-[0.03] pointer-events-none select-none overflow-hidden">
|
||
<span class="text-[30rem] font-black uppercase leading-none block -rotate-12 translate-y-20">ECOSPLAY</span>
|
||
</div>
|
||
|
||
<div class="max-w-7xl mx-auto relative z-10 text-center">
|
||
|
||
<h1 class="text-6xl md:text-9xl font-black uppercase tracking-tighter leading-[0.85] mb-8">
|
||
<span class="block">{{ 'home_hero.title'|trans }}</span>
|
||
</h1>
|
||
|
||
<p class="max-w-2xl mx-auto text-xl md:text-3xl font-bold text-gray-600 mb-12 border-l-8 border-indigo-600 pl-6 text-left md:text-center md:border-l-0 md:pl-0">
|
||
{{ 'home_hero.subtitle'|trans }}
|
||
</p>
|
||
|
||
<div class="flex flex-col sm:flex-row justify-center gap-6">
|
||
<a href="{{ url('app_members') }}" class="group relative px-10 py-6 bg-indigo-600 text-white font-black uppercase italic tracking-widest 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">
|
||
{{ 'home_hero.button_members'|trans }}
|
||
</a>
|
||
<a href="{{ url('app_contact') }}" class="group relative px-10 py-6 bg-white text-gray-900 font-black uppercase italic tracking-widest 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">
|
||
{{ 'home_hero.button_contact'|trans }}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{# --- MARQUEE : TECH BAR --- #}
|
||
<div class="bg-gray-900 py-6 border-b-4 border-indigo-600 overflow-hidden">
|
||
<div class="flex whitespace-nowrap animate-marquee italic">
|
||
{% for i in 1..10 %}
|
||
<span class="text-white font-black uppercase mx-8 text-2xl opacity-80">
|
||
{{ 'home_roll'|trans }}
|
||
</span>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
{# --- SECTION 2: À PROPOS (THE MISSION) --- #}
|
||
<section class="py-24 px-4 bg-white border-b-4 border-gray-900">
|
||
<div class="max-w-7xl mx-auto items-center">
|
||
<div>
|
||
<p class="text-indigo-600 font-black uppercase tracking-[0.3em] mb-4">// {{ 'home_about.pretitle'|trans }}</p>
|
||
<h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter mb-8 leading-none">
|
||
{{ 'home_about.title'|trans }}
|
||
</h2>
|
||
<div class="space-y-6 text-xl font-bold text-gray-700 leading-relaxed">
|
||
<p class="border-l-8 border-yellow-400 pl-6 italic">{{ 'home_about.text_1'|trans }}</p>
|
||
<p>{{ 'home_about.text_2'|trans }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{# --- SECTION 3: ACTIVITÉS (CORE SYSTEMS) --- #}
|
||
<section class="bg-gray-50 py-24 px-4">
|
||
<div class="max-w-7xl mx-auto">
|
||
<h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter mb-20 text-center">
|
||
{{ 'home_activities.title'|trans }}
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
|
||
{# Activité 1 #}
|
||
<div class="group bg-white border-4 border-gray-900 p-8 shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_#4f46e5] transition-all">
|
||
<div class="w-16 h-16 bg-indigo-600 text-white flex items-center justify-center mb-8 border-2 border-gray-900 text-3xl group-hover:rotate-12 transition-transform">
|
||
<i class="fas fa-mask"></i>
|
||
</div>
|
||
<h3 class="text-3xl font-black uppercase tracking-tighter mb-4">{{ 'home_activities.cosplay_title'|trans }}</h3>
|
||
<p class="text-gray-600 font-bold leading-tight italic">{{ 'home_activities.cosplay_text'|trans }}</p>
|
||
</div>
|
||
|
||
{# Activité 2 #}
|
||
<div class="group bg-white border-4 border-gray-900 p-8 shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_#ef4444] transition-all md:translate-y-8">
|
||
<div class="w-16 h-16 bg-red-600 text-white flex items-center justify-center mb-8 border-2 border-gray-900 text-3xl group-hover:rotate-12 transition-transform">
|
||
<i class="fas fa-users"></i>
|
||
</div>
|
||
<h3 class="text-3xl font-black uppercase tracking-tighter mb-4">{{ 'home_activities.community_title'|trans }}</h3>
|
||
<p class="text-gray-600 font-bold leading-tight italic">{{ 'home_activities.community_text'|trans }}</p>
|
||
</div>
|
||
|
||
{# Activité 3 #}
|
||
<div class="group bg-white border-4 border-gray-900 p-8 shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-[14px_14px_0px_#eab308] transition-all">
|
||
<div class="w-16 h-16 bg-yellow-500 text-white flex items-center justify-center mb-8 border-2 border-gray-900 text-3xl group-hover:rotate-12 transition-transform">
|
||
<i class="fas fa-heart"></i>
|
||
</div>
|
||
<h3 class="text-3xl font-black uppercase tracking-tighter mb-4">{{ 'home_activities.diversity_title'|trans }}</h3>
|
||
<p class="text-gray-600 font-bold leading-tight italic">{{ 'home_activities.diversity_text'|trans }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{# --- SECTION 4: PARTENAIRES (ALLIES) --- #}
|
||
<section class="bg-white py-24 px-4 border-t-4 border-gray-900">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
|
||
<div>
|
||
<p class="text-indigo-600 font-black uppercase tracking-[0.3em] mb-4">// {{ 'home_partners.pretitle'|trans }}</p>
|
||
<h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter leading-none">
|
||
{{ 'home_partners.title'|trans }}
|
||
</h2>
|
||
</div>
|
||
<p class="text-xl font-bold text-gray-500 max-w-sm italic">{{ 'home_partners.subtitle'|trans }}</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{% for partner in partners|default([
|
||
{ 'image': '/assets/partenair/house-of-geek.jpg', 'name': 'House Of Geek', 'facebook_link': 'https://www.facebook.com/houseofgeek02' },
|
||
{ 'image': '/assets/partenair/cosplay-familly.jpg', 'name': 'Cosplays family arts', 'facebook_link': 'https://www.facebook.com/profile.php?id=61568494078902' },
|
||
{ 'image': '/assets/partenair/couronnes-d-or.jpg', 'name': 'Le Comité des Couronnes D’or', 'facebook_link': 'https://www.facebook.com/p/Le-Comit%C3%A9-des-Couronnes-Dor-61576548182126/' },
|
||
{ 'image': '/assets/partenair/siteconseil.png', 'name': 'SARL SITECONSEIL', 'facebook_link': 'https://www.facebook.com/siteconseil','website':'https://www.siteconseil.fr' }
|
||
]) %}
|
||
<a href="{% if partner.website is defined and partner.website %}{{ partner.website }}{% else %}{{ partner.facebook_link ?? '#' }}{% endif %}" target="_blank"
|
||
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">
|
||
|
||
<div class="w-32 h-32 bg-gray-100 border-2 border-gray-900 flex items-center justify-center p-4 mb-6 group-hover:rotate-3 transition-transform">
|
||
<img class="max-w-full max-h-full object-contain filter grayscale group-hover:grayscale-0"
|
||
src="{{ partner.image | imagine_filter('avatar_partner') }}"
|
||
alt="{{ partner.name }}">
|
||
</div>
|
||
|
||
<span class="text-2xl font-black uppercase tracking-tighter text-gray-900 mb-2 group-hover:text-indigo-600">
|
||
{{ partner.name }}
|
||
</span>
|
||
|
||
<span class="text-xs font-black uppercase tracking-widest text-gray-400">
|
||
{% if partner.website is defined and partner.website %}{{ 'partner_w'|trans }}{% else %}{{ 'partner_l'|trans }}{% endif %}
|
||
</span>
|
||
</a>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{# --- SECTION 5: CTA (JOIN THE SQUAD) --- #}
|
||
<section class="relative py-24 px-4 bg-indigo-600 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-12">
|
||
<div class="text-center lg:text-left text-white">
|
||
<h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter mb-4">
|
||
{{ 'home_cta.title'|trans }}
|
||
</h2>
|
||
<p class="text-2xl font-bold text-indigo-200 uppercase tracking-tighter italic">
|
||
{{ 'home_cta.subtitle'|trans }}
|
||
</p>
|
||
</div>
|
||
|
||
<a href="{{ url('app_recruit') }}" class="group relative px-16 py-8 bg-yellow-400 text-gray-900 font-black uppercase italic tracking-widest text-2xl border-4 border-gray-900 shadow-[10px_10px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-2 hover:translate-y-2 transition-all">
|
||
{{ 'home_cta.button'|trans }}
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<style>
|
||
@keyframes marquee {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(-50%); }
|
||
}
|
||
.animate-marquee {
|
||
display: flex;
|
||
width: 200%;
|
||
animation: marquee 40s linear infinite;
|
||
}
|
||
</style>
|
||
{% endblock %}
|