64 lines
2.5 KiB
TypeScript
64 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { PageContainer } from "@/components/shared/PageContainer";
|
|
import { SectionContainer } from "@/components/shared/SectionContainer";
|
|
import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
|
|
|
|
const services = [
|
|
{
|
|
title: "Neural Network Development",
|
|
desc: "Custom design and development of neural network architectures tailored to your specific business needs",
|
|
},
|
|
{
|
|
title: "Training & Optimization",
|
|
desc: "Fine-tuning and optimizing neural network models to improve accuracy, speed, and efficiency",
|
|
},
|
|
{
|
|
title: "Neural Network Integration",
|
|
desc: "Expert guidance and strategic advice on integrating neural networks into your existing systems",
|
|
},
|
|
];
|
|
|
|
export function ServiceCardsGrid() {
|
|
return (
|
|
<SectionContainer paddingY="lg">
|
|
<PageContainer>
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
{services.map((svc, i) => (
|
|
<div
|
|
key={i}
|
|
className="group relative flex h-full min-h-[340px] flex-col justify-between overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-card-dark p-10 transition-all hover:bg-tenext-card-purple"
|
|
>
|
|
<div className="mb-6 h-[60px] w-[60px] rounded-full bg-tenext-card-purple2 p-4">
|
|
<img
|
|
src="/images/tenext/3x.png"
|
|
alt="Icon"
|
|
className="h-full w-full object-contain"
|
|
onError={(e) => {
|
|
(e.target as HTMLImageElement).src =
|
|
"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M12 2L2 22h20L12 2z'/></svg>";
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<h4
|
|
className="mb-4 text-[22px] font-bold text-white transition-colors group-hover:text-tenext-teal"
|
|
style={{ fontFamily: "var(--font-dm-sans)" }}
|
|
>
|
|
{svc.title}
|
|
</h4>
|
|
<p className="text-[16px] text-tenext-text-muted">{svc.desc}</p>
|
|
</div>
|
|
|
|
<div className="absolute bottom-0 right-0 flex h-[60px] w-[60px] items-center justify-center rounded-tl-[25px] bg-white text-tenext-dark transition-all duration-300 group-hover:bg-tenext-teal group-hover:text-white">
|
|
<ArrowIcon className="h-4 w-4" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</PageContainer>
|
|
</SectionContainer>
|
|
);
|
|
}
|