admin/e-cosplay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

```

Browse Source 
✨ feat(templates): Style Neubrutaliste, refonte complète des templates

Refactorise les templates principaux avec un style Neubrutaliste.
Ajoute des animations, des filigranes et améliore la responsivité.
Traduit en français.
```
This commit is contained in:
Serreau Jovann
2025-12-25 20:13:53 +01:00
parent 363b3f77a9
commit 37d798ab18
13 changed files with 1437 additions and 1551 deletions
Download Patch File Download Diff File Expand all files Collapse all files

695
templates/about.twig
View File

@@ -3,8 +3,7 @@
{% block title %}{{'about_title'|trans}}{% endblock %}
{% block meta_description %}{{'about_description'|trans}}{% endblock %}
{% block canonical_url %}<link rel="canonical" href="{{ url('app_about') }}" />
{% endblock %}
{% block canonical_url %}<link rel="canonical" href="{{ url('app_about') }}" />{% endblock %}
{% block breadcrumb_schema %}
<script type="application/ld+json">
@@ -27,6 +26,7 @@
]
}
</script>
{# Les schémas d'images restent identiques pour le SEO #}
<script type="application/ld+json">
{
"@context": "https://schema.org/",
@@ -35,461 +35,264 @@
"license": "https://www.instagram.com/dystopix_photography/",
"acquireLicensePage": "https://www.instagram.com/dystopix_photography/",
"creditText": "dystopix_photography",
"creator": {
"@type": "Person",
"name": "dystopix_photography"
},
"creator": { "@type": "Person", "name": "dystopix_photography" },
"copyrightNotice": "dystopix_photography"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "ImageObject",
"contentUrl": "{{ asset('assets/images/marta.jpg') | imagine_filter('webp') }}",
"license": "https://example.com/license",
"acquireLicensePage": "https://example.com/how-to-use-my-images",
"creditText": "https://www.instagram.com/marta_gator/",
"creator": {
"@type": "Person",
"name": "Marta Gator"
},
"copyrightNotice": "https://www.instagram.com/marta_gator/"
}
</script>
{% endblock %}
{% block body %}
<main class="bg-[#fbfbfb] min-h-screen font-sans text-gray-900 pb-24 overflow-x-hidden">
{# --- HEADER HERO --- #}
<header class="relative pt-20 pb-24 px-4 overflow-hidden border-b-4 border-gray-900 bg-white">
<div class="max-w-7xl mx-auto relative z-10">
<h1 class="text-6xl md:text-9xl font-black italic uppercase tracking-tighter leading-[0.8] mb-6">
{{'about_title'|trans}}
<span class="block text-indigo-600 outline-text mt-4">{{ 'brand_name'|trans }}</span>
</h1>
<div class="h-4 w-64 bg-yellow-500 skew-x-[-20deg] mt-8 shadow-[4px_4px_0px_rgba(0,0,0,1)]"></div>
</div>
{# Filigrane de fond #}
<div class="absolute top-0 right-0 opacity-[0.03] pointer-events-none select-none -mr-20 hidden lg:block">
<span class="text-[25rem] font-black italic uppercase leading-none">PASSION</span>
</div>
</header>
{# --- SECTION PASSION --- #}
<section class="max-w-6xl mx-auto px-4 -mt-12 relative z-20 mb-32">
<div class="bg-white border-4 border-gray-900 p-8 md:p-16 shadow-[16px_16px_0px_#4f46e5]">
<h2 class="text-4xl font-black uppercase italic mb-8 flex items-center gap-4">
<span class="bg-indigo-600 text-white px-4 py-1 skew-x-[-15deg]">#01</span>
{{'about_section_passion_title'|trans}}
</h2>
<div class="text-xl md:text-2xl font-bold leading-relaxed italic text-gray-800 space-y-8">
<p>
{{ 'about_passion_p1'|trans({
'%association%': '<span class="text-indigo-600 underline decoration-yellow-500 decoration-8 underline-offset-4">' ~ 'about_passion_association_details'|trans ~ '</span>',
'%mission%': '<span class="text-indigo-600 italic">' ~ 'about_passion_mission_details'|trans ~ '</span>'
})|raw }}
</p>
<div class="border-l-[12px] border-yellow-500 pl-8 bg-gray-50 py-8 shadow-inner">
<p>
{{ 'about_passion_p2'|trans({
'%fait_main%': '<span class="uppercase font-black text-indigo-900">' ~ 'about_passion_costume_handmade'|trans ~ '</span>',
'%egalite%': '<span class="bg-indigo-900 text-white px-3 py-1 skew-x-[-5deg]">' ~ 'about_passion_equality'|trans ~ '</span>'
})|raw }}
</p>
</div>
</div>
</div>
</section>
{# --- LES FONDATEURS (CHARACTER SELECT STYLE) --- #}
<section class="mb-40">
<div class="max-w-7xl mx-auto px-4 mb-16 text-center">
<h2 class="text-6xl md:text-8xl font-black uppercase italic tracking-tighter text-gray-900">
{{'about_founders_title'|trans}}
</h2>
</div>
{# Desktop View #}
<div class="hidden lg:flex h-[85vh] w-full border-y-8 border-gray-900 group">
{# Shoko #}
<div class="relative flex-1 grayscale hover:grayscale-0 transition-all duration-500 cursor-crosshair overflow-hidden border-r-4 border-gray-900 group/card">
<img src="{{ asset('assets/images/shoko.jpg') | imagine_filter('webp') }}" alt="ShokoCosplay" class="absolute inset-0 w-full h-full object-cover scale-110 group-hover/card:scale-100 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-80"></div>
<div class="absolute bottom-12 left-12 text-white italic z-10">
<div class="bg-indigo-600 text-white inline-block px-4 py-1 font-black uppercase skew-x-[-15deg] mb-4 shadow-lg">FOUNDER_01</div>
<h3 class="text-7xl font-black uppercase leading-none tracking-tighter mb-2">ShokoCosplay</h3>
<p class="text-yellow-400 text-2xl font-black uppercase mb-6">{{'about_founder_shoko_role_short'|trans}}</p>
<div class="flex gap-4">
<a href="https://www.instagram.com/cosplay_shoko/" target="_blank" class="bg-white text-black w-12 h-12 flex items-center justify-center hover:bg-yellow-500 transition-colors shadow-[4px_4px_0px_rgba(255,255,255,0.3)]"><i class="fab fa-instagram fa-lg"></i></a>
<a href="https://www.tiktok.com/@cosshoko" target="_blank" class="bg-white text-black w-12 h-12 flex items-center justify-center hover:bg-yellow-500 transition-colors shadow-[4px_4px_0px_rgba(255,255,255,0.3)]"><i class="fab fa-tiktok fa-lg"></i></a>
</div>
</div>
</div>
{# Marta #}
<div class="relative flex-1 grayscale hover:grayscale-0 transition-all duration-500 cursor-crosshair overflow-hidden group/card">
<img src="{{ asset('assets/images/marta.jpg') | imagine_filter('webp') }}" alt="Marta Gator" class="absolute inset-0 w-full h-full object-cover scale-110 group-hover/card:scale-100 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-80"></div>
<div class="absolute bottom-12 right-12 text-white italic z-10 text-right">
<div class="bg-indigo-600 text-white inline-block px-4 py-1 font-black uppercase skew-x-[-15deg] mb-4 shadow-lg">FOUNDER_02</div>
<h3 class="text-7xl font-black uppercase leading-none tracking-tighter mb-2">Marta Gator</h3>
<p class="text-yellow-400 text-2xl font-black uppercase mb-6">{{'about_founder_marta_role_short'|trans}}</p>
<div class="flex gap-4 justify-end">
<a href="https://www.facebook.com/profile.php?id=100081002010111" target="_blank" class="bg-white text-black w-12 h-12 flex items-center justify-center hover:bg-yellow-500 transition-colors shadow-[4px_4px_0px_rgba(255,255,255,0.3)]"><i class="fab fa-facebook fa-lg"></i></a>
<a href="https://www.instagram.com/marta_gator/" target="_blank" class="bg-white text-black w-12 h-12 flex items-center justify-center hover:bg-yellow-500 transition-colors shadow-[4px_4px_0px_rgba(255,255,255,0.3)]"><i class="fab fa-instagram fa-lg"></i></a>
</div>
</div>
</div>
</div>
{# Mobile View Cards #}
<div class="lg:hidden px-4 space-y-12">
{% for founder in [
{name: 'ShokoCosplay', role: 'about_founder_shoko_role', img: 'shoko.jpg', color: 'indigo-600'},
{name: 'Marta Gator', role: 'about_founder_marta_role', img: 'marta.jpg', color: 'yellow-500'}
] %}
<div class="border-4 border-gray-900 bg-white overflow-hidden shadow-[8px_8px_0px_rgba(0,0,0,1)] italic">
<div class="h-64 bg-gray-200 overflow-hidden border-b-4 border-gray-900">
<img src="{{ asset('assets/images/' ~ founder.img) | imagine_filter('webp') }}" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-3xl font-black uppercase italic">{{ founder.name }}</h3>
<p class="text-{{ founder.color }} font-black uppercase mb-4">{{ founder.role|trans }}</p>
<div class="flex gap-4">
<div class="bg-gray-900 text-white px-4 py-2 text-sm font-black uppercase italic">Social Links</div>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
{# --- OBJECTIFS (NEUBRUTALIST GRID) --- #}
<section class="max-w-7xl mx-auto px-4 mb-40">
<h2 class="text-5xl font-black uppercase italic mb-16 tracking-tighter inline-block border-b-8 border-yellow-500">
{{'about_goals_title'|trans}}
</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{% set goals = [
{'icon': '🎨', 'title': 'about_goal1_title', 'text': 'about_goal1_text', 'color': 'bg-indigo-600'},
{'icon': '🤝', 'title': 'about_goal2_title', 'text': 'about_goal2_text', 'color': 'bg-yellow-500'},
{'icon': '🎭', 'title': 'about_goal3_title', 'text': 'about_goal3_text', 'color': 'bg-indigo-600'},
{'icon': '❤️‍🔥', 'title': 'about_goal4_title', 'text': 'about_goal4_text', 'color': 'bg-red-600'}
] %}
{% for goal in goals %}
<div class="group bg-white border-4 border-gray-900 p-8 shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_#4f46e5] hover:-translate-y-2 transition-all duration-300 italic">
<div class="{{ goal.color }} text-white w-16 h-16 flex items-center justify-center text-3xl border-4 border-gray-900 mb-6 shadow-md group-hover:rotate-12 transition-transform">
{{ goal.icon }}
</div>
<h3 class="text-2xl font-black uppercase mb-4 tracking-tighter">{{ goal.title|trans }}</h3>
<p class="text-gray-600 font-bold leading-relaxed">
{% if loop.last %}
{{ 'about_goal4_text'|trans({
'%ouverte%': '<span class="text-red-600">' ~ 'about_goal4_open_details'|trans ~ '</span>',
'%friendly%': '<span class="text-red-600">' ~ 'about_goal4_friendly_details'|trans ~ '</span>'
})|raw }}
{% else %}
{{ goal.text|trans }}
{% endif %}
</p>
</div>
{% endfor %}
</div>
</section>
{# --- TIMELINE (STREET / BRUTALIST STYLE) --- #}
<section class="bg-gray-900 text-white py-32 border-y-8 border-indigo-600 overflow-hidden relative">
<div class="max-w-5xl mx-auto px-4 relative z-10">
<h2 class="text-6xl md:text-8xl font-black uppercase italic mb-24 tracking-tighter text-yellow-500 outline-text-yellow text-center">
{{'timeline_title'|trans}}
</h2>
<div class="relative">
{# Ligne centrale Esport #}
<div class="absolute left-0 md:left-1/2 top-0 bottom-0 w-2 bg-indigo-600 -translate-x-1/2 hidden md:block opacity-50"></div>
<div class="space-y-24">
{% set events = [
{'date': 'event_creation_date', 'title': 'event_creation_text_title', 'text': 'event_creation_text', 'pos': 'left'},
{'date': 'event_partnership_date', 'title': 'event_partnership_text_title', 'text': 'event_partnership_text', 'pos': 'right'},
{'date': 'event_first_show_date', 'title': 'event_first_show_title', 'text': 'event_first_show_text', 'pos': 'left'},
{'date': 'event_miss_tergnier_date', 'title': 'event_miss_tergnier_title', 'text': 'event_miss_tergnier_text', 'pos': 'right'},
{'date': 'event_website_launch_date', 'title': 'event_website_launch_title', 'text': 'event_website_launch_text', 'pos': 'left'}
] %}
{% for event in events %}
<div class="relative flex flex-col md:flex-row items-center group">
<div class="flex-1 w-full md:{{ event.pos == 'left' ? 'text-right pr-16' : 'order-last text-left pl-16' }}">
<div class="bg-indigo-600 text-white inline-block px-6 py-2 font-black italic text-2xl skew-x-[-15deg] mb-6 shadow-[4px_4px_0px_#eab308]">
{{ event.date|trans }}
</div>
<div class="bg-white text-gray-900 border-4 border-yellow-500 p-8 shadow-[8px_8px_0px_rgba(255,255,255,0.1)] italic group-hover:scale-105 transition-transform">
<h3 class="text-2xl font-black uppercase mb-2 text-indigo-600">{{ event.title|trans }}</h3>
<p class="font-bold text-sm leading-relaxed">{{ event.text|trans }}</p>
</div>
</div>
<div class="w-10 h-10 bg-yellow-500 border-4 border-gray-900 rotate-45 z-10 hidden md:block"></div>
<div class="flex-1 hidden md:block"></div>
</div>
{% endfor %}
</div>
</div>
</div>
{# Texture technique de fond #}
<div class="absolute inset-0 opacity-[0.05] pointer-events-none" style="background-image: url('data:image/svg+xml,%3Csvg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M0 0h20L0 20z\" fill=\"%23ffffff\" fill-opacity=\"1\" fill-rule=\"evenodd\"/%3E%3C/svg%3E');"></div>
</section>
{# --- ACTIVITÉS (RANKING STYLE) --- #}
<section class="py-40 max-w-6xl mx-auto px-4">
<h2 class="text-5xl font-black uppercase italic mb-20 tracking-tighter inline-block border-l-8 border-indigo-600 pl-6">
{{'about_activities_title'|trans}}
</h2>
<div class="grid gap-12">
{% for activity in [
{'icon': '🏆', 'title': 'about_activity1_title', 'text': 'about_activity1_text', 'tags': ['%concours%', '%ouverts%', '%craftsmanship%', '%acting%']},
{'icon': '🛠️', 'title': 'about_activity2_title', 'text': 'about_activity2_text', 'tags': ['%ateliers%']},
{'icon': '🩹', 'title': 'about_activity3_title', 'text': 'about_activity3_text', 'tags': ['%coshopital%', '%reparation%']}
] %}
<div class="flex flex-col md:flex-row gap-10 items-center p-8 border-4 border-gray-900 bg-white hover:bg-gray-50 transition-colors shadow-[8px_8px_0px_rgba(0,0,0,1)]">
<span class="text-7xl group-hover:scale-110 transition-transform">{{ activity.icon }}</span>
<div>
<h3 class="text-4xl font-black uppercase italic mb-4 tracking-tighter text-indigo-700">{{ activity.title|trans }}</h3>
<p class="text-lg font-bold italic leading-relaxed text-gray-700">
{% set text = activity.text|trans %}
{% for tag in activity.tags %}
{% set tag_val = tag|replace({'%': ''}) ~ '_detail' %}
{% set text = text|replace({ (tag): '<span class="bg-yellow-200 px-1 border-b-2 border-yellow-500">' ~ (tag|replace({'%': ''})|trans) ~ '</span>' }) %}
{% endfor %}
{{ text|raw }}
</p>
</div>
</div>
{% endfor %}
</div>
</section>
{# --- FINAL CALL TO ACTION --- #}
<footer class="bg-indigo-600 py-32 border-t-8 border-gray-900 relative overflow-hidden">
<div class="max-w-4xl mx-auto text-center px-4 relative z-10">
<h2 class="text-4xl md:text-6xl font-black uppercase italic mb-12 text-white tracking-tighter leading-none">
{{'about_call_to_action_text'|trans}}
</h2>
<a href="{{ path('app_events') }}" class="group relative inline-block">
<div class="absolute inset-0 bg-gray-900 translate-x-3 translate-y-3 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform"></div>
<div class="relative bg-yellow-500 text-gray-900 px-16 py-8 font-black uppercase italic tracking-widest text-3xl border-4 border-gray-900">
{{'about_call_to_action_button'|trans}}
</div>
</a>
</div>
{# Watermark #}
<div class="absolute inset-0 flex items-center justify-center opacity-10 pointer-events-none">
<span class="text-[20rem] font-black italic uppercase text-indigo-900 tracking-tighter">JOIN</span>
</div>
</footer>
</main>
<style>
/* Conteneur parent en position relative pour l'empilement (absolute) des enfants */
.display {
position: relative;
overflow: hidden;
height: 75vh;
.outline-text {
-webkit-text-stroke: 2px #4f46e5;
color: transparent;
}
/* Les deux images sont superposées et prennent 100% du parent */
.display1, .display2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
/* Styles pour les images (N&B par défaut, couleur au survol) */
filter: grayscale(100%);
transition: filter 0.7s ease-in-out;
cursor: pointer;
z-index: 1;
.outline-text-yellow {
-webkit-text-stroke: 2px #eab308;
color: transparent;
}
/* L'image 1 (gauche) est coupée avec une légère inclinaison */
.display1 {
clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%);
background-position-x: -10vw;
background-position-y: -175px;
}
/* L'image 2 (droite) est coupée avec la diagonale inverse */
.display2 {
clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%);
background-position-x: 20vw;
background-position-y: -40px;
}
/* Activation de la couleur au survol sur l'un ou l'autre élément */
.display1:hover, .display2:hover {
filter: grayscale(0%);
}
/* Style spécifique pour le conteneur du texte */
.image-text-overlay {
position: absolute;
color: white;
background-color: rgba(0, 0, 0, 0.6);
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
line-height: 1.25;
max-width: 80%;
z-index: 10;
}
/* Positionnement pour le texte de gauche (display1) */
.image-text-overlay.left {
bottom: 1rem;
left: 1rem;
}
/* Positionnement pour le texte de droite (display2) */
.image-text-overlay.right {
bottom: 1rem;
right: 1rem;
text-align: right;
}
/* Style pour les icônes de réseaux sociaux */
.social-icons {
display: flex; /* Permet d'aligner les icônes */
margin-top: 0.5rem;
}
/* Aligner les icônes à gauche/droite selon le conteneur */
.image-text-overlay.left .social-icons,
.founders-card .social-icons.left {
justify-content: flex-start;
}
.image-text-overlay.right .social-icons,
.founders-card .social-icons.right {
justify-content: flex-end;
}
/* Style des liens dans les cartes fondateurs */
.founders-card .social-icons a {
color: #1e40af; /* Bleu foncé pour les cartes */
}
.founders-card .social-icons.right a {
margin-left: 0.5rem;
margin-right: 0;
}
/* Styles génériques pour les liens d'icônes */
.social-icons a {
margin-right: 0.5rem;
color: inherit;
transition: color 0.2s ease-in-out;
text-decoration: none;
}
.social-icons a:last-child {
margin-right: 0;
}
.social-icons a:hover {
color: #4299e1; /* Bleu clair au survol */
}
/* Custom style for the timeline line */
.timeline-container {
position: relative;
}
.timeline-container:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%; /* Center the line */
width: 4px;
background: #cbd5e1; /* Gray-300 */
margin-left: -2px;
z-index: 0;
}
.timeline-item {
position: relative;
margin-bottom: 2rem;
}
.timeline-item:nth-child(even) .timeline-date-card {
order: 2;
}
.timeline-item:nth-child(even) .timeline-content {
text-align: right;
order: 1;
}
.timeline-dot {
position: absolute;
top: 0.5rem;
left: 50%;
width: 14px;
height: 14px;
background: #06b6d4; /* Teal-500 */
border-radius: 50%;
border: 3px solid #f0f9ff; /* Blue-50 */
margin-left: -7px;
z-index: 10;
}
@media (max-width: 767px) {
.timeline-container:before {
left: 1.5rem; /* Move line to the left on mobile */
margin-left: 0;
@media (min-width: 1024px) {
.group:hover .relative:not(:hover) {
flex: 0.7;
filter: grayscale(100%) brightness(0.4);
}
.timeline-item {
display: block;
padding-left: 3.5rem; /* Space for the line and dot */
}
.timeline-item:nth-child(even) .timeline-date-card,
.timeline-item:nth-child(odd) .timeline-date-card {
order: 0; /* Reset order */
text-align: left;
}
.timeline-item:nth-child(even) .timeline-content,
.timeline-item:nth-child(odd) .timeline-content {
order: 0; /* Reset order */
text-align: left;
}
.timeline-dot {
left: 1.5rem;
margin-left: -7px;
}
.timeline-date-card {
width: 100% !important;
margin-bottom: 0.5rem;
.group .relative:hover {
flex: 1.3;
}
}
</style>
<main class="w-full px-4 py-12">
<h1 class="text-4xl font-extrabold text-blue-800 mb-6 text-center">{{'about_title'|trans}}</h1>
<section class="max-w-4xl mx-auto mb-12 p-6 bg-gray-50 rounded-xl shadow-lg">
<h2 class="text-2xl font-semibold text-teal-600 mb-4 border-b pb-2">{{'about_section_passion_title'|trans}}</h2>
<p class="text-lg text-gray-700 leading-relaxed">
{{ 'about_passion_p1'|trans({
'%association%': '<span class="font-bold">' ~ 'about_passion_association_details'|trans ~ '</span>',
'%mission%': '<span class="font-bold">' ~ 'about_passion_mission_details'|trans ~ '</span>'
})|raw }}
<br><br>
{{ 'about_passion_p2'|trans({
'%fait_main%': '<span class="font-bold">' ~ 'about_passion_costume_handmade'|trans ~ '</span>',
'%egalite%': '<span class="font-bold">' ~ 'about_passion_equality'|trans ~ '</span>'
})|raw }}
</p>
</section>
<section class="max-w-5xl mx-auto mb-12">
<h2 class="text-3xl font-bold text-blue-700 mb-6 text-center">{{'about_founders_title'|trans}}</h2>
<div class="grid md:grid-cols-2 gap-8 lg:hidden">
<div class="founders-card p-4 bg-white border border-blue-100 rounded-xl shadow-md text-center">
<h3 class="text-xl font-bold text-blue-800">ShokoCosplay</h3>
<p class="text-teal-600 font-semibold mb-2">{{'about_founder_shoko_role'|trans}}</p>
<p class="text-sm text-gray-700 mb-2">{{'about_email_label'|trans}}: <a href="mailto:shoko-cosplay@e-cosplay.fr" class="text-blue-600 hover:underline">shoko-cosplay@e-cosplay.fr</a></p>
<div class="social-icons" style="justify-content: center">
<a href="https://www.instagram.com/cosplay_shoko/" target="_blank" aria-label="{{'about_shoko_instagram_aria'|trans}}"><img src="{{ asset('assets/social/instagram.svg') }}" alt="logo instagram" width="30" height="30"></a>
<a href="https://www.tiktok.com/@cosshoko?lang=fr" target="_blank" aria-label="{{'about_shoko_tiktok_aria'|trans}}"><img src="{{ asset('assets/social/tikok.svg') }}" alt="logo tiktok" width="30" height="30"></a>
<a href="https://www.facebook.com/CosplayShoko" target="_blank" aria-label="{{'about_shoko_facebook_aria'|trans}}"><img src="{{ asset('assets/social/facebook.svg') }}" alt="logo facebook" width="30" height="30"></a>
</div>
</div>
<div class="founders-card p-4 bg-white border border-blue-100 rounded-xl shadow-md text-center">
<h3 class="text-xl font-bold text-blue-800">Marta Gator</h3>
<p class="text-teal-600 font-semibold mb-2">{{'about_founder_marta_role'|trans}}</p>
<p class="text-sm text-gray-700 mb-2">{{'about_email_label'|trans}}: <a href="mailto:marta_gator@e-cosplay.fr" class="text-blue-600 hover:underline">marta_gator@e-cosplay.fr</a></p>
<div class="social-icons" style="justify-content: center">
<a href="https://www.facebook.com/profile.php?id=100081002010111" target="_blank" aria-label="{{'about_marta_facebook_aria'|trans}}"><img src="{{ asset('assets/social/facebook.svg') }}" alt="logo tiktok" width="30" height="30"> </a>
<a href="https://www.tiktok.com/@marta_gator" target="_blank" aria-label="{{'about_marta_tiktok_aria'|trans}}"><img src="{{ asset('assets/social/tikok.svg') }}" alt="logo facebook" width="30" height="30"></a>
<a href="https://www.instagram.com/marta_gator/" target="_blank" aria-label="{{'about_marta_instagram_aria'|trans}}"><img src="{{ asset('assets/social/instagram.svg') }}" alt="logo instagram" width="30" height="30"></a>
</div>
</div>
</div>
</section>
<div class="display w-full h-screen mb-12 hidden lg:block">
<div class="display1"
style="background-image: url('{{ asset('assets/images/shoko.jpg') | imagine_filter('webp') }}');"
title="{{'about_shoko_cosplay_title'|trans}}">
<div class="image-text-overlay left">
<p class="font-bold text-lg">ShokoCosplay</p>
<p>{{'about_founder_shoko_role_short'|trans}}</p>
<p>{{'about_photographer_label'|trans}}: <a href="https://www.instagram.com/dystopix_photography/" target="_blank" class="text-blue-300 hover:underline">dystopix_photography</a></p>
<p class="text-xs">{{'about_email_label'|trans}}: <a href="mailto:shoko-cosplay@e-cosplay.fr" class="text-blue-300 hover:underline">shoko-cosplay@e-cosplay.fr</a></p>
<div class="social-icons">
<a href="https://www.instagram.com/cosplay_shoko/" target="_blank" aria-label="{{'about_shoko_instagram_aria'|trans}}"><i class="fab fa-instagram"></i></a>
<a href="https://www.tiktok.com/@cosshoko?lang=fr" target="_blank" aria-label="{{'about_shoko_tiktok_aria'|trans}}"><i class="fab fa-tiktok"></i></a>
<a href="https://www.facebook.com/CosplayShoko" target="_blank" aria-label="{{'about_shoko_facebook_aria'|trans}}"><i class="fab fa-facebook"></i></a>
</div>
</div>
</div>
<div class="display2"
style="background-image: url('{{ asset('assets/images/marta.jpg') | imagine_filter('webp') }}');"
title="{{'about_marta_cosplay_title'|trans}}">
<div class="image-text-overlay right">
<p class="font-bold text-lg">Marta Gator</p>
<p>{{'about_founder_marta_role_short'|trans}}</p>
<p class="text-xs">{{'about_email_label'|trans}}: <a href="mailto:marta_gator@e-cosplay.fr" class="text-blue-300 hover:underline">marta_gator@e-cosplay.fr</a></p>
<div class="social-icons">
<a href="https://www.facebook.com/profile.php?id=100081002010111" target="_blank" aria-label="{{'about_marta_facebook_aria'|trans}}"><i class="fab fa-facebook"></i></a>
<a href="https://www.tiktok.com/@marta_gator" target="_blank" aria-label="{{'about_marta_tiktok_aria'|trans}}"><i class="fab fa-tiktok"></i></a>
<a href="https://www.instagram.com/marta_gator/" target="_blank" aria-label="{{'about_marta_instagram_aria'|trans}}"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
<section class="mb-12 max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-blue-700 mb-6 text-center">{{'about_goals_title'|trans}}</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="p-6 bg-white border border-blue-200 rounded-xl shadow-md transition transform hover:scale-[1.02]">
<div class="text-3xl text-teal-600 mb-3">🎨</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">{{'about_goal1_title'|trans}}</h3>
<p class="text-gray-600">{{'about_goal1_text'|trans}}</p>
</div>
<div class="p-6 bg-white border border-blue-200 rounded-xl shadow-md transition transform hover:scale-[1.02]">
<div class="text-3xl text-teal-600 mb-3">🤝</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">{{'about_goal2_title'|trans}}</h3>
<p class="text-gray-600">{{'about_goal2_text'|trans}}</p>
</div>
<div class="p-6 bg-white border border-blue-200 rounded-xl shadow-md transition transform hover:scale-[1.02]">
<div class="text-3xl text-teal-600 mb-3">🎭</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">{{'about_goal3_title'|trans}}</h3>
<p class="text-gray-600">{{'about_goal3_text'|trans}}</p>
</div>
<div class="p-6 bg-white border border-blue-200 rounded-xl shadow-md transition transform hover:scale-[1.02] border-4 border-red-300">
<div class="text-3xl text-red-600 mb-3">❤️‍🔥</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">{{'about_goal4_title'|trans}}</h3>
<p class="text-gray-600">
{{ 'about_goal4_text'|trans({
'%ouverte%': '<span class="font-bold">' ~ 'about_goal4_open_details'|trans ~ '</span>',
'%friendly%': '<span class="font-bold">' ~ 'about_goal4_friendly_details'|trans ~ '</span>'
})|raw }}
</p>
</div>
</div>
</section>
{# --- NEW TIMELINE SECTION --- #}
<section class="mb-12 max-w-4xl mx-auto p-6 bg-white rounded-xl shadow-xl">
<h2 class="text-3xl font-bold text-blue-700 mb-10 text-center">{{'timeline_title'|trans}}</h2>
<div class="timeline-container">
{# Event 1: Creation #}
<div class="timeline-item flex items-start md:items-center justify-between flex-wrap">
<div class="timeline-date-card md:w-5/12 p-4 bg-teal-50 text-center rounded-lg shadow-sm font-bold text-teal-700">
{{'event_creation_date'|trans}}
</div>
<div class="timeline-dot"></div>
<div class="timeline-content md:w-5/12 p-4 bg-gray-50 rounded-lg shadow-md">
<h3 class="font-semibold text-lg text-blue-800 mb-1">{{'event_creation_text_title'|trans}}</h3>
<p class="text-gray-600 text-sm">
{{'event_creation_text'|trans}}
</p>
</div>
</div>
{# Event 2: Partnership #}
<div class="timeline-item flex items-start md:items-center justify-between flex-wrap">
<div class="timeline-content md:w-5/12 p-4 bg-gray-50 rounded-lg shadow-md">
<h3 class="font-semibold text-lg text-blue-800 mb-1">{{'event_partnership_text_title'|trans}}</h3>
<p class="text-gray-600 text-sm">
{{'event_partnership_text'|trans}}
</p>
</div>
<div class="timeline-dot"></div>
<div class="timeline-date-card md:w-5/12 p-4 bg-teal-50 text-center rounded-lg shadow-sm font-bold text-teal-700">
{{'event_partnership_date'|trans}}
</div>
</div>
{# Event 3: First Event #}
<div class="timeline-item flex items-start md:items-center justify-between flex-wrap">
<div class="timeline-date-card md:w-5/12 p-4 bg-teal-50 text-center rounded-lg shadow-sm font-bold text-teal-700">
{{'event_first_show_date'|trans}}
</div>
<div class="timeline-dot"></div>
<div class="timeline-content md:w-5/12 p-4 bg-gray-50 rounded-lg shadow-md">
<h3 class="font-semibold text-lg text-blue-800 mb-1">{{'event_first_show_title'|trans}}</h3>
<p class="text-gray-600 text-sm">
{{'event_first_show_text'|trans}}
</p>
</div>
</div>
{# Event 4: Miss Tergnier 2025 #}
<div class="timeline-item flex items-start md:items-center justify-between flex-wrap">
<div class="timeline-content md:w-5/12 p-4 bg-gray-50 rounded-lg shadow-md">
<h3 class="font-semibold text-lg text-blue-800 mb-1">{{'event_miss_tergnier_title'|trans}}</h3>
<p class="text-gray-600 text-sm">
{{'event_miss_tergnier_text'|trans}}
</p>
</div>
<div class="timeline-dot"></div>
<div class="timeline-date-card md:w-5/12 p-4 bg-teal-50 text-center rounded-lg shadow-sm font-bold text-teal-700">
{{'event_miss_tergnier_date'|trans}}
</div>
</div>
{# Event 5: Website Launch #}
<div class="timeline-item flex items-start md:items-center justify-between flex-wrap">
<div class="timeline-date-card md:w-5/12 p-4 bg-teal-50 text-center rounded-lg shadow-sm font-bold text-teal-700">
{{'event_website_launch_date'|trans}}
</div>
<div class="timeline-dot"></div>
<div class="timeline-content md:w-5/12 p-4 bg-gray-50 rounded-lg shadow-md">
<h3 class="font-semibold text-lg text-blue-800 mb-1">{{'event_website_launch_title'|trans}}</h3>
<p class="text-gray-600 text-sm">
{{'event_website_launch_text'|trans}}
</p>
</div>
</div>
</div>
</section>
{# --- END NEW TIMELINE SECTION --- #}
<section class="mb-12 p-8 bg-blue-100 rounded-xl shadow-inner max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-blue-700 mb-6 text-center">{{'about_activities_title'|trans}}</h2>
<div class="space-y-8">
<div class="md:flex md:items-start p-4 bg-white rounded-lg shadow">
<div class="flex-shrink-0 text-3xl text-pink-600 md:mr-6 mb-4 md:mb-0">🏆</div>
<div>
<h3 class="text-2xl font-semibold text-gray-800 mb-2">{{'about_activity1_title'|trans}}</h3>
<p class="text-gray-600">
{{ 'about_activity1_text'|trans({
'%concours%': '<span class="font-bold">' ~ 'about_activity1_comp_detail'|trans ~ '</span>',
'%ouverts%': '<span class="font-bold">' ~ 'about_activity1_open_detail'|trans ~ '</span>',
'%craftsmanship%': '<span class="font-bold">' ~ 'about_activity1_craft_detail'|trans ~ '</span>',
'%acting%': '<span class="font-bold">' ~ 'about_activity1_acting_detail'|trans ~ '</span>'
})|raw }}
</p>
</div>
</div>
<div class="md:flex md:items-start p-4 bg-white rounded-lg shadow">
<div class="flex-shrink-0 text-3xl text-pink-600 md:mr-6 mb-4 md:mb-0">🛠️</div>
<div>
<h3 class="text-2xl font-semibold text-gray-800 mb-2">{{'about_activity2_title'|trans}}</h3>
<p class="text-gray-600">
{{ 'about_activity2_text'|trans({
'%ateliers%': '<span class="font-bold">' ~ 'about_activity2_workshop_detail'|trans ~ '</span>'
})|raw }}
</p>
</div>
</div>
<div class="md:flex md:items-start p-4 bg-white rounded-lg shadow">
<div class="flex-shrink-0 text-3xl text-pink-600 md:mr-6 mb-4 md:mb-0">🩹</div>
<div>
<h3 class="text-2xl font-semibold text-gray-800 mb-2">{{'about_activity3_title'|trans}}</h3>
<p class="text-gray-600">
{{ 'about_activity3_text'|trans({
'%coshopital%': '<span class="font-bold">' ~ 'about_activity3_coshospital_detail'|trans ~ '</span>',
'%reparation%': '<span class="font-bold">' ~ 'about_activity3_repair_detail'|trans ~ '</span>'
})|raw }}
</p>
</div>
</div>
</div>
</section>
<section class="max-w-4xl mx-auto text-center p-6 bg-teal-100 rounded-xl shadow-xl">
<p class="text-xl font-medium text-gray-800 mb-4">
{{'about_call_to_action_text'|trans}}
</p>
<a href="{{ path('app_events') }}" class="inline-block px-8 py-3 bg-red-600 text-white font-bold rounded-full shadow-lg hover:bg-red-700 transition duration-300">
{{'about_call_to_action_button'|trans}}
</a>
</section>
</main>
{% endblock %}