tenext redesign

components/sections/services/EngagementModelsSection.tsx

@@ -0,0 +1,83 @@
+import { PageContainer } from "@/components/shared/PageContainer";
+import { SectionContainer } from "@/components/shared/SectionContainer";
+import { SectionHeading } from "@/components/shared/SectionHeading";
+import { engagementModels } from "@/data/site-content";
+
+/**
+ * EngagementModelsSection — the three ways enterprises work with Tenext.
+ *
+ * This slot held the template's SaaS pricing tiers. Tenext quotes
+ * commercial terms per engagement, so no prices are published; each card
+ * routes to the contact form instead.
+ */
+export function EngagementModelsSection() {
+  return (
+    <SectionContainer paddingY="lg">
+      <PageContainer>
+        <div className="mb-16 flex flex-col items-center justify-center text-center">
+          <SectionHeading
+            tag="engagement models"
+            title="Ways to work with us"
+            titleClassName="text-white max-w-[500px] text-center"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+          {engagementModels.map((model) => (
+            <div
+              key={model.name}
+              className="relative flex flex-col overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-dark p-10 transition-colors hover:border-tenext-teal"
+            >
+              <h3
+                className="mb-4 text-[24px] font-bold text-white"
+                style={{ fontFamily: "var(--font-dm-sans)" }}
+              >
+                {model.name}
+              </h3>
+              <p className="mb-8 text-[15px] leading-[1.7] text-tenext-text-muted">
+                {model.summary}
+              </p>
+
+              <ul className="mb-10 flex flex-col gap-4">
+                {model.includes.map((item) => (
+                  <li
+                    key={item}
+                    className="flex items-start gap-3 text-[15px] text-white"
+                  >
+                    <svg
+                      width="18"
+                      height="18"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      className="mt-[3px] shrink-0 text-tenext-teal"
+                      aria-hidden
+                    >
+                      <path
+                        d="M20 6L9 17l-5-5"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+
+              <div className="mt-auto">
+                <a
+                  href="/contacts"
+                  className="flex w-full items-center justify-center rounded-[12px] border border-tenext-card-border py-4 text-[16px] font-bold text-white transition-all hover:border-tenext-teal hover:text-tenext-teal"
+                  style={{ fontFamily: "var(--font-sora)" }}
+                >
+                  Talk to an expert
+                </a>
+              </div>
+            </div>
+          ))}
+        </div>
+      </PageContainer>
+    </SectionContainer>
+  );
+}