tenext redesign

components/sections/about/DeliveryModel.tsx

@@ -0,0 +1,48 @@
+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 { Icon } from "@/components/shared/Icon";
+import { deliverySteps } from "@/data/about";
+
+/** DeliveryModel — connected timeline: Discover → … → Support. */
+export function DeliveryModel() {
+  return (
+    <SectionContainer paddingY="lg" className="bg-tenext-dark px-[20px]">
+      <PageContainer>
+        <SectionHeading
+          tag="delivery model"
+          title="A transparent path from idea to lasting impact"
+          description="Every engagement moves through the same disciplined flow, so progress and cost stay visible at each step."
+          titleClassName="text-white max-w-[720px]"
+          descriptionClassName="max-w-[620px] text-tenext-text-muted"
+          className="mb-[60px]"
+        />
+
+        <div className="relative grid grid-cols-1 gap-[20px] sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+          {/* Connecting line (desktop) */}
+          <div className="pointer-events-none absolute left-0 right-0 top-[36px] hidden h-px bg-gradient-to-r from-tenext-teal/10 via-tenext-teal/40 to-tenext-teal/10 xl:block" />
+
+          {deliverySteps.map((step, index) => (
+            <RevealOnView key={step.title} delay={index * 90} className="relative">
+              <div className="flex flex-col items-start gap-[16px]">
+                <div className="relative z-10 flex h-[72px] w-[72px] items-center justify-center rounded-[20px] border border-white/10 bg-tenext-dark text-tenext-teal">
+                  <Icon name={step.icon} className="h-[30px] w-[30px]" />
+                  <span className="absolute -right-2 -top-2 flex h-[26px] w-[26px] items-center justify-center rounded-full bg-tenext-teal text-[12px] font-bold text-tenext-dark">
+                    {index + 1}
+                  </span>
+                </div>
+                <h3 className="font-[var(--font-sora)] text-[18px] font-bold text-white">
+                  {step.title}
+                </h3>
+                <p className="text-[14px] leading-[1.65] text-tenext-text-muted">
+                  {step.description}
+                </p>
+              </div>
+            </RevealOnView>
+          ))}
+        </div>
+      </PageContainer>
+    </SectionContainer>
+  );
+}