From 72e12a6e3d07d420398ee32cccfcf9ef52b2978a Mon Sep 17 00:00:00 2001
From: Tom Boullay <tom@famille-boullay.fr>
Date: Sun, 17 May 2026 16:50:02 +0200
Subject: [PATCH] style: move glb guidance into upload notice

---
 app/page.tsx              | 10 ++------
 components/UploadZone.tsx | 50 +++++++++++++++++++++++++--------------
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index b5a119d..101b653 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -8,14 +8,8 @@ export default function Home() {
           Upload GLTF
         </h1>
         <p className="text-gray-400 text-base leading-relaxed">
-          Envoyer genere un GLB quand possible : plus performant, ideal pour la deco
-          et les modeles simples.
-          <br />
-          Envoyer en GLTF garde des fichiers separes, moins optimises mais plus
-          pratiques pour inspecter et bidouiller les noeuds.
-          <br />
-          A privilegier pour les packs de relance, ebikes, pylones et modeles
-          que les devs doivent ajuster.
+          Deposez vos fichiers 3D, ils seront archives sur le Drive
+          avec versioning, puis envoyes aux devs via Git
         </p>
       </div>
 
diff --git a/components/UploadZone.tsx b/components/UploadZone.tsx
index ec21fb3..5692a3c 100644
--- a/components/UploadZone.tsx
+++ b/components/UploadZone.tsx
@@ -12,6 +12,7 @@ import ActionButtons from './upload/ActionButtons'
 import OverwriteConfirmModal from './upload/OverwriteConfirmModal'
 import NoChangesModal from './upload/NoChangesModal'
 import DriveErrorModal from './upload/DriveErrorModal'
+import { WarningIcon } from './ui/icons'
 
 export default function UploadZone() {
   const {
@@ -75,25 +76,38 @@ export default function UploadZone() {
   const hasPendingOrErrors = entries.some((f) => f.status === 'pending' || f.status === 'error')
 
   return (
-    <div className="w-full max-w-2xl space-y-4">
+    <div className="w-full max-w-3xl space-y-4">
       {entries.length === 0 && (
-        <p className="rounded-2xl border border-white/20 bg-black-800 px-4 py-3 text-xs text-gray-400 leading-relaxed text-center mb-3">
-          Deposez un dossier complet contenant votre modele 3D nomme
-          {' '}<span className="font-mono text-gray-200">model.gltf</span>
-          {' '}ainsi que toutes les textures et fichiers binaires necessaires.
-          {' '}Les fichiers associes peuvent etre en
-          {' '}<span className="font-mono text-gray-200">.png</span>,
-          {' '}<span className="font-mono text-gray-200">.jpg</span>
-          {' '}<span className="font-mono text-gray-200">.webp</span>
-          {' '}ou <span className="font-mono text-gray-200">.bin</span>.
-          {' '}Utilisez un nom simple si la texture s&apos;applique au modele entier, et un nom detaille si elle correspond a une partie precise du modele,
-          {' '}par exemple <span className="font-mono text-gray-200">color_porte.jpg</span>,
-          {' '}<span className="font-mono text-gray-200">roughness_tuyaux.png</span>,
-          {' '}<span className="font-mono text-gray-200">normal_dashboard.webp</span>
-          {' '}ou <span className="font-mono text-gray-200">opacity_fenetre.png</span>.
-          {' '}Les exports classiques comme <span className="font-mono text-gray-200">porte_baseColor.png</span>
-          {' '}ou <span className="font-mono text-gray-200">porte_normal_opengl.png</span> sont normalises automatiquement pour Git.
-        </p>
+        <>
+          <p className="rounded-2xl border border-white/20 bg-black-800 px-4 py-3 text-xs text-gray-400 leading-relaxed text-center mb-3">
+            Deposez un dossier complet contenant votre modele 3D nomme
+            {' '}<span className="font-mono text-gray-200">model.gltf</span>
+            {' '}ainsi que toutes les textures et fichiers binaires necessaires.
+            {' '}Les fichiers associes peuvent etre en
+            {' '}<span className="font-mono text-gray-200">.png</span>,
+            {' '}<span className="font-mono text-gray-200">.jpg</span>
+            {' '}<span className="font-mono text-gray-200">.webp</span>
+            {' '}ou <span className="font-mono text-gray-200">.bin</span>.
+            {' '}Utilisez un nom simple si la texture s&apos;applique au modele entier, et un nom detaille si elle correspond a une partie precise du modele,
+            {' '}par exemple <span className="font-mono text-gray-200">color_porte.jpg</span>,
+            {' '}<span className="font-mono text-gray-200">roughness_tuyaux.png</span>,
+            {' '}<span className="font-mono text-gray-200">normal_dashboard.webp</span>
+            {' '}ou <span className="font-mono text-gray-200">opacity_fenetre.png</span>.
+            {' '}Les exports classiques comme <span className="font-mono text-gray-200">porte_baseColor.png</span>
+            {' '}ou <span className="font-mono text-gray-200">porte_normal_opengl.png</span> sont normalises automatiquement pour Git.
+          </p>
+          <div className="mb-3 flex items-start gap-2 rounded-2xl border border-yellow-500/25 bg-yellow-500/10 px-4 py-3 text-xs leading-relaxed text-yellow-200">
+            <WarningIcon className="mt-0.5 h-4 w-4 shrink-0 text-yellow-300" />
+            <p>
+              <span className="font-semibold text-yellow-100">Attention :</span>
+              {' '}<span className="font-semibold text-yellow-100">Envoyer</span>
+              {' '}genere un GLB quand possible, plus performant pour la deco et les modeles simples.
+              {' '}<span className="font-semibold text-yellow-100">Envoyer en GLTF</span>
+              {' '}garde des fichiers separes, moins optimises mais plus pratiques pour inspecter et ajuster les noeuds.
+              {' '}A privilegier pour les packs de relance, ebikes, pylones et modeles que les devs doivent modifier.
+            </p>
+          </div>
+        </>
       )}
 
       {entries.length > 0 && (