From 19c48e160c20861e0e8994c7e78f971c5e47f4d4 Mon Sep 17 00:00:00 2001
From: Matheo Guilbert <Matheo.Guilbert@ixapack.com>
Date: Fri, 17 Apr 2026 11:29:15 +0200
Subject: [PATCH] fixed some responsive design details

---
 components/sections/HeroSection.tsx | 11 ++++++-----
 components/sections/ProjectHero.tsx | 11 +++++++----
 components/ui/LanguageSwitcher.tsx  |  2 +-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/components/sections/HeroSection.tsx b/components/sections/HeroSection.tsx
index b8805ac..8eec660 100644
--- a/components/sections/HeroSection.tsx
+++ b/components/sections/HeroSection.tsx
@@ -25,8 +25,12 @@ export default function HeroSection() {
             ref={sectionRef}
             className="w-full min-h-[calc(100vh-(2*11px))] rounded-[10px] bg-brand-brown text-brand-beige flex flex-col overflow-hidden relative"
         >
+            {/* Spacer: clears the fixed header (~91px) + mirrors the bottom bar height (~52px)
+                so justify-center lands on the visual centre of the viewport below the header */}
+            <div className="shrink-0" style={{ height: 'clamp(120px, 15vh, 160px)' }} />
+
             {/* Main content */}
-            <div className="flex flex-col lg:flex-row flex-1 px-8 md:px-14 lg:px-20 pt-16 pb-12 gap-10 lg:gap-0">
+            <div className="flex flex-col lg:flex-row flex-1 items-center px-8 md:px-14 lg:px-20 gap-10 lg:gap-0">
 
                 {/* Left — editorial text */}
                 <div className="flex flex-col justify-center lg:w-[55%] lg:pr-12 gap-8 lg:gap-10">
@@ -91,10 +95,7 @@ export default function HeroSection() {
                     className="hero-reveal relative flex items-center justify-center lg:w-[45%]"
                     style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 900ms cubic-bezier(0.22,1,0.36,1), transform 900ms cubic-bezier(0.22,1,0.36,1)' }}
                 >
-                    {/* Decorative accent ring */}
-                    <div className="absolute inset-4 rounded-[14px] border border-brand-beige/8 pointer-events-none" />
-
-                    <div className="relative w-full h-full min-h-[320px] lg:min-h-0 rounded-[10px] overflow-hidden">
+                    <div className="relative rounded-[10px] overflow-hidden" style={{ width: 'clamp(260px, 32vw, 420px)', height: 'clamp(320px, 40vw, 520px)' }}>
                         <img
                             src="/images/pofile.png"
                             alt="Mathéo Guilbert, développeur Full Stack"
diff --git a/components/sections/ProjectHero.tsx b/components/sections/ProjectHero.tsx
index 331126f..693b186 100644
--- a/components/sections/ProjectHero.tsx
+++ b/components/sections/ProjectHero.tsx
@@ -47,8 +47,11 @@ export function ProjectHero({ title, description, dateLabel, locale, cover }: pr
                 </div>
             )}
 
-            {/* Back link */}
-            <div className="relative z-10 px-8 md:px-14 lg:px-20 pt-30">
+            {/* Top zone: clears the fixed header (~91px) + anchors the back link */}
+            <div
+                className="relative z-10 shrink-0 flex items-end px-8 md:px-14 lg:px-20 pb-4"
+                style={{ height: 'clamp(120px, 15vh, 160px)' }}
+            >
                 <div
                     className="hero-reveal"
                     style={{ opacity: 0, transform: 'translateY(20px)', transition: 'opacity 500ms ease, transform 500ms cubic-bezier(0.22,1,0.36,1)' }}
@@ -71,8 +74,8 @@ export function ProjectHero({ title, description, dateLabel, locale, cover }: pr
                 </div>
             </div>
 
-            {/* Main content — vertically centred */}
-            <div className="relative z-10 flex flex-col flex-1 items-center justify-center px-8 md:px-14 lg:px-20 py-16 text-center">
+            {/* Main content — centred in the remaining visible area */}
+            <div className="relative z-10 flex flex-col flex-1 items-center justify-center px-8 md:px-14 lg:px-20 text-center">
                 {/* Category pill */}
                 <div
                     className="hero-reveal mb-6"
diff --git a/components/ui/LanguageSwitcher.tsx b/components/ui/LanguageSwitcher.tsx
index 26b0604..9a6ac6c 100644
--- a/components/ui/LanguageSwitcher.tsx
+++ b/components/ui/LanguageSwitcher.tsx
@@ -26,7 +26,7 @@ export default function LanguageSwitcher() {
     return (
         <div className="flex items-center gap-2 font-sans text-xs uppercase tracking-widest text-brand-beige">
             {locales.map((language, index) => (
-                <div key={index}>
+                <div key={index} className="flex items-center gap-2">
                     <button 
                         onClick={() => switchLanguage(language)}
                         className={`transition-opacity duration-200 cursor-pointer ${currentLocale === language ? 'opacity-100 font-medium' : 'opacity-40 hover:opacity-70'}`}