496 lines
24 KiB
Twig
496 lines
24 KiB
Twig
{% extends 'base.twig' %}
|
|
|
|
{% 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 breadcrumb_schema %}
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
"itemListElement": [
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 1,
|
|
"name": "{{'home_title'|trans }}",
|
|
"item": "{{ app.request.schemeAndHttpHost }}"
|
|
},
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 2,
|
|
"name": "{{'about_title'|trans}}",
|
|
"item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org/",
|
|
"@type": "ImageObject",
|
|
"contentUrl": "{{ asset('assets/images/shoko.jpg') | imagine_filter('webp') }}",
|
|
"license": "https://www.instagram.com/dystopix_photography/",
|
|
"acquireLicensePage": "https://www.instagram.com/dystopix_photography/",
|
|
"creditText": "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 %}
|
|
<style>
|
|
/* Conteneur parent en position relative pour l'empilement (absolute) des enfants */
|
|
.display {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 75vh;
|
|
}
|
|
|
|
/* 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 */
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
</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 %}
|