ayrisdev/aydogannakliyat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

b

Browse Source
This commit is contained in:
ayrisdev
2026-04-16 01:36:18 +03:00
parent ef9d6fc40a
commit bac925b5bc
67 changed files with 275 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
components/FloatingWhatsApp.tsx
View File

@@ -1,24 +1,72 @@
"use client";
import { MessageCircle } from "lucide-react";
import { motion } from "framer-motion";
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 (
<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>
<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>
);
}