tenext redesign

components/sections/about/TeamSection.tsx

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