Changes

src/components/HotelSection.tsx

@@ -0,0 +1,61 @@
+import { motion } from "framer-motion";
+import { HOTEL_ROOMS } from "@/data/event-data";
+import { Button } from "@/components/ui/button";
+import { BedDouble, ExternalLink } from "lucide-react";
+
+const HotelSection = () => (
+  <section id="hotel" 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">
+          Alojamiento
+        </h2>
+        <p className="text-muted-foreground max-w-2xl mx-auto">
+          Habitaciones recomendadas cerca del venue.
+        </p>
+      </motion.div>
+
+      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
+        {HOTEL_ROOMS.map((room, i) => (
+          <motion.div
+            key={room.id}
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: i * 0.1 }}
+            className="bg-background rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow"
+          >
+            {/* Imagen */}
+            <div className="aspect-video bg-muted flex items-center justify-center overflow-hidden">
+              {room.image ? (
+                <img src={room.image} alt={room.name} className="w-full h-full object-cover" />
+              ) : (
+                <BedDouble className="w-12 h-12 text-muted-foreground/40" />
+              )}
+            </div>
+
+            <div className="p-5">
+              <h3 className="font-display text-lg font-bold text-foreground mb-1">
+                {room.name}
+              </h3>
+              <p className="text-primary font-bold text-xl mb-2">{room.price}</p>
+              <p className="text-sm text-muted-foreground mb-4">{room.description}</p>
+              <Button variant="outline" className="w-full" asChild>
+                <a href={room.link} target="_blank" rel="noopener noreferrer">
+                  Reservar en el hotel <ExternalLink className="w-4 h-4 ml-1" />
+                </a>
+              </Button>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  </section>
+);
+
+export default HotelSection;