tenext redesign

components/sections/services/DeliveryPrinciplesSection.tsx

@@ -0,0 +1,50 @@
+import { PageContainer } from "@/components/shared/PageContainer";
+import { SectionContainer } from "@/components/shared/SectionContainer";
+import { SectionHeading } from "@/components/shared/SectionHeading";
+import { deliveryPrinciples } from "@/data/site-content";
+
+/**
+ * DeliveryPrinciplesSection — masonry grid of the commitments that keep
+ * delivery predictable.
+ *
+ * Shared by: Home and Services.
+ *
+ * This slot held stock client testimonials in the original build. Tenext
+ * does not publish named client quotes, so it presents how the company
+ * works instead. If real, attributable testimonials become available,
+ * this section is the place to reinstate them.
+ */
+export function DeliveryPrinciplesSection() {
+  return (
+    <SectionContainer paddingY="lg" className="bg-tenext-surface-muted">
+      <PageContainer>
+        <div className="mb-12 max-w-[650px]">
+          <SectionHeading
+            tag="how we work"
+            title="The principles that keep delivery predictable"
+            titleClassName="text-tenext-dark"
+          />
+        </div>
+
+        <div className="columns-1 gap-6 sm:columns-2 lg:columns-4">
+          {deliveryPrinciples.map((principle) => (
+            <div
+              key={principle.id}
+              className="mb-6 break-inside-avoid rounded-[20px] bg-white p-8"
+            >
+              <h5
+                className="mb-4 text-[18px] font-bold text-tenext-dark"
+                style={{ fontFamily: "var(--font-dm-sans)" }}
+              >
+                {principle.title}
+              </h5>
+              <p className="text-[15px] leading-[1.7] text-tenext-text-muted">
+                {principle.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </PageContainer>
+    </SectionContainer>
+  );
+}