1ea5d70675
- Vista de leads en tarjetas + tabla con toggle (tarjetas por defecto, preferencia persistida) - Galería de trabajos: gestión en /panel/galeria y bloque público en el funnel - Selector de tema por reformista (presets + color de marca opcional) aplicado a la landing - Login y registro rediseñados a pantalla partida 50/50 con foto de reforma - Enlace "Entrar" funcional en la cabecera del funnel; elimina Navbar muerto - Unifica tipografía y botones del panel con los tokens de la landing Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
55 lines
2.1 KiB
TypeScript
55 lines
2.1 KiB
TypeScript
import type { PublicGaleriaFoto } from '@/lib/funnel/public-queries';
|
|
|
|
type GaleriaTrabajosProps = {
|
|
fotos: PublicGaleriaFoto[];
|
|
nombreEmpresa: string;
|
|
};
|
|
|
|
// Galería de trabajos del reformista en su landing pública. Solo se muestra si
|
|
// el reformista ha subido fotos desde su panel.
|
|
export default function GaleriaTrabajos({ fotos, nombreEmpresa }: GaleriaTrabajosProps) {
|
|
if (fotos.length === 0) return null;
|
|
|
|
return (
|
|
<section id="galeria" className="bg-gray-50 section" aria-label="Galería de trabajos">
|
|
<div className="container">
|
|
<div className="max-w-2xl mb-10 md:mb-14">
|
|
<span
|
|
className="badge mb-4"
|
|
style={{ backgroundColor: 'var(--brand)', color: 'var(--brand-contrast)' }}
|
|
>
|
|
Nuestros trabajos
|
|
</span>
|
|
<h2 className="text-[clamp(1.75rem,4vw,2.75rem)] font-black tracking-tight text-black leading-tight">
|
|
Reformas que ya hemos hecho
|
|
</h2>
|
|
<p className="text-gray-500 mt-3 leading-relaxed">
|
|
Una muestra real del trabajo de {nombreEmpresa}. Calidad de acabados, plazos cumplidos.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
|
|
{fotos.map((f) => (
|
|
<figure
|
|
key={f.id}
|
|
className="group relative aspect-[4/3] overflow-hidden rounded-xl bg-gray-100 border border-gray-200"
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={f.url}
|
|
alt={f.titulo ?? `Reforma de ${nombreEmpresa}`}
|
|
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
|
|
/>
|
|
{f.titulo && (
|
|
<figcaption className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-3 text-white text-sm font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
{f.titulo}
|
|
</figcaption>
|
|
)}
|
|
</figure>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|