add address section with google map

web/src/app/[...url]/page.tsx

@@ -4,6 +4,7 @@ import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
 import { notFound } from "next/navigation";
 import { PageHeader } from "@/components/general/PageHeader";
+import { AddressSection } from "@/components/blocks/AddressSection";
 
 export const dynamicParams = false;
 
@@ -72,14 +73,12 @@ export default async function Page({ params }: { params: { url: string[] } }) {
   if (!page) {
     return notFound();
   }
-  
+
   return (
     <main className="site-main" id="main">
-      <PageHeader
-        heading={page.title}
-        lead={page.lead}
-      />
+      <PageHeader heading={page.title} lead={page.lead} />
       <Blocks blocks={page.body} />
+      {page.title === "Praktisk info" && <AddressSection />}
     </main>
   );
 }

web/src/components/blocks/AddressSection.tsx

@@ -0,0 +1,31 @@
+import styles from "./addressSection.module.scss";
+
+export const AddressSection = () => {
+  return (
+    <div className={styles.addressSection}>
+      <div className={styles.text}>
+        <h2>Adresse</h2>
+        <div>
+          Det Norske Studentersamfund
+          <br />
+          Slemdalsveien 15
+          <br />
+          0369 Oslo
+          <br />
+          <br />
+          <a href="#" target="_blank">
+            Vis i Google Maps
+          </a>
+        </div>
+      </div>
+      <div className={styles.map}>
+        <iframe
+          src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1999.063860494329!2d10.7136789!3d59.9310825!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46416dc4aae9a79f%3A0xcacc32c6d9c43be6!2sChateau%20Neuf%2C%200369%20Oslo!5e0!3m2!1sen!2sno!4v1719477745808!5m2!1sen!2sno"
+          width="600"
+          height="360"
+          loading="lazy"
+        ></iframe>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,59 @@
+.addressSection {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  column-gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-gap-row);
+  align-items: flex-start;
+  container-type: inline-size;
+  margin-bottom: var(--spacing-gap-row);
+}
+
+.text {
+  grid-column: 2 / span 4;
+
+  h2 {
+    margin: 0 0 var(--spacing-s);
+    max-width: var(--size-width-p);
+  }
+
+  a {
+    text-decoration-thickness: .1rem;
+    text-decoration-color: var(--color-goldenOrange);
+    font-weight: 500;
+    transition: text-decoration-color var(--transition-easing);
+
+    &:hover {
+      text-decoration-color: currentColor;
+    }
+  }
+}
+
+.map {
+  grid-column: 6 / span 6;
+
+  iframe {
+    border: none;
+    width: 100%;
+    height: auto;
+    min-height: 16rem;
+  }
+}
+
+@media (max-width: 1200px) {
+
+  .text {
+    grid-column: 1 / span 5;
+  }
+
+  .map {
+    grid-column: 6 / span 7;
+  }
+}
+
+@container (max-width: 800px) {
+
+  .text,
+  .map {
+    grid-column: 1 / -1;
+  }
+}