73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
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>
|
|
);
|
|
}
|