Components
Loading preview...
Here is Integrations Components
npx shadcn@latest add https://21st.dev/r/meschacirung/integrations-component'use client';
import React from 'react';
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
// --- Lucide-React Icons (for Open Source Logos) ---
// In a real project, you would install this: `npm install lucide-react`
import {
GitMerge,
Container,
CodeXml,
Database,
Bot,
PenTool,
} from 'lucide-react';
// --- Utility Function (from shadcn/ui) ---
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
// --- Open Source Logo Components ---
const VSCodiumLogo = () => <CodeXml className="size-9" />;
const GitLogo = () => <GitMerge className="size-9" />;
const DockerLogo = () => <Container className="size-9" />;
const PostgresLogo = () => <Database className="size-9" />;
const OllamaLogo = () => <Bot className="size-9" />; // Represents local LLMs
const PenpotLogo = () => <PenTool className="size-9" />; // Open source design tool
// --- Placeholder for Next.js Link component ---
// In a real Next.js app, you would use `import Link from 'next/link';`
const Link = ({ href, children, ...props }: React.ComponentProps<'a'>) => (
<a href={href} {...props}>
{children}
</a>
);
// --- Placeholder for shadcn/ui Button component ---
// In a real project, you would have this component defined in your UI library.
const Button = React.forwardRef<
HTMLButtonElement,
React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean; variant?: string; size?: string }
>(({ className, asChild = false, variant, size, ...props }, ref) => {
const Comp = asChild ? 'div' : 'button';
// Basic styling to mimic the original look
const baseClasses = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
const variantClasses = "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground";
const sizeClasses = "h-9 px-3 py-2";
return (
<Comp
className={cn(baseClasses, variantClasses, sizeClasses, className)}
ref={ref as React.Ref<any>}
{...props}
/>
);
});
Button.displayName = "Button";
// --- Integration Card Sub-Component ---
const Integration = ({ icon, name, description }: { icon: React.ReactNode; name: string; description: string }) => {
return (
<div className="hover:bg-muted dark:hover:bg-muted/50 space-y-4 rounded-lg border p-4 transition-colors">
<div className="flex size-fit items-center justify-center">{icon}</div>
<div className="space-y-1">
<h3 className="text-sm font-medium">{name}</h3>
<p className="text-muted-foreground line-clamp-2 text-sm">{description}</p>
</div>
</div>
)
}
// --- Main Exported Component ---
export default function IntegrationsSection() {
return (
<section>
<div className="bg-muted dark:bg-background py-24 md:py-32">
<div className="mx-auto flex flex-col px-6 md:grid md:max-w-5xl md:grid-cols-2 md:gap-12">
<div className="order-last mt-12 flex flex-col gap-12 md:order-first md:mt-0">
<div className="space-y-6">
<h2 className="text-balance text-3xl font-semibold md:text-4xl lg:text-5xl">Integrate with your favorite tools</h2>
<p className="text-muted-foreground">Connect seamlessly with popular open-source platforms and services to enhance your workflow.</p>
<Button
variant="outline"
size="sm"
asChild>
<Link href="#">Get Started</Link>
</Button>
</div>
<div className="mt-auto grid grid-cols-[auto_1fr] items-center gap-4">
<div className="bg-background flex aspect-square size-16 items-center justify-center rounded-lg border">
<GitLogo />
</div>
<blockquote className="text-sm">
<p className="italic">"A free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency."</p>
<div className="mt-2 flex gap-2">
<cite className="font-semibold not-italic">Git</cite>
<p className="text-muted-foreground">The official website</p>
</div>
</blockquote>
</div>
</div>
<div className="-mx-6 px-6 [mask-image:radial-gradient(ellipse_100%_100%_at_50%_0%,#000_70%,transparent_100%)] sm:mx-auto sm:max-w-md md:-mx-6 md:ml-auto md:mr-0">
<div className="bg-background dark:bg-muted/50 rounded-2xl border p-3 shadow-lg md:pb-12">
<div className="grid grid-cols-2 gap-2">
<Integration
icon={<OllamaLogo />}
name="Ollama"
description="Run large language models, like Llama 2, locally."
/>
<Integration
icon={<DockerLogo />}
name="Docker"
description="An open platform for developing, shipping, and running applications."
/>
<Integration
icon={<PostgresLogo />}
name="PostgreSQL"
description="A powerful, open source object-relational database system."
/>
<Integration
icon={<PenpotLogo />}
name="Penpot"
description="The open-source design and prototyping platform for product teams."
/>
<Integration
icon={<VSCodiumLogo />}
name="VSCodium"
description="A community-driven, freely-licensed binary distribution of VS Code."
/>
<Integration
icon={<GitLogo />}
name="Git"
description="A free and open source distributed version control system."
/>
</div>
</div>
</div>
</div>
</div>
</section>
)
}