✨ feat(translations/about): Ajoute une chronologie des événements clés en français et anglais
Ajoute une chronologie stylisée à la page "À propos" avec des traductions pour les événements.
This commit is contained in:
Serreau Jovann
@@ -170,6 +170,78 @@
|
||||
.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">
|
||||
@@ -250,6 +322,7 @@
|
||||
</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">
|
||||
@@ -284,6 +357,86 @@
|
||||
</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>
|
||||
|
||||
|
||||
@@ -638,3 +638,28 @@ shop.state_used: Used
|
||||
home_partners.pretitle: "Our Allies"
|
||||
home_partners.title: "Partner Associations"
|
||||
home_partners.subtitle: "We work hand-in-hand with organizations that share our values to enrich your experiences."
|
||||
# Event 1: Creation of the association (UPDATED)
|
||||
event_creation_date: "March 15, 2025"
|
||||
event_creation_text_title: "Official Creation"
|
||||
event_creation_text: "Official declaration and registration of the e-Cosplay association."
|
||||
|
||||
# Event 2: Initial Partnership (UPDATED)
|
||||
event_partnership_date: "August 1, 2025"
|
||||
event_partnership_text_title: "Partnership with the Miss & Mister Diamantissime Committee"
|
||||
event_partnership_text: "Signing with the Miss & Mister Diamantissime Committee"
|
||||
|
||||
# Event 3: First Show (UPDATED)
|
||||
event_first_show_date: "September 14, 2025"
|
||||
event_first_show_title: "First Participation 'House Of Geek 4th Edition'"
|
||||
event_first_show_text: "Our first major public event with a stand, a cosplay parade, and cosplay contest management."
|
||||
|
||||
# Event 4: Miss Tergnier (UPDATED)
|
||||
event_miss_tergnier_date: "September 15, 2025"
|
||||
event_miss_tergnier_title: "Miss Tergnier 2025 Partnership"
|
||||
event_miss_tergnier_text: "Signing of the partnership with Miss Tergnier 2025."
|
||||
|
||||
# Event 5: Website Launch (UNTOUCHED)
|
||||
event_website_launch_date: "November 15, 2025"
|
||||
event_website_launch_title: "Website Launch"
|
||||
event_website_launch_text: "Launch of our official platform to inform about our activities, manage registrations, and share our creations."
|
||||
timeline_title: "Our Timeline"
|
||||
|
||||
@@ -581,3 +581,19 @@ who_page.title: "Notre Association à %s"
|
||||
who_page.description: "Découvrez qui nous sommes, nos valeurs et nos activités à %s."
|
||||
who_page.city_pretitle: "Nous sommes situés à :"
|
||||
who_page.activity_intro: "Nos activités phares comprennent :"
|
||||
timeline_title: "Notre Chronologie"
|
||||
event_creation_date: "15 Mars, 2025"
|
||||
event_creation_text_title: "Création Officielle"
|
||||
event_creation_text: "Déclaration et enregistrement officiel de l'association e-Cosplay."
|
||||
event_partnership_date: "1 Aout, 2025"
|
||||
event_partnership_text_title: "Partenariat avec le Comité Miss & Mister Diamantissime "
|
||||
event_partnership_text: "Signature avec le Comité Miss & Mister Diamantissime"
|
||||
event_first_show_date: "14 Septembre, 2025"
|
||||
event_first_show_title: "Première Participation 'House Of Geek 4eme éditions'"
|
||||
event_first_show_text: "Notre premier grand événement public avec un stand et un défilé de cosplay et gestion concours cosplay ."
|
||||
event_miss_tergnier_date: "15 Septembre, 2025"
|
||||
event_miss_tergnier_title: "Partenariat Miss Tergnier 2025"
|
||||
event_miss_tergnier_text: "Signature du partenariat avec Miss Tergnier 2025."
|
||||
event_website_launch_date: "15 novembre, 2025"
|
||||
event_website_launch_title: "Lancement du Site Internet"
|
||||
event_website_launch_text: "Mise en ligne de notre plateforme officielle pour informer sur nos activités, gérer les inscriptions et partager nos créations."
|
||||
|
||||
Reference in New Issue
Block a user