|
|
| 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> |
| ); |
| } |
|
|
