add news to front page and move people to contact page

web/src/app/kontakt/page.tsx

@@ -0,0 +1,20 @@
+import { graphql } from "@/gql";
+//import { NewsFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
+import { NewsList } from "@/components/news/NewsList";
+import Link from "next/link";
+import { PageHeader } from "@/components/general/PageHeader";
+import { PersonSection } from "@/components/people/PersonSection";
+
+export default async function Page() {
+  return (
+    <main className="site-main" id="main">
+      <PageHeader
+        heading="Kontakt"
+        lead="Her er info om hvordan du kan kontakte oss og sånt."
+      />
+      <PersonSection heading="Styret" />
+      <PersonSection heading="Administrasjonen" />
+    </main>
+  );
+}

web/src/app/page.tsx

@@ -25,9 +25,8 @@ export default async function Home() {
       <div>
         <FeaturedEvents events={events} />
         <UpcomingEvents events={events} />
+        <NewsList heading="Siste nytt" limit={3} featured />
         <blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
-        <PersonSection heading="Styret" />
-        <PersonSection heading="Administrasjonen" />
       </div>
     </main>
   );

web/src/components/general/PageHeader.tsx

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

web/src/components/layout/Header.tsx

@@ -122,7 +122,7 @@ export const Header = () => {
             </Link>
           </li>
           <li>
-            <Link href="/" data-active={pathname === "/kontakt"}>
+            <Link href="/kontakt" data-active={pathname === "/kontakt"}>
               Kontakt
             </Link>
           </li>

web/src/components/news/NewsList.tsx

@@ -1,18 +1,39 @@
 import { NewsItem } from "./NewsItem";
 import styles from "./newsList.module.scss";
 
-export const NewsList = () => {
+export const NewsList = ({
+  heading,
+  featured,
+  limit,
+}: {
+  heading: string;
+  featured: boolean;
+  limit: number;
+}) => {
   return (
-    <ul className={styles.newsList}>
+    <section className={styles.newsWrapper}>
-      <NewsItem />
+      {heading && <h2 className="suphead">{heading}</h2>}
-      <NewsItem />
+      <ul className={`${styles.newsList} ${featured && styles.featured}`}>
-      <NewsItem />
+        {limit === 3 ? (
-      <NewsItem />
+          <>
-      <NewsItem />
+            <NewsItem />
-      <NewsItem />
+            <NewsItem />
-      <NewsItem />
+            <NewsItem />
-      <NewsItem />
+          </>
-      <NewsItem />
+        ) : (
-    </ul>
+          <>
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+          </>
+        )}
+      </ul>
+    </section>
   );
 };

web/src/components/news/newsList.module.scss

@@ -1,9 +1,18 @@
+.newsWrapper {
+  background: var(--color-background-secondary);
+  margin: 0 calc(var(--spacing-sitepadding)*-1);
+  padding: var(--spacing-sitepadding);
+
+  h2 {
+    margin-bottom: 1rem;
+  }
+}
+
 .newsList {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   column-gap: var(--spacing-gap-column);
   row-gap: var(--spacing-gap-row);
-  padding-bottom: var(--spacing-section-bottom);
 
   li {
     grid-column: span 3;
@@ -31,4 +40,17 @@
       }
     }
   }
+
+  &.featured {
+    li {
+
+      &:nth-child(1),
+      &:nth-child(2),
+      &:nth-child(3),
+      &:nth-child(4),
+      &:nth-child(5) {
+        grid-column: span 4;
+      }
+    }
+  }
 }