fixed design project page

app/[locale]/page.tsx

@@ -5,13 +5,13 @@ import TimelineSection from "@/components/sections/AboutSection";
 
 import { getAllProjects } from "@/lib/projects/get-projects";
 
-type Props = {
+type props = {
 	params: Promise<{
 		locale: string;
 	}>;
 };
 
-export default async function Home({ params }: Props) {
+export default async function Home({ params }: props) {
 	const { locale } = await params;
 	const projects = getAllProjects();
 

app/[locale]/works/[slug]/page.tsx

@@ -1,13 +1,13 @@
 import { notFound } from "next/navigation";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import { getAllProjects, getProjectBySlug, getProjectSlugs } from "@/lib/projects/get-projects";
-import { mdxComponents } from "@/components/mdx/mdx-components";
+import { mdxComponents } from "@/components/mdx/mdxComponents";
 import { ProjectHero } from "@/components/sections/ProjectHero";
 import { ProjectMeta } from "@/components/sections/ProjectMeta";
 import { ProjectTechnologies } from "@/components/sections/ProjectTechnologies";
 import { OtherProjects } from "@/components/sections/OtherProjects";
 
-type Props = {
+type props = {
     params: Promise<{
         locale: string;
         slug: string;
@@ -21,7 +21,7 @@ export function generateStaticParams() {
     ]);
 }
 
-export default async function ProjectPage({ params }: Props) {
+export default async function ProjectPage({ params }: props) {
     const { locale, slug } = await params;
     const project = getProjectBySlug(slug);
 
@@ -39,17 +39,17 @@ export default async function ProjectPage({ params }: Props) {
         }));
 
     return (
-        <main className="bg-[#f5f3ef] text-[#2b160f]">
+        <main className="bg-[#f5f3ef]">
-            <div className="mx-auto max-w-7xl px-6 py-6">
+            <div className="mx-auto max-w-full ">
                 <ProjectHero
                     locale={locale}
                     title={project.title}
-                    subtitle={project.subtitle}
+                    description={project.description}
-                    year={project.year}
+                    dateLabel={project.dateLabel}
                 />
 
                 <ProjectMeta
-                    year={project.year}
+                    dateLabel={project.dateLabel}
                     category={project.category}
                     roles={project.roles}
                     client={project.client}
@@ -58,13 +58,11 @@ export default async function ProjectPage({ params }: Props) {
                 <ProjectTechnologies technologies={project.technologies} />
 
                 <section className="pb-16">
-                    <article
+                    <article className="
-                        className="
+                        prose prose-neutral max-w-none
-              prose prose-neutral max-w-none
+                        prose-h2:text-6xl prose-h2:font-semibold prose-h2:text-[#2b160f]
-              prose-h2:text-6xl prose-h2:font-semibold prose-h2:text-[#2b160f]
+                        prose-p:text-base prose-p:leading-8 prose-p:text-neutral-800
-              prose-p:text-base prose-p:leading-8 prose-p:text-neutral-800
+                    ">
-            "
-                    >
                         <MDXRemote source={project.content} components={mdxComponents} />
                     </article>
                 </section>

components/mdx/mdxComponents.tsx

@@ -3,7 +3,7 @@ import { ProjectPreviewGrid } from "@/components/mdx/ProjectPreviewGrid";
 import { ProjectVisitButton } from "@/components/mdx/ProjectVisitButton";
 
 export const mdxComponents = {
-  ProjectsColumns: ProjectsColumns,
+	ProjectsColumns: ProjectsColumns,
-  ProjectPreviewGrid,
+	ProjectPreviewGrid,
-  ProjectVisitButton,
+	ProjectVisitButton,
 };

components/sections/OtherProjects.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-type Props = {
+type props = {
     locale: string;
     projects: {
         slug: string;
@@ -9,7 +9,7 @@ type Props = {
     }[];
 };
 
-export function OtherProjects({ locale, projects }: Props) {
+export function OtherProjects({ locale, projects }: props) {
     if (!projects.length) return null;
 
     return (

components/sections/ProjectHero.tsx

@@ -1,32 +1,36 @@
 import Link from "next/link";
 
-type Props = {
+import { GoArrowLeft } from "react-icons/go";
+
+type props = {
     title: string;
-    subtitle: string;
+    description: string;
-    year: number;
+    dateLabel: string;
     locale: string;
 };
 
-export function ProjectHero({ title, subtitle, year, locale }: Props) {
+export function ProjectHero({ title, description, dateLabel, locale }: props) {
     return (
-        <section className="rounded-[28px] bg-[#2b160f] px-6 py-16 text-white md:px-12 md:py-28">
+        <div className="md:pt-22">
-            <Link
+            <section className="rounded-[10px] bg-brand-brown flex flex-col items-center justify-center  text-brand-beige px-6 py-4">
-                href={`/${locale}/works`}
+                <Link
-                className="mb-10 inline-flex text-sm text-white/80 hover:text-white"
+                    href={`/${locale}#works`}
-            >
+                    className="w-full mb-10 inline-flex items-center justify-start gap-2 text-sm text-brand-beige"
-                ← Retour aux projets
+                >
-            </Link>
+                    <GoArrowLeft /> Retour aux projets
+                </Link>
 
-            <div className="mx-auto flex min-h-[360px] max-w-4xl flex-col items-center justify-center text-center">
+                <div className="mx-auto flex min-h-90 max-w-4xl flex-col items-center justify-center text-center">
-                <h1 className="text-5xl font-semibold md:text-7xl">{title}</h1>
+                    <h1 className="text-5xl font-serif md:text-7xl">{title}</h1>
-                <p className="mt-4 text-lg text-white/80 md:text-2xl">{subtitle}</p>
+                    <p className="mt-4 font-sans text-base text-brand-beige/80">{description}</p>
 
-                <div className="mt-8 flex items-center gap-4 text-sm text-white/70">
+                    <div className="mt-8 flex items-center gap-4 text-sm text-brand-beige/70">
-                    <span className="h-px w-16 bg-white/30" />
+                        <span className="h-px w-16 bg-white/30" />
-                    <span>{year}</span>
+                        <span>{dateLabel}</span>
-                    <span className="h-px w-16 bg-white/30" />
+                        <span className="h-px w-16 bg-white/30" />
+                    </div>
                 </div>
-            </div>
+            </section>
-        </section>
+        </div>
     );
 }

components/sections/ProjectMeta.tsx

@@ -1,5 +1,5 @@
-type Props = {
+type props = {
-    year: number;
+    dateLabel: string;
     category: string;
     roles: string[];
     client: string;
@@ -20,10 +20,10 @@ function Item({
     );
 }
 
-export function ProjectMeta({ year, category, roles, client }: Props) {
+export function ProjectMeta({ dateLabel, category, roles, client }: props) {
     return (
         <section className="grid gap-8 py-10 md:grid-cols-4">
-            <Item label="Année">{year}</Item>
+            <Item label="Année">{dateLabel}</Item>
             <Item label="Catégorie">{category}</Item>
             <Item label="Rôles">
                 <div className="flex flex-col gap-1">

components/sections/ProjectTechnologies.tsx

@@ -1,8 +1,8 @@
-type Props = {
+type props = {
     technologies: string[];
 };
 
-export function ProjectTechnologies({ technologies }: Props) {
+export function ProjectTechnologies({ technologies }: props) {
     return (
         <section className="pb-16">
             <p className="mb-4 text-sm text-neutral-500">Technologies</p>
@@ -11,7 +11,7 @@ export function ProjectTechnologies({ technologies }: Props) {
                 {technologies.map((tech) => (
                     <span
                         key={tech}
-                        className="rounded-full bg-[#2b160f] px-4 py-2 text-sm text-white"
+                        className="rounded-full bg-brand-brown px-4 py-2 text-sm text-white"
                     >
                         {tech}
                     </span>

components/sections/WorksSection.tsx

@@ -1,12 +1,12 @@
 import { Project } from "@/lib/projects/types";
 import { ProjectCard } from "../ui/ProjectCard";
 
-type Props = {
+type props = {
     projects: Project[];
     locale: string;
 };
 
-export default function WorksSection({ projects, locale }: Props) {
+export default function WorksSection({ projects, locale }: props) {
     return (
         <section id="works" className="w-full flex flex-col items-start justify-start">
             <h2 className="text-[clamp(80px,10vw,128px)] font-serif text-brand-brown mt-6 mb-4">Travaux</h2>

components/ui/ProjectCard.tsx

@@ -2,30 +2,29 @@ import Link from "next/link";
 import { GoArrowRight } from "react-icons/go";
 import { Project } from "@/lib/projects/types";
 
-type Props = {
+type props = {
     project: Project;
     locale: string;
     isTheLast?: boolean;
 };
 
-export const ProjectCard = ({
+export const ProjectCard = ({ project, locale, isTheLast = false }: props) => {
-    project,
+
-    locale,
-    isTheLast = false,
-}: Props) => {
     return (
         <div className="w-full pb-12">
             <div className="w-full h-px bg-brand-brown/20" />
 
             <Link href={`/${locale}/works/${project.slug}`} className="group block">
                 <div className="flex flex-col gap-4 lg:flex-row lg:justify-between lg:items-center lg:gap-14 relative">
+
+                    {/* Date label */}
                     <div className="text-5xl font-serif text-brand-brown/40 mt-6 font-semibold lg:absolute lg:top-1 lg:right-1">
-                        {project.dateLabel ?? project.year}
+                        {project.dateLabel}
                     </div>
 
+                    {/* Left image */}
                     <div className="w-full lg:w-3/5 h-92.5 bg-gray-600 overflow-hidden">
                         {project.preview1 ? (
-                            // eslint-disable-next-line @next/next/no-img-element
                             <img
                                 src={project.preview1}
                                 alt={project.title}
@@ -34,6 +33,7 @@ export const ProjectCard = ({
                         ) : null}
                     </div>
 
+                    {/* Right content */}
                     <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">{project.category}</div>
@@ -47,7 +47,7 @@ export const ProjectCard = ({
                             </div>
                         </div>
 
-                        <div className="text-base font-normal font-sans">{project.description ?? project.subtitle}</div>
+                        <div className="text-base font-normal font-sans">{project.description}</div>
 
                         <div className="border-b text-base flex flex-row justify-center items-center gap-0.5 transition group-hover:gap-1.5">
                             <p>READ</p>

content/projects/EverEastSolutions.mdx

@@ -1,7 +1,6 @@
 ---
 title: "EverEast Solutions"
-subtitle: "Maître d'oeuvre du web"
+priority: 1
-year: 2026
 dateLabel: "2026 - auj."
 category: "Application web"
 client: "EverEast Solutions"

lib/projects/get-projects.ts

@@ -38,5 +38,5 @@ export function getAllProjects(): Project[] {
     return getProjectSlugs()
         .map((slug) => getProjectBySlug(slug))
         .filter((project): project is Project => project !== null)
-        .sort((a, b) => b.year - a.year);
+        .sort((a, b) => b.priority - a.priority);
 }

lib/projects/types.ts

@@ -1,7 +1,6 @@
 export type ProjectFrontmatter = {
     title: string;
-    subtitle: string;
+    priority: number;
-    year: number;
     category: string;
     client: string;
     roles: string[];