tenext redesign

components/sections/about/AboutPracticeTeams.tsx

@@ -0,0 +1,66 @@
+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>
+  );
+}