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,32 +9,79 @@ const roleBadgeClass: Record<string, string> = {
   Organizador: "bg-accent text-accent-foreground",
 };
 
-const StaffSection = () => (
+const StaffSection = () => {
+  // simple ref + helpers for horizontal scroll
+  const onPrev = () => {
+    const scroller = document.getElementById("staff-scroller");
+    if (!scroller) return;
+    const card = scroller.querySelector("[data-staff-card]") as HTMLElement | null;
+    const delta = card ? card.offsetWidth + 24 : 320; // 24 ~ gap-x-6
+    scroller.scrollBy({ left: -delta, behavior: "smooth" });
+  };
+  const onNext = () => {
+    const scroller = document.getElementById("staff-scroller");
+    if (!scroller) return;
+    const card = scroller.querySelector("[data-staff-card]") as HTMLElement | null;
+    const delta = card ? card.offsetWidth + 24 : 320;
+    scroller.scrollBy({ left: delta, behavior: "smooth" });
+  };
+
+  return (
     <section id="staff" 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"
+          className="flex items-end justify-between gap-4 mb-6 md:mb-8"
         >
-        <h2 className="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
+          <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">
+            <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>
 
-      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+        {/* 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"
+          >
             {STAFF.map((member, i) => (
               <motion.div
                 key={member.id}
                 initial={{ opacity: 0, y: 30 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
-            transition={{ delay: i * 0.1 }}
+                transition={{ delay: i * 0.05 }}
-            className="bg-card rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow group"
+                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"
               >
                 {/* Foto */}
                 <div className="aspect-square bg-muted flex items-center justify-center overflow-hidden">
@@ -82,8 +129,28 @@ const StaffSection = () => (
               </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>
     </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: {