Añadió sección Profesores

Implementa un carrusel de imágenes de profesores en la página, con datos editable desde PROFESORES en data. Se crea el componente ProfesoresSection, se integra en Index y se añade datos de ejemplo para los profesores.

X-Lovable-Edit-ID: edt-3b32a8d5-f63d-4f00-95d4-c24c5bcac81b
This commit is contained in:
gpt-engineer-app[bot]
2026-03-06 01:19:15 +00:00
3 changed files with 83 additions and 0 deletions

View File

@@ -0,0 +1,67 @@
import { motion } from "framer-motion";
import { User } from "lucide-react";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
} from "@/components/ui/carousel";
import { PROFESORES } from "@/data/event-data";
const ProfesoresSection = () => (
<section id="profesores" className="section-padding bg-background">
<div className="container mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
className="text-center mb-12"
>
<h2 className="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
Profesores
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto">
Los mejores profesores internacionales de Lambada te esperan en este festival.
</p>
</motion.div>
<div className="max-w-4xl mx-auto px-12">
<Carousel opts={{ loop: true, align: "start" }}>
<CarouselContent>
{PROFESORES.map((prof, i) => (
<CarouselItem key={i} className="md:basis-1/2 lg:basis-1/3">
<div className="bg-card rounded-2xl overflow-hidden shadow-card h-full">
<div className="aspect-[3/4] bg-muted flex items-center justify-center overflow-hidden">
{prof.image ? (
<img
src={prof.image}
alt={prof.name}
className="w-full h-full object-cover"
loading="lazy"
/>
) : (
<User className="w-16 h-16 text-muted-foreground/40" />
)}
</div>
<div className="p-4 text-center">
<h3 className="font-display text-lg font-bold text-foreground">
{prof.name}
</h3>
{prof.origin && (
<p className="text-sm text-muted-foreground">{prof.origin}</p>
)}
</div>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
</div>
</section>
);
export default ProfesoresSection;

View File

@@ -205,6 +205,20 @@ export const PRACTICAL_INFO = {
], ],
}; };
// ---- PROFESORES ----
/**
* Para añadir un profesor, agrega un objeto al array.
* Importa la imagen desde src/assets/ si es local.
*/
export const PROFESORES = [
{ name: "[Profesor 1]", image: "", origin: "[País]" },
{ name: "[Profesor 2]", image: "", origin: "[País]" },
{ name: "[Profesor 3]", image: "", origin: "[País]" },
{ name: "[Profesor 4]", image: "", origin: "[País]" },
{ name: "[Profesor 5]", image: "", origin: "[País]" },
{ name: "[Profesor 6]", image: "", origin: "[País]" },
];
// ---- GALERÍA ---- // ---- GALERÍA ----
/** /**
* Añade URLs o importaciones de imágenes. * Añade URLs o importaciones de imágenes.

View File

@@ -3,6 +3,7 @@ import HeroSection from "@/components/HeroSection";
import AboutSection from "@/components/AboutSection"; import AboutSection from "@/components/AboutSection";
import OrgSection from "@/components/OrgSection"; import OrgSection from "@/components/OrgSection";
import StaffSection from "@/components/StaffSection"; import StaffSection from "@/components/StaffSection";
import ProfesoresSection from "@/components/ProfesoresSection";
import ScheduleSection from "@/components/ScheduleSection"; import ScheduleSection from "@/components/ScheduleSection";
import BookingSection from "@/components/BookingSection"; import BookingSection from "@/components/BookingSection";
import HotelSection from "@/components/HotelSection"; import HotelSection from "@/components/HotelSection";
@@ -25,6 +26,7 @@ const Index = () => {
<AboutSection /> <AboutSection />
<OrgSection /> <OrgSection />
<StaffSection /> <StaffSection />
<ProfesoresSection />
<ScheduleSection /> <ScheduleSection />
<BookingSection /> <BookingSection />
<HotelSection /> <HotelSection />