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/sections/OtherProjects.tsx

@@ -1,4 +1,7 @@
-import Link from "next/link";
+'use client';
+
+import { useRef, useEffect } from 'react';
+import Link from 'next/link';
 
 type props = {
     locale: string;
@@ -11,27 +14,85 @@ type props = {
 };
 
 export function OtherProjects({ locale, projects }: props) {
+    const ref = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) return;
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    el.querySelectorAll('.reveal').forEach((node, i) => {
+                        setTimeout(() => node.classList.add('visible'), i * 120);
+                    });
+                    observer.unobserve(el);
+                }
+            },
+            { threshold: 0.1 }
+        );
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+
     if (!projects.length) return null;
 
     return (
-        <section className="pb-20 pt-8">
-            <h2 className="mb-10 text-center text-[clamp(80px,10vw,128px)] font-serif text-brand-brown">
-                Autres projets
+        <section ref={ref} className="pt-6 pb-20">
+            {/* Divider */}
+            <div className="w-full h-px bg-brand-brown/10 mb-14" />
+
+            {/* Label */}
+            <div className="flex items-center gap-3 mb-6">
+                <span className="w-6 h-px bg-brand-brown/40" />
+                <span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
+                    Autres projets
+                </span>
+            </div>
+
+            <h2 className="reveal font-serif text-[clamp(48px,6vw,80px)] leading-none text-brand-brown mb-12">
+                Voir aussi
             </h2>
 
             <div className="grid gap-6 md:grid-cols-2">
-                {projects.map((project) => (
+                {projects.map((project, i) => (
                     <Link
                         key={project.slug}
                         href={`/${locale}/works/${project.slug}`}
-                        className="group block"
+                        className="reveal group block cursor-pointer"
+                        style={{ transitionDelay: `${i * 100}ms` }}
                     >
-                        <div className="mb-3 text-3xl font-sans">{project.title}</div>
-                        <p className="mb-3 text-sm text-neutral-500">{project.description}</p>
-                        <img className="flex min-h-[220px] items-center justify-center rounded-[22px] bg-white text-4xl shadow-sm transition group-hover:-translate-y-1" src={project.cover} alt="cover image" />
+                        {/* Image */}
+                        <div className="w-full h-[240px] rounded-xl overflow-hidden bg-brand-brown/5 mb-5">
+                            <img
+                                src={project.cover}
+                                alt={project.title}
+                                className="w-full h-full object-cover transition-all duration-700 group-hover:scale-[1.04] group-hover:brightness-105"
+                            />
+                        </div>
+
+                        {/* Text */}
+                        <div className="flex items-start justify-between gap-4">
+                            <div>
+                                <h3 className="font-serif text-2xl text-brand-brown uppercase mb-1.5">
+                                    {project.title}
+                                </h3>
+                                <p className="font-sans text-sm text-brand-brown/55 leading-relaxed">
+                                    {project.description}
+                                </p>
+                            </div>
+                            <svg
+                                className="w-5 h-5 text-brand-brown/30 flex-shrink-0 mt-1 group-hover:translate-x-1 group-hover:text-brand-brown/60 transition-all duration-200"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                                aria-hidden="true"
+                            >
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                            </svg>
+                        </div>
                     </Link>
                 ))}
             </div>
         </section>
     );
-}
+}