add lead and anchor to booking page

src/css/base.scss

@@ -55,7 +55,7 @@ p {
     font-size: 1.3rem;
     text-align: center;
     line-height: 1.3;
-    margin-bottom: 4rem;
+    margin-bottom: 3rem;
   }
 }
 

src/css/venues.scss

@@ -1,5 +1,14 @@
+.venue-list {
+  h2 {
+    max-width: $width-m;
+    margin: 6rem auto 1rem;
+    text-align: center;
+  }
+}
+
 .venue {
   text-align: center;
+  margin-bottom: 2rem;
 
   ul, p {
     text-align: left;
@@ -15,6 +24,14 @@
       margin-bottom: 1.2rem;
     }
   }
+
+  &-anchor {
+    display: block;
+    width: 100%;
+    max-width: $width-m;
+    margin: 0 auto 1rem;
+    text-align: center;
+  }
 }
 
 .venue-page {
@@ -56,8 +73,8 @@
 
 .venue-featured-image {
   width: 36rem;
-  max-width: calc(100% + 2rem);
-  margin: 0 -1rem 1rem;
+  max-width: 100%;
+  margin: 0 auto 1rem;
 }
 
 @media (min-width: $media-l) {
@@ -65,6 +82,9 @@
     display: inline-block;
     width: 48%;
   }
+  .venue-text {
+    padding-left: 2rem;
+  }
   .venue-featured-image {
     max-width: 100%;
     vertical-align: top;
@@ -75,6 +95,19 @@
   }
 }
 
+@media (min-width: $media-xl) {
+  .venue-text {
+    padding-left: 0;
+  }
+}
+
+@media (max-width: $media-s) {
+  .venue-featured-image {
+    max-width: calc(100% + 2rem);
+    margin: 0 -1rem 1rem;
+  }
+}
+
 .neuf-map {
   max-width: $width-l;
   margin: 2rem auto;

src/pages/booking.js

@@ -26,7 +26,8 @@ export const bookingPageQuery = graphql`
 
 const VenueList = ({ venues }) => {
   return (
-    <div className="venue-list">
+    <div className="venue-list" id="venue-list">
+      <h2>Våre lokaler</h2>
       {venues.map(({ node: venue }) => (
         <VenueTemplate
           key={venue.id}
@@ -59,6 +60,10 @@ export const BookingPage = () => {
       <Helmet title="Utleie" />
       <section className="booking-page">
         <h1 className="page-title">{title}</h1>
+        <p className="lead">
+          Chateau Neuf har lokaler til diverse arrangementer, og alle våre lokaler er tilgjengelige for utleie, både for studenter, utdanningsinstitusjoner og andre. Vi har blant annet huset Spellemannsprisen og Dalai Lama!
+        </p>
+        <a className="venue-anchor" href="#venue-list">Hopp til lokalene</a>
         <div
           className="page-content wp-content"
           dangerouslySetInnerHTML={{ __html: content }}
@@ -68,15 +73,7 @@ export const BookingPage = () => {
           <h2>Se utvalgte lokaler i vår 3D-løsning</h2>
           <p>
             Med vår 3D-løsning har du muligheten til å navigere deg rundt på
-            huset! Du kan bevege deg mellom etasjer ved å trykke på tallene i den
-            lille kolonnen nederst til høyre. Dra deg rundt fra rom til rom ved å
-            klikke dit du vil, og bruk den røde og hvite krystallen i høyre hjørne
-            til å få opptil en 360 graders rotasjon i alle rom. Pluss- og minus-
-            knappene i høyre hjørne kan brukes for å zoome inn eller ut. På denne
-            måten får du en rask og god oversikt over lokalene, og får et solid
-            innblikk i hvordan rommene ser ut. Vi har valgt at løsningen starter i
-            øverste etasje i Storsalen - men ta gjerne en titt på lokalene i alle
-            etasjer!
+            huset! Du kan bevege deg mellom etasjer ved å trykke på tallene i lille kolonnen nederst til høyre. Dra deg rundt fra rom til rom ved å klikke dit du vil, og bruk den røde og hvite krystallen i høyre hjørne til å få opptil en 360 graders rotasjon i alle rom. Pluss- og minus-knappene i høyre hjørne kan brukes for å zoome inn eller ut. På denne måten får du en rask og god oversikt over lokalene, og får et solid innblikk i hvordan rommene ser ut. Vi har valgt at løsningen starter i øverste etasje i Storsalen - men ta gjerne en titt på lokalene i alle etasjer!
           </p>
         </div>
         <iframe