Venue Logistics / City Sections

src/components/VenueLogisticsSectionSecondVersion.astro

@@ -0,0 +1,234 @@
+---
+import type { City, VenueLogisticsSectionNewVersion } from "../lib/content";
+
+
+interface Props {
+  content: Record<City, VenueLogisticsSectionNewVersion>;
+}
+
+const { content } = Astro.props;
+
+
+const allCitiesLogistics = Object.values(content);
+---
+
+{
+  allCitiesLogistics.map((cityData) => (
+    <div
+      data-city-box
+      {...{ [`data-city-${cityData.CityTitle.toLowerCase()}-box`]: true }}
+    >      
+      <div class="Box">
+        <h1 class="hero-city-title">{cityData.CityTitle}</h1>
+        <p class="hero-city-intro">{cityData.intro}</p>
+      </div>
+      {cityData.section.map((item) => (
+        <div class="Box">
+          <h3 class="hero-city-section-title">{item.title}</h3>
+          <ul>
+            {item.bullets.map((bullet) => (
+              <li class="hero-city-section-bullet">{bullet}</li>
+            ))}
+          </ul>
+
+          {item.externalLink && item.externalLink.length > 0 && (
+            <div class="btn-group">
+              {item.externalLink.map((link) => (
+                <a
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="btn btn-primary"
+                >
+                  {link.text}
+                </a>
+              ))}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  ))
+}
+
+<style>
+  .hidden-city {
+    display: none !important;
+  }
+
+  .Box {
+    width: 80%; 
+    margin: 0 auto;
+    padding: 10px; 
+    background: transparent;
+    border: 1px solid rgba(255, 193, 77, 0.8);
+    border-radius: 8px; 
+    box-sizing: border-box; 
+    margin-bottom: 5px;
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+  }
+  .Box:hover {
+  transform: scale(1.01); 
+  box-shadow: 0 4px 10px rgba(255, 193, 77, 0.25); 
+}
+
+  .hero-city-title {
+    font-size: 2.5rem;
+    font-family: "Squada One", system-ui, sans-serif;
+    color: rgb(255, 193, 77);
+    margin: 0 0 0.5rem 0;
+    line-height: 1;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    opacity: 1;
+    display: block;
+  }
+
+  .hero-city-intro {
+    font-size: 1rem;
+    font-family: "Squada One", system-ui, sans-serif;
+    color: white;
+    margin: 0 0 0.5rem 0;
+    line-height: 1;
+    letter-spacing: 0.02em;    
+    opacity: 1;
+    display: block;
+  }
+
+  .hero-city-section-title {
+    font-size: 1.5rem;
+    font-family:
+      "Noto Sans",
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      sans-serif;
+    color: rgb(249, 215, 174);
+    margin: 0 0 0.5rem 0;
+    line-height: 1;
+    letter-spacing: 0.02em;
+
+    opacity: 1;
+    display: block;
+  }
+  .hero-city-section-bullet {
+    font-size: 0.8rem;
+    font-family:
+      "Noto Sans",
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      sans-serif;
+    color: rgb(221, 220, 220);
+    margin: 0 0 0.5rem 0;
+    line-height: 2;
+    letter-spacing: 0.02em;
+
+    opacity: 1;
+    display: block;
+  }
+
+  .btn-group {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .btn {
+    padding: 0.85rem 2rem;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    border: none;
+    display: inline-block;
+  }
+
+  .btn-primary {
+    background: rgb(255, 193, 77);
+    color: black;
+  }
+
+  .btn-primary:hover {
+    background: rgb(240, 175, 60);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
+  }
+
+  .btn-secondary {
+    background: transparent;
+    color: white;
+    border: 2px solid white;
+  }
+
+  .btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.1);
+    transform: translateY(-2px);
+  }
+
+  .section-divider {
+    width: 100%;
+
+    margin: 0.5rem auto; 
+    border-bottom: 1px solid rgba(255, 255, 255, 0.15); 
+  }
+</style>
+
+<script>
+  import { string } from "astro:schema";
+  import { getCityStore } from "../lib/cityStore";
+
+  // Run when DOM is ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initCityAwareNav);
+  } else {
+    initCityAwareNav();
+  }
+
+  function toggleVenueLogistics() {
+    const cityStore = getCityStore();
+    const currentCity = cityStore.getCity();
+    const boxNameForHide = `[data-city-box]`;
+    const allBoxesHide = document.querySelectorAll(boxNameForHide);
+    allBoxesHide.forEach((box) => {
+      box.classList.add("hidden-city");
+    });
+    const boxNameForShow = `[data-city-${currentCity}-box]`;
+    const allBoxesShow = document.querySelectorAll(boxNameForShow);
+    allBoxesShow.forEach((box) => {
+      box.classList.remove("hidden-city");
+    });
+  }
+
+  function clearVenueSection() {
+    document.querySelectorAll("[data-logistics-delete]").forEach((el) => {
+      el.innerHTML = "";
+    });
+  }
+
+  function initCityAwareNav() {
+    const cityStore = getCityStore();
+    cityStore.init();
+
+    // Update ticket URL on initial load
+    toggleVenueLogistics();
+
+    // Subscribe to city changes
+    cityStore.subscribe((city: City) => {
+      toggleVenueLogistics();
+    });
+  }
+</script>