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;