feat: introduce VenueWTC component and dynamically render travel venue information based on route parameters, adding new images and minor styling adjustments.

Author: anyulled

public/images/wtc-auditorio.jpg

@@ -44,8 +44,9 @@ const StyledTitle = styled.h1`
   }
 `;
 
-const StyledSubTitle = styled.p`
+const StyledSubTitle = styled.h2`
   color: ${(props) => props.color ?? Color.WHITE};
+  margin-top: 1rem;
   @media (min-width: 480px) {
     width: 70%;
   }

public/images/wtc.jpg

@@ -23,7 +23,7 @@ export const ROUTE_SESSION_FEEDBACK = "/session-feedback";
 export const ROUTE_TALK_DETAIL = "/talk";
 export const ROUTE_WORKSHOPS = "/workshops";
 export const ROUTE_MEETING_DETAIL_PLAIN = "/talk/:id";
-export const ROUTE_TRAVEL = "/travel";
+export const ROUTE_TRAVEL = ":id/travel";
 export const ROUTE_ACCOMMODATION = "/accommodation";
 
 // 2026

src/components/SectionTitle/TitleSection.tsx

@@ -1,12 +1,12 @@
-import React, { FC } from "react";
+import { useParams } from "react-router";
 import { Venue } from "./Venue";
 import { ToBarcelona } from "./ToBarcelona";
-import data from "@data/2024.json";
 import { StyledWaveContainer } from "../Speakers/Speakers.style";
 import { styled } from "styled-components";
 import { Color } from "@styles/colors";
 import { Accommodation } from "./Accommodation";
 import { useDocumentTitleUpdater } from "@hooks/useDocumentTitleUpdate";
+import { VenueWTC } from "./VenueWTC";
 
 const StyledTravel = styled.div`
   max-width: 85rem;
@@ -33,11 +33,14 @@ const StyledTravel = styled.div`
 `;
 
 const Travel: FC<React.PropsWithChildren<unknown>> = () => {
-  useDocumentTitleUpdater("Travel", data.edition);
+  const { id } = useParams<{ id: string }>();
+  const edition = id || "2026";
+
+  useDocumentTitleUpdater("Travel", edition);
   return (
     <StyledTravel>
       <section>
-        <Venue />
+        {edition === "2026" ? <VenueWTC /> : <Venue />}
       </section>
       <section style={{ display: "none" }}>
         <Accommodation />

src/constants/routes.ts

@@ -0,0 +1,157 @@
+import React, { FC, Suspense } from "react";
+import "./map.css";
+import { styled } from "styled-components";
+import TitleSection from "@components/SectionTitle/TitleSection";
+import { Color } from "@styles/colors";
+import {
+  BIG_BREAKPOINT,
+  MAX_WIDTH,
+  MOBILE_BREAKPOINT,
+} from "@constants/BreakPoints";
+import { useWindowSize } from "react-use";
+import { StyledLoadingImage } from "@components/Loading/Loading";
+
+const StyledVenue = styled.div`
+  padding: 0.5rem 2rem 0.5rem;
+  text-align: left;
+  max-width: ${MAX_WIDTH}px;
+  margin: 0 auto;
+
+  @media (max-width: ${BIG_BREAKPOINT}px) {
+    padding: 100px 1rem 50px;
+  }
+
+  .image {
+    img.venue {
+      width: 95%;
+      margin: 0 2.5%;
+      text-align: center;
+    }
+
+    a,
+    p {
+      padding-left: 10px;
+    }
+
+    a {
+      text-decoration: none;
+      color: ${Color.DARK_BLUE};
+      font-weight: bold;
+    }
+  }
+
+  section.venue {
+    display: flex;
+    @media (max-width: ${BIG_BREAKPOINT}px) {
+      flex-direction: column;
+    }
+  }
+
+  h4 {
+    margin: 15px 0 3px 10px;
+  }
+
+  .image,
+  .map {
+    width: 50%;
+    @media (max-width: ${BIG_BREAKPOINT}px) {
+      width: 100%;
+    }
+  }
+`;
+
+const StyledTrainLine = styled.span`
+  background-color: #00f200;
+  font-weight: bold;
+  padding: 1px 2px;
+  font-family: sans-serif;
+  font-size: 12px;
+`;
+export const StyledLessIcon = styled.img`
+  position: absolute;
+  left: -1rem;
+  top: 5rem;
+  height: 5rem;
+
+  @media (min-width: ${BIG_BREAKPOINT}px) {
+    height: 10rem;
+  }
+`;
+export const StyledMoreIcon = styled.img`
+  position: absolute;
+  right: -1rem;
+  top: 5rem;
+  height: 5rem;
+
+  @media (min-width: ${BIG_BREAKPOINT}px) {
+    height: 10rem;
+  }
+`;
+
+export const VenueWTC: FC<React.PropsWithChildren<unknown>> = () => {
+  const { width } = useWindowSize();
+  return (
+    <StyledVenue>
+      <TitleSection
+        title={"Venue"}
+        subtitle={"World Trade Center, Barcelona"}
+        color={Color.DARK_BLUE}
+      />
+      {width > MOBILE_BREAKPOINT && (
+        <>
+          <StyledLessIcon src="/images/MoreThanBlueWhiteIcon.svg" />
+          <StyledMoreIcon src="/images/LessThanBlueWhiteIcon.svg" />
+        </>
+      )}
+      <section className="venue">
+        <div className="image">
+          <Suspense fallback={<StyledLoadingImage src="/images/logo.svg" />}>
+            <img
+              src="/images/wtc.jpg"
+              style={{ aspectRatio: "285/173" }}
+              alt="World Trade Center, Barcelona"
+              className="venue"
+            />
+          </Suspense>
+          <a
+            href="https://www.wtcbarcelona.com/"
+            rel="noreferrer"
+            target="_blank"
+            title="World Trade Center, Barcelona"
+          >
+            World Trade Center, Barcelona
+          </a>
+          <p>
+            1ª planta Edif. Este, Moll de Barcelona, s/n, 08039 Barcelona
+          </p>
+          <h4>Access by public transportation</h4>
+          <p>🚇 Metro: Líneas L3: Parada Drassanes, Línea L2: Parada Paral·lel.</p>
+          <p>
+            🚍 Bus: Línea V11, parada Moll de Barcelona.
+          </p>
+          <p>
+            🚙 Access by <strong>car:</strong> via C-31 & B-10(14 minutes from the
+            Airport)
+          </p>
+          <h4>Paid parking options</h4>
+          <p>
+            <a
+              href="https://www.wtcbarcelona.com/"
+              rel="noreferrer"
+              target="_blank"
+            >
+              World Trade Center, Barcelona
+            </a>
+          </p>
+        </div>
+        <div className="map">
+          <img
+            src="/images/wtc-auditorio.jpg"
+            alt="Venue entrance"
+            style={{ maxWidth: "100%" }}
+          />
+        </div>
+      </section>
+    </StyledVenue>
+  );
+};