tenext redesign

components/sections/PossibilitiesSection.tsx

@@ -0,0 +1,95 @@
+import { tenextButton as TenextButton } from "@/components/shared/Button";
+import { IconBox } from "@/components/shared/IconBox";
+import { valueProps } from "@/data/site-content";
+import {
+  OrbitIcon,
+  FanIcon,
+  CirclesIcon,
+  ExpandIcon,
+} from "@/components/shared/icons/PossibilityIcons";
+
+export function PossibilitiesSection() {
+  return (
+    <section className="px-[20px] py-[60px] md:py-[100px]">
+      <div className="mx-auto grid max-w-[1260px] grid-cols-1 gap-[50px] lg:grid-cols-[1fr_1fr]">
+        {/* Left Column */}
+        <div className="flex flex-col items-start pr-[10%] pt-[20px]">
+          <span
+            className="tenext-subheading mb-[16px] text-tenext-dark uppercase tracking-[0.1em]"
+            style={{ fontFamily: "var(--font-sora)" }}
+          >
+            [ what we do ]
+          </span>
+
+          <h2
+            className="mb-[24px] max-w-[500px] tracking-[-0.03em] text-tenext-dark"
+            style={{
+              fontFamily: "var(--font-dm-sans)",
+              fontSize: "clamp(32px, 4vw, 56px)",
+              fontWeight: 500,
+              lineHeight: 1.1,
+            }}
+          >
+            Services that move the business, not just the technology
+          </h2>
+
+          <p className="mb-[40px] max-w-[480px] text-[16px] leading-[1.8] text-tenext-text-muted">
+            Tenext Technologies partners with enterprises to engineer, migrate,
+            and scale digital platforms. We integrate solutions with your
+            existing systems and processes to deliver predictable outcomes,
+            lower total cost of ownership, and accelerate time to value.
+          </p>
+
+          <TenextButton
+            variant="gradient-border"
+            className="rounded-[25px] px-[35px] py-[15px] text-[15px] font-medium"
+            showArrow={true}
+          >
+            Explore more
+          </TenextButton>
+
+          <div className="mt-[80px] max-w-[420px] border-t border-tenext-card-border pt-[30px]">
+            <h3 className="text-[20px] font-bold text-tenext-dark font-[var(--font-sora)]">
+              {valueProps.engineering.title}
+            </h3>
+            <p className="mt-[10px] text-[16px] leading-[1.7] text-tenext-text-muted">
+              {valueProps.engineering.description}
+            </p>
+          </div>
+        </div>
+
+        {/* Right Column */}
+        <div className="flex flex-col gap-[30px] lg:pl-[10%]">
+          <IconBox
+            icon={<OrbitIcon className="h-full w-full" />}
+            title="Technology Engineering"
+            description="Full-stack product engineering — architecture, development, and modernization of enterprise applications built to scale."
+            hasBorder={true}
+            theme="light"
+          />
+          <IconBox
+            icon={<FanIcon className="h-full w-full" />}
+            title="Cloud & Enterprise Platforms"
+            description="Cloud migration, platform engineering, and DevOps that lower total cost of ownership and keep systems reliable."
+            hasBorder={true}
+            theme="light"
+          />
+          <IconBox
+            icon={<CirclesIcon className="h-full w-full" />}
+            title="AI & Data Science"
+            description="Data platforms, analytics, and applied AI that turn enterprise data into automation and decision-ready insight."
+            hasBorder={true}
+            theme="light"
+          />
+          <IconBox
+            icon={<ExpandIcon className="h-full w-full" />}
+            title="Digital Commerce & Mobility"
+            description="Commerce platforms and enterprise mobile applications that deliver seamless customer and workforce experiences."
+            hasBorder={true}
+            theme="light"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}