Files
tenext-next/components/sections/services/EngagementModelsSection.tsx
2026-08-03 14:42:01 +05:30

84 lines
3.1 KiB
TypeScript

import { PageContainer } from "@/components/shared/PageContainer";
import { SectionContainer } from "@/components/shared/SectionContainer";
import { SectionHeading } from "@/components/shared/SectionHeading";
import { engagementModels } from "@/data/site-content";
/**
* EngagementModelsSection — the three ways enterprises work with Tenext.
*
* This slot held the template's SaaS pricing tiers. Tenext quotes
* commercial terms per engagement, so no prices are published; each card
* routes to the contact form instead.
*/
export function EngagementModelsSection() {
return (
<SectionContainer paddingY="lg">
<PageContainer>
<div className="mb-16 flex flex-col items-center justify-center text-center">
<SectionHeading
tag="engagement models"
title="Ways to work with us"
titleClassName="text-white max-w-[500px] text-center"
/>
</div>
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
{engagementModels.map((model) => (
<div
key={model.name}
className="relative flex flex-col overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-dark p-10 transition-colors hover:border-tenext-teal"
>
<h3
className="mb-4 text-[24px] font-bold text-white"
style={{ fontFamily: "var(--font-dm-sans)" }}
>
{model.name}
</h3>
<p className="mb-8 text-[15px] leading-[1.7] text-tenext-text-muted">
{model.summary}
</p>
<ul className="mb-10 flex flex-col gap-4">
{model.includes.map((item) => (
<li
key={item}
className="flex items-start gap-3 text-[15px] text-white"
>
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
className="mt-[3px] shrink-0 text-tenext-teal"
aria-hidden
>
<path
d="M20 6L9 17l-5-5"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
{item}
</li>
))}
</ul>
<div className="mt-auto">
<a
href="/contacts"
className="flex w-full items-center justify-center rounded-[12px] border border-tenext-card-border py-4 text-[16px] font-bold text-white transition-all hover:border-tenext-teal hover:text-tenext-teal"
style={{ fontFamily: "var(--font-sora)" }}
>
Talk to an expert
</a>
</div>
</div>
))}
</div>
</PageContainer>
</SectionContainer>
);
}