start something stylish 🐷💅 add sass, create layout components, sort styles and components into folders

web/src/components/layout/Footer.tsx

@@ -0,0 +1,19 @@
+"use client";
+import Link from "next/link";
+import styles from "./footer.module.scss";
+
+export const Footer = () => {
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <footer className={styles.footer}>
+      <p>Footer med kontaktinfo og sånt</p>
+      <button onClick={scrollToTop}>Til toppen</button>
+    </footer>
+  );
+};

web/src/components/layout/Header.tsx

@@ -0,0 +1,35 @@
+"use client";
+import { useState } from "react";
+import Link from "next/link";
+import styles from "./header.module.scss";
+
+export const Header = () => {
+  const [showMenu, setShowMenu] = useState(false);
+  function toggleMenu() {
+    setShowMenu(!showMenu);
+  }
+
+  return (
+    <header className={styles.header}>
+      <Link href="/" aria-label="Hjem">
+        <h1 className={styles.logo}>Chateau Neuf</h1>
+      </Link>
+      <nav className={styles.siteMenu} data-show={showMenu}>
+        <ul>
+          <li>
+            <Link href="/arrangementer">Arrangementer</Link>
+          </li>
+          <li>
+            <Link href="/">Praktisk info</Link>
+          </li>
+          <li>
+            <Link href="/">Utleie</Link>
+          </li>
+          <li>
+            <Link href="/">Bli medlem</Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  );
+};

web/src/components/layout/footer.module.scss

@@ -0,0 +1,11 @@
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding: var(--spacing-sitepadding);
+  background: #ccc;
+
+  a {
+    text-decoration: none;
+  }
+}

web/src/components/layout/header.module.scss

@@ -0,0 +1,24 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: var(--spacing-sitepadding);
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.logo {
+  font-size: 3rem;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+.siteMenu {
+  ul {
+    list-style: none;
+    display: flex;
+    gap: var(--spacing-sitepadding);
+  }
+}