feat: add floating WhatsApp support widget to root layout

2026-06-22 17:25:51 +06:00
parent 5fc14ba492
commit 4187c591ad
2 changed files with 72 additions and 0 deletions
--- a/src/components/ui/WhatsAppFloat.tsx
+++ b/src/components/ui/WhatsAppFloat.tsx
@@ -0,0 +1,69 @@
+'use client';
+import Image from 'next/image';
+import { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+
+export default function WhatsAppFloat() {
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  useEffect(() => {
+    // Show the tooltip after 3 seconds for better engagement
+    const timer = setTimeout(() => {
+      setShowTooltip(true);
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div className="fixed bottom-6 right-6 z-50 flex flex-col items-end">
+      {/* Tooltip Bubble */}
+      <div 
+        className={`bg-white text-slate-800 p-4 rounded-2xl shadow-[0_10px_40px_rgba(0,0,0,0.15)] mb-4 max-w-[260px] relative origin-bottom-right transition-all duration-500 border border-slate-100 ${
+          showTooltip ? 'scale-100 opacity-100 translate-y-0' : 'scale-50 opacity-0 translate-y-10 pointer-events-none'
+        }`}
+      >
+        <button 
+          onClick={() => setShowTooltip(false)}
+          className="absolute top-2 right-2 text-slate-400 hover:text-slate-600 transition-colors"
+        >
+          <X className="w-4 h-4" />
+        </button>
+        <div className="flex gap-3 items-start">
+          <div className="w-10 h-10 rounded-full bg-accent/10 flex-shrink-0 flex items-center justify-center p-2 mt-1 shadow-inner">
+             <Image src="/jaiben.png" alt="JAIBEN Logo" width={24} height={24} className="object-contain" />
+          </div>
+          <div>
+            <h4 className="font-bold text-sm text-slate-900 mb-1">JAIBEN Support</h4>
+            <p className="text-xs text-slate-600 leading-relaxed">Hi there! 👋 Have questions about EV rentals or partnerships? Send us a message!</p>
+          </div>
+        </div>
+        {/* Triangle pointer */}
+        <div className="absolute -bottom-2 right-6 w-4 h-4 bg-white border-b border-r border-slate-100 transform rotate-45"></div>
+      </div>
+
+      {/* Floating Button */}
+      <a 
+        href="https://wa.me/8801789822502?text=Hi%20Jaiben%20Team!%20%F0%9F%91%8B" 
+        target="_blank" 
+        rel="noopener noreferrer"
+        className="w-16 h-16 bg-[#25D366] hover:bg-[#20bd5a] text-white rounded-full flex items-center justify-center shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group"
+        onMouseEnter={() => setShowTooltip(true)}
+      >
+        {/* Pulsing ring */}
+        <span className="absolute inset-0 rounded-full border-2 border-[#25D366] animate-ping opacity-50"></span>
+        
+        {/* Inside icon - JAIBEN logo instead of standard whatsapp logo */}
+        <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center p-2 shadow-inner relative z-10 transform group-hover:scale-95 transition-transform">
+          <Image src="/jaiben.png" alt="JAIBEN Logo" width={28} height={28} className="object-contain" />
+        </div>
+        
+        {/* Tiny whatsapp badge to show it's whatsapp */}
+        <div className="absolute -top-1 -right-1 w-7 h-7 bg-white rounded-full flex items-center justify-center shadow-md z-20 border border-slate-100">
+          <svg viewBox="0 0 24 24" className="w-5 h-5 fill-[#25D366]">
+            <path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.006c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.394.86s.274.072.376-.043c.101-.116.433-.506.549-.68.116-.173.231-.145.39-.087s1.011.477 1.184.564.289.13.332.202c.045.072.045.419-.1.824zm-3.423-14.416c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm.029 18.88c-1.161 0-2.305-.292-3.318-.844l-3.677.964.984-3.595c-.607-1.052-.927-2.246-.926-3.468.001-3.825 3.113-6.937 6.937-6.937 3.825.001 6.938 3.113 6.938 6.935.002 3.821-3.11 6.945-6.938 6.945z"/>
+          </svg>
+        </div>
+      </a>
+    </div>
+  );
+}