From 6da23dc0e5a05b88a426c50a4dab82b00de89c68 Mon Sep 17 00:00:00 2001
From: Thomas Fransolet <tfransolet@thelis.be>
Date: Wed, 4 Mar 2026 14:17:17 +0100
Subject: [PATCH] update

---
 src/app/page.tsx | 171 ++++++++++++++++++++++++++++++-----------------
 1 file changed, 111 insertions(+), 60 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ffa065a..932f14d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -433,11 +433,9 @@ export default function Home() {
             <div className="flex flex-col lg:flex-row gap-8 lg:gap-16 items-start">
               {/* Sidebar (Tabs) */}
               <div className="w-full lg:w-1/3 relative">
-                {/* Mobile scroll hints */}
                 <div className="lg:hidden absolute left-0 top-0 bottom-4 w-12 bg-gradient-to-r from-white to-transparent z-10 pointer-events-none"></div>
                 <div className="lg:hidden absolute right-0 top-0 bottom-4 w-12 bg-gradient-to-l from-white to-transparent z-10 pointer-events-none"></div>
-
-                <div className="flex lg:flex-col gap-3 overflow-x-auto pb-4 lg:pb-0 scrollbar-hide snap-x relative group/tabs">
+                <div className="flex lg:flex-col gap-3 overflow-x-auto pb-4 lg:pb-0 scrollbar-hide snap-x">
                   {modules.map((module, index) => (
                     <button
                       key={module.id}
@@ -455,79 +453,131 @@ export default function Home() {
                     </button>
                   ))}
                 </div>
-
-                {/* Active module description – desktop only */}
-                <div className="hidden lg:block mt-6">
-                  <div className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
-                    <p className="text-slate-600 text-sm leading-relaxed mb-4">
-                      {modules[activeModule].description}
-                    </p>
-                    <p className="text-rose-600 font-bold text-xs flex items-start gap-2">
-                      <span className="material-symbols-outlined text-sm shrink-0 mt-0.5">verified</span>
-                      {modules[activeModule].value}
-                    </p>
-                  </div>
-                </div>
               </div>
 
-              {/* Stacked phone gallery */}
-              <div className="flex-1 flex items-start justify-center">
-                <div className="relative" style={{ width: '280px', height: '560px' }}>
+              {/* Main Display */}
+              <div className="flex-1 w-full">
+
+                {/* Mobile: single centered card */}
+                <div className="lg:hidden bg-slate-50 rounded-[3rem] p-8 border border-slate-100 overflow-hidden">
+                  <div className="text-center mb-6">
+                    <div className="inline-flex p-3 rounded-2xl bg-white shadow-sm text-rose-600 mb-4 font-bold gap-2 items-center">
+                      <span className="material-symbols-outlined">{modules[activeModule].icon}</span>
+                      <span className="text-xs uppercase tracking-wider">{modules[activeModule].title}</span>
+                    </div>
+                    <h3 className="text-2xl font-black text-slate-900 mb-4 leading-tight">{modules[activeModule].title}</h3>
+                    <p className="text-slate-600 leading-relaxed mb-6">{modules[activeModule].description}</p>
+                    <div className="p-4 bg-rose-600/5 border border-rose-100 rounded-2xl">
+                      <p className="text-rose-600 font-bold text-sm flex items-center justify-center gap-2">
+                        <span className="material-symbols-outlined text-base">verified</span>
+                        {modules[activeModule].value}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex justify-center">
+                    <div className="relative w-[200px] h-[420px] bg-slate-900 rounded-[3rem] border-[8px] border-slate-800 shadow-2xl overflow-hidden">
+                      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-5 bg-slate-800 rounded-b-2xl z-20"></div>
+                      <div className="absolute inset-[2px] bg-white rounded-[2.25rem] overflow-hidden">
+                        <div className="h-full flex flex-col pt-7">
+                          <header className="h-12 border-b border-slate-100 flex items-center px-3 bg-white/80 sticky top-0 z-10">
+                            <div className="w-7 h-7 rounded-lg bg-rose-100 flex items-center justify-center text-rose-600">
+                              <span className="material-symbols-outlined text-base">{modules[activeModule].icon}</span>
+                            </div>
+                            <span className="ml-2 font-bold text-xs text-slate-900 truncate">{modules[activeModule].title}</span>
+                          </header>
+                          <div className="p-3 flex-1 space-y-3">
+                            <div className="h-32 rounded-xl bg-slate-100 flex items-center justify-center relative overflow-hidden">
+                              <span className="material-symbols-outlined text-4xl text-slate-300">{modules[activeModule].icon}</span>
+                              <div className="absolute inset-0 bg-gradient-to-tr from-rose-500/10 to-transparent"></div>
+                            </div>
+                            <div className="h-2 w-full bg-slate-100 rounded-full"></div>
+                            <div className="h-2 w-2/3 bg-slate-100 rounded-full"></div>
+                            <div className="h-14 w-full bg-slate-50 border border-slate-100 rounded-xl p-2 flex gap-2">
+                              <div className="w-8 h-8 rounded-lg bg-rose-200 shrink-0"></div>
+                              <div className="space-y-1 flex-1">
+                                <div className="h-1.5 w-full bg-slate-200 rounded-full"></div>
+                                <div className="h-1.5 w-1/2 bg-slate-200 rounded-full"></div>
+                              </div>
+                            </div>
+                            <div className="grid grid-cols-2 gap-2">
+                              <div className="h-8 bg-slate-100 rounded-lg"></div>
+                              <div className="h-8 bg-rose-600 rounded-lg"></div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Desktop: all 8 cards stacked + spread */}
+                <div className="hidden lg:block relative" style={{ height: '500px' }}>
                   {modules.map((module, index) => {
                     const deckPos = (index - activeModule + modules.length) % modules.length;
                     const isActive = deckPos === 0;
-                    const showCard = deckPos <= 3;
 
                     return (
                       <div
                         key={module.id}
+                        className="absolute inset-0"
                         style={{
-                          position: 'absolute',
-                          top: 0,
-                          left: '50%',
-                          transform: showCard
-                            ? `translateX(-50%) translateY(${deckPos * 18}px) scale(${1 - deckPos * 0.055})`
-                            : 'translateX(-50%) translateY(80px) scale(0.77)',
-                          zIndex: showCard ? 10 - deckPos : 0,
-                          opacity: showCard ? (isActive ? 1 : 0.85 - deckPos * 0.2) : 0,
+                          transformOrigin: 'top left',
+                          transform: `translateX(${deckPos * 32}px) scale(${1 - deckPos * 0.055})`,
+                          zIndex: modules.length - deckPos,
+                          opacity: isActive ? 1 : Math.max(0.08, 0.72 - deckPos * 0.09),
                           transition: 'transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1)',
+                          pointerEvents: isActive ? 'auto' : 'none',
                         }}
                       >
-                        <div className={`relative w-[240px] h-[500px] rounded-[3rem] border-[8px] overflow-hidden transition-colors duration-300 ${
-                          isActive
-                            ? 'bg-slate-900 border-slate-800 shadow-2xl shadow-rose-500/20'
-                            : 'bg-slate-800 border-slate-700 shadow-xl shadow-slate-900/20'
-                        }`}>
-                          {/* Notch */}
-                          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-28 h-6 bg-slate-800 rounded-b-2xl z-20"></div>
+                        <div className="h-full bg-slate-50 rounded-[3rem] p-10 border border-slate-100 overflow-hidden flex flex-row gap-10 items-center">
+                          {/* Description – visible only for active */}
+                          <div className="flex-1 relative z-10 text-left" style={{ opacity: isActive ? 1 : 0, transition: 'opacity 0.3s' }}>
+                            <div className="inline-flex p-3 rounded-2xl bg-white shadow-sm text-rose-600 mb-5 font-bold gap-2 items-center">
+                              <span className="material-symbols-outlined">{module.icon}</span>
+                              <span className="text-xs uppercase tracking-wider">{module.title}</span>
+                            </div>
+                            <h3 className="text-3xl font-black text-slate-900 mb-5 leading-tight">{module.title}</h3>
+                            <p className="text-slate-600 text-base leading-relaxed mb-6">{module.description}</p>
+                            <div className="p-5 bg-rose-600/5 border border-rose-100 rounded-2xl">
+                              <p className="text-rose-600 font-bold text-sm flex items-center gap-2">
+                                <span className="material-symbols-outlined text-base">verified</span>
+                                Valeur ajoutée : {module.value}
+                              </p>
+                            </div>
+                          </div>
 
-                          {/* Screen */}
-                          <div className="absolute inset-[2px] bg-white rounded-[2.25rem] overflow-hidden">
-                            <div className="h-full flex flex-col pt-8">
-                              <header className="h-14 border-b border-slate-100 flex items-center px-4 bg-white/80 backdrop-blur-sm sticky top-0 z-10">
-                                <div className="w-8 h-8 rounded-lg bg-rose-100 flex items-center justify-center text-rose-600">
-                                  <span className="material-symbols-outlined text-lg">{module.icon}</span>
-                                </div>
-                                <span className="ml-3 font-bold text-xs text-slate-900 truncate">{module.title}</span>
-                              </header>
-                              <div className="p-4 flex-1 space-y-4">
-                                <div className="h-40 rounded-2xl bg-slate-100 flex items-center justify-center relative overflow-hidden">
-                                  <span className="material-symbols-outlined text-5xl text-slate-300">{module.icon}</span>
-                                  <div className="absolute inset-0 bg-gradient-to-tr from-rose-500/10 to-transparent"></div>
-                                </div>
-                                <div className="h-3 w-full bg-slate-100 rounded-full"></div>
-                                <div className="h-3 w-2/3 bg-slate-100 rounded-full"></div>
-                                <div className="h-20 w-full bg-slate-50 border border-slate-100 rounded-xl p-3 flex gap-3">
-                                  <div className="w-10 h-10 rounded-lg bg-rose-200 shrink-0"></div>
-                                  <div className="space-y-2 flex-1">
-                                    <div className="h-2 w-full bg-slate-200 rounded-full"></div>
-                                    <div className="h-2 w-1/2 bg-slate-200 rounded-full"></div>
+                          {/* Phone mockup */}
+                          <div className="w-[190px] flex-shrink-0 flex items-center justify-center self-stretch">
+                            <div className="relative w-[190px] h-[400px] bg-slate-900 rounded-[3rem] border-[8px] border-slate-800 shadow-2xl overflow-hidden">
+                              <div className="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-5 bg-slate-800 rounded-b-2xl z-20"></div>
+                              <div className="absolute inset-[2px] bg-white rounded-[2.25rem] overflow-hidden">
+                                <div className="h-full flex flex-col pt-7">
+                                  <header className="h-12 border-b border-slate-100 flex items-center px-3 bg-white/80 backdrop-blur-sm sticky top-0 z-10">
+                                    <div className="w-7 h-7 rounded-lg bg-rose-100 flex items-center justify-center text-rose-600">
+                                      <span className="material-symbols-outlined text-base">{module.icon}</span>
+                                    </div>
+                                    <span className="ml-2 font-bold text-xs text-slate-900 truncate">{module.title}</span>
+                                  </header>
+                                  <div className="p-3 flex-1 space-y-3">
+                                    <div className="h-32 rounded-xl bg-slate-100 flex items-center justify-center relative overflow-hidden">
+                                      <span className="material-symbols-outlined text-4xl text-slate-300">{module.icon}</span>
+                                      <div className="absolute inset-0 bg-gradient-to-tr from-rose-500/10 to-transparent"></div>
+                                    </div>
+                                    <div className="h-2 w-full bg-slate-100 rounded-full"></div>
+                                    <div className="h-2 w-2/3 bg-slate-100 rounded-full"></div>
+                                    <div className="h-14 w-full bg-slate-50 border border-slate-100 rounded-xl p-2 flex gap-2">
+                                      <div className="w-8 h-8 rounded-lg bg-rose-200 shrink-0"></div>
+                                      <div className="space-y-1 flex-1">
+                                        <div className="h-1.5 w-full bg-slate-200 rounded-full"></div>
+                                        <div className="h-1.5 w-1/2 bg-slate-200 rounded-full"></div>
+                                      </div>
+                                    </div>
+                                    <div className="grid grid-cols-2 gap-2">
+                                      <div className="h-8 bg-slate-100 rounded-lg"></div>
+                                      <div className="h-8 bg-rose-600 rounded-lg"></div>
+                                    </div>
                                   </div>
                                 </div>
-                                <div className="grid grid-cols-2 gap-3">
-                                  <div className="h-10 bg-slate-100 rounded-xl"></div>
-                                  <div className="h-10 bg-rose-600 rounded-xl"></div>
-                                </div>
                               </div>
                             </div>
                           </div>
@@ -536,6 +586,7 @@ export default function Home() {
                     );
                   })}
                 </div>
+
               </div>
             </div>
           </div>