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,27 +48,33 @@ export default async function ProjectPage({ params }: props) {
                     dateLabel={project.dateLabel}
                 />
 
-                <ProjectMeta
-                    dateLabel={project.dateLabel}
-                    category={project.category}
-                    roles={project.roles}
-                    client={project.client}
-                />
+                <div className="lg:max-w-[70vw]">
+                    <ProjectMeta
+                        dateLabel={project.dateLabel}
+                        category={project.category}
+                        roles={project.roles}
+                        client={project.client}
+                    />
 
-                <ProjectTechnologies technologies={project.technologies} />
+                    <ProjectTechnologies technologies={project.technologies} />
 
-                <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
-                    ">
-                        <MDXRemote source={project.content} components={mdxComponents} />
-                    </article>
-                </section>
+                    <section className="pb-16">
+                        <article className="
+                            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}
+                                options={{ blockJS: false, blockDangerousJS: true }}
+                            />
+                        </article>
+                    </section>
+
+                    <OtherProjects locale={locale} projects={otherProjects} />
+                </div>
 
-                <OtherProjects locale={locale} projects={otherProjects} />
             </div>
         </main>
     );
-}
+}

components/mdx/ProjectPreviewGrid.tsx

@@ -1,31 +1,31 @@
 type PreviewItem = {
-  title: string;
-  image: string;
+	title: string;
+	image: string;
 };
 
 type props = {
-  items?: PreviewItem[];
+	items?: PreviewItem[];
 };
 
 export function ProjectPreviewGrid({ items = [] }: props) {
-  return (
-    <div className="grid gap-6 md:grid-cols-2">
-      {items.map((item) => (
-        <div
-          key={item.title}
-          className="rounded-2xl overflow-hidden bg-[#2b160f] text-white min-h-[260px] flex items-center justify-center"
-        >
-          {item.image ? (
-            <img
-              src={item.image}
-              alt={item.title}
-              className="h-full w-full object-cover"
-            />
-          ) : (
-            <span className="text-2xl">{item.title}</span>
-          )}
-        </div>
-      ))}
-    </div>
-  );
+	return (
+		<div className="grid gap-6 2xl:grid-cols-2 2xl:space-x-6">
+			{items.map((item) => (
+				<div
+					key={item.title}
+					className="rounded-[10px] overflow-hidden bg-[#2b160f] text-white min-h-65 flex items-center justify-center"
+				>
+					{item.image ? (
+						<img
+							src={item.image}
+							alt={item.title}
+							className="h-full w-full object-cover"
+						/>
+					) : (
+						<span className="text-2xl">{item.title}</span>
+					)}
+				</div>
+			))}
+		</div>
+	);
 }

components/mdx/ProjectVisitButton.tsx

@@ -1,18 +1,21 @@
+import { GoLinkExternal } from "react-icons/go";
+
 type VisitButtonProps = {
-  href: string;
+	href: string;
 };
 
 export function ProjectVisitButton({ href }: VisitButtonProps) {
-  return (
-    <div className="flex justify-center">
-      <a
-        href={href}
-        target="_blank"
-        rel="noreferrer"
-        className="rounded-full bg-[#2b160f] px-4 py-2 text-white text-sm"
-      >
-        Visiter le site
-      </a>
-    </div>
-  );
+	return (
+		<div className="flex justify-center">
+			<a
+				href={href}
+				target="_blank"
+				rel="noreferrer"
+				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

@@ -1,11 +1,11 @@
 type props = {
-  children: React.ReactNode;
+	children: React.ReactNode;
 };
 
 export function ProjectsColumns({ children }: props) {
-  return (
-    <div className="grid gap-6 md:grid-cols-2">
-      {children}
-    </div>
-  );
+	return (
+		<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`}