Styling of home

components/shared/Section/Section.module.css

@@ -0,0 +1,33 @@
+.content {
+    max-width: 80ch;
+    margin: 0 auto;
+    padding-block: 2em;
+    text-align: justify;
+
+    --color-bg: var(--md-sys-color-background);
+    --color-text: var(--md-sys-color-on-background);
+}
+
+.primary {
+    --color-bg: var(--md-sys-color-primary-container);
+    --color-text: var(--md-sys-color-on-primary-container);
+}
+
+.secondary {
+    --color-bg: var(--md-sys-color-secondary-container);
+    --color-text: var(--md-sys-color-on-secondary-container);
+}
+
+.tertiary {
+    --color-bg: var(--md-sys-color-tertiary-container);
+    --color-text: var(--md-sys-color-on-tertiary-container);
+}
+
+.primary,
+.secondary,
+.tertiary {
+    background-color: var(--color-bg);
+    box-shadow: 0 0 0 100vmax var(--color-bg);
+    clip-path: inset(0 -100vmax);
+    color: var(--color-text);
+}

components/shared/Section/Section.tsx

@@ -0,0 +1,26 @@
+import { createContext, FC, PropsWithChildren, useContext } from 'react'
+import styles from './Section.module.css'
+import cx from 'classnames'
+
+type SectionContextType = 'primary' | 'secondary' | 'tertiary' | undefined
+
+interface Props {
+  color?: SectionContextType
+}
+
+const SectionContext = createContext<SectionContextType>(undefined)
+export const useSectionColor = () => useContext(SectionContext)
+
+export const Section: FC<PropsWithChildren<Props>> = ({ color, children }) => {
+  return (
+    <div
+      className={cx(styles.content, {
+        [styles.primary]: color === 'primary',
+        [styles.secondary]: color === 'secondary',
+        [styles.tertiary]: color === 'tertiary'
+      })}
+    >
+      <SectionContext.Provider value={color}>{children}</SectionContext.Provider>
+    </div>
+  )
+}