tenext redesign

components/sections/services/ServiceFeaturesSection.tsx

@@ -0,0 +1,53 @@
+import { PageContainer } from "@/components/shared/PageContainer";
+import { SectionContainer } from "@/components/shared/SectionContainer";
+import { SectionHeading } from "@/components/shared/SectionHeading";
+import { IconBox } from "@/components/shared/IconBox";
+import { differentiators } from "@/data/site-content";
+
+export function ServiceFeaturesSection() {
+  const DefaultIcon = () => (
+    <div className="flex h-full w-full items-center justify-center rounded-[18px] bg-tenext-card-purple">
+      <svg
+        width="32"
+        height="32"
+        viewBox="0 0 24 24"
+        fill="none"
+        className="text-white"
+      >
+        <path
+          d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
+  );
+
+  return (
+    <SectionContainer paddingY="lg">
+      <PageContainer>
+        <div className="mb-16">
+          <SectionHeading
+            tag="why tenext"
+            title="What enterprises get from working with us"
+            titleClassName="text-white max-w-[700px]"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 gap-x-12 gap-y-12 md:grid-cols-2 lg:grid-cols-3">
+          {differentiators.map((item, i) => (
+            <IconBox
+              key={item.id}
+              icon={<DefaultIcon />}
+              title={item.title}
+              description={item.description}
+              hasBorder={i < 3} // The original has a border for the first row
+            />
+          ))}
+        </div>
+      </PageContainer>
+    </SectionContainer>
+  );
+}