style: refine ticket scaling, set Odisseo color to white, fix slider alignment

Author: eddndev

public/images/boletos/arema.jpg

@@ -117,19 +117,21 @@ const displayIcons = [...iconNames, ...iconNames, ...iconNames, ...iconNames];
     width: 100%;
     overflow: hidden;
     position: relative;
-    height: 60px;
+    height: 40px;
     background: transparent;
   }
 
   .slider-track {
     display: flex;
+    align-items: center;
     width: max-content;
     will-change: transform;
+    height: 100%;
   }
 
   .slider-item {
     flex-shrink: 0;
-    height: 30px; /* Consistently 40px height */
+    height: 40px; /* Consistent height */
     width: auto; /* Dynamic width */
     display: flex;
     align-items: center;

public/images/boletos/puntos_venta.jpg

@@ -207,13 +207,7 @@ const HeartSeparator = `
             });
 
             link.addEventListener("mouseleave", () => {
-                // Keep Odisseo accent color if not hovered, otherwise white
-                if (link.classList.contains("accent-headline")) {
-                    (link as HTMLElement).style.color =
-                        "var(--color-dango-orange)";
-                } else {
-                    (link as HTMLElement).style.color = "";
-                }
+                (link as HTMLElement).style.color = "";
             });
         });
 
@@ -321,7 +315,7 @@ const HeartSeparator = `
 
     .accent-headline {
         font-size: 4rem; /* 80px */
-        color: var(--color-dango-orange);
+        color: #fff;
     }
 
     .mid {

src/components/IconSlider.astro

@@ -1,3 +1,20 @@
+---
+import DangoLogo from "./DangoLogo.astro";
+
+const ticketOptions = [
+    {
+        image: "/images/boletos/arema.jpg",
+        label: "AREMA",
+        href: "https://arema.mx/e/16435/Festival-Dango-2026",
+    },
+    {
+        image: "/images/boletos/puntos_venta.jpg",
+        label: "PUNTOS DE VENTA",
+        href: "#", // Placeholder if no specific link
+    },
+];
+---
+
 <section id="boletos" class="tickets-section">
     <div
         class="container mx-auto px-4 h-full flex flex-col relative z-10 pt-20 pb-20 md:pb-0"
@@ -14,15 +31,38 @@
         <div
             class="w-full flex flex-col md:flex-row justify-center items-center gap-6 flex-grow"
         >
-            <!-- Placeholder 1 -->
-            <div class="ticket-placeholder">
-                <!-- Empty for now -->
-            </div>
+            {
+                ticketOptions.map((ticket) => (
+                    <a
+                        href={ticket.href}
+                        target={ticket.href.startsWith("http") ? "_blank" : "_self"}
+                        rel={ticket.href.startsWith("http") ? "noopener noreferrer" : ""}
+                        class="ticket-card group relative block overflow-hidden w-full max-w-[350px] aspect-[3/4]"
+                    >
+                        {/* Image */}
+                        <img
+                            src={ticket.image}
+                            alt={ticket.label}
+                            class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
+                        />
+
+                        {/* Dark Overlay (removes on hover) */}
+                        <div class="absolute inset-0 bg-black/40 transition-opacity duration-300 group-hover:opacity-0" />
+
+                        {/* Logo Top Left */}
+                        <div class="absolute top-6 left-6 w-16 text-white z-10 opacity-90">
+                            <DangoLogo />
+                        </div>
 
-            <!-- Placeholder 2 -->
-            <div class="ticket-placeholder">
-                <!-- Empty for now -->
-            </div>
+                        {/* Text Bottom Left */}
+                        <div class="absolute bottom-6 left-6 z-10">
+                            <span class="text-white font-bold text-3xl font-outfit tracking-widest drop-shadow-lg">
+                                {ticket.label}
+                            </span>
+                        </div>
+                    </a>
+                ))
+            }
         </div>
     </div>
 </section>
@@ -35,14 +75,14 @@
     document.addEventListener("astro:page-load", () => {
         const section = document.querySelector(".tickets-section");
         const title = section?.querySelector(".section-title");
-        const placeholders = section?.querySelectorAll(".ticket-placeholder");
+        const cards = section?.querySelectorAll(".ticket-card");
 
-        if (!section || !title || !placeholders) return;
+        if (!section || !title || !cards) return;
 
         const tl = gsap.timeline({
             scrollTrigger: {
                 trigger: section,
-                start: "top 80%", // Start when top of section hits 80% viewport height
+                start: "top 80%",
                 toggleActions: "play none none reverse",
             },
         });
@@ -55,17 +95,17 @@
             ease: "power3.out",
         });
 
-        // Animate Placeholders (Staggered)
+        // Animate Cards (Staggered)
         tl.from(
-            placeholders,
+            cards,
             {
                 y: 100,
                 opacity: 0,
                 duration: 1,
                 stagger: 0.2,
                 ease: "power3.out",
             },
-            "-=0.5", // Overlap with title animation
+            "-=0.5",
         );
     });
 </script>
@@ -89,26 +129,4 @@
     .section-title span {
         color: #fff;
     }
-
-    /* Image Placeholders */
-    .ticket-placeholder {
-        width: 100%;
-        max-width: 350px;
-        aspect-ratio: 3/4;
-        background-color: #1a1a1a;
-        /* Borders removed */
-        position: relative;
-    }
-
-    .ticket-placeholder::after {
-        content: "Imagen";
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        color: #333;
-        font-family: var(--font-outfit);
-        text-transform: uppercase;
-        font-size: 1.5rem;
-    }
 </style>