some page section design progress

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 {