70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
import { SectionHeading } from "@/components/shared/SectionHeading";
|
|
import { ArrowLeft, ArrowRight } from "lucide-react";
|
|
|
|
export function HowItWorksSection() {
|
|
const steps = [
|
|
{
|
|
number: "01",
|
|
title: "Discover & Diagnose",
|
|
description:
|
|
"We assess your systems, processes, and goals to identify where technology can deliver the highest business value.",
|
|
},
|
|
{
|
|
number: "02",
|
|
title: "Design",
|
|
description:
|
|
"We architect a focused solution that fits your existing landscape, balancing cost, scale, and time to value.",
|
|
},
|
|
{
|
|
number: "03",
|
|
title: "Build & Integrate",
|
|
description:
|
|
"Our engineering teams build, integrate, and test — connecting new capabilities to the systems you already run.",
|
|
},
|
|
{
|
|
number: "04",
|
|
title: "Deploy & Optimize",
|
|
description:
|
|
"We deploy with confidence and keep improving through monitoring, support, and continuous optimization.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="bg-white px-[20px] py-[60px] md:py-[100px]">
|
|
<div className="mx-auto max-w-[1260px]">
|
|
<div className="flex flex-col md:flex-row md:items-end justify-between gap-[30px] mb-[60px]">
|
|
<SectionHeading
|
|
tag="how it works"
|
|
title="A transparent path from idea to measurable impact"
|
|
titleClassName="max-w-[700px] text-tenext-dark"
|
|
/>
|
|
<div className="flex gap-[15px]">
|
|
<button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-tenext-card-border text-tenext-dark transition-colors hover:bg-tenext-card-border">
|
|
<ArrowLeft size={20} />
|
|
</button>
|
|
<button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-tenext-card-border text-tenext-dark transition-colors hover:bg-tenext-card-border">
|
|
<ArrowRight size={20} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
{steps.map((step, index) => (
|
|
<div key={index} className="flex flex-col">
|
|
<div className="flex flex-wrap items-center gap-[15px] rounded-[15px] bg-gradient-to-r from-tenext-blue to-tenext-purple-start px-[25px] py-[14px] text-white">
|
|
<span className="text-[14px] font-bold">{step.number}</span>
|
|
<span className="text-[18px] font-bold font-[var(--font-sora)]">
|
|
{step.title}
|
|
</span>
|
|
</div>
|
|
<p className="mt-[20px] mb-[25px] max-w-[720px] text-[16px] leading-[1.6] text-tenext-text-muted">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|