fixed project page design

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

@@ -40,7 +40,7 @@ export default async function ProjectPage({ params }: props) {
 
     return (
         <main className="bg-[#f5f3ef]">
-            <div className="mx-auto max-w-full ">
+            <div className="mx-auto max-w-full flex flex-col items-center">
                 <ProjectHero
                     locale={locale}
                     title={project.title}
@@ -48,6 +48,7 @@ export default async function ProjectPage({ params }: props) {
                     dateLabel={project.dateLabel}
                 />
 
+                <div className="lg:max-w-[70vw]">
                     <ProjectMeta
                         dateLabel={project.dateLabel}
                         category={project.category}
@@ -59,16 +60,21 @@ export default async function ProjectPage({ params }: props) {
 
                     <section className="pb-16">
                         <article className="
-                        prose prose-neutral max-w-none
-                        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
+                            flex flex-col gap-20
+                            [&>div>h2]:text-[clamp(80px,10vw,128px)] [&>div>h2]:font-serif [&>div>h2]:text-brand-brown
                         ">
-                        <MDXRemote source={project.content} components={mdxComponents} />
+                            <MDXRemote
+                                source={project.content}
+                                components={mdxComponents}
+                                options={{ blockJS: false, blockDangerousJS: true }}
+                            />
                         </article>
                     </section>
 
                     <OtherProjects locale={locale} projects={otherProjects} />
                 </div>
+
+            </div>
         </main>
     );
 }

components/mdx/ProjectPreviewGrid.tsx

@@ -9,11 +9,11 @@ type props = {
 
 export function ProjectPreviewGrid({ items = [] }: props) {
 	return (
-    <div className="grid gap-6 md:grid-cols-2">
+		<div className="grid gap-6 2xl:grid-cols-2 2xl:space-x-6">
 			{items.map((item) => (
 				<div
 					key={item.title}
-          className="rounded-2xl overflow-hidden bg-[#2b160f] text-white min-h-[260px] flex items-center justify-center"
+					className="rounded-[10px] overflow-hidden bg-[#2b160f] text-white min-h-65 flex items-center justify-center"
 				>
 					{item.image ? (
 						<img

components/mdx/ProjectVisitButton.tsx

@@ -1,3 +1,5 @@
+import { GoLinkExternal } from "react-icons/go";
+
 type VisitButtonProps = {
 	href: string;
 };
@@ -9,9 +11,10 @@ export function ProjectVisitButton({ href }: VisitButtonProps) {
 				href={href}
 				target="_blank"
 				rel="noreferrer"
-        className="rounded-full bg-[#2b160f] px-4 py-2 text-white text-sm"
+				className="rounded-[10px] border border-brand-brown px-6 py-4 text-brand-brown text-base flex flex-row justify-center items-center gap-2"
 			>
 				Visiter le site
+				<GoLinkExternal className="text-xl" />
 			</a>
 		</div>
 	);

components/mdx/ProjectsColumns.tsx

@@ -4,7 +4,7 @@ type props = {
 
 export function ProjectsColumns({ children }: props) {
 	return (
-    <div className="grid gap-6 md:grid-cols-2">
+		<div className="grid gap-6 text-justify text-base font-sans lg:grid-cols-2 lg:space-x-6">
 			{children}
 		</div>
 	);

components/sections/ProjectHero.tsx

@@ -11,7 +11,7 @@ type props = {
 
 export function ProjectHero({ title, description, dateLabel, locale }: props) {
     return (
-        <div className="md:pt-22">
+        <div className="md:pt-22 w-full">
             <section className="rounded-[10px] bg-brand-brown flex flex-col items-center justify-center  text-brand-beige px-6 py-4">
                 <Link
                     href={`/${locale}#works`}