349 lines
10 KiB
Text
349 lines
10 KiB
Text
---
|
||
import { Image } from 'astro:assets';
|
||
import { getLocalizedCollection } from '../../utils/content-i18n';
|
||
import { t, getPhotoBlogPath, getPhotoAlbumsPath, type Locale } from '../../utils/i18n';
|
||
import exhibitionImage from '../../assets/images/a-nous-les-chemins.jpg';
|
||
|
||
interface Props {
|
||
lang?: Locale;
|
||
}
|
||
|
||
const { lang = 'fr' } = Astro.props;
|
||
|
||
// Récupérer les catégories filtrées par langue
|
||
const sortedCategories = (await getLocalizedCollection('photoCategories', lang))
|
||
.sort((a, b) => (a.data.order || 99) - (b.data.order || 99));
|
||
|
||
const exhibition = {
|
||
fr: {
|
||
label: "Exposition en cours",
|
||
title: "« À nous les chemins ! »",
|
||
description: "Exposition collective itinérante de photographies avec l'association Albi Tadam, dans le cadre de « En 2026, la culture sillonne le Tarn ».",
|
||
venues: [
|
||
{ dates: "4 avril – 25 mai", place: "Musée-mine départemental, Cagnac-les-Mines" },
|
||
{ dates: "1er – 26 juin", place: "Mairie de Pampelonne" },
|
||
{ dates: "1er – 31 juillet", place: "Communauté de Communes Sor et Agout, Saïx" },
|
||
{ dates: "4 – 28 août", place: "Musée de la vie paysanne, Rieumontagné" },
|
||
{ dates: "3 – 30 sept.", place: "Pan'art, Castres" },
|
||
{ dates: "6 – 31 oct.", place: "Médiathèque, Saint-Sulpice" },
|
||
{ dates: "4 – 28 nov.", place: "Espace Reynès, Albi" },
|
||
{ dates: "1er – 24 déc.", place: "Archives départementales du Tarn, Albi" },
|
||
],
|
||
vernissage: "Vernissage le samedi 18 avril à 17h au Musée-mine départemental, Cagnac-les-Mines.",
|
||
free: "Entrée libre",
|
||
imageAlt: "Affiche de l'exposition « À nous les chemins ! » par Albi Tadam — escalier illuminé aux couleurs bleu, blanc, rouge, photo de Candic Clavel-Deandington",
|
||
},
|
||
en: {
|
||
label: "Current exhibition",
|
||
title: '"The Paths Are Ours!"',
|
||
description: "Itinerant collective photography exhibition with the Albi Tadam association, as part of 'In 2026, culture travels through the Tarn'.",
|
||
venues: [
|
||
{ dates: "April 4 – May 25", place: "Musée-mine départemental, Cagnac-les-Mines" },
|
||
{ dates: "June 1 – 26", place: "Mairie de Pampelonne" },
|
||
{ dates: "July 1 – 31", place: "Communauté de Communes Sor et Agout, Saïx" },
|
||
{ dates: "Aug. 4 – 28", place: "Musée de la vie paysanne, Rieumontagné" },
|
||
{ dates: "Sept. 3 – 30", place: "Pan'art, Castres" },
|
||
{ dates: "Oct. 6 – 31", place: "Médiathèque, Saint-Sulpice" },
|
||
{ dates: "Nov. 4 – 28", place: "Espace Reynès, Albi" },
|
||
{ dates: "Dec. 1 – 24", place: "Archives départementales du Tarn, Albi" },
|
||
],
|
||
vernissage: "Opening reception: Saturday, April 18 at 5 PM, Musée-mine départemental, Cagnac-les-Mines.",
|
||
free: "Free admission",
|
||
imageAlt: "Exhibition poster 'The Paths Are Ours!' by Albi Tadam — stairway lit in blue, white and red, photo by Candic Clavel-Deandington",
|
||
},
|
||
ar: {
|
||
label: "معرض جارٍ",
|
||
title: "« !الدروب لنا »",
|
||
description: "معرض تصوير جماعي متنقل مع جمعية ألبي تادام، ضمن برنامج « في 2026، الثقافة تجوب التارن ».",
|
||
venues: [
|
||
{ dates: "4 أبريل – 25 مايو", place: "متحف المنجم الإقليمي، كانياك لي مين" },
|
||
{ dates: "1 – 26 يونيو", place: "بلدية بامبلون" },
|
||
{ dates: "1 – 31 يوليو", place: "مجموعة بلديات سور وأغو، سايكس" },
|
||
{ dates: "4 – 28 أغسطس", place: "متحف الحياة الريفية، ريومونتانيي" },
|
||
{ dates: "3 – 30 سبتمبر", place: "بان آر، كاستر" },
|
||
{ dates: "6 – 31 أكتوبر", place: "المكتبة الوسائطية، سان سولبيس" },
|
||
{ dates: "4 – 28 نوفمبر", place: "فضاء رينيس، ألبي" },
|
||
{ dates: "1 – 24 ديسمبر", place: "الأرشيف الإقليمي للتارن، ألبي" },
|
||
],
|
||
vernissage: "حفل الافتتاح: السبت 18 أبريل الساعة 17:00، متحف المنجم الإقليمي، كانياك لي مين.",
|
||
free: "الدخول مجاني",
|
||
imageAlt: "ملصق معرض « !الدروب لنا » من ألبي تادام — درج مضاء بالأزرق والأبيض والأحمر",
|
||
},
|
||
};
|
||
|
||
const exh = exhibition[lang];
|
||
---
|
||
|
||
<section id="explore-section" class="explore-section">
|
||
<div class="explore-content">
|
||
<div class="exhibition-banner">
|
||
<div class="exhibition-layout">
|
||
<a href="https://rdvculturels.tarn.fr/ressources/les-expositions-et-conferences/exposition-itinerante-a-nous-les-chemins" target="_blank" rel="noopener noreferrer" class="exhibition-image">
|
||
<Image
|
||
src={exhibitionImage}
|
||
alt={exh.imageAlt}
|
||
width={240}
|
||
class="exhibition-img"
|
||
/>
|
||
</a>
|
||
<div class="exhibition-info">
|
||
<span class="exhibition-label">{exh.label}</span>
|
||
<h2 class="explore-card-title">{exh.title}</h2>
|
||
<p class="explore-card-desc">{exh.description}</p>
|
||
<ul class="venue-list">
|
||
{exh.venues.map((v) => (
|
||
<li class="venue-item">
|
||
<span class="venue-dates">{v.dates}</span>
|
||
<span class="venue-place">{v.place}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<p class="exhibition-vernissage">{exh.vernissage}</p>
|
||
<p class="exhibition-free">{exh.free}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="explore-row">
|
||
<div class="explore-card">
|
||
<h2 class="explore-card-title">{t('photo', 'categories', lang)}</h2>
|
||
<p class="explore-card-desc">{t('photo', 'browseByTheme', lang)}</p>
|
||
<ul class="category-list">
|
||
{sortedCategories.map(cat => (
|
||
<li>
|
||
<a href={`${getPhotoAlbumsPath(lang)}/${cat.id.replace(/\.(en|ar)$/, '')}`} class="category-link">
|
||
{cat.data.title}
|
||
</a>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="explore-card">
|
||
<h2 class="explore-card-title">{t('photo', 'photoFeed', lang)}</h2>
|
||
<p class="explore-card-desc">{t('photo', 'feedDescription', lang)}</p>
|
||
<a href={getPhotoBlogPath(lang)} class="explore-cta">
|
||
{t('photo', 'viewFeed', lang)}
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||
<polyline points="12 5 19 12 12 19"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
.explore-section {
|
||
position: relative;
|
||
background: #000;
|
||
z-index: 20;
|
||
padding: 4rem 2rem;
|
||
padding-top: 8rem;
|
||
min-height: 60vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.explore-section::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -30vh;
|
||
left: 0;
|
||
right: 0;
|
||
height: 30vh;
|
||
background: linear-gradient(to bottom, transparent, #000);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.explore-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3rem;
|
||
max-width: 900px;
|
||
width: 100%;
|
||
}
|
||
|
||
.explore-row {
|
||
display: flex;
|
||
gap: 3rem;
|
||
}
|
||
|
||
.explore-card {
|
||
flex: 1;
|
||
padding: 2rem;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.explore-card-title {
|
||
margin: 0 0 0.5rem;
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: white;
|
||
}
|
||
|
||
.explore-card-desc {
|
||
margin: 0 0 1.5rem;
|
||
font-size: 0.95rem;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Exhibition banner */
|
||
.exhibition-banner {
|
||
padding: 2rem;
|
||
background: rgba(16, 185, 129, 0.08);
|
||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.exhibition-layout {
|
||
display: flex;
|
||
gap: 2rem;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.exhibition-image {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.exhibition-img {
|
||
border-radius: 10px;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.exhibition-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.exhibition-label {
|
||
display: inline-block;
|
||
padding: 0.25rem 0.7rem;
|
||
margin-bottom: 0.75rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: rgba(16, 185, 129, 0.9);
|
||
background: rgba(16, 185, 129, 0.15);
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.venue-list {
|
||
list-style: none;
|
||
margin: 0 0 1rem;
|
||
padding: 0;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0.4rem 2rem;
|
||
}
|
||
|
||
.venue-item {
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.venue-dates {
|
||
font-weight: 500;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
}
|
||
|
||
.venue-place {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.exhibition-vernissage {
|
||
margin: 0 0 0.25rem;
|
||
font-size: 0.85rem;
|
||
font-style: italic;
|
||
color: rgba(16, 185, 129, 0.7);
|
||
}
|
||
|
||
.exhibition-free {
|
||
margin: 0;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: rgba(16, 185, 129, 0.9);
|
||
}
|
||
|
||
.category-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.category-link {
|
||
display: inline-block;
|
||
padding: 0.4rem 0.9rem;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
border-radius: 20px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
text-decoration: none;
|
||
font-size: 0.9rem;
|
||
transition: background 0.2s ease, color 0.2s ease;
|
||
}
|
||
|
||
.category-link:hover {
|
||
background: rgba(255, 255, 255, 0.15);
|
||
color: white;
|
||
}
|
||
|
||
.explore-cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.6rem 1.2rem;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 8px;
|
||
color: white;
|
||
text-decoration: none;
|
||
font-size: 0.95rem;
|
||
font-weight: 500;
|
||
transition: background 0.2s ease;
|
||
}
|
||
|
||
.explore-cta:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.explore-section {
|
||
padding: 3rem 1.25rem;
|
||
}
|
||
|
||
.explore-row {
|
||
flex-direction: column;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.explore-card {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.exhibition-layout {
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.exhibition-image {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.exhibition-banner {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.venue-list {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|