Animation modules top
This commit is contained in:
Thomas Fransolet
parent
6da23dc0e5
commit
27d37d01c8
126
src/app/page.tsx
126
src/app/page.tsx
@ -430,7 +430,7 @@ export default function Home() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-8 lg:gap-16 items-start">
|
||||
<div className="flex flex-col lg:flex-row gap-8 lg:gap-16 items-stretch">
|
||||
{/* Sidebar (Tabs) */}
|
||||
<div className="w-full lg:w-1/3 relative">
|
||||
<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>
|
||||
@ -456,7 +456,7 @@ export default function Home() {
|
||||
</div>
|
||||
|
||||
{/* Main Display */}
|
||||
<div className="flex-1 w-full">
|
||||
<div className="flex-1 w-full lg:flex lg:flex-col">
|
||||
|
||||
{/* Mobile: single centered card */}
|
||||
<div className="lg:hidden bg-slate-50 rounded-[3rem] p-8 border border-slate-100 overflow-hidden">
|
||||
@ -510,81 +510,81 @@ export default function Home() {
|
||||
</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;
|
||||
{/* Desktop: original layout + enobase-style 3D phone stack */}
|
||||
<div className="hidden lg:flex flex-1 bg-slate-50 rounded-[3rem] p-10 border border-slate-100 gap-10 items-center">
|
||||
{/* Description */}
|
||||
<div className="flex-1 relative z-10 text-left">
|
||||
<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">{modules[activeModule].icon}</span>
|
||||
<span className="text-xs uppercase tracking-wider">{modules[activeModule].title}</span>
|
||||
</div>
|
||||
<h3 className="text-3xl font-black text-slate-900 mb-5 leading-tight">{modules[activeModule].title}</h3>
|
||||
<p className="text-slate-600 text-base leading-relaxed mb-6">{modules[activeModule].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 : {modules[activeModule].value}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div
|
||||
key={module.id}
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
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="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>
|
||||
|
||||
{/* 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>
|
||||
{/* Enobase-style 3D horizontal perspective phone stack */}
|
||||
<div className="flex-shrink-0 relative" style={{ width: '280px', height: '480px' }}>
|
||||
<div style={{ position: 'absolute', inset: 0, transform: 'perspective(900px) rotateX(6deg) rotateY(-15deg)' }}>
|
||||
{modules.map((module, index) => {
|
||||
const deckPos = (index - activeModule + modules.length) % modules.length;
|
||||
const isActive = deckPos === 0;
|
||||
return (
|
||||
<div
|
||||
key={module.id}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
transformOrigin: 'top left',
|
||||
transform: `translateX(${deckPos * 12}px) scale(${1 - deckPos * 0.06})`,
|
||||
zIndex: modules.length - deckPos,
|
||||
opacity: isActive ? 1 : Math.max(0.06, 0.55 - deckPos * 0.1),
|
||||
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-[480px] rounded-[3rem] border-[8px] overflow-hidden ${isActive ? 'bg-slate-900 border-slate-800 shadow-2xl shadow-rose-500/20' : 'bg-slate-800 border-slate-700 shadow-xl'}`}>
|
||||
<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="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 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-2 font-bold text-xs text-slate-900 truncate">{module.title}</span>
|
||||
<span className="ml-3 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="p-4 flex-1 space-y-4">
|
||||
<div className="h-36 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-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 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>
|
||||
</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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user