feat(SW-190): added hero to static content pages

components/MaxWidth/index.tsx

@@ -1,17 +1,21 @@
 "use client"
-import { cva } from "class-variance-authority"
 
-import styles from "./maxWidth.module.css"
+import { maxWidthVariants } from "./variants"
 
 import type { MaxWidthProps } from "@/types/components/max-width"
 
-const maxWidthVariants = cva(styles.container)
-
 export default function MaxWidth({
   className,
   tag = "section",
+  variant,
+  align,
   ...props
 }: MaxWidthProps) {
   const Cmp = tag
-  return <Cmp className={maxWidthVariants({ className })} {...props} />
+  return (
+    <Cmp
+      className={maxWidthVariants({ className, variant, align })}
+      {...props}
+    />
+  )
 }

components/MaxWidth/maxWidth.module.css

@@ -1,4 +1,20 @@
 .container {
-  max-width: var(--max-width, 1140px);
   position: relative;
 }
+
+.container.default {
+  max-width: var(--max-width, 1140px);
+}
+
+.container.text {
+  max-width: 49.5rem;
+}
+
+.container.content {
+  max-width: 74.75rem;
+}
+
+.container.center {
+  margin: 0 auto;
+  width: 100vh;
+}

components/MaxWidth/variants.ts

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./maxWidth.module.css"
+
+export const maxWidthVariants = cva(styles.container, {
+  variants: {
+    variant: {
+      text: styles.text,
+      content: styles.content,
+      default: styles.default,
+    },
+    align: {
+      center: styles.center,
+      left: styles.left,
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    align: "center",
+  },
+})