49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
"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>
|
||
);
|
||
}
|