30 lines
1.4 KiB
TypeScript
30 lines
1.4 KiB
TypeScript
|
import { MessageCircle } from 'lucide-react';
|
||
|
|
import { motion } from 'framer-motion';
|
||
|
|
|
||
|
|
export default function FloatingWhatsApp() {
|
||
|
|
// Coloque aqui o número do seu WhatsApp com DDI (Ex: 5511999999999)
|
||
|
|
const whatsappNumber = "5511999999999";
|
||
|
|
const defaultMessage = "Olá! Tenho uma dúvida sobre o kit Festa Mágica IA.";
|
||
|
|
const url = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(defaultMessage)}`;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<motion.a
|
||
|
|
href={url}
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
className="fixed bottom-6 right-6 z-50 flex items-center justify-center w-14 h-14 bg-emerald-500 text-white rounded-full shadow-[0_0_20px_rgba(16,185,129,0.3)] hover:bg-emerald-400 hover:scale-110 transition-all duration-300 group"
|
||
|
|
initial={{ opacity: 0, scale: 0 }}
|
||
|
|
animate={{ opacity: 1, scale: 1 }}
|
||
|
|
transition={{ delay: 1, duration: 0.5, type: 'spring' }}
|
||
|
|
>
|
||
|
|
<MessageCircle className="w-7 h-7" />
|
||
|
|
|
||
|
|
{/* Tooltip */}
|
||
|
|
<div className="absolute right-full mr-4 top-1/2 -translate-y-1/2 px-4 py-2 bg-indigo-950 border border-indigo-800 text-white font-medium text-sm whitespace-nowrap rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity drop-shadow-xl shadow-2xl">
|
||
|
|
Fale com nosso suporte
|
||
|
|
<div className="absolute right-[-5px] top-1/2 -translate-y-1/2 w-2 h-2 bg-indigo-950 border-r border-t border-indigo-800 rotate-45" />
|
||
|
|
</div>
|
||
|
|
</motion.a>
|
||
|
|
);
|
||
|
|
}
|