UNOV/myinfomate-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test module

Browse Source
This commit is contained in:
Thomas Fransolet 2026-03-04 13:46:12 +01:00
parent 9deb32fe84
commit f28f911f74
1 changed files with 70 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/app/page.tsx
View File

@ -442,6 +442,7 @@ export default function Home() {
<button
key={module.id}
onClick={() => setActiveModule(index)}
onMouseEnter={() => setActiveModule(index)}
className={`flex items-center gap-3 lg:gap-4 px-5 py-4 lg:px-6 lg:py-5 rounded-2xl border-2 transition-all text-left whitespace-nowrap lg:whitespace-normal snap-center flex-shrink-0 lg:flex-shrink-1 w-auto lg:w-full ${activeModule === index
? 'bg-rose-50 border-rose-200 text-rose-600 shadow-sm'
: 'bg-white border-slate-100 text-slate-500 hover:bg-slate-50'
@ -454,50 +455,64 @@ export default function Home() {
</button>
))}
</div>
</div>
{/* Main Display (Active Module) */}
<div className="flex-1 w-full animate-fade-in">
<div className="bg-slate-50 rounded-[3rem] p-8 lg:p-12 border border-slate-100 relative overflow-hidden flex flex-col lg:flex-row gap-12 items-center min-h-[500px]">
{/* Content */}
<div className="flex-1 relative z-10 text-center lg:text-left">
<div className="inline-flex p-3 rounded-2xl bg-white shadow-sm text-rose-600 mb-6 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 lg:text-4xl font-black text-slate-900 mb-6 leading-tight">
{modules[activeModule].title}
</h3>
<p className="text-slate-600 text-lg leading-relaxed mb-8">
{/* 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>
<div className="p-6 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 : {modules[activeModule].value}
<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>
{/* Mockup Showcase */}
<div className="w-full lg:w-[320px] flex-shrink-0 relative">
<div className="relative mx-auto w-[240px] h-[500px] bg-slate-900 rounded-[3rem] border-[8px] border-slate-800 shadow-2xl overflow-hidden">
{/* Stacked phone gallery */}
<div className="flex-1 flex items-start justify-center">
<div className="relative" style={{ width: '280px', height: '560px' }}>
{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}
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,
transition: 'transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1)',
}}
>
<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>
{/* Content Area (Simulated Screen) */}
{/* Screen */}
<div className="absolute inset-[2px] bg-white rounded-[2.25rem] overflow-hidden">
{/* Simulation of App UI */}
<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">{modules[activeModule].icon}</span>
<span className="material-symbols-outlined text-lg">{module.icon}</span>
</div>
<span className="ml-3 font-bold text-xs text-slate-900 truncate">{modules[activeModule].title}</span>
<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">{modules[activeModule].icon}</span>
<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>
@ -518,6 +533,8 @@ export default function Home() {
</div>
</div>
</div>
);
})}
</div>
</div>
</div>