91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
"use client";
|
|
import { useState, useEffect } from "react";
|
|
import { motion } from "framer-motion";
|
|
import Loader from '@/app/(landing)/components/Loader';
|
|
import { useCompanies } from '@/app/(landing)/home/services/companies';
|
|
import { assetUrl } from '@/app/(landing)/services/api';
|
|
import type { ThemeProps } from '@/app/(landing)/types/ui';
|
|
|
|
function ClientsInner({ isNavyBg }: ThemeProps) {
|
|
const { data, isLoading } = useCompanies();
|
|
|
|
const bg = isNavyBg ? "var(--background)" : "#f0efec";
|
|
const border = isNavyBg ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.07)";
|
|
const label = isNavyBg ? "rgba(255,255,255,0.28)" : "rgba(0,0,0,0.28)";
|
|
|
|
const companies = (data ?? []).filter((c) => c.showInLanding && c.logoUrl);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<section
|
|
style={{ background: bg, borderBottom: `1px solid ${border}` }}
|
|
className="px-8 py-14 md:px-14"
|
|
>
|
|
<Loader className="py-8" />
|
|
</section>
|
|
);
|
|
}
|
|
|
|
if (companies.length === 0) return null;
|
|
|
|
return (
|
|
<section
|
|
aria-label="Empresas que confían en Rynext"
|
|
style={{ background: bg, borderBottom: `1px solid ${border}` }}
|
|
className="px-8 py-14 md:px-14 transition-colors duration-500"
|
|
>
|
|
<motion.div
|
|
className="mx-auto max-w-7xl"
|
|
initial={{ opacity: 0, y: 16 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
|
|
>
|
|
<p
|
|
className="mb-10 text-center text-xs font-semibold uppercase tracking-[0.18em]"
|
|
style={{ color: label }}
|
|
>
|
|
Empresas que confían en Rynext
|
|
</p>
|
|
<div className="flex flex-wrap items-center justify-center gap-10 md:gap-16">
|
|
{companies.map((c) => (
|
|
<div key={c.id} title={c.name} style={{ lineHeight: 1 }}>
|
|
<img
|
|
src={assetUrl(c.logoUrl)}
|
|
alt={c.name}
|
|
style={{
|
|
height: 150,
|
|
width: "auto",
|
|
maxWidth: 200,
|
|
objectFit: "contain",
|
|
// grayscale solo: invert+brightness(0) aplanaba logos a color
|
|
// (fotos/JPEG) a un bloque negro o blanco ilegible en dark.
|
|
filter: "grayscale(1)",
|
|
opacity: 0.55,
|
|
transition: "opacity 250ms",
|
|
}}
|
|
onError={(e) => {
|
|
(e.currentTarget as HTMLImageElement).style.display = "none";
|
|
}}
|
|
onMouseEnter={(e) =>
|
|
((e.currentTarget as HTMLImageElement).style.opacity = "1")
|
|
}
|
|
onMouseLeave={(e) =>
|
|
((e.currentTarget as HTMLImageElement).style.opacity = "0.6")
|
|
}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export const Clients = (props: ThemeProps) => {
|
|
const [mounted, setMounted] = useState(false);
|
|
useEffect(() => setMounted(true), []);
|
|
if (!mounted) return null;
|
|
return <ClientsInner {...props} />;
|
|
};
|