Links & pictures

src/components/MixedBookingSection.tsx

@@ -3,9 +3,10 @@ import { motion } from "framer-motion";
 import { MIXED_BOOKING_PACKAGES, ROOM_TYPES, getFullPassPrice } from "@/data/event-data";
 import type { RoomType } from "@/data/event-data";
 import { useTranslation } from "react-i18next";
-import { Check, Star, Circle, CheckCircle2 } from "lucide-react";
+import { Check, Star, Circle, CheckCircle2, ExternalLink } from "lucide-react";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
 
 const FEATURED_PASS = "full";
 const NON_HOTEL_FEE = 50;
@@ -200,6 +201,24 @@ const MixedBookingSection = () => {
                       </li>
                     ))}
                   </ul>
+                  <Button
+                    asChild
+                    className={`w-full rounded-xl font-medium py-2.5 ${
+                      isFeatured
+                        ? "bg-gradient-tropical hover:bg-gradient-tropical/90 text-primary-foreground"
+                        : "bg-primary hover:bg-primary/90 text-primary-foreground"
+                    }`}
+                  >
+                    <a
+                      href="https://hotel-donangel.com/zouklambada-barcelona-2026/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center justify-center gap-2"
+                    >
+                      {t("mixedBooking.goToReservations")}
+                      <ExternalLink className="w-4 h-4" />
+                    </a>
+                  </Button>
                 </div>
               </motion.div>
             );