Accueil : clarifier les 3 activités dans le hero avec phrase d'accroche et 3 boutons colorés (FR/EN/AR)

This commit is contained in:
Jalil Arfaoui 2026-03-17 19:36:44 +01:00
parent c6e5caa4e0
commit 21a302a2ec
3 changed files with 37 additions and 19 deletions

View file

@ -32,15 +32,21 @@ const recommendationCount = (await getCollection("recommendations")).length;
مطوّر • مصوّر • ممثل
</h2>
<p class="mb-8 text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
أكتب الكود من أجل عالم أكثر عدلًا، وأصعد على الخشبة لأجل الباقي. أو العكس.
ثلاثة أنشطة، محرّك واحد: الفضول. أصمّم البرمجيات، أصوّر ما حولي، وأصعد على الخشبة.
</p>
<div class="flex flex-wrap gap-4">
<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">
اكتشف أعمالي
<div class="flex flex-wrap gap-3">
<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>
<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 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>
<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>
</div>
</div>

View file

@ -32,15 +32,21 @@ const recommendationCount = (await getCollection("recommendations")).length;
Software Craftsman • Photographer • Actor
</h2>
<p class="mb-8 text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
I write code for a fairer world and get on stage for the rest. Or the other way around.
Three pursuits, one driving force: curiosity. I build software, photograph what surrounds me, and perform on stage.
</p>
<div class="flex flex-wrap gap-4">
<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">
View my work
<div class="flex flex-wrap gap-3">
<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">
Code
</a>
<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">
Learn more
<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">
Photo
</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>
</div>
</div>

View file

@ -32,15 +32,21 @@ const recommendationCount = (await getCollection("recommendations")).length;
Développeur • Photographe • Comédien
</h2>
<p class="mb-8 text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
Je code pour un monde plus juste et je monte sur scène pour le reste. Ou l'inverse.
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.
</p>
<div class="flex flex-wrap gap-4">
<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">
Voir mon travail
<div class="flex flex-wrap gap-3">
<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">
Code
</a>
<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">
En savoir plus
<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">
Photo
</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>
</div>
</div>