126 lines
7.4 KiB
TypeScript
126 lines
7.4 KiB
TypeScript
import { CardHeading, IconButton } from "@/components/shared/CardShared";
|
|
import { ChartIcon } from "@/components/shared/icons/ChartIcon";
|
|
import { Counter } from "@/components/shared/Counter";
|
|
|
|
export function CardsGrid() {
|
|
return (
|
|
<section className="px-[20px] pb-[20px]">
|
|
<div className="grid grid-cols-1 gap-[20px] md:grid-cols-2 xl:grid-cols-4">
|
|
|
|
{/* Card 1 */}
|
|
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] bg-[#343F78] p-[40px_35px_45px_35px] lg:p-[55px_45px_60px_45px] xl:col-span-1">
|
|
<div
|
|
className="absolute inset-0 bg-[url('/images/aiero/assistant-artificial-intelligence-min.png')] bg-right-top bg-no-repeat opacity-100 transition-all duration-300 hover:scale-105"
|
|
/>
|
|
|
|
<div className="relative z-10 flex gap-[6px]">
|
|
<span className="rounded-[15px] border border-white px-[20px] py-[5px] text-[12px] text-white transition-colors hover:border-[#45D0BD] hover:text-[#45D0BD]">
|
|
Solutions
|
|
</span>
|
|
<span className="rounded-[15px] border border-white px-[20px] py-[5px] text-[12px] text-white transition-colors hover:border-[#45D0BD] hover:text-[#45D0BD]">
|
|
Plugins
|
|
</span>
|
|
</div>
|
|
|
|
<div className="relative z-10 mt-[60px] lg:mt-[100px]">
|
|
<CardHeading
|
|
title="Enhance operational efficiency"
|
|
titleClassName="text-white"
|
|
/>
|
|
|
|
<div className="mt-[44px] flex -space-x-[15px]">
|
|
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#E8F3FF] shadow-sm">
|
|
<svg className="h-[24px] w-[24px]" viewBox="0 0 24 24" fill="#0084FF"><path d="M12 2C6.477 2 2 6.145 2 11.258C2 14.156 3.52 16.735 5.868 18.361V22L9.208 20.151C10.096 20.395 11.033 20.516 12 20.516C17.523 20.516 22 16.371 22 11.258C22 6.145 17.523 2 12 2Z"/></svg>
|
|
</div>
|
|
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#E5F5FF] shadow-sm">
|
|
<svg className="h-[24px] w-[24px]" viewBox="0 0 24 24" fill="#00AFF0"><path d="M11.996 22C17.519 22 22 17.523 22 12C22 6.477 17.519 2 11.996 2C6.473 2 2 6.477 2 12C2 17.523 6.473 22 11.996 22Z"/></svg>
|
|
</div>
|
|
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#E5FAFF] shadow-sm">
|
|
<svg className="h-[24px] w-[24px]" viewBox="0 0 24 24" fill="#229ED9"><path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C2 6.477 17.523 2 12 2Z"/></svg>
|
|
</div>
|
|
<div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#EAE8FF] shadow-sm">
|
|
<svg className="h-[24px] w-[24px]" viewBox="0 0 24 24" fill="#5865F2"><path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C2 6.477 17.523 2 12 2Z"/></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<IconButton />
|
|
</div>
|
|
|
|
{/* Card 2 */}
|
|
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] bg-[#56619E] p-[40px_35px_45px_35px] lg:p-[45px_45px_50px_45px] xl:col-span-1">
|
|
<div
|
|
className="absolute inset-0 bg-[url('/images/aiero/c0eb2845-min.png')] bg-bottom bg-no-repeat transition-all duration-300 hover:scale-105"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-[#3F497F00] to-[#333D74] from-[75%] to-[100%]" />
|
|
|
|
<div className="relative z-10 mb-[50px]">
|
|
<div className="mb-[24px] inline-flex h-[38px] w-[38px] items-center justify-center">
|
|
<ChartIcon className="h-full w-full text-white" />
|
|
</div>
|
|
|
|
<CardHeading
|
|
title="Tailor algorithms to adapt and optimize processes"
|
|
titleClassName="text-white"
|
|
/>
|
|
|
|
<p className="text-[16px] text-white">
|
|
Cobra opaleye gray reef shark bluntnose minnow.
|
|
</p>
|
|
</div>
|
|
|
|
<IconButton />
|
|
</div>
|
|
|
|
{/* Card 3 (spans 2 columns) */}
|
|
<div className="flex flex-col gap-[20px] md:col-span-2 xl:col-span-2">
|
|
|
|
{/* Card 3 - Top half */}
|
|
<div className="relative flex flex-col justify-center overflow-hidden rounded-[25px] bg-[#AC8DE0] p-[40px] lg:p-[45px_50px]">
|
|
<a href="#" className="absolute inset-0 z-20" aria-label="Happy clients" />
|
|
<div className="relative z-10 flex flex-col md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<Counter
|
|
target={500}
|
|
suffix="K+"
|
|
numberClassName="text-[80px] font-bold leading-none font-[var(--font-manrope)] gradient-text-counter"
|
|
style={{ backgroundImage: "linear-gradient(0deg, rgba(255,255,255,0) 15%, #FFFFFF 100%)" }}
|
|
/>
|
|
</div>
|
|
<div className="mt-4 md:mt-0">
|
|
<h4 className="font-[var(--font-manrope)] text-[16px] font-medium leading-[20px] text-[#F8E1E1]">
|
|
Happy
|
|
<br />
|
|
clients
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card 3 - Bottom half */}
|
|
<div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] bg-[#282828] p-[40px_35px_45px_35px] lg:p-[50px_45px_45px_45px]">
|
|
<div
|
|
className="absolute inset-0 bg-[url('/images/aiero/Layer_2-min.jpg')] bg-cover bg-center transition-all duration-300 hover:scale-105"
|
|
/>
|
|
|
|
<div className="relative z-10 mb-[26px]">
|
|
<CardHeading
|
|
title="Unlock your full potential today with the power of Aiero AI"
|
|
titleClassName="text-white max-w-[80%]"
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative z-10">
|
|
<svg width="136" viewBox="0 0 100 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M26.4 13.9C26.4 11.2 25.4 9 23.5 7.4C21.6 5.8 19 5 15.7 5C12.4 5 9.8 5.8 7.9 7.4C6 9 5 11.2 5 13.9C5 16.6 6 18.8 7.9 20.4C9.8 22 12.4 22.8 15.7 22.8C19 22.8 21.6 22 23.5 20.4C25.4 18.8 26.4 16.6 26.4 13.9ZM30.7 13.9C30.7 18 29.3 21.2 26.5 23.7C23.7 26.2 19.9 27.5 15.1 27.5C10.3 27.5 6.5 26.2 3.7 23.7C0.9 21.2 -0.5 18 -0.5 13.9C-0.5 9.8 0.9 6.6 3.7 4.1C6.5 1.6 10.3 0.3 15.1 0.3C19.9 0.3 23.7 1.6 26.5 4.1C29.3 6.6 30.7 9.8 30.7 13.9ZM37.7 27V0.8H42V4.5C43.5 2 46.1 0.8 49.8 0.8C52.9 0.8 55.4 1.8 57.3 3.8C59.2 5.8 60.1 8.5 60.1 11.9V27H55.8V12.4C55.8 9.9 55.1 8.1 53.7 6.9C52.3 5.7 50.4 5.1 48 5.1C45.3 5.1 43.1 5.9 41.4 7.5C39.7 9.1 38.8 11.4 38.8 14.4V27H37.7ZM71.1 27.5C67.5 27.5 64.6 26.4 62.4 24.2C60.2 22 59.1 18.9 59.1 14.9V14.2C59.1 10.1 60.3 6.9 62.7 4.5C65.1 2.1 68.3 0.9 72.3 0.9C75.8 0.9 78.6 1.9 80.7 3.9C82.8 5.9 83.8 8.8 83.8 12.6V15.7H63.4C63.6 18.4 64.5 20.4 66.1 21.6C67.7 22.8 69.8 23.4 72.4 23.4C74.6 23.4 76.5 23 78.1 22.2C79.7 21.4 81.1 20.2 82.2 18.6L84.8 21.8C83.2 23.6 81.2 25 78.8 26C76.4 27 73.8 27.5 71.1 27.5ZM80.6 10.6C80.6 8.3 79.9 6.6 78.5 5.5C77.1 4.4 75 3.8 72.2 3.8C69.3 3.8 67 4.6 65.3 6.2C63.6 7.8 62.7 10 62.7 12.8H80.6V10.6ZM90.2 0H94.4V27H90.2V0Z" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|