tenext redesign

components/sections/TinkerSection.tsx

@@ -0,0 +1,72 @@
+import Image from "next/image";
+
+export function TinkerSection() {
+  return (
+    <section className="relative px-[20px] py-[60px] md:py-[100px] overflow-hidden">
+      <div className="mx-auto flex max-w-[1340px] flex-col gap-[50px] lg:flex-row lg:items-center lg:gap-0">
+        {/* Left Column - Images */}
+        <div className="relative flex w-full flex-col lg:mt-[30px] lg:w-[22%]">
+          {/* Background Glow (elementor-absolute) */}
+          <div className="absolute left-0 top-0 z-0 pointer-events-none min-[576px]:left-[-40vw] min-[576px]:top-[-19.252vw]">
+            <Image
+              src="/images/tenext/Group-18433.png"
+              alt=""
+              width={1283}
+              height={1471}
+              className="h-auto w-auto max-w-[100vw] object-contain opacity-80"
+              aria-hidden="true"
+              unoptimized
+            />
+          </div>
+
+          {/* Main Vector Image */}
+          <div className="relative z-10 min-[576px]:ml-[-26vw]">
+            <Image
+              src="/images/tenext/Vector-13.png"
+              alt="Tenext technology stack"
+              width={670}
+              height={694}
+              className="w-full h-auto max-w-[800px] object-contain"
+            />
+          </div>
+        </div>
+
+        {/* Right Column - Text & Partners */}
+        <div className="relative z-10 flex w-full flex-col lg:w-[78%]">
+          <div className="min-[576px]:mr-[-4%]">
+            <h2
+              className="mb-[60px] text-tenext-dark tracking-[-0.03em]"
+              style={{
+                fontFamily: "var(--font-dm-sans)",
+                fontSize: "clamp(36px, 4.5vw, 58px)",
+                fontWeight: 500,
+                lineHeight: 1.1,
+              }}
+            >
+              Modern technology,{" "}
+              <span className="gradient-text-purple">
+                integrated with the systems
+              </span>{" "}
+              you already run — cloud, data, IoT, DevOps, and blockchain.
+            </h2>
+          </div>
+
+          {/* Capability tags */}
+          <div className="flex flex-wrap items-center justify-start gap-[12px]">
+            {["Cloud", "Data & AI", "IoT", "SMAC", "DevOps", "Blockchain"].map(
+              (tag) => (
+                <span
+                  key={tag}
+                  className="rounded-full border border-tenext-card-border px-[22px] py-[10px] text-[15px] font-medium text-tenext-dark"
+                  style={{ fontFamily: "var(--font-sora)" }}
+                >
+                  {tag}
+                </span>
+              )
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}