Changes

src/components/ProfesoresSection.tsx

@@ -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;

src/data/event-data.ts

@@ -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 ----
 /**
  * Añade URLs o importaciones de imágenes.

src/pages/Index.tsx

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