From f7ae517b658c0052a1218bd0a32a3ae3d26ef234 Mon Sep 17 00:00:00 2001
From: Matheo Guilbert <Matheo.Guilbert@ixapack.com>
Date: Wed, 15 Apr 2026 17:45:49 +0200
Subject: [PATCH] improve responsive design

---
 components/sections/FeatureSection.tsx |  2 +-
 components/sections/WorksSection.tsx   |  2 +-
 components/ui/FeatureColumn.tsx        |  6 +++---
 components/ui/ProjectCard.tsx          | 10 +++++-----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/sections/FeatureSection.tsx b/components/sections/FeatureSection.tsx
index b0a9730..6c75261 100644
--- a/components/sections/FeatureSection.tsx
+++ b/components/sections/FeatureSection.tsx
@@ -2,7 +2,7 @@ import { FeatureColumn } from '@/components/ui/FeatureColumn';
 
 export default function FeatureSection() {
     return (
-        <section className="w-full h-180 flex flex-row justify-center items-center">
+        <section className="w-full flex flex-wrap justify-around items-center gap-16 mt-30 lg:mt-40 mb-40">
             <FeatureColumn 
                 imagePath={"/icons/brain.svg"} 
                 title={"Plus qu'un simple exécutant"} 
diff --git a/components/sections/WorksSection.tsx b/components/sections/WorksSection.tsx
index 47c5eec..66a4a58 100644
--- a/components/sections/WorksSection.tsx
+++ b/components/sections/WorksSection.tsx
@@ -3,7 +3,7 @@ import { ProjectCard } from "../ui/ProjectCard";
 export default function WorksSection() {
     return (
         <section className="w-full flex flex-col items-start justify-start">
-            <h2 className="text-9xl font-serif text-brand-brown">Travaux</h2>
+            <h2 className="text-[clamp(80px,10vw,128px)] font-serif text-brand-brown mt-6 mb-4">Travaux</h2>
 
             <ProjectCard 
                 projectVideoPath={""} 
diff --git a/components/ui/FeatureColumn.tsx b/components/ui/FeatureColumn.tsx
index 34ce1ca..afee71e 100644
--- a/components/ui/FeatureColumn.tsx
+++ b/components/ui/FeatureColumn.tsx
@@ -6,10 +6,10 @@ type props = {
 
 export const FeatureColumn = ({ imagePath, title, text }: props) => {
     return (
-        <div className="flex flex-col items-center justify-start h-100 gap-7">
+        <div className="flex flex-col items-center justify-start max-w-150 h-auto gap-7">
             <img className="w-33.75 h-33.75" src={imagePath} alt={`icon illustrating the text ${title}`} />
-            <div className="font-serif text-brand-brown text-3xl">{title}</div>
-            <div className="font-sans text-normal text-center w-3/5">{text}</div>
+            <div className="font-serif text-brand-brown text-center leading-[1.05] text-balance text-[clamp(2rem,5vw,30px)]">{title}</div>
+            <div className="font-sans text-base text-center w-3/5">{text}</div>
         </div>
     );
 };
\ No newline at end of file
diff --git a/components/ui/ProjectCard.tsx b/components/ui/ProjectCard.tsx
index 0ee3474..7b41170 100644
--- a/components/ui/ProjectCard.tsx
+++ b/components/ui/ProjectCard.tsx
@@ -22,16 +22,16 @@ export const ProjectCard = ({
     isTheLast = false 
 }: props) => {
     return (
-        <div className="w-full">
+        <div className="w-full pb-12">
             {/* Top separator */}
             <div className="w-full h-px bg-brand-brown/20" />
 
             {/* *** Content *** */}
-            <div className="flex flex-row justify-between items-center gap-14 relative">
-                <div className="absolute top-1 right-1 text-5xl font-serif text-brand-brown/40 font-semibold">{projectDate}</div>
+            <div className="flex flex-col gap-4 lg:flex-row lg:justify-between lg:items-center lg:gap-14 relative">
+                <div className="text-5xl font-serif text-brand-brown/40 mt-6 font-semibold lg:absolute lg:top-1 lg:right-1 ">{projectDate}</div>
                 
                 {/* Left image/video */}
-                <div className="w-3/5 h-92.5 bg-gray-600"></div>
+                <div className="w-full lg:w-3/5 h-92.5 bg-gray-600"></div>
             
                 {/* Texts */}
                 <div className="flex flex-col items-start justify-center w-full gap-7.5">
@@ -57,7 +57,7 @@ export const ProjectCard = ({
             </div>
             
             {/* Bottom separator */}
-            {isTheLast && <div className="w-full h-px bg-brand-brown/20" />}
+            {isTheLast && <div className="w-full h-px mt-12 bg-brand-brown/20" />}
         </div>
     );
 };
\ No newline at end of file