103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
import {
|
|
Gemini,
|
|
Replit,
|
|
MagicUI,
|
|
VSCodium,
|
|
MediaWiki,
|
|
GooglePaLM,
|
|
} from '@/components/tailark/logos';
|
|
import { Logo } from '@/components/layout/logo';
|
|
import { cn } from '@/lib/utils';
|
|
import { Button } from '@/components/ui/button';
|
|
import Link from 'next/link';
|
|
|
|
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="dark:bg-muted/50 relative mx-auto w-fit">
|
|
<div
|
|
role="presentation"
|
|
className="bg-radial to-muted dark:to-background absolute inset-0 z-10 from-transparent to-75%"
|
|
></div>
|
|
<div className="mx-auto mb-2 flex w-fit justify-center gap-2">
|
|
<IntegrationCard>
|
|
<Gemini />
|
|
</IntegrationCard>
|
|
<IntegrationCard>
|
|
<Replit />
|
|
</IntegrationCard>
|
|
</div>
|
|
<div className="mx-auto my-2 flex w-fit justify-center gap-2">
|
|
<IntegrationCard>
|
|
<MagicUI />
|
|
</IntegrationCard>
|
|
<IntegrationCard
|
|
borderClassName="shadow-black-950/10 shadow-xl border-black/25 dark:border-white/25"
|
|
className="dark:bg-white/10"
|
|
>
|
|
<Logo />
|
|
</IntegrationCard>
|
|
<IntegrationCard>
|
|
<VSCodium />
|
|
</IntegrationCard>
|
|
</div>
|
|
|
|
<div className="mx-auto flex w-fit justify-center gap-2">
|
|
<IntegrationCard>
|
|
<MediaWiki />
|
|
</IntegrationCard>
|
|
|
|
<IntegrationCard>
|
|
<GooglePaLM />
|
|
</IntegrationCard>
|
|
</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">
|
|
Integrate with your favorite tools
|
|
</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 IntegrationCard = ({
|
|
children,
|
|
className,
|
|
borderClassName,
|
|
}: {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
borderClassName?: string;
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'bg-background relative flex size-20 rounded-xl dark:bg-transparent',
|
|
className
|
|
)}
|
|
>
|
|
<div
|
|
role="presentation"
|
|
className={cn(
|
|
'absolute inset-0 rounded-xl border border-black/20 dark:border-white/25',
|
|
borderClassName
|
|
)}
|
|
/>
|
|
<div className="relative z-20 m-auto size-fit *:size-8">{children}</div>
|
|
</div>
|
|
);
|
|
};
|