tenext redesign

components/sections/WOWSection.tsx

@@ -0,0 +1,74 @@
+import Link from "next/link";
+import Image from "next/image";
+import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
+import { PageContainer } from "@/components/shared/PageContainer";
+
+export function WOWSection() {
+  return (
+    <section className="relative z-20 px-[20px]">
+      <div className="relative z-20 mx-auto max-w-[1340px] overflow-hidden rounded-t-[20px] bg-tenext-dark pt-[30px] pb-[60px] md:pt-[40px] md:pb-[80px]">
+        <PageContainer>
+          <div className="grid grid-cols-1 gap-[40px] lg:grid-cols-2 lg:gap-[60px]">
+            <div className="flex flex-col justify-between">
+              <div className="mb-[35px] md:mb-[70px] md:pr-[10%]">
+                <span
+                  className="mb-[18px] block text-[12px] font-semibold uppercase tracking-[0.1em] text-white"
+                  style={{ fontFamily: "var(--font-sora)" }}
+                >
+                  [ about ]
+                </span>
+                <h2
+                  className="tracking-[-0.03em] text-white"
+                  style={{
+                    fontFamily: "var(--font-dm-sans)",
+                    fontSize: "clamp(44px, 5vw, 80px)",
+                    fontWeight: 500,
+                    lineHeight: 1.1,
+                  }}
+                >
+                  Why enterprises choose Tenext
+                </h2>
+              </div>
+
+              <Image
+                src="/images/tenext/home-9-img.png"
+                alt="Tenext"
+                width={632}
+                height={158}
+                className="h-auto w-full max-w-[632px] object-contain"
+              />
+            </div>
+
+            <div className="flex flex-col justify-between">
+              <div className="max-w-[560px] text-white">
+                <p className="text-[16px] font-bold leading-[1.7]">
+                  Tenext Technologies helps enterprises turn digital
+                  transformation into predictable business outcomes. We combine
+                  engineering depth with a diagnostic, outcome-first approach —
+                  so every investment maps to measurable value.
+                </p>
+                <p className="mt-[27px] text-[16px] font-medium leading-[1.7]">
+                  Our teams integrate solutions with your existing systems and
+                  processes, delivering the lowest total cost of ownership and
+                  accelerated time to value across cloud, data, AI, product
+                  engineering, and digital commerce.
+                </p>
+              </div>
+
+              <div className="mt-[40px] md:mt-[60px]">
+                <Link
+                  href="/services"
+                  className="tenext-button tenext-button-gradient-border group rounded-full px-[35px] py-[15px] font-[var(--font-sora)] text-[15px] font-semibold tracking-wide text-white transition-all"
+                >
+                  <span className="button-inner" />
+                  Explore more
+                  <ArrowIcon className="ml-2 h-[12px] w-[12px] transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1" />
+                </Link>
+              </div>
+            </div>
+          </div>
+        </PageContainer>
+      </div>
+    </section>
+  );
+}