book-demo-button

1"use client";
2import React from "react";
3import { cn } from "@/lib/utils";
4 
5export type BookDemoVariant =
6  | "lime"
7  | "sky"
8  | "rose"
9  | "amber"
10  | "emerald"
11  | "violet"
12  | "orange"
13  | "magenta";
14 
15interface BookDemoButtonProps
16  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
17  variant?: BookDemoVariant;
18}
19 
20const variantStyles: Record<
21  BookDemoVariant,
22  { from: string; to: string; dot: string }
23> = {
24  lime: { from: "#d6f54a", to: "#c5ea2c", dot: "#0f0f0f" },
25  sky: { from: "#a5e0ff", to: "#6bc8f5", dot: "#0a1f3a" },
26  rose: { from: "#ffc4d3", to: "#f590a5", dot: "#3a0a1f" },
27  amber: { from: "#ffd66e", to: "#f5a82e", dot: "#3a210a" },
28  emerald: { from: "#a8efc5", to: "#5fd49a", dot: "#0a2a1a" },
29  violet: { from: "#d4b9ff", to: "#a07bf5", dot: "#1f0a3a" },
30  orange: { from: "#ffb88a", to: "#f57a3a", dot: "#3a190a" },
31  magenta: { from: "#f5a8e0", to: "#e060c5", dot: "#3a0a2a" },
32};
33 
34const DoubleChevron = ({ index, color }: { index: number; color: string }) => {
35  const base = index * 0.12;
36  const dots: { cx: number; cy: number; d: number }[] = [
37    { cx: 2, cy: 2, d: 0 },
38    { cx: 5, cy: 5, d: 0.05 },
39    { cx: 8, cy: 8, d: 0.1 },
40    { cx: 5, cy: 11, d: 0.15 },
41    { cx: 2, cy: 14, d: 0.2 },
42    { cx: 6, cy: 2, d: 0.05 },
43    { cx: 9, cy: 5, d: 0.1 },
44    { cx: 12, cy: 8, d: 0.15 },
45    { cx: 9, cy: 11, d: 0.2 },
46    { cx: 6, cy: 14, d: 0.25 },
47  ];
48  return (
49    <svg
50      width="14"
51      height="16"
52      viewBox="0 0 14 16"
53      className="shrink-0 overflow-visible"
54    >
55      <g fill={color}>
56        {dots.map((p, i) => (
57          <circle
58            key={i}
59            cx={p.cx}
60            cy={p.cy}
61            r="1"
62            className="bd-dot"
63            style={{ animationDelay: `${base + p.d}s` }}
64          />
65        ))}
66      </g>
67    </svg>
68  );
69};
70 
71const BookDemoButton = React.forwardRef<HTMLButtonElement, BookDemoButtonProps>(
72  ({ className, children, variant = "lime", ...props }, ref) => {
73    const v = variantStyles[variant];
74    return (
75      <button
76        ref={ref}
77        className={cn(
78          "group/btn bd-root relative inline-flex h-11 w-36 rounded-[12px] overflow-hidden transition-transform active:scale-[0.97]",
79          className,
80        )}
81        style={{
82          background: "linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%)",
83          boxShadow:
84            "inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.18)",
85        }}
86        {...props}
87      >
88        <style>{`
89// … truncated