126 lines
5.7 KiB
TypeScript
126 lines
5.7 KiB
TypeScript
import { CardHeading, IconButton } from "@/components/shared/CardShared";
|
|
import { Counter } from "@/components/shared/Counter";
|
|
|
|
export function FeaturesSection() {
|
|
return (
|
|
<section className="bg-white px-[20px] pb-[100px] pt-[150px]">
|
|
<div className="mx-auto max-w-[1260px]">
|
|
{/* Top text and separator */}
|
|
<div className="mb-[70px] pr-[10%]">
|
|
<div className="mb-[20px] h-px w-[130px] bg-aiero-card-border" />
|
|
<h2
|
|
className="max-w-[700px] tracking-[-0.03em] text-white"
|
|
style={{
|
|
fontFamily: "var(--font-sora)",
|
|
fontSize: "clamp(32px, 4vw, 56px)",
|
|
fontWeight: 700,
|
|
lineHeight: 1.1,
|
|
}}
|
|
>
|
|
AI Solutions that drive success
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Feature Cards Grid */}
|
|
<div className="grid grid-cols-1 gap-[20px] lg:grid-cols-2">
|
|
|
|
{/* Card 1 - Left */}
|
|
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] border border-aiero-card-border bg-aiero-card-dark p-[40px_35px_45px_35px] lg:p-[22%_9%_20%_9%]">
|
|
<div
|
|
className="absolute inset-0 bg-[url('/images/aiero/home-9-img.png')] bg-bottom bg-no-repeat transition-all duration-300 hover:scale-105"
|
|
style={{ backgroundSize: "100% auto" }}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-[#0D0D0D99] to-transparent to-[20%]" />
|
|
|
|
<div className="relative z-10 mt-auto">
|
|
<CardHeading
|
|
title="Integrate our API to uncover deep insights"
|
|
titleClassName="text-white"
|
|
/>
|
|
|
|
<ul className="mt-[20px] flex flex-col gap-3">
|
|
<li className="flex items-center gap-3 text-aiero-text-muted">
|
|
<span className="flex h-1 w-1 rounded-full bg-aiero-text-muted" />
|
|
Advanced analytics processing
|
|
</li>
|
|
<li className="flex items-center gap-3 text-aiero-text-muted">
|
|
<span className="flex h-1 w-1 rounded-full bg-aiero-text-muted" />
|
|
Real-time data synchronization
|
|
</li>
|
|
<li className="flex items-center gap-3 text-aiero-text-muted">
|
|
<span className="flex h-1 w-1 rounded-full bg-aiero-text-muted" />
|
|
Secure API endpoints
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<IconButton />
|
|
</div>
|
|
|
|
{/* Card 2 - Right */}
|
|
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] border border-aiero-card-border bg-aiero-card-dark p-[40px_35px_45px_35px] lg:p-[10%_9%_11%_9%]">
|
|
<div
|
|
className="absolute inset-0 bg-[url('/images/aiero/Dots.png')] bg-[length:auto] bg-[50%_20px] bg-no-repeat opacity-20"
|
|
/>
|
|
|
|
<div className="relative z-10 flex h-[42px] w-[42px] items-center justify-center text-white">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-full w-full">
|
|
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="relative z-10 mt-[60px] lg:mt-[100px]">
|
|
<CardHeading
|
|
title="Data privacy and security with robust measures"
|
|
titleClassName="text-white"
|
|
/>
|
|
<p className="text-[16px] text-aiero-text-muted">
|
|
Cobra opaleye gray reef shark bluntnose minnow. Triggerfish bango guppy opah sunfish bluntnose knifefish upside-down catfish.
|
|
</p>
|
|
</div>
|
|
|
|
<IconButton />
|
|
</div>
|
|
|
|
{/* Card 3 - Bottom Full Width */}
|
|
<div className="relative col-span-1 overflow-hidden rounded-[25px] border border-aiero-card-border bg-aiero-card-dark lg:col-span-2">
|
|
<div
|
|
className="absolute inset-0 bg-[url('/images/aiero/3d-woman-shape-glowing-with-bright-holographic-colors-1-min.png')] bg-right-bottom bg-no-repeat transition-all duration-300 hover:scale-105"
|
|
style={{ backgroundSize: "83% auto" }}
|
|
/>
|
|
|
|
<div className="relative z-10 grid grid-cols-1 gap-[40px] p-[40px_35px] lg:grid-cols-2 lg:p-[80px_60px]">
|
|
<div>
|
|
<CardHeading
|
|
subtitle="Technology"
|
|
title="Tailored solutions specifically to your needs"
|
|
titleClassName="text-white"
|
|
subtitleClassName="text-aiero-teal"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-[40px] sm:flex-row sm:gap-[60px] lg:pl-[15%]">
|
|
<Counter
|
|
target={98}
|
|
suffix="%"
|
|
numberClassName="text-[60px] font-bold leading-none font-[var(--font-manrope)] text-white"
|
|
title="Accuracy rate"
|
|
titleClassName="font-[var(--font-sora)] text-[11px] font-semibold tracking-[0.18em] uppercase text-aiero-text-muted mt-2"
|
|
/>
|
|
<Counter
|
|
target={24}
|
|
suffix="/7"
|
|
numberClassName="text-[60px] font-bold leading-none font-[var(--font-manrope)] text-white"
|
|
title="Customer support"
|
|
titleClassName="font-[var(--font-sora)] text-[11px] font-semibold tracking-[0.18em] uppercase text-aiero-text-muted mt-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|