wehub-resource-sync
60 lines
2.3 KiB
TypeScript
60 lines
2.3 KiB
TypeScript
import Link from 'next/link';
|
|
import { Play, Code2, Blocks } from 'lucide-react';
|
|
import { DocsHeroV2Chat } from './docs-hero-v2-chat';
|
|
|
|
const CHIPS = [
|
|
{ label: 'Quickstart', href: '/docs/quickstart', icon: Play },
|
|
{ label: 'API reference', href: '/reference', icon: Code2 },
|
|
{ label: 'Toolkits', href: '/toolkits', icon: Blocks },
|
|
];
|
|
|
|
/**
|
|
* Welcome-page hero — v2.
|
|
*
|
|
* Two-column layout: copy + entry points on the left, mock chat / agent
|
|
* loop on the right. Left column mirrors the dev-platform pattern
|
|
* popularized by Claude / OpenAI docs: small eyebrow, large headline,
|
|
* sub paragraph, search input, then a row of quick-link chips.
|
|
*/
|
|
export function DocsHeroV2() {
|
|
return (
|
|
<section className="relative grid grid-cols-1 items-start gap-8 py-4 md:py-6 lg:h-[500px] lg:grid-cols-2 lg:gap-12">
|
|
{/* Left — copy + entry points */}
|
|
<div className="flex flex-col gap-5">
|
|
<h1 className="text-3xl font-medium leading-[1.05] tracking-[-0.025em] text-fd-foreground md:text-4xl lg:text-[40px]">
|
|
Start building with Composio.
|
|
</h1>
|
|
|
|
<p className="max-w-[480px] text-[15px] leading-[1.55] text-fd-foreground/70 md:text-base">
|
|
Give your AI agent 1000+ pre-authenticated toolkits, per-user
|
|
sessions, triggers, and a workbench.
|
|
</p>
|
|
|
|
{/* Quick-link chips — single column */}
|
|
<div className="flex max-w-[360px] flex-col gap-2">
|
|
{CHIPS.map(({ label, href, icon: Icon }) => (
|
|
<Link
|
|
key={href}
|
|
className="flex items-center gap-2.5 rounded-md border border-fd-border bg-fd-card px-4 py-3 text-[15px] text-fd-foreground no-underline transition-colors hover:border-fd-foreground/15 hover:bg-fd-accent/40"
|
|
href={href}
|
|
>
|
|
<Icon
|
|
aria-hidden="true"
|
|
className="size-4 text-[var(--composio-brand)]"
|
|
/>
|
|
{label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right — mock chat with floating "active tool" card.
|
|
Hidden below lg: the layered animation is fiddly on small
|
|
screens and the left column carries the welcome on its own. */}
|
|
<div className="relative hidden lg:block lg:h-full">
|
|
<DocsHeroV2Chat />
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|