Changes

src/components/ScheduleSection.tsx

@@ -0,0 +1,74 @@
+import { motion } from "framer-motion";
+import { SCHEDULE } from "@/data/event-data";
+import { Clock, Music, Coffee, Star } from "lucide-react";
+
+const typeIcon: Record<string, typeof Clock> = {
+  workshop: Clock,
+  social: Music,
+  break: Coffee,
+  show: Star,
+};
+
+const typeColor: Record<string, string> = {
+  workshop: "border-primary bg-primary/10 text-primary",
+  social: "border-secondary bg-secondary/10 text-secondary",
+  break: "border-muted-foreground bg-muted text-muted-foreground",
+  show: "border-accent bg-accent/10 text-accent",
+};
+
+const ScheduleSection = () => (
+  <section id="schedule" className="section-padding bg-card">
+    <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">
+          Programa
+        </h2>
+        <p className="text-muted-foreground max-w-2xl mx-auto">
+          Tres días de workshops, shows y social dance.
+        </p>
+      </motion.div>
+
+      <div className="grid md:grid-cols-3 gap-8">
+        {SCHEDULE.map((day, di) => (
+          <motion.div
+            key={day.day}
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: di * 0.15 }}
+          >
+            <h3 className="font-display text-xl font-bold text-foreground mb-6 pb-3 border-b-2 border-primary">
+              {day.day}
+            </h3>
+            <div className="space-y-3">
+              {day.events.map((event, ei) => {
+                const Icon = typeIcon[event.type] || Clock;
+                return (
+                  <div
+                    key={ei}
+                    className={`flex items-start gap-3 p-3 rounded-lg border-l-4 ${
+                      typeColor[event.type] || ""
+                    }`}
+                  >
+                    <Icon className="w-4 h-4 mt-0.5 shrink-0" />
+                    <div>
+                      <p className="text-xs font-medium opacity-70">{event.time}</p>
+                      <p className="text-sm font-semibold">{event.title}</p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  </section>
+);
+
+export default ScheduleSection;