Compare commits

..

No commits in common. "586d4e8118a09ebe96b83fbc24b8de93638390b2" and "9deb32fe8423ff0c3876816032f16f4b92031c95" have entirely different histories.

2 changed files with 73 additions and 141 deletions

View File

@ -2,8 +2,8 @@ import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "MyInfoMate | La technologie au service de l'expérience visiteur",
description: "La solution SaaS pour digitaliser l'expérience de vos visiteurs. Créativité et technologie au service de l'expérience visiteur.",
title: "MyInfoMate | Solution Interactive pour Musées et Sites Culturels",
description: "La solution SaaS leader pour la digitalisation des musées et sites culturels. Créativité et technologie au service du patrimoine.",
icons: {
icon: "/myinfomate-logo.png",
},

View File

@ -39,23 +39,23 @@ export default function Home() {
title: 'Jeux & Quiz',
icon: 'sports_esports',
theme: 'rose',
description: 'Transformez la visite en aventure ludique. Chasses au trésor, quiz de connaissances et parcours gamifiés pour capter lattention de tous vos visiteurs.',
value: 'Augmentez lengagement et la fidélisation de vos visiteurs.'
description: 'Transformez la visite en aventure ludique. Chasses au trésor, quiz de connaissances et parcours gamifiés pour capter lattention des plus jeunes.',
value: 'Augmentez lengagement des familles et des scolaires.'
},
{
id: 'video',
title: 'Audio & Vidéo',
icon: 'videocam',
theme: 'rose',
description: 'Diffusez vos contenus multimédias HD sans latence. Audio-guides immersifs, vidéos et témoignages accessibles en un clic.',
value: 'Enrichissez lexpérience visiteur par le multimédia.'
description: 'Diffusez vos contenus multimédias HD sans latence. Audio-guides immersifs, vidéos documentaires et témoignages dexperts accessibles en un clic.',
value: 'Enrichissez l\'expérience culturelle par le multimédia.'
},
{
id: 'article',
title: 'Articles & PDF',
icon: 'article',
theme: 'rose',
description: 'Offrez une lecture confortable de vos contenus. Fiches descriptives, brochures PDF et catalogues numérisés.',
description: 'Offrez une lecture confortable de vos contenus de fond. Fiches descriptives, brochures PDF et catalogues dexposition numérisés.',
value: 'Digitalisez vos supports papier sans perte de qualité.'
},
{
@ -63,15 +63,15 @@ export default function Home() {
title: 'Agenda & Événements',
icon: 'calendar_month',
theme: 'rose',
description: 'Gérez dynamiquement votre programmation. Événements, conférences ou ateliers : vos visiteurs ne ratent plus rien.',
value: 'Optimisez la fréquentation de vos activités.'
description: 'Gérez dynamiquement votre programmation. Expositions temporaires, conférences ou ateliers : vos visiteurs ne ratent plus rien.',
value: 'Optimisez la fréquentation de vos activités annexes.'
},
{
id: 'offline',
title: 'Accès Hors Ligne',
icon: 'download_for_offline',
theme: 'rose',
description: 'Éliminez les zones blanches. Permettez le téléchargement automatique des contenus pour une consultation fluide même sans connexion 4G/Wifi.',
description: 'Éliminez les zones blanches. Permettez le téléchargement automatique des parcours pour une consultation fluide même sans connexion 4G/Wifi.',
value: 'Garantissez un service continu partout sur votre site.'
},
{
@ -79,7 +79,7 @@ export default function Home() {
title: 'Contenu Web & Social',
icon: 'public',
theme: 'rose',
description: 'Intégrez le meilleur du web. Formulaires, réseaux sociaux ou liens externes : ouvrez votre app sur le monde.',
description: 'Intégrez le meilleur du web. Formulaires denquête, réseaux sociaux ou liens vers votre billetterie : ouvrez votre app sur le monde.',
value: 'Connectez votre écosystème digital en un seul lieu.'
},
{
@ -87,7 +87,7 @@ export default function Home() {
title: 'Statistiques & Data',
icon: 'monitoring',
theme: 'rose',
description: 'Analysez le comportement de vos visiteurs. Contenus populaires, temps de lecture et engagement : pilotez par la donnée.',
description: 'Analysez le comportement de vos visiteurs. Points dintérêt populaires, temps de lecture et engagement : pilotez par la donnée.',
value: 'Prenez des décisions éclairées basées sur lusage réel.'
}
];
@ -246,7 +246,7 @@ export default function Home() {
<div className="flex-1 text-center lg:text-left">
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-slate-700 text-xs font-bold uppercase tracking-wider mb-6">
<span className="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
La technologie au service de l'expérience visiteur
La technologie au service du patrimoine
</div>
<h1 className="text-4xl lg:text-6xl font-extrabold text-slate-900 leading-[1.1] mb-8">
MyInfoMate - La solution facile pour créer, gérer et diffuser du <span className="gradient-text">contenu interactif</span>
@ -279,7 +279,7 @@ export default function Home() {
/>
<div className="absolute top-4 left-6 bg-white/90 backdrop-blur px-4 py-2 rounded-xl shadow-lg border border-primary/20">
<p className="text-[10px] font-bold text-slate-400 uppercase">Carte Interactive</p>
<p className="text-xs font-extrabold text-slate-900">Parcours Découverte</p>
<p className="text-xs font-extrabold text-slate-900">Parcours des Sculptures</p>
</div>
</div>
@ -330,7 +330,7 @@ export default function Home() {
<div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-20">
<h2 className="text-accent-violet font-extrabold uppercase tracking-widest text-sm mb-4">Points Stratégiques</h2>
<h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 tracking-tight">La technologie au service de l'expérience visiteur</h3>
<h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 tracking-tight">La technologie au service du patrimoine</h3>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{/* Feature 1 */}
@ -430,17 +430,18 @@ export default function Home() {
</p>
</div>
<div className="flex flex-col lg:flex-row gap-8 lg:gap-16 items-stretch">
<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">
<div className="flex lg:flex-col gap-3 overflow-x-auto pb-4 lg:pb-0 scrollbar-hide snap-x relative group/tabs">
{modules.map((module, index) => (
<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'
@ -455,72 +456,22 @@ export default function Home() {
</div>
</div>
{/* Main Display */}
<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">
<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">
{/* 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 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: 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">
<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">
{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}
@ -528,65 +479,46 @@ export default function Home() {
</div>
</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-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-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-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-3">
<div className="h-10 bg-slate-100 rounded-xl"></div>
<div className="h-10 bg-rose-600 rounded-xl"></div>
</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">
{/* 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) */}
<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>
</div>
<span className="ml-3 font-bold text-xs text-slate-900 truncate">{modules[activeModule].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>
<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>
</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>
</div>
</div>
</div>
</div>
</div>
</div>
@ -635,7 +567,7 @@ export default function Home() {
<h2 className="text-accent-orange font-extrabold uppercase tracking-widest text-sm mb-4">White label</h2>
<h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-8">Votre marque, votre application. Pas la nôtre.</h3>
<p className="text-lg text-slate-600 leading-relaxed mb-8">
Bénéficiez d'une solution <strong>White Label</strong> complète. Personnalisez l'interface aux couleurs de votre lieu, utilisez votre propre logo et typographie pour une immersion totale de vos visiteurs dans votre univers.
Bénéficiez d'une solution <strong>White Label</strong> complète. Personnalisez l'interface aux couleurs de votre institution, utilisez votre propre logo et typographie pour une immersion totale de vos visiteurs dans votre univers.
</p>
<ul className="space-y-4 mb-10 text-slate-700 font-semibold">
<li className="flex items-center gap-3">
@ -644,7 +576,7 @@ export default function Home() {
</li>
<li className="flex items-center gap-3">
<span className="material-symbols-outlined text-accent-orange">check_circle</span>
Votre logo sur l'écran d'accueil
Logo institutionnel sur l'écran d'accueil
</li>
<li className="flex items-center gap-3">
<span className="material-symbols-outlined text-accent-orange">check_circle</span>
@ -684,10 +616,10 @@ export default function Home() {
</div>
<div className="text-center p-6 flex flex-col items-center">
<div className="w-24 h-24 icon-circle mb-6 text-accent-orange">
<span className="material-symbols-outlined text-5xl">hotel</span>
<span className="material-symbols-outlined text-5xl">castle</span>
</div>
<h4 className="text-2xl font-bold mb-3">Hôtels & Loisirs</h4>
<p className="text-slate-600 text-sm">Offrez à vos clients une expérience premium : services, activités, carte interactive du lieu et recommandations personnalisées.</p>
<h4 className="text-2xl font-bold mb-3">Lieux de Patrimoine</h4>
<p className="text-slate-600 text-sm">Redonnez vie à l'history avec des reconstitutions en réalité augmentée et des parcours scénographiés immersifs.</p>
</div>
</div>
</div>
@ -705,7 +637,7 @@ export default function Home() {
Prêt à transformer votre <span className="text-primary">expérience visiteur</span> ?
</h2>
<p className="text-slate-400 text-lg mb-12 max-w-2xl mx-auto relative z-10">
Rejoignez des dizaines de lieux qui font confiance à MyInfoMate pour engager leurs visiteurs.
Rejoignez des dizaines d'institutions culturelles qui font confiance à MyInfoMate pour leur stratégie numérique.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-6 relative z-10">
<button
@ -844,7 +776,7 @@ export default function Home() {
<span className="text-lg font-extrabold tracking-tight text-slate-900">MyInfoMate</span>
</div>
<p className="text-slate-500 text-sm leading-relaxed mb-6">
La solution SaaS pour la digitalisation de vos lieux. Créativité et technologie au service de l'expérience visiteur.
La solution SaaS pour la digitalisation des musées et sites culturels. Créativité et technologie au service du patrimoine.
</p>
<div className="flex gap-4">
<a className="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 hover:bg-primary hover:text-slate-900 transition-all" href="#">