25 lines
1.1 KiB
TypeScript
25 lines
1.1 KiB
TypeScript
"use client";
|
||
|
||
import { MessageCircle } from "lucide-react";
|
||
import { motion } from "framer-motion";
|
||
|
||
export function FloatingWhatsApp() {
|
||
return (
|
||
<div className="fixed bottom-6 right-6 md:bottom-10 md:right-10 z-[110]">
|
||
<motion.a
|
||
href="https://wa.me/905XXXXXXXXX"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
whileHover={{ x: -4, y: -4 }}
|
||
whileTap={{ scale: 0.95 }}
|
||
className="bg-[#25D366] text-white w-14 h-14 md:w-20 md:h-20 flex items-center justify-center shadow-[10px_10px_0px_0px_rgba(0,0,0,0.5)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,0.5)] transition-all rounded-none relative group"
|
||
>
|
||
<MessageCircle size={32} fill="currentColor" className="text-white md:scale-125" />
|
||
<span className="absolute right-full mr-4 bg-surface-container-highest text-white px-4 py-2 text-[10px] uppercase tracking-widest font-black opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
|
||
Hemen Whatsapp'tan Yazın
|
||
</span>
|
||
</motion.a>
|
||
</div>
|
||
);
|
||
}
|