70 lines
2.8 KiB
TypeScript
70 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { PageContainer } from "@/components/shared/PageContainer";
|
|
import { SectionContainer } from "@/components/shared/SectionContainer";
|
|
import { SectionHeading } from "@/components/shared/SectionHeading";
|
|
import { tenextButton as TenextButton } from "@/components/shared/Button";
|
|
import { practiceTeams } from "@/data/site-content";
|
|
|
|
export function TeamSection() {
|
|
return (
|
|
<SectionContainer id="teams" paddingY="lg" className="scroll-mt-[120px]">
|
|
<PageContainer>
|
|
<div className="columns-1 gap-6 sm:columns-2 lg:columns-4">
|
|
<div className="mb-6 flex break-inside-avoid flex-col">
|
|
<SectionHeading
|
|
tag="our teams"
|
|
title="Specialist teams behind every engagement"
|
|
titleClassName="text-tenext-dark"
|
|
/>
|
|
<p className="mt-[24px] text-[16px] leading-[1.8] text-tenext-text-muted">
|
|
Engagements are staffed from practices that work together —
|
|
engineering, cloud, data, mobility, and commerce — so the people
|
|
who design a system are the ones who build and support it.
|
|
</p>
|
|
<TenextButton
|
|
href="/careers"
|
|
variant="simple"
|
|
className="mt-[25px] text-[15px] font-medium text-tenext-dark"
|
|
showArrow={true}
|
|
>
|
|
See open roles
|
|
</TenextButton>
|
|
</div>
|
|
|
|
{practiceTeams.map((team, i) => (
|
|
<div
|
|
key={`${team.name}-${i}`}
|
|
className="group relative mb-6 break-inside-avoid overflow-hidden rounded-[25px] bg-tenext-card-dark"
|
|
>
|
|
<div className="relative aspect-[3/4] w-full">
|
|
<img
|
|
src={team.image}
|
|
alt=""
|
|
loading="lazy"
|
|
decoding="async"
|
|
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
|
|
onError={(e) => {
|
|
(e.target as HTMLImageElement).src =
|
|
"/images/tenext/home-9-img.png";
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80" />
|
|
</div>
|
|
<div className="absolute bottom-0 left-0 w-full p-6 text-white transition-transform duration-300 group-hover:-translate-y-2">
|
|
<h4
|
|
className="text-[20px] font-bold"
|
|
style={{ fontFamily: "var(--font-dm-sans)" }}
|
|
>
|
|
{team.name}
|
|
</h4>
|
|
<p className="text-[14px] text-tenext-teal">/ {team.focus} /</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</PageContainer>
|
|
</SectionContainer>
|
|
);
|
|
}
|