first commit

src/components/WhatsAppFloatingButton.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { BARTENDER_PROFILE } from "@/data/portfolio-data";
+
+interface WhatsAppFloatingButtonProps {
+  conceptName?: string;
+  theme?: "kalkbrenner" | "speakeasy" | "alchemist" | "editorial" | "tropical";
+}
+
+export function WhatsAppFloatingButton({
+  conceptName = "General",
+  theme = "kalkbrenner",
+}: WhatsAppFloatingButtonProps) {
+  const message = encodeURIComponent(
+    `¡Hola John Caiza! Vi tu portafolio (${conceptName}) y me gustaría consultar disponibilidad y cotización para un evento de coctelería.`
+  );
+  const waUrl = `https://wa.me/${BARTENDER_PROFILE.whatsapp.replace(/[^0-9]/g, "")}?text=${message}`;
+
+  const themeClasses = {
+    kalkbrenner:
+      "hidden sm:flex bg-[#0a0a0a]/95 text-white border border-white/20 hover:border-white hover:bg-white hover:text-black font-mono text-[11px] uppercase tracking-[0.2em] shadow-[0_10px_30px_rgba(0,0,0,0.8)] backdrop-blur-md rounded-none px-4 py-3",
+    speakeasy:
+      "bg-[#0d0905]/95 text-[#f59e0b] border border-[#f59e0b]/30 hover:border-[#f59e0b] hover:bg-[#f59e0b] hover:text-black font-serif text-xs uppercase tracking-wider shadow-[0_10px_30px_rgba(0,0,0,0.8)] backdrop-blur-md rounded-xl px-4 py-3",
+    alchemist:
+      "bg-[#02050e]/95 text-[#00f0ff] border border-[#00f0ff]/30 hover:border-[#a3e635] hover:text-[#a3e635] font-mono text-xs uppercase tracking-widest shadow-[0_0_25px_rgba(0,240,255,0.15)] backdrop-blur-md rounded-lg px-4 py-3",
+    editorial:
+      "hidden sm:flex bg-white/95 text-black border border-black hover:bg-black hover:text-white font-mono text-xs shadow-xl backdrop-blur-md rounded-full px-5 py-3 tracking-wider font-bold",
+    tropical:
+      "bg-black/80 text-white border border-pink-500/40 hover:border-[#00f2fe] font-mono text-xs uppercase tracking-wider shadow-[0_0_25px_rgba(255,0,122,0.3)] backdrop-blur-md rounded-full px-5 py-3",
+  }[theme];
+
+  return (
+    <aside aria-label="Contacto por WhatsApp">
+      <a
+        href={waUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={`fixed bottom-6 right-6 z-[999] flex items-center gap-2.5 active:scale-[0.97] transition-all duration-200 group ${themeClasses}`}
+        title="Consultar disponibilidad con John Caiza"
+      >
+        <span className="w-1.5 h-1.5 bg-emerald-400 rounded-full shrink-0 group-hover:scale-125 transition-transform" />
+        <span className="font-bold">WhatsApp Direct // John Caiza</span>
+        <span className="opacity-40 group-hover:opacity-100 group-hover:translate-x-1 transition-all">
+          →
+        </span>
+      </a>
+    </aside>
+  );
+}