73 lines
3.2 KiB
TypeScript
73 lines
3.2 KiB
TypeScript
"use client";
|
||
|
||
import { MessageCircle } from "lucide-react";
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
import { siteConfig } from "@/lib/data";
|
||
import { useState, useEffect } from "react";
|
||
|
||
export function FloatingWhatsApp() {
|
||
const [isVisible, setIsVisible] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const timer = setTimeout(() => setIsVisible(true), 1000);
|
||
return () => clearTimeout(timer);
|
||
}, []);
|
||
|
||
return (
|
||
<AnimatePresence>
|
||
{isVisible && (
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8, y: 20 }}
|
||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||
exit={{ opacity: 0, scale: 0.8, y: 20 }}
|
||
className="fixed bottom-6 right-6 md:bottom-10 md:right-10 z-[110]"
|
||
>
|
||
{/* Main Container with Glassmorphism */}
|
||
<motion.a
|
||
href={`https://wa.me/${siteConfig.contact.whatsapp}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="relative flex items-center group no-underline"
|
||
whileHover="hover"
|
||
>
|
||
{/* Expanded Label on Hover */}
|
||
<motion.div
|
||
variants={{
|
||
initial: { width: 64, opacity: 0 },
|
||
hover: { width: "auto", opacity: 1 }
|
||
}}
|
||
transition={{ type: "spring", damping: 20, stiffness: 200 }}
|
||
className="absolute right-0 flex items-center bg-white/10 backdrop-blur-xl border border-white/20 rounded-full pr-20 pl-6 py-4 overflow-hidden pointer-events-none shadow-2xl"
|
||
>
|
||
<div className="flex flex-col">
|
||
<span className="text-white text-[10px] font-black uppercase tracking-widest whitespace-nowrap">Hemen Yazın</span>
|
||
<span className="text-primary text-[12px] font-bold whitespace-nowrap">+90 537 720 09 90</span>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Icon Button */}
|
||
<div className="relative z-10 w-16 h-16 md:w-20 md:h-20">
|
||
{/* Outer Glows */}
|
||
<div className="absolute inset-0 bg-[#25D366] rounded-full blur-xl opacity-40 group-hover:opacity-70 transition-opacity animate-pulse" />
|
||
|
||
{/* Main Button Body */}
|
||
<div className="absolute inset-0 bg-gradient-to-tr from-[#128C7E] to-[#25D366] rounded-full flex items-center justify-center border-4 border-white/20 shadow-2xl group-hover:scale-110 transition-transform duration-500 overflow-hidden">
|
||
<MessageCircle size={32} fill="white" className="text-white md:scale-125 group-hover:rotate-[360deg] transition-transform duration-700" />
|
||
|
||
{/* Internal Reflection */}
|
||
<div className="absolute top-0 left-0 w-full h-1/2 bg-white/20 rounded-t-full" />
|
||
</div>
|
||
|
||
{/* Ping Indicator */}
|
||
<div className="absolute -top-1 -right-1 flex">
|
||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#25D366] opacity-75"></span>
|
||
<span className="relative inline-flex rounded-full h-4 w-4 bg-[#25D366] border-2 border-white"></span>
|
||
</div>
|
||
</div>
|
||
</motion.a>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
);
|
||
}
|