works section

app/[locale]/page.tsx

@@ -1,9 +1,11 @@
 import HeroSection from "@/components/sections/HeroSection";
+import WorksSection from "@/components/sections/WorksSection";
 
 export default function Home() {
 	return (
 		<main className=" bg-brand-beige text-brand-black flex flex-col items-center justify-center">
 			<HeroSection />
+			<WorksSection />
 		</main>
 	);
 }

components/sections/WorksSection.tsx

@@ -0,0 +1,47 @@
+import { ProjectCard } from "../ui/ProjectCard";
+
+export default function WorksSection() {
+    return (
+        <div className="w-full flex flex-col items-start justify-start">
+            <h2 className="text-9xl font-serif text-brand-brown">Travaux</h2>
+
+            <ProjectCard 
+                projectVideoPath={""} 
+                projectName={"EVEREAST SOLUTIONS"} 
+                projectType={"Application web"} 
+                projectDate={"2026 - auj."} 
+                roles={["Co-fondateur", "développeur full-stack"]} 
+                projectDescription={"Plateforme de mise en relations clients - agences web et gestion de projet agile"} 
+                projectPageLink={"/"} 
+            />
+            <ProjectCard 
+                projectVideoPath={""} 
+                projectName={"THREADBASE"} 
+                projectType={"Application macOS"} 
+                projectDate={"2026 - auj."} 
+                roles={["Développeur full-stack"]} 
+                projectDescription={"Application macOS qui sauvegarde les fenêtres, les notes mentales et le contexte Git d’un projet pour en faciliter la réouverture."} 
+                projectPageLink={""} 
+            />
+            <ProjectCard 
+                projectVideoPath={""} 
+                projectName={"GGCG"} 
+                projectType={"Application web"} 
+                projectDate={"2026 - auj."} 
+                roles={["Développeur full-stack"]} 
+                projectDescription={"Une vue unifiée et élégante de toute votre activité de développement, centralisant les contributions de toutes vos forges Git dans une seule heatmap interactive."} 
+                projectPageLink={""} 
+            />
+            <ProjectCard 
+                projectVideoPath={""} 
+                projectName={"MG DEV"} 
+                projectType={"Site web"} 
+                projectDate={"2026"} 
+                roles={["Développeur full-stack"]} 
+                projectDescription={"Un site web pour présenter mon profil, mes compétences et mes projets de développement."} 
+                projectPageLink={""} 
+                isTheLast={true}
+            />
+        </div>
+    );
+}

components/ui/ProjectCard.tsx

@@ -0,0 +1,66 @@
+import { GoArrowRight } from "react-icons/go";
+
+type props = {
+    projectVideoPath    : String;
+    projectName         : String;
+    projectType         : String;
+    projectDate         : String;
+    roles               : String[];
+    projectDescription  : String;
+    projectPageLink     : String;
+    isTheLast?          : boolean;
+};
+
+export const ProjectCard = ({ 
+    projectVideoPath,
+    projectName, 
+    projectType, 
+    projectDate, 
+    roles, 
+    projectDescription, 
+    projectPageLink, 
+    isTheLast = false 
+}: props) => {
+    return (
+        <div className="w-full">
+            {/* 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>
+                
+                {/* Left image/video */}
+                <div className="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">
+                    <div className="flex flex-col items-start justify-center w-full">
+                        <div className="p-1.5 bg-brand-brown rounded-px text-brand-beige font-sans">{projectType}</div>
+                        <div className="text-5xl text-brand-brown font-serif uppercase">{projectName}</div>
+                        <div className="text-2xl  font-serif font-light">
+                            <p>(
+                                {roles.map((role, index) => (
+                                    role + (index < roles.length - 1 ? ", " : "")
+                                ))}
+                            )</p>
+                        </div>
+                    </div>
+
+                    <div className="text-base font-normal font-sans">{projectDescription}</div>
+
+                    <div className="border-b text-base flex flex-row justify-center items-center gap-0.5">
+                        <p>READ</p>
+                        <GoArrowRight />
+                    </div>
+                </div>
+            </div>
+            
+
+
+            
+            {/* Bottom separator */}
+            {isTheLast && <div className="w-full h-px bg-brand-brown/20" />}
+        </div>
+    );
+};