```
✨ 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
@@ -19,6 +19,7 @@ class PagesController extends AbstractController
|
||||
public function index(): Response
|
||||
{
|
||||
return $this->render('pages.twig',[
|
||||
'cosplayers' => []
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@@ -172,7 +172,7 @@ class SitemapSubscriber
|
||||
$decoratedUrlMembers->addImage(new GoogleImage($this->cacheManager->resolve('assets/images/logo.jpg','webp')));
|
||||
$decoratedUrlMembers = new GoogleMultilangUrlDecorator($decoratedUrlMembers);
|
||||
foreach ($langs as $lang) {
|
||||
$decoratedUrlMembers->addLink($urlGenerator->generate('app_ruless',['lang'=>$lang], UrlGeneratorInterface::ABSOLUTE_URL), $lang);
|
||||
$decoratedUrlMembers->addLink($urlGenerator->generate('app_rules',['lang'=>$lang], UrlGeneratorInterface::ABSOLUTE_URL), $lang);
|
||||
}
|
||||
$urlContainer->addUrl($decoratedUrlMembers, 'default');
|
||||
$cites =[
|
||||
|
||||
@@ -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;
|
||||
@media (min-width: 1024px) {
|
||||
.group:hover .relative:not(:hover) {
|
||||
flex: 0.7;
|
||||
filter: grayscale(100%) brightness(0.4);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
.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 %}
|
||||
|
||||
@@ -4,144 +4,60 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
{# --- LOGIQUE DE NOËL (15 Déc au 05 Jan) --- #}
|
||||
{# --- LOGIQUE DE NOËL (Adaptée au style Brutaliste) --- #}
|
||||
{% set current_date = "now"|date("m-d") %}
|
||||
{% set is_christmas = (current_date >= "12-15" or current_date <= "01-05") %}
|
||||
|
||||
<title>E-Cosplay | {% block title %}Accueil{% endblock %}</title>
|
||||
<meta name="description" content="{% block meta_description '' %}">
|
||||
|
||||
{# OPEN GRAPH / TWITTER CARD / SEO META #}
|
||||
{# SEO & Open Graph (Conservés) #}
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url"
|
||||
content="{{ url(app.request.attributes.get('_route','app_home'), app.request.attributes.get('_route_params',[])) }}">
|
||||
<meta property="og:url" content="{{ url(app.request.attributes.get('_route','app_home'), app.request.attributes.get('_route_params',[])) }}">
|
||||
<meta property="og:title" content="E-Cosplay | {{ block('title') }}">
|
||||
<meta property="og:description" content="{{ block('meta_description') }}">
|
||||
<meta property="og:image" content="{{ asset('assets/images/logo.jpg') | imagine_filter('webp') }}">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:url"
|
||||
content="{{ url(app.request.attributes.get('_route','app_home'), app.request.attributes.get('_route_params',[])) }}">
|
||||
<meta name="twitter:title" content="E-Cosplay | {{ block('title') }}">
|
||||
<meta name="twitter:description" content="{{ block('meta_description') }}">
|
||||
<meta name="twitter:image" content="{{ asset('assets/images/logo.jpg') | imagine_filter('webp') }}">
|
||||
<meta name="twitter:site" content="@E_Cosplay_asso">
|
||||
|
||||
<meta name="author" content="Association E-Cosplay">
|
||||
<meta name="keywords" content="cosplay, concours cosplay, organisation, événement, geek">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
{% if no_index is defined %}
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
{% endif %}
|
||||
|
||||
{# FAVICONS & Manifest #}
|
||||
{# FAVICONS #}
|
||||
<link rel="icon" type="image/png" href="{{ asset('favicon/favicon-96x96.png') }}" sizes="96x96"/>
|
||||
<link rel="icon" type="image/svg+xml" href="{{ asset('favicon/favicon.svg') }}"/>
|
||||
<link rel="shortcut icon" href="{{ asset('favicon/favicon.ico') }}"/>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('favicon/apple-touch-icon.png') }}"/>
|
||||
<meta name="apple-mobile-web-app-title" content="E-Cosplay"/>
|
||||
<link rel="manifest" href="{{ asset('site.webmanifest') }}"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<meta name="google-site-verification" content="D6YvgLKg4oj2Ksk_cYhO3fijbmxZWib7wqqHTJyfftQ"/>
|
||||
<meta name="env" content="{{ app.environment }}">
|
||||
{% block canonical_url %}{% endblock %}
|
||||
|
||||
{# STYLES SPÉCIFIQUES NOËL #}
|
||||
{% if is_christmas %}
|
||||
{# CONFIGURATION DES COULEURS NEUBRUTALISTES #}
|
||||
<style>
|
||||
.christmas-border { border-bottom: 4px solid #c41e3a !important; }
|
||||
.christmas-footer { border-top: 4px dashed #c41e3a !important; }
|
||||
.christmas-active-link { color: #c41e3a !important; font-weight: bold; }
|
||||
</style>
|
||||
{% endif %}
|
||||
:root {
|
||||
--main-bg: #fbfbfb;
|
||||
--accent-indigo: #4f46e5;
|
||||
--accent-yellow: #fabf04;
|
||||
--accent-pink: #ec4899;
|
||||
--brutal-black: #111827;
|
||||
--border-width: 4px;
|
||||
}
|
||||
|
||||
{# SCHÉMAS JSON-LD #}
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebSite",
|
||||
"name": "E-Cosplay",
|
||||
"url": "{{ app.request.schemeAndHttpHost }}"
|
||||
body { background-color: var(--main-bg); }
|
||||
.brutal-shadow { shadow-[8px_8px_0px_rgba(0,0,0,1)]; }
|
||||
.brutal-border { border: var(--border-width) solid var(--brutal-black); }
|
||||
|
||||
{% if is_christmas %}
|
||||
/* Thème Noël Esport : On remplace l'indigo par un rouge vibrant et le jaune par un vert sapin néon */
|
||||
:root {
|
||||
--accent-indigo: #c41e3a;
|
||||
--accent-yellow: #166534;
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "Association E-Cosplay",
|
||||
"url": "{{ app.request.schemeAndHttpHost }}",
|
||||
"logo": "{{ asset('assets/images/logo.jpg') | imagine_filter('webp') }}",
|
||||
"sameAs": [
|
||||
"https://www.facebook.com/assocationecosplay",
|
||||
"https://www.instagram.com/asso_ecosplay/"
|
||||
],
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "42 rue de Saint-Quentin",
|
||||
"addressLocality": "Beautor",
|
||||
"postalCode": "02800",
|
||||
"addressCountry": "FR"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org/",
|
||||
"@type": "Person",
|
||||
"name": "ShokoCosplay",
|
||||
"image": "{{ asset('assets/images/shoko.jpg') | imagine_filter('webp') }}",
|
||||
"jobTitle": "Président",
|
||||
"sameAs": [
|
||||
"https://www.instagram.com/cosplay_shoko/",
|
||||
"https://www.tiktok.com/@cosshoko?lang=fr",
|
||||
"https://www.facebook.com/CosplayShoko"
|
||||
],
|
||||
"worksFor": {
|
||||
"@type": "Organization",
|
||||
"name": "E-Cosplay"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org/",
|
||||
"@type": "Person",
|
||||
"name": "Marta Gator",
|
||||
"image": "{{ asset('assets/images/marta.jpg') | imagine_filter('webp') }}",
|
||||
"jobTitle": "Secrétaire",
|
||||
"sameAs": [
|
||||
"https://www.facebook.com/profile.php?id=100081002010111",
|
||||
"https://www.tiktok.com/@marta_gator",
|
||||
"https://www.instagram.com/marta_gator/"
|
||||
],
|
||||
"worksFor": {
|
||||
"@type": "Organization",
|
||||
"name": "E-Cosplay"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% block breadcrumb_schema %}{% endblock %}
|
||||
{% block stylesheets %}{% endblock %}
|
||||
<script type="text/javascript" src="/ts.js" async></script>
|
||||
{{ vite_asset('app.js', []) }}
|
||||
{% if app.environment == "prod" %}
|
||||
<script defer src="https://datas.e-cosplay.fr/vs.js"
|
||||
data-website-id="b929d372-fbea-403e-9ae2-781433828787"></script>
|
||||
<script src="/sc.js" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
Sentry.onLoad(function() {
|
||||
Sentry.init({
|
||||
tunnel:'/tunnel',
|
||||
tracesSampleRate: 1.0,
|
||||
replaysSessionSampleRate: 0.1,
|
||||
replaysOnErrorSampleRate: 1.0,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
</style>
|
||||
|
||||
{# SCHÉMAS JSON-LD (Conservés) #}
|
||||
{% block breadcrumb_schema %}{% endblock %}
|
||||
|
||||
{{ vite_asset('app.js', []) }}
|
||||
</head>
|
||||
<body class="flex flex-col min-h-screen bg-gray-100">
|
||||
|
||||
<body class="flex flex-col min-h-screen font-sans antialiased text-gray-900">
|
||||
|
||||
{% set menu_links = [
|
||||
{ 'name': 'Accueil'|trans, 'route': 'app_home' },
|
||||
@@ -156,104 +72,83 @@
|
||||
{ 'name': 'Contact'|trans, 'route': 'app_contact' }
|
||||
] %}
|
||||
|
||||
<header class="bg-white shadow-md sticky top-0 z-40 {% if is_christmas %}christmas-border{% endif %}">
|
||||
<nav class="mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-16">
|
||||
{# --- BARRE DE NAVIGATION : COMMAND CENTER --- #}
|
||||
<header class="sticky top-0 z-50 bg-white border-b-4 border-gray-900">
|
||||
<nav class="mx-auto px-4 lg:px-8">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
|
||||
{# LOGO AVEC BONNET DE NOËL #}
|
||||
<div class="flex-shrink-0 flex items-center">
|
||||
<a href="{{ path('app_home') }}" class="flex items-center space-x-2 text-xl font-bold text-gray-900 relative">
|
||||
{% if is_christmas %}
|
||||
<span class="absolute -top-3 -left-3 text-xl z-10 select-none transform -rotate-12">🎅</span>
|
||||
{% endif %}
|
||||
<img class="h-8 w-auto" width="57px" height="32px" src="{{ asset('assets/images/logo.jpg') | imagine_filter('logo') }}"
|
||||
alt="E-Cosplay Logo">
|
||||
<span class="text-gray-900">E-Cosplay</span>
|
||||
{# LOGO #}
|
||||
<div class="flex-shrink-0">
|
||||
<a href="{{ path('app_home') }}" class="flex items-center group">
|
||||
<div class="relative p-2 border-2 border-gray-900 shadow-[4px_4px_0px_rgba(0,0,0,1)] group-hover:translate-x-1 group-hover:translate-y-1 group-hover:shadow-none transition-all">
|
||||
<img class="h-8 w-auto" src="{{ asset('assets/images/logo.jpg') | imagine_filter('logo') }}" alt="E-Cosplay">
|
||||
{% if is_christmas %}<span class="absolute -top-4 -left-4 text-2xl rotate-[-15deg]">🎅</span>{% endif %}
|
||||
</div>
|
||||
<span class="ml-4 text-2xl font-black uppercase tracking-tighter italic">E-Cosplay</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# NAVIGATION DESKTOP #}
|
||||
<div class="hidden md:flex md:space-x-4 items-center">
|
||||
<div class="hidden md:flex md:space-x-1">
|
||||
{# DESKTOP NAV #}
|
||||
<div class="hidden lg:flex items-center space-x-1">
|
||||
{% for link in menu_links %}
|
||||
{% set is_active = (app.request.get('_route') == link.route) %}
|
||||
<a href="{{ path(link.route) }}"
|
||||
class="{% if is_active %}bg-gray-100 {% if is_christmas %}christmas-active-link{% else %}text-red-800{% endif %}{% else %}text-gray-700 hover:bg-gray-100 hover:text-red-800{% endif %} px-3 py-2 rounded-md text-sm font-medium transition duration-150">
|
||||
class="px-3 py-2 text-xs font-black uppercase tracking-widest transition-all
|
||||
{% if is_active %} bg-yellow-400 border-2 border-gray-900 shadow-[2px_2px_0px_rgba(0,0,0,1)]
|
||||
{% else %} hover:text-indigo-600 {% endif %}">
|
||||
{{ link.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{# SÉLECTEUR DE LANGUE #}
|
||||
<div class="flex items-center space-x-2 border-l border-gray-200 pl-4">
|
||||
{% set current_route = app.request.attributes.get('_route','app_home') %}
|
||||
{% set current_params = app.request.attributes.get('_route_params',[]) %}
|
||||
{% set current_query = app.request.query.all %}
|
||||
{# ACTIONS (Lang, Cart, User) #}
|
||||
<div class="flex items-center space-x-4 border-l-4 border-gray-900 pl-6 h-full">
|
||||
|
||||
{# SÉLECTEUR LANGUE PRO #}
|
||||
<div class="hidden xl:flex space-x-2">
|
||||
{% for lang in ['fr', 'en','cn','ger','es'] %}
|
||||
{% set is_active_lang = (app.request.locale == lang) %}
|
||||
{% set lang_url = path(current_route, current_params|merge(current_query)|merge({'lang': lang})) %}
|
||||
<a href="{{ lang_url }}" class="text-xs font-bold uppercase transition duration-150 {% if is_active_lang %}text-red-600 border-b-2 border-red-600{% else %}text-gray-500 hover:text-red-600{% endif %}">
|
||||
<a href="{{ path(app.request.attributes.get('_route','app_home'), app.request.attributes.get('_route_params',[])|merge({'lang': lang})) }}"
|
||||
class="text-[10px] font-black uppercase p-1 border-2 border-transparent {% if app.request.locale == lang %} border-gray-900 bg-gray-900 text-white {% else %} hover:border-gray-900 {% endif %}">
|
||||
{{ lang }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{# PANIER #}
|
||||
<button id="openCartDesktop" type="button" class="relative p-2 text-gray-700 hover:text-red-600 rounded-full">
|
||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
|
||||
</svg>
|
||||
<span id="cartCountDesktop" class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">0</span>
|
||||
{# ICONS #}
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="openCartDesktop" class="relative p-2 border-2 border-gray-900 hover:bg-pink-500 hover:text-white transition-colors">
|
||||
<i class="fas fa-shopping-cart"></i>
|
||||
<span id="cartCountDesktop" class="absolute -top-2 -right-2 bg-indigo-600 text-white text-[10px] font-black w-5 h-5 flex items-center justify-center border-2 border-gray-900">0</span>
|
||||
</button>
|
||||
|
||||
{# COMPTE #}
|
||||
<div class="relative">
|
||||
<button id="userMenuButtonDesktop" type="button" class="p-2 text-gray-700 hover:text-red-600 rounded-full">
|
||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||
</svg>
|
||||
<div class="relative group">
|
||||
<button class="p-2 border-2 border-gray-900 hover:bg-gray-900 hover:text-white transition-colors">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
</button>
|
||||
<div id="userMenuDesktop" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden z-50">
|
||||
<div class="py-1">
|
||||
<div class="absolute right-0 mt-2 w-48 bg-white border-4 border-gray-900 shadow-[8px_8px_0px_rgba(0,0,0,1)] hidden group-hover:block z-50">
|
||||
{% if is_granted('ROLE_USER') %}
|
||||
<div class="block px-4 py-2 text-sm text-gray-900 font-semibold border-b border-gray-100">{{ app.user.username|default('Compte') }}</div>
|
||||
<a href="{{ path('admin_dashboard') }}" class="block px-4 py-2 text-sm text-cyan-600 hover:bg-gray-100">{{ 'logged_admin'|trans }}</a>
|
||||
<a href="{{ path('app_logout') }}" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">{{ 'logout_link'|trans }}</a>
|
||||
<div class="p-3 border-b-2 border-gray-900 font-black text-xs uppercase bg-gray-50">{{ app.user.username }}</div>
|
||||
<a href="{{ path('admin_dashboard') }}" class="block p-3 text-xs font-bold uppercase hover:bg-indigo-600 hover:text-white">Admin Panel</a>
|
||||
<a href="{{ path('app_logout') }}" class="block p-3 text-xs font-bold uppercase hover:bg-red-600 hover:text-white text-red-600">Logout</a>
|
||||
{% else %}
|
||||
<a href="{{ path('app_login') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">{{ 'login_link'|trans }}</a>
|
||||
<a href="{{ path('app_login') }}" class="block p-3 text-xs font-bold uppercase hover:bg-indigo-600 hover:text-white">Login</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# MOBILE ICONS #}
|
||||
<div class="md:hidden flex items-center space-x-2">
|
||||
<button id="userMenuButtonMobile" type="button" class="p-2 text-gray-700 hover:text-red-600"><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></button>
|
||||
<div id="userMenuMobile" class="origin-top-right absolute right-0 mt-12 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden z-50">
|
||||
<div class="py-1">
|
||||
{% if is_granted('ROLE_USER') %}<div class="block px-4 py-2 text-sm text-gray-900 font-semibold border-b border-gray-100">{{ app.user.username }}</div>{% else %}<a href="{{ path('app_login') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">{{ 'login_link'|trans }}</a>{% endif %}
|
||||
<button id="mobileMenuButton" class="lg:hidden p-2 border-2 border-gray-900 bg-yellow-400">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button id="openCartMobile" type="button" class="relative p-2 text-gray-700"><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg><span id="cartCountMobile" class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold text-white bg-red-600 rounded-full">0</span></button>
|
||||
<button id="mobileMenuButton" type="button" class="text-red-500 p-2"><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{# MOBILE MENU #}
|
||||
<div class="md:hidden hidden" id="mobile-menu">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
{% if is_christmas %}
|
||||
<div class="px-3 py-2 text-sm font-bold text-red-600 border-b border-red-100 flex items-center justify-between">
|
||||
<span>🎄 Joyeuses Fêtes !</span>
|
||||
<span class="text-xs font-normal opacity-70">15 déc. - 05 janv.</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{# MOBILE MENU SLIDE #}
|
||||
<div id="mobile-menu" class="hidden lg:hidden border-t-4 border-gray-900 bg-white">
|
||||
<div class="p-4 space-y-2 uppercase font-black italic">
|
||||
{% for link in menu_links %}
|
||||
{% set is_active = (app.request.get('_route') == link.route) %}
|
||||
<a href="{{ path(link.route) }}"
|
||||
class="block {% if is_active %}bg-gray-100 text-red-600{% else %}text-gray-700 hover:bg-gray-100 hover:text-red-600{% endif %} px-3 py-2 rounded-md text-base font-medium transition duration-150">
|
||||
<a href="{{ path(link.route) }}" class="block p-3 border-2 border-transparent hover:border-gray-900 hover:bg-gray-50">
|
||||
{{ link.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
@@ -265,71 +160,77 @@
|
||||
{% block body %}{% endblock %}
|
||||
</main>
|
||||
|
||||
{# OFF-CANVAS CART #}
|
||||
<div id="cartSidebar" class="fixed top-0 right-0 w-full md:w-96 h-full bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-50 flex flex-col">
|
||||
<div class="p-4 border-b border-gray-200 flex justify-between items-center">
|
||||
<h2 class="text-xl font-bold text-gray-900">{{ 'your_cart'|trans }}</h2>
|
||||
<button id="closeCartButton" type="button" class="text-gray-400 hover:text-gray-600 p-2 rounded-full transition duration-150">
|
||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="cartItemsContainer" class="flex-grow overflow-y-auto p-4 space-y-4">
|
||||
<div class="text-center text-gray-500 py-12">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
||||
<p class="mt-1">{{ 'cart_empty'|trans }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 border-t border-gray-200">
|
||||
<div class="flex justify-between font-bold text-lg mb-4">
|
||||
<span>{{ 'subtotal_label'|trans }}:</span>
|
||||
<span id="cartSubtotal">0.00 €</span>
|
||||
</div>
|
||||
{# <a href="" class="w-full block text-center bg-red-600 text-white py-3 rounded-md hover:bg-red-700 transition duration-150 font-semibold">{{ 'checkout_button'|trans }}</a>#}
|
||||
</div>
|
||||
</div>
|
||||
<div id="cartBackdrop" class="fixed inset-0 bg-black opacity-50 z-40 hidden transition-opacity duration-300" aria-hidden="true"></div>
|
||||
{# --- FOOTER : THE TERMINAL --- #}
|
||||
<footer class="bg-yellow-400 border-t-8 border-gray-900 text-gray-900 mt-auto">
|
||||
<div class="max-w-7xl mx-auto py-12 px-4 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12 border-b-4 border-gray-900 pb-12">
|
||||
|
||||
<footer class="bg-[#FABF04] text-gray-900 border-t {% if is_christmas %}christmas-footer{% else %}border-red-600{% endif %}">
|
||||
<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
|
||||
{% block footer %}
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 pb-6 mb-4 border-b border-gray-600">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-3 text-gray-900">{{ 'footer_contact_title'|trans }}</h3>
|
||||
<p class="text-sm text-gray-700">42 rue de Saint-Quentin<br>02800 Beautor, FRANCE</p>
|
||||
<p class="text-sm text-gray-700 mt-2"><a href="mailto:contact@e-cosplay.fr" class="hover:text-red-600">contact@e-cosplay.fr</a></p>
|
||||
{# CONTACT #}
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-3xl font-black uppercase tracking-tighter italic border-b-4 border-gray-900 inline-block">{{ 'footer_contact_title'|trans }}</h3>
|
||||
<p class="font-bold text-lg leading-tight">42 RUE DE SAINT-QUENTIN<br>02800 BEAUTOR, FRANCE</p>
|
||||
<a href="mailto:contact@e-cosplay.fr" class="inline-block bg-gray-900 text-white px-4 py-2 font-black uppercase text-sm hover:bg-indigo-600 transition-colors">
|
||||
contact@e-cosplay.fr
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-3 text-gray-900">{{ 'footer_follow_us_title'|trans }}</h3>
|
||||
<div class="flex space-x-4 mb-4">
|
||||
<a href="https://www.facebook.com/assocationecosplay" target="_blank" class="text-gray-700 hover:text-red-600 transition"><img src="{{ asset('assets/social/facebook.svg') }}" width="30" height="30" alt="FB"></a>
|
||||
<a href="https://www.instagram.com/asso_ecosplay/" target="_blank" class="text-gray-700 hover:text-red-600 transition"><img src="{{ asset('assets/social/instagram.svg') }}" width="30" height="30" alt="IG"></a>
|
||||
</div>
|
||||
{% set stripeWidth = isMobile() ? "100%" : "400" %}
|
||||
<iframe width="{{ stripeWidth }}" height="40" style="border:0;" src="https://climate.stripe.com/badge/qrsnOf?theme=light&size=small&locale={{ app.request.locale }}-{{ app.request.locale|upper }}"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-3 text-gray-900">E-Cosplay</h3>
|
||||
{{ 'footer_mission_description'|trans|raw }}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
<div class="md:flex md:justify-between md:items-center text-sm">
|
||||
<div class="text-center md:text-left mb-4 md:mb-0">
|
||||
<p>© {{ "now"|date("Y") }} E-Cosplay. {{ 'all_rights_reserved'|trans }}.</p>
|
||||
<p class="text-xs text-gray-600 mt-1">RNA N°W022006988 - {{ 'footer_realise'|trans }} <a href="https://www.siteconsei.fr" target="_blank">SITECONSEIL</a></p>
|
||||
{# SOCIAL & STRIPE #}
|
||||
<div class="space-y-6">
|
||||
<h3 class="text-3xl font-black uppercase tracking-tighter italic border-b-4 border-gray-900 inline-block">{{ 'footer_follow_us_title'|trans }}</h3>
|
||||
<div class="flex gap-4">
|
||||
<a href="https://www.facebook.com/assocationecosplay" class="w-12 h-12 border-4 border-gray-900 flex items-center justify-center hover:bg-white transition-all"><i class="fab fa-facebook-f text-xl"></i></a>
|
||||
<a href="https://www.instagram.com/asso_ecosplay/" class="w-12 h-12 border-4 border-gray-900 flex items-center justify-center hover:bg-white transition-all"><i class="fab fa-instagram text-xl"></i></a>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center md:justify-end gap-2">
|
||||
<a href="{{ path('app_legal') }}" class="px-2 hover:text-red-600">{{ 'legal_notice_link'|trans }}</a>
|
||||
<a href="{{ path('app_cookies') }}" class="px-2 hover:text-red-600">{{ 'cookie_policy_link'|trans }}</a>
|
||||
<a href="{{ path('app_cgu') }}" class="px-2 hover:text-red-600">{{ 'cgu_link'|trans }}</a>
|
||||
<a href="{{ path('app_hosting') }}" class="px-2 hover:text-red-600">{{ 'hosting_link'|trans }}</a>
|
||||
<a href="{{ path('app_rgpd') }}" class="px-2 hover:text-red-600">{{ 'rgpd_policy_link'|trans }}</a>
|
||||
<a href="{{ path('app_rules') }}" class="px-2 hover:text-red-600">{{ 'rule_link'|trans }}</a>
|
||||
<div class="bg-white/50 p-2 border-2 border-gray-900 inline-block">
|
||||
<iframe width="300" height="60" style="border:0;" src="https://climate.stripe.com/badge/qrsnOf?theme=light&size=small&locale={{ app.request.locale }}"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# MISSION #}
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-3xl font-black uppercase tracking-tighter italic border-b-4 border-gray-900 inline-block">E-Cosplay</h3>
|
||||
<p class="font-bold text-gray-800 italic leading-snug">
|
||||
{{ 'footer_mission_description'|trans|striptags }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# BOTTOM LINKS #}
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<div class="text-center md:text-left">
|
||||
<p class="font-black uppercase text-sm">© {{ "now"|date("Y") }} E-COSPLAY.</p>
|
||||
<p class="text-[10px] font-bold opacity-70">RNA N°W022006988 - DEV BY SITECONSEIL</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-3">
|
||||
{% set footer_links = [
|
||||
{'path': 'app_legal', 'label': 'legal_notice_link'},
|
||||
{'path': 'app_cookies', 'label': 'cookie_policy_link'},
|
||||
{'path': 'app_cgu', 'label': 'cgu_link'},
|
||||
{'path': 'app_rgpd', 'label': 'rgpd_policy_link'},
|
||||
{'path': 'app_hosting', 'label': 'hosting_link'},
|
||||
{'path': 'app_rules', 'label': 'rule_link'}
|
||||
] %}
|
||||
{% for flink in footer_links %}
|
||||
<a href="{{ path(flink.path) }}" class="text-[10px] font-black uppercase bg-gray-900 text-white px-2 py-1 hover:bg-indigo-600 transition-colors">
|
||||
{{ flink.label|trans }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{# OVERLAYS (Cart Sidebar) - Style Brutaliste #}
|
||||
<div id="cartSidebar" class="fixed top-0 right-0 w-full md:w-[450px] h-full bg-white border-l-8 border-gray-900 shadow-[-20px_0px_0px_rgba(79,70,229,0.5)] transform translate-x-full transition-transform duration-500 ease-[cubic-bezier(0.95,0.05,0.795,0.035)] z-[100] flex flex-col italic">
|
||||
<div class="p-8 border-b-4 border-gray-900 flex justify-between items-center bg-pink-500 text-white">
|
||||
<h2 class="text-4xl font-black uppercase tracking-tighter">{{ 'your_cart'|trans }}</h2>
|
||||
<button id="closeCartButton" class="w-12 h-12 border-4 border-white flex items-center justify-center hover:bg-white hover:text-pink-500 transition-all">
|
||||
<i class="fas fa-times text-2xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="cartItemsContainer" class="flex-grow overflow-y-auto p-8 font-bold">
|
||||
{# Dynamic items here #}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
{% block meta_description %}{{'contact_page.description'|trans}}{% endblock %}
|
||||
|
||||
{% block canonical_url %}<link rel="canonical" href="{{ url('app_contact') }}" />{% endblock %}
|
||||
|
||||
{% block breadcrumb_schema %}
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
@@ -20,7 +21,7 @@
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"name": "{{ 'contact_page.breadcrumb'|trans }}",
|
||||
"name": "{{'contact_page.breadcrumb'|trans}}",
|
||||
"item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
|
||||
}
|
||||
]
|
||||
@@ -28,125 +29,161 @@
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{# --- BODY --- #}
|
||||
{% block body %}
|
||||
<div class="container mx-auto p-4 md:p-8 pt-12">
|
||||
<main class="bg-[#fbfbfb] min-h-screen font-sans text-gray-900 pb-24 overflow-x-hidden">
|
||||
|
||||
{# --- FLASH MESSAGE BLOCK (SUCCESS) --- #}
|
||||
{% for message in app.flashes('success') %}
|
||||
<div class="max-w-4xl mx-auto mb-8 p-4 rounded-lg bg-green-100 border border-green-300 text-green-800 flex items-start shadow-md" role="alert">
|
||||
<svg class="w-6 h-6 mr-3 mt-0.5 text-green-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<strong class="font-semibold">{{ 'flash.success.strong'|trans }}</strong>
|
||||
<p class="text-sm">{{ message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{# --- FLASH MESSAGE BLOCK (ERROR) --- #}
|
||||
{% for message in app.flashes('error') %}
|
||||
<div class="max-w-4xl mx-auto mb-8 p-4 rounded-lg bg-red-100 border border-red-300 text-red-800 flex items-start shadow-md" role="alert">
|
||||
<svg class="w-6 h-6 mr-3 mt-0.5 text-red-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.707-10.293a1 1 0 00-1.414 0L10 9.586l-1.293-1.293a1 1 0 10-1.414 1.414L8.586 11l-1.293 1.293a1 1 0 001.414 1.414L10 12.414l1.293 1.293a1 1 0 001.414-1.414L11.414 11l1.293-1.293a1 1 0 000-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<strong class="font-semibold">{{ 'flash.error.strong'|trans }}</strong>
|
||||
<p class="text-sm">{{ message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<h1 class="text-4xl font-extrabold text-center mb-10 text-gray-800">
|
||||
{# --- HEADER --- #}
|
||||
<header class="relative pt-16 pb-20 px-4 border-b-4 border-gray-900 bg-white">
|
||||
<div class="max-w-7xl mx-auto relative z-10">
|
||||
<h1 class="text-6xl md:text-8xl font-black italic uppercase tracking-tighter leading-none">
|
||||
{{ 'contact_page.title'|trans }}
|
||||
</h1>
|
||||
<div class="h-3 w-48 bg-indigo-600 skew-x-[-20deg] mt-6 shadow-[4px_4px_0px_#eab308]"></div>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 opacity-[0.03] pointer-events-none select-none hidden lg:block">
|
||||
<span class="text-[20rem] font-black italic uppercase leading-none">REACH_OUT</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="max-w-4xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-10">
|
||||
<div class="container mx-auto px-4 py-16">
|
||||
|
||||
{# Colonne 1 : Informations de Contact #}
|
||||
<div class="lg:col-span-1 bg-white p-6 rounded-xl shadow-lg border border-gray-100 h-fit">
|
||||
<h2 class="text-2xl font-bold mb-4 text-indigo-700">{{ 'contact_info.title'|trans }}</h2>
|
||||
<p class="mb-6 text-gray-600 border-b pb-4">
|
||||
{{ 'contact_info.subtitle'|trans }}
|
||||
</p>
|
||||
{# --- FLASH MESSAGES (Style Neubrutaliste) --- #}
|
||||
{% for message in app.flashes('success') %}
|
||||
<div class="max-w-4xl mx-auto mb-12 p-6 bg-green-500 text-white border-4 border-gray-900 shadow-[8px_8px_0px_rgba(0,0,0,1)] flex items-center gap-4 animate-bounce">
|
||||
<i class="fas fa-check-circle text-3xl"></i>
|
||||
<div class="font-black uppercase italic italic tracking-tight">
|
||||
<span class="block text-xs opacity-70">SYSTEM_SUCCESS</span>
|
||||
{{ message }}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{# Coordonnées #}
|
||||
<div class="space-y-6">
|
||||
{% for message in app.flashes('error') %}
|
||||
<div class="max-w-4xl mx-auto mb-12 p-6 bg-red-600 text-white border-4 border-gray-900 shadow-[8px_8px_0px_rgba(0,0,0,1)] flex items-center gap-4">
|
||||
<i class="fas fa-exclamation-triangle text-3xl"></i>
|
||||
<div class="font-black uppercase italic italic tracking-tight">
|
||||
<span class="block text-xs opacity-70">SYSTEM_ERROR</span>
|
||||
{{ message }}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-12 italic">
|
||||
|
||||
{# --- COLONNE INFO : COMMAND CENTER --- #}
|
||||
<aside class="lg:col-span-1 space-y-8">
|
||||
<div class="bg-white border-4 border-gray-900 p-8 shadow-[10px_10px_0px_rgba(0,0,0,1)] h-full">
|
||||
<h2 class="text-3xl font-black uppercase tracking-tighter mb-8 border-b-4 border-indigo-600 pb-2 inline-block">
|
||||
{{ 'contact_info.title'|trans }}
|
||||
</h2>
|
||||
|
||||
<div class="space-y-10">
|
||||
{# Email #}
|
||||
<div class="group">
|
||||
<p class="text-[10px] font-black uppercase text-gray-400 tracking-widest mb-2">// TRANSMISSION_LINE</p>
|
||||
<a href="mailto:contact@e-cosplay.fr" class="text-xl font-black text-indigo-600 hover:text-yellow-500 break-all transition-colors">
|
||||
contact@e-cosplay.fr
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# Adresse #}
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 flex items-center mb-1">
|
||||
<svg class="w-5 h-5 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-1 10a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2h12a2 2 0 012 2v10z"></path></svg>
|
||||
{{ 'contact_info.email'|trans }}
|
||||
</h3>
|
||||
{# L'adresse email reste en dur car c'est une donnée de contact #}
|
||||
<p class="text-indigo-600 hover:text-indigo-800 transition duration-150">
|
||||
<a href="mailto:contact@e-cosplay.fr">contact@e-cosplay.fr</a>
|
||||
<p class="text-[10px] font-black uppercase text-gray-400 tracking-widest mb-2">// BASE_COORDINATES</p>
|
||||
<p class="text-xl font-black leading-tight">
|
||||
42 RUE DE SAINT-QUENTIN<br>
|
||||
02800 BEAUTOR, FRANCE
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 flex items-center mb-1">
|
||||
<svg class="w-5 h-5 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.243-4.243m12.44-1.296a8 8 0 11-14.04-4.832"></path></svg>
|
||||
{{ 'contact_info.address'|trans }}
|
||||
</h3>
|
||||
{# L'adresse postale reste en dur car c'est une donnée de contact #}
|
||||
<p class="text-gray-600">
|
||||
42 rue de Saint-Quentin<br>
|
||||
02800 Beautor, FRANCE
|
||||
</p>
|
||||
{# Recrutement #}
|
||||
<div class="pt-8 border-t-2 border-gray-100">
|
||||
<h3 class="text-2xl font-black uppercase text-green-600 mb-4">{{ 'contact_info.join_title'|trans }}</h3>
|
||||
<p class="font-bold text-gray-600 mb-6">{{ 'contact_info.join_text'|trans }}</p>
|
||||
<a href="{{ path('app_recruit') }}" class="inline-block bg-gray-900 text-white px-6 py-3 font-black uppercase tracking-tighter hover:bg-indigo-600 transition-colors skew-x-[-10deg]">
|
||||
{{ 'Nous rejoindre'|trans }} →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{# Bloc pour l'adhésion #}
|
||||
<div class="pt-4 border-t mt-6 border-gray-200">
|
||||
<h3 class="text-xl font-bold mb-3 text-green-700 flex items-center">
|
||||
<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 18H5a2 2 0 01-2-2v-2c0-.55.22-1.07.61-1.45l2-2.02a1 1 0 011.41 0l2.5 2.5a1 1 0 001.41 0l2-2.02a1 1 0 011.41 0l2 2.02c.39.38.61.9.61 1.45v2a2 2 0 01-2 2z"></path></svg>
|
||||
{{ 'contact_info.join_title'|trans }}
|
||||
</h3>
|
||||
<p class="text-gray-600">
|
||||
{{ 'contact_info.join_text'|trans }}
|
||||
</p>
|
||||
<p class="mt-2 font-bold text-indigo-600">
|
||||
<a href="{{ path('app_recruit') }}">{{ 'Nous rejoindre'|trans }}</a>
|
||||
</p>
|
||||
{# --- COLONNE FORMULAIRE : UPLOAD_MESSAGE --- #}
|
||||
<section class="lg:col-span-2 bg-white border-4 border-gray-900 p-8 md:p-12 shadow-[16px_16px_0px_#4f46e5]">
|
||||
<h2 class="text-4xl font-black uppercase tracking-tighter mb-10">{{ 'form.title'|trans }}</h2>
|
||||
|
||||
{{ form_start(form, {'attr': {'class': 'space-y-8'}}) }}
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="space-y-2">
|
||||
{{ form_label(form.name, 'contact_form.name.label'|trans, {'label_attr': {'class': 'block text-[10px] font-black uppercase tracking-widest text-gray-400'}}) }}
|
||||
{{ form_widget(form.name, {'attr': {'class': 'w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:border-indigo-600 outline-none transition-all', 'placeholder': 'GATOR'}}) }}
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
{{ form_label(form.surname, 'contact_form.surname.label'|trans, {'label_attr': {'class': 'block text-[10px] font-black uppercase tracking-widest text-gray-400'}}) }}
|
||||
{{ form_widget(form.surname, {'attr': {'class': 'w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:border-indigo-600 outline-none transition-all', 'placeholder': 'MARTA'}}) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="space-y-2">
|
||||
{{ form_label(form.email, 'form_email_label'|trans, {'label_attr': {'class': 'block text-[10px] font-black uppercase tracking-widest text-gray-400'}}) }}
|
||||
{{ form_widget(form.email, {'attr': {'class': 'w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:border-indigo-600 outline-none transition-all', 'placeholder': 'PLAYER@ECOSPLAY.FR'}}) }}
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
{{ form_label(form.subject, 'contact_form.subject.label'|trans, {'label_attr': {'class': 'block text-[10px] font-black uppercase tracking-widest text-gray-400'}}) }}
|
||||
{{ form_widget(form.subject, {'attr': {'class': 'w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:border-indigo-600 outline-none transition-all'}}) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Colonne 2 : Formulaire de Contact #}
|
||||
<div class="lg:col-span-2 bg-white p-8 rounded-xl shadow-lg border border-gray-100">
|
||||
<h2 class="text-2xl font-bold mb-6 text-gray-800">{{ 'form.title'|trans }}</h2>
|
||||
|
||||
{{ form_start(form, {'attr': {'class': 'space-y-5'}}) }}
|
||||
|
||||
{# Ligne 1 : Nom et Prénom #}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{{ form_row(form.name, {'label': 'contact_form.name.label'|trans}) }}
|
||||
{{ form_row(form.surname, {'label': 'contact_form.surname.label'|trans}) }}
|
||||
<div class="space-y-2">
|
||||
{{ form_label(form.tel, 'contact_form.tel.label'|trans, {'label_attr': {'class': 'block text-[10px] font-black uppercase tracking-widest text-gray-400'}}) }}
|
||||
{{ form_widget(form.tel, {'attr': {'class': 'w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:border-indigo-600 outline-none transition-all'}}) }}
|
||||
</div>
|
||||
|
||||
{# Ligne 2 : Email et Sujet #}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{{ form_row(form.email, {'label': 'form_email_label'|trans}) }}
|
||||
{{ form_row(form.subject, {'label': 'contact_form.subject.label'|trans}) }}
|
||||
<div class="space-y-2">
|
||||
{{ form_label(form.message, 'contact_form.message.label'|trans, {'label_attr': {'class': 'block text-[10px] font-black uppercase tracking-widest text-gray-400'}}) }}
|
||||
{{ form_widget(form.message, {'attr': {'class': 'w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:border-indigo-600 outline-none transition-all h-40 resize-none', 'placeholder': 'WRITE YOUR MESSAGE...'}}) }}
|
||||
</div>
|
||||
|
||||
{# Ligne 3 : Téléphone (optionnel) #}
|
||||
{{ form_row(form.tel, {'label': 'contact_form.tel.label'|trans}) }}
|
||||
|
||||
{# Ligne 4 : Message #}
|
||||
{{ form_row(form.message, {'label': 'contact_form.message.label'|trans}) }}
|
||||
|
||||
<div class="pt-4">
|
||||
<button type="submit" class="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg transition duration-150 ease-in-out shadow-lg transform hover:scale-[1.01]">
|
||||
<svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-1 10a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2h12a2 2 0 012 2v10z"></path></svg>
|
||||
<div class="pt-6">
|
||||
<button type="submit" class="group relative w-full overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gray-900 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
|
||||
<div class="relative border-4 border-gray-900 bg-indigo-600 text-white py-5 font-black uppercase italic tracking-widest text-xl group-hover:text-white transition-colors">
|
||||
<i class="fas fa-paper-plane mr-3 group-hover:rotate-12 transition-transform"></i>
|
||||
{{ 'form.submit_button'|trans }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{ form_end(form) }}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# --- DECORATIVE MARQUEE --- #}
|
||||
<div class="mt-20 bg-yellow-500 py-4 overflow-hidden border-y-4 border-gray-900">
|
||||
<div class="whitespace-nowrap flex animate-marquee font-black uppercase italic">
|
||||
{% for i in 1..15 %}
|
||||
<span class="mx-8 text-gray-900">Contact the Team // Support Online // Recruitement Open // Join the Roster //</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<style>
|
||||
@keyframes marquee {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
.animate-marquee {
|
||||
display: flex;
|
||||
width: 200%;
|
||||
animation: marquee 30s linear infinite;
|
||||
}
|
||||
/* Correction pour les erreurs de formulaire Symfony */
|
||||
.form-error-message {
|
||||
@apply text-red-600 font-bold text-xs uppercase mt-1;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
{% extends 'base.twig' %}
|
||||
|
||||
{# --- METADATA & SCHEMA (Already using trans) --- #}
|
||||
{% block title %}{{'doc_page.title'|trans}}{% endblock %}
|
||||
{% block meta_description %}{{'doc_page.description'|trans}}{% endblock %}
|
||||
|
||||
{% block canonical_url %}<link rel="canonical" href="{{ url('app_doc') }}" />{% endblock %}
|
||||
|
||||
{% block breadcrumb_schema %}
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
@@ -28,88 +28,142 @@
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{# --- BODY with Tailwind Styling and full i18n --- #}
|
||||
{% block body %}
|
||||
<div class="container mx-auto p-4 md:p-8">
|
||||
{# Main Title #}
|
||||
<h1 class="text-3xl font-bold text-gray-800 mb-6 border-b pb-2">
|
||||
<main class="bg-[#fbfbfb] min-h-screen font-sans text-gray-900 pb-24 overflow-x-hidden">
|
||||
|
||||
{# --- HEADER --- #}
|
||||
<header class="relative pt-16 pb-20 px-4 border-b-4 border-gray-900 bg-white">
|
||||
<div class="max-w-7xl mx-auto relative z-10">
|
||||
<h1 class="text-6xl md:text-8xl font-black italic uppercase tracking-tighter leading-none">
|
||||
{{ 'doc_list.title'|trans }}
|
||||
</h1>
|
||||
<div class="h-3 w-48 bg-indigo-600 skew-x-[-20deg] mt-6 shadow-[4px_4px_0px_#eab308]"></div>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 opacity-[0.03] pointer-events-none select-none hidden lg:block">
|
||||
<span class="text-[20rem] font-black italic uppercase leading-none">DOCS</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{# --- Ordinary General Assembly (AG Ordinaire) --- #}
|
||||
<section class="mb-10">
|
||||
<h2 class="text-2xl font-semibold text-indigo-600 mb-4">
|
||||
{{ 'doc_list.ag_ordinaire_title'|trans }}
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="container mx-auto px-4 py-16">
|
||||
|
||||
{# --- SECTION 1 : AG ORDINAIRE (Style Indigo/Cyber) --- #}
|
||||
<section class="mb-20">
|
||||
<div class="inline-block bg-indigo-600 text-white px-8 py-3 font-black italic skew-x-[-15deg] mb-12 shadow-xl border-b-4 border-gray-900">
|
||||
<span class="skew-x-[15deg] block uppercase tracking-widest text-xl">
|
||||
[01] {{ 'doc_list.ag_ordinaire_title'|trans }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{% for ag in ag_ordinaire %}
|
||||
<div class="bg-white shadow-lg rounded-lg p-5 border border-gray-200 hover:shadow-xl transition duration-300">
|
||||
<div class="flex flex-wrap justify-between items-center mb-2 border-b pb-2">
|
||||
<span class="text-xl font-bold text-gray-700">
|
||||
{{ 'ag.date_at_prefix'|trans }} {{ ag.agDateAt|date('d/m/Y') }}
|
||||
</span>
|
||||
<span class="text-sm font-medium text-gray-500">
|
||||
{{ 'ag.main_members_label'|trans }} : <span class="font-semibold text-gray-700">{{ ag.mainMembers.count }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600 mb-4">
|
||||
<div class="group relative bg-white border-4 border-gray-900 p-8 shadow-[10px_10px_0px_#4f46e5] hover:shadow-[14px_14px_0px_#4f46e5] hover:-translate-y-1 transition-all italic">
|
||||
|
||||
{# Badge Date #}
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<strong class="text-gray-800">{{ 'ag.president_label'|trans }} :</strong>
|
||||
{{ ag.president.civ }} {{ ag.president.name }} {{ ag.president.surname }}
|
||||
<p class="text-[10px] font-black uppercase text-gray-400 tracking-[0.2em] mb-1">DATE_ARCHIVE</p>
|
||||
<h3 class="text-3xl font-black uppercase tracking-tighter">{{ ag.agDateAt|date('d/m/Y') }}</h3>
|
||||
</div>
|
||||
<div class="bg-gray-100 border-2 border-gray-900 px-3 py-1 text-xs font-black">
|
||||
VOL_{{ ag.agDateAt|date('Y') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Infos Membres #}
|
||||
<div class="bg-gray-50 border-l-8 border-indigo-600 p-4 mb-6">
|
||||
<div class="grid grid-cols-2 gap-4 text-[11px] font-bold uppercase tracking-tight">
|
||||
<div>
|
||||
<span class="block text-gray-400 mb-1">{{ 'ag.president_label'|trans }}</span>
|
||||
<span class="text-gray-900">{{ ag.president.civ }} {{ ag.president.surname }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong class="text-gray-800">{{ 'ag.secretary_label'|trans }} :</strong>
|
||||
{{ ag.secretaire.civ }} {{ ag.secretaire.name }} {{ ag.secretaire.surname }}
|
||||
<span class="block text-gray-400 mb-1">{{ 'ag.secretary_label'|trans }}</span>
|
||||
<span class="text-gray-900">{{ ag.secretaire.civ }} {{ ag.secretaire.surname }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
download="ag_normal_ecosplay_{{ ag.agDateAt|date('d-m-Y') }}.pdf"
|
||||
</div>
|
||||
|
||||
{# Download Link #}
|
||||
<a download="ag_normal_ecosplay_{{ ag.agDateAt|date('d-m-Y') }}.pdf"
|
||||
href="{{ vich_uploader_asset(ag,'ag') }}"
|
||||
class="inline-block mt-2 px-4 py-2 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150"
|
||||
>
|
||||
<i class="fas fa-file-download mr-2"></i> {{ 'ag.view_document_link'|trans }}
|
||||
class="flex items-center justify-between w-full bg-white border-4 border-gray-900 px-6 py-4 font-black uppercase italic group-hover:bg-indigo-600 group-hover:text-white transition-colors">
|
||||
<span>{{ 'ag.view_document_link'|trans }}</span>
|
||||
<i class="fas fa-file-download text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# --- Extraordinary General Assembly (AG Extraordinaire) --- #}
|
||||
{# --- SECTION 2 : AG EXTRAORDINAIRE (Style Red/Alert) --- #}
|
||||
<section>
|
||||
<h2 class="text-2xl font-semibold text-red-600 mb-4">
|
||||
{{ 'doc_list.ag_extraordinaire_title'|trans }}
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="inline-block bg-red-600 text-white px-8 py-3 font-black italic skew-x-[-15deg] mb-12 shadow-xl border-b-4 border-gray-900">
|
||||
<span class="skew-x-[15deg] block uppercase tracking-widest text-xl">
|
||||
[02] {{ 'doc_list.ag_extraordinaire_title'|trans }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{% for ag in ag_extraordinaire %}
|
||||
<div class="bg-white shadow-lg rounded-lg p-5 border border-gray-200 hover:shadow-xl transition duration-300">
|
||||
<div class="flex flex-wrap justify-between items-center mb-2 border-b pb-2">
|
||||
<span class="text-xl font-bold text-gray-700">
|
||||
{{ 'ag.date_at_prefix'|trans }} {{ ag.agDateAt|date('d/m/Y') }}
|
||||
</span>
|
||||
<span class="text-sm font-medium text-gray-500">
|
||||
{{ 'ag.main_members_label'|trans }} : <span class="font-semibold text-gray-700">{{ ag.mainMembers.count }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600 mb-4">
|
||||
<div class="group relative bg-white border-4 border-gray-900 p-8 shadow-[10px_10px_0px_#ef4444] hover:shadow-[14px_14px_0px_#ef4444] hover:-translate-y-1 transition-all italic">
|
||||
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<strong class="text-gray-800">{{ 'ag.president_label'|trans }} :</strong>
|
||||
{{ ag.president.civ }} {{ ag.president.name }} {{ ag.president.surname }}
|
||||
<p class="text-[10px] font-black uppercase text-red-400 tracking-[0.2em] mb-1">CRITICAL_ARCHIVE</p>
|
||||
<h3 class="text-3xl font-black uppercase tracking-tighter text-red-600">{{ ag.agDateAt|date('d/m/Y') }}</h3>
|
||||
</div>
|
||||
<div class="bg-red-50 text-red-600 border-2 border-red-600 px-3 py-1 text-xs font-black animate-pulse">
|
||||
ALERT_EXT
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-red-50 border-l-8 border-red-600 p-4 mb-6">
|
||||
<div class="grid grid-cols-2 gap-4 text-[11px] font-bold uppercase tracking-tight">
|
||||
<div>
|
||||
<span class="block text-red-400 mb-1">{{ 'ag.president_label'|trans }}</span>
|
||||
<span class="text-gray-900">{{ ag.president.civ }} {{ ag.president.surname }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong class="text-gray-800">{{ 'ag.secretary_label'|trans }} :</strong>
|
||||
{{ ag.secretaire.civ }} {{ ag.secretaire.name }} {{ ag.secretaire.surname }}
|
||||
<span class="block text-red-400 mb-1">{{ 'ag.secretary_label'|trans }}</span>
|
||||
<span class="text-gray-900">{{ ag.secretaire.civ }} {{ ag.secretaire.surname }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
download="ag_normal_ecosplay_{{ ag.agDateAt|date('d-m-Y') }}.pdf"
|
||||
</div>
|
||||
|
||||
<a download="ag_extra_ecosplay_{{ ag.agDateAt|date('d-m-Y') }}.pdf"
|
||||
href="{{ vich_uploader_asset(ag,'ag') }}"
|
||||
class="inline-block mt-2 px-4 py-2 bg-red-500 text-white font-semibold rounded-lg shadow-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150"
|
||||
>
|
||||
<i class="fas fa-file-download mr-2"></i> {{ 'ag.view_document_link'|trans }}
|
||||
class="flex items-center justify-between w-full bg-white border-4 border-red-600 px-6 py-4 font-black uppercase italic group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<span>{{ 'ag.view_document_link'|trans }}</span>
|
||||
<i class="fas fa-exclamation-triangle text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{# --- DECORATIVE FOOTER (MARQUEE) --- #}
|
||||
<div class="mt-24 bg-gray-900 py-4 overflow-hidden border-t-4 border-indigo-600">
|
||||
<div class="flex whitespace-nowrap animate-marquee italic">
|
||||
{% for i in 1..20 %}
|
||||
<span class="text-white font-black uppercase mx-8 text-xs opacity-40">
|
||||
Official Documentation // Legal Compliance // Transparency // Association Roster //
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<style>
|
||||
@keyframes marquee {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
.animate-marquee {
|
||||
display: flex;
|
||||
width: 200%;
|
||||
animation: marquee 40s linear infinite;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
{% extends 'base.twig' %}
|
||||
|
||||
{# --- METADATA & SCHEMA (Inchangé) --- #}
|
||||
{% block title %}{{'dons.title'|trans}}{% endblock %}
|
||||
{% block meta_description %}{{'dons.description'|trans}}{% endblock %}
|
||||
|
||||
{% block canonical_url %}<link rel="canonical" href="{{ url('app_dons') }}" />{% endblock %}
|
||||
|
||||
{% block breadcrumb_schema %}
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
@@ -28,150 +28,162 @@
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{# --- BODY AVEC TAILWIND CSS --- #}
|
||||
{% block body %}
|
||||
<main class="py-12 md:py-20 bg-gray-50">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<main class="bg-[#fbfbfb] min-h-screen font-sans text-gray-900 pb-24 overflow-x-hidden">
|
||||
|
||||
{# Section Header #}
|
||||
<header class="text-center mb-12">
|
||||
<h1 class="text-4xl sm:text-5xl font-extrabold text-indigo-700 tracking-tight">
|
||||
{# --- HEADER --- #}
|
||||
<header class="relative pt-16 pb-20 px-4 border-b-4 border-gray-900 bg-white">
|
||||
<div class="max-w-7xl mx-auto relative z-10">
|
||||
<h1 class="text-6xl md:text-8xl font-black italic uppercase tracking-tighter leading-none">
|
||||
{{ 'dons.page_title'|trans }}
|
||||
</h1>
|
||||
<p class="mt-4 text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
<div class="h-3 w-48 bg-yellow-500 skew-x-[-20deg] mt-6 shadow-[4px_4px_0px_rgba(0,0,0,1)]"></div>
|
||||
<p class="mt-8 text-2xl font-bold italic text-gray-600 max-w-2xl border-l-8 border-indigo-600 pl-6">
|
||||
{{ 'dons.introduction'|trans|raw }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 opacity-[0.03] pointer-events-none select-none hidden lg:block">
|
||||
<span class="text-[20rem] font-black italic uppercase leading-none">SUPPORT</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{# Impact Section Card #}
|
||||
<article class="bg-white shadow-xl rounded-lg p-6 md:p-8 mb-10 border-t-4 border-indigo-500">
|
||||
<h2 class="text-2xl font-bold text-gray-800 mb-4">{{ 'dons.impact_title'|trans }}</h2>
|
||||
<p class="text-gray-600 mb-6">{{ 'dons.impact_text'|trans }}</p>
|
||||
<div class="max-w-5xl mx-auto px-4 py-16">
|
||||
|
||||
<h3 class="text-xl font-semibold text-indigo-600 mb-4">{{ 'dons.support_for_title'|trans }}</h3>
|
||||
{# --- IMPACT SECTION (RE-SUPPLY) --- #}
|
||||
<section class="grid md:grid-cols-1 gap-12 mb-20">
|
||||
<div class="bg-white border-4 border-gray-900 p-8 md:p-12 shadow-[12px_12px_0px_#4f46e5] italic">
|
||||
<h2 class="text-4xl font-black uppercase tracking-tighter mb-6 flex items-center gap-4">
|
||||
<span class="bg-indigo-600 text-white px-3 py-1 skew-x-[-15deg]">#</span>
|
||||
{{ 'dons.impact_title'|trans }}
|
||||
</h2>
|
||||
<p class="text-xl font-bold text-gray-700 mb-10 leading-relaxed">{{ 'dons.impact_text'|trans }}</p>
|
||||
|
||||
{# List of supported actions (Grid/Flex for better visual) #}
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div class="grid sm:grid-cols-2 gap-6">
|
||||
{% set items = [
|
||||
{'icon': 'fas fa-trophy', 'title': 'dons.item.events_title', 'desc': 'dons.item.events'},
|
||||
{'icon': 'fas fa-tools', 'title': 'dons.item.equipment_title', 'desc': 'dons.item.equipment'},
|
||||
{'icon': 'fas fa-server', 'title': 'dons.item.website_hosting_title', 'desc': 'dons.item.website_hosting'},
|
||||
{'icon': 'fas fa-plus-circle', 'title': 'dons.item.other_needs_title', 'desc': 'dons.item.other_needs'}
|
||||
] %}
|
||||
|
||||
{% for item in items %}
|
||||
<div class="group border-2 border-gray-900 p-6 hover:bg-indigo-50 transition-colors">
|
||||
<div class="w-12 h-12 bg-yellow-500 border-2 border-gray-900 flex items-center justify-center text-xl mb-4 group-hover:rotate-12 transition-transform">
|
||||
<i class="{{ item.icon }}"></i>
|
||||
</div>
|
||||
<p class="ml-3 text-gray-700">
|
||||
<span class="font-medium text-gray-800">{{ 'dons.item.events_title'|trans }} :</span> {{ 'dons.item.events'|trans }}
|
||||
</p>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<h4 class="font-black uppercase tracking-tight text-indigo-600 mb-1">{{ item.title|trans }}</h4>
|
||||
<p class="text-sm font-bold text-gray-500">{{ item.desc|trans }}</p>
|
||||
</div>
|
||||
<p class="ml-3 text-gray-700">
|
||||
<span class="font-medium text-gray-800">{{ 'dons.item.equipment_title'|trans }} :</span> {{ 'dons.item.equipment'|trans }}
|
||||
</p>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9h12" />
|
||||
</svg>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<p class="ml-3 text-gray-700">
|
||||
<span class="font-medium text-gray-800">{{ 'dons.item.website_hosting_title'|trans }} :</span> {{ 'dons.item.website_hosting'|trans }}
|
||||
</p>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v15m0 0l-3-3m3 3l3-3" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-3 text-gray-700">
|
||||
<span class="font-medium text-gray-800">{{ 'dons.item.other_needs_title'|trans }} :</span> {{ 'dons.item.other_needs'|trans }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
{# Call to Action / Donation Form #}
|
||||
<div class="p-6 md:p-8 bg-indigo-50 rounded-lg shadow-xl">
|
||||
<header class="text-center mb-6">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-2">{{ 'dons.make_a_donation_title'|trans }}</h2>
|
||||
<p class="text-gray-700">{{ 'dons.call_to_action_text'|trans }}</p>
|
||||
</header>
|
||||
{# --- DONATION FORM (GEAR INTERFACE) --- #}
|
||||
<section class="relative">
|
||||
{# Background Decorative Element #}
|
||||
<div class="absolute inset-0 bg-gray-900 skew-y-1 transform origin-bottom-right -z-10"></div>
|
||||
|
||||
{# Début du formulaire #}
|
||||
<form data-turbo="false" action="{{ path('app_dons') }}" method="post" class="space-y-6">
|
||||
<div class="bg-white border-4 border-gray-900 p-8 md:p-12 shadow-[16px_16px_0px_#eab308] italic">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-5xl font-black uppercase tracking-tighter mb-4">{{ 'dons.make_a_donation_title'|trans }}</h2>
|
||||
<p class="text-indigo-600 font-black uppercase tracking-widest">{{ 'dons.call_to_action_text'|trans }}</p>
|
||||
</div>
|
||||
|
||||
<form data-turbo="false" action="{{ path('app_dons') }}" method="post" class="space-y-8 max-w-2xl mx-auto">
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
{# Nom / Pseudo #}
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-gray-700">
|
||||
{{ 'form.name_label'|trans }} <span class="text-red-500">*</span>
|
||||
<div class="space-y-2">
|
||||
<label for="name" class="block font-black uppercase tracking-tight text-sm">
|
||||
[01] {{ 'form.name_label'|trans }} <span class="text-red-600">*</span>
|
||||
</label>
|
||||
<input type="text" id="name" name="name" required
|
||||
placeholder="{{ 'form.name_placeholder'|trans }}"
|
||||
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
||||
class="w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:ring-0 focus:border-indigo-600 outline-none transition-all">
|
||||
</div>
|
||||
|
||||
{# Email #}
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-gray-700">
|
||||
{{ 'form.email_label'|trans }} <span class="text-red-500">*</span>
|
||||
<div class="space-y-2">
|
||||
<label for="email" class="block font-black uppercase tracking-tight text-sm">
|
||||
[02] {{ 'form.email_label'|trans }} <span class="text-red-600">*</span>
|
||||
</label>
|
||||
<input type="email" id="email" name="email" required
|
||||
placeholder="{{ 'form.email_placeholder'|trans }}"
|
||||
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
||||
class="w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:ring-0 focus:border-indigo-600 outline-none transition-all">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Montant (Ammount) #}
|
||||
<div>
|
||||
<label for="amount" class="block text-sm font-medium text-gray-700">
|
||||
{{ 'form.amount_label'|trans }} <span class="text-red-500">*</span>
|
||||
{# Montant #}
|
||||
<div class="space-y-2">
|
||||
<label for="amount" class="block font-black uppercase tracking-tight text-sm">
|
||||
[03] {{ 'form.amount_label'|trans }} (€) <span class="text-red-600">*</span>
|
||||
</label>
|
||||
<div class="mt-1 relative rounded-md shadow-sm">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<span class="text-gray-500 sm:text-sm">€</span>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input type="number" id="amount" name="amount" required min="1" step="0.01"
|
||||
placeholder="10.00"
|
||||
class="block w-full pl-8 pr-12 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
||||
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||||
<span class="text-gray-500 sm:text-sm">EUR</span>
|
||||
</div>
|
||||
placeholder="0.00"
|
||||
class="w-full bg-indigo-600 text-white text-4xl font-black p-6 border-4 border-gray-900 placeholder-white/50 focus:bg-indigo-700 outline-none transition-all skew-x-[-2deg]">
|
||||
<span class="absolute right-6 top-1/2 -translate-y-1/2 text-2xl font-black opacity-50">EUR</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Message (Facultatif) #}
|
||||
<div>
|
||||
<label for="message" class="block text-sm font-medium text-gray-700">
|
||||
{{ 'form.message_label'|trans }} ({{ 'form.optional'|trans }})
|
||||
{# Message #}
|
||||
<div class="space-y-2">
|
||||
<label for="message" class="block font-black uppercase tracking-tight text-sm">
|
||||
[04] {{ 'form.message_label'|trans }} <span class="text-gray-400">({{ 'form.optional'|trans }})</span>
|
||||
</label>
|
||||
<textarea id="message" name="message" rows="3"
|
||||
<textarea id="message" name="message" rows="4"
|
||||
placeholder="{{ 'form.message_placeholder'|trans }}"
|
||||
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea>
|
||||
class="w-full bg-gray-50 border-4 border-gray-900 p-4 font-bold focus:bg-white focus:ring-0 focus:border-indigo-600 outline-none transition-all"></textarea>
|
||||
</div>
|
||||
|
||||
{# Bouton de soumission #}
|
||||
<div class="text-center pt-4">
|
||||
<div class="text-center pt-8">
|
||||
<button type="submit"
|
||||
class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white bg-indigo-600 hover:bg-indigo-700 transition duration-300 ease-in-out transform hover:scale-105 w-full sm:w-auto">
|
||||
<svg class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
class="group relative inline-block w-full md:w-auto">
|
||||
<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-6 font-black uppercase italic tracking-widest text-2xl border-4 border-gray-900 flex items-center justify-center gap-4">
|
||||
<i class="fas fa-heart text-red-600 group-hover:scale-125 transition-transform"></i>
|
||||
{{ 'form.submit_button_dons'|trans }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{# Fin du formulaire #}
|
||||
|
||||
<p class="mt-6 text-center text-sm text-gray-500">
|
||||
{{ 'dons.thanks_note'|trans }}
|
||||
<p class="mt-12 text-center text-xs font-black uppercase tracking-[0.3em] text-gray-400">
|
||||
// {{ 'dons.thanks_note'|trans }} //
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{# --- DECORATIVE MARQUEE --- #}
|
||||
<div class="mt-20 bg-indigo-600 py-6 overflow-hidden border-y-4 border-gray-900">
|
||||
<div class="whitespace-nowrap flex animate-marquee italic">
|
||||
{% for i in 1..10 %}
|
||||
<span class="text-white font-black uppercase mx-8 text-2xl opacity-30">
|
||||
Level Up the Community // Support the Craft // Every Donation Counts // Gear Up //
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<style>
|
||||
@keyframes marquee {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
.animate-marquee {
|
||||
display: flex;
|
||||
width: 200%;
|
||||
animation: marquee 35s linear infinite;
|
||||
}
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
{% block meta_description %}{{ 'events.description'|trans }}{% endblock %}
|
||||
|
||||
{% block canonical_url %}<link rel="canonical" href="{{ url('app_events') }}" />{% endblock %}
|
||||
|
||||
{% block breadcrumb_schema %}
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
@@ -14,125 +15,167 @@
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"name": "{{ 'breadcrumb.home'|trans }}",
|
||||
"item": "{{ app.request.schemeAndHttpHost }}"
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"name": "{{ 'breadcrumb.events'|trans }}",
|
||||
"item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
|
||||
}
|
||||
]
|
||||
}
|
||||
"item": "{{ app.request.schemeAndHttpHost }}"
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"name": "{{ 'breadcrumb.events'|trans }}",
|
||||
"item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="container mx-auto p-4 md:p-8 pt-12">
|
||||
<main class="bg-[#fbfbfb] min-h-screen font-sans text-gray-900 pb-24 overflow-x-hidden">
|
||||
|
||||
<h1 class="text-4xl font-extrabold text-gray-800 text-center mb-12">
|
||||
{# --- HEADER HERO --- #}
|
||||
<header class="relative pt-16 pb-20 px-4 border-b-4 border-gray-900 bg-white">
|
||||
<div class="max-w-7xl mx-auto relative z-10">
|
||||
<h1 class="text-6xl md:text-8xl font-black italic uppercase tracking-tighter leading-none">
|
||||
{{ 'events.list_main_title'|trans|default('Upcoming Events') }}
|
||||
</h1>
|
||||
<div class="h-3 w-48 bg-yellow-500 skew-x-[-20deg] mt-6 shadow-[4px_4px_0px_rgba(0,0,0,1)]"></div>
|
||||
</div>
|
||||
{# Filigrane de fond style Esport #}
|
||||
<div class="absolute top-0 right-0 opacity-[0.03] pointer-events-none select-none hidden lg:block">
|
||||
<span class="text-[20rem] font-black italic uppercase leading-none">AGENDA</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container mx-auto px-4 py-16">
|
||||
|
||||
{% if events is defined and events is not empty %}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 max-w-7xl mx-auto">
|
||||
{% for event in events %}
|
||||
<div class="bg-white rounded-xl shadow-lg border border-gray-100 flex flex-col justify-between transition duration-300 hover:shadow-xl hover:border-indigo-200 overflow-hidden">
|
||||
{# CARTE ÉVÉNEMENT NEUBRUTALISTE #}
|
||||
<div class="group relative bg-white border-4 border-gray-900 shadow-[12px_12px_0px_rgba(0,0,0,1)] hover:shadow-[16px_16px_0px_#4f46e5] hover:-translate-y-2 transition-all duration-300 flex flex-col overflow-hidden italic">
|
||||
|
||||
{# --- AJOUT DE L'AFFICHE (IMAGE) --- #}
|
||||
{# Badge de Date flottant (Style Esport) #}
|
||||
<div class="absolute top-4 left-4 z-20 bg-indigo-600 text-white px-4 py-1 font-black uppercase text-sm skew-x-[-15deg] shadow-lg border-2 border-gray-900">
|
||||
{{ event.startAt|date('d/m') }}
|
||||
</div>
|
||||
|
||||
{# Image / Affiche #}
|
||||
<div class="relative h-64 bg-gray-200 overflow-hidden border-b-4 border-gray-900">
|
||||
{% set imageUrl = event.eventsFileName ? vich_uploader_asset(event, 'affiche') : null %}
|
||||
|
||||
{% if imageUrl %}
|
||||
<div class="h-48 bg-gray-200 overflow-hidden">
|
||||
<img src="{{ asset(imageUrl) | imagine_filter('webp') }}"
|
||||
alt="Affiche de l'événement {{ event.title }}"
|
||||
class="w-full h-full object-cover">
|
||||
</div>
|
||||
alt="{{ event.title }}"
|
||||
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 grayscale group-hover:grayscale-0">
|
||||
{% else %}
|
||||
{# Placeholder si aucune image n'est disponible #}
|
||||
<div class="h-48 flex items-center justify-center bg-gray-100 text-gray-400">
|
||||
<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 18m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
|
||||
<div class="w-full h-full flex items-center justify-center bg-gray-900 text-gray-700">
|
||||
<span class="text-6xl font-black opacity-20 uppercase tracking-tighter">NO_IMAGE</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{# --- FIN AJOUT DE L'AFFICHE --- #}
|
||||
{# Overlay dégradé #}
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 flex flex-col justify-between flex-grow">
|
||||
<div>
|
||||
{# Event Title #}
|
||||
<h2 class="text-2xl font-bold text-indigo-700 mb-4">{{ event.title }}</h2>
|
||||
{# Contenu #}
|
||||
<div class="p-6 flex flex-col flex-grow">
|
||||
<h2 class="text-3xl font-black uppercase tracking-tighter text-gray-900 mb-4 group-hover:text-indigo-600 transition-colors">
|
||||
{{ event.title }}
|
||||
</h2>
|
||||
|
||||
<div class="space-y-3 text-gray-600">
|
||||
|
||||
{# Date Block (Start Date / End Date) #}
|
||||
<p class="flex items-start text-sm">
|
||||
<svg class="w-4 h-4 mt-1 mr-2 flex-shrink-0 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
|
||||
<div>
|
||||
<span class="font-medium text-gray-800">{{ 'events.list.date_label'|trans|default('Date') }}:</span>
|
||||
<div class="text-xs mt-0.5">
|
||||
<div class="space-y-4 mb-8">
|
||||
{# Date Detail #}
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-yellow-400 border-2 border-gray-900 flex items-center justify-center rotate-45">
|
||||
<i class="fas fa-calendar-alt -rotate-45 text-xs"></i>
|
||||
</div>
|
||||
<div class="text-sm font-bold uppercase tracking-tight">
|
||||
{{ event.startAt|date('d/m/Y H:i') }}
|
||||
{% if event.startAt|date('Ymd') != event.endAt|date('Ymd') %}
|
||||
- {{ event.endAt|date('d/m/Y H:i') }}
|
||||
{% else %}
|
||||
- {{ event.endAt|date('H:i') }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
{# Location Block #}
|
||||
<p class="flex items-start text-sm">
|
||||
<svg class="w-4 h-4 mt-0.5 mr-2 flex-shrink-0 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||
<div>
|
||||
<span class="font-medium text-gray-800">{{ 'events.list.location_label'|trans|default('Location') }}:</span>
|
||||
<div class="text-xs mt-0.5">{{ event.location }}</div>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
{# Organizer Block #}
|
||||
<p class="flex items-start text-sm">
|
||||
<svg class="w-4 h-4 mt-0.5 mr-2 flex-shrink-0 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
|
||||
<div>
|
||||
<span class="font-medium text-gray-800">{{ 'events.list.organizer_label'|trans|default('Organizer') }}:</span>
|
||||
<div class="text-xs mt-0.5">{{ event.organizer }}</div>
|
||||
</div>
|
||||
</p>
|
||||
<span class="text-indigo-600">>></span>
|
||||
{{ event.endAt|date('H:i') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Details Link (assuming an 'id' or slug is available) #}
|
||||
<a href="{{ url('app_event_details', {id: event.id|default(loop.index)}) }}" class="mt-6 text-center w-full py-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-600 font-semibold rounded-md text-sm transition duration-300 border border-indigo-100">
|
||||
{{ 'events.list.details_button'|trans|default('View Details') }}
|
||||
{# Location Detail #}
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-white border-2 border-gray-900 flex items-center justify-center rotate-45 group-hover:bg-indigo-600 group-hover:text-white transition-colors">
|
||||
<i class="fas fa-map-marker-alt -rotate-45 text-xs"></i>
|
||||
</div>
|
||||
<div class="text-sm font-bold uppercase tracking-tight text-gray-600">
|
||||
{{ event.location }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Organizer Detail #}
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-white border-2 border-gray-900 flex items-center justify-center rotate-45 group-hover:bg-indigo-600 group-hover:text-white transition-colors">
|
||||
<i class="fas fa-user-shield -rotate-45 text-xs"></i>
|
||||
</div>
|
||||
<div class="text-[10px] font-black uppercase text-gray-400 tracking-widest">
|
||||
{{ 'events.list.organizer_label'|trans }}: {{ event.organizer }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Bouton Détails (Style Bouton Combat) #}
|
||||
<a href="{{ url('app_event_details', {id: event.id|default(loop.index)}) }}"
|
||||
class="mt-auto relative group/btn overflow-hidden border-4 border-gray-900 bg-white py-3 px-6 text-center transition-all hover:bg-gray-900">
|
||||
<span class="relative z-10 font-black uppercase italic tracking-widest text-sm group-hover/btn:text-white">
|
||||
{{ 'events.list.details_button'|trans|default('View Details') }} <span class="ml-2">→</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{# Fallback if no events are found (repurposing the original styling) #}
|
||||
<div class="max-w-3xl mx-auto text-center py-16 md:py-24 bg-white rounded-xl shadow-lg border border-gray-100">
|
||||
{# --- ÉTAT VIDE (NO EVENTS) --- #}
|
||||
<div class="max-w-4xl mx-auto text-center py-24 px-8 border-8 border-dashed border-gray-200 bg-white relative">
|
||||
<div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-gray-900 text-white p-6 rotate-12 shadow-2xl">
|
||||
<svg class="w-16 h-16 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<span class="text-6xl text-gray-400 mb-4 inline-block">
|
||||
{# Icon: Calendar with an X #}
|
||||
<svg class="lucide lucide-calendar-x" xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="m14.5 12.5-5 5"/><path d="m9.5 12.5 5 5"/></svg>
|
||||
</span>
|
||||
|
||||
<h2 class="text-4xl font-extrabold text-gray-800 mt-4 mb-3">
|
||||
<h2 class="text-5xl font-black uppercase italic tracking-tighter text-gray-900 mt-8 mb-4">
|
||||
{{ 'events.no_events_title'|trans|default('No Upcoming Events') }}
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-gray-600 mb-8">
|
||||
{{ 'events.no_events_message'|trans|default('It looks like we don\'t have any events scheduled right now. Check back soon!') }}
|
||||
<p class="text-xl font-bold text-gray-500 italic mb-12">
|
||||
{{ 'events.no_events_message'|trans|default('It looks like we don\'t have any events scheduled right now.') }}
|
||||
</p>
|
||||
|
||||
{# Action to contact us #}
|
||||
<a href="{{ url('app_contact') }}" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition duration-300 shadow-md">
|
||||
<a href="{{ url('app_contact') }}" class="inline-block relative group">
|
||||
<div class="absolute inset-0 bg-gray-900 translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform"></div>
|
||||
<div class="relative bg-indigo-600 text-white px-12 py-5 font-black uppercase italic tracking-tighter border-2 border-gray-900">
|
||||
{{ 'events.button_contact'|trans|default('Contact Us') }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
{# --- BANDEAU TECHNIQUE BAS DE PAGE --- #}
|
||||
<div class="mt-20 bg-gray-900 py-6 overflow-hidden">
|
||||
<div class="whitespace-nowrap flex animate-marquee italic">
|
||||
{% for i in 1..10 %}
|
||||
<span class="text-white font-black uppercase mx-8 text-xl opacity-20 tracking-widest">
|
||||
Next Mission // New Event // Stay Tuned // Join the Community //
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<style>
|
||||
/* Animation du texte qui défile en bas */
|
||||
@keyframes marquee {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
.animate-marquee {
|
||||
display: flex;
|
||||
width: 200%;
|
||||
animation: marquee 30s linear infinite;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -23,165 +23,174 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<main class="bg-[#fbfbfb] overflow-x-hidden italic font-sans">
|
||||
|
||||
{# --- SECTION 1: BANNIÈRE HÉRO --- #}
|
||||
<div class="bg-indigo-700 text-white py-24 px-4 sm:px-6 lg:px-8 shadow-2xl">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<h1 class="text-5xl md:text-6xl font-extrabold tracking-tight mb-4">
|
||||
{{ 'home_hero.title'|trans }}
|
||||
{# --- 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="mt-3 max-w-2xl mx-auto text-xl text-indigo-200 sm:mt-4">
|
||||
|
||||
<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="mt-10 flex justify-center space-x-4">
|
||||
<a href="{{ url('app_members') }}" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-indigo-700 bg-white hover:bg-gray-100 shadow-lg transition duration-300">
|
||||
|
||||
<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="inline-flex items-center justify-center px-8 py-3 border border-white text-base font-medium rounded-full text-white bg-indigo-500 hover:bg-indigo-400 transition duration-300">
|
||||
<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">
|
||||
Crafting Reality // Cosplay Culture // Join the Guild // Artistry & Passion //
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# --- SECTION 2: À PROPOS DE NOUS --- #}
|
||||
<div class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="lg:text-center">
|
||||
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">{{ 'home_about.pretitle'|trans }}</h2>
|
||||
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
||||
{# --- 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 }}
|
||||
</p>
|
||||
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
|
||||
{{ 'home_about.text_1'|trans }}
|
||||
</p>
|
||||
</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>
|
||||
|
||||
<div class="mt-10">
|
||||
<p class="text-lg text-gray-700">
|
||||
{{ 'home_about.text_2'|trans }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# --- SECTION 3: NOS ACTIVITÉS (CARACTÉRISTIQUES) --- #}
|
||||
<div class="bg-gray-50 py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="lg:text-center mb-12">
|
||||
<h2 class="text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
||||
{# --- 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>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10 text-center">
|
||||
|
||||
{# Activité 1: Cosplay #}
|
||||
<div class="p-6 bg-white rounded-xl shadow-md transition duration-300 hover:shadow-lg">
|
||||
<span class="text-4xl text-indigo-500 mb-4 inline-block">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mask"><path d="M12 7h.01"/><path d="M22 17c0 4-4 4-4 4H6c-4 0-4-4-4-4V7c0-4 4-4 4-4h12c4 0 4 4 4 4v10z"/><path d="M9 13s1.5 2 3 2 3-2 3-2"/></svg>
|
||||
</span>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">{{ 'home_activities.cosplay_title'|trans }}</h3>
|
||||
<p class="text-gray-600">{{ 'home_activities.cosplay_text'|trans }}</p>
|
||||
{# 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é 2: Communauté & Événements #}
|
||||
<div class="p-6 bg-white rounded-xl shadow-md transition duration-300 hover:shadow-lg">
|
||||
<span class="text-4xl text-indigo-500 mb-4 inline-block">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users-round"><path d="M18 21a8 8 0 0 0-16 0"/><circle cx="10" cy="8" r="5"/><path d="M22 21a8 8 0 0 0-16 0"/><path d="M16 3.999a4.5 4.5 0 0 1-2.9 3.86"/><circle cx="16" cy="7.999" r="3.5"/></svg>
|
||||
</span>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">{{ 'home_activities.community_title'|trans }}</h3>
|
||||
<p class="text-gray-600">{{ 'home_activities.community_text'|trans }}</p>
|
||||
{# 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>
|
||||
|
||||
{# Activité 3: Diversité et Inclusion #}
|
||||
<div class="p-6 bg-white rounded-xl shadow-md transition duration-300 hover:shadow-lg">
|
||||
<span class="text-4xl text-indigo-500 mb-4 inline-block">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart-handshake"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5"/><path d="M12 6.5a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h5.5l-.33-1.66a1 1 0 0 0-.96-.75H12"/><path d="m18 13-1.4-1.4"/><path d="m14 17 1.4 1.4"/></svg>
|
||||
</span>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">{{ 'home_activities.diversity_title'|trans }}</h3>
|
||||
<p class="text-gray-600">{{ 'home_activities.diversity_text'|trans }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# --- SECTION 4: PARTENAIRES --- #}
|
||||
<div class="bg-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="lg:text-center mb-12">
|
||||
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">{{ 'home_partners.pretitle'|trans }}</h2>
|
||||
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
||||
{# --- 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 }}
|
||||
</p>
|
||||
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
|
||||
{{ 'home_partners.subtitle'|trans }}
|
||||
</p>
|
||||
</h2>
|
||||
</div>
|
||||
<p class="text-xl font-bold text-gray-500 max-w-sm italic">{{ 'home_partners.subtitle'|trans }}</p>
|
||||
</div>
|
||||
|
||||
{# Définition de la grille responsive pour la boucle #}
|
||||
<div class="mt-10 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-3">
|
||||
|
||||
{# BOUCLE SUR LES PARTENAIRES #}
|
||||
{# NOTE: La variable `partners` doit être passée par le contrôleur (e.g., [ { image: '/asset/partenair/house-of-geek.jpg', name: 'House Of Geek', facebook_link: 'lien' }, ... ] ) #}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{% for partner in partners|default([
|
||||
{ 'w':64,'h':64, 'image': '/assets/partenair/house-of-geek.jpg', 'name': 'House Of Geek', 'facebook_link': 'https://www.facebook.com/houseofgeek02' },
|
||||
{ 'w':64,'h':64, 'image': '/assets/partenair/cosplay-familly.jpg', 'name': 'Cosplays family arts', 'facebook_link': 'https://www.facebook.com/profile.php?id=61568494078902' },
|
||||
{ 'w':64,'h':64, '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/' },
|
||||
{ 'w':64,'h':64, 'image': '/assets/partenair/siteconseil.png', 'name': 'SARL SITECONSEIL', 'facebook_link': 'https://www.facebook.com/siteconseil','website':'https://www.siteconseil.fr' }
|
||||
{ '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' }
|
||||
]) %}
|
||||
{# Conteneur du partenaire #}
|
||||
<a href="{% if partner.website is defined and partner.website %}{{ partner.website }}{% else %}{{ partner.facebook_link ?? '#' }}{% endif %}" target="_blank"
|
||||
class="col-span-1 flex flex-col items-center justify-center py-6 px-4 bg-white rounded-xl shadow-md border border-gray-100 hover:shadow-lg hover:border-indigo-200 transition duration-300 group">
|
||||
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">
|
||||
|
||||
{# Logo/Image du partenaire #}
|
||||
<img class="max-h-16 w-auto object-contain mb-3"
|
||||
{# MODIFICATION 1 : Utilisation du nouveau filtre 'avatar_partner' #}
|
||||
<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 }}"
|
||||
width="64"
|
||||
height="64">
|
||||
alt="{{ partner.name }}">
|
||||
</div>
|
||||
|
||||
{# Fallback en texte si l'image ne se charge pas #}
|
||||
<span class="text-xl font-bold text-indigo-700 group-hover:text-indigo-900 transition duration-300">
|
||||
<span class="text-2xl font-black uppercase tracking-tighter text-gray-900 mb-2 group-hover:text-indigo-600">
|
||||
{{ partner.name }}
|
||||
</span>
|
||||
|
||||
{# Icône Facebook (Optionnelle) #}
|
||||
{# Le reste du bloc de code pour l'icône reste inchangé #}
|
||||
{% if partner.website is defined and partner.website %}
|
||||
<span class="text-sm text-gray-500 mt-2 flex items-center">
|
||||
Site internet
|
||||
<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>
|
||||
{% else %}
|
||||
{% if partner.facebook_link is defined and partner.facebook_link %}
|
||||
<span class="text-sm text-gray-500 mt-2 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-facebook mr-1"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||
Page Facebook
|
||||
</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endfor %}
|
||||
{# FIN BOUCLE PARTENAIRES #}
|
||||
</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>
|
||||
|
||||
{# --- SECTION 5: APPEL À L'ADHÉSION (CTA) --- #}
|
||||
<div class="bg-indigo-600">
|
||||
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
|
||||
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
|
||||
<span class="block">{{ 'home_cta.title'|trans }}</span>
|
||||
<span class="block text-indigo-200">{{ 'home_cta.subtitle'|trans }}</span>
|
||||
</h2>
|
||||
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
|
||||
<div class="inline-flex rounded-md shadow">
|
||||
<a href="{{ url('app_contact') }}" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 transition duration-300">
|
||||
<a href="{{ url('app_contact') }}" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<style>
|
||||
@keyframes marquee {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
.animate-marquee {
|
||||
display: flex;
|
||||
width: 200%;
|
||||
animation: marquee 40s linear infinite;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@@ -29,182 +29,136 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="container mx-auto p-4 md:p-8 pt-12">
|
||||
<h1 class="text-4xl font-extrabold text-center mb-12 text-gray-800">
|
||||
<main class="bg-[#fbfbfb] min-h-screen font-sans text-gray-900 pb-24 overflow-x-hidden">
|
||||
|
||||
{# --- HEADER --- #}
|
||||
<header class="relative pt-16 pb-20 px-4 border-b-4 border-gray-900 bg-white">
|
||||
<div class="max-w-7xl mx-auto relative z-10">
|
||||
<h1 class="text-6xl md:text-8xl font-black italic uppercase tracking-tighter leading-none">
|
||||
{{ 'members_page.title'|trans }}
|
||||
</h1>
|
||||
<div class="h-3 w-48 bg-indigo-600 skew-x-[-20deg] mt-6 shadow-[4px_4px_0px_#eab308]"></div>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 opacity-[0.03] pointer-events-none select-none hidden lg:block">
|
||||
<span class="text-[20rem] font-black italic uppercase leading-none">ROSTER</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{# --- SECTION 1 : Membres du Bureau --- #}
|
||||
<section class="mb-16">
|
||||
<h2 class="text-3xl font-bold border-b pb-4 mb-8 text-indigo-700">
|
||||
{{ 'members_page.board_title'|trans }}
|
||||
</h2>
|
||||
<div class="container mx-auto px-4 py-16">
|
||||
|
||||
{# --- SECTION 1 : Membres du Bureau (ESPORT BOARD) --- #}
|
||||
<section class="mb-24">
|
||||
<div class="inline-block bg-gray-900 text-yellow-500 px-8 py-3 font-black italic skew-x-[-15deg] mb-12 shadow-xl border-b-4 border-indigo-600">
|
||||
<span class="skew-x-[15deg] block uppercase tracking-wider text-2xl">
|
||||
// {{ 'members_page.board_title'|trans }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{% if board_members is defined and board_members|length > 0 %}
|
||||
{# Grille de 3 colonnes sur les grands écrans #}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-8">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||
{% for member in board_members %}
|
||||
{# Début de la carte du membre (Bureau) #}
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition duration-300 transform hover:scale-[1.02] flex flex-col">
|
||||
{# CARTE MEMBRE BUREAU #}
|
||||
<div class="group relative bg-white border-4 border-gray-900 p-8 shadow-[12px_12px_0px_#4f46e5] hover:shadow-[16px_16px_0px_#eab308] hover:-translate-y-2 transition-all duration-300 italic">
|
||||
|
||||
{# Photo et Pseudo #}
|
||||
<div class="text-center mb-4">
|
||||
<img height="24" width="24" src="{{ member.photo_url | imagine_filter('members')}}" alt="Photo de {{ member.pseudo }}" class="w-24 h-24 mx-auto rounded-full object-cover border-4 border-indigo-200 shadow-md">
|
||||
<h3 class="text-xl font-bold mt-3 text-gray-800">{{ member.pseudo }}</h3>
|
||||
{# Photo Style Avatar Esport #}
|
||||
<div class="relative w-32 h-32 mx-auto mb-6">
|
||||
<div class="absolute inset-0 bg-indigo-600 rotate-45 group-hover:rotate-90 transition-transform duration-500"></div>
|
||||
<img src="{{ member.photo_url | imagine_filter('members') }}" alt="{{ member.pseudo }}" class="relative w-full h-full object-cover border-4 border-gray-900 z-10">
|
||||
</div>
|
||||
|
||||
{# Rôle #}
|
||||
<div class="space-y-3 flex-grow border-t pt-4 mb-3">
|
||||
<p class="text-sm">
|
||||
<strong class="font-semibold text-indigo-600">{{ 'member_card.role'|trans }}:</strong>
|
||||
<span class="text-gray-700">{{ member.role|default('-')|trans }}</span>
|
||||
</p>
|
||||
<div class="text-center mb-6">
|
||||
<h3 class="text-3xl font-black uppercase tracking-tighter text-gray-900 leading-none mb-2">{{ member.pseudo }}</h3>
|
||||
<span class="bg-gray-900 text-white px-3 py-1 text-xs font-black uppercase tracking-widest italic border-b-2 border-indigo-500">
|
||||
{{ member.role|default('-')|trans }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{# BADGE Cosplayer #}
|
||||
<div class="mb-4">
|
||||
<strong class="text-sm font-semibold text-gray-800 mr-2">{{ 'member_card.cosplay_label'|trans }}:</strong>
|
||||
|
||||
{# Stats / Info #}
|
||||
<div class="space-y-4 border-t-2 border-gray-100 pt-6">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xs font-black uppercase text-gray-500 italic">{{ 'member_card.cosplay_label'|trans }}</span>
|
||||
{% if member.cosplayer %}
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||||
{{ 'member_card.yes'|trans }}
|
||||
</span>
|
||||
<span class="bg-green-500 text-white px-3 py-1 text-[10px] font-black uppercase italic border-2 border-gray-900 shadow-[2px_2px_0px_rgba(0,0,0,1)]">{{ 'member_card.yes'|trans }}</span>
|
||||
{% else %}
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
|
||||
{{ 'member_card.no'|trans }}
|
||||
</span>
|
||||
<span class="bg-gray-200 text-gray-600 px-3 py-1 text-[10px] font-black uppercase italic border-2 border-gray-900 shadow-[2px_2px_0px_rgba(0,0,0,1)]">{{ 'member_card.no'|trans }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# BADGES Spécificités #}
|
||||
{# BADGES Spécificités (Mis à jour pour n'afficher que les statuts VRAIS) #}
|
||||
<div class="space-y-2 pt-3 border-t">
|
||||
<p class="text-xs text-gray-500 font-semibold uppercase">{{ 'member_card.specifics'|trans }}</p>
|
||||
|
||||
<div class="space-y-2">
|
||||
<span class="text-[10px] font-black uppercase text-gray-400 block tracking-widest">{{ 'member_card.specifics'|trans }}</span>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
|
||||
{# Badge Crosscosplayer : Affiché uniquement si VRAI #}
|
||||
{% if member.crosscosplayer %}
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
|
||||
{{ 'member_card.crosscosplay'|trans }}
|
||||
</span>
|
||||
<span class="bg-indigo-100 text-indigo-800 px-2 py-0.5 text-[10px] font-black uppercase italic border border-indigo-200">{{ 'member_card.crosscosplay'|trans }}</span>
|
||||
{% endif %}
|
||||
|
||||
{# Badge Transgenre : Affiché uniquement si VRAI #}
|
||||
{% if member.trans %}
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">
|
||||
{{ 'member_card.trans'|trans }}
|
||||
</span>
|
||||
<span class="bg-pink-100 text-pink-800 px-2 py-0.5 text-[10px] font-black uppercase italic border border-pink-200">{{ 'member_card.trans'|trans }}</span>
|
||||
{% endif %}
|
||||
|
||||
{# Badge Orientation (toujours affiché, avec couleur conditionnelle) #}
|
||||
{% set orientation_key = member.orientation ? 'orientation.' ~ member.orientation : null %}
|
||||
{% set orientation_text = orientation_key ? orientation_key|trans : 'member_card.not_specified'|trans %}
|
||||
{% set orientation_color = orientation_key ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-600' %}
|
||||
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium {{ orientation_color }}">
|
||||
{{ 'member_card.orientation_label'|trans }}: {{ orientation_text }}
|
||||
<span class="bg-gray-100 text-gray-700 px-2 py-0.5 text-[10px] font-black uppercase italic border border-gray-300">
|
||||
{{ orientation_key ? orientation_key|trans : 'member_card.not_specified'|trans }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# Fin de la carte du membre (Bureau) #}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-center text-gray-600 p-6 border rounded-lg bg-gray-50">
|
||||
<div class="bg-white border-4 border-dashed border-gray-300 p-12 text-center italic font-bold text-gray-400">
|
||||
{{ 'members_page.board_empty'|trans }}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
{# --- SECTION 2 : Tous les autres Membres --- #}
|
||||
<section>
|
||||
<h2 class="text-3xl font-bold border-b pb-4 mb-8 text-indigo-700">
|
||||
{{ 'members_page.all_title'|trans }}
|
||||
</h2>
|
||||
<div class="inline-block bg-indigo-600 text-white px-8 py-3 font-black italic skew-x-[-15deg] mb-12 shadow-xl">
|
||||
<span class="skew-x-[15deg] block uppercase tracking-wider text-xl">
|
||||
// {{ 'members_page.all_title'|trans }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{% if members is defined and members|length > 0 %}
|
||||
{# Grille de 3 colonnes sur les grands écrans #}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-8">
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{% for member in members %}
|
||||
{# Début de la carte du membre (Général) #}
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition duration-300 transform hover:scale-[1.02] flex flex-col">
|
||||
|
||||
{# Photo et Pseudo #}
|
||||
<div class="text-center mb-4">
|
||||
<img height="24" width="24" src="{{ member.photo_url | imagine_filter('members')}} ) }}" alt="Photo de {{ member.pseudo }}" class="w-24 h-24 mx-auto rounded-full object-cover border-4 border-indigo-200 shadow-md">
|
||||
<h3 class="text-xl font-bold mt-3 text-gray-800">{{ member.pseudo }}</h3>
|
||||
{# CARTE MEMBRE STANDARD #}
|
||||
<div class="bg-white border-2 border-gray-900 p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:shadow-[6px_6px_0px_#4f46e5] transition-all italic">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<img src="{{ member.photo_url | imagine_filter('members') }}" class="w-16 h-16 object-cover border-2 border-gray-900 grayscale hover:grayscale-0 transition-all">
|
||||
<div>
|
||||
<h3 class="text-xl font-black uppercase tracking-tighter leading-none">{{ member.pseudo }}</h3>
|
||||
<p class="text-[10px] font-bold text-indigo-600 uppercase mt-1">{{ member.role|default('-')|trans }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Rôle #}
|
||||
<div class="space-y-3 flex-grow border-t pt-4 mb-3">
|
||||
<p class="text-sm">
|
||||
<strong class="font-semibold text-indigo-600">{{ 'member_card.role'|trans }}:</strong>
|
||||
<span class="text-gray-700">{{ member.role|default('-')|trans }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{# BADGE Cosplayer #}
|
||||
<div class="mb-4">
|
||||
<strong class="text-sm font-semibold text-gray-800 mr-2">{{ 'member_card.cosplay_label'|trans }}:</strong>
|
||||
|
||||
<div class="flex flex-wrap gap-1 mt-4 border-t pt-4">
|
||||
{% if member.cosplayer %}
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||||
{{ 'member_card.yes'|trans }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
|
||||
{{ 'member_card.no'|trans }}
|
||||
</span>
|
||||
<span class="bg-green-100 text-green-800 px-2 py-0.5 text-[8px] font-black uppercase border border-green-200">COSPLAYER</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# BADGES Spécificités #}
|
||||
{# BADGES Spécificités (Mis à jour pour n'afficher que les statuts VRAIS) #}
|
||||
<div class="space-y-2 pt-3 border-t">
|
||||
<p class="text-xs text-gray-500 font-semibold uppercase">{{ 'member_card.specifics'|trans }}</p>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
|
||||
{# Badge Crosscosplayer : Affiché uniquement si VRAI #}
|
||||
{% if member.crosscosplayer %}
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
|
||||
{{ 'member_card.crosscosplay'|trans }}
|
||||
</span>
|
||||
<span class="bg-indigo-50 text-indigo-600 px-2 py-0.5 text-[8px] font-black uppercase border border-indigo-100">CROSS</span>
|
||||
{% endif %}
|
||||
|
||||
{# Badge Transgenre : Affiché uniquement si VRAI #}
|
||||
{% if member.trans %}
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">
|
||||
{{ 'member_card.trans'|trans }}
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{# Badge Orientation (toujours affiché, avec couleur conditionnelle) #}
|
||||
{% set orientation_key = member.orientation ? 'orientation.' ~ member.orientation : null %}
|
||||
{% set orientation_text = orientation_key ? orientation_key|trans : 'member_card.not_specified'|trans %}
|
||||
{% set orientation_color = orientation_key ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-600' %}
|
||||
|
||||
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium {{ orientation_color }}">
|
||||
{{ 'member_card.orientation_label'|trans }}: {{ orientation_text }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# Fin de la carte du membre (Général) #}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-center text-gray-600 p-6 border rounded-lg bg-gray-50">
|
||||
<div class="bg-white border-2 border-dashed border-gray-300 p-8 text-center italic font-bold text-gray-400">
|
||||
{{ 'members_page.all_empty'|trans }}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
{# --- CTA BAS DE PAGE --- #}
|
||||
<div class="mt-32 border-t-4 border-gray-900 bg-yellow-500 py-12 text-center">
|
||||
<p class="text-2xl font-black uppercase italic tracking-tighter mb-4">Envie de rejoindre le roster ?</p>
|
||||
<a href="{{ path('app_contact') }}" class="inline-block bg-gray-900 text-white px-10 py-4 font-black uppercase italic skew-x-[-10deg] border-2 border-gray-900 hover:bg-indigo-600 transition-colors">
|
||||
Devenir Membre
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
{% extends 'base.twig' %}
|
||||
|
||||
{# --- METADATA & SCHEMA (Inchangé) --- #}
|
||||
{# --- METADATA & SCHEMA --- #}
|
||||
{% block title %}{{'page.title'|trans({})}}{% endblock %}
|
||||
{% block meta_description %}{{'hero.subheading'|trans({})}}{% endblock %}
|
||||
|
||||
{% block canonical_url %}<link rel="canonical" href="{{ url('app_pages') }}" />{% endblock %}
|
||||
|
||||
{% block breadcrumb_schema %}
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
@@ -28,74 +29,82 @@
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{# --- BODY AVEC TAILWIND CSS --- #}
|
||||
{% block body %}
|
||||
{#
|
||||
NOTE: Le bloc de données cosplayers a été retiré.
|
||||
Cette variable 'cosplayers' doit être passée par votre contrôleur PHP.
|
||||
#}
|
||||
{% set cosplayers = cosplayers is defined ? cosplayers : [] %}
|
||||
<main class="bg-[#fbfbfb] min-h-screen font-sans text-gray-900 pb-24 overflow-x-hidden">
|
||||
|
||||
<div class="container mx-auto px-4 py-16">
|
||||
|
||||
{# --- En-tête de la Section Communauté --- #}
|
||||
<div class="text-center mb-12">
|
||||
{# Utilise le filtre trans avec le nombre d'éléments réel et la pluralisation #}
|
||||
<h2 class="text-4xl font-extrabold text-gray-900 sm:text-5xl tracking-tight">
|
||||
{# --- HEADER : THE ROSTER --- #}
|
||||
<header class="relative pt-16 pb-20 px-4 border-b-4 border-gray-900 bg-white">
|
||||
<div class="max-w-7xl mx-auto relative z-10">
|
||||
<h1 class="text-6xl md:text-8xl font-black italic uppercase tracking-tighter leading-none">
|
||||
{{ 'creators.title_plural'|trans({'%count%': cosplayers|length}) }}
|
||||
</h2>
|
||||
<p class="mt-4 text-xl text-gray-500">
|
||||
</h1>
|
||||
<div class="h-3 w-48 bg-pink-500 skew-x-[-20deg] mt-6 shadow-[4px_4px_0px_rgba(0,0,0,1)]"></div>
|
||||
<p class="mt-8 text-2xl font-bold italic text-gray-600 max-w-2xl border-l-8 border-indigo-600 pl-6 uppercase tracking-tighter">
|
||||
{{ 'creators.intro_text'|trans({}) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 opacity-[0.03] pointer-events-none select-none hidden lg:block text-right">
|
||||
<span class="text-[15rem] font-black italic uppercase leading-none block">CREATORS</span>
|
||||
<span class="text-[10rem] font-black italic uppercase leading-none block text-indigo-600">COMMUNITY</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{# --- Listing des Cartes de Cosplayers --- #}
|
||||
<div class="container mx-auto px-4 py-16">
|
||||
|
||||
{# --- LISTING DES CARTES (ROSTER GRID) --- #}
|
||||
{% if cosplayers|length > 0 %}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 max-w-7xl mx-auto">
|
||||
|
||||
{% for creator in cosplayers %}
|
||||
<div class="bg-white rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition duration-300">
|
||||
<div class="group relative bg-white border-4 border-gray-900 shadow-[12px_12px_0px_rgba(0,0,0,1)] hover:shadow-[16px_16px_0px_#4f46e5] hover:-translate-y-2 transition-all duration-300 flex flex-col italic overflow-hidden">
|
||||
|
||||
{# Image du Cosplayer #}
|
||||
<img class="w-full h-80 object-cover"
|
||||
{# IMAGE : PRO PLAYER STYLE #}
|
||||
<div class="relative h-[400px] bg-gray-200 overflow-hidden border-b-4 border-gray-900">
|
||||
<img class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500"
|
||||
src="{{ creator.image }}"
|
||||
alt="Portrait de {{ creator.pseudo }}"
|
||||
onerror="this.onerror=null;this.src='https://placehold.co/400x600/e5e7eb/4b5563?text=Image+Indisponible';"
|
||||
>
|
||||
alt="{{ creator.pseudo }}"
|
||||
onerror="this.onerror=null;this.src='https://placehold.co/400x600/111827/4b5563?text=NO_SIGNAL';">
|
||||
|
||||
<div class="p-6">
|
||||
{# Overlay dégradé technique #}
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
|
||||
|
||||
{# Pseudo #}
|
||||
<h3 class="text-2xl font-bold text-gray-800 mb-2">{{ creator.pseudo }}</h3>
|
||||
{# Pseudo flottant sur l'image #}
|
||||
<div class="absolute bottom-4 left-4 right-4">
|
||||
<h3 class="text-4xl font-black text-white uppercase tracking-tighter group-hover:text-yellow-400 transition-colors">
|
||||
{{ creator.pseudo }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Description Courte #}
|
||||
<p class="text-gray-600 mb-4 h-16 overflow-hidden">
|
||||
<div class="p-6 flex flex-col flex-grow bg-white">
|
||||
{# Description #}
|
||||
<p class="text-gray-600 font-bold mb-6 h-12 overflow-hidden leading-tight">
|
||||
{{ creator.description }}
|
||||
</p>
|
||||
|
||||
{# Réseaux Sociaux #}
|
||||
<div class="mb-6">
|
||||
<p class="text-sm font-semibold text-indigo-600 mb-2">
|
||||
{# Socials : Connectivity #}
|
||||
<div class="mb-8 p-4 bg-gray-50 border-2 border-gray-900 relative">
|
||||
<span class="absolute -top-3 left-3 bg-indigo-600 text-white text-[10px] font-black px-2 py-0.5 uppercase tracking-widest">
|
||||
{{ 'creators.social_label'|trans({}) }}
|
||||
</p>
|
||||
<div class="flex space-x-3">
|
||||
</a></span>
|
||||
<div class="flex flex-wrap gap-4 mt-1">
|
||||
{% for platform, url in creator.social %}
|
||||
<a href="{{ url }}" target="_blank" rel="noopener noreferrer"
|
||||
class="text-gray-500 hover:text-pink-600 transition duration-150"
|
||||
title="{{ 'creators.social_label'|trans({}) }} {{ creator.pseudo }} sur {{ platform|capitalize }}">
|
||||
{# Icône de Réseau Social (Générique) #}
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
|
||||
</svg>
|
||||
class="w-10 h-10 border-2 border-gray-900 flex items-center justify-center hover:bg-pink-500 hover:text-white transition-all transform hover:rotate-12"
|
||||
title="{{ platform|capitalize }}">
|
||||
<i class="fab fa-{{ platform|lower }} text-lg"></i>
|
||||
{# Fallback si FontAwesome n'est pas là, on garde le SVG générique du snippet précédent si besoin #}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Bouton Voir Plus #}
|
||||
{# Bouton Profil #}
|
||||
<a href="/cosplayer/{{ creator.pseudo|lower|replace({' ': '-'}) }}"
|
||||
class="w-full inline-flex justify-center items-center px-4 py-3 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150">
|
||||
{{ 'creators.button'|trans({}) }}
|
||||
class="mt-auto relative group/btn overflow-hidden border-4 border-gray-900 bg-white py-4 text-center transition-all hover:bg-gray-900">
|
||||
<span class="relative z-10 font-black uppercase italic tracking-widest text-sm group-hover/btn:text-white">
|
||||
{{ 'creators.button'|trans({}) }} <span class="ml-2">→</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -103,29 +112,60 @@
|
||||
|
||||
</div>
|
||||
{% else %}
|
||||
{# Message si la liste est vide (en attendant les données réelles) #}
|
||||
<p class="text-center text-xl text-gray-500 italic mt-8">
|
||||
{# EMPTY STATE #}
|
||||
<div class="max-w-4xl mx-auto text-center py-20 border-8 border-dashed border-gray-200">
|
||||
<p class="text-4xl font-black uppercase italic text-gray-300 tracking-tighter">
|
||||
{{ 'creators.empty_list'|trans({}) }}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{# Fin Listing #}
|
||||
|
||||
{# --- BLOC CTA Cosplayer (Tout en trans) --- #}
|
||||
<div class="mt-20 bg-indigo-50 rounded-xl p-8 md:p-12 shadow-inner text-center">
|
||||
<h2 class="text-3xl font-extrabold text-indigo-900 sm:text-4xl">
|
||||
{# --- CTA : JOIN THE ROSTER --- #}
|
||||
<section class="mt-32 relative">
|
||||
<div class="absolute inset-0 bg-indigo-600 skew-y-1 transform origin-bottom-right -z-10 shadow-[20px_20px_0px_#eab308]"></div>
|
||||
|
||||
<div class="relative p-12 md:p-20 text-center text-white border-4 border-gray-900 bg-gray-900/40 backdrop-blur-sm italic">
|
||||
<h2 class="text-5xl md:text-7xl font-black uppercase tracking-tighter mb-6">
|
||||
{{ 'cta_creator.heading'|trans }}
|
||||
</h2>
|
||||
<p class="mt-4 text-xl text-indigo-700">
|
||||
<p class="text-xl md:text-2xl font-bold text-indigo-200 mb-12 max-w-3xl mx-auto">
|
||||
{{ 'cta_creator.subtext'|trans({}) }}
|
||||
</p>
|
||||
<div class="mt-8 flex justify-center">
|
||||
|
||||
<a href="{{ path('app_pages_discover') }}"
|
||||
class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-pink-600 shadow-lg hover:bg-pink-700 transform hover:scale-[1.05] transition duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
|
||||
class="group relative inline-block">
|
||||
<div class="absolute inset-0 bg-white translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform"></div>
|
||||
<div class="relative bg-pink-600 text-white px-12 py-6 font-black uppercase italic tracking-widest text-xl border-4 border-gray-900 flex items-center gap-4">
|
||||
{{ 'cta_creator.button'|trans({}) }}
|
||||
<i class="fas fa-bolt animate-pulse"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
{# --- TECH MARQUEE FOOTER --- #}
|
||||
<div class="mt-20 bg-gray-900 py-6 overflow-hidden border-t-4 border-pink-500">
|
||||
<div class="whitespace-nowrap flex animate-marquee italic">
|
||||
{% for i in 1..10 %}
|
||||
<span class="text-white font-black uppercase mx-8 text-2xl opacity-20">
|
||||
Showcase your art // Join the Roster // High Tier Cosplay // Community Driven //
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<style>
|
||||
@keyframes marquee {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
.animate-marquee {
|
||||
display: flex;
|
||||
width: 200%;
|
||||
animation: marquee 30s linear infinite;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@@ -29,72 +29,103 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="bg-gray-50 min-h-screen py-16 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<main id="who-city" class="max-w-6xl mx-auto px-4 py-12 font-sans text-gray-800 bg-[#fbfbfb]">
|
||||
|
||||
<!-- Header et Localisation -->
|
||||
<div class="text-center mb-12 p-6 bg-white shadow-xl rounded-xl">
|
||||
<h1 class="text-4xl font-extrabold tracking-tight text-indigo-700 sm:text-5xl mb-4">
|
||||
{{'who_page.title'|trans({'%s': city|trans})}}
|
||||
{# HEADER : STYLE IMPACT ESPORT #}
|
||||
<header class="mb-20 relative py-10">
|
||||
<div class="relative z-10">
|
||||
<h1 class="text-5xl md:text-7xl font-black text-gray-900 tracking-tighter uppercase italic leading-none esrgaa-voice">
|
||||
{{ 'who_page.title'|trans({'%s': city|trans}) }}
|
||||
</h1>
|
||||
<p class="mt-4 text-xl text-gray-600">
|
||||
{{ 'who_page.description'|trans({'%s': city}) }}
|
||||
</p>
|
||||
<div class="mt-6 inline-flex items-center space-x-2 p-3 bg-indigo-100 rounded-lg">
|
||||
<svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
|
||||
<div class="mt-6 flex flex-wrap items-center gap-4">
|
||||
{# Badge Localisation Style Neubrutaliste #}
|
||||
<div class="bg-yellow-500 text-gray-900 px-6 py-2 font-black italic skew-x-[-15deg] border-2 border-gray-900 shadow-[4px_4px_0px_rgba(0,0,0,1)] flex items-center gap-2">
|
||||
<svg class="h-5 w-5 skew-x-[15deg]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
</svg>
|
||||
<span class="text-lg font-semibold text-indigo-800">
|
||||
{{ 'who_page.city_pretitle'|trans }} <span class="text-indigo-900">{{ city|trans }}</span>
|
||||
<span class="skew-x-[15deg] uppercase tracking-tighter">
|
||||
{{ 'who_page.city_pretitle'|trans }} {{ city|trans }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="h-1 w-24 bg-indigo-600 hidden md:block skew-x-[-20deg]"></div>
|
||||
</div>
|
||||
|
||||
<!-- Section Activités -->
|
||||
<div class="mt-16 bg-white shadow-xl rounded-xl p-8">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-8 border-b-2 border-indigo-200 pb-3">
|
||||
{{ 'who_page.activity_intro'|trans }}
|
||||
</h2>
|
||||
<p class="mt-8 text-xl font-bold text-gray-600 italic max-w-2xl border-l-4 border-indigo-600 pl-4">
|
||||
{{ 'who_page.description'|trans({'%s': city}) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{# Filigrane de fond #}
|
||||
<div class="absolute top-0 right-0 -mr-8 opacity-[0.04] pointer-events-none select-none hidden md:block">
|
||||
<span class="text-[12rem] font-black italic uppercase tracking-tighter leading-none">LOCAL</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{# SECTION ACTIVITÉS : GRID NEUBRUTALISTE #}
|
||||
<section class="mt-20">
|
||||
<div class="inline-block bg-[#0f172a] text-yellow-500 px-6 py-3 font-black italic skew-x-[-15deg] mb-12 shadow-xl border-b-2 border-yellow-600">
|
||||
<span class="skew-x-[15deg] block uppercase tracking-wider text-lg">
|
||||
// {{ 'who_page.activity_intro'|trans }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<!-- Cosplay -->
|
||||
<div class="text-center p-4 bg-indigo-50 rounded-lg transition duration-300 hover:shadow-lg">
|
||||
<svg class="w-10 h-10 mx-auto text-indigo-600 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
{# Carte 1 : Cosplay #}
|
||||
<div class="group bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_#4f46e5] transition-all duration-300 italic">
|
||||
<div class="bg-indigo-600 text-white w-14 h-14 flex items-center justify-center rounded-sm mb-6 -mt-12 shadow-lg group-hover:rotate-6 transition-transform">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L15 15m0 0l3.586-3.586a2 2 0 012.828 0M15 15l2-2m-2-2l2-2" />
|
||||
</svg>
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">{{ 'home_activities.cosplay_title'|trans }}</h3>
|
||||
<p class="text-gray-600 text-sm">{{ 'home_activities.cosplay_text'|trans }}</p>
|
||||
</div>
|
||||
<h3 class="text-2xl font-black text-gray-900 uppercase tracking-tighter mb-3">{{ 'home_activities.cosplay_title'|trans }}</h3>
|
||||
<p class="text-sm font-semibold text-gray-600 leading-relaxed">{{ 'home_activities.cosplay_text'|trans }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Communauté -->
|
||||
<div class="text-center p-4 bg-indigo-50 rounded-lg transition duration-300 hover:shadow-lg">
|
||||
<svg class="w-10 h-10 mx-auto text-indigo-600 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
{# Carte 2 : Communauté #}
|
||||
<div class="group bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_#4f46e5] transition-all duration-300 italic">
|
||||
<div class="bg-indigo-600 text-white w-14 h-14 flex items-center justify-center rounded-sm mb-6 -mt-12 shadow-lg group-hover:rotate-6 transition-transform">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6m-6 0v-1a6 6 0 01-2.055-1.115M17 10v3m-2-3a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">{{ 'home_activities.community_title'|trans }}</h3>
|
||||
<p class="text-gray-600 text-sm">{{ 'home_activities.community_text'|trans }}</p>
|
||||
</div>
|
||||
<h3 class="text-2xl font-black text-gray-900 uppercase tracking-tighter mb-3">{{ 'home_activities.community_title'|trans }}</h3>
|
||||
<p class="text-sm font-semibold text-gray-600 leading-relaxed">{{ 'home_activities.community_text'|trans }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Diversité -->
|
||||
<div class="text-center p-4 bg-indigo-50 rounded-lg transition duration-300 hover:shadow-lg">
|
||||
<svg class="w-10 h-10 mx-auto text-indigo-600 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
{# Carte 3 : Diversité #}
|
||||
<div class="group bg-white border-2 border-gray-900 p-8 rounded-lg shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_#4f46e5] transition-all duration-300 italic">
|
||||
<div class="bg-indigo-600 text-white w-14 h-14 flex items-center justify-center rounded-sm mb-6 -mt-12 shadow-lg group-hover:rotate-6 transition-transform">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.007 12.007 0 002.944 12c.045 2.502.518 4.956 1.341 7.23M17 12V7" />
|
||||
</svg>
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">{{ 'home_activities.diversity_title'|trans }}</h3>
|
||||
<p class="text-gray-600 text-sm">{{ 'home_activities.diversity_text'|trans }}</p>
|
||||
</div>
|
||||
<h3 class="text-2xl font-black text-gray-900 uppercase tracking-tighter mb-3">{{ 'home_activities.diversity_title'|trans }}</h3>
|
||||
<p class="text-sm font-semibold text-gray-600 leading-relaxed">{{ 'home_activities.diversity_text'|trans }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# CTA : BOUTON MASSIVE #}
|
||||
<footer class="mt-32 text-center relative">
|
||||
<div class="absolute inset-0 flex items-center justify-center opacity-[0.03] -z-10">
|
||||
<span class="text-9xl font-black uppercase italic tracking-tighter">JOIN US</span>
|
||||
</div>
|
||||
|
||||
<!-- CTA rapide -->
|
||||
<div class="mt-12 text-center">
|
||||
<a href="{{ path('app_contact') }}" class="inline-block px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 shadow-lg transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
|
||||
<a href="{{ path('app_contact') }}" class="group relative inline-block">
|
||||
<div class="absolute inset-0 bg-gray-900 translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-200"></div>
|
||||
<div class="relative bg-indigo-600 text-white px-12 py-5 font-black uppercase italic tracking-widest border-2 border-gray-900 hover:bg-yellow-500 hover:text-gray-900 transition-colors duration-200">
|
||||
{{ 'home_cta.button'|trans }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-12 text-4xl font-black italic tracking-tighter text-gray-900 opacity-20 uppercase">
|
||||
{{ 'brand_name'|trans }}
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
@@ -17,7 +17,7 @@ about_photographer_label: Photographe
|
||||
about_founder_shoko_role: Présidente et Cosplayer
|
||||
about_founder_shoko_role_short: Présidente, Cosplayer
|
||||
about_founder_marta_role: Secrétaire de l'Association
|
||||
about_founder_marta_role_short: Secrétaire
|
||||
about_founder_marta_role_short: Secrétaire, Cosplayeuse
|
||||
about_shoko_cosplay_title: Cosplay de Shoko
|
||||
about_marta_cosplay_title: Cosplay de Marta
|
||||
about_shoko_instagram_aria: Instagram de ShokoCosplay
|
||||
@@ -1122,4 +1122,5 @@ cookie_control_desc: "Vous pouvez bloquer les cookies via vos paramètres naviga
|
||||
cookie_cnil_btn: "Maîtriser les cookies (CNIL)"
|
||||
cookie_consent_title: "Consentement"
|
||||
cookie_consent_footer: "En continuant votre navigation, vous acceptez l'usage des cookies nécessaires au fonctionnement du service."
|
||||
|
||||
partner_w: 'Site internet'
|
||||
partner_l: 'Facebook'
|
||||
|
||||
Reference in New Issue
Block a user