diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 25030f9..a1ca3c3 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -28,6 +28,8 @@ export const viewport: Viewport = { userScalable: false, }; +import WhatsAppFloat from "@/components/ui/WhatsAppFloat"; + export default function RootLayout({ children, }: Readonly<{ @@ -37,6 +39,7 @@ export default function RootLayout({ {children} + diff --git a/src/components/ui/WhatsAppFloat.tsx b/src/components/ui/WhatsAppFloat.tsx new file mode 100644 index 0000000..15c07ef --- /dev/null +++ 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 ( +
+ {/* Tooltip Bubble */} +
+ +
+
+ JAIBEN Logo +
+
+

JAIBEN Support

+

Hi there! 👋 Have questions about EV rentals or partnerships? Send us a message!

+
+
+ {/* Triangle pointer */} +
+
+ + {/* Floating Button */} + setShowTooltip(true)} + > + {/* Pulsing ring */} + + + {/* Inside icon - JAIBEN logo instead of standard whatsapp logo */} +
+ JAIBEN Logo +
+ + {/* Tiny whatsapp badge to show it's whatsapp */} +
+ + + +
+ +
+ ); +}