update home page

components/shared/PartnerLogosSection.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { PageContainer } from "@/components/shared/PageContainer";
+import { SectionContainer } from "@/components/shared/SectionContainer";
+
+export function PartnerLogosSection() {
+  const logos = [
+    "/images/aiero/partners-1.png",
+    "/images/aiero/partners-2.png",
+    "/images/aiero/partners-1.png",
+    "/images/aiero/partners-2.png",
+    "/images/aiero/partners-1.png",
+    "/images/aiero/partners-2.png",
+  ];
+
+  return (
+    <SectionContainer paddingY="lg" className="border-t border-aiero-card-border bg-aiero-dark">
+      <PageContainer className="flex flex-col items-center">
+        <h3
+          className="mb-16 max-w-[800px] text-center text-white"
+          style={{
+            fontFamily: "var(--font-dm-sans)",
+            fontSize: "clamp(24px, 3vw, 36px)",
+            fontWeight: 500,
+            lineHeight: 1.2,
+          }}
+        >
+          Tinker with a Neural Network right here in your browser. Don’t worry, you can’t break it. We Promise.
+        </h3>
+
+        <div className="flex flex-wrap justify-center gap-8 md:gap-16 lg:gap-24 opacity-60">
+          {logos.map((src, index) => (
+            <div key={index} className="flex h-12 items-center justify-center grayscale transition-all hover:grayscale-0">
+              <img
+                src={src}
+                alt={`Partner ${index + 1}`}
+                className="h-full w-auto object-contain"
+                onError={(e) => {
+                  (e.target as HTMLImageElement).src = "/images/aiero/logo-dark.png";
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      </PageContainer>
+    </SectionContainer>
+  );
+}