add news to front page and move people to contact page

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}>
-      <NewsItem />
-      <NewsItem />
-      <NewsItem />
-      <NewsItem />
-      <NewsItem />
-      <NewsItem />
-      <NewsItem />
-      <NewsItem />
-      <NewsItem />
-    </ul>
+    <section className={styles.newsWrapper}>
+      {heading && <h2 className="suphead">{heading}</h2>}
+      <ul className={`${styles.newsList} ${featured && styles.featured}`}>
+        {limit === 3 ? (
+          <>
+            <NewsItem />
+            <NewsItem />
+            <NewsItem />
+          </>
+        ) : (
+          <>
+            <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;
+      }
+    }
+  }
 }