misc design progress and testing

web/src/components/contact/ContactInfo.tsx

@@ -0,0 +1,22 @@
+import styles from "./contactInfo.module.scss";
+
+export const ContactInfo = () => {
+  return (
+    <section className={styles.contactInfo}>
+      <ul>
+        <li className={styles.contactItem}>
+          <strong>Generelle henvendelser</strong>
+          <a href="mailto:post@neuf.no">post@neuf.no</a>
+        </li>
+        <li className={styles.contactItem}>
+          <strong>Billetter</strong>
+          <a href="mailto:billetter@neuf.no">billetter@neuf.no</a>
+        </li>
+        <li className={styles.contactItem}>
+          <strong>Hittegods</strong>
+          <a href="mailto:hittegods@neuf.no">hittegods@neuf.no</a>
+        </li>
+      </ul>
+    </section>
+  );
+};

web/src/components/contact/contactInfo.module.scss

@@ -0,0 +1,28 @@
+.contactInfo {
+  margin: 0 calc(var(--spacing-sitepadding)*-1);
+  padding: var(--spacing-sitepadding) var(--spacing-sitepadding) var(--spacing-section-bottom);
+  background: var(--color-background-secondary);
+
+  ul {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: var(--spacing-gap-column);
+    row-gap: var(--spacing-gap-row);
+  }
+}
+
+.contactItem {
+  list-style: none;
+
+  strong {
+    display: block;
+    font-size: var(--font-size-caption);
+  }
+
+  a {
+    display: block;
+    font-family: var(--font-serif);
+    font-size: var(--font-size-lead);
+    color: var(--color-deepBrick);
+  }
+}