Merge pull request #36 from rustnl/hotel-suggestions

WIP: feat: added basic hotel component

src/components/page/footer.astro

@@ -10,7 +10,6 @@
         <a href="/unconf">Unconf</a> 
         <!-- <a href="/workshops">Workshops</a> -->
         <a href="/code-of-conduct">Code of conduct</a>
-        <a href="/accessibility">Accessibility</a>
         <!-- <a href="/directions">Directions</a> -->
         <!-- <a href="/health-brief">Health and Safety Policy</a> -->
         <!-- <a href="/directions">Getting to the Venue</a> -->

src/components/page/menu.astro

@@ -57,7 +57,18 @@ const { location }: Props = Astro.props;
             <a href="/kinepolis">Conference venue</a>
           </li>
         </ul>
-      </li>
+    </li>
+    <li class="parent">
+      <span>Practical&nbsp;info</span>
+      <ul class="submenu">
+        <li class="child">
+          <a href="/hotels">Hotels</a>
+        </li>
+        <li class="child">
+          <a href="/accessibility">Accessibility</a>
+        </li>
+      </ul>
+    </li>
     <li class="parent">
       <span>About</span>
       <ul class="submenu">

src/components/practical-info/hotels/Hotel.astro

@@ -0,0 +1,83 @@
+---
+
+interface Props {
+    name: string;
+    link: string;
+    image: string;
+    distance_kinepolis: string;
+    price_range: string;
+    description: string;
+}
+
+const { name, link, image, description, distance_kinepolis, price_range } = Astro.props;
+
+---
+
+<div class="hotel">
+    <div class="image-container">
+        <a href={link}><img src={`/images/hotels/${image}`} alt={`Picture of ${name} hotel`} /></a>
+    </div>
+    <div>
+        <a href={link}><h4>{name}</h4></a>
+        <ul>
+            <li>{price_range} / night</li>
+            <li>{distance_kinepolis} from venue</li>
+        </ul>
+        <p class="description">{description}</p>
+    </div>
+</div>
+
+<style lang="scss">
+    @import "../../../styles/breakpoint.scss";
+    @import "../../../styles/variables.scss";
+
+    .hotel {
+        display: flex;
+        flex-direction: column;
+        gap: 1em;
+
+        a {
+            color: inherit;
+            text-decoration: underline;
+            display: inline-block;
+        }
+
+        h4 {
+            font-size: $font-size-md;
+            font-weight: $font-weight-light;
+            line-height: $line-height-tight;
+
+            margin-bottom: 0;
+            margin-top: 0.2em;
+
+            min-height: 3rem;
+        }
+
+        ul {
+            padding-left: 1rem;
+            font-size: $font-size-sm;
+            font-weight: bold;
+        }
+
+        .description {
+            margin-top: 0.5em;
+            font-size: $font-size-sm;
+        }
+
+        .image-container {
+            position: relative;
+
+            img {
+                align-self: center;
+                border-radius: 0.3em;
+                height: auto;
+                vertical-align: middle;
+                object-fit: cover;
+                width: 100%;
+                background: $color-yellow-400;
+
+                aspect-ratio: 1/1;
+            }
+        }
+    }
+</style>

src/components/practical-info/hotels/HotelList.astro

@@ -0,0 +1,12 @@
+<div class="hotels container">
+    <slot />
+</div>
+
+<style>
+    .hotels {
+        display: grid;
+        gap: 2em;
+        grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr));
+        margin-block-end: 3rem;
+    }
+</style>

src/pages/hotels-all-hands.astro

@@ -0,0 +1,63 @@
+---
+import HotelList from "../components/practical-info/hotels/HotelList.astro";
+import Hotel from "../components/practical-info/hotels/Hotel.astro";
+import CommonLayout from "../layouts/CommonLayout.astro";
+---
+
+<CommonLayout
+    title="All Hands Hotels"
+    header="All Hands Hotels"
+    withLogo
+>
+
+    <div class="space-y-6">
+      <section class="container md:grid md:cols-12">
+          <div
+              class="abouttext md:col-start-3 md:col-end-11 xl:col-start-4 xl:col-end-10"
+          >
+              <p>
+                We have selected 3 hotels and reserved blocks of rooms for the All Hands participants. Breakfast included and flexible cancellation. 
+              </p>
+              <p>
+                The hotel links below will take you to custom booking page created for us, with favourable rates.  
+              </p>
+              <p>
+                Please note that the 'NH Amersfoort' is <strong>not</strong> in Utrecht, but in the nearby, beautiful city of Amersfoort. Amersfoort is a 12 min train ride to Utrecht.
+              </p>
+              <p>
+                  All the distances mentioned on this page refer to the shortest
+                  path when walking and/or making use of public transport.
+              </p>
+              <p>
+                  If you're looking for more hotel options, have a look at our <a href="/hotels">other hotel recommendations</a>.
+              </p>
+          </div>
+      </section>
+      <HotelList>
+          <Hotel
+                name="NH Amersfoort"
+                link="https://www.nh-hotels.com/en/event/rustweek-2025-nh-amersfoort"
+                image="nh-amersfoort.jpg"
+                distance_kinepolis="31 min"
+                price_range="160€"
+                description="Neat hotel close to the station in Amersfoort. Short commute by train to Utrecht, but on the more affordable side. 25 rooms reserved"
+          />
+          <Hotel
+              name="Moxy Utrecht"
+              link="https://www.marriott.com/event-reservations/reservation-link.mi?id=1738165935863&key=GRP&guestreslink2=true&app=resvlink"
+              image="moxy.avif"
+              distance_kinepolis="13 min"
+              price_range="200-220€"
+              description="A trendy hotel with a morden vibe. Provides meeting rooms, co-working facilities and a bar. 50 rooms reserved."
+          />
+          <Hotel
+              name="NH Utrecht (Jaarbeursplein)"
+              link="https://www.nh-hotels.com/en/event/rustweek-2025"
+              image="nh-utrecht.jpg"
+              distance_kinepolis="7 min"
+              price_range="235-250€"
+              description="Sleek hotel in the center of Utrecht. Short walk to the conference venue. 50 rooms reserved."
+          />
+      </HotelList>
+    </div>
+</CommonLayout>

src/pages/hotels.astro

@@ -0,0 +1,176 @@
+---
+import HotelList from "../components/practical-info/hotels/HotelList.astro";
+import Hotel from "../components/practical-info/hotels/Hotel.astro";
+import CommonLayout from "../layouts/CommonLayout.astro";
+---
+
+<CommonLayout
+    title="Hotels"
+    header="Hotels"
+    withLogo
+>
+
+    <div class="space-y-6">
+      <section class="container md:grid md:cols-12">
+          <div
+              class="abouttext md:col-start-3 md:col-end-11 xl:col-start-4 xl:col-end-10"
+          >
+              <p>
+                  For convenience, we've compiled a list of hotel recommendations
+                  in and around Utrecht.
+              </p>
+              <p>
+                  All the distances mentioned on this page refer to the shortest
+                  path when walking or making use of public transport.
+              </p>
+              <p>
+                  Prices and availability can change quickly; May is a popular holiday time. We will do our best to keep the list up to date.
+              </p>
+              <p>
+                  If you can't find affordable options in Utrecht, consider staying in one
+                  of the surrounding cities. By train you'll be in Utrecht in
+                  under 20 min.
+                  <br />
+                  We have added a couple of suggestions in the listing <a
+                      href="#around-utrecht">"Around Utrecht"</a
+                  > below.
+              </p>
+          </div>
+      </section>
+      <h2 id="utrecht" class="text-center">Utrecht</h2>
+      <HotelList>
+          <Hotel
+              name="Bunk Utrecht"
+              link="https://wearebunk.com/utrecht/nl/"
+              image="bunk.jpg"
+              distance_kinepolis="16 min"
+              price_range="50€(shared)-150€(private)"
+              description="Trendy hotel in the centre of Utrecht. Offers facilities for meetings and families."
+          />
+          <Hotel
+              name="2L De Blend"
+              link="https://2ldeblend.nl/nl/"
+              image="deblend.jpg"
+              distance_kinepolis="22 min"
+              price_range="~140€ (studio) - 200€ (suite)"
+              description="Hotel with studios and suites with a fully equipped kitchen. Affordable prices. Close to both conference and workshop venue. Apply 'RustWeek20' for a 20% discount on studios."
+          />
+          <!-- <Hotel
+              name="Moxy Utrecht"
+              link="https://www.marriott.com/en-us/hotels/amsou-moxy-utrecht/overview/"
+              image="moxy.avif"
+              distance_kinepolis="13 min"
+              price_range="200-230€"
+              description="A trendy hotel with a morden vibe. Provides meeting rooms, co-working facilities and a bar."
+          /> -->
+          <!-- <Hotel
+              name="NH Utrecht (Jaarbeursplein)"
+              link="https://www.nh-hotels.com/nl/hotel/nh-utrecht"
+              image="nh-utrecht.jpg"
+              distance_kinepolis="7 min"
+              price_range="200-250€"
+              description="Sleek hotel in the center of Utrecht. Short walk to the conference venue."
+          /> -->
+          <Hotel
+              name="Hampton by Hilton"
+              link="https://www.hilton.com/nl/hotels/amsunhx-hampton-utrecht-central-station/"
+              image="hilton.jpeg"
+              distance_kinepolis="13 min"
+              price_range="200-240€"
+              description="Modern hotel very close to the central station of Utrecht. Short walk to the conference venue. Part of the Hoog Caterijne shopping complex."
+          />
+          <Hotel
+              name="Crowne Plaza"
+              link="https://www.ihg.com/crowneplaza/hotels/nl/nl/utrecht/utcur/hoteldetail/"
+              image="crowne-plaza.jpeg"
+              distance_kinepolis="15 min"
+              price_range="200-250€"
+              description="Central and modern hotel close to the station. Provides meeting rooms and a 24/7 gym."
+          />
+          <Hotel
+              name="Van der Valk Utrecht"
+              link="https://www.vandervalkhotelutrecht.nl/"
+              image="vdv.jpg"
+              distance_kinepolis="18 min"
+              price_range="200-250€"
+              description="Neat hotel slightly outside of Utrecht (on the A12); easy to reach by car. Comfortable and modern rooms. Includes a wellness centre."
+          />
+          <Hotel
+              name="Park Plaza"
+              link="https://www.parkplazautrecht.nl/"
+              image="park-plaza.jpg"
+              distance_kinepolis="9 min"
+              price_range="200-250€"
+              description="Trendy hotel in the centre of Utrecht. Offers facilities for meetings and families."
+          />
+          <Hotel
+              name="Inntel Hotel Utrecht"
+              link="https://www.inntelhotelsutrechtcentre.nl/"
+              image="inntel.jpg"
+              distance_kinepolis="12 min"
+              price_range="250-300€"
+              description="Very central, more luxurious hotel. Not suitable for large groups."
+          />
+      </HotelList>  
+      <section class="container md:grid md:cols-12">
+        <div
+        class="abouttext md:col-start-3 md:col-end-11 xl:col-start-4 xl:col-end-10"
+        >
+              <h2 id="around-utrecht" class="text-center">Around Utrecht</h2>
+              <p>
+                  You can reach Utrecht quickly from the surrounding cities. When
+                  you book a hotel near a central train station you can be at Utrecht Central Station in ~ 20 min and at the <a
+                      href="/kinepolis/">conference venue</a
+                  > in 30-40 minutes (~ 10 min walk).
+              </p>
+              <p>
+                  Examples of train station with more affordable hotels nearby: Bunnik (8 minutes train ride), Bilthoven (9 minutes), Amersfoort (13 minutes),
+                  Hilversum (17 minutes), Amsterdam Zuid (22 minutes), or Schiphol
+                  Airport (33 minutes).
+              </p>
+          </div>
+      </section>
+      <HotelList>
+          <Hotel
+              name="Amrâth Hotel Media Park Hilversum"
+              link="https://www.booking.com/hotel/nl/tulipinnhilversum.nl.html?label=gen173nr-1BCAEoggI46AdIM1gEaKkBiAEBmAEcuAEZyAEM2AEB6AEBiAIBqAIDuAK-wMm8BsACAdICJGFhYjYwZDE3LTU0NDMtNDYxNS1hODM3LWI4ODE2Y2MxOTg1OdgCBeACAQ&sid=7c7dec01c9077633555d6da5ed24e404&aid=304142&ucfs=1&checkin=2025-05-12&checkout=2025-05-13&dest_id=-2146221&dest_type=city&group_adults=2&no_rooms=1&group_children=0&matching_block_id=1073702_0_2_0_0&atlas_src=sr_iw_title"
+              image="hilversum1.png"
+              distance_kinepolis="40 min"
+              price_range="120-140€"
+              description="Neat hotel close to the central station in Hilversum. Short commute by train to Utrecht, but on the more affordable side."
+          />
+          <Hotel
+              name="NH Amersfoort"
+              link="https://www.nh-hotels.com/nl/hotel/nh-amersfoort"
+              image="nh-amersfoort.jpg"
+              distance_kinepolis="31 min"
+              price_range="120-140€"
+              description="Neat hotel close to the station in Amersfoort. Short commute by train to Utrecht, but on the more affordable side."
+          />
+          <Hotel
+              name="Amrâth Hotel Lapershoek Arenapark"
+              link="https://www.booking.com/hotel/nl/lapershoek.nl.html?aid=304142&label=gen173nr-1FCAEoggI46AdIM1gEaKkBiAEBmAEcuAEZyAEM2AEB6AEB-AEMiAIBqAIDuAK-wMm8BsACAdICJGFhYjYwZDE3LTU0NDMtNDYxNS1hODM3LWI4ODE2Y2MxOTg1OdgCBuACAQ&sid=49bd407dd21ee21301e75e8841c59faa&all_sr_blocks=1045902_95128904_0_34_0&checkin=2025-05-12&checkout=2025-05-15&dest_id=-2146221&dest_type=city&dist=0&group_adults=1&group_children=0&hapos=1&highlighted_blocks=1045902_95128904_0_34_0&hpos=1&matching_block_id=1045902_95128904_0_34_0&no_rooms=1&req_adults=1&req_children=0&room1=A&sb_price_type=total&sr_order=popularity&sr_pri_blocks=1045902_95128904_0_34_0__33544&srepoch=1738008032&srpvid=b4918cad1b740779&type=total&ucfs=1&"
+              image="hilversum-arenapark.png"
+              distance_kinepolis="40 min"
+              price_range="120-150€"
+              description="Neat hotel close to the 'Hilversum Sportpark' station in Hilversum. Short commute by train to Utrecht, but on the more affordable side."
+          />
+          <Hotel
+              name="Postillion Utrecht Bunnik"
+              link="https://www.postillionhotels.com/utrecht/"
+              image="postillion-bunnik.png"
+              distance_kinepolis="34 min"
+              price_range="120-150€"
+              description="Neat hotel close to the station in Bunnik. Short commute by train to Utrecht, but on the more affordable side."
+          />
+          <Hotel
+              name="Mercure Hotel Amersfoort Centre"
+              link="https://www.mercureamersfoort.nl/en/"
+              image="mercure-amersfoort.png"
+              distance_kinepolis="40 min"
+              price_range="130-150€"
+              description="Neat hotel close to the station in Amersfoort. Short commute by train to Utrecht, but on the more affordable side."
+          />      
+      </HotelList>
+    </div>
+</CommonLayout>

src/styles/global/global.scss

@@ -20,10 +20,14 @@ body {
     background-color: variables.$color-background;
     color: variables.$color-black;
     font-family: variables.$font-family;
-    font-size: variables.$font-size-md;
+    font-size: 1.0625rem;
 
     font-weight: 300;
     line-height: variables.$line-height-normal;
+
+    @include breakpoint.wider_than(sm) {
+        font-size: variables.$font-size-md;
+    }
 }
 
 h1,