jalil/jalil.arfaoui.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: jalil:21a302a2ec46655ef8a4dc6b504b6353c5bbf173
Branches Tags
jalil:main
..
compare: jalil:f30ac85643ec8c16ac28d45cd1474d5f21f024d6
Branches Tags
jalil:main

No commits in common. "21a302a2ec46655ef8a4dc6b504b6353c5bbf173" and "f30ac85643ec8c16ac28d45cd1474d5f21f024d6" have entirely different histories.
21a302a2ec ... f30ac85643

6 changed files with 48 additions and 270 deletions
Show stats Expand all files Collapse all files

BIN
src/assets/images/a-nous-les-chemins.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 227 KiB

237
src/components/photo/ExploreSection.astro
View file

@ -1,8 +1,6 @@
--- ---
import { Image } from 'astro:assets';
import { getLocalizedCollection } from '../../utils/content-i18n'; import { getLocalizedCollection } from '../../utils/content-i18n';
import { t, getPhotoBlogPath, getPhotoAlbumsPath, type Locale } from '../../utils/i18n'; import { t, getPhotoBlogPath, getPhotoAlbumsPath, type Locale } from '../../utils/i18n';
import exhibitionImage from '../../assets/images/a-nous-les-chemins.jpg';
interface Props { interface Props {
lang?: Locale; lang?: Locale;
@ -13,123 +11,34 @@ const { lang = 'fr' } = Astro.props;
// Récupérer les catégories filtrées par langue // Récupérer les catégories filtrées par langue
const sortedCategories = (await getLocalizedCollection('photoCategories', lang)) const sortedCategories = (await getLocalizedCollection('photoCategories', lang))
.sort((a, b) => (a.data.order || 99) - (b.data.order || 99)); .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"> <section id="explore-section" class="explore-section">
<div class="explore-content"> <div class="explore-content">
<div class="exhibition-banner"> <div class="explore-card">
<div class="exhibition-layout"> <h2 class="explore-card-title">{t('photo', 'categories', lang)}</h2>
<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"> <p class="explore-card-desc">{t('photo', 'browseByTheme', lang)}</p>
<Image <ul class="category-list">
src={exhibitionImage} {sortedCategories.map(cat => (
alt={exh.imageAlt} <li>
width={240} <a href={`${getPhotoAlbumsPath(lang)}/${cat.id.replace(/\.(en|ar)$/, '')}`} class="category-link">
class="exhibition-img" {cat.data.title}
/> </a>
</a> </li>
<div class="exhibition-info"> ))}
<span class="exhibition-label">{exh.label}</span> </ul>
<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>
<div class="explore-row"> <div class="explore-card">
<div class="explore-card"> <h2 class="explore-card-title">{t('photo', 'photoFeed', lang)}</h2>
<h2 class="explore-card-title">{t('photo', 'categories', lang)}</h2> <p class="explore-card-desc">{t('photo', 'feedDescription', lang)}</p>
<p class="explore-card-desc">{t('photo', 'browseByTheme', lang)}</p> <a href={getPhotoBlogPath(lang)} class="explore-cta">
<ul class="category-list"> {t('photo', 'viewFeed', lang)}
{sortedCategories.map(cat => ( <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<li> <line x1="5" y1="12" x2="19" y2="12"/>
<a href={`${getPhotoAlbumsPath(lang)}/${cat.id.replace(/\.(en|ar)$/, '')}`} class="category-link"> <polyline points="12 5 19 12 12 19"/>
{cat.data.title} </svg>
</a> </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>
</div> </div>
</section> </section>
@ -160,17 +69,11 @@ const exh = exhibition[lang];
.explore-content { .explore-content {
display: flex; display: flex;
flex-direction: column;
gap: 3rem; gap: 3rem;
max-width: 900px; max-width: 900px;
width: 100%; width: 100%;
} }
.explore-row {
display: flex;
gap: 3rem;
}
.explore-card { .explore-card {
flex: 1; flex: 1;
padding: 2rem; padding: 2rem;
@ -193,82 +96,6 @@ const exh = exhibition[lang];
line-height: 1.5; 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 { .category-list {
list-style: none; list-style: none;
margin: 0; margin: 0;
@ -319,7 +146,7 @@ const exh = exhibition[lang];
padding: 3rem 1.25rem; padding: 3rem 1.25rem;
} }
.explore-row { .explore-content {
flex-direction: column; flex-direction: column;
gap: 2rem; gap: 2rem;
} }
@ -327,23 +154,5 @@ const exh = exhibition[lang];
.explore-card { .explore-card {
padding: 1.5rem; 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> </style>

2
src/components/photo/PhotoGallery.astro
View file

@ -1,6 +1,7 @@
--- ---
import CategoryNav from './CategoryNav.astro'; import CategoryNav from './CategoryNav.astro';
import Slideshow from './Slideshow.astro'; import Slideshow from './Slideshow.astro';
import SlideControls from './SlideControls.astro';
import favorites from '../../data/favorites.json'; import favorites from '../../data/favorites.json';
import type { Locale } from '../../utils/i18n'; import type { Locale } from '../../utils/i18n';
@ -53,6 +54,7 @@ const imagesForJS = JSON.stringify(images.map(img => ({
<div id="photo-gallery" class="gallery-container"> <div id="photo-gallery" class="gallery-container">
<CategoryNav currentCategory="" lang={lang} /> <CategoryNav currentCategory="" lang={lang} />
<Slideshow images={images} lang={lang} /> <Slideshow images={images} lang={lang} />
<SlideControls lang={lang} />
</div> </div>
<script is:inline define:vars={{ imagesForJS }}> <script is:inline define:vars={{ imagesForJS }}>

25
src/pages/ar/index.astro
View file

@ -32,21 +32,15 @@ const recommendationCount = (await getCollection("recommendations")).length;
مطوّر • مصوّر • ممثل مطوّر • مصوّر • ممثل
</h2> </h2>
<p class="mb-8 text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed"> <p class="mb-8 text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
ثلاثة أنشطة، محرّك واحد: الفضول. أصمّم البرمجيات، أصوّر ما حولي، وأصعد على الخشبة. أكتب الكود من أجل عالم أكثر عدلًا، وأصعد على الخشبة لأجل الباقي. أو العكس.
</p> </p>
<div class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-4">
<a href="/ar/برمجة" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200"> <a href="/ar/برمجة" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200">
برمجة اكتشف أعمالي
</a> </a>
<a href="/ar/تصوير" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-slate-600 rounded-full hover:bg-slate-700 transition-colors duration-200"> <a href="/ar/نبذة-عني" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
تصوير تعرّف عليّ أكثر
</a>
<a href="/ar/مسرح" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-amber-600 rounded-full hover:bg-amber-700 transition-colors duration-200">
مسرح
</a>
<a href="/ar/نبذة-عني" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
نبذة عنّي
</a> </a>
</div> </div>
</div> </div>
@ -140,14 +134,9 @@ const recommendationCount = (await getCollection("recommendations")).length;
<h3 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3"> <h3 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3">
التصوير التصوير
</h3> </h3>
<p class="text-slate-600 dark:text-slate-300 mb-4 leading-relaxed"> <p class="text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
أصوّر كل شيء تقريبًا: وجوه، حفلات، محرّكات، الحياة اليومية. لا تخصّص، مجرّد فضول. أصوّر كل شيء تقريبًا: وجوه، حفلات، محرّكات، الحياة اليومية. لا تخصّص، مجرّد فضول.
</p> </p>
<div class="mb-4 px-3 py-2 bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200/60 dark:border-emerald-800/40 rounded-xl">
<p class="text-sm font-medium text-emerald-800 dark:text-emerald-200">
معرض متنقل « !الدروب لنا » مع ألبي تادام — أبريل إلى ديسمبر 2026، في التارن
</p>
</div>
<div class="space-y-3"> <div class="space-y-3">
<span class="block text-slate-500 dark:text-slate-400 group-hover:text-slate-800 dark:group-hover:text-slate-200 font-medium"> <span class="block text-slate-500 dark:text-slate-400 group-hover:text-slate-800 dark:group-hover:text-slate-200 font-medium">
← معرض الصور ← معرض الصور

25
src/pages/en/index.astro
View file

@ -32,21 +32,15 @@ const recommendationCount = (await getCollection("recommendations")).length;
Software Craftsman • Photographer • Actor Software Craftsman • Photographer • Actor
</h2> </h2>
<p class="mb-8 text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed"> <p class="mb-8 text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
Three pursuits, one driving force: curiosity. I build software, photograph what surrounds me, and perform on stage. I write code for a fairer world and get on stage for the rest. Or the other way around.
</p> </p>
<div class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-4">
<a href="/en/code" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200"> <a href="/en/code" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200">
Code View my work
</a> </a>
<a href="/en/photo" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-slate-600 rounded-full hover:bg-slate-700 transition-colors duration-200"> <a href="/en/about" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
Photo Learn more
</a>
<a href="/en/theater" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-amber-600 rounded-full hover:bg-amber-700 transition-colors duration-200">
Theater
</a>
<a href="/en/about" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
About
</a> </a>
</div> </div>
</div> </div>
@ -140,14 +134,9 @@ const recommendationCount = (await getCollection("recommendations")).length;
<h3 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3"> <h3 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3">
Photography Photography
</h3> </h3>
<p class="text-slate-600 dark:text-slate-300 mb-4 leading-relaxed"> <p class="text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
I photograph a bit of everything: faces, concerts, engines, everyday life. No specialty, just curiosity. I photograph a bit of everything: faces, concerts, engines, everyday life. No specialty, just curiosity.
</p> </p>
<div class="mb-4 px-3 py-2 bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200/60 dark:border-emerald-800/40 rounded-xl">
<p class="text-sm font-medium text-emerald-800 dark:text-emerald-200">
Itinerant exhibition "The Paths Are Ours!" with Albi Tadam — April to December 2026, in the Tarn
</p>
</div>
<div class="space-y-3"> <div class="space-y-3">
<span class="block text-slate-500 dark:text-slate-400 group-hover:text-slate-800 dark:group-hover:text-slate-200 font-medium"> <span class="block text-slate-500 dark:text-slate-400 group-hover:text-slate-800 dark:group-hover:text-slate-200 font-medium">
→ Photo portfolio → Photo portfolio

29
src/pages/index.astro
View file

@ -32,21 +32,15 @@ const recommendationCount = (await getCollection("recommendations")).length;
Développeur • Photographe • Comédien Développeur • Photographe • Comédien
</h2> </h2>
<p class="mb-8 text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed"> <p class="mb-8 text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
Trois activités, un même moteur : la curiosité. Je conçois du logiciel, je photographie ce qui m'entoure et je monte sur scène. Je code pour un monde plus juste et je monte sur scène pour le reste. Ou l'inverse.
</p> </p>
<div class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-4">
<a href="/code" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200"> <a href="/code" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-tiqa-600 rounded-full hover:bg-tiqa-700 transition-colors duration-200">
Code Voir mon travail
</a> </a>
<a href="/photo" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-slate-600 rounded-full hover:bg-slate-700 transition-colors duration-200"> <a href="/a-propos" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
Photo En savoir plus
</a>
<a href="/theatre" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-amber-600 rounded-full hover:bg-amber-700 transition-colors duration-200">
Théâtre
</a>
<a href="/a-propos" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-neutral-700 bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors duration-200">
À propos
</a> </a>
</div> </div>
</div> </div>
@ -140,14 +134,9 @@ const recommendationCount = (await getCollection("recommendations")).length;
<h3 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3"> <h3 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-3">
Photographie Photographie
</h3> </h3>
<p class="text-slate-600 dark:text-slate-300 mb-4 leading-relaxed"> <p class="text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
Je photographie un peu tout : des visages, des concerts, des moteurs, le quotidien. Pas de spécialité, juste la curiosité. Je photographie un peu tout : des visages, des concerts, des moteurs, le quotidien. Pas de spécialité, juste la curiosité.
</p> </p>
<div class="mb-4 px-3 py-2 bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200/60 dark:border-emerald-800/40 rounded-xl">
<p class="text-sm font-medium text-emerald-800 dark:text-emerald-200">
Expo itinérante « À nous les chemins ! » avec Albi Tadam — avril à décembre 2026, dans le Tarn
</p>
</div>
<div class="space-y-3"> <div class="space-y-3">
<span class="block text-slate-500 dark:text-slate-400 group-hover:text-slate-800 dark:group-hover:text-slate-200 font-medium"> <span class="block text-slate-500 dark:text-slate-400 group-hover:text-slate-800 dark:group-hover:text-slate-200 font-medium">
→ Portfolio photo → Portfolio photo
@ -162,7 +151,7 @@ const recommendationCount = (await getCollection("recommendations")).length;
</div> </div>
</div> </div>
<!-- Blog Section <!-- Blog Section
<div class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0"> <div class="relative z-20 w-full max-w-6xl mx-auto mt-24 px-7 xl:px-0">
<div class="text-center mb-12"> <div class="text-center mb-12">
<h2 class="text-3xl font-bold text-neutral-800 dark:text-neutral-200 mb-4"> <h2 class="text-3xl font-bold text-neutral-800 dark:text-neutral-200 mb-4">