👤 CTA Button

npm i clsx tailwind-merge

//lib/utils.ts

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

import Link from "next/link";
import { cn } from "@/lib/utils";
import Image from "next/image";
import { IconChevronRight } from '@tabler/icons-react';

export interface btnProps {
    className?: string;
   avatarUrl?: string;        
  title?: string;               
  subtitle?: string;            
  onClick?: () => void;  
    href?:string
}

export default function UserCTAButton({
  className,
  href="#",
  onClick,
  subtitle="With Alex",
  title="Start Your Free Consultation",
  avatarUrl="/maleavatar.png"
}:btnProps) {
  return (
    <Link href={href} onClick={onClick} target="_blank" className ={cn(`relative group flex items-center gap-3 bg-neutral-800 text-white rounded-full border border-zinc-700 hover:shadow-lg hover:shadow-neutral-800 hover:ring-1 hover:ring-zinc-600 duration-300 overflow-hidden w-fit h-auto px-4 py-2 no-underline`,className)}>

      {/* Glare */}
     <div className="h-[100px] w-9 bg-gradient-to-r from-white/10 via-white/50 to-white/10 absolute -left-16 -rotate-45 blur-xl group-hover:left-[150%] duration-700 group-hover:delay-300"></div>


      {/* avatar */}
      <div className="relative size-14 md:size-14 rounded-full overflow-hidden flex items-center justify-center bg-white/20">
      <Image src={avatarUrl} alt={subtitle} height={1000} width={1000} className="h-full w-full rounded-full object-cover object-center "></Image>
      </div>

      {/* CTA TEXT */}
      <div>
        <div className="text-sm md:text-base">{title}</div>
        <div className="text-sm md:text-sm text-gray-400">{subtitle}</div>
      </div>
        
      <div><IconChevronRight stroke={2}
      className="group-hover:translate-x-2 duration-300 h-7 w-7 text-neutral-500 group-hover:text-white"
      /></div>
    </Link>
  );
}