"use client"; import React from "react"; import { motion } from "framer-motion"; import { Zap, ArrowRight, Check } from "lucide-react"; import type { Variants } from "framer-motion"; interface ButtonProps extends Omit, "onDrag" | "onDragStart" | "onDragEnd" | "onDragOver" | "onAnimationStart" | "style"> { className?: string; variant?: "primary" | "secondary" | "outline" | "ghost"; children?: React.ReactNode; } function Button({ className = "", variant = "primary", children, ...props }: ButtonProps) { const [isHovered, setIsHovered] = React.useState(false); if (variant === "primary") { return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onTouchStart={() => setIsHovered(true)} onTouchEnd={() => setIsHovered(false)} className={"relative inline-flex items-center justify-between rounded-[999px] h-[56px] select-none cursor-pointer outline-none overflow-hidden " + className} style={{ background: "linear-gradient(145deg, #FF5E1F 4.96%, #FF9910 92.76%)", padding: "4px 4px 4px 18px", fontFamily: "var(--font-sans), sans-serif", minWidth: "280px", }} animate={{ boxShadow: "none" }} transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] as const }} {...props} >

{children || "Start 14-days free trial"}

); } let style: React.CSSProperties = {}; const baseClasses = "relative inline-flex items-center justify-center rounded-xl px-5 py-2.5 text-sm font-semibold transition-all focus:outline-none focus:ring-2 focus:ring-[#FF5E1F]/50 disabled:pointer-events-none disabled:opacity-50 select-none cursor-pointer"; if (variant === "secondary") { style = { backgroundColor: "#f3f4f6", color: "#090014" }; } else if (variant === "outline") { style = { backgroundColor: "transparent", border: "1.5px solid #e5e7eb", color: "#090014" }; } else if (variant === "ghost") { style = { backgroundColor: "transparent", color: "#4b5563" }; } return ( {children} ); } export default function Integration01Aichatbott({ className }: { className?: string }) { const [hoveredLogoIndex, setHoveredLogoIndex] = React.useState(null); const containerVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.1, } } }; const itemVariants: Variants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] as const } } }; const logoContainerVariants: Variants = { hidden: { opacity: 0, scale: 0.9 }, visible: { opacity: 1, scale: 1, transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const } } }; return ( <>

Integrations Accelerate business with
first-class payments {"AiChatbott connects with the tools you already use.\nAccept payments, automate workflows, and grow faster."} {/* ROW 1 */}

{/* ROW 2 */}

{/* ROW 3 */}

{/* ROW 4 */}

setHoveredLogoIndex(0)} onMouseLeave={() => setHoveredLogoIndex(null)} animate={{ rotateY: hoveredLogoIndex === 0 ? 180 : 0, scale: hoveredLogoIndex === 0 ? 1.05 : 1, boxShadow: hoveredLogoIndex === 0 ? "0px 12px 30px rgba(9, 0, 20, 0.08)" : "0px 0px 0px rgba(0,0,0,0)" }} transition={{ type: "spring" as const, stiffness: 150, damping: 15 }} className="logo-box-100 flex items-center justify-center shrink-0 bg-[#CBEB3C] cursor-pointer" style={{ transformStyle: "preserve-3d" }} > setHoveredLogoIndex(1)} onMouseLeave={() => setHoveredLogoIndex(null)} animate={{ rotateY: hoveredLogoIndex === 1 ? 180 : 0, scale: hoveredLogoIndex === 1 ? 1.05 : 1, boxShadow: hoveredLogoIndex === 1 ? "0px 12px 30px rgba(9, 0, 20, 0.08)" : "0px 0px 0px rgba(0,0,0,0)" }} transition={{ type: "spring" as const, stiffness: 150, damping: 15 }} className="logo-box-100 logo-r4-m2 flex items-center justify-center shrink-0 bg-[#1E90FF] cursor-pointer" style={{ transformStyle: "preserve-3d" }} > setHoveredLogoIndex(2)} onMouseLeave={() => setHoveredLogoIndex(null)} animate={{ rotateY: hoveredLogoIndex === 2 ? 180 : 0, scale: hoveredLogoIndex === 2 ? 1.05 : 1, boxShadow: hoveredLogoIndex === 2 ? "0px 12px 30px rgba(9, 0, 20, 0.08)" : "0px 0px 0px rgba(0,0,0,0)" }} transition={{ type: "spring" as const, stiffness: 150, damping: 15 }} className="logo-box-100 logo-r4-m3 flex items-center justify-center shrink-0 bg-[#FFD23F] cursor-pointer" style={{ transformStyle: "preserve-3d" }} > setHoveredLogoIndex(3)} onMouseLeave={() => setHoveredLogoIndex(null)} animate={{ rotateY: hoveredLogoIndex === 3 ? 180 : 0, scale: hoveredLogoIndex === 3 ? 1.05 : 1, boxShadow: hoveredLogoIndex === 3 ? "0px 12px 30px rgba(9, 0, 20, 0.08)" : "0px 0px 0px rgba(0,0,0,0)" }} transition={{ type: "spring" as const, stiffness: 150, damping: 15 }} className="logo-box-100 logo-r4-m4 flex items-center justify-center shrink-0 bg-[#EA533A] cursor-pointer" style={{ transformStyle: "preserve-3d" }} > setHoveredLogoIndex(4)} onMouseLeave={() => setHoveredLogoIndex(null)} animate={{ rotateY: hoveredLogoIndex === 4 ? 180 : 0, scale: hoveredLogoIndex === 4 ? 1.05 : 1, boxShadow: hoveredLogoIndex === 4 ? "0px 12px 30px rgba(9, 0, 20, 0.08)" : "0px 0px 0px rgba(0,0,0,0)" }} transition={{ type: "spring" as const, stiffness: 150, damping: 15 }} className="logo-box-100 logo-r4-m5 flex items-center justify-center shrink-0 bg-white border border-[#090014]/5 cursor-pointer" style={{ transformStyle: "preserve-3d" }} > setHoveredLogoIndex(5)} onMouseLeave={() => setHoveredLogoIndex(null)} animate={{ rotateY: hoveredLogoIndex === 5 ? 180 : 0, scale: hoveredLogoIndex === 5 ? 1.05 : 1, boxShadow: hoveredLogoIndex === 5 ? "0px 12px 30px rgba(9, 0, 20, 0.08)" : "0px 0px 0px rgba(0,0,0,0)" }} transition={{ type: "spring" as const, stiffness: 150, damping: 15 }} className="logo-box-100 logo-r4-m6 flex items-center justify-center shrink-0 bg-[#11D279] cursor-pointer" style={{ transformStyle: "preserve-3d" }} >

{/* Reflection row */}

Based on open standards & extensible APIs

); }