51 lines
2.7 KiB
TypeScript
51 lines
2.7 KiB
TypeScript
import { RevealOnView } from "@/components/shared/RevealOnView";
|
|
|
|
export function BenefitsGridSection() {
|
|
return (
|
|
<section className="relative overflow-hidden bg-white px-[20px] pb-[60px] md:pb-[100px]">
|
|
<div className="mx-auto max-w-[1260px]">
|
|
<div className="grid grid-cols-1 gap-[30px] md:grid-cols-3">
|
|
{/* Card 1 */}
|
|
<RevealOnView className="flex flex-col gap-[20px] rounded-[25px] border border-tenext-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
|
|
<h4 className="text-[22px] font-bold leading-[1.3] text-tenext-dark font-[var(--font-sora)]">
|
|
Predictable outcomes from your IT investments
|
|
</h4>
|
|
<ul className="flex flex-col gap-[15px] mt-[10px]">
|
|
<li className="flex items-start gap-[10px] text-[16px] text-tenext-text-muted">
|
|
<span className="mt-[5px] h-[6px] w-[6px] rounded-full bg-tenext-accent-teal shrink-0"></span>
|
|
Lowest total cost of ownership
|
|
</li>
|
|
<li className="flex items-start gap-[10px] text-[16px] text-tenext-text-muted">
|
|
<span className="mt-[5px] h-[6px] w-[6px] rounded-full bg-tenext-accent-teal shrink-0"></span>
|
|
Accelerated time to value
|
|
</li>
|
|
</ul>
|
|
</RevealOnView>
|
|
|
|
{/* Card 2 */}
|
|
<RevealOnView delay={110} className="flex flex-col gap-[20px] rounded-[25px] border border-tenext-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
|
|
<h4 className="text-[22px] font-bold leading-[1.3] text-tenext-dark font-[var(--font-sora)]">
|
|
Built to fit your existing business processes
|
|
</h4>
|
|
<p className="text-[16px] leading-[1.6] text-tenext-text-muted mt-[10px]">
|
|
Seamless integration with existing systems and platforms, on a
|
|
scalable and flexible architecture engineered for the long term.
|
|
</p>
|
|
</RevealOnView>
|
|
|
|
{/* Card 3 */}
|
|
<RevealOnView delay={220} className="flex flex-col gap-[20px] rounded-[25px] border border-tenext-card-border bg-[#F8F9FA] p-[40px] transition-transform duration-300 hover:-translate-y-2">
|
|
<h4 className="text-[22px] font-bold leading-[1.3] text-tenext-dark font-[var(--font-sora)]">
|
|
Security and governance built in
|
|
</h4>
|
|
<p className="text-[16px] leading-[1.6] text-tenext-text-muted mt-[10px]">
|
|
Access control, data governance, and compliance-ready handling are
|
|
designed in from the first sprint — not retrofitted later.
|
|
</p>
|
|
</RevealOnView>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|