add venue map and style tables and make a placeholder image gallery

web/src/components/blocks/ImageSliderBlock.tsx

@@ -13,11 +13,13 @@ import "./swiper.scss";
 
 export const ImageSliderBlock = ({
   block,
+  hero,
 }: {
   block: ImageSliderBlockType;
+  hero?: boolean;
 }) => {
   return (
-    <div className={styles.imageSliderBlock}>
+    <div className={styles.imageSliderBlock} data-hero={hero}>
       <Swiper
         pagination={{
           type: "fraction",

web/src/components/blocks/imageSliderBlock.module.scss

@@ -1,5 +1,6 @@
 .imageSliderBlock {
-  height: 90vh;
+  position: relative;
+  padding-top: 56%;
   background: var(--color-black);
   color: var(--color-goldenBeige);
   margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
@@ -38,4 +39,8 @@
   &:last-child {
     margin-bottom: 0;
   }
+
+  &[data-hero] {
+    margin-top: calc(var(--spacing-sitepadding)* -2);
+  }
 }

web/src/components/blocks/swiper.scss

@@ -1,6 +1,8 @@
 .swiper {
   width: 100%;
   height: 100%;
+  position: absolute;
+  top: 0;
 }
 
 .swiper-button-next,

web/src/components/people/personList.module.scss

@@ -6,13 +6,13 @@
   padding-bottom: var(--spacing-section-bottom);
 }
 
-@media (min-width: 700px) {
+@media (min-width: 740px) {
   .personList {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 1340px) {
   .personList {
     grid-template-columns: repeat(3, 1fr);
   }

web/src/components/venues/NeufMap.tsx

@@ -0,0 +1,24 @@
+import styles from "./neufMap.module.scss";
+
+export const NeufMap = ({ venueSlug }: { venueSlug: string }) => {
+  return (
+    <section className={styles.neufMap}>
+      <div className={styles.floorItem}>
+        <span className={styles.floorHeading}>Kjeller</span>
+        <img src="/assets/graphics/map/kjeller.svg" />
+      </div>
+      <div className={styles.floorItem}>
+        <span className={styles.floorHeading}>1. etasje</span>
+        <img src="/assets/graphics/map/etg1.svg" />
+      </div>
+      <div className={styles.floorItem}>
+        <span className={styles.floorHeading}>2. etasje</span>
+        <img src="/assets/graphics/map/etg2.svg" />
+      </div>
+      <div className={styles.floorItem}>
+        <span className={styles.floorHeading}>3. etasje</span>
+        <img src="/assets/graphics/map/etg3.svg" />
+      </div>
+    </section>
+  );
+};

web/src/components/venues/VenueInfo.tsx

@@ -0,0 +1,51 @@
+import { VenueFragment } from "@/gql/graphql";
+import styles from "./venueInfo.module.scss";
+import Link from "next/link";
+import Image from "../general/Image";
+
+export const VenueInfo = ({ venue }: { venue: VenueFragment }) => {
+  return (
+    <div className={styles.venueInfo}>
+      <table>
+        <tbody>
+          <tr>
+            <th>Etasje</th>
+            <td>{venue.floor}</td>
+          </tr>
+          <tr>
+            <th>Branntillatelse for</th>
+            <td>{venue.capacityLegal}</td>
+          </tr>
+          <tr>
+            <th>Stående</th>
+            <td>{venue.capacityStanding}</td>
+          </tr>
+          <tr>
+            <th>Sittende</th>
+            <td>{venue.capacitySitting}</td>
+          </tr>
+          <tr>
+            <th>Bruk</th>
+            <td>TODO</td>
+          </tr>
+          <tr>
+            <th>Bar</th>
+            <td>{venue.capabilityBar}</td>
+          </tr>
+          <tr>
+            <th>Lyd</th>
+            <td>{venue.capabilityLighting}</td>
+          </tr>
+          <tr>
+            <th>Lys</th>
+            <td>{venue.capabilityLighting}</td>
+          </tr>
+          <tr>
+            <th>A/V</th>
+            <td>{venue.capabilityAudioVideo}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+};

web/src/components/venues/VenueItem.tsx

@@ -21,7 +21,15 @@ export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
       </div>
       <div className={styles.text}>
         <h1 className={styles.title}>{venue.title}</h1>
-        <p className={styles.details}>Detaljer om lokalet</p>
+        <div className={styles.details}>
+          Egner seg for:
+          <br />
+          <span className={styles.people}>50—115 personer</span>
+          <br />
+          <span className={styles.uses}>
+            Konsert, foredrag, fest, debatt, teater, filmvisning
+          </span>
+        </div>
       </div>
       <Link href={`/lokaler/${venue.slug}`} className="hiddenLink">
         Mer om lokalet {venue.title}

web/src/components/venues/neufMap.module.scss

@@ -0,0 +1,13 @@
+.neufMap {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-sitepadding);
+  width: 100%;
+  max-width: 1000px;
+  margin: var(--spacing-xl) auto;
+}
+
+.floorHeading {
+  color: var(--color-deepBrick);
+  font-weight: 600;
+}

web/src/components/venues/venueInfo.module.scss

@@ -0,0 +1,27 @@
+.venueInfo {
+  max-width: var(--size-width-p);
+  margin: 1rem auto 2rem;
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  tr {
+    border-bottom: var(--border);
+  }
+
+  th {
+    text-align: left;
+    width: 11rem;
+  }
+
+  th,
+  td {
+    padding: .5rem 0;
+  }
+
+  td {
+    //font-family: var(--font-serif);
+  }
+}