some page section design progress

web/src/app/medlem/page.tsx

@@ -8,8 +8,10 @@ import { IconListBlock } from "@/components/blocks/IconListBlock";
 export default async function Page() {
   return (
     <main className="site-main" id="main">
-      <PageHeader heading="Bli medlem" />
-      <p className="lead">Som medlem kan du... får du... glede og samvær</p>
+      <PageHeader
+        heading="Bli medlem"
+        lead="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie tortor a interdum blandit. Sed ac purus sit amet libero posuere molestie."
+      />
       <p>
         <a
           href="https://galtinn.neuf.no/register"

web/src/app/praktisk/page.tsx

@@ -4,17 +4,18 @@ import { getClient } from "@/app/client";
 import Link from "next/link";
 import { PageHeader } from "@/components/general/PageHeader";
 import { IconListBlock } from "@/components/blocks/IconListBlock";
+import { PageSection } from "@/components/blocks/PageSection";
 
 export default async function Page() {
   return (
     <main className="site-main" id="main">
-      <PageHeader heading="Praktisk info" />
-      <p className="lead">
-        Velkommen til oss! Enten du skal på teater, konsert, foredrag, eller er
+      <PageHeader
+        heading="Praktisk info"
+        lead="Velkommen til oss! Enten du skal på teater, konsert, foredrag, eller er
         student eller pensjonist, gleder vi oss til å se deg på Chateau Neuf.
         Her finner du informasjon om hvordan du kommer deg til oss, og hva vi
-        kan by på av tjenester.
-      </p>
+        kan by på av tjenester."
+      />
       <div className="anchorLinks">
         <span className="circlehead">Hopp til:</span>
         <ul>
@@ -60,6 +61,12 @@ export default async function Page() {
           </li>
         </ul>
       </div>
+      <PageSection
+        heading="Adkomst"
+        subheading="Hvordan kommer man seg til Neuf?"
+      />
+      <PageSection heading="Åpningstider" />
+      <PageSection />
       <section className="pageSection" id="adkomst">
         <h1>Adkomst</h1>
         <div className="pageSectionGroup">

web/src/app/utleie/page.tsx

@@ -22,13 +22,13 @@ export default async function Page() {
   return (
     <>
       <main className="site-main" id="main">
-        <PageHeader heading="Utleie" />
-        <p className="lead">
-          Chateau Neuf har lokaler til diverse arrangementer, og alle våre
+        <PageHeader
+          heading="Utleie"
+          lead="Chateau Neuf har lokaler til diverse arrangementer, og alle våre
           lokaler er tilgjengelige for utleie, både for studenter,
           utdanningsinstitusjoner og andre. Vi har blant annet huset
-          Spellemannsprisen og Dalai Lama!
-        </p>
+          Spellemannsprisen og Dalai Lama!"
+        />
         <p>Her kommer mer om utleiereglement etc.</p>
         <br />
         <br />

web/src/components/blocks/PageSection.tsx

@@ -0,0 +1,14 @@
+import styles from "./pageSection.module.scss";
+
+export const PageSection = ({ heading }: any) => {
+  return (
+    <section className={styles.pageSection}>
+      <div className={styles.sectionHeader}>
+        <div className={styles.icon}>
+          <img src="/assets/icons/neufneuf.svg" />
+        </div>
+        <h1>{heading}</h1>
+      </div>
+    </section>
+  );
+};

web/src/components/blocks/pageSection.module.scss

@@ -0,0 +1,48 @@
+.pageSection {
+  margin: 5rem auto;
+  padding: 2rem 0;
+  border-top: var(--border-s);
+
+  &:nth-of-type(3n+1) {
+    .icon {
+      background: var(--color-neufPink);
+    }
+  }
+
+  &:nth-of-type(3n+2) {
+    .icon {
+      background: var(--color-goldenBeige);
+    }
+  }
+
+  &:nth-of-type(3n+3) {
+    .icon {
+      background: var(--color-goldenOrange);
+    }
+  }
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+
+  h1 {
+    font-size: var(--font-size-h2);
+  }
+}
+
+.icon {
+  flex: none;
+  width: 3.4rem;
+  height: 3.4rem;
+  background: var(--color-goldenBeige);
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+  }
+}

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

@@ -1,5 +1,6 @@
 .pageHeader {
   position: relative;
+  padding: var(--spacing-l) 0 calc(var(--spacing-l) + var(--spacing-sitepadding));
 }
 
 .title {

web/src/css/variables.scss

@@ -26,6 +26,7 @@
   --color-goldenOrange: rgb(255, 105, 21);
   --color-goldenBeige: rgb(248, 188, 144);
   --color-chateauBlue: rgb(10, 15, 109);
+  --color-chateauBlue-05: rgba(10, 15, 109, .5);
   --color-white: #fff;
   --color-black: rgb(22, 21, 22);
 
@@ -46,7 +47,8 @@
   --spacing-sitepadding: 2rem;
   --spacing-gap-column: 2rem;
   --spacing-gap-row: 1.5rem;
-  --spacing-section-bottom: 3rem;
+  --spacing-l: 3rem;
+  --spacing-section-bottom: var(--spacing-l);
 
   // sizes
   --size-width-p: 36rem;
@@ -55,4 +57,5 @@
   --transition-easing: .3s ease;
 
   --border: 1px solid var(--color-neufPink);
+  --border-s: 1px solid var(--color-chateauBlue-05);
 }