feat(clients): align client form with first and last name API fields

src/components/ui/sparkle-button.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type SparkleButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function SparkleButton({
+  className,
+  children,
+  type = 'button',
+  ...props
+}: SparkleButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn(
+        'group inline-flex h-12 min-w-40 shrink-0 cursor-pointer items-center justify-center gap-3 rounded-full border-0 bg-[#1C1A1C] px-6 text-sm font-semibold text-[#AAAAAA] outline-none transition-all duration-500 ease-in-out hover:-translate-y-0.5 hover:bg-[linear-gradient(0deg,#A47CF3,#683FEA)] hover:text-white hover:[box-shadow:inset_0_1px_0_0_rgba(255,255,255,0.4),inset_0_-4px_0_0_rgba(0,0,0,0.2),0_0_0_4px_rgba(255,255,255,0.2),0_0_180px_0_#9917FF] focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        className="size-5 fill-[#AAAAAA] transition-all duration-700 ease-in-out group-hover:scale-125 group-hover:fill-white"
+      >
+        <path d="M10 21.236 6.755 14.745.264 11.5l6.491-3.245L10 1.764l3.245 6.491 6.491 3.245-6.491 3.245L10 21.236ZM18 21l1.5 3 1.5-3 3-1.5-3-1.5-1.5-3-1.5 3-3 1.5 3 1.5ZM19.333 4.667 20.5 7l1.167-2.333L24 3.5l-2.333-1.167L20.5 0l-1.167 2.333L17 3.5l2.333 1.167Z" />
+      </svg>
+      <span>{children}</span>
+    </button>
+  );
+}