Hotfixes on height, staff section & carrousel

src/components/OrgSection.tsx

@@ -4,7 +4,7 @@ import communityImg from "@/assets/community.jpg";
 import { Instagram, Facebook, Youtube } from "lucide-react";
 
 const OrgSection = () => (
-  <section className="section-padding bg-card">
+  <section className="section-padding bg-card py-20 md:py-28">
     <div className="container mx-auto">
       <div className="grid md:grid-cols-2 gap-12 items-center">
         {/* Texto */}
@@ -70,7 +70,7 @@ const OrgSection = () => (
           <img
             src={communityImg}
             alt="Comunidad ZoukLambadaBCN"
-            className="rounded-2xl shadow-elevated w-full object-cover aspect-square"
+            className="rounded-2xl shadow-elevated w-full h-auto object-contain bg-muted"
           />
         </motion.div>
       </div>

src/components/ProfesoresSection.tsx

@@ -1,67 +1,8 @@
-import { motion } from "framer-motion";
+/**
-import { User } from "lucide-react";
+ * ProfesoresSection has been removed intentionally.
-import {
+ * Exporting a no-op component to avoid breaking imports.
-  Carousel,
+ */
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-} from "@/components/ui/carousel";
-import { PROFESORES } from "@/data/event-data";
 
-const ProfesoresSection = () => (
+const ProfesoresSection = () => null;
-  <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/components/StaffSection.tsx

@@ -1,6 +1,6 @@
 import { motion } from "framer-motion";
 import { STAFF } from "@/data/event-data";
-import { Instagram, User } from "lucide-react";
+import { Instagram, User, ChevronLeft, ChevronRight } from "lucide-react";
 
 /** Colores de badge por rol */
 const roleBadgeClass: Record<string, string> = {
@@ -9,81 +9,148 @@ const roleBadgeClass: Record<string, string> = {
   Organizador: "bg-accent text-accent-foreground",
 };
 
-const StaffSection = () => (
+const StaffSection = () => {
-  <section id="staff" className="section-padding bg-background">
+  // simple ref + helpers for horizontal scroll
-    <div className="container mx-auto">
+  const onPrev = () => {
-      <motion.div
+    const scroller = document.getElementById("staff-scroller");
-        initial={{ opacity: 0, y: 20 }}
+    if (!scroller) return;
-        whileInView={{ opacity: 1, y: 0 }}
+    const card = scroller.querySelector("[data-staff-card]") as HTMLElement | null;
-        viewport={{ once: true }}
+    const delta = card ? card.offsetWidth + 24 : 320; // 24 ~ gap-x-6
-        className="text-center mb-12"
+    scroller.scrollBy({ left: -delta, behavior: "smooth" });
-      >
+  };
-        <h2 className="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
+  const onNext = () => {
-          Staff del Evento
+    const scroller = document.getElementById("staff-scroller");
-        </h2>
+    if (!scroller) return;
-        <p className="text-muted-foreground max-w-2xl mx-auto">
+    const card = scroller.querySelector("[data-staff-card]") as HTMLElement | null;
-          Conoce a los artistas e instructores que harán de este festival una experiencia inolvidable.
+    const delta = card ? card.offsetWidth + 24 : 320;
-        </p>
+    scroller.scrollBy({ left: delta, behavior: "smooth" });
-      </motion.div>
+  };
 
-      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+  return (
-        {STAFF.map((member, i) => (
+    <section id="staff" className="section-padding bg-background">
-          <motion.div
+      <div className="container mx-auto">
-            key={member.id}
+        <motion.div
-            initial={{ opacity: 0, y: 30 }}
+          initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
+          whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
+          viewport={{ once: true }}
-            transition={{ delay: i * 0.1 }}
+          className="flex items-end justify-between gap-4 mb-6 md:mb-8"
-            className="bg-card rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow group"
+        >
+          <div className="text-center md:text-left w-full">
+            <h2 className="font-display text-4xl md:text-5xl font-bold text-gradient mb-2">
+              Staff del Evento
+            </h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto md:mx-0">
+              Conoce a los artistas e instructores que harán de este festival una experiencia inolvidable.
+            </p>
+          </div>
+
+          {/* Arrows (desktop) */}
+          <div className="hidden md:flex items-center gap-2 shrink-0">
+            <button
+              aria-label="Anterior"
+              onClick={onPrev}
+              className="h-10 w-10 rounded-full bg-card border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow-sm"
+            >
+              <ChevronLeft className="h-5 w-5" />
+            </button>
+            <button
+              aria-label="Siguiente"
+              onClick={onNext}
+              className="h-10 w-10 rounded-full bg-card border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow-sm"
+            >
+              <ChevronRight className="h-5 w-5" />
+            </button>
+          </div>
+        </motion.div>
+
+        {/* Carousel scroller */}
+        <div className="relative">
+          {/* gradient edges */}
+          <div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background to-transparent rounded-l-2xl" />
+          <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background to-transparent rounded-r-2xl" />
+
+          <div
+            id="staff-scroller"
+            className="flex gap-6 overflow-x-auto snap-x snap-mandatory scroll-smooth pb-2 -mx-4 px-4 md:mx-0 md:px-0"
           >
-            {/* Foto */}
+            {STAFF.map((member, i) => (
-            <div className="aspect-square bg-muted flex items-center justify-center overflow-hidden">
+              <motion.div
-              {member.image ? (
+                key={member.id}
-                <img
+                initial={{ opacity: 0, y: 30 }}
-                  src={member.image}
+                whileInView={{ opacity: 1, y: 0 }}
-                  alt={member.name}
+                viewport={{ once: true }}
-                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                transition={{ delay: i * 0.05 }}
-                />
+                data-staff-card
-              ) : (
+                className="snap-start shrink-0 w-4/5 sm:w-1/2 lg:w-1/3 xl:w-1/4 bg-card rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow group"
-                <User className="w-16 h-16 text-muted-foreground/40" />
-              )}
-            </div>
-
-            <div className="p-5">
-              {/* Badge de rol */}
-              <span
-                className={`inline-block text-xs font-semibold px-3 py-1 rounded-full mb-3 ${
-                  roleBadgeClass[member.role] || "bg-muted text-muted-foreground"
-                }`}
               >
-                {member.role}
+                {/* Foto */}
-              </span>
+                <div className="aspect-square bg-muted flex items-center justify-center overflow-hidden">
+                  {member.image ? (
+                    <img
+                      src={member.image}
+                      alt={member.name}
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                    />
+                  ) : (
+                    <User className="w-16 h-16 text-muted-foreground/40" />
+                  )}
+                </div>
 
-              <h3 className="font-display text-lg font-bold text-foreground mb-2">
+                <div className="p-5">
-                {member.name}
+                  {/* Badge de rol */}
-              </h3>
+                  <span
-              <p className="text-sm text-muted-foreground mb-4">
+                    className={`inline-block text-xs font-semibold px-3 py-1 rounded-full mb-3 ${
-                {member.description}
+                      roleBadgeClass[member.role] || "bg-muted text-muted-foreground"
-              </p>
+                    }`}
+                  >
+                    {member.role}
+                  </span>
 
-              {/* Redes sociales */}
+                  <h3 className="font-display text-lg font-bold text-foreground mb-2">
-              {member.socials?.instagram && (
+                    {member.name}
-                <a
+                  </h3>
-                  href={member.socials.instagram}
+                  <p className="text-sm text-muted-foreground mb-4">
-                  target="_blank"
+                    {member.description}
-                  rel="noopener noreferrer"
+                  </p>
-                  className="inline-flex items-center gap-1.5 text-sm text-primary hover:text-primary/80 transition-colors"
+
-                >
+                  {/* Redes sociales */}
-                  <Instagram className="w-4 h-4" />
+                  {member.socials?.instagram && (
-                  Instagram
+                    <a
-                </a>
+                      href={member.socials.instagram}
-              )}
+                      target="_blank"
-            </div>
+                      rel="noopener noreferrer"
-          </motion.div>
+                      className="inline-flex items-center gap-1.5 text-sm text-primary hover:text-primary/80 transition-colors"
-        ))}
+                    >
+                      <Instagram className="w-4 h-4" />
+                      Instagram
+                    </a>
+                  )}
+                </div>
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Arrows (mobile overlay) */}
+          <div className="md:hidden absolute inset-y-1/2 -translate-y-1/2 left-1 right-1 flex items-center justify-between pointer-events-none">
+            <button
+              aria-label="Anterior"
+              onClick={onPrev}
+              className="pointer-events-auto h-9 w-9 rounded-full bg-card/90 backdrop-blur border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow"
+            >
+              <ChevronLeft className="h-5 w-5" />
+            </button>
+            <button
+              aria-label="Siguiente"
+              onClick={onNext}
+              className="pointer-events-auto h-9 w-9 rounded-full bg-card/90 backdrop-blur border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow"
+            >
+              <ChevronRight className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
       </div>
-    </div>
+    </section>
-  </section>
+  );
-);
+};
 
 export default StaffSection;

src/data/event-data.ts

@@ -9,6 +9,16 @@
  * 
  * NOTA: Las imágenes deben colocarse en src/assets/ e importarse.
  */
+import arielyasmin from "@/assets/staff/arielyasmin.jpg";
+import hilaleo from "@/assets/staff/hilaleo.jpg";
+import matheuslydia from "@/assets/staff/matheuslydia.jpg";
+import omeradva from "@/assets/staff/omeradva.jpg";
+import pablolena from "@/assets/staff/pablolena.jpg";
+import djbiel from "@/assets/staff/djbiel.jpg";
+import djwinx from "@/assets/staff/djwinx.jpg";
+import djklebynho from "@/assets/staff/djklebynho.jpg";
+
+
 
 // ---- INFORMACIÓN GENERAL DEL EVENTO ----
 export const EVENT_INFO = {
@@ -49,8 +59,7 @@ export const WEBHOOK_URL = "https://n8n.hacecalor.net/webhook/event-reservation"
 // ---- SOBRE EL EVENTO ----
 export const ABOUT_EVENT = {
   title: "Sobre el Evento",
-  description: `[Descripción del evento. Explica qué hace especial esta edición, 
+  description: `El ZoukLambadaBCN Beach Festival es uno de los eventos más destacados del panorama internacional de baile, dedicado exclusivamente a las disciplinas del Zouk y la Lambazouk. Se celebra en la encantadora localidad de Santa Susana, en la costa del Maresme, aprovechando su entorno mediterráneo, sus amplias playas y su espíritu acogedor para crear una experiencia única que atrae a bailarines de todos los rincones del mundo. `,
-  qué pueden esperar los asistentes, y por qué no se lo pueden perder.]`,
   lambadaInfo: `La Lambada es un baile brasileño nacido en los años 80, 
   conocido por su sensualidad, conexión y ritmo envolvente. 
   Mezcla influencias de forró, merengue y carimbó, 
@@ -85,41 +94,93 @@ export const ABOUT_ORG = {
 export const STAFF = [
   {
     id: "1",
-    name: "[Nombre Instructor 1]",
+    name: "[Pablo & Lena]",
     role: "Instructor" as const,
     description: "[Breve biografía del instructor]",
     /** Reemplazar con ruta a foto real */
-    image: "",
+    image: pablolena,
     socials: {
       instagram: "",
     },
   },
   {
     id: "2",
-    name: "[Nombre Instructor 2]",
+    name: "[Ariel & Yasmin]",
     role: "Instructor" as const,
     description: "[Breve biografía del instructor]",
-    image: "",
+    image: arielyasmin,
     socials: {
       instagram: "",
     },
   },
   {
     id: "3",
-    name: "[Nombre DJ]",
+    name: "[Hila & Leo]",
+    role: "Instructor" as const,
+    description: "[Breve biografía del instructor]",
+    image: hilaleo,
+    socials: {
+      instagram: "",
+    },
+  },
+  {
+    id: "4",
+    name: "[Matheus & Lydia]",
+    role: "Instructor" as const,
+    description: "[Breve biografía del instructor]",
+    image: matheuslydia,
+    socials: {
+      instagram: "",
+    },
+  },
+  {
+    id: "5",
+    name: "[Omer & Adva]",
+    role: "Instructor" as const,
+    description: "[Breve biografía del instructor]",
+    image: omeradva,
+    socials: {
+      instagram: "",
+    },
+  },
+  {
+    id: "6",
+    name: "[DJ Biel]",
     role: "DJ" as const,
     description: "[Breve biografía del DJ]",
-    image: "",
+    image: djbiel,
     socials: {
       instagram: "",
       soundcloud: "",
     },
   },
   {
-    id: "4",
+    id: "7",
-    name: "[Nombre Organizador]",
+    name: "[DJ WinX]",
-    role: "Organizador" as const,
+    role: "DJ" as const,
-    description: "[Breve biografía del organizador]",
+    description: "[Breve biografía del DJ]",
+    image: djwinx,
+    socials: {
+      instagram: "",
+      soundcloud: "",
+    },
+  },
+  {
+    id: "8",
+    name: "[DJ Klebynho]",
+    role: "DJ" as const,
+    description: "[Breve biografía del DJ]",
+    image: djklebynho,
+    socials: {
+      instagram: "",
+      soundcloud: "",
+    },
+  },
+  {
+    id: "9",
+    name: "[Nombre Special Guest]",
+    role: "Special Guest" as const,
+    description: "[Breve biografía del invitado especial]",
     image: "",
     socials: {
       instagram: "",
@@ -205,20 +266,6 @@ 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.

tailwind.config.ts

@@ -24,7 +24,7 @@ export default {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         primary: {
-          DEFAULT: "hsl(230.5, 57.6%, 74.1%);",
+          DEFAULT: "hsl(230.5, 57.6%, 74.1%)",
           foreground: "hsl(var(--primary-foreground))",
         },
         secondary: {