67 lines
3.3 KiB
TypeScript
67 lines
3.3 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 { tenextButton as TenextButton } from "@/components/shared/Button";
|
|
import { Icon } from "@/components/shared/Icon";
|
|
import { practiceTeamCards } from "@/data/about";
|
|
|
|
/**
|
|
* AboutPracticeTeams — the disciplines that staff an engagement.
|
|
* Each card has a unique gradient header and icon (no repeated artwork,
|
|
* no invented individuals).
|
|
*/
|
|
export function AboutPracticeTeams() {
|
|
return (
|
|
<SectionContainer paddingY="lg" className="bg-white px-[20px]">
|
|
<PageContainer>
|
|
<div className="mb-[50px] flex flex-col gap-[24px] md:flex-row md:items-end md:justify-between">
|
|
<SectionHeading
|
|
tag="practice teams"
|
|
title="Specialist teams behind every engagement"
|
|
description="Engagements are staffed from practices that work together — so the people who design a system are the ones who build and support it."
|
|
titleClassName="text-tenext-dark max-w-[640px]"
|
|
descriptionClassName="max-w-[560px]"
|
|
/>
|
|
<TenextButton
|
|
href="/careers"
|
|
variant="simple"
|
|
className="shrink-0 text-[15px] font-semibold text-tenext-dark"
|
|
showArrow={true}
|
|
>
|
|
See open roles
|
|
</TenextButton>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-[20px] sm:grid-cols-2 lg:grid-cols-3">
|
|
{practiceTeamCards.map((team, index) => (
|
|
<RevealOnView key={team.name} delay={index * 80}>
|
|
<div className="group flex h-full flex-col overflow-hidden rounded-[25px] border border-tenext-card-border transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_22px_55px_rgba(31,31,31,0.12)]">
|
|
{/* Unique gradient header */}
|
|
<div className={`relative h-[130px] bg-gradient-to-br ${team.gradient}`}>
|
|
<div className="absolute inset-0 opacity-30 [background-image:radial-gradient(rgba(255,255,255,0.5)_1px,transparent_1px)] [background-size:16px_16px]" />
|
|
<span className="absolute bottom-[-26px] left-[30px] flex h-[54px] w-[54px] items-center justify-center rounded-[16px] border border-white/20 bg-tenext-dark text-tenext-teal transition-transform duration-500 group-hover:-translate-y-1">
|
|
<Icon name={team.icon} className="h-[26px] w-[26px]" />
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-1 flex-col p-[30px] pt-[40px]">
|
|
<h3 className="font-[var(--font-dm-sans)] text-[20px] font-bold text-tenext-dark">
|
|
{team.name}
|
|
</h3>
|
|
<p className="mt-[4px] text-[14px] font-semibold text-tenext-teal">
|
|
/ {team.focus} /
|
|
</p>
|
|
<p className="mt-[14px] text-[15px] leading-[1.7] text-tenext-text-muted">
|
|
{team.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</RevealOnView>
|
|
))}
|
|
</div>
|
|
</PageContainer>
|
|
</SectionContainer>
|
|
);
|
|
}
|