redesign(project-page): editorial redesign of /works/[slug]

- ProjectHero: full-viewport dark hero with blurred cover image overlay,
  animated entrance (back link → date → title → description), scroll indicator
- ProjectMeta: reveal-animated metadata strip with top/bottom dividers,
  refined label/value typography using brand color tokens
- ProjectTechnologies: outline pill tags with per-tag staggered reveal,
  hover border/color transition
- ProjectsColumns: cleaner 2-col prose grid with wider gap
- ProjectPreviewGrid: rounded-xl with subtle border, responsive 1→2 col
- ProjectVisitButton: pill-shaped dark CTA replacing bordered rectangle
- OtherProjects: image-first card layout with scroll reveal, hover scale +
  brightness on covers, sliding arrow, refined "Voir aussi" header
- page.tsx: passes cover prop to ProjectHero, 900px max-width content
  column, semantic MDX prose styles via article selector chains

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/mdx/ProjectPreviewGrid.tsx

@@ -1,31 +1,33 @@
 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 2xl:grid-cols-2 2xl:space-x-6">
-			{items.map((item) => (
-				<div
-					key={item.title}
-					className="rounded-[10px] overflow-hidden bg-brand-brown 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>
-	);
+    return (
+        <div className={`grid gap-4 ${items.length > 1 ? 'lg:grid-cols-2' : ''}`}>
+            {items.map((item) => (
+                <div
+                    key={item.title}
+                    className="rounded-xl overflow-hidden bg-brand-brown/5 border border-brand-brown/8"
+                >
+                    {item.image ? (
+                        <img
+                            src={item.image}
+                            alt={item.title}
+                            className="w-full h-full object-cover"
+                        />
+                    ) : (
+                        <div className="min-h-[220px] flex items-center justify-center text-brand-brown/30 font-sans text-sm">
+                            {item.title}
+                        </div>
+                    )}
+                </div>
+            ))}
+        </div>
+    );
 }

components/mdx/ProjectVisitButton.tsx

@@ -1,24 +1,29 @@
-import { GoLinkExternal } from "react-icons/go";
-
 type VisitButtonProps = {
-	href: string;
+    href: string;
 };
 
 export function ProjectVisitButton({ href }: VisitButtonProps) {
+    if (!href) return null;
 
-	if (href === "" || href === null) { return; }
-	
-	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>
-	);
-}
+    return (
+        <div className="flex justify-center py-6">
+            <a
+                href={href}
+                target="_blank"
+                rel="noreferrer"
+                className="group inline-flex items-center gap-3 bg-brand-brown text-brand-beige font-sans text-sm uppercase tracking-[0.18em] px-8 py-4 rounded-full hover:bg-brand-brown/85 transition-colors duration-200 cursor-pointer"
+            >
+                Visiter le projet
+                <svg
+                    className="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-200"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                </svg>
+            </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 text-justify text-base font-sans lg:grid-cols-2 lg:space-x-6">
-			{children}
-		</div>
-	);
-}
+    return (
+        <div className="grid gap-8 lg:grid-cols-2 lg:gap-14">
+            {children}
+        </div>
+    );
+}