49 lines
2.4 KiB
TypeScript
49 lines
2.4 KiB
TypeScript
import { SectionContainer } from "@/components/shared/SectionContainer";
|
|
import { PageContainer } from "@/components/shared/PageContainer";
|
|
import { SectionHeading } from "@/components/shared/SectionHeading";
|
|
import { RevealOnView } from "@/components/shared/RevealOnView";
|
|
import { Icon } from "@/components/shared/Icon";
|
|
import { deliverySteps } from "@/data/about";
|
|
|
|
/** DeliveryModel — connected timeline: Discover → … → Support. */
|
|
export function DeliveryModel() {
|
|
return (
|
|
<SectionContainer paddingY="lg" className="bg-tenext-dark px-[20px]">
|
|
<PageContainer>
|
|
<SectionHeading
|
|
tag="delivery model"
|
|
title="A transparent path from idea to lasting impact"
|
|
description="Every engagement moves through the same disciplined flow, so progress and cost stay visible at each step."
|
|
titleClassName="text-white max-w-[720px]"
|
|
descriptionClassName="max-w-[620px] text-tenext-text-muted"
|
|
className="mb-[60px]"
|
|
/>
|
|
|
|
<div className="relative grid grid-cols-1 gap-[20px] sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
|
|
{/* Connecting line (desktop) */}
|
|
<div className="pointer-events-none absolute left-0 right-0 top-[36px] hidden h-px bg-gradient-to-r from-tenext-teal/10 via-tenext-teal/40 to-tenext-teal/10 xl:block" />
|
|
|
|
{deliverySteps.map((step, index) => (
|
|
<RevealOnView key={step.title} delay={index * 90} className="relative">
|
|
<div className="flex flex-col items-start gap-[16px]">
|
|
<div className="relative z-10 flex h-[72px] w-[72px] items-center justify-center rounded-[20px] border border-white/10 bg-tenext-dark text-tenext-teal">
|
|
<Icon name={step.icon} className="h-[30px] w-[30px]" />
|
|
<span className="absolute -right-2 -top-2 flex h-[26px] w-[26px] items-center justify-center rounded-full bg-tenext-teal text-[12px] font-bold text-tenext-dark">
|
|
{index + 1}
|
|
</span>
|
|
</div>
|
|
<h3 className="font-[var(--font-sora)] text-[18px] font-bold text-white">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-[14px] leading-[1.65] text-tenext-text-muted">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</RevealOnView>
|
|
))}
|
|
</div>
|
|
</PageContainer>
|
|
</SectionContainer>
|
|
);
|
|
}
|