Feature 09

1import { ArrowUpRight } from "lucide-react";
2import { cn } from "@/lib/utils";
3import {
4  NotionIcon,
5  SlackIcon,
6  GithubIcon,
7  SupabaseIcon,
8  ClaudeIcon,
9  PostHogIcon,
10} from "@/registry/blocks/social-icons/icons";
11 
12interface IntegrationItems {
13  icon: React.ReactNode;
14  name: string;
15  description: string;
16}
17 
18interface Feature09Props {
19  label?: string;
20  title?: string;
21  description?: string;
22  link?: { text: string; url: string };
23  integrations?: IntegrationItems[];
24  className?: string;
25}
26 
27const defaultIntegrations: IntegrationItems[] = [
28  {
29    icon: <NotionIcon className="size-8" />,
30    name: "Notion",
31    description: "Manage your docs and knowledge base in one place.",
32  },
33  {
34    icon: <SlackIcon className="size-8" />,
35    name: "Slack",
36    description: "Communicate instantly and keep teams aligned in real time.",
37  },
38  {
39    icon: <GithubIcon className="size-8" />,
40    name: "GitHub",
41    description: "Track code changes and collaborate on pull requests.",
42  },
43  {
44    icon: <SupabaseIcon className="size-8" />,
45    name: "Supabase",
46    description: "Connect auth, database, and storage in minutes.",
47  },
48  {
49    icon: <ClaudeIcon className="size-8" />,
50    name: "Claude",
51    description: "Add AI capabilities powered by Anthropic out of the box.",
52  },
53  {
54    icon: <PostHogIcon className="size-8" />,
55    name: "PostHog",
56    description: "Track analytics and understand your user behavior.",
57  },
58];
59 
60const Feature09 = ({
61  label = "Integrations",
62  title = "Works with your stack",
63  description = "Pre-built blocks that plug into the tools your team already relies on — no configuration required.",
64  link = { text: "View all integrations", url: "#" },
65  integrations = defaultIntegrations,
66  className,
67}: Feature09Props) => (
68  <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
69    <div className="flex flex-col items-center gap-4 text-center">
70      <p className="text-sm font-semibold tracking-widest text-muted-foreground uppercase">
71        {label}
72      </p>
73      <h2 className="max-w-2xl text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl">
74        {title}
75      </h2>
76      <p className="text-muted-foreground md:text-lg">{description}</p>
77      {link && (
78        <a
79          href={link.url}
80          className="flex items-center gap-1 text-sm font-medium text-primary hover:underline"
81        >
82          {link.text}
83          <ArrowUpRight className="size-3.5" />
84        </a>
85      )}
86    </div>
87 
88// … truncated