Components
Loading preview...
Here is Integrations Components
npx shadcn@latest add https://21st.dev/r/meschacirung/integrations-componentimport { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import React from 'react';
// --- Начало: SVG-компоненты, заменяющие импорт ---
const Gemini = (props: React.SVGProps<SVGSVGElement>) => (
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
<path d="M12.0001 9.1716L14.8285 6.34313L17.6569 9.1716L14.8285 12.0001L12.0001 9.1716Z" />
<path d="M9.17157 12.0001L6.34311 14.8285L9.17157 17.6569L12.0001 14.8285L9.17157 12.0001Z" />
<path fillRule="evenodd" clipRule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z" />
</svg>
);
const Replit = (props: React.SVGProps<SVGSVGElement>) => (
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
<path d="M8.28,3.027,3.16,8.147v7.706l5.12,5.12h7.706l5.12-5.12V8.147L15.987,3.027ZM9.033,9.44h5.933v2.373H9.033Zm0,3.56h5.933v2.373H9.033Z" />
</svg>
);
const GooglePaLM = (props: React.SVGProps<SVGSVGElement>) => (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg" {...props}>
<path d="M12 2a10 10 0 0 0-4.32 19.14" />
<path d="M12 2a10 10 0 0 1 4.32 19.14" />
<path d="M12 2v8" />
<path d="M17.68 6.86a6 6 0 0 1-11.36 0" />
<path d="M4 12H2" />
<path d="M22 12h-2" />
<path d="M12 12v10" />
</svg>
);
// Замена для иконки "Plus" из lucide-react
const Plus = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
);
// --- Конец SVG-компонентов ---
export default function IntegrationsSection() {
return (
<section>
<div className="bg-muted dark:bg-background py-24 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="mx-auto max-w-md px-6 [mask-image:radial-gradient(ellipse_100%_100%_at_50%_0%,#000_70%,transparent_100%)]">
<div className="bg-background dark:bg-muted/50 rounded-xl border px-6 pb-12 pt-3 shadow-xl">
<Integration
icon={<Gemini className="size-6" />}
name="Gemini"
description="The AI model that powers Google's search engine."
/>
<Integration
icon={<Replit className="size-6" />}
name="Replit"
description="An online IDE for coding in your browser."
/>
<Integration
icon={<GooglePaLM className="size-6" />}
name="Google PaLM"
description="Google's next-generation large language model."
/>
</div>
</div>
<div className="mx-auto mt-6 max-w-lg space-y-6 text-center">
<h2 className="text-balance text-3xl font-semibold md:text-4xl lg:text-5xl">Integrate with your favorite LLMs</h2>
<p className="text-muted-foreground">Connect seamlessly with popular platforms and services to enhance your workflow.</p>
<Button
variant="outline"
size="sm"
asChild>
<Link href="#">Get Started</Link>
</Button>
</div>
</div>
</div>
</section>
)
}
const Integration = ({ icon, name, description }: { icon: React.ReactNode; name: string; description: string }) => {
return (
<div className="grid grid-cols-[auto_1fr_auto] items-center gap-3 border-b border-dashed py-3 last:border-b-0">
<div className="bg-muted border-foreground/5 flex size-12 items-center justify-center rounded-lg border">{icon}</div>
<div className="space-y-0.5">
<h3 className="text-sm font-medium">{name}</h3>
<p className="text-muted-foreground line-clamp-1 text-sm">{description}</p>
</div>
<Button
variant="outline"
size="icon"
aria-label="Add integration">
<Plus className="size-4" />
</Button>
</div>
)
}