Integration 01

1import { cn } from "@/lib/utils";
2import {
3  ChatGptIcon,
4  ClaudeIcon,
5  GeminiIcon,
6  GoogleIcon,
7  NotionIcon,
8  ReplitIcon,
9  SlackIcon,
10  SupabaseIcon,
11} from "@/registry/blocks/social-icons/icons";
12 
13interface IntegrationIcon {
14  icon: React.ReactNode;
15  className?: string;
16}
17 
18interface Testimonial {
19  quote: string;
20  author: string;
21  role: string;
22  avatar?: string;
23}
24 
25interface Integration01Props {
26  label?: string;
27  title?: string;
28  description?: string;
29  integrations?: IntegrationIcon[];
30  testimonial?: Testimonial;
31  className?: string;
32}
33 
34const IntegrationIconBubble = ({
35  icon,
36  className,
37  size = "md",
38}: IntegrationIcon & { size?: "sm" | "md" | "lg" }) => {
39  const sizeClasses = {
40    sm: "size-8",
41    md: "size-8 md:size-10",
42    lg: "size-8 md:size-12",
43  };
44 
45  return (
46    <div
47      className={cn(
48        "flex items-center justify-center rounded-full border bg-white/5 backdrop-blur-xs",
49        sizeClasses[size],
50        className,
51      )}
52    >
53      {icon}
54    </div>
55  );
56};
57 
58const Integration01 = ({
59  label = "Seamless integrations",
60  title = "Works with your favorite tools",
61  description = "Connect with the apps you already use. Our components integrate seamlessly with your existing workflow, from AI assistants to collaboration tools.",
62  integrations = [
63    { icon: <SlackIcon className="w-full p-1.5" /> },
64    { icon: <SupabaseIcon className="w-full p-1.5" /> },
65    { icon: <ChatGptIcon className="w-full p-1.5 dark:invert" /> },
66    { icon: <ClaudeIcon className="w-full p-1.5" /> },
67    { icon: <NotionIcon className="w-full p-1.5" /> },
68    { icon: <ReplitIcon className="w-full p-1.5" /> },
69    { icon: <GoogleIcon className="w-full p-1.5" /> },
70    { icon: <GeminiIcon className="w-full p-1.5" /> },
71    { icon: <ReplitIcon className="w-full p-1.5" /> },
72  ],
73  testimonial = {
74    quote:
75      "The integration with our existing stack was effortless. We connected Slack, Notion, and our AI tools in minutes. It just works.",
76    author: "Sarah Chen",
77    role: "Engineering Lead at Acme",
78    avatar:
79      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop&crop=face",
80  },
81  className,
82}: Integration01Props) => {
83  const getPositionOnCurve = (index: number, total: number) => {
84    const t = index / (total - 1);
85    const p0 = { x: 0, y: 75 };
86    const p1 = { x: 50, y: -50 };
87    const p2 = { x: 100, y: 75 };
88    const x =
89      Math.pow(1 - t, 2) * p0.x +
90      2 * (1 - t) * t * p1.x +
91// … truncated