add generic page header component, person section component with headings, ++

web/src/components/general/PageHeader.tsx

@@ -0,0 +1,10 @@
+import styles from "./pageHeader.module.scss";
+
+export const PageHeader = ({ heading }: { heading: string }) => {
+  return (
+    <div className={styles.pageHeader}>
+      <h1 className={styles.title}>{heading}</h1>
+      <p className="lead">Lead</p>
+    </div>
+  );
+};

web/src/components/general/pageHeader.module.scss

@@ -0,0 +1,3 @@
+.pageHeader {
+  position: relative;
+}

web/src/components/layout/Header.tsx

@@ -24,7 +24,7 @@ export const Header = () => {
             <Link href="/">Praktisk info</Link>
           </li>
           <li>
-            <Link href="/">Utleie</Link>
+            <Link href="/utleie">Utleie</Link>
           </li>
           <li>
             <Link href="/">Bli medlem</Link>
@@ -45,7 +45,7 @@ export const Header = () => {
             <Link href="/">Praktisk info</Link>
           </li>
           <li className={styles.menuItemLarge}>
-            <Link href="/">Utleie</Link>
+            <Link href="/utleie">Utleie</Link>
           </li>
           <li className={styles.menuItemLarge}>
             <Link href="/">Bli medlem</Link>

web/src/components/people/PersonSection.tsx

@@ -0,0 +1,11 @@
+import { PersonList } from "./PersonList";
+import styles from "./personSection.module.scss";
+
+export const PersonSection = ({ heading }: { heading: string }) => {
+  return (
+    <section className={styles.personSection}>
+      <h2 className={styles.heading}>{heading}</h2>
+      <PersonList />
+    </section>
+  );
+};

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

@@ -0,0 +1,17 @@
+.personSection {
+  background: var(--color-background-secondary);
+  margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
+  padding: var(--spacing-sitepadding);
+
+  +.personSection {
+    margin-top: calc(var(--spacing-sitepadding)*-2);
+  }
+
+  &:nth-of-type(even) {
+    background: var(--color-background);
+  }
+}
+
+.heading {
+  margin: 2rem 0;
+}