Files
tenext-next/components/aiero/PossibilitiesSection.tsx
2026-07-30 12:58:31 +05:30

107 lines
4.2 KiB
TypeScript

import { tenextButton as TenextButton } from "@/components/shared/AieroButton";
import { Counter } from "@/components/shared/Counter";
import { IconBox } from "@/components/shared/IconBox";
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)" }}
>
[ possibilities ]
</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,
}}
>
Explore limitless possibilities with our intelligent solutions
</h2>
<p className="mb-[40px] max-w-[480px] text-[16px] leading-[1.8] text-tenext-text-muted">
tenext is a leading AI agency committed to transforming businesses
through cutting-edge artificial intelligence solutions. We
specialize in delivering tailored AI strategies that drive
innovation, optimize processes, and unlock new opportunities for
growth.
</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]">
<Counter
target={270}
suffix="k"
numberClassName="text-[60px] md:text-[100px] font-extrabold leading-none font-[var(--font-manrope)] text-transparent"
style={{
WebkitTextStroke: "1px #E2D7F8",
backgroundImage:
"linear-gradient(180deg, rgba(226, 215, 248, 0.44) 0%, rgba(226, 215, 248, 0.06) 90%)",
backgroundClip: "text",
WebkitBackgroundClip: "text",
}}
title="AI Solutions for our clients"
titleClassName="font-[var(--font-manrope)] text-[16px] font-bold leading-[1.4] text-tenext-dark max-w-[120px]"
layout="row-reverse"
gap="30px"
/>
</div>
</div>
{/* Right Column */}
<div className="flex flex-col gap-[30px] lg:pl-[10%]">
<IconBox
icon={<OrbitIcon className="h-full w-full" />}
title="Cutting-edge technology"
description="Integrating neural network models into existing systems or software applications, enabling businesses to leverage AI capabilities seamlessly."
hasBorder={true}
theme="light"
/>
<IconBox
icon={<FanIcon className="h-full w-full" />}
title="Tailored solutions"
description="Integrating neural network models into existing systems or software applications, enabling businesses to leverage AI capabilities seamlessly."
hasBorder={true}
theme="light"
/>
<IconBox
icon={<CirclesIcon className="h-full w-full" />}
title="Training and workshops"
description="Custom design and development of neural network architectures tailored to specific business needs and objectives."
hasBorder={true}
theme="light"
/>
<IconBox
icon={<ExpandIcon className="h-full w-full" />}
title="Modern development"
description="Building and training deep neural networks for tasks such as image recognition, natural language processing, speech recognition, and anomaly detection."
hasBorder={true}
theme="light"
/>
</div>
</div>
</section>
);
}