From 1d1792b43a44953bd6bbfe25ca1079c8bad847ff Mon Sep 17 00:00:00 2001
From: Mathew <mathew.simon2004@gmail.com>
Date: Wed, 1 Jul 2026 22:29:22 +0200
Subject: [PATCH] Ajoute une galerie screenshots WIP sur la home
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Section "FROM THE WORKSHOP" en mosaïque bento
- Data-driven via le tableau screenshots (placeholders si src null)
- Badge WIP, hover zoom + label pour les vrais screens

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/page.tsx | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)

diff --git a/app/page.tsx b/app/page.tsx
index 160a74e..1c9b30a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,6 +4,18 @@ import Image from "next/image";
 import Link from "next/link";
 import { motion } from "framer-motion";
 
+// Screenshots WIP du projet.
+// Pour en ajouter : dépose l'image dans /public/image/Emberwild/
+// puis renseigne `src` (ex: "/image/Emberwild/screen-01.jpg").
+// Laisse `src: null` pour afficher un emplacement placeholder.
+const screenshots: { src: string | null; label: string; span: string }[] = [
+  { src: null, label: "Early build", span: "col-span-2 row-span-2" },
+  { src: null, label: "Environment", span: "" },
+  { src: null, label: "Crafting", span: "" },
+  { src: null, label: "Exploration", span: "col-span-2" },
+  { src: null, label: "Concept", span: "" },
+];
+
 export default function Home() {
   return (
     <>
@@ -215,6 +227,87 @@ export default function Home() {
         </div>
       </section>
 
+      {/* GALLERY */}
+      <section className="py-24 px-6 lg:px-10 border-t border-border">
+        <div className="max-w-6xl mx-auto">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: "-100px" }}
+            transition={{ duration: 0.8 }}
+          >
+            <p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
+              — GLIMPSES
+            </p>
+            <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-12">
+              <h2 className="font-display text-4xl sm:text-5xl lg:text-6xl tracking-wider">
+                FROM THE WORKSHOP
+              </h2>
+              <p className="text-sm text-foreground-muted max-w-sm">
+                Raw captures straight from development. Everything here is work
+                in progress and will keep evolving.
+              </p>
+            </div>
+          </motion.div>
+
+          <div className="grid grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-[160px] sm:auto-rows-[220px]">
+            {screenshots.map((shot, i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, scale: 0.96 }}
+                whileInView={{ opacity: 1, scale: 1 }}
+                viewport={{ once: true, margin: "-60px" }}
+                transition={{ duration: 0.6, delay: i * 0.08 }}
+                className={`group relative overflow-hidden rounded-2xl border border-border bg-surface ${shot.span}`}
+              >
+                {shot.src ? (
+                  <Image
+                    src={shot.src}
+                    alt={shot.label}
+                    fill
+                    sizes="(max-width: 1024px) 50vw, 33vw"
+                    className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
+                  />
+                ) : (
+                  <div className="flex h-full w-full flex-col items-center justify-center gap-3">
+                    <Image
+                      src="/image/Studio/Logo Flat.png"
+                      alt=""
+                      width={64}
+                      height={44}
+                      className="opacity-[0.12]"
+                    />
+                    <span className="font-display text-[11px] tracking-[0.3em] text-foreground-muted uppercase">
+                      {shot.label}
+                    </span>
+                  </div>
+                )}
+
+                {/* Subtle gradient + label on hover for real screenshots */}
+                {shot.src && (
+                  <>
+                    <div
+                      aria-hidden
+                      className="absolute inset-0 bg-gradient-to-t from-background/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+                    />
+                    <span className="absolute bottom-3 left-4 font-display text-sm tracking-widest text-foreground opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500">
+                      {shot.label}
+                    </span>
+                  </>
+                )}
+
+                {/* WIP badge */}
+                <div className="absolute top-3 left-3 rounded-full border border-border/70 bg-background/70 px-3 py-1 backdrop-blur-sm">
+                  <span className="font-display text-[10px] tracking-[0.2em] text-accent">
+                    WIP
+                  </span>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
       {/* DEVBLOG TEASER */}
       <section className="py-24 px-6 lg:px-10 border-t border-border">
         <div className="max-w-4xl mx-auto text-center">