update home page

components/aiero/services/ServiceCardsGrid.tsx

@@ -0,0 +1,63 @@
+"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-aiero-card-border bg-aiero-card-dark p-10 transition-all hover:bg-aiero-card-purple"
+            >
+              <div className="mb-6 h-[60px] w-[60px] rounded-full bg-aiero-card-purple2 p-4">
+                <img
+                  src="/images/aiero/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-aiero-teal"
+                  style={{ fontFamily: "var(--font-dm-sans)" }}
+                >
+                  {svc.title}
+                </h4>
+                <p className="text-[16px] text-aiero-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-aiero-dark transition-all duration-300 group-hover:bg-aiero-teal group-hover:text-white">
+                <ArrowIcon className="h-4 w-4" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </PageContainer>
+    </SectionContainer>
+  );
+}