add general contact block

web/src/app/kontakt/page.tsx

@@ -3,6 +3,7 @@ import { ContactIndexFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { PageHeader } from "@/components/general/PageHeader";
 import { PageContent } from "@/components/general/PageContent";
+import { GeneralContactBlock } from "@/components/blocks/GeneralContactBlock";
 
 const ContactIndexDefinition = graphql(`
   fragment ContactIndex on ContactIndex {
@@ -32,6 +33,7 @@ export default async function Page() {
   return (
     <main className="site-main" id="main">
       <PageHeader heading={index.title} lead={index.lead} />
+      <GeneralContactBlock />
       {index.body && <PageContent blocks={index.body} />}
     </main>
   );

web/src/components/blocks/GeneralContactBlock.tsx

@@ -0,0 +1,29 @@
+//import { GeneralContactBlock as GeneralContactBlockType } from "@/gql/graphql";
+import styles from "./generalContactBlock.module.scss";
+import { Blocks } from "./Blocks";
+
+export const GeneralContactBlock = ({/*
+  block,
+}: {
+  block: GeneralContactBlockType;
+*/}) => {
+  return (
+    <section className={styles.generalContact}>
+      {/*<Blocks blocks={block.items} />*/}
+      <ul>
+        <li>
+          <span className={styles.label}>Generelle henvendelser</span>
+          <a href="mailto:post@neuf.no" target="_blank">post@neuf.no</a>
+        </li>
+        <li>
+          <span className={styles.label}>Billetter</span>
+          <a href="mailto:billetter@neuf.no" target="_blank">billetter@neuf.no</a>
+        </li>
+        <li>
+          <span className={styles.label}>Hittegods</span>
+          <a href="mailto:hittegods@neuf.no" target="_blank">hittegods@neuf.no</a>
+        </li>
+      </ul>
+    </section>
+  );
+};

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

@@ -15,6 +15,10 @@
   &:last-child {
     margin-bottom: 0;
   }
+
+  &:first-child {
+    margin-top: 0;
+  }
 }
 
 .heading {

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

@@ -0,0 +1,38 @@
+.generalContact {
+  margin: calc(var(--spacing-sitepadding-block)*2)
+    calc(var(--spacing-sitepadding-inline) * -1) 0;
+  padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
+  background: var(--color-goldenBeige);
+
+  ul {
+    list-style: none;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: var(--spacing-gap-column);
+    row-gap: var(--spacing-gap-row);
+  }
+
+  a {
+    font-family: var(--font-serif);
+    font-size: var(--font-size-lead);
+
+    &:hover {
+      color: var(--color-deepBrick);
+      opacity: 1;
+    }
+  }
+}
+
+.label {
+  font-weight: 600;
+  display: block;
+}
+
+@media (max-width: 800px) {
+  .generalContact {
+    ul {
+      grid-template-columns: 1fr;
+      row-gap: calc(var(--spacing-gap-row)*2);
+    }
+  }
+}