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:
67
src/components/ProfesoresSection.tsx
Normal file
67
src/components/ProfesoresSection.tsx
Normal 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;
|
||||
@@ -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.
|
||||
|
||||
@@ -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 />
|
||||
|
||||
Reference in New Issue
Block a user