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

web/src/app/lokaler/[slug]/page.tsx

@@ -1,6 +1,9 @@
 import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
+import { ImageSliderBlock } from "@/components/blocks/ImageSliderBlock";
 import Image from "@/components/general/Image";
+import { NeufMap } from "@/components/venues/NeufMap";
+import { VenueInfo } from "@/components/venues/VenueInfo";
 import { graphql } from "@/gql";
 import { VenueFragment } from "@/gql/graphql";
 import { notFound } from "next/navigation";
@@ -47,11 +50,60 @@ export default async function Page({ params }: { params: { slug: string } }) {
   const venue = (data?.venue ?? {}) as VenueFragment;
   const featuredImage: any = venue.featuredImage;
 
+  // remove when real content is ready
+  const placeholderBlock = {
+    id: "d3971f38-32f9-46aa-9d56-9e69d2765cdc",
+    blockType: "ImageSliderBlock",
+    field: "image_slider",
+    images: [
+      {
+        image: {
+          id: "7",
+          url: "https://cms.neuf.kult.444.no/media/original_images/22-06-02a_Storsalen_BR55620_FotoHelgeBrekke_SauXqU1.jpg",
+          width: 1024,
+          height: 683,
+          alt: "",
+          attribution: "Helge Brekke",
+          __typename: "CustomImage",
+        },
+        text: "",
+        __typename: "ImageSliderItemBlock",
+      },
+      {
+        image: {
+          id: "6",
+          url: "https://cms.neuf.kult.444.no/media/original_images/biblioteket_zPrxTfl.jpg",
+          width: 1200,
+          height: 800,
+          alt: "Biblioteket, inkl. boksamlingen og griseportretter",
+          attribution: "",
+          __typename: "CustomImage",
+        },
+        text: "For et fint bilde! Dette er bildetekst i et bildegalleri.",
+        __typename: "ImageSliderItemBlock",
+      },
+      {
+        image: {
+          id: "3",
+          url: "https://cms.neuf.kult.444.no/media/original_images/ABBAfever-22_websize-e1714644654899_kTNzMdU.jpg",
+          width: 1200,
+          height: 904,
+          alt: "",
+          attribution: "",
+          __typename: "CustomImage",
+        },
+        text: "For et fint bilde! Dette er bildetekst i et bildegalleri. Jeg lurer også på hvordan det ser ut når bildeteksten går over flere linjer, så her er muligens en test av det. Det kommer sikkert litt an på skjermstørrelsen, men når jeg skriver såpass langt som dette er jeg garantert minst to linjer tror jeg!",
+        __typename: "ImageSliderItemBlock",
+      },
+    ],
+    __typename: "ImageSliderBlock",
+  };
+
   return (
     <main className="site-main" id="main">
-      <section className="page-header">
-        <h1>{venue.title}</h1>
-        {featuredImage && (
+      <ImageSliderBlock block={placeholderBlock} hero />
+      <h1 className="page-title">{venue.title}</h1>
+      {/*featuredImage && (
           <Image
             src={featuredImage.url}
             alt={featuredImage.alt}
@@ -59,51 +111,10 @@ export default async function Page({ params }: { params: { slug: string } }) {
             height={featuredImage.height}
             sizes="100vw"
           />
-        )}
-      </section>
-      <section className="pageContent">
-        <Blocks blocks={venue.body} />
-        <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>
-      </section>
+        )*/}
+      <Blocks blocks={venue.body} />
+      <VenueInfo venue={venue} />
+      <NeufMap venueSlug={venue.slug} />
     </main>
   );
 }

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);
+  }
+}

web/src/css/base.scss

@@ -122,6 +122,10 @@ h6 {
   }
 }
 
+img {
+  max-width: 100%;
+}
+
 button,
 .button {
   display: inline-block;

web/src/css/variables.scss

@@ -48,6 +48,7 @@
   --spacing-gap-column: 2rem;
   --spacing-gap-row: 1.5rem;
   --spacing-l: 3rem;
+  --spacing-xl: 6rem;
   --spacing-section-bottom: var(--spacing-l);
 
   // sizes