74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
|
|
import { TrackedCtaLink } from "@/components/marketing/MarketingAnalytics";
|
|
import { Card } from "@/components/ui/Card";
|
|
|
|
type PageType = "commercial" | "use_case_hub" | "use_case";
|
|
|
|
type GrowthLink = {
|
|
href: string;
|
|
title: string;
|
|
description: string;
|
|
ctaLabel: string;
|
|
};
|
|
|
|
export function GrowthLinksSection({
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
links,
|
|
pageType,
|
|
cluster,
|
|
useCase,
|
|
}: {
|
|
eyebrow: string;
|
|
title: string;
|
|
description: string;
|
|
links: GrowthLink[];
|
|
pageType: PageType;
|
|
cluster: string;
|
|
useCase?: string;
|
|
}) {
|
|
return (
|
|
<section className="py-20 bg-slate-50">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
|
<div className="max-w-3xl mb-12">
|
|
<div className="text-sm font-semibold uppercase tracking-[0.22em] text-blue-700">
|
|
{eyebrow}
|
|
</div>
|
|
<h2 className="mt-3 text-4xl font-bold text-slate-900">{title}</h2>
|
|
<p className="mt-4 text-xl text-slate-600">{description}</p>
|
|
</div>
|
|
|
|
<div className="grid gap-6 lg:grid-cols-4">
|
|
{links.map((link) => (
|
|
<TrackedCtaLink
|
|
key={link.href}
|
|
href={link.href}
|
|
ctaLabel={link.ctaLabel}
|
|
ctaLocation="related_workflows"
|
|
pageType={pageType}
|
|
cluster={cluster}
|
|
useCase={useCase}
|
|
className="group block h-full"
|
|
>
|
|
<Card className="h-full rounded-3xl border-slate-200 bg-white p-7 shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg">
|
|
<div className="text-lg font-semibold text-slate-900">
|
|
{link.title}
|
|
</div>
|
|
<p className="mt-3 text-base leading-7 text-slate-600">
|
|
{link.description}
|
|
</p>
|
|
<div className="mt-6 flex items-center gap-2 text-sm font-semibold text-blue-700">
|
|
<span>Open workflow</span>
|
|
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
|
</div>
|
|
</Card>
|
|
</TrackedCtaLink>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|