116 lines
5.6 KiB
TypeScript
116 lines
5.6 KiB
TypeScript
import Image from "next/image";
|
|
import { CardHeading, IconButton } from "@/components/shared/CardShared";
|
|
import { ChartIcon } from "@/components/shared/icons/ChartIcon";
|
|
import { RevealOnView } from "@/components/shared/RevealOnView";
|
|
import { valueProps } from "@/data/site-content";
|
|
|
|
export function CardsGrid() {
|
|
return (
|
|
<section className="px-[20px] pb-[20px]">
|
|
<div className="grid grid-cols-1 gap-[20px] md:grid-cols-2 xl:grid-cols-[1fr_1fr_0.73fr]">
|
|
{/* Card 1 */}
|
|
<RevealOnView delay={0}>
|
|
<div className="tenext-card group relative flex h-full flex-col justify-between overflow-hidden rounded-[25px] bg-tenext-card-purple p-[40px_35px_45px_35px] lg:p-[50px_45px_50px_45px]">
|
|
<Image
|
|
src="/images/tenext/assistant-artificial-intelligence-min.png"
|
|
alt=""
|
|
className="pointer-events-none absolute right-[-10px] top-[-10px] h-auto w-[150px] object-contain object-right-top transition-transform duration-500 group-hover:scale-105 lg:w-[190px]"
|
|
width={220}
|
|
height={274}
|
|
/>
|
|
|
|
<div className="relative z-10 flex gap-[6px]">
|
|
<span className="rounded-[15px] border border-white px-[20px] py-[5px] text-[12px] text-white transition-colors hover:border-tenext-teal hover:text-tenext-teal">
|
|
Engineering
|
|
</span>
|
|
<span className="rounded-[15px] border border-white px-[20px] py-[5px] text-[12px] text-white transition-colors hover:border-tenext-teal hover:text-tenext-teal">
|
|
Cloud
|
|
</span>
|
|
</div>
|
|
|
|
<div className="relative z-10 mt-[66px] max-w-[460px] lg:mt-[110px]">
|
|
<CardHeading
|
|
title="Build and modernize digital products with full-stack engineering expertise"
|
|
titleClassName="text-white"
|
|
wrapperClassName="mb-0"
|
|
/>
|
|
|
|
<p className="mt-[24px] max-w-[420px] text-[16px] leading-[1.7] text-white/80">
|
|
Architecture, development, and modernization of enterprise
|
|
applications — engineered to scale with your business.
|
|
</p>
|
|
</div>
|
|
|
|
<IconButton />
|
|
</div>
|
|
</RevealOnView>
|
|
|
|
{/* Card 2 */}
|
|
<RevealOnView delay={110}>
|
|
<div className="tenext-card group relative flex h-full flex-col justify-between overflow-hidden rounded-[25px] bg-tenext-card-purple-2 p-[40px_35px_45px_35px] lg:p-[50px_45px_50px_45px]">
|
|
<div className="absolute inset-0 bg-tenext-card-purple-2" />
|
|
<div className="absolute inset-0 bg-[url('/images/tenext/c0eb2845-min.png')] bg-[length:60%] bg-right-bottom bg-no-repeat transition-transform duration-500 group-hover:scale-105" />
|
|
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[#454f88]/16" />
|
|
|
|
<div className="relative z-10 mb-[54px] max-w-[515px]">
|
|
<div className="mb-[24px] inline-flex h-[38px] w-[38px] items-center justify-center">
|
|
<ChartIcon className="h-full w-full text-white" />
|
|
</div>
|
|
|
|
<CardHeading
|
|
title="Unified cloud and data platforms for smarter enterprise decisions."
|
|
titleClassName="text-white"
|
|
wrapperClassName="mb-[18px]"
|
|
/>
|
|
|
|
<p className="max-w-[448px] text-[16px] leading-[1.85] text-white">
|
|
Consolidate data across systems with secure, scalable platforms
|
|
that turn day-to-day operations into actionable insight.
|
|
</p>
|
|
</div>
|
|
|
|
<IconButton />
|
|
</div>
|
|
</RevealOnView>
|
|
|
|
{/* Card 3 (spans 2 columns) */}
|
|
<RevealOnView className="md:col-span-2 xl:col-span-1" delay={220}>
|
|
<div className="flex h-full flex-col gap-[20px]">
|
|
{/* Card 3 - Top half */}
|
|
<div className="tenext-card relative flex min-h-[176px] flex-col justify-center overflow-hidden rounded-[25px] bg-tenext-card-lavender p-[40px] lg:p-[45px_50px]">
|
|
<div className="relative z-10 flex flex-col items-start">
|
|
<h4 className="font-[var(--font-sora)] text-[24px] font-bold leading-[1.25] text-white">
|
|
{valueProps.reliability.title}
|
|
</h4>
|
|
<p className="mt-[10px] text-[15px] leading-[1.6] text-white/85">
|
|
{valueProps.reliability.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card 3 - Bottom half */}
|
|
<div className="tenext-card group relative flex flex-col justify-between overflow-hidden rounded-[25px] bg-tenext-card-dark p-[40px_35px_45px_35px] lg:p-[50px_45px_45px_45px]">
|
|
<div className="absolute inset-0 bg-[url('/images/tenext/Layer_2-min.jpg')] bg-cover bg-center transition-all duration-500 group-hover:scale-105" />
|
|
|
|
<div className="relative z-10 mb-[26px]">
|
|
<CardHeading
|
|
title="Apply AI and data science to automate and augment your operations"
|
|
titleClassName="text-white max-w-[80%]"
|
|
wrapperClassName="mb-0"
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative z-10">
|
|
<p className="max-w-[360px] text-[16px] leading-[1.7] text-white/80">
|
|
Data platforms and applied AI that turn enterprise data into
|
|
decision-ready insight.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</RevealOnView>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|