55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import { motion } from "motion/react";
|
|
import { Button } from "./ui/button";
|
|
import { Phone } from "lucide-react";
|
|
|
|
export function FloatingCallButton() {
|
|
return (
|
|
<motion.div
|
|
className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-50"
|
|
initial={{ scale: 0, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{
|
|
delay: 1,
|
|
type: "spring",
|
|
stiffness: 200,
|
|
damping: 20,
|
|
}}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
<div className="relative bg-gradient-to-r from-green-500 to-green-600 rounded-full shadow-xl border-2 sm:border-4 border-white/30">
|
|
<Button
|
|
size="lg"
|
|
className="bg-transparent hover:bg-white/10 border-0 px-3 py-2 sm:px-4 sm:py-2 h-auto rounded-full"
|
|
onClick={() => {
|
|
// Opens dialpad directly on mobile
|
|
window.location.href = "tel:+917477247488";
|
|
}}
|
|
>
|
|
<div className="mr-1 sm:mr-2">
|
|
<Phone className="h-4 w-4 sm:h-5 sm:w-5 text-white" />
|
|
</div>
|
|
<div className="text-white text-left">
|
|
<div className="text-xs sm:text-sm font-bold">Call to Book</div>
|
|
<div className="text-xs opacity-90">7477247488</div>
|
|
</div>
|
|
</Button>
|
|
|
|
{/* Simple pulse animation */}
|
|
<motion.div
|
|
className="absolute inset-0 rounded-full bg-green-400/50"
|
|
animate={{
|
|
scale: [1, 1.5, 1],
|
|
opacity: [0.7, 0, 0.7],
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|