✨ feat(i18n): Ajoute traductions et internationalisation pour pages légales.
Ajoute le support multilingue pour les pages légales (RGPD, CGU, CGV, Mentions Légales, Cookies, Hébergement) et la page À propos, incluant les traductions en français et en anglais. Désactive aussi le sitemap pour les pages home et about.
This commit is contained in:
Serreau Jovann
@@ -1,6 +1,6 @@
|
||||
{% extends 'base.twig' %}
|
||||
|
||||
{% block title %}Qui Somme Nous{% endblock %}
|
||||
{% block title %}{{'about_title'|trans}}{% endblock %}
|
||||
|
||||
{% block canonical_url %}<link rel="canonical" href="{{ url('app_about') }}" />
|
||||
{% endblock %}
|
||||
@@ -14,13 +14,13 @@
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"name": "Accueil",
|
||||
"name": "home_title"|trans,
|
||||
"item": "{{ app.request.schemeAndHttpHost }}"
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"name": "Qui Somme Nous",
|
||||
"name": "{{'about_title'|trans}}",
|
||||
"item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
|
||||
}
|
||||
]
|
||||
@@ -29,94 +29,284 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<main class="container mx-auto px-4 py-12">
|
||||
<h1 class="text-4xl font-extrabold text-blue-800 mb-6 text-center">Qui Sommes-Nous ?</h1>
|
||||
<style>
|
||||
/* Conteneur parent en position relative pour l'empilement (absolute) des enfants */
|
||||
.display {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 75vh;
|
||||
}
|
||||
|
||||
<!-- Section Introduction MISE À JOUR -->
|
||||
<section class="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">Notre Passion : Créer l'Imaginaire</h2>
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* L'image 1 (gauche) est coupée avec une légère inclinaison */
|
||||
.display1 {
|
||||
clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%);
|
||||
background-position-x: -10vw;
|
||||
background-position-y: -175px;
|
||||
}
|
||||
|
||||
/* L'image 2 (droite) est coupée avec la diagonale inverse */
|
||||
.display2 {
|
||||
clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%);
|
||||
background-position-x: 20vw;
|
||||
background-position-y: -40px;
|
||||
}
|
||||
|
||||
/* Activation de la couleur au survol sur l'un ou l'autre élément */
|
||||
.display1:hover, .display2:hover {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
|
||||
/* Style spécifique pour le conteneur du texte */
|
||||
.image-text-overlay {
|
||||
position: absolute;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25;
|
||||
max-width: 80%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Positionnement pour le texte de gauche (display1) */
|
||||
.image-text-overlay.left {
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
/* Positionnement pour le texte de droite (display2) */
|
||||
.image-text-overlay.right {
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Style pour les icônes de réseaux sociaux */
|
||||
.social-icons {
|
||||
display: flex; /* Permet d'aligner les icônes */
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Aligner les icônes à gauche/droite selon le conteneur */
|
||||
.image-text-overlay.left .social-icons,
|
||||
.founders-card .social-icons.left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.image-text-overlay.right .social-icons,
|
||||
.founders-card .social-icons.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Style des liens dans les cartes fondateurs */
|
||||
.founders-card .social-icons a {
|
||||
color: #1e40af; /* Bleu foncé pour les cartes */
|
||||
}
|
||||
.founders-card .social-icons.right a {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Styles génériques pour les liens d'icônes */
|
||||
.social-icons a {
|
||||
margin-right: 0.5rem;
|
||||
color: inherit;
|
||||
transition: color 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.social-icons a:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.social-icons a:hover {
|
||||
color: #4299e1; /* Bleu clair au survol */
|
||||
}
|
||||
</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">
|
||||
Nous sommes une <span class="font-bold">association dédiée à l'art du Cosplay et du CosHopital</span>, fondée par des passionnés pour les passionnés. Notre mission est de fournir une plateforme dynamique et inclusive où la <span class="font-bold">création, le partage et l'expression artistique</span> sont au cœur de toutes nos activités.
|
||||
{{ '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>
|
||||
Nous considérons que le Cosplay est un art complet. C'est pourquoi, qu'un cosplayer ait <span class="font-bold">réalisé son costume à la main ou qu'il l'ait acheté</span>, tous sont mis sur un <span class="font-bold">pied d'égalité</span> au sein de notre communauté. Nous croyons que le Cosplay est bien plus qu'un simple déguisement : c'est une forme d'art qui combine couture, ingénierie, jeu d'acteur et amour des œuvres de fiction.
|
||||
{{ '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 Nos Objectifs & Valeurs -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-3xl font-bold text-blue-700 mb-6 text-center">Nos Objectifs et Nos Valeurs</h2>
|
||||
<!-- Grille ajustée pour 4 éléments : 2 colonnes sur tablette (md), 4 colonnes sur grand écran (lg) -->
|
||||
<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="text-sm text-gray-600 mb-2">{{'about_photographer_label'|trans}}: dystopix_photography</div>
|
||||
<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}}"><i class="fab fa-instagram fa-lg"></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 fa-lg"></i></a>
|
||||
<a href="https://www.facebook.com/CosplayShoko" target="_blank" aria-label="{{'about_shoko_facebook_aria'|trans}}"><i class="fab fa-facebook fa-lg"></i></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}}"><i class="fab fa-facebook fa-lg"></i></a>
|
||||
<a href="https://www.tiktok.com/@marta_gator" target="_blank" aria-label="{{'about_marta_tiktok_aria'|trans}}"><i class="fab fa-tiktok fa-lg"></i></a>
|
||||
<a href="https://www.instagram.com/marta_gator/" target="_blank" aria-label="{{'about_marta_instagram_aria'|trans}}"><i class="fab fa-instagram fa-lg"></i></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') }}');"
|
||||
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') }}');"
|
||||
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">
|
||||
<!-- 1. Promouvoir la Création -->
|
||||
<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">Promouvoir la Création</h3>
|
||||
<p class="text-gray-600">Encourager la fabrication de costumes complexes et originaux, en valorisant l'artisanat, les techniques de couture, le maquillage et la création d'accessoires (props).</p>
|
||||
<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>
|
||||
|
||||
<!-- 2. Unir la Communauté -->
|
||||
<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">Unir la Communauté</h3>
|
||||
<p class="text-gray-600">Créer un espace sûr et bienveillant pour tous les niveaux, du débutant à l'expert. Favoriser l'échange de conseils et de techniques entre membres.</p>
|
||||
<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>
|
||||
|
||||
<!-- 3. Célébrer la Performance -->
|
||||
<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">Célébrer la Performance</h3>
|
||||
<p class="text-gray-600">Mettre en lumière l'aspect théâtral et scénique du Cosplay à travers des événements et des concours de haut niveau.</p>
|
||||
<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>
|
||||
|
||||
<!-- 4. NOUVEAU BLOC : Inclusivité et Non-Discrimination -->
|
||||
<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">Inclusivité et Non-Discrimination</h3>
|
||||
<h3 class="text-xl font-bold text-gray-800 mb-2">{{'about_goal4_title'|trans}}</h3>
|
||||
<p class="text-gray-600">
|
||||
Notre association est <span class="font-bold">ouverte à toutes et à tous sans aucune discrimination</span> (sexuelle, d'origine, etc.). Nous sommes un environnement <span class="font-bold">LGBTQ+ friendly</span>, garantissant le respect et la sécurité pour chaque membre.
|
||||
{{ '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>
|
||||
|
||||
<!-- Section Activités -->
|
||||
<section class="mb-12 p-8 bg-blue-100 rounded-xl shadow-inner">
|
||||
<h2 class="text-3xl font-bold text-blue-700 mb-6 text-center">Nos Activités Principales</h2>
|
||||
<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">
|
||||
<!-- Concours Cosplay -->
|
||||
<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">Organisation de Concours Cosplay</h3>
|
||||
<h3 class="text-2xl font-semibold text-gray-800 mb-2">{{'about_activity1_title'|trans}}</h3>
|
||||
<p class="text-gray-600">
|
||||
Nous organisons régulièrement des <span class="font-bold">concours de Cosplay</span> lors de conventions et événements thématiques. Ces compétitions sont <span class="font-bold">ouvertes à tous, que votre costume soit fait-main ou acheté</span>, avec des catégories de jugement adaptées. Elles sont structurées pour évaluer la qualité de la confection (<span class="font-bold">craftsmanship</span>, pour les créateurs) et/ou la performance scénique (<span class="font-bold">acting</span>, pour tous), offrant ainsi des opportunités pour tous les styles et niveaux de compétence.
|
||||
{{ '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>
|
||||
|
||||
<!-- Ateliers Cosplay -->
|
||||
<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">Ateliers de Fabrication et de Perfectionnement</h3>
|
||||
<h3 class="text-2xl font-semibold text-gray-800 mb-2">{{'about_activity2_title'|trans}}</h3>
|
||||
<p class="text-gray-600">
|
||||
Du moulage à l'impression 3D, en passant par la couture de précision et la peinture, nos <span class="font-bold">ateliers Cosplay</span> sont conçus pour vous transmettre des savoir-faire essentiels. Que vous souhaitiez apprendre à travailler la mousse EVA, manipuler des LEDs ou parfaire votre wig styling, nos sessions encadrées par des experts vous aideront à donner vie à vos projets les plus ambitieux.
|
||||
{{ 'about_activity2_text'|trans({
|
||||
'%ateliers%': '<span class="font-bold">' ~ 'about_activity2_workshop_detail'|trans ~ '</span>'
|
||||
})|raw }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CosHopital (Réparation Gratuite) -->
|
||||
<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">Le CosHopital : Réparation Gratuite</h3>
|
||||
<h3 class="text-2xl font-semibold text-gray-800 mb-2">{{'about_activity3_title'|trans}}</h3>
|
||||
<p class="text-gray-600">
|
||||
Le <span class="font-bold">CosHopital</span> est notre service solidaire et essentiel. Lors de nos événements, nos bénévoles spécialisés offrent une <span class="font-bold">réparation gratuite des cosplays et accessoires des visiteurs</span> qui auraient subi des dégâts. Que ce soit une couture qui lâche, un prop cassé ou une perruque à remettre en place, notre équipe de "médecins du cosplay" est là pour vous dépanner rapidement et vous permettre de profiter pleinement de votre journée !
|
||||
{{ '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="#" 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 %}
|
||||
|
||||
Reference in New Issue
Block a user