File size: 6,093 Bytes
6248bf4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ShieldCheck, FileText, Globe, Zap, ArrowRight, CheckCircle2, ChevronRight, HelpCircle } from 'lucide-react';
const STEPS = [
{
id: 'identity',
title: 'Identité de l\'Entreprise',
description: 'Meta doit vérifier que votre école est une entité réelle.',
icon: <FileText className="w-6 h-6" />,
color: 'from-blue-500 to-indigo-600',
details: [
'Extrait Kbis ou Registre du Commerce',
'Facture d\'électricité ou téléphone au nom de l\'école',
'Le nom doit correspondre EXACTEMENT à celui sur Facebook'
]
},
{
id: 'domain',
title: 'Vérification du Domaine',
description: 'Prouvez que vous êtes propriétaire de votre site web.',
icon: <Globe className="w-6 h-6" />,
color: 'from-purple-500 to-pink-600',
details: [
'Ajout d\'un code TXT sur votre DNS (ex: Namecheap, LWS)',
'Ou ajout d\'un fichier HTML sur votre serveur',
'Indispensable pour la confiance des élèves'
]
},
{
id: 'approval',
title: 'Explosion des Limites',
description: 'Passez de 250 à 1000+ conversations par jour.',
icon: <Zap className="w-6 h-6" />,
color: 'from-amber-400 to-orange-500',
details: [
'Accès aux statistiques avancées de Meta',
'Possibilité de diffuser des notifications massives',
'Validation par Meta sous 48h à 7 jours'
]
}
];
export default function MetaVerificationGuide() {
const [activeStep, setActiveStep] = useState(0);
return (
<div className="bg-white rounded-[2.5rem] p-10 border border-slate-100 shadow-2xl shadow-indigo-100/50">
<div className="flex items-center gap-4 mb-10">
<div className="w-14 h-14 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600">
<ShieldCheck className="w-8 h-8" />
</div>
<div>
<h2 className="text-3xl font-black text-slate-900 tracking-tight">Accélérateur de Croissance</h2>
<p className="text-slate-500 font-medium">Guide interactif pour débloquer toute la puissance de WhatsApp</p>
</div>
</div>
<div className="grid md:grid-cols-[1fr_1.5fr] gap-12">
{/* Sidebar Steps */}
<div className="space-y-4">
{STEPS.map((step, idx) => (
<button
key={step.id}
onClick={() => setActiveStep(idx)}
className={`w-full text-left p-6 rounded-3xl transition-all duration-300 relative overflow-hidden group ${
activeStep === idx
? 'bg-slate-900 text-white shadow-xl translate-x-2'
: 'bg-slate-50 text-slate-400 hover:bg-slate-100'
}`}
>
<div className="flex items-center gap-4 relative z-10">
<div className={`p-2 rounded-xl ${activeStep === idx ? 'bg-white/10' : 'bg-white shadow-sm'}`}>
{step.icon}
</div>
<div className="flex-1">
<h4 className="font-bold text-sm">{step.title}</h4>
{activeStep === idx && (
<motion.p
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
className="text-xs text-slate-300 mt-1 font-medium"
>
{step.description}
</motion.p>
)}
</div>
<ChevronRight className={`w-5 h-5 transition-transform ${activeStep === idx ? 'rotate-90' : ''}`} />
</div>
</button>
))}
</div>
{/* Content Area */}
<div className="relative min-h-[400px]">
<AnimatePresence mode="wait">
<motion.div
key={activeStep}
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
className="bg-slate-50/50 rounded-[3rem] p-12 border border-white h-full"
>
<div className={`w-20 h-20 bg-gradient-to-br ${STEPS[activeStep].color} rounded-3xl mb-8 flex items-center justify-center text-white shadow-lg`}>
{STEPS[activeStep].icon}
</div>
<h3 className="text-2xl font-black text-slate-900 mb-6">{STEPS[activeStep].title}</h3>
<div className="space-y-6">
{STEPS[activeStep].details.map((detail, i) => (
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: i * 0.1 }}
key={i}
className="flex items-start gap-4"
>
<div className="mt-1 bg-white p-1 rounded-full shadow-sm text-emerald-500">
<CheckCircle2 className="w-4 h-4" />
</div>
<p className="text-slate-600 font-medium leading-relaxed">{detail}</p>
</motion.div>
))}
</div>
<div className="mt-12 pt-8 border-t border-slate-200/50 flex items-center justify-between">
<div className="flex items-center gap-2 text-indigo-600 font-bold text-sm">
<HelpCircle className="w-4 h-4" />
Besoin d'aide ?
</div>
<a
href="https://business.facebook.com/settings/security"
target="_blank"
className={`flex items-center gap-2 bg-gradient-to-r ${STEPS[activeStep].color} text-white px-8 py-4 rounded-2xl font-bold hover:scale-105 transition shadow-lg`}
>
Ouvrir Meta Manager <ArrowRight className="w-4 h-4" />
</a>
</div>
</motion.div>
</AnimatePresence>
</div>
</div>
</div>
);
}
|