88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
import Link from "next/link";
|
|
|
|
type CommunityPhoto = {
|
|
id: string;
|
|
src: string;
|
|
alt: string;
|
|
caption: string;
|
|
span: string;
|
|
};
|
|
|
|
const communityPhotos: CommunityPhoto[] = [
|
|
{
|
|
id: "community-1",
|
|
src: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1200&q=80",
|
|
alt: "Equipo colaborando en una mesa de trabajo",
|
|
caption: "Taller colaborativo",
|
|
span: "md:col-span-2 md:row-span-2",
|
|
},
|
|
{
|
|
id: "community-2",
|
|
src: "https://images.unsplash.com/photo-1528901166007-3784c7dd3653?auto=format&fit=crop&w=1200&q=80",
|
|
alt: "Grupo de estudiantes revisando material",
|
|
caption: "Cohorte activa",
|
|
span: "md:col-span-2",
|
|
},
|
|
{
|
|
id: "community-3",
|
|
src: "https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=1200&q=80",
|
|
alt: "Conversación profesional durante evento",
|
|
caption: "Networking legal",
|
|
span: "",
|
|
},
|
|
{
|
|
id: "community-4",
|
|
src: "https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1200&q=80",
|
|
alt: "Sesión en auditorio con ponentes",
|
|
caption: "Masterclass",
|
|
span: "",
|
|
},
|
|
{
|
|
id: "community-5",
|
|
src: "https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&w=1200&q=80",
|
|
alt: "Personas participando en una dinámica",
|
|
caption: "Práctica guiada",
|
|
span: "md:col-span-2",
|
|
},
|
|
{
|
|
id: "community-6",
|
|
src: "https://images.unsplash.com/photo-1543269865-0a740d43b90c?auto=format&fit=crop&w=1200&q=80",
|
|
alt: "Estudiantes en jornada formativa",
|
|
caption: "Comunidad ACVE",
|
|
span: "",
|
|
},
|
|
];
|
|
|
|
export default function ComunidadPage() {
|
|
return (
|
|
<div className="acve-page">
|
|
<section className="acve-panel acve-section-base">
|
|
<p className="acve-pill mb-4 w-fit">Comunidad ACVE</p>
|
|
<h1 className="acve-heading text-4xl md:text-5xl">Red de práctica y colaboración</h1>
|
|
<p className="mt-3 max-w-3xl text-base text-muted-foreground md:text-lg">
|
|
Collage visual temporal con fotos de referencia para representar talleres, networking y actividades colaborativas.
|
|
</p>
|
|
|
|
<div className="mt-8 grid auto-rows-[150px] grid-cols-2 gap-3 md:auto-rows-[170px] md:grid-cols-4">
|
|
{communityPhotos.map((photo) => (
|
|
<figure
|
|
key={photo.id}
|
|
className={`group relative overflow-hidden rounded-2xl border border-border/80 bg-card shadow-sm ${photo.span}`}
|
|
>
|
|
<img alt={photo.alt} className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]" loading="lazy" src={photo.src} />
|
|
<figcaption className="absolute inset-x-2 bottom-2 rounded-lg bg-black/55 px-2 py-1 text-xs font-semibold text-white">
|
|
{photo.caption}
|
|
</figcaption>
|
|
</figure>
|
|
))}
|
|
</div>
|
|
|
|
<p className="mt-5 text-sm font-semibold text-primary">Estas imágenes son temporales y se podrán reemplazar por contenido oficial.</p>
|
|
<Link className="acve-button-secondary mt-6 inline-flex px-5 py-2.5 text-sm font-semibold hover:bg-accent" href="/">
|
|
Regresar al inicio
|
|
</Link>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|